@cloudbase/framework-plugin-low-code 0.7.25 → 0.7.26

package/lib/utils/dataSource.js

@@ -3,27 +3,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDatasetProfiles = exports.getDatasourceProfiles = exports.standardizeDataSource = exports.lowercaseKey = exports.mergeDependencies = exports.getDatasourceDatabaseName = exports.getAppDatasourceResourceName = exports.getDatasourceResourceName = exports.DATABASE_TYPE = exports.EXTERNAL_FUNCTION_TYPE = exports.CLOUD_FUNCTION_TYPE = void 0;
+exports.getDatasetProfiles = exports.getDataVarProfiles = exports.getDatasourceProfiles = exports.standardizeDataSource = exports.lowercaseKey = exports.mergeDependencies = exports.getDatasourceDatabaseName = exports.getAppDatasourceResourceName = exports.getDatasourceResourceName = exports.DATABASE_TYPE = exports.EXTERNAL_FUNCTION_TYPE = exports.CLOUD_FUNCTION_TYPE = void 0;
 const merge_package_json_1 = __importDefault(require("merge-package-json"));
-const lowcode_builder_1 = require("@cloudbase/lowcode-builder");
-const cals_1 = require("@cloudbase/cals");
-const util_1 = require("@cloudbase/lowcode-builder/lib/builder/mp/util");
-const index_1 = require("@cloudbase/lowcode-builder/lib/builder/config/index");
+const types_1 = require("../types");
+const expression_1 = require("@cloudbase/cals/lib/parser/expression");
+const util_1 = require("../builder/mp/util");
+const config_1 = require("../builder/config");
 exports.CLOUD_FUNCTION_TYPE = 'cloud-function';
 exports.EXTERNAL_FUNCTION_TYPE = 'http';
 exports.DATABASE_TYPE = 'database';
 function getDatasourceResourceName(datasrouce, mode) {
-    let suffix = mode === lowcode_builder_1.DEPLOY_MODE.PREVIEW ? `-preview` : '';
+    let suffix = mode === types_1.DEPLOY_MODE.PREVIEW ? `-preview` : '';
     return `lcap-${datasrouce.id}-${datasrouce.name}${suffix}`;
 }
 exports.getDatasourceResourceName = getDatasourceResourceName;
 function getAppDatasourceResourceName(appId, datasrouce, mode) {
-    let suffix = mode === lowcode_builder_1.DEPLOY_MODE.PREVIEW ? `-preview` : '';
+    let suffix = mode === types_1.DEPLOY_MODE.PREVIEW ? `-preview` : '';
     return `lcap-${datasrouce.id}-${datasrouce.name}-${appId}${suffix}`;
 }
 exports.getAppDatasourceResourceName = getAppDatasourceResourceName;
 function getDatasourceDatabaseName(dsConfig, mode) {
-    return dsConfig.type === exports.DATABASE_TYPE ? getDatasourceResourceName(dsConfig, mode) : null;
+    return dsConfig.type === exports.DATABASE_TYPE
+        ? getDatasourceResourceName(dsConfig, mode)
+        : null;
 }
 exports.getDatasourceDatabaseName = getDatasourceDatabaseName;
 function mergeDependencies(...pkgs) {
@@ -33,7 +35,9 @@ function mergeDependencies(...pkgs) {
         const formated = getDependencies(pkg);
         for (let key in formated.dependencies) {
             formated.dependencies[key] =
-                formated.dependencies[key] === '*' && ((_a = acc === null || acc === void 0 ? void 0 : acc.dependencies) === null || _a === void 0 ? void 0 : _a[key]) === '*' ? 'latest' : formated.dependencies[key];
+                formated.dependencies[key] === '*' && ((_a = acc === null || acc === void 0 ? void 0 : acc.dependencies) === null || _a === void 0 ? void 0 : _a[key]) === '*'
+                    ? 'latest'
+                    : formated.dependencies[key];
         }
         const merged = (0, merge_package_json_1.default)(formated, acc);
         return JSON.parse(merged);
@@ -109,6 +113,17 @@ function getDatasourceProfiles(datasources) {
     })) || []);
 }
 exports.getDatasourceProfiles = getDatasourceProfiles;
+function getDataVarProfiles(appData) {
+    const result = {
+        $global: (appData.vars && appData.vars.data) || [],
+    };
+    appData.pageInstanceList.forEach((pageInstance) => {
+        let p = pageInstance;
+        result[p.id] = (p.vars && p.vars.data) || [];
+    });
+    return result;
+}
+exports.getDataVarProfiles = getDataVarProfiles;
 function _generateDynamicDataset(dataset) {
     var _a;
     let { state } = dataset;
@@ -121,13 +136,13 @@ function _generateDynamicDataset(dataset) {
                     let processed = {};
                     for (let paramKey in params) {
                         let bind = params[paramKey];
-                        if (!bind.type || bind.type === cals_1.PropBindType.static) {
+                        if (!bind.type || bind.type === expression_1.PropBindType.static) {
                             let value = bind.value;
-                            processed[paramKey] = `${index_1.REPLACE_SIGN}(app, $page) => (${typeof value === 'string' ? `'${value}'` : JSON.stringify(value)})${index_1.REPLACE_SIGN}`;
+                            processed[paramKey] = `${config_1.REPLACE_SIGN}(app, $page) => (${typeof value === 'string' ? `'${value}'` : JSON.stringify(value)})${config_1.REPLACE_SIGN}`;
                         }
                         else {
                             let jsExp = (0, util_1.generateDataBind)(bind);
-                            processed[paramKey] = `${index_1.REPLACE_SIGN}(app, $page) =>  (\n${jsExp || 'undefined'}\n)${index_1.REPLACE_SIGN}`;
+                            processed[paramKey] = `${config_1.REPLACE_SIGN}(app, $page) =>  (\n${jsExp || 'undefined'}\n)${config_1.REPLACE_SIGN}`;
                         }
                     }
                     config.initMethod.params = processed;

package/lib/utils/postProcess.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postProcess.d.ts","sourceRoot":"","sources":["../../src/utils/postProcess.ts"],"names":[],"mappings":"AAIA,wBAAgB,wBAAwB,CAAC,eAAe,KAAA,EAAE,IAAI,KAAA,QAI7D;AAED,wBAAgB,0BAA0B,CAAC,WAAW,KAAA,EAAE,aAAa,KAAA,QAkBpE"}
+{"version":3,"file":"postProcess.d.ts","sourceRoot":"","sources":["../../src/utils/postProcess.ts"],"names":[],"mappings":"AAKA,wBAAgB,wBAAwB,CAAC,eAAe,KAAA,EAAE,IAAI,KAAA,QAI7D;AAED,wBAAgB,0BAA0B,CAAC,WAAW,KAAA,EAAE,aAAa,KAAA,QAkBpE"}

package/lib/weapps-core/utils/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/weapps-core/utils/style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqBvD,wBAAgB,UAAU,CACxB,WAAW,GAAE,YAAiB,EAC9B,OAAO,GAAE;IACP,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACoD,GACrE,aAAa,CAwSf;AAED,wBAAgB,2BAA2B,CACzC,SAAS,GAAE,YAAiB,GAC3B,YAAY,CAcd;AAgED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,aAAkB,GAAG,aAAa,CAE5E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,aAAkB,GAAG,aAAa,CAE5E;AAED,wBAAgB,uBAAuB,CACrC,KAAK,KAAoB,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,MAW/B;AA0BD,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAiBrD;AAED,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAcrD;AAED,wBAAgB,2BAA2B,CACzC,WAAW,GAAE,aAAkB,GAC9B,aAAa,CAgBf;AAED,wBAAgB,sBAAsB,CACpC,WAAW,GAAE,aAAkB,GAC9B,aAAa,CAuBf;AAED,wBAAgB,SAAS,CACvB,KAAK,EAAE,aAAa,EACpB,SAAS,SAAqB,UAS/B"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/weapps-core/utils/style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqBvD,wBAAgB,UAAU,CACxB,WAAW,GAAE,YAAiB,EAC9B,OAAO,GAAE;IACP,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACoD,GACrE,aAAa,CAgNf;AAED,wBAAgB,2BAA2B,CAAC,SAAS,GAAE,YAAiB,GAAG,YAAY,CAUtF;AAyCD,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,aAAkB,GAAG,aAAa,CAE5E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,aAAkB,GAAG,aAAa,CAE5E;AAED,wBAAgB,uBAAuB,CAAC,KAAK,KAAoB,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,MAUhG;AA0BD,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAiBrD;AAED,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAcrD;AAED,wBAAgB,2BAA2B,CAAC,WAAW,GAAE,aAAkB,GAAG,aAAa,CAgB1F;AAED,wBAAgB,sBAAsB,CAAC,WAAW,GAAE,aAAkB,GAAG,aAAa,CAoBrF;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,SAAS,SAAqB,UAQ7E"}

package/lib/weapps-core/utils/style.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -81,8 +92,7 @@ function toCssStyle(commonStyle = {}, options = { toRem: true, ignoreSelf: false
                 if ((0, uniq_1.default)((0, map_1.default)(radiusInfo, (val) => val)).length === 1) {
                     setStyleValue(style, 'borderRadius', _handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit));
                 }
-                else if (radiusInfo.topLeft === radiusInfo.bottomRight &&
-                    radiusInfo.topRight === radiusInfo.bottomLeft) {
+                else if (radiusInfo.topLeft === radiusInfo.bottomRight && radiusInfo.topRight === radiusInfo.bottomLeft) {
                     setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)}`);
                 }
                 else if (radiusInfo.topRight === radiusInfo.bottomLeft) {
@@ -155,7 +165,8 @@ function toCssStyle(commonStyle = {}, options = { toRem: true, ignoreSelf: false
         });
     }
     if (self && !options.ignoreSelf) {
-        Object.assign(style, self);
+        const _a = self, { cssFloat } = _a, restSelf = __rest(_a, ["cssFloat"]);
+        Object.assign(style, restSelf, { float: cssFloat });
     }
     if (options.toRpx) {
         return translateStyleToRpx(style);
@@ -181,8 +192,7 @@ function setDistanceStyle(style, distance, attr, addPXUnit) {
         if ((0, uniq_1.default)((0, map_1.default)(distance, (val) => val)).length === 1) {
             setStyleValue(style, (0, common_1.camelcase)(`${attr}`), _handleStyleNumValue(distance.top, addPXUnit));
         }
-        else if (distance.top === distance.bottom &&
-            distance.left === distance.right) {
+        else if (distance.top === distance.bottom && distance.left === distance.right) {
             setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)}`);
         }
         else if (distance.left === distance.right) {
@@ -300,8 +310,7 @@ function removeEffectTwiceStyle(commonStyle = {}) {
         if (config_1.SELF_REMOVE_STYLE_KEY_LIST.includes(camelcaseKey)) {
             return false;
         }
-        if (config_1.SELF_REMOVE_WITH_PERCENTAGE_KEY_LIST.includes(camelcaseKey) &&
-            String(value).match(/.+%$/)) {
+        if (config_1.SELF_REMOVE_WITH_PERCENTAGE_KEY_LIST.includes(camelcaseKey) && String(value).match(/.+%$/)) {
             return false;
         }
         setStyleValue(style, camelcaseKey, value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/framework-plugin-low-code",
-  "version": "0.7.25",
+  "version": "0.7.26",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -35,12 +35,11 @@
     "url": "https://github.com/TencentCloudBase/cloudbase-framework/issues"
   },
   "dependencies": {
-    "@cloudbase/cals": "^0.3.31",
+    "@cloudbase/cals": "0.3.17",
     "@cloudbase/framework-core": "^1.8.16",
     "@cloudbase/framework-plugin-auth": "^1.8.16",
     "@cloudbase/framework-plugin-mp": "v1.3.6-beta.8",
     "@cloudbase/framework-plugin-website": "^1.8.17",
-    "@cloudbase/lowcode-builder": "^1.0.1",
     "@formily/react-schema-renderer": "1.1.7",
     "archiver": "^4.0.1",
     "axios": "^0.21.0",

package/template/mp/app/app-global.js

@@ -0,0 +1,4 @@
+// 空对象，用于存储全局数据
+export default {
+
+}

package/template/mp/app/common.js

@@ -0,0 +1,26 @@
+<% mods.forEach((mod) => {%>
+import * as <%= mod %> from '../lowcode/common/<%= mod %>'<%}) %>
+
+const _weapps_app_common = {}
+
+function getDefaultModule(targetModule) {
+  if (!targetModule) {
+    return
+  }
+  const keys = Object.keys(targetModule)
+  if (keys.length === 1 && keys[0] === 'default') {
+    return targetModule.default
+  }
+  return targetModule
+}
+
+Object.defineProperties(_weapps_app_common, {
+  <% mods.forEach((mod) => {%>
+  <%= mod %>: {
+      get() {
+        return getDefaultModule(<%= mod %>)
+      }
+    },<%}) %>
+})
+
+export default _weapps_app_common

package/template/mp/app/handlers.js

@@ -0,0 +1,15 @@
+<% pageModules.forEach(({id: pageId, lowCodes}) => { %>
+  <% lowCodes.filter(mod => mod.type === 'handler-fn' && mod.name !== '____index____').forEach(mod => {%>
+    import <%= pageId%>_<%= mod.name%> from '../lowcode/<%= pageId%>/handler/<%= mod.name%>'
+  <% }) %>
+  <% }) %>
+
+
+
+  <% pageModules.forEach(({id: pageId, lowCodes}) => { %>
+    export const <%=pageId %> = {
+      <% lowCodes.filter(mod => mod.type === 'handler-fn' && mod.name !== '____index____').forEach(mod => {%>
+        ['<%= mod.name%>']: <%= pageId%>_<%= mod.name%>,
+      <% }) %>
+    }
+    <% }) %>

package/template/mp/app/weapps-api.js

@@ -0,0 +1,89 @@
+import { observable } from 'mobx'
+import { createMpApp } from '@cloudbase/weda-client';
+import { createComputed, formatEnum, enumOptions} from '<%= subLevelPath %>../common/util'
+import process from '<%= subLevelPath %>../common/process'
+import appGlobal from '<%= subLevelPath %>../app/app-global'
+import { CLOUD_SDK, createDataset, EXTRA_API } from '<%= subLevelPath %>../datasources/index'
+
+
+<% if (!isBare) {%>
+import state from '../lowcode/state'
+import computed from '../lowcode/computed'
+import common from './common'
+<%} else {%>
+const state = {}
+const computed ={}
+const common = {}
+<%}%>
+
+const mainAppKey = '__weappsMainApp'
+
+export const app = createGlboalApi()
+export { process }
+
+function createGlboalApi() {
+  const mpApp = createMpApp({
+    appConfig: <%= appConfig %>
+  })
+  const globalAPI = {
+    id: '<%= appId %>',
+    domain: '<%= domain %>',
+    platform: 'MINIPROGRAME',
+    pages: {},
+    session: {
+      //configure: sdk.configure,
+      //request: sdk.request,
+      //getSessionId: sdk.getSessionId,
+    },
+    state: observable(state),
+    computed: createComputed(computed),
+    common,
+    invoke(params) {
+      return app.__internal__.activePage.invokeComponentMethod(params)
+    },
+    ...mpApp,
+  } // The global api exposed to lowcode
+
+
+  globalAPI.__internal__.enumOptions = enumOptions
+  globalAPI.utils.formatEnum = formatEnum
+  /**
+   * @deprecated utils._getConfig
+   */
+  globalAPI.utils._getConfig = () => {
+    return globalAPI.__internal__.getConfig()
+  }
+  globalAPI.utils.getWXContext = async function() {
+    const { Data } = await globalAPI.cloud.callWedaApi({
+      action: 'InvokeComponentWxModule',
+      data: {
+        Method: 'GetWxContext',
+      },
+    });
+    return typeof Data === 'string' ? JSON.parse(Data) : Data
+  }
+
+  let dataset = createDataset('$global')
+  globalAPI.dataset = dataset
+  globalAPI.state.dataset = dataset
+  globalAPI.setState = (userSetState) => {
+    Object.keys(userSetState).forEach((keyPath) => {
+      globalAPI.utils.set(globalAPI.dataset.state, keyPath, userSetState[keyPath]);
+    });
+  };
+
+  const subPackageName = '<%= subPackageName %>'
+  if (subPackageName) {
+    // is sub app
+    globalAPI.mainApp = appGlobal[mainAppKey]
+    const mpApp = getApp()
+    mpApp && (mpApp.subApp = globalAPI)
+  } else {
+    // is mainApp
+    appGlobal[mainAppKey] = globalAPI
+  }
+  // 避免被wx.cloud 覆盖
+  globalAPI.cloud = CLOUD_SDK
+
+  return globalAPI
+}

package/template/mp/app.js

@@ -0,0 +1,114 @@
+import lifeCycle from './lowcode/lifecycle'
+import { app } from './app/weapps-api'
+// 引入数据源管理器并进行初始化
+import { setConfig, getAccessToken, EXTRA_API, createStateDataSourceVar, generateParamsParser } from './datasources/index';
+import { redirectToLogin, findLoginPage, getAuthConfig } from './common/util'
+
+// 设置数据源请求的 loading 及 toast 处理
+setConfig({
+  beforeDSRequest: (cfg) => {
+    if (!cfg.options || !cfg.options.showLoading) return
+    app.showLoading()
+  },
+  beforeCallFunction: async (params) => {
+    try {
+      const loginPage = findLoginPage();
+
+      let skip = false;
+      switch (params?.data?.methodName) {
+        case 'callWedaApi': {
+          if (['GetMiniProgramUserTicket', 'DescribeRuntimeResourceStrategy'].includes(params?.data?.params.action)) {
+            skip = true;
+          }
+          break;
+        }
+      }
+
+      // 后续做过滤处理
+      if (!loginPage || (params?.data?.mode === 'c' && skip)) {
+        return params;
+      }
+      // await initTcb();
+      const { accessToken } = await getAccessToken();
+      if (accessToken) {
+        params.data.accessToken = accessToken;
+      }
+    } catch (e) {
+      if (app?.cloud?.currentUser?.userType === "externalUser" && e?.error === 'unauthenticated') {
+        app.showToast({
+          title: '登录态失效',
+          icon: 'error',
+        });
+      }
+      console.error('beforeCallFunction error', e);
+    }
+    return params;
+  },
+  afterDSRequest: (cfg, error, result) => {
+    if (!cfg.options) return
+    if (cfg.options.showLoading) app.hideLoading()
+    if (!cfg.options.showToast) return
+    const isSuccess = !error && result && !result.code
+    app.showToast({ icon: isSuccess ? 'success' : 'error' })
+  },
+  async afterCallFunction(params, error, res) {
+    if (params?.data?.params?.action != 'DescribeRuntimeResourceStrategy' && ['InnerError.AuthFailure', 'InvalidAccessToken'].includes(res?.result?.code)) {
+      const loginPage = findLoginPage();
+      if (loginPage) {
+        const authConfig = await getAuthConfig();
+        let isAnonymous = true;
+        try {
+          const { accessToken } = await getAccessToken();
+          isAnonymous = !accessToken;
+        } catch (e) { }
+        if (isAnonymous && authConfig.RejectStrategy == 'to_login') {
+          redirectToLogin();
+        } else if (authConfig.RejectStrategy == 'show_warning') {
+          app.showToast({
+            title: '接口无访问权限',
+            icon: 'error',
+          });
+        }
+      }
+    }
+  }
+})
+
+App({
+  onLaunch(options) {
+    this.app = app
+    const onLaunch = lifeCycle.onLaunch || lifeCycle.onAppLaunch
+    let { query = {} } = options
+    EXTRA_API.setParams('$global', query)
+    createStateDataSourceVar('$global', generateParamsParser({ app }))
+
+    onLaunch && onLaunch.call(this, options)
+      <% if (yyptConfig.yyptAppKey) { %>
+        // 挂运营平台上报对象到app里
+        app.yyptReport = wxReport
+          <% }%>
+  },
+  onShow(options) {
+    const fn = lifeCycle.onShow || lifeCycle.onAppShow
+    fn && fn.call(this, options)
+      <% if (yyptConfig.yyptAppKey) { %>
+        wxReport.startReport()
+        <% }%>
+  },
+  onHide() {
+    const fn = lifeCycle.onHide || lifeCycle.onAppHide
+    fn && fn.call(this)
+  },
+  onError(msg) {
+    const fn = lifeCycle.onError || lifeCycle.onAppError
+    fn && fn.call(this, msg)
+  },
+  onPageNotFound() {
+    const fn = lifeCycle.onPageNotFound
+    fn && fn.call(this)
+  },
+  onUnhandledRejection() {
+    const fn = lifeCycle.onUnhandledRejection
+    fn && fn.call(this)
+  },
+})

package/template/mp/app.json

@@ -0,0 +1 @@
+<%= JSON.stringify(content, ' ', 2) %>

package/template/mp/app.wxss

@@ -0,0 +1,15 @@
+/** common.wxss **/
+page {
+  /* 修复小程序 Picker 组件滑动体验问题 */
+  touch-action: pan-y;
+}
+
+page view, page element, page text, page image {
+  box-sizing: border-box;
+}
+
+/** import styles specified by material libs*/<% importStyles.map(style => {%>
+@import  '<%= style %>';<%})%>
+
+/** import lowcode styles */
+@import  'lowcode/style.wxss';

package/template/mp/common/data-patch-test.js

@@ -0,0 +1,60 @@
+import assert from 'assert'
+import { getDatapatch } from './data-patch.js'
+
+const cases = [
+    {
+        desc: 'New component',
+        base: {},
+        data: { id1: { a: 1 } },
+        patch: { id1: { a: 1 } }
+    }, {
+        desc: 'Component prop update',
+        base: { id1: { a: 1, b: 2 } },
+        data: { id1: { a: 1, b: 3 } },
+        patch: { 'id1.b': 3 }
+    }, {
+        desc: 'More than 1/3 of props changed',
+        base: { id1: { a: 1, b: 2, c: 3 } },
+        data: { id1: { a: 1, b: 4, c: 5 } },
+        patch: { id1: { a: 1, b: 4, c: 5 } }
+    }, {
+        desc: 'New multiple components',
+        base: {},
+        data: { id1: { a: 1 }, id2: { c: 2 }, id3: [{ c: 1 }] },
+        patch: { id1: { a: 1 }, id2: { c: 2 }, id3: [{ c: 1 }] }
+    },
+    {
+        desc: 'Update component prop in array',
+        base: { id1: [{ a: 1 }, { a: 2 }, { a: 8 }] },
+        data: { id1: [{ a: 1 }, { a: 3 }, { a: 8 }] },
+        patch: { 'id1[1].a': 3 }
+    },
+    {
+        desc: 'Update component prop in 2d array',
+        base: { id1: [[{ a: 1 }, { a: 2 }], [{ a: 1 }]] },
+        data: { id1: [[{ a: 1 }, { a: 3 }], [{ a: 1 }]] },
+        patch: { 'id1[0][1].a': 3 }
+    },
+    {
+        desc: 'Add component in array',
+        base: { id1: [{ a: 1 }, { a: 2 }] },
+        data: { id1: [{ a: 1 }, { a: 2 }, { a: 9 }] },
+        patch: { 'id1[2]': { a: 9 } }
+    },
+    {
+        desc: 'Add 2 components in array',
+        base: { id1: [{ a: 1 }, { a: 2 }] },
+        data: { id1: [{ a: 1 }, { a: 2 }, { a: 9 }, { a: 8 }] },
+        patch: { 'id1[2]': { a: 9 }, 'id1[3]': { a: 8 } }
+    },
+    {
+        desc: 'array: delete component',
+        base: { id1: [{ a: 1 }, { a: 2 }, { a: 2 }] },
+        data: { id1: [{ a: 1 }, { a: 2 }] },
+        patch: { id1: [{ a: 1 }, { a: 2 }] }
+    }
+]
+
+for (const c of cases) {
+    assert.deepStrictEqual(getDatapatch(c.base, c.data), c.patch, c.desc)
+}

package/template/mp/common/data-patch.js

@@ -0,0 +1,44 @@
+
+export function getDatapatch(base, pendingData) {
+  const patch = {}
+  for (const widgetId in pendingData) {
+    const baseWidget = base[widgetId]
+    const pendingWidget = pendingData[widgetId]
+    if (!baseWidget) {
+      patch[widgetId] = pendingWidget
+    } else {
+      patchProp(baseWidget, pendingWidget, patch, widgetId)
+    }
+  }
+  return patch
+}
+
+function patchProp(baseWidget, pendingWidget, patch, prefixes) {
+  if (Array.isArray(pendingWidget)) {
+    if (pendingWidget.length < baseWidget.length) { // array element deleted
+      patch[prefixes] = pendingWidget
+      return
+    }
+    for (let i = 0; i < pendingWidget.length; i++) {
+      if (!baseWidget[i]) { // new array element
+        patch[prefixes + '[' + i + ']'] = pendingWidget[i]
+      } else {
+        patchProp(baseWidget[i], pendingWidget[i], patch, prefixes + '[' + i + ']')
+      }
+    }
+  } else {
+    if (pendingWidget._waIf === false && baseWidget._waIf === false) {
+      return
+    }
+    const allProps = Object.keys(pendingWidget)
+    // Attention: since setData will copy data deeply, if property is object, it should be treated as different
+    const differentProps = allProps.filter(prop => typeof pendingWidget[prop] === 'object' || pendingWidget[prop] !== baseWidget[prop])
+    if (differentProps.length === 1 || differentProps.length <= allProps.length / 3) {
+      differentProps.map(patchProp => {
+        patch[prefixes + '.' + patchProp] = pendingWidget[patchProp]
+      })
+    } else {
+      patch[prefixes] = pendingWidget
+    }
+  }
+}

package/template/mp/common/merge-renderer.js

@@ -0,0 +1,67 @@
+import { autorun } from 'mobx'
+import { touchObj, throttle } from './util'
+import { resolveWidgetData } from './widget'
+import { getDatapatch } from './data-patch'
+
+export default {
+  // Attention, must be called at the end of attached or page load to make sure user init take effect
+  initMergeRenderer(widgets) {
+    this.flushPendingData = throttle(this.flushPendingData.bind(this), 18)
+
+    const dataFactory = {
+      // <%= dataPropNames.pageState %>: () => pageState,
+      // <%= dataPropNames.pageComputed %>: () => pageComputed,
+    }
+    for (const id in widgets) {
+      const props = widgets[id]
+      dataFactory['<%= dataPropNames.widgetProp %>' + id] = () => resolveWidgetData(props)
+    }
+    const disposers = []
+    for (const k in dataFactory) {
+      const disposer = autorun(r => {
+        this.requestRender({ [k]: dataFactory[k]() })
+      })
+      disposers.push(disposer)
+    }
+    this.flushPendingData() // Prepare data for first paint
+    return disposers
+  },
+
+  // setData merging
+  pendingData: null,
+  _settingData: false,  // flag to prevent multiple setData at the same time
+  flushPendingData() {
+    if (!this.pendingData || this._settingData) { return }
+    const patch = getDatapatch(this.data, this.pendingData)
+    this.pendingData = null
+    const label = `setData ${this.is} ${this.id}(${Object.keys(patch).join(',')})`
+
+    if (Object.keys(patch).length < 1) {
+      return
+    }
+    this._settingData = true
+    const lastUpdateTime = Date.now()
+    this.setData(patch, () => {<% if(debug) {%>
+      const elapsedTime = Date.now() - lastUpdateTime;
+      if(elapsedTime > 16) {
+        console.warn(label, elapsedTime)
+      }else {
+        console.info(label, elapsedTime)
+      }<%} %>
+      this._settingData = false;
+      this.flushPendingData()
+    })
+  },
+  requestRender(data) {
+    if(!this._pageActive) {
+      // The callback of wx.chooseLocation occured when page is inactive
+      console.warn(`Attention, you're updating widgets(${Object.keys(data).join(',')}) of inactive page(${this.is})`)
+    }
+    if (!this.pendingData) {
+      this.pendingData = {}
+    }
+    wx.nextTick(this.flushPendingData)
+    touchObj(data)  // Touch all props to monitor data deeply, FIXME
+    Object.assign(this.pendingData, data)
+  },
+}

package/template/mp/common/process.js

@@ -0,0 +1 @@
+export default { env: { buildType: 'mp' } }

package/template/mp/common/style.js

@@ -0,0 +1,34 @@
+import { toDash } from './util'
+/**
+ * Convert HtmlElement.style object to css declarations
+ */
+export function styleToCss(style) {
+  const styleDeclars = [] // ['color: red;', 'background-color: green']
+  for (const key in style) {
+    styleDeclars.push(toDash(key) + ':' + style[key] + ';')
+  }
+  return styleDeclars.join('')
+}
+
+export function concatClassList(classList1 = [], classList2 = []) {
+  if (!Array.isArray(classList1)) {
+    classList1 = [classList1]
+  }
+  if (!Array.isArray(classList2)) {
+    classList2 = [classList2]
+  }
+  return classList1.concat(classList2)
+}
+
+export function px2rpx(object) {
+  let reg = /\b(\d+(\.\d+)?)px\b/g
+  for (const key in object) {
+    let value = object[key]
+    if (typeof value === 'string') {
+      object[key] = value.replace(reg, function (item, value) {
+        return `${value}rpx`
+      })
+    }
+  }
+  return object
+}