fix(okam-build): fix class and style filter syntax not transform

ecomfe · Jan 21, 2019 · 28343e8 · 28343e8
1 parent db9f15e
commit 28343e8
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 27 deletions.
diff --git a/packages/okam-build/lib/processor/template/transform/ant/class.js b/packages/okam-build/lib/processor/template/transform/ant/class.js
@@ -7,8 +7,8 @@
 
 const transformClass = require('../base/class');
 
-module.exports = function (attrs, name, tplOpts, opts) {
+module.exports = function (attrs, name, tplOpts, opts, element) {
     transformClass(attrs, name, tplOpts, Object.assign({
         arrToStr: true
-    }, opts));
+    }, opts), element);
 };
diff --git a/packages/okam-build/lib/processor/template/transform/base/class.js b/packages/okam-build/lib/processor/template/transform/base/class.js
@@ -13,8 +13,9 @@
 'use strict';
 
 const {PLAIN_OBJECT_REGEXP, SQUARE_BRACKETS_REGEXP} = require('./constant');
+const {transformFilterSyntaxValue} = require('./filter');
 
-module.exports = function (attrs, name, tplOpts, opts) {
+module.exports = function (attrs, name, tplOpts, opts, element) {
     let value = attrs[name];
     let arrToStr = opts && opts.arrToStr;
     if (typeof value === 'string') {
@@ -37,7 +38,11 @@ module.exports = function (attrs, name, tplOpts, opts) {
         }
     }
 
-    value = `{{${value}}}`;
+    let {config, logger} = tplOpts;
+    let newValue = transformFilterSyntaxValue(
+        element, {name: 'class', value}, config, logger
+    );
+    value = `{{${newValue}}}`;
 
     // add up static class and dynamic class when there is class attribute
     attrs.class = attrs.hasOwnProperty('class') ? `${attrs.class} ${value}` : value;

diff --git a/packages/okam-build/lib/processor/template/transform/base/data-bind.js b/packages/okam-build/lib/processor/template/transform/base/data-bind.js
@@ -7,7 +7,7 @@
 'use strict';
 
 const {PLAIN_OBJECT_REGEXP, DATA_BIND_REGEXP} = require('./constant');
-const {transformPipeFilter} = require('./filter');
+const {transformFilterSyntaxValue} = require('./filter');
 
 /**
  * Transform data binding syntax
@@ -37,16 +37,10 @@ module.exports = function (attrs, name, tplOpts, opts, element) {
             }
         }
         else {
-            let filterOpts = config.filter;
-            let filterValue = filterOpts
-                ? transformPipeFilter(value, filterOpts, logger)
-                : value;
-            if (filterOpts && filterValue !== value) {
-                let filterAttrs = element._hasFilterAttrs || [];
-                element._hasFilterAttrs = filterAttrs;
-                filterAttrs.push(newName);
-            }
-            value = `{{${filterValue}}}`;
+            let newValue = transformFilterSyntaxValue(
+                element, {name: newName, value}, config, logger
+            );
+            value = `{{${newValue}}}`;
         }
     }
 

diff --git a/packages/okam-build/lib/processor/template/transform/base/filter.js b/packages/okam-build/lib/processor/template/transform/base/filter.js
@@ -53,6 +53,21 @@ function transformPipeFilter(value, filterOption, logger) {
     return callExpression;
 }
 
+function transformFilterSyntaxValue(element, attr, config, logger) {
+    let filterOpts = config.filter;
+    let {name, value} = attr;
+    let filterValue = filterOpts
+        ? transformPipeFilter(value, filterOpts, logger)
+        : value;
+    if (filterOpts && filterValue !== value) {
+        let filterAttrs = element._hasFilterAttrs || [];
+        element._hasFilterAttrs = filterAttrs;
+        filterAttrs.push(name);
+    }
+
+    return filterValue;
+}
+
 exports.FILTER_SYNTAX_REGEXP = FILTER_SYNTAX_REGEXP;
 
 exports.FILTER_NAME_WRAP_REGEXP = new RegExp(
@@ -62,7 +77,7 @@ exports.FILTER_NAME_WRAP_REGEXP = new RegExp(
     'g'
 );
 
-exports.transformPipeFilter = transformPipeFilter;
+exports.transformFilterSyntaxValue = transformFilterSyntaxValue;
 
 exports.transformTextNode = function (textNode, filterOptions, logger) {
     let data = textNode.data;

diff --git a/packages/okam-build/lib/processor/template/transform/base/style.js b/packages/okam-build/lib/processor/template/transform/base/style.js
@@ -12,9 +12,10 @@
 
 'use strict';
 
+const {transformFilterSyntaxValue} = require('./filter');
 const {CURLY_BRACE_HAS_REGEXP} = require('./constant');
 
-module.exports = function (attrs, name, tplOpts) {
+module.exports = function (attrs, name, tplOpts, opts, element) {
     let value = attrs[name];
     if (typeof value === 'string') {
         value = value.trim();
@@ -23,13 +24,20 @@ module.exports = function (attrs, name, tplOpts) {
         value = '';
     }
 
+    let wrapCurlyBrace = false;
     if (CURLY_BRACE_HAS_REGEXP.test(value)) {
         value = transformObjStyle(value);
     }
     else {
-        value = `{{${value}}}`;
+        wrapCurlyBrace = true;
     }
 
+    let {config, logger} = tplOpts;
+    let newValue = transformFilterSyntaxValue(
+        element, {name: 'style', value}, config, logger
+    );
+    value = wrapCurlyBrace ? `{{${newValue}}}` : newValue;
+
     if (attrs.style) {
         attrs.style = attrs.style + ';' + value;
     }

diff --git a/packages/okam-build/lib/processor/template/transform/quick/class.js b/packages/okam-build/lib/processor/template/transform/quick/class.js
@@ -7,8 +7,8 @@
 
 const transformClass = require('../base/class');
 
-module.exports = function (attrs, name, tplOpts, opts) {
+module.exports = function (attrs, name, tplOpts, opts, element) {
     transformClass(attrs, name, tplOpts, Object.assign({
         arrToStr: true
-    }, opts));
+    }, opts), element);
 };
diff --git a/packages/okam-build/lib/processor/template/transform/tt/class.js b/packages/okam-build/lib/processor/template/transform/tt/class.js
@@ -7,8 +7,8 @@
 
 const transformClass = require('../base/class');
 
-module.exports = function (attrs, name, tplOpts, opts) {
+module.exports = function (attrs, name, tplOpts, opts, element) {
     transformClass(attrs, name, tplOpts, Object.assign({
         arrToStr: true
-    }, opts));
+    }, opts), element);
 };
diff --git a/packages/okam-build/package.json b/packages/okam-build/package.json
@@ -18,7 +18,7 @@
     "wx:debug": "cd example/base && npm run dev:wx:debug",
     "test": "mocha --require intelli-espower-loader --require @babel/register \"test/tasks/**/*.spec.js\"",
     "test:coverage": "nyc npm run test",
-    "test:debug": "nyc mocha --inspect-brk --require intelli-espower-loader --require @babel/register \"test/tasks/**/*.spec.js\"",
+    "test:debug": "mocha --inspect-brk --require intelli-espower-loader --require @babel/register \"test/tasks/**/*.spec.js\"",
     "prepublish": "npm run lint && npm test"
   },
   "license": "MIT",

diff --git a/packages/okam-build/test/tasks/helper.js b/packages/okam-build/test/tasks/helper.js
@@ -15,13 +15,15 @@ const swanSyntax = require('okam/processor/template/plugins/syntax/swan-syntax-p
 const wxSyntax = require('okam/processor/template/plugins/syntax/wx-syntax-plugin');
 const antSyntax = require('okam/processor/template/plugins/syntax/ant-syntax-plugin');
 const ttSyntax = require('okam/processor/template/plugins/syntax/tt-syntax-plugin');
+const quickSyntax = require('okam/processor/template/plugins/syntax/quick-syntax-plugin');
 
 const html = require('okam/processor/template/plugins/tag-transform-plugin');
 const ref = require('okam/processor/template/plugins/ref-plugin');
 const swanEventPlugin = require('okam/processor/template/plugins/event/swan-event-plugin');
 const wxEventPlugin = require('okam/processor/template/plugins/event/wx-event-plugin');
 const antEventPlugin = require('okam/processor/template/plugins/event/ant-event-plugin');
 const ttEventPlugin = require('okam/processor/template/plugins/event/tt-event-plugin');
+const quickEventPlugin = require('okam/processor/template/plugins/event/quick-event-plugin');
 
 const swanModelPlugin = require('okam/processor/template/plugins/model/swan-model-plugin');
 const wxModelPlugin = require('okam/processor/template/plugins/model/wx-model-plugin');
@@ -122,6 +124,20 @@ const getDefaultTTPlugins = function () {
     ];
 };
 
+/**
+ * 获取默认的 quick 插件配置，使用函数形式避免缓存
+ *
+ * @return {Object} plugins config
+ */
+const getDefaultQuickPlugins = function () {
+    return [
+        vueSyntax,
+        quickSyntax,
+        quickEventPlugin,
+        ref
+    ];
+};
+
 /**
  * 获取默认的ant插件配置，使用函数形式避免缓存
  *
@@ -145,7 +161,8 @@ const PLUGIN_MAP = {
     swan: getDefaultPlugins,
     wx: getDefaultWXPlugins,
     ant: getDefaultAntPlugins,
-    tt: getDefaultTTPlugins
+    tt: getDefaultTTPlugins,
+    quick: getDefaultQuickPlugins
 };
 
 /**

diff --git a/packages/okam-build/test/tasks/processor/template/transform/base/filter.spec.js b/packages/okam-build/test/tasks/processor/template/transform/base/filter.spec.js
@@ -12,6 +12,7 @@ const templateProcessor = require('okam/processor/template/index');
 const wxFilterPlugin = require('okam/processor/template/plugins/filter/wx-filter-plugin');
 const swanFilterPlugin = require('okam/processor/template/plugins/filter/swan-filter-plugin');
 const antFilterPlugin = require('okam/processor/template/plugins/filter/ant-filter-plugin');
+const quickFilterPlugin = require('okam/processor/template/plugins/filter/quick-filter-plugin');
 
 describe('template filter transform', function () {
     it('should ignore not filter value', function () {
@@ -82,10 +83,67 @@ describe('template filter transform', function () {
         assert.equal(result.content, '<wxs src="./a.wxs" module="f0"></wxs><view s="{{f0.b(a,\'str\', 2)}}">{{f0.c(str)}}</view>');
     });
 
-    it('should convert ant filter value', function () {
+    it('should convert quick filter value', function () {
         const file = {
             path: 'test.js',
-            content: '<view :data-attr="a|b">{{ str|d| c}}</view>'
+            content: '<div><view :data-attr="a|b">{{ str|d| c}}</view>'
+                + '<view :style="size | b"></view>'
+                + '<view :class="item | abc | efg(true, 2)"></view></div>'
+        };
+
+        let opts = fakeProcessorOptions(null, null, 'quick');
+        opts.config.filter = {};
+        opts.config.plugins.push([
+            quickFilterPlugin, {filters: [{src: './a.filter.js', filters: ['b', 'c', 'd']}]}
+        ]);
+
+        let result = templateProcessor(file, opts);
+        assert.equal(
+            result.content,
+            '<div><view data-attr="{{f_b(a)}}"><text>{{f_c(f_d(str))}}</text></view><view style="{{f_b(size)}}"></view><view class="{{efg(abc(item),true, 2)}}"></view></div>'
+        );
+    });
+
+    it('should convert wx class/style filter value', function () {
+        const file = {
+            path: 'test.js',
+            content: '<view :class="a|b" :style="item|c(\'prefix\')">abc</view>'
+        };
+
+        let opts = fakeProcessorOptions(null, null, 'wx');
+        opts.config.filter = {};
+        opts.config.plugins.push([
+            wxFilterPlugin, {filters: [{src: './a.filter.js', filters: ['b', 'c', 'd']}]}
+        ]);
+        let result = templateProcessor(file, opts);
+        assert.equal(
+            result.content,
+            '<wxs src="./a.filter.js" module="f0"></wxs><view class="{{f0.b(a)}}" style="{{f0.c(item,\'prefix\')}}">abc</view>'
+        );
+    });
+
+    it('should convert swan class/style filter value', function () {
+        const file = {
+            path: 'test.js',
+            content: '<view :class="a|b" :style="style|c()|b(efg, true)">abc</view>'
+        };
+
+        let opts = fakeProcessorOptions(null, null, 'swan');
+        opts.config.filter = {};
+        opts.config.plugins.push([
+            swanFilterPlugin, {filters: [{src: './a.filter.js', filters: ['b', 'c', 'd']}]}
+        ]);
+        let result = templateProcessor(file, opts);
+        assert.equal(
+            result.content,
+            '<filter src="./a.filter.js" module="f0"></filter><view class="{{f0.b(a)}}" style="{{f0.b(f0.c(style),efg, true)}}">abc</view>'
+        );
+    });
+
+    it('should convert ant class/style filter value', function () {
+        const file = {
+            path: 'test.js',
+            content: '<view :style="value |d(has ? 2 : true)" :class="a|b">abc</view>'
         };
 
         let opts = fakeProcessorOptions(null, null, 'ant');
@@ -96,7 +154,7 @@ describe('template filter transform', function () {
         let result = templateProcessor(file, opts);
         assert.equal(
             result.content,
-            '<import-sjs from="./a.filter.js" name="f0"></import-sjs><view data-attr="{{f0.b(a)}}">{{f0.c(f0.d(str))}}</view>'
+            '<import-sjs from="./a.filter.js" name="f0"></import-sjs><view style="{{f0.d(value,has ? 2 : true)}}" class="{{f0.b(a)}}">abc</view>'
         );
     });
 });