Merge pull request #337 from didi/1.0.4-alpha

1.0.4 alpha

CHANGELOG.md

@@ -1,3 +1,34 @@
+## [1.0.4-alpha.1]
+
+  - 解决分包内组件js分包不彻底，优化包体积40%左右
+  - 支持原生小程序组件的导入也是函数式的
+  - 支持公用样式以文件的形式 @import
+  - 支持模板多态语法
+
+## [1.0.3]
+
+- 发布1.0.3-alpha.0的正式版
+
+## [1.0.3-alpha.0]
+- Bugfixes
+  - 区分web端click和tap事件，由原来的click和tap统一处理成tap，改为tap和click区别对待，如果要在pc端生效click事件，那么必须绑定click而非tap
+  - 修复windows 上 app.json 中分包页面没有删除
+  - 修复windows 上初始化项目无法运行
+- Features
+  - 扩展新端命令支持集成到chameleon-tool中
+## [1.0.2]
+
+ - 修改project tododemo的package.lock.json
+
+## [1.0.0]
+
+### Bugfixes
+   - 修复alipay baidu qq 端引用原生组件的问题
+
+## [0.4.1]
+### Bugfixes
+   - 修复内联事件对象 $event的匹配问题
+   - 修复chameleon.config.js内部配置公用miniappConfig一个对象导致的对象合并不准确问题
 ## [0.4.1-alpha.1]
 ### Bugfixes
    - 修复window下分包加载的bug

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "command": {
     "publish": {
       "allowBranch": "master",

packages/babel-plugin-chameleon-import/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-plugin-chameleon-import",
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "description": "Component modular import plugin for babel.",
   "repository": {
     "type": "git",

packages/chameleon-css-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chameleon-css-loader",
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "description": "chameleon样式处理",
   "main": "index.js",
   "scripts": {

packages/chameleon-css-loader/parser/miniapp.js

@@ -6,8 +6,10 @@ const postcss = require('postcss');
 
 module.exports = function(source, options = {}) {
   options.cpxType = 'rpx';
-  let {cmlType} = options;
-  if (cmlType === 'alipay') {
+  let {cmlType, filePath} = options;
+  let globalCssPath = [`chameleon-runtime/src/platform/${cmlType}/style/index.css`, `chameleon-runtime/src/platform/${cmlType}/style/page.css`];
+  let isGlobalCss = globalCssPath.some((item) => filePath.includes(item))
+  if (cmlType === 'alipay' && !isGlobalCss) { //对于全局样式不能经过 addAlipayClassPlugin 这个插件进行样式唯一性的处理；比如这样的 .cml-57b5135a.scroller-wrap
     return postcss([cpx(options), weexPlus(), addAlipayClassPlugin(options)]).process(source).css;
   } else {
     return postcss([cpx(options), weexPlus()]).process(source).css;

packages/chameleon-css-loader/test/parser-test/miniapp.test.js

@@ -4,7 +4,17 @@ const expect = require('chai').expect;
 let source = `body {width:100cpx;font-size:26px;/* height:200px; */}`;
 describe('parse/miniapp', function() {
   it('parse cssstyle px to rpx but leave comment in style alone', function() {
-    let result = parseCss(source);
+    let result = parseCss(source,{
+      cmlType:'alipay',
+      filePath:"chameleon-runtime/src/platform/alipay/style/index.css"
+    });
+    expect(/100rpx/.test(result)).to.be.ok;
+  })
+  it('parse cssstyle px to rpx but leave comment in style alone', function() {
+    let result = parseCss(source,{
+      cmlType:'wx',
+      filePath:"chameleon-runtime/src/platform/alipay/style/index.css"
+    });
     expect(/100rpx/.test(result)).to.be.ok;
   })
 })

packages/chameleon-dev-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chameleon-dev-proxy",
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "description": "cml开发环境代理服务模块",
   "main": "index.js",
   "author": "Chameleon-Team",

packages/chameleon-errors-webpack-plugin/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "name": "chameleon-errors-webpack-plugin",
   "main": "index.js",
   "author": "Chameleon-Team",

packages/chameleon-linter/checkers/template/lib/json-ast-parser.js

@@ -5,7 +5,8 @@ const config = require('../../../config');
 
 function getUsingComponents(jsonAst, filePath = '') {
   let results = {};
-  let interfaceParser = new Parser(null, config.getParserConfig().script);
+  let currentWorkspace = config.getCurrentWorkspace();
+  let interfaceParser = new Parser(null, config.getParserConfig().script, currentWorkspace);
 
   if (jsonAst && jsonAst.base && jsonAst.base.usingComponents) {
     Object
@@ -20,7 +21,6 @@ function getUsingComponents(jsonAst, filePath = '') {
         return !(infoPair.path.indexOf('plugin://') === 0);
       })
       .forEach((infoPair) => {
-        let currentWorkspace = config.getCurrentWorkspace();
         // filePath: is a full absolute path of the target template file
         // inforPair.path: is the original path of base: {usingComponents: 'path/to/referenced component'}
         let interfaceInfo = cmlUtils.findInterfaceFile(currentWorkspace, filePath, infoPair.path);

packages/chameleon-linter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chameleon-linter",
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "description": "cml规范校验工具",
   "main": "index.js",
   "scripts": {
@@ -24,10 +24,10 @@
     "@babel/traverse": "^7.1.4",
     "bulk-require": "^1.0.1",
     "chalk": "^2.4.1",
-    "chameleon-tool-utils": "0.4.1-alpha.1",
-    "cml-component-parser": "0.4.1-alpha.1",
-    "cml-htmllint": "0.4.1-alpha.1",
-    "cml-js-parser": "0.4.1-alpha.1",
+    "chameleon-tool-utils": "1.0.4-alpha.1",
+    "cml-component-parser": "1.0.4-alpha.1",
+    "cml-htmllint": "1.0.4-alpha.1",
+    "cml-js-parser": "1.0.4-alpha.1",
     "commander": "^2.19.0",
     "glob": "^7.1.3",
     "json-lint": "^0.1.0",

packages/chameleon-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chameleon-loader",
-  "version": "0.4.1-alpha.1",
+  "version": "1.0.4-alpha.1",
   "description": "chameleon cml文件处理loader",
   "main": "src/index.js",
   "directories": {
@@ -18,18 +18,18 @@
     "@babel/types": "^7.3.4",
     "babel-generator": "6.26.1",
     "babel-traverse": "6.26.0",
-    "chameleon-template-parse": "0.4.1-alpha.1",
-    "chameleon-tool-utils": "0.4.1-alpha.1",
+    "chameleon-template-parse": "1.0.4-alpha.1",
+    "chameleon-tool-utils": "1.0.4-alpha.1",
     "consolidate": "0.14.0",
     "de-indent": "1.0.2",
     "fs-extra": "^7.0.1",
     "hash-sum": "1.0.2",
     "he": "1.1.0",
     "loader-utils": "1.1.0",
     "lru-cache": "4.1.1",
-    "mvvm-interface-parser": "0.4.1-alpha.1",
+    "mvvm-interface-parser": "1.0.4-alpha.1",
     "resolve": "1.4.0",
-    "runtime-check": "0.4.1-alpha.1",
+    "runtime-check": "1.0.4-alpha.1",
     "source-map": "0.6.1",
     "vue-style-loader": "4.0.1"
   },

packages/chameleon-loader/src/cml-compile/runtime/app.js

@@ -1,3 +1,4 @@
 import _cml_ from 'chameleon-runtime';
-
-exports.default = _cml_.createApp(exports.default).getOptions()
+module.exports = function(){
+  _cml_.createApp(exports.default).getOptions();
+}

packages/chameleon-loader/src/cml-compile/runtime/component.js

@@ -1,3 +1,5 @@
 import _cml_ from 'chameleon-runtime';
 
-exports.default = _cml_.createComponent(exports.default).getOptions()
+module.exports = function(){
+  _cml_.createComponent(exports.default).getOptions();
+}

packages/chameleon-loader/src/cml-compile/runtime/index.js

@@ -1,7 +1,11 @@
 
 const fs = require('fs');
 const path = require('path');
-
-module.exports = function getRunTimeSnippet(platform, type) {
+const _ = module.exports = {} ;
+_.getMiniAppRunTimeSnippet = function (platform, type) {
   return fs.readFileSync(path.join(__dirname, `./${type}.js`))
 }
+_.getVueRunTimeSnippet = function (platform, type) {
+  return fs.readFileSync(path.join(__dirname, `./web/${type}.js`))
+}
+

packages/chameleon-loader/src/cml-compile/runtime/page.js

@@ -1,3 +1,5 @@
 import _cml_ from 'chameleon-runtime';
 
-exports.default = _cml_.createPage(exports.default).getOptions()
+module.exports = function(){
+  _cml_.createPage(exports.default).getOptions();
+}

packages/chameleon-loader/src/cml-compile/runtime/web/app.js

@@ -0,0 +1,2 @@
+import _cml_ from 'chameleon-runtime';
+exports.default = _cml_.createApp(exports.default).getOptions()

packages/chameleon-loader/src/cml-compile/runtime/web/component.js

@@ -0,0 +1,3 @@
+import _cml_ from 'chameleon-runtime';
+
+exports.default = _cml_.createComponent(exports.default).getOptions()

packages/chameleon-loader/src/cml-compile/runtime/web/page.js

@@ -0,0 +1,3 @@
+import _cml_ from 'chameleon-runtime';
+
+exports.default = _cml_.createPage(exports.default).getOptions()

packages/chameleon-loader/src/cml-compile/wxml-selector.js

@@ -1,27 +1,43 @@
-
+/*这个文件用来处理原生小程序组件*/
 
 const loaderUtils = require('loader-utils');
 const fs = require('fs');
 const cmlUtils = require('chameleon-tool-utils');
+const path = require('path');
 
 module.exports = function(content) {
   const self = this;
   const resource = this.resourcePath;
+  const extName = path.extname(resource);
+  const cssExt = {
+    '.wxml': '.wxss',
+    '.axml': '.acss',
+    '.swan': '.css',
+    '.qml': '.qss'
+  }
+  const styles = cssExt[extName];
   const query = loaderUtils.getOptions(this) || {}
   const type = query.type;
   let targetFilePath = '';
   let output = '';
   let extMap = {
     script: '.js',
-    styles: '.wxss'
+    styles
   }
-  targetFilePath = resource.replace(/\.wxml/, extMap[type]);
+  // targetFilePath = resource.replace(/\.wxml/, extMap[type]);
+  targetFilePath = resource.replace(new RegExp(`${extName}$`), extMap[type]);
   if (!cmlUtils.isFile(targetFilePath)) {
     throw new Error(`can't find ${targetFilePath}`)
   } else {
     self.addDependency(targetFilePath);
     output = fs.readFileSync(targetFilePath, {encoding: 'utf-8'})
   }
+  if(type === 'script'){
+    return `module.exports = function(){\n
+      ${output}
+    }`
+  }
+
   return output;
 
 }

packages/chameleon-loader/src/loader.js

@@ -7,7 +7,7 @@ const loaderUtils = require('loader-utils')
 const normalize = require('./utils/normalize')
 const componentNormalizerPath = normalize.lib('runtime/component-normalizer')
 const fs = require('fs');
-const getRunTimeSnippet = require('./cml-compile/runtime/index.js');
+const {getVueRunTimeSnippet} = require('./cml-compile/runtime/index.js');
 
 var compileTemplate = require('chameleon-template-parse');
 
@@ -97,7 +97,8 @@ module.exports = function (content) {
   const isWxmlComponent = extName === '.wxml';
   const isAxmlComponent = extName === '.axml';
   const isSwanComponent = extName === '.swan';
-  const isMiniAppRawComponent = isWxmlComponent ||  isAxmlComponent || isSwanComponent;
+  const isQmlComponent = extName === '.qml';
+  const isMiniAppRawComponent = isWxmlComponent ||  isAxmlComponent || isSwanComponent || isQmlComponent;
   if(!isMiniAppRawComponent) {
     //处理script cml-type为json的内容
     content = cmlUtils.deleteScript({content, cmlType: 'json'});
@@ -164,7 +165,7 @@ module.exports = function (content) {
     qq: 'qml'
   }
   //小程序模板后缀正则
-  const miniTplExtReg = /(\.wxml|\.axml)$/;
+  const miniTplExtReg = /(\.wxml|\.axml|\.swan|\.qml)$/;
   const miniCmlReg = /(\.cml|\.wx\.cml|\.alipay\.cml|\.qq\.cml|\.baidu\.cml)$/;
 
   if(isMiniAppRawComponent) {
@@ -208,7 +209,6 @@ module.exports = function (content) {
 
   // 引用微信小程序组件处理
   function miniAppRawComponentHandler() {
-
     if((cmlType === 'wx' && extName === '.wxml') || (cmlType === 'alipay' && extName === '.axml') || (cmlType === 'baidu' && extName === '.swan') || (cmlType === 'qq' && extName === '.qml')) {
       //生成json文件
       let jsonFile = filePath.replace(miniTplExtReg,'.json');
@@ -223,8 +223,10 @@ module.exports = function (content) {
       miniAppScript.addMiniAppScript(self,filePath,context,cmlType)
       var styleString = getWxmlRequest('styles');
       var scriptString = getWxmlRequest('script');
+      var entryBasePath = entryPath.replace(miniTplExtReg, '');
       output += `var __cml__style = ${styleString};\n`
-      output += `var __cml__script = ${scriptString};\n`
+      output += `var __cml__script = ${scriptString};\n
+      __CML__GLOBAL.__CMLCOMPONNETS__['${entryBasePath}'] = __cml__script;\n`
 
       //采用分离的方式，入口js会放到static/js下，需要再生成入口js去require该js
       var jsFileName = entryPath.replace(miniTplExtReg, '.js');
@@ -240,7 +242,6 @@ module.exports = function (content) {
     npmComponents.forEach(item=>{
       componentDeps.push(item.filePath);
     })
-
     let newJsonObj = jsonHandler(self, jsonObject, cmlType, componentDeps) || {};
     newJsonObj.usingComponents = newJsonObj.usingComponents || {};
     let usingComponents ={} ;
@@ -310,9 +311,9 @@ module.exports = function (content) {
       var scriptRequireString = script.src
         ? getRequireForImport('script', script)
         : getRequire('script', script)
-
-      output += `var __cml__script = ${scriptRequireString};\n`
-
+      var entryBasePath = entryPath.replace(miniCmlReg, '');
+      output += `var __cml__script = ${scriptRequireString};\n
+      __CML__GLOBAL.__CMLCOMPONNETS__['${entryBasePath}'] = __cml__script;\n`
 
       //采用分离的方式，入口js会放到static/js下，需要再生成入口js去require该js
       var jsFileName = entryPath.replace(miniCmlReg, '.js');
@@ -349,7 +350,7 @@ module.exports = function (content) {
       entryContent += "__CML__GLOBAL.Page = Page;\n"
     }
     entryContent += `require('${relativePath}/static/js/common.js')\n`;
-    entryContent += `require('${relativePath}/static/js/${jsFileName}')\n`;
+    entryContent += `require('${relativePath}/static/js/${jsFileName}')()\n`;
 
 
     self.emitFile(jsFileName, entryContent);
@@ -427,7 +428,7 @@ module.exports = function (content) {
 
     function handleVueScript() {
       let { defineComponets, componetsStr } = getComponents();
-      let runtimeSnippet = getRunTimeSnippet(cmlType, type);
+      let runtimeSnippet = getVueRunTimeSnippet(cmlType, type);
       let scriptCode = getScriptCode(self, cmlType, scriptContent, media, options.check);
       return `
         ${defineComponets}