Master bugfix (#41)

* window下数组目录多态校验报错

* bug-fix c-show component-is {{}}

* add path

* fix c-model space bug

* add keywords

* babelpolyfill

* fix 单元测试

* 模板编译单元测试

packages/chameleon-loader/src/interface-check/check.js

@@ -6,11 +6,12 @@
  * 2 写好处理default对象的方法
  * 3 拼接代码
  */
-
+const path = require('path');
 const parser = require('@babel/parser');
 const traverse = require('babel-traverse');
 const generate = require("babel-generator");
 const {getDefines, parsePlugins} = require('runtime-check');
+const cmlUtils = require('chameleon-tool-utils');
 
 /**
  * 处理对象的函数
@@ -333,6 +334,9 @@ function getCheckCode(interfaceCode, cmlCode, interfacePath, cmlPath, cmlType, e
   let result = '';
   let wrapperCode = '';
   if (interfacePath) {
+    interfacePath = path.resolve(interfacePath);
+    interfacePath = cmlUtils.handleWinPath(interfacePath);
+
     result += `const __INTERFACE__FILEPATH="${interfacePath}"`;
   }
   if (cmlType === 'weex') {

packages/chameleon-template-parse/src/common/process-template.js

@@ -183,6 +183,7 @@ exports.analyzeTemplate = function(source, options) {
 exports._operationMustache = function (content) {
   let mustacheReg = /{{([\s\S]*?)}}/g
   return content.replace(mustacheReg, function (match, key) {
+    key = exports._deOperationGtLt(key);
     return `_cml{${key}}lmc_`
   })
 }

packages/chameleon-template-parse/src/common/utils.js

@@ -8,6 +8,12 @@ const generate = require('@babel/generator')["default"];
 const weexMixins = require('chameleon-mixins/weex-mixins.js');
 _.trimCurly = (str) => str.replace(/(?:{{)|(?:}})/ig, '');
 
+_.getModelKey = function(modelKey) {
+  modelKey = _.trimCurly(modelKey);
+  modelKey = modelKey.trim();
+  return modelKey;
+}
+
 _.analysisFor = function (nodeValue) {
   // v-for="item in items"
   let reg1 = /\s*(.+?)\s+(?:in|of)\s+(.+)\s*/;

packages/chameleon-template-parse/src/parser/parse-directive.js

@@ -13,7 +13,7 @@ parseDirective.tap('web-weex-cml', (args) => {
     // 以下开始处理指令；
     // v-model c-model
     if (t.isJSXAttribute(node) && node.name.name === 'c-model') {
-      let modelKey = utils.trimCurly(node.value.value);
+      let modelKey = utils.getModelKey(node.value.value);
       path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`v-bind:value`), t.stringLiteral(modelKey)))
       path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`v-on:input`), t.stringLiteral(`${eventProxy.modelEventProxyName}($event,'${modelKey}')`)));
 
@@ -46,7 +46,12 @@ parseDirective.tap('web-weex-cml', (args) => {
       let elementShow = utils.trimCurly(showDirectiveNode.value.value);
 
       let styleNodeValue = `display:{{${elementShow}?'':'none'}};{{${elementShow}?'':'height:0px;width:0px;overflow:hidden'}}`
-      attributes.push(t.jsxAttribute(t.jsxIdentifier(`style`), t.stringLiteral(styleNodeValue)))
+      if (type === 'weex') {
+        attributes.push(t.jsxAttribute(t.jsxIdentifier(`style`), t.stringLiteral(styleNodeValue)))
+      } else if (type === 'web') {
+        attributes.push(t.jsxAttribute(t.jsxIdentifier(`v-show`), t.stringLiteral(elementShow)))
+      }
+
     }
   }
 });
@@ -55,7 +60,7 @@ parseDirective.tap('wx-baidu-cml', (args) => {
   if (lang === 'cml' && (type === 'wx' || type === 'baidu' || type === 'alipay')) {
     // c-model
     if (t.isJSXAttribute(node) && node.name.name === 'c-model') {
-      let modelKey = utils.trimCurly(node.value.value);
+      let modelKey = utils.getModelKey(node.value.value);
       path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`value`), t.stringLiteral(node.value.value)))
       if (type === 'alipay') {
         path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`bindInput`), t.stringLiteral(`${wxEventProxy.modelEventProxyName}`)))
@@ -103,7 +108,7 @@ parseDirective.tap('web-weex-vue', (args) => {
     // 以下开始处理指令；
     // v-model
     if (t.isJSXAttribute(node) && node.name.name === 'v-model') {
-      let modelKey = utils.trimCurly(node.value.value);
+      let modelKey = utils.getModelKey(node.value.value);
       path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`v-bind:value`), t.stringLiteral(modelKey)))
       path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`v-on:input`), t.stringLiteral(`${eventProxy.modelEventProxyName}($event,'${modelKey}')`)));
 
@@ -139,7 +144,12 @@ parseDirective.tap('web-weex-vue', (args) => {
       if (type === 'weex' && styleNodeValue.indexOf('_cmlStyleProxy') === -1) {
         styleNodeValue = `${weexMixins.styleProxyName}(${utils.getReactiveValue(styleNodeValue)})`
       }
-      attributes.push(t.jsxAttribute(t.jsxIdentifier(`:style`), t.stringLiteral(styleNodeValue)))
+      if (type === 'weex') {
+        attributes.push(t.jsxAttribute(t.jsxIdentifier(`:style`), t.stringLiteral(styleNodeValue)))
+      } else if (type === 'web') {
+        attributes.push(t.jsxAttribute(t.jsxIdentifier(`v-show`), t.stringLiteral(elementShow)))
+      }
+
     }
   }
 })
@@ -148,7 +158,7 @@ parseDirective.tap('wx-vue', (args) => {
   let { path, node, type, options: {lang} } = args;
   if (lang === 'vue' && (type === 'wx' || type === 'baidu' || type === 'alipay')) {
     if (t.isJSXAttribute(node) && node.name.name === 'v-model') {
-      let modelKey = utils.trimCurly(node.value.value);
+      let modelKey = utils.getModelKey(node.value.value);
       path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`value`), t.stringLiteral(`{{${node.value.value}}}`)))
       if (type === 'alipay') {
         path.insertAfter(t.jsxAttribute(t.jsxIdentifier(`bindInput`), t.stringLiteral(`${wxEventProxy.modelEventProxyName}`)))

packages/chameleon-template-parse/src/parser/parse-style.js

@@ -24,7 +24,7 @@ parseStyle.tap('web-cml', (args) => {
     if (styleNode && styleNode.value && utils.isMustacheReactive(styleNode.value.value)) {
       styleNode.value.value = utils.getReactiveValue(styleNode.value.value);
 
-      styleNode.value.value = `${webMixins.styleProxyName}(${styleNode.value.value},${cmssString})`
+      styleNode.value.value = `${webMixins.styleProxyName}((${styleNode.value.value}),${cmssString})`
       styleNode.name.name = `:${styleNode.name.name}`;
     } else { // 静态的
       styleNode.value.value = webStaticStyleHandle(styleNode.value.value, cmssString);
@@ -39,7 +39,7 @@ parseStyle.tap('weex-cml', (args) => {
     if (styleNode && styleNode.value && utils.isMustacheReactive(styleNode.value.value)) {
       // weex动态style
       styleNode.value.value = utils.getReactiveValue(styleNode.value.value);
-      styleNode.value.value = `${weexMixins.styleProxyName}(${styleNode.value.value})`
+      styleNode.value.value = `${weexMixins.styleProxyName}((${styleNode.value.value}))`
       styleNode.name.name = `:${styleNode.name.name}`;
     } else { // weex静态style
 

packages/chameleon-template-parse/src/parser/parse-vue2wx.js

@@ -83,6 +83,7 @@ parseVue2Wx.tap('vue2wx-v-for', (args) => {
 });
 parseVue2Wx.tap('component-is', (args) => {
   let {path, node, type, options} = args;
+  let lang = options.lang;
   let usingComponents = (options.usingComponents || []).map(item => item.tagName)
   if (type === 'wx' && t.isJSXElement(node)) {
     let currentTag = node.openingElement.name.name;
@@ -102,13 +103,18 @@ parseVue2Wx.tap('component-is', (args) => {
       let currentComp;
       (path.node.openingElement.attributes || []).forEach((attr) => {
         let attrName = attr.name
-        if (t.isJSXNamespacedName(attrName) && attrName.name.name === 'is') {
+        if (lang === 'vue' && t.isJSXNamespacedName(attrName) && attrName.name.name === 'is') {
           currentComp = attr.value.value;
         }
+        if (lang === 'cml' && t.isJSXIdentifier(attrName) && attrName.name === 'is') {
+          currentComp = utils.trimCurly(attr.value.value);
+        }
+
       })
       if (currentComp && usingComponents) {
+        let elementAttributes = path.node.openingElement.attributes || []
         usingComponents.forEach((comp) => {
-          let openTag = t.jsxOpeningElement(t.jsxIdentifier(comp), [t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${currentComp} === '${comp}'}}`))]);
+          let openTag = t.jsxOpeningElement(t.jsxIdentifier(comp), [t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${currentComp} === '${comp}'}}`))].concat(elementAttributes));
           let closeTag = t.jsxClosingElement(t.jsxIdentifier(comp))
           let insertNode = t.jsxElement(openTag, closeTag, jsxElementChildren, false);
 

packages/chameleon-template-parse/test/common/utils.test.js

@@ -6,6 +6,12 @@ describe('utils', function() {
       expect(utils.trimCurly(`{{name}}`)).to.equal(`name`)
     })
   });
+
+  describe('getModelKey', function() {
+    it('trim {{ variable }} to variable', function() {
+      expect(utils.getModelKey(`{{ name }}`)).to.equal(`name`)
+    })
+  });
   describe('titleLize', function() {
     it(`titleLize a word asked for that the word cant't start with space character`, function() {
       expect(utils.titleLize('name')).to.equal(`Name`)

packages/chameleon-template-parse/test/parser/index.cml.test.js

@@ -180,7 +180,7 @@ describe('parse-template-cml', function() {
     let callback = parseTemplate.parseStyleStatement;
     let result = compileTemplate(source, 'web', options, callback);
     it('test-style-transform', function() {
-      expect(result).to.equal(`<view :style="_cmlStyleProxy((dynamicColor),{'rem':true,'scale':0.5,'remOptions':{'rootValue':75,'minPixelValue':1.01},'autoprefixOptions':{'browsers':['> 0.1%','ios >= 8','not ie < 12']}})"><view style="color:red"></view></view>`)
+      expect(result).to.equal(`<view :style="_cmlStyleProxy(((dynamicColor)),{'rem':true,'scale':0.5,'remOptions':{'rootValue':75,'minPixelValue':1.01},'autoprefixOptions':{'browsers':['> 0.1%','ios >= 8','not ie < 12']}})"><view style="color:red"></view></view>`)
     });
   });
   describe('parseStyleStatement-weex', function() {
@@ -201,7 +201,7 @@ describe('parse-template-cml', function() {
     let callback = parseTemplate.parseStyleStatement;
     let result = compileTemplate(source, 'weex', options, callback);
     it('test-style-transform', function() {
-      expect(result).to.equal(`<view :style="_cmlStyleProxy((dynamicColor))"><view style="color: #ff0000;width: 20px"></view></view>`)
+      expect(result).to.equal(`<view :style="_cmlStyleProxy(((dynamicColor)))"><view style="color: #ff0000;width: 20px"></view></view>`)
     });
   });
   describe('parseStyleStatement-miniapp', function() {
@@ -300,14 +300,24 @@ describe('parse-template-cml', function() {
     });
   });
   // c-show
-  describe('parseDirectiveStatement-web-weex', function() {
+  describe('parseDirectiveStatement-web', function() {
     let source = `<view c-show="{{true}}"></view>`;
     let options = {lang: 'cml'};
     let callback = parseTemplate.parseDirectiveStatement;
     let result = compileTemplate(source, 'web', options, callback);
     it('test-c-show-transform', function() {
       // cml语法下线解析成style后续会通过parseStyle接着进行解析；
-      expect(result).to.equal(`<view style="display:{{true?'':'none'}};{{true?'':'height:0px;width:0px;overflow:hidden'}}"></view>`)
+      expect(result).to.equal(`<view v-show="true"></view>`)
+    });
+  });
+  describe('parseDirectiveStatement-weex', function() {
+    let source = `<view c-show="{{true}}"></view>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseDirectiveStatement;
+    let result = compileTemplate(source, 'weex', options, callback);
+    it('test-c-show-transform', function() {
+      // cml语法下线解析成style后续会通过parseStyle接着进行解析；
+      expect(result).to.equal(`<view style="display:{{true?\'\':\'none\'}};{{true?\'\':\'height:0px;width:0px;overflow:hidden\'}}"></view>`)
     });
   });
   describe('parseDirectiveStatement-wx-alipay-baidu', function() {
@@ -325,4 +335,15 @@ describe('parse-template-cml', function() {
     });
   });
 
+  describe('parse-vue2wx-wx', function() {
+    let source = `<component is="{{comp}}" shrinkComponents="comp,comp1"></component>`;
+    let options = {lang: 'cml'};
+    let callback = parseTemplate.parseVue2WxStatement;
+    let result = compileTemplate(source, 'wx', options, callback);
+    it('component is', function() {
+      // cml语法下线解析成style后续会通过parseStyle接着进行解析；
+      expect(result).to.equal(`<comp1 wx:if="{{comp === \'comp1\'}}" is="{{comp}}" shrinkComponents="comp,comp1"></comp1>;\n<comp wx:if="{{comp === \'comp\'}}" is="{{comp}}" shrinkComponents="comp,comp1"></comp>`)
+    });
+  });
+
 })

packages/chameleon-template-parse/test/parser/index.vue.test.js

@@ -198,14 +198,25 @@ describe('parse-template-vue', function() {
     });
   });
   // c-show
-  describe('parseDirectiveStatement-web-weex', function() {
+  describe('parseDirectiveStatement-web', function() {
     let source = `<view v-show="true"></view>`;
     let options = {lang: 'vue'};
     let callback = parseTemplate.parseDirectiveStatement;
     let result = compileTemplate(source, 'web', options, callback);
     it('test-c-show-transform', function() {
       // style后续会通过parseStyle接着进行解析；
-      expect(result).to.equal(`<view :style="display:{{true?'':'none'}};{{true?'':'height:0px;width:0px;overflow:hidden'}}"></view>`)
+      expect(result).to.equal(`<view v-show="true"></view>`)
+    });
+  });
+
+  describe('parseDirectiveStatement-weex', function() {
+    let source = `<view v-show="true"></view>`;
+    let options = {lang: 'vue'};
+    let callback = parseTemplate.parseDirectiveStatement;
+    let result = compileTemplate(source, 'weex', options, callback);
+    it('test-c-show-transform', function() {
+      // style后续会通过parseStyle接着进行解析；
+      expect(result).to.equal(`<view :style="_cmlStyleProxy(\'display:\'+(true?\'\':\'none\')+\';\'+(true?\'\':\'height:0px;width:0px;overflow:hidden\'))"></view>`)
     });
   });
   describe('parseDirectiveStatement-wx-alipay-baidu', function() {
@@ -223,5 +234,17 @@ describe('parse-template-vue', function() {
     });
   });
 
+  describe('parse-vue2wx-wx', function() {
+    var parser = require('../../src/index.js');
+    let source = `<component :is="currentComp" shrinkComponents="comp,comp1"></component>`;
+    let options = {lang: 'vue'};
+    let result = parser(source, 'wx', options);
+    console.log(result.source);
+    it('component is', function() {
+      // cml语法下线解析成style后续会通过parseStyle接着进行解析；
+      expect(result.source).to.equal(`<comp1 wx:if="{{currentComp === \'comp1\'}}" v-bind:is="currentComp" shrinkComponents="comp,comp1" class=" cml-base cml-component  cml-base cml-comp  cml-base cml-comp1"></comp1>;\n<comp wx:if="{{currentComp === \'comp\'}}" v-bind:is="currentComp" shrinkComponents="comp,comp1" class=" cml-base cml-component  cml-base cml-comp  cml-base cml-comp1"></comp>`)
+    });
+  });
+
 
 })

packages/chameleon-tool/configs/utils.js

@@ -280,6 +280,9 @@ exports.getWebEntry = function (options) {
   exports.copyDefaultFile(options.root, 'web', options.media);
   var entry = {};
   entry.vender = ['vue', 'vuex', 'vue-router', path.resolve(cml.root, 'configs/web_global.js')];
+  if (options.babelPolyfill === true) {
+    entry.vender.unshift('@babel/polyfill');
+  }
   // web端插入全局样式
   if (cml.config.get().baseStyle.web === true) {
     entry.vender.push('chameleon-runtime/src/platform/web/style/index.css')

packages/chameleon-tool/lib/config.js

@@ -89,6 +89,7 @@ var chameleonConfig = {
   baidu: miniappConfig,
   web: {
     dev: {
+      babelPolyfill: false, // 是否添加babel polyfill 只web端有此属性
       moduleIdType: 'name',
       hot: false,
       analysis: false,
@@ -98,6 +99,7 @@ var chameleonConfig = {
       }
     },
     build: {
+      babelPolyfill: false, // 是否添加babel polyfill 只web端有此属性
       hash: true,
       minimize: true,
       moduleIdType: 'chameleon',

packages/chameleon-tool/package.json

@@ -13,7 +13,19 @@
   },
   "author": "Chameleon-Team",
   "license": "Apache",
+  "keywords": [
+    "chameleon",
+    "cml",
+    "miniprogram",
+    "vue",
+    "weex",
+    "android",
+    "ios",
+    "mobile",
+    "mvvm"
+  ],
   "dependencies": {
+    "@babel/polyfill": "7.0.0",
     "assets-webpack-plugin": "3.8.4",
     "autoprefixer": "8.6.4",
     "babel-core": "6.26.3",