@cloudbase/lowcode-builder 0.1.5-mpbeta.0 → 0.1.5-mpbeta.3

package/README.md

@@ -0,0 +1,59 @@
+## 本包说明
+- @cloudbase/lowcode-builder是微搭用于将DSL构建为小程序和web的构建包。
+- 例子在__tests__/build.ts下
+- 主要是在node环境下运行。由于微信IDE的背景，提供了web构建出小程序版本的功能。两种方式如何使用见以下示例
+
+## node端使用
+使用示例：
+```javascript
+import { buildWedaApp } from '@cloudbase/lowcode-builder';
+import { simpleData as data, options } from './data';
+import path from 'path';
+import fs from 'fs-extra';
+
+const outPath = path.resolve(__dirname, '.temp');
+fs.emptyDirSync(outPath);
+buildWedaApp({
+  ...data,
+  ...options,
+  buildTypeList: ['web' as any],
+  output: { path: outPath },
+}).then((dir) => {
+  console.log(dir);
+});
+```
+
+## web端使用
+使用示例：
+```javascript
+export async function builderToZip(builderData: any, selectedPageId: string, outputPath: string) {
+  return import('@cloudbase/lowcode-builder/lib/builder.web').then(async (result) => {
+    try {
+      console.log('rose builderToZip import result ', result);
+      const { buildWedaApp, getFiles, fileToZip, strToBuf } = result;
+
+      // 1、构建到指定路径，返回构建文件存放路径
+      const buildPath = await buildWedaApp(builderData);
+
+      // 2、从指定路径获取文件
+      const files = await getFiles(buildPath, {}, `${outputPath}/`);
+
+      // 3、修改app.json入口地址
+      const finalFiles = setEntryPage(files, selectedPageId, strToBuf);
+
+      // 4、得到zip包，返回主进程，传给微信hybrid
+      const zipFiles = await fileToZip(finalFiles, 'arraybuffer'); // blob or arraybuffer
+
+      return {
+        zipFiles,
+        strFiles: '', // TODO暂时保留，用于返回zip包内容
+      };
+    } catch (err) {
+      error('builder.worker.js->builderToZip->catch：', err);
+      throw err;
+    }
+  });
+}
+```
+
+

package/lib/builder/config/index.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/h5/copy.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/h5/material.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/mp/index.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/mp/materials.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/mp/mixMode.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/mp/mp_config.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -106,8 +102,8 @@ function generateMpConfig(weapps, ctx) {
         appConfig.plugins = plugins;
     }
     miniprogramPlugins.forEach((plugin) => {
-        var _a;
-        if (!((_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.plugins) === null || _a === void 0 ? void 0 : _a[plugin.name])) {
+        var _a, _b;
+        if (!((_b = (_a = appConfig) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b[plugin.name])) {
             (0, lodash_1.set)(appConfig, `plugins.${plugin.name}`, {
                 version: plugin.version,
                 provider: plugin.pluginAppId,

package/lib/builder/mp/plugin.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/mp/util.js

@@ -111,7 +111,7 @@ exports.createWidgetProps = createWidgetProps;
 function createEventHanlders(widgets, componentApi, ctx) {
     const eventHanlders = {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
-        var _a, _b;
+        var _a, _b, _c;
         const { xComponent } = widget;
         const xProps = widget.xProps || {};
         if (!xComponent) {
@@ -175,6 +175,19 @@ function createEventHanlders(widgets, componentApi, ctx) {
                 type: l.type,
             });
         });
+        // 如果是数据容器，则生成一个onDataChange事件处理
+        if ((_c = compProto === null || compProto === void 0 ? void 0 : compProto.compConfig) === null || _c === void 0 ? void 0 : _c.isDataContainer) {
+            const customName = (0, wxml_1.getMpEventHanlderName)(id, 'onDataChange', {});
+            eventHanlders[customName] = [{
+                    key: '',
+                    handler: `({event})=>{
+          app.utils.set(context, '${id}.data', event?.detail?.data);
+        }`,
+                    handlerModule: weapps_core_1.ActionType.Platform,
+                    data: {},
+                    boundData: {},
+                }];
+        }
     });
     return eventHanlders;
 }

package/lib/builder/mp/wxml.js

@@ -101,8 +101,20 @@ function generateWxml(widgets, docTag, wxmlDataPrefix, ctx, usingComponents, com
             else if (path) {
                 usingComponents[tagName] = path;
             }
+            let curForNodes = parentForNodes;
+            if (directives.waFor && directives.waFor.value) {
+                curForNodes = [...curForNodes, id];
+            }
+            const attrPrefix = `${wxmlDataPrefix.widgetProp}${id}${curForNodes
+                .map((forNodeId) => `[${wxmlDataPrefix.forIndex}${forNodeId}]`)
+                .join('')}`;
+            const idAttr = curForNodes.length < 1
+                ? id
+                : `{{'${id}'${curForNodes
+                    .map((forNodeId) => `+ '-' + ${wxmlDataPrefix.forIndex}${forNodeId}`)
+                    .join('')}}}`;
             if (tagName === 'slot') {
-                elements.push({
+                const slotNode = {
                     type: 'element',
                     name: tagName,
                     attributes: {
@@ -113,21 +125,13 @@ function generateWxml(widgets, docTag, wxmlDataPrefix, ctx, usingComponents, com
                     elements: [],
                     _order: xIndex || 0,
                     _parent: null,
-                });
+                };
+                if (directives.waIf && directives.waIf.value) {
+                    slotNode.attributes['wx:if'] = getAttrBind(directives.waIf, `${attrPrefix}_waIf`);
+                }
+                elements.push(slotNode);
                 continue;
             }
-            let curForNodes = parentForNodes;
-            if (directives.waFor && directives.waFor.value) {
-                curForNodes = [...curForNodes, id];
-            }
-            const attrPrefix = `${wxmlDataPrefix.widgetProp}${id}${curForNodes
-                .map((forNodeId) => `[${wxmlDataPrefix.forIndex}${forNodeId}]`)
-                .join('')}`;
-            const idAttr = curForNodes.length < 1
-                ? id
-                : `{{'${id}'${curForNodes
-                    .map((forNodeId) => `+ '-' + ${wxmlDataPrefix.forIndex}${forNodeId}`)
-                    .join('')}}}`;
             const node = {
                 type: 'element',
                 name: tagName,
@@ -205,6 +209,10 @@ function generateWxml(widgets, docTag, wxmlDataPrefix, ctx, usingComponents, com
             });
             // 扩展组件配置
             const compConfig = componentProto.compConfig;
+            // 如果是数据容器，则增加一个onDataChange事件 bind:onDataChange="onid1$onDataChange"
+            if (compConfig === null || compConfig === void 0 ? void 0 : compConfig.isDataContainer) {
+                node.attributes['bind:onDataChange'] = getMpEventHanlderName(id, 'onDataChange');
+            }
             if (compConfig && compConfig.pluginConfig) {
                 if (compConfig.pluginConfig.attributes) {
                     Object.assign(node.attributes, compConfig.pluginConfig.attributes);

package/lib/builder/util/generateFiles.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/util/index.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/util/mp.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/builder/util/net.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/index.js

@@ -1,11 +1,7 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "0.1.5-mpbeta.0",
+  "version": "0.1.5-mpbeta.3",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -25,29 +25,28 @@
   "scripts": {
     "dev": "tsc -w",
     "develop": "tsc -w",
-    "build": "rm -rf lib && tsc",
+    "build": "rm -rf lib && tsc && npm run build:web",
     "test": "jest",
     "test:build": "ts-node ./__test__/build.ts",
-    "dev:mpweb": "rm -rf dist && cross-env NODE_ENV=development webpack-dev-server --config ./webpack/mpweb.config.js",
-    "build:mpweb": "rm -rf dist && cross-env NODE_ENV=production webpack --config ./webpack/mpweb.config.js",
-    "prepublish": "npm run build"
+    "dev:web": "rm -rf dist && node ./webpack/scripts/web.pre.js && cross-env NODE_ENV=development webpack-dev-server --config ./webpack/web.config.js",
+    "build:web": "rm -rf dist && node ./webpack/scripts/web.pre.js && cross-env NODE_ENV=production webpack --config ./webpack/web.config.js && node ./webpack/scripts/web.post.js"
   },
   "bugs": {
     "url": "https://github.com/TencentCloudBase/cloudbase-framework/issues"
   },
   "dependencies": {
     "@cloudbase/cals": "^0.3.3",
-    "@cloudbase/lowcode-generator": "0.6.17-mpbeta.0",
+    "@cloudbase/lowcode-generator": "0.6.17-mpbeta.1",
     "axios": "^0.21.0",
     "browserfs": "^1.4.3",
     "browserify-zlib": "^0.2.0",
     "chalk": "^2.4.2",
     "compare-versions": "^3.6.0",
     "compressing": "^1.4.0",
-    "cross-spawn": "^6.0.5",
-    "fs-extra": "^7.0.1",
     "constants-browserify": "^1.0.0",
+    "cross-spawn": "^6.0.5",
     "crypto-browserify": "^3.12.0",
+    "fs-extra": "^7.0.1",
     "jszip": "^3.7.1",
     "lodash": "^4.17.11",
     "lodash.clone": "^4.5.0",
@@ -61,7 +60,6 @@
     "xml-js": "^1.6.11"
   },
   "devDependencies": {
-    "worker-loader": "^3.0.8",
     "@rollup/plugin-alias": "^3.1.9",
     "@types/archiver": "^3.1.0",
     "@types/command-exists": "^1.2.0",
@@ -79,7 +77,9 @@
     "ts-loader": "^8.3.0",
     "ts-node": "^10.4.0",
     "typescript": "^4.4.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3"
+    "webpack-dev-server": "^4.7.3",
+    "worker-loader": "^3.0.8"
   }
-}
+}

package/template/mp/common/util.js

@@ -27,7 +27,7 @@ export function createComputed(funcs, bindContext = null) {
   return computed
 }
 
-export function createEventHandlers(evtListeners) {
+export function createEventHandlers(evtListeners, context) {
   const evtHandlers = {}
   for (const name in evtListeners) {
     const listeners = evtListeners[name]
@@ -45,7 +45,7 @@ export function createEventHandlers(evtListeners) {
         let { data = {}, boundData = {} } = l
         data = { ...data }
         for (const k in boundData) {
-          set(data, k, boundData[k].call(owner, owner, lists, itemsById, event))
+          set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, context))
         }
         try {
           let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data })

package/template/mp/common/weapp-component.js

@@ -10,7 +10,7 @@ import sdk from './weapp-sdk'
  */
 export const compLowcodes = {}
 
-export function createComponent(key, behaviors, properties, events, handler, dataBinds, evtListeners, widgetProps, index, lifeCycle, stateFn, computedFuncs, config, libCommonRes) {
+export function createComponent(key, behaviors, properties, events, handler, dataBinds, evtListeners, widgetProps, index, lifeCycle, stateFn, computedFuncs, config, libCommonRes, undefined, context) {
 
   compLowcodes[key] = {
     index,
@@ -56,7 +56,7 @@ export function createComponent(key, behaviors, properties, events, handler, dat
 
         $comp.props.events = createPropEvents(events, this)
         $comp.widgets = {}
-        const { widgets, rootWidget: virtualRootWidget } = createWidgets(widgetProps, dataBinds, $comp.widgets, this)
+        const { widgets, rootWidget: virtualRootWidget } = createWidgets(widgetProps, dataBinds, $comp.widgets, context, this)
         this._virtualRootWidget = virtualRootWidget
 
         try {
@@ -104,7 +104,7 @@ export function createComponent(key, behaviors, properties, events, handler, dat
     },
 
     methods: {
-      ...createEventHandlers(evtListeners),
+      ...createEventHandlers(evtListeners, context),
       ...mergeRenderer,
       getWeAppInst() {
         const $comp = this.$WEAPPS_COMP

package/template/mp/common/weapp-page.js

@@ -17,9 +17,10 @@ export function createPage(
   dataBinds,
   app,
   handler,
-  pageContext = {}
+  pageContext = {},
+  context
 ) {
-  const evtHandlers = createEventHandlers(evtListeners);
+  const evtHandlers = createEventHandlers(evtListeners, context);
 
   function extractLifecyles() {
     const result = { };
@@ -144,7 +145,7 @@ export function createPage(
           });
         };
 
-        const { rootWidget } = createWidgets(widgetProps, dataBinds, $page.widgets, this)
+        const { rootWidget } = createWidgets(widgetProps, dataBinds, $page.widgets, context, this)
         $page._rootWidget = rootWidget
 
         return $page

package/template/mp/common/widget.js

@@ -35,10 +35,10 @@ export function resolveWidgetData(props) {
 }
 
 
-export function createWidgets(widgetProps, dataBinds, widgetHolder, ownerMpInst) {
+export function createWidgets(widgetProps, dataBinds, widgetHolder, context, ownerMpInst) {
   const rootNode = createWidgetDataTree(widgetProps, dataBinds)
   const failedBinds = []
-  const result = createSubWidgetTree(rootNode, widgetProps, dataBinds, ownerMpInst, widgetHolder, 0, {}, null, failedBinds)
+  const result = createSubWidgetTree(rootNode, widgetProps, dataBinds, ownerMpInst, widgetHolder, 0, {}, null, failedBinds, undefined, context)
   retryFailedBinds(failedBinds, true)
   return result
 }
@@ -51,7 +51,7 @@ export function createWidgets(widgetProps, dataBinds, widgetHolder, ownerMpInst)
  */
 function createSubWidgetTree(curForNode, widgetProps, dataBinds, ownerMpInst, widgetHolder = {},
   index = 0, forItems = {}, ownerForWidgetHolder = null,
-  failedBinds = [], defaultParent = { children: observable([]), _disposers: [] }) {
+  failedBinds = [], defaultParent = { children: observable([]), _disposers: [] }, context) {
   const indexPostfix = (forItems.lists || []).slice().reverse().map(list => idSeparator + list.currentIndex).join('')
 
   // traverse down the tree to set up all widgets
@@ -75,7 +75,7 @@ function createSubWidgetTree(curForNode, widgetProps, dataBinds, ownerMpInst, wi
       } else {
         disposeWidget(existedWidget, true)
       }
-      setUpWidgetDataBinds(w, dataBinds[node.id], forItems, failedBinds, ownerMpInst.getWeAppInst())
+      setUpWidgetDataBinds(w, dataBinds[node.id], forItems, failedBinds, ownerMpInst.getWeAppInst(), context)
       widgetHolder[node.id] = w
     } else if (!existedWidget) {
       const len = parentForWidgetArr.push(observable([]))
@@ -91,7 +91,7 @@ function createSubWidgetTree(curForNode, widgetProps, dataBinds, ownerMpInst, wi
     if (node.forCount === curForNode.forCount + 1 && dataBinds[node.id] && dataBinds[node.id]._waFor) {
       // find the node bound with next level for
       const parent = node.parent ? widgetHolder[node.parent.id] : defaultParent
-      const dispose = runFor(node, widgetProps, dataBinds, ownerMpInst, forItems, widgetHolder, failedBinds, parent)
+      const dispose = runFor(node, widgetProps, dataBinds, ownerMpInst, forItems, widgetHolder, failedBinds, parent, context)
       parent._disposers.push(dispose)  // Add the for bind dispose to the parent node of forNode
     }
   })
@@ -119,12 +119,12 @@ function retryFailedBinds(failedBinds, finalTry) {
  * @param {*} parentWidget
  * @returns top level widgets or for dispose
  */
-function runFor(curForNode, widgetProps, dataBinds, ownerMpInst, forItems, ownerForWidgetHolder, failedBinds, defaultParent) {
+function runFor(curForNode, widgetProps, dataBinds, ownerMpInst, forItems, ownerForWidgetHolder, failedBinds, defaultParent, context) {
   const nodeId = curForNode.id
   const dispose = autorun(() => {
     let forList = []
     try {
-      forList = dataBinds[nodeId]._waFor.call(ownerMpInst.getWeAppInst(), ownerMpInst.getWeAppInst(), forItems.lists, forItems.itemsById)
+      forList = dataBinds[nodeId]._waFor.call(ownerMpInst.getWeAppInst(), ownerMpInst.getWeAppInst(), forItems.lists, forItems.itemsById, undefined, context)
       if (!Array.isArray(forList)) {
         forList = []
       }
@@ -162,7 +162,7 @@ function runFor(curForNode, widgetProps, dataBinds, ownerMpInst, forItems, owner
           lists: [{ currentItem: item, currentIndex: index }, ...lists],
           itemsById: { ...itemsById, [nodeId]: item },
         }
-        const { rootWidget } = createSubWidgetTree(curForNode, widgetProps, dataBinds, ownerMpInst, {}, index, _forItems, ownerForWidgetHolder, failedBinds, defaultParent)
+        const { rootWidget } = createSubWidgetTree(curForNode, widgetProps, dataBinds, ownerMpInst, {}, index, _forItems, ownerForWidgetHolder, failedBinds, defaultParent, context)
         rootWidget._forItems = _forItems
       })
     })
@@ -198,7 +198,7 @@ function createAWidget(props, id, parent, ownerMpInst) {
   return w
 }
 
-function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx) {
+function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx, context) {
   Object.keys(dataBinds || {}).map(prop => {
     if (prop === '_waFor') { return }
     const setUpDataBind = (isFinalTry) => {
@@ -207,7 +207,7 @@ function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx) {
       const dispose = autorun((reaction) => {
         try {
           // Computed data bind in the next tick since data bind may read widgets data
-          w[prop] = dataBinds[prop].call(ctx,ctx,forItems.lists, forItems.itemsById)
+          w[prop] = dataBinds[prop].call(ctx,ctx,forItems.lists, forItems.itemsById, undefined, context)
         } catch (e) {
           if (prop === '_waIf') {
             w[prop] = false

package/template/mp/component/index.js

@@ -1,3 +1,4 @@
+import { observable } from 'mobx';
 import { createComponent } from '../../../common/weapp-component'
 import { concatClassList, px2rpx } from '../../../common/style'
 import app from '../../../common/weapp-sdk'
@@ -11,6 +12,7 @@ import * as constObj from '../libCommonRes/const'
 import * as toolsObj from '../libCommonRes/tools'
 
 const libCode = '<%= materialName %>'
+const context = observable({});
 
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
 
@@ -18,9 +20,9 @@ const evtListeners = {<% Object.entries(eventHandlers).map(([handlerName, listen
   <%= handlerName%>: [
     <%listeners.map(l=> { %>{
       key: '<%= l.key %>',
-      handler: <% if (l.type == 'rematch') {%> _handler<%= l.handler %> <%} else if (l.type === 'inline') {%> function({event, lists, forItems}, $comp){ <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
+      handler: <% if (l.type == 'rematch') {%> _handler<%= l.handler %> <%} else if (l.type === 'inline') {%> function({event, lists, forItems, $context}, $comp){ <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
       data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, expr])=>{%>'<%= prop %>':($comp, lists, forItems, event) => {const $for=forItems;return (
+      boundData: {<% Object.entries(l.boundData).map(([prop, expr])=>{%>'<%= prop %>':($comp, lists, forItems, event, $context) => {const $for=forItems;return (
         <%= expr %>
       )},
         <%}) %>}
@@ -50,7 +52,7 @@ const handler = {<% handlers.forEach(h => {%>
 
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    <%= prop %>: function ($comp, lists, forItems, event) {const $for=forItems; return (
+    <%= prop %>: function ($comp, lists, forItems, event, $context) {const $for=forItems; return (
       <%= expr %>
     ); },<% }) %>
   },<%}) %>
@@ -59,4 +61,4 @@ const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
 const config = <%= JSON.stringify(config || {})%>
 
 createComponent('<%= key %>', behaviors, properties, events, handler, dataBinds, evtListeners, widgetProps,
- index, lifeCycle, stateFn, computedFuncs, config, { const: constObj, tools: toolsObj }, libCode)
+ index, lifeCycle, stateFn, computedFuncs, config, { const: constObj, tools: toolsObj }, libCode, context)

package/template/mp/page/index.js

@@ -1,3 +1,4 @@
+import { observable } from 'mobx';
 import { createPage } from '<%= subLevelPath %>../../common/weapp-page'
 import { concatClassList, px2rpx } from '<%= subLevelPath %>../../common/style'
 import { app } from '<%= subLevelPath %>../../app/weapps-api'
@@ -7,7 +8,9 @@ import lifecyle from '../../lowcode/<%= pageName %>/lifecycle'
 import state from '../../lowcode/<%= pageName %>/state'
 import computed from '../../lowcode/<%= pageName %>/computed'
 import { $page } from './api'
+
 const $app = app;
+const context = observable({});
 
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
 /** widget event listeners **/
@@ -15,9 +18,9 @@ const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listen
   <%= handlerName%>: [
     <%listeners.map(l=> { %>{
       key: '<%= l.key %>',
-      handler: <% if (l.type === 'rematch') {%> handlers.<%= l.handler %> <%} else if (l.type == 'material') {%> function(...args) { return require('../../materials/<%= l.handlerModule %>/actions/<%= l.handler %>/index').default(...args) } <%} else if (l.type == 'inline') {%> function({event, lists, forItems}, $page){const $for = forItems; return <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
+      handler: <% if (l.type === 'rematch') {%> handlers.<%= l.handler %> <%} else if (l.type == 'material') {%> function(...args) { return require('../../materials/<%= l.handlerModule %>/actions/<%= l.handler %>/index').default(...args) } <%} else if (l.type == 'inline') {%> function({event, lists, forItems, $context}, $page){const $for = forItems; return <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
       data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, expr])=>{%>'<%= prop %>':($page, lists, forItems, event) => {const $for = forItems; return (
+      boundData: {<% Object.entries(l.boundData).map(([prop, expr])=>{%>'<%= prop %>':($page, lists, forItems, event, $context) => {const $for = forItems; return (
         <%= expr %>
       )},
         <%}) %>}
@@ -26,10 +29,10 @@ const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listen
 }
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    <%= prop %>: function ($page, lists, forItems, event) {const $for = forItems; return (
+    <%= prop %>: function ($page, lists, forItems, event, $context) {const $for = forItems; return (
       <%= expr %>
     ); },<% }) %>
   },<%}) %>
 }
 
-createPage('<%= pageName %>', '<%= pageUUID %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page)
+createPage('<%= pageName %>', '<%= pageUUID %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page, context)