feat(okam-build): add toutiao mini program support

packages/okam-build/.gitignore

@@ -5,4 +5,5 @@ test/example/
 test/test.js
 wx_dist
 ant_dist
+tt_dist
 node_modules

packages/okam-build/example/base/package.json

@@ -16,6 +16,9 @@
     "dev:ant": "cross-env NODE_ENV=dev node scripts/build.js --watch --type ant",
     "dev:ant:debug": "cross-env NODE_ENV=dev node --inspect-brk scripts/build.js --watch --type ant",
     "dev:ant:clean": "cross-env NODE_ENV=dev node scripts/build.js --watch --clean --type ant",
+    "dev:tt": "cross-env NODE_ENV=dev node scripts/build.js --watch --type tt",
+    "dev:tt:debug": "cross-env NODE_ENV=dev node --inspect-brk scripts/build.js --watch --type tt",
+    "dev:tt:clean": "cross-env NODE_ENV=dev node scripts/build.js --watch --clean --type tt",
     "dev:clean": "cross-env NODE_ENV=dev node scripts/build.js --watch --clean",
     "dev:server": "cross-env NODE_ENV=dev node scripts/build.js --watch --server"
   },

packages/okam-build/example/base/scripts/tt.config.js

@@ -0,0 +1,19 @@
+/**
+ * @file Build wx mini program config
+ * @author xxx
+ */
+
+'use strict';
+
+const merge = require('../../../').merge;
+
+module.exports = merge({}, require('./base.config'), {
+    output: {
+        dir: 'tt_dist',
+        depDir: 'src/common'
+    },
+    localPolyfill: [
+        'async',
+        'promise'
+    ]
+});

packages/okam-build/lib/build/init-build-options.js

@@ -24,6 +24,8 @@ function getDefaultBuildConfig(appType) {
             return require('../config/wx');
         case 'ant':
             return require('../config/ant');
+        case 'tt':
+            return require('../config/tt');
         default:
             throw new Error('unknown app type, currently only support `swan` for baidu mini program '
                 + 'and `wx` for weixin mini program');

packages/okam-build/lib/config/tt.js

@@ -0,0 +1,49 @@
+/**
+ * @file The config for building toutiao mini program
+ * @author [email protected]
+ */
+
+'use strict';
+
+const merge = require('../util').merge;
+const baseConf = require('./base');
+
+module.exports = merge({}, baseConf, {
+    output: {
+
+        /**
+         * 输出的文件路径映射定义
+         *
+         * @type {Object}
+         */
+        pathMap: {
+            projectConfig: 'project.config.json',
+            entryScript: 'app.js',
+            entryStyle: 'app.ttss',
+            appConfig: 'app.json'
+        },
+
+        /**
+         * 输出的自定义组件各个部分文件的后缀名
+         *
+         * @type {Object}
+         */
+        componentPartExtname: {
+            script: 'js',
+            style: 'ttss',
+            tpl: 'ttml',
+            config: 'json'
+        }
+    },
+
+    processors: {
+        cssImport: {
+            processor: 'postcss', // using the existed postcss processor
+            extnames: ['ttss'],
+            rext: 'ttss',
+            options: {
+                plugins: ['cssImport']
+            }
+        }
+    }
+});

packages/okam-build/lib/framework.js

@@ -122,6 +122,9 @@ exports.getBaseId = function (appType, baseName) {
     else if (appType === 'wx') {
         baseId += 'wx/';
     }
+    else if (appType === 'tt') {
+        baseId += 'tt/';
+    }
 
     return baseId + baseName;
 };

packages/okam-build/lib/processor/helper/init-view.js

@@ -19,12 +19,14 @@ const BUILTIN_PLUGINS = {
     syntax: {
         wx: path.join(PLUGIN_BASE_NAME, 'wx-syntax-plugin'),
         swan: path.join(PLUGIN_BASE_NAME, 'swan-syntax-plugin'),
-        ant: path.join(PLUGIN_BASE_NAME, 'ant-syntax-plugin')
+        ant: path.join(PLUGIN_BASE_NAME, 'ant-syntax-plugin'),
+        tt: path.join(PLUGIN_BASE_NAME, 'tt-syntax-plugin')
     },
     eventSyntax: {
         wx: path.join(PLUGIN_BASE_NAME, 'event', 'wx-event-plugin'),
         swan: path.join(PLUGIN_BASE_NAME, 'event', 'swan-event-plugin'),
-        ant: path.join(PLUGIN_BASE_NAME, 'event', 'ant-event-plugin')
+        ant: path.join(PLUGIN_BASE_NAME, 'event', 'ant-event-plugin'),
+        tt: path.join(PLUGIN_BASE_NAME, 'event', 'tt-event-plugin')
     },
     html: path.join(PLUGIN_BASE_NAME, 'html-plugin'),
     ref: path.join(PLUGIN_BASE_NAME, 'ref-plugin')

packages/okam-build/lib/processor/template/plugins/event/tt-event-plugin.js

@@ -0,0 +1,8 @@
+/**
+ * @file Toutiao template event attribute transform plugin
+ * @author [email protected]
+ */
+
+'use strict';
+
+module.exports = require('./swan-event-plugin');

packages/okam-build/lib/processor/template/plugins/tt-syntax-plugin.js

@@ -0,0 +1,12 @@
+/**
+ * @file Mini program view template syntax transform plugin: okam syntax -> toutiao syntax
+ * @author [email protected]
+ */
+
+'use strict';
+
+const {createSyntaxPlugin} = require('./helper');
+const transformers = require('../transform/tt');
+
+module.exports = createSyntaxPlugin(transformers);
+

packages/okam-build/lib/processor/template/transform/ant/class.js

@@ -5,8 +5,10 @@
 
 'use strict';
 
-const classTransformer = require('../base/class');
+const transformClass = require('../base/class');
 
-module.exports = function (attrs, name, tplOpts) {
-    return classTransformer(attrs, name, tplOpts, true);
+module.exports = function (attrs, name, tplOpts, opts) {
+    transformClass(attrs, name, tplOpts, Object.assign({
+        arrToStr: true
+    }, opts));
 };

packages/okam-build/lib/processor/template/transform/ant/condition.js

@@ -5,7 +5,7 @@
 
 'use strict';
 
-const transformer = require('../base/condition');
+const transformCondition = require('../base/condition');
 
 const CONDITION_MAP = {
     'if': 'a:if',
@@ -14,13 +14,9 @@ const CONDITION_MAP = {
     'else': 'a:else'
 };
 
-module.exports = function (attrs, name, tplOpts) {
-    transformer(CONDITION_MAP, attrs, name, tplOpts);
-
-    let newName = CONDITION_MAP[name];
-    let value = attrs[newName];
-    if (typeof value === 'string' && value) {
-        value = `{{${value}}}`;
-    }
-    attrs[newName] = value;
+module.exports = function (attrs, name, tplOpts, opts) {
+    transformCondition(attrs, name, tplOpts, Object.assign({
+        syntaxMap: CONDITION_MAP,
+        wrapCondition: true
+    }, opts));
 };

packages/okam-build/lib/processor/template/transform/ant/for.js

@@ -5,32 +5,12 @@
 
 'use strict';
 
-const transformer = require('../base/for');
-const FOR_DIRECTIVE = 'a:for';
-const FOR_INDEX_DIRECTIVE = 'a:for-index';
-const FOR_ITEM_DIRECTIVE = 'a:for-item';
-const FOR_ITEM_INDEX_REGEXP = /^(.+)\s+in\s+(.+)$/;
+const transformFor = require('../base/for');
 
-module.exports = function (attrs, name, tplOpts) {
-    transformer(FOR_DIRECTIVE, attrs, name, tplOpts);
-
-    let value = attrs[FOR_DIRECTIVE].trim();
-    let result = FOR_ITEM_INDEX_REGEXP.exec(value);
-    if (result) {
-        let args = result[1];
-        let arrVarName = result[2];
-        value = attrs[FOR_DIRECTIVE] = arrVarName.trim();
-
-        args = args.split(',');
-        let itemName = args[0].trim();
-        let indexName = args[1];
-        attrs[FOR_ITEM_DIRECTIVE] = itemName;
-        indexName && (attrs[FOR_INDEX_DIRECTIVE] = indexName.trim());
-    }
-
-    if (typeof value === 'string' && value) {
-        value = `{{ ${value} }}`;
-    }
-    attrs[FOR_DIRECTIVE] = value;
+module.exports = function (attrs, name, tplOpts, opts) {
+    transformFor(attrs, name, tplOpts, Object.assign({
+        forDirectionName: 'a:for',
+        forItemDirectiveName: 'a:for-item',
+        forIndexDirectiveName: 'a:for-index'
+    }, opts));
 };
-

packages/okam-build/lib/processor/template/transform/ant/index.js

@@ -27,9 +27,6 @@ module.exports = {
         key: {
             transform: require('./key')
         },
-        bind: {
-            transform: require('./data-bind')
-        },
         class: {
             transform: require('./class')
         }

packages/okam-build/lib/processor/template/transform/ant/key.js

@@ -1,32 +1,15 @@
 /**
- * @file 解析支付宝小程序的key
- * @author zhoudan03
+ * @file Transform ant for key syntax
+ * @author [email protected]
  */
 
-module.exports = function (attrs, name, tplOpts) {
-    let {logger, file} = tplOpts;
-    const itemName = attrs['a:for-item'] || 'item';
-    let value = attrs[name];
+'use strict';
 
-    // a:key的值只允许以下两种情况，否则不做处理，但给出警告
-    // 1.用*this标识遍历数组的元素自身，
-    // 2.用遍历数组的元素的属性名称
-    if (value === itemName) {
-        value = '*this';
-    }
-    else if (value.includes('.')) {
-        const array = value.split('.');
-        if (array[0] === itemName) {
-            value = array[1];
-        }
-        else {
-            logger.warn(`${file.path} key value '${attrs[name]}' maybe not valid`);
-        }
-    }
-    else {
-        logger.warn(`${file.path} key value '${attrs[name]}' maybe not valid`);
-    }
+const transformKey = require('../base/key');
 
-    attrs['a:key'] = value;
-    delete attrs[':key'];
+module.exports = function (attrs, name, tplOpts, opts) {
+    transformKey(attrs, name, tplOpts, Object.assign({
+        forItemDirectiveName: 'a:for-item',
+        forKeyDirectiveName: 'a:key'
+    }, opts));
 };

packages/okam-build/lib/processor/template/transform/ant/tpl.js

@@ -1,30 +1,14 @@
 /**
- * @file Transform include/import tpl syntax
+ * @file Transform ant tpl syntax
  * @author [email protected]
  */
 
 'use strict';
 
-/* eslint-disable fecs-min-vars-per-destructure */
-const {PLAIN_OBJECT_REGEXP} = require('../base/constant');
-const DATA_ATTR = ':data';
+const transformTpl = require('../base/tpl');
 
-module.exports = function transformTplElement(element, tplOpts) {
-    element.name = 'template';
-
-    let {attribs: attrs} = element;
-    if (!attrs.hasOwnProperty(DATA_ATTR)) {
-        return;
-    }
-
-    let dataValue = attrs[DATA_ATTR];
-    if (typeof dataValue === 'string') {
-        dataValue = dataValue.trim();
-        if (PLAIN_OBJECT_REGEXP.test(dataValue)) {
-            dataValue = `{${dataValue}}`;
-        }
-    }
-
-    delete attrs[DATA_ATTR];
-    attrs.data = dataValue;
+module.exports = function (attrs, name, tplOpts, opts) {
+    transformTpl(attrs, name, tplOpts, Object.assign({
+        transformDataAttr: true
+    }, opts));
 };

packages/okam-build/lib/processor/template/transform/base/attribute.js

@@ -8,6 +8,7 @@
 const classTransformer = require('./class');
 const styleTransformer = require('./style');
 const dataBindTransformer = require('./data-bind');
+const forKeyTransformer = require('./key');
 
 const {DATA_BIND_REGEXP, CONDITION_DIRECTIVES} = require('./constant');
 
@@ -32,7 +33,7 @@ module.exports = {
     },
     key: {
         match: ':key',
-        transform: null
+        transform: forKeyTransformer
     },
     bind: {
         match: DATA_BIND_REGEXP,

packages/okam-build/lib/processor/template/transform/base/class.js

@@ -16,8 +16,9 @@
 
 const {PLAIN_OBJECT_REGEXP, SQUARE_BRACKETS_REGEXP} = require('./constant');
 
-module.exports = function (attrs, name, tplOpts, arrToStr = false) {
+module.exports = function (attrs, name, tplOpts, opts) {
     let value = attrs[name];
+    let arrToStr = opts && opts.arrToStr;
     if (typeof value === 'string') {
         value = value.trim();
     }