@cloudbase/lowcode-builder 1.0.39 → 1.1.0

package/lib/builder/mp/index.js

@@ -315,7 +315,7 @@ async function generatePkg(weapp, appRoot, ctx, pageConfigs) {
                     pageUUID: rootPath ? `${rootPath}/${page.id}` : page.id,
                     pageName: page.id,
                     pageSource: page.data.src || '',
-                    eventHanlders: (0, util_2.createEventHanlders)(page.componentInstances, 'this', ctx),
+                    eventHanlders: (0, util_2.createEventHanlders)(page.componentInstances, 'this', ctx, page),
                     dataBinds: (0, util_2.createDataBinds)(page.componentInstances, ctx),
                     pageAttributes: {
                         ...(((_a = page.data) === null || _a === void 0 ? void 0 : _a.appShareMessage) ? { appShareMessage: page.data.appShareMessage.value } : {}),

package/lib/builder/mp/util.d.ts

@@ -1,4 +1,4 @@
-import { IDynamicValue, IWeAppComponentInstance, ICompositedComponent } from '@cloudbase/lowcode-generator/lib/weapps-core';
+import { IDynamicValue, IWeAppComponentInstance, ICompositedComponent, IWeAppPage } from '@cloudbase/lowcode-generator/lib/weapps-core';
 import { IBuildContext } from './BuildContext';
 export declare function extractWidgetProps(props: Required<IWeAppComponentInstance>['xProps'], compInfo: ICompositedComponent): any;
 export declare function generatedDynamicData(data: {
@@ -7,13 +7,12 @@ export declare function generatedDynamicData(data: {
     staticProps: {};
     boundProps: {};
 };
-export declare function generateDataBind(bind: IDynamicValue): string;
 export declare function createWidgetProps(widgets: {
     [key: string]: IWeAppComponentInstance;
 }, ctx: IBuildContext): {};
 export declare function createEventHanlders(widgets: {
     [key: string]: IWeAppComponentInstance;
-}, componentApi: string, ctx: IBuildContext): {};
+}, componentApi: string, ctx: IBuildContext, page?: IWeAppPage): {};
 export declare function createDataBinds(widgets: {
     [key: string]: IWeAppComponentInstance;
 }, ctx: IBuildContext): {};

package/lib/builder/mp/util.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDataBinds = exports.createEventHanlders = exports.createWidgetProps = exports.generateDataBind = exports.generatedDynamicData = exports.extractWidgetProps = void 0;
+exports.createDataBinds = exports.createEventHanlders = exports.createWidgetProps = exports.generatedDynamicData = exports.extractWidgetProps = void 0;
 const weapps_core_1 = require("@cloudbase/lowcode-generator/lib/weapps-core");
+const lowcode_generator_1 = require("@cloudbase/lowcode-generator");
 const weapp_1 = require("@cloudbase/lowcode-generator/lib/generator/util/weapp");
 const wxml_1 = require("./wxml");
 const mp_1 = require("@cloudbase/lowcode-generator/lib/generator/config/mp");
@@ -47,20 +48,27 @@ function generatedDynamicData(data, compInfo) {
             }
         }
         else {
-            boundProps[key] = generateDataBind(data[key]);
+            setDataBind(boundProps, key, data[key]);
         }
     }
     return { staticProps, boundProps };
 }
 exports.generatedDynamicData = generatedDynamicData;
 // For JS
-function generateDataBind(bind) {
+function generateDataBindMeta(bind) {
     let expr = '';
+    let imports = 'const $for = forItems; const $index=lists?.[0]?.currentIndex;'; // 基础 alias
     const { type, value } = bind;
     if (type === weapps_core_1.PropBindType.forItem) {
-        expr = `forItems.${value}`;
+        expr = `$for.${value}`;
     }
     else if (type === weapps_core_1.PropBindType.expression) {
+        try {
+            imports += (0, lowcode_generator_1.generateExpressionAlias)(value);
+        }
+        catch (e) {
+            console.error('parse expression error', value, e);
+        }
         expr = value;
     }
     else if (type === weapps_core_1.PropBindType.prop) {
@@ -98,9 +106,8 @@ function generateDataBind(bind) {
             }
         }
     }
-    return expr;
+    return { imports, expression: expr };
 }
-exports.generateDataBind = generateDataBind;
 function createWidgetProps(widgets, ctx) {
     const widgetProps = {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
@@ -130,8 +137,9 @@ function createWidgetProps(widgets, ctx) {
     return widgetProps;
 }
 exports.createWidgetProps = createWidgetProps;
-function createEventHanlders(widgets, componentApi, ctx) {
-    const eventHanlders = {};
+function createEventHanlders(widgets, componentApi, ctx, page) {
+    let eventHandlers = {};
+    const { listeners: pageListeners = [], id: pageId = '' } = page || {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
         var _a, _b, _c;
         const { xComponent } = widget;
@@ -168,43 +176,15 @@ function createEventHanlders(widgets, componentApi, ctx) {
                 });
             });
         }
-        listeners.forEach((l) => {
-            var _a, _b, _c;
-            const handlerName = (0, wxml_1.getMpEventHanlderName)(id, l.trigger, l);
-            eventHanlders[handlerName] = eventHanlders[handlerName] || [];
-            const params = generatedDynamicData(l.data);
-            let handler = l.handler ? l.handler.name : l.jsCode;
-            switch (l.type) {
-                case weapps_core_1.ActionType.Platform: {
-                    handler = `function({data}){ return app.${(_a = l.handler) === null || _a === void 0 ? void 0 : _a.name}(data)}`;
-                    break;
-                }
-                case weapps_core_1.ActionType.DataSource: {
-                    handler = `function({data}){ return app.cloud.callDataSource(data)}`;
-                    break;
-                }
-                case weapps_core_1.ActionType.PropEvent: {
-                    handler = `function({event, data = {}}){ return ${componentApi}.props.events.${(_b = l.handler) === null || _b === void 0 ? void 0 : _b.name}({...event.detail, ...data}) }`;
-                    break;
-                }
-            }
-            eventHanlders[handlerName].push({
-                key: l.key || '',
-                handler: handler,
-                handlerModule: (_c = l.handler) === null || _c === void 0 ? void 0 : _c.moduleName,
-                data: params.staticProps,
-                boundData: params.boundProps,
-                type: l.type,
-            });
-        });
+        eventHandlers = Object.assign(eventHandlers, getListenersHandlers(listeners, id, componentApi));
         // 如果是数据容器，则生成一个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] = [
+            eventHandlers[customName] = [
                 {
                     key: '',
                     handler: `({event})=>{
-          app.utils.set(context, '${id}.data', event?.detail?.data);
+          event.currentTarget._scope.dataContext = {data: event?.detail?.data, state: event?.detail?.state}
         }`,
                     handlerModule: weapps_core_1.ActionType.Platform,
                     data: {},
@@ -213,9 +193,52 @@ function createEventHanlders(widgets, componentApi, ctx) {
             ];
         }
     });
-    return eventHanlders;
+    // 增加页面事件节点 handlers
+    eventHandlers = Object.assign(eventHandlers, getListenersHandlers(pageListeners, pageId, componentApi));
+    return eventHandlers;
 }
 exports.createEventHanlders = createEventHanlders;
+/**
+ * 根据 listeners 创建 handlers
+ * @param listeners {IEventListener[]}
+ * @param id {string}
+ * @param componentApi {string}
+ */
+function getListenersHandlers(listeners, id, componentApi) {
+    if (!id)
+        return {};
+    const eventHandlers = {};
+    listeners.forEach((l) => {
+        var _a, _b, _c;
+        const handlerName = (0, wxml_1.getMpEventHanlderName)(id, l.trigger, l);
+        eventHandlers[handlerName] = eventHandlers[handlerName] || [];
+        const params = generatedDynamicData(l.data);
+        let handler = l.handler ? l.handler.name : l.jsCode;
+        switch (l.type) {
+            case weapps_core_1.ActionType.Platform: {
+                handler = `function({data}){ return app.${(_a = l.handler) === null || _a === void 0 ? void 0 : _a.name}(data)}`;
+                break;
+            }
+            case weapps_core_1.ActionType.DataSource: {
+                handler = `function({data}){ return app.cloud.callDataSource(data)}`;
+                break;
+            }
+            case weapps_core_1.ActionType.PropEvent: {
+                handler = `function({event, data = {}}){ return ${componentApi}.props.events.${(_b = l.handler) === null || _b === void 0 ? void 0 : _b.name}({...event.detail, ...data}) }`;
+                break;
+            }
+        }
+        eventHandlers[handlerName].push({
+            key: l.key || '',
+            handler: handler,
+            handlerModule: (_c = l.handler) === null || _c === void 0 ? void 0 : _c.moduleName,
+            data: params.staticProps,
+            boundData: params.boundProps,
+            type: l.type,
+        });
+    });
+    return eventHandlers;
+}
 function createDataBinds(widgets, ctx) {
     const dataBinds = {};
     (0, weapp_1.walkThroughWidgets)(widgets, (id, widget, parentId) => {
@@ -242,10 +265,16 @@ function createDataBinds(widgets, ctx) {
         setDataBind(dataBinds[id], 'style', xProps.styleBind);
         const { classList, style } = dataBinds[id];
         if (classList) {
-            dataBinds[id].classList = `concatClassList(${classList}, widgetProps.${id}.classList)`;
+            dataBinds[id].classList = {
+                ...classList,
+                expression: `concatClassList(${classList === null || classList === void 0 ? void 0 : classList.expression}, widgetProps.${id}.classList)`,
+            };
         }
         if (style) {
-            dataBinds[id].style = `px2rpx({...widgetProps.${id}.style, ...(${style})})`;
+            dataBinds[id].style = {
+                ...style,
+                expression: `px2rpx({...widgetProps.${id}.style, ...(${style === null || style === void 0 ? void 0 : style.expression})})`,
+            };
         }
         if (Object.keys(dataBinds[id]).length === 0) {
             delete dataBinds[id];
@@ -255,10 +284,10 @@ function createDataBinds(widgets, ctx) {
 }
 exports.createDataBinds = createDataBinds;
 function setDataBind(target, prop, val) {
-    if (val && val.type && val.type !== 'static') {
-        const jsExpr = generateDataBind(val);
-        if (jsExpr) {
-            target[prop] = jsExpr;
+    if ((val === null || val === void 0 ? void 0 : val.type) && val.type !== 'static') {
+        const meta = generateDataBindMeta(val);
+        if (meta.expression) {
+            target[prop] = meta;
         }
         // Do not generate propBind since it's bound directly in wxml except for _waFor
         // const propsKeepPropBindInJs = ['_waFor', '_waIf']

package/lib/builder/mp/wxml.js

@@ -159,7 +159,7 @@ function generateWxml(widgets, docTag, wxmlDataPrefix, ctx, usingComponents, com
                 if (compSchema) {
                     const fieldDef = compSchema[prop];
                     if (!fieldDef && !isGlobalAttr(prop)) {
-                        console.log(error(`Prop(${prop}) does not exist on ${componentKey}. ${helpMsg}`));
+                        // console.log(error(`Prop(${prop}) does not exist on ${componentKey}. ${helpMsg}`));
                         continue;
                     }
                     if (fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.readOnly) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/lowcode-builder",
-  "version": "1.0.39",
+  "version": "1.1.0",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",
@@ -38,8 +38,8 @@
     "url": "https://github.com/TencentCloudBase/cloudbase-framework/issues"
   },
   "dependencies": {
-    "@cloudbase/cals": "^0.4.9",
-    "@cloudbase/lowcode-generator": "^1.0.18",
+    "@cloudbase/cals": "^0.4.10",
+    "@cloudbase/lowcode-generator": "^1.1.1",
     "axios": "^0.21.0",
     "browserfs": "^1.4.3",
     "browserify-zlib": "^0.2.0",

package/template/html/index.html.ejs

@@ -461,7 +461,7 @@
     ></script>
     <script
       crossorigin
-      src="https://qbase.cdn-go.cn/lcap/lcap-resource-cdngo/-/0.1.4/_files/static/weda-render/main.f25263146cb3af601abf.bundle.js"
+      src="https://qbase.cdn-go.cn/lcap/lcap-resource-cdngo/-/0.1.4/_files/static/weda-render/main.de5ed63f279e092bb776.bundle.js"
     ></script>
   </body>
 </html>

package/template/mp/common/util.js

@@ -28,53 +28,70 @@ export function createComputed(funcs, bindContext = null) {
   return computed
 }
 
-export function createEventHandlers(evtListeners, context) {
-  const evtHandlers = {}
+export function generateDataContext(widget) {
+  const dataContext = {};
+  while (widget?._scope) {
+    if (widget._scope.dataContext && !isEmptyObj(widget._scope.dataContext)) {
+      dataContext[widget._scope.id] = widget._scope.dataContext;
+    }
+    widget = widget.parent;
+  }
+  return dataContext;
+}
+
+/**
+ *
+ * @param evtListeners
+ */
+export function createEventHandlers(evtListeners) {
+  const evtHandlers = {};
   for (const name in evtListeners) {
-    const listeners = evtListeners[name]
-    evtHandlers[name] = function (event) {
-      const self = this
-      const owner = this.getWeAppInst()
-      const target = getWidget(owner.widgets, event.target.id)
-      const currentTarget = getWidget(owner.widgets, event.currentTarget.id)
-      event.target = target
-      event.currentTarget = currentTarget
-      const [prefix = ''] = name.split('$')
+    const listeners = evtListeners[name];
+    evtHandlers[name] = function (event = {}) {
+      const self = this;
+      const owner = this.getWeAppInst();
+      const target = !!event?.target?.id ? getWidget(owner.widgets, event.target.id) : undefined;
+      const currentTarget = !!event?.currentTarget?.id ? getWidget(owner.widgets, event.currentTarget.id) : undefined;
+      event.target = target;
+      event.currentTarget = currentTarget;
+      const [prefix = ''] = name.split('$');
       // The page event handler
-      const { lists = [], itemsById = {} } = findForItemsOfWidget(currentTarget) || {}
+      const { lists = [], itemsById = {} } = !!currentTarget && findForItemsOfWidget(currentTarget) || {}
+      const dataContext = generateDataContext(currentTarget)
+
       listeners.forEach(async l => {
-        let { data = {}, boundData = {} } = l
-        data = { ...data }
+        let { data = {}, boundData = {} } = l;
+        data = { ...data };
         try {
           for (const k in boundData) {
-            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, context))
+            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, dataContext))
           }
-          let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data })
-          let eventName = prefix && l.key ? `${prefix}$${l.key}_success` : ''
+          let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data });
+          let eventName = prefix && l.key ? `${prefix}$${l.key}_success` : '';
           self[eventName] && self[eventName]({
             ...event,
             detail: res
-          })
+          });
         } catch (e) {
-          let eventName = l.key ? `${prefix}$${l.key}_fail` : ''
+          let eventName = l.key ? `${prefix}$${l.key}_fail` : '';
           if (self[eventName]) {
-            console.error(`事件响应失败`, e)
+            console.error(`事件响应失败`, e);
             await self[eventName]({
               ...event,
               detail: e
-            })
+            });
           } else {
             app.showToast({
               icon: 'error',
               title: `事件响应失败`
-            })
-            throw e
+            });
+            throw e;
           }
-
         }
       })
     }
   }
+
   return evtHandlers
 }
 
@@ -232,6 +249,7 @@ export function findLoginPage() {
 }
 
 let _AUTH_CONFIG_CACHE = null;
+
 export async function getAuthConfig() {
   const { app } = getApp();
   if (_AUTH_CONFIG_CACHE) {
@@ -261,6 +279,7 @@ export async function getAuthConfig() {
 }
 
 let _AUTH_CACHE_MAP = {}
+
 async function getAccessPermission(app, appId, pageId) {
   const cacheKey = `${appId}-${pageId}`
   if (_AUTH_CACHE_MAP[cacheKey] !== undefined) {
@@ -361,6 +380,7 @@ export function redirectToLogin(currentPage) {
 
 let loading = {};
 export let enumOptions = observable({});
+
 export function formatEnum(path, optionname) {
   // 判断是单选还是多选
   let isSingle = Array.isArray(path);
@@ -378,6 +398,7 @@ export function formatEnum(path, optionname) {
   // 对多选或者单选有不同处理
   return !isSingle ? value : multiTmp?.join(',');
 }
+
 function getEnumOptions(optionName) {
   if (enumOptions[optionName]) {
     return enumOptions[optionName];
@@ -390,6 +411,7 @@ function getEnumOptions(optionName) {
   }
   return '';
 }
+
 async function getGeneralOptions(optionName) {
   const { app } = getApp();
   return app.cloud.callWedaApi({
@@ -401,3 +423,26 @@ async function getGeneralOptions(optionName) {
     },
   });
 }
+
+export function getMpEventHandlerName(widgetId, evtName, modifier = {}) {
+  // Only builtin events have will bubble
+  return `on${widgetId}$${evtName.replace(/\./g, '_')}${modifier.isCapturePhase ? '$cap' : ''}${
+    modifier.noPropagation ? '$cat' : ''
+  }`;
+}
+
+function isPlainObject(src) {
+  return Object.prototype.toString.call(src) === '[object Object]';
+}
+
+const isEmptyObj = (obj) => {
+  if (!isPlainObject(obj)) {
+    return false;
+  }
+  for (const i in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, i)) {
+      return false;
+    }
+  }
+  return true;
+};

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

@@ -12,7 +12,7 @@ import { createInitData } from './widget';
  */
 export const compLowcodes = {}
 
-export function createComponent(key, behaviors, properties, events, handler, dataBinds, evtListeners, widgetProps, index, lifeCycle, stateFn, computedFuncs, config, libCommonRes, undefined, context) {
+export function createComponent(key, behaviors, properties, events, handler, dataBinds, evtListeners, widgetProps, index, lifeCycle, stateFn, computedFuncs, config, libCommonRes, libCode) {
   const initData = createInitData(widgetProps, dataBinds, '');
   compLowcodes[key] = {
     index,
@@ -58,7 +58,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, context, this)
+        const { widgets, rootWidget: virtualRootWidget } = createWidgets(widgetProps, dataBinds, $comp.widgets, this)
         this._virtualRootWidget = virtualRootWidget
 
         try {
@@ -122,7 +122,7 @@ export function createComponent(key, behaviors, properties, events, handler, dat
     },
 
     methods: {
-      ...createEventHandlers(evtListeners, context),
+      ...createEventHandlers(evtListeners),
       ...mergeRenderer,
       getWeAppInst() {
         const $comp = this.$WEAPPS_COMP

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

@@ -1,10 +1,11 @@
 import { observable } from 'mobx';
 import { createComputed, createEventHandlers, checkAuth } from './util';
-import { createWidgets, createInitData, disposeWidget } from './widget';
+import { createWidgets, createInitData, disposeWidget, ID_SEPARATOR } from './widget';
 import mergeRenderer from './merge-renderer';
 import { createDataset, EXTRA_API, createStateDataSourceVar, generateParamsParser, setConfig } from '../datasources/index';
 import { runWatchers } from './watch'
 import lodashGet from 'lodash.get';
+import { getMpEventHandlerName } from "./util";
 
 export function createPage(
   id,
@@ -19,27 +20,18 @@ export function createPage(
   app,
   handler,
   pageContext = {},
-  context,
   pageAttributes
 ) {
-  const evtHandlers = createEventHandlers(evtListeners, context);
+  const evtHandlers = createEventHandlers(evtListeners);
 
-  function extractLifecyles() {
+  function extractLifecycles() {
     const result = {};
     Object.keys(lifecycle).map(name => {
       result[name] = function () {
         return lifecycle[name].apply(this.getWeAppInst(), arguments)
       }
     })
-    // const nameMaps = [
-    //   ['onReady', 'onPageReady'],
-    // ];
-    // nameMaps.forEach(e => {
-    //   if (!result[e[0]] && result[e[1]]) {
-    //     result[e[0]] = result[e[1]];
-    //     delete result[e[1]];
-    //   }
-    // });
+
     result['onShareAppMessage'] = (res) => {
       if (res?.from === 'button' && res?.target?.dataset?.weda_share_info) {
         return res?.target?.dataset?.weda_share_info;
@@ -77,14 +69,14 @@ export function createPage(
           if (!$page.componentMethods) {
             $page.componentMethods = {};
           }
-          const [id, index = 0] = e.target.id.split('-');
+          const [id, index = 0] = e.target.id.split(ID_SEPARATOR);
           if (!$page.componentMethods[id]) {
             $page.componentMethods[id] = [];
           }
           $page.componentMethods[id][index] = e.detail.methods;
         };
         this.__unmnt__ = (e) => {
-          const [id, index = 0] = e.target.id.split('-');
+          const [id, index = 0] = e.target.id.split(ID_SEPARATOR);
           if ($page.componentMethods) {
             const components = $page.componentMethods[id];
             if (components) {
@@ -114,7 +106,7 @@ export function createPage(
     methods: {
       _pageActive: true,
       /** page lifecycles **/
-      ...extractLifecyles(),
+      ...extractLifecycles(),
       ...evtHandlers,
       ...mergeRenderer,
       onLoad(options) {
@@ -129,20 +121,26 @@ export function createPage(
 
         const hook = lifecycle.onLoad || lifecycle.onPageLoad;
         hook && hook.call($page, query);
+
+        this.invokeEventHandler(id, 'load', {detail: {query}});
       },
       onReady() {
-        const $page = this.getWeAppInst()
+        const $page = this.getWeAppInst();
 
-        this._disposers.push(...runWatchers(index, this))
+        this._disposers.push(...runWatchers(index, this));
+
+        const hook = lifecycle.onReady || lifecycle.onPageReady;
+        hook && hook.call($page);
 
-        const hook = lifecycle.onReady || lifecycle.onPageReady
-        hook && hook.call($page)
+        this.invokeEventHandler(id, 'ready');
       },
       onUnload() {
         const $page = this.getWeAppInst()
 
         const hook = lifecycle.onUnload || lifecycle.onPageUnload;
         hook && hook.call($page);
+
+        this.invokeEventHandler(id, 'unload');
       },
       async onShow() {
         const $page = this.getWeAppInst()
@@ -159,14 +157,22 @@ export function createPage(
             weDaHasLogin: true,
           });
         }
+
+        this.invokeEventHandler(id, 'show');
       },
       onHide() {
         const $page = this.getWeAppInst()
         const hook = lifecycle.onHide || lifecycle.onPageHide;
         hook && hook.call($page);
         this._pageActive = false;
-      },
 
+        // 触发页面节点事件
+        this.invokeEventHandler(id, 'hide');
+      },
+      invokeEventHandler(id, triggerName, params = {}) {
+        const keyName = getMpEventHandlerName(id, triggerName);
+        typeof evtHandlers?.[keyName] === 'function' && evtHandlers[keyName].call(this, params);
+      },
       getWeAppInst() {
         let $page = this.$WEAPPS_PAGE
         if ($page) { return $page }
@@ -192,7 +198,7 @@ export function createPage(
           });
         };
 
-        const { rootWidget } = createWidgets(widgetProps, dataBinds, $page.widgets, context, this)
+        const { rootWidget } = createWidgets(widgetProps, dataBinds, $page.widgets, this)
         $page._rootWidget = rootWidget
 
         $page.invokeComponentMethod = ({ component, method, params }) => {

package/template/mp/common/widget.js

@@ -1,6 +1,6 @@
 import { observable, autorun, untracked } from 'mobx';
 import { styleToCss } from './style';
-import { getDeep } from './util';
+import { getDeep, generateDataContext } from './util';
 import { compLowcodes, create$comp } from './weapp-component';
 import EventEmitter from './event-emitter';
 import lodashSet from 'lodash.set';
@@ -23,7 +23,7 @@ function basePullAt(array, indexes) {
 
 function remove(array, predicate) {
   const result = [];
-  if (!(array != null && array.length)) {
+  if (!array?.length) {
     return result;
   }
   let index = -1;
@@ -65,6 +65,7 @@ function resolveWidgetProp(props) {
     '_parentId',
     'id',
     '_order',
+    '_scope',
     'widgetType',
     '$comp',
   ];
@@ -82,7 +83,7 @@ export function resolveWidgetData(props) {
   return props.map(resolveWidgetData);
 }
 
-export function createWidgets(widgetProps, dataBinds, widgetHolder, context, ownerMpInst) {
+export function createWidgets(widgetProps, dataBinds, widgetHolder, ownerMpInst) {
   const rootNode = createWidgetDataTree(widgetProps, dataBinds);
   const failedBinds = [];
   const result = createSubWidgetTree(
@@ -95,7 +96,6 @@ export function createWidgets(widgetProps, dataBinds, widgetHolder, context, own
     null,
     failedBinds,
     undefined,
-    context,
   );
   retryFailedBinds(failedBinds, true);
   return result;
@@ -117,12 +117,11 @@ function createSubWidgetTree(
   ownerForWidgetHolder = null,
   failedBinds = [],
   defaultParent = { children: observable([]), _disposers: [] },
-  context,
 ) {
   const indexPostfix = (forItems.lists || [])
     .slice()
     .reverse()
-    .map((list) => idSeparator + list.currentIndex)
+    .map((list) => ID_SEPARATOR + list.currentIndex)
     .join('');
 
   // traverse down the tree to set up all widgets
@@ -150,7 +149,7 @@ function createSubWidgetTree(
         if (parentNode) {
           parentWidget = widgetHolder[parentNode.id] || ownerForWidgetHolder[parentNode.id];
         }
-        w = createAWidget(widgetProps[node.id], node.id + indexPostfix, parentWidget, ownerMpInst);
+        w = createAWidget(widgetProps[node.id], node.id, indexPostfix, parentWidget, ownerMpInst);
         w._key = key;
         if (!parentWidget) {
           defaultParent.children.push(w);
@@ -159,7 +158,7 @@ function createSubWidgetTree(
       } else {
         disposeWidget(existedWidget, true);
       }
-      setUpWidgetDataBinds(w, dataBinds[node.id], forItems, failedBinds, ownerMpInst.getWeAppInst(), context);
+      setUpWidgetDataBinds(w, dataBinds[node.id], forItems, failedBinds, ownerMpInst.getWeAppInst());
       widgetHolder[node.id] = w;
     } else if (!existedWidget) {
       const len = parentForWidgetArr.push(observable([]));
@@ -175,17 +174,7 @@ function createSubWidgetTree(
     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,
-        context,
-      );
+      const dispose = runFor(node, widgetProps, dataBinds, ownerMpInst, forItems, widgetHolder, failedBinds, parent);
       parent._disposers.push(dispose); // Add the for bind dispose to the parent node of forNode
     }
   });
@@ -222,7 +211,6 @@ function runFor(
   ownerForWidgetHolder,
   failedBinds,
   defaultParent,
-  context,
 ) {
   const nodeId = curForNode.id;
   const { _waForKey } = curForNode.value;
@@ -231,13 +219,17 @@ function runFor(
     let forList = [];
     try {
       clearTimeout(_FOR_ERROR_CACHE_MAP[nodeId]);
+
+      const $instance = ownerMpInst.getWeAppInst();
+      const dataContext = generateDataContext(defaultParent);
+
       forList = dataBinds[nodeId]._waFor.call(
-        ownerMpInst.getWeAppInst(),
-        ownerMpInst.getWeAppInst(),
+        $instance,
+        $instance,
         forItems.lists,
         forItems.itemsById,
         undefined,
-        context,
+        dataContext,
       );
       if (!Array.isArray(forList)) {
         forList = [];
@@ -300,7 +292,7 @@ function runFor(
         let { lists = [], itemsById = {} } = forItems;
         const _forItems = {
           lists: [{ currentItem: item, currentIndex: index }, ...lists],
-          itemsById: { ...itemsById, [nodeId]: item, index: { ...itemsById?.index, [nodeId]: index } },
+          itemsById: { ...itemsById, [nodeId]: item },
         };
         const { rootWidget } = createSubWidgetTree(
           curForNode,
@@ -312,7 +304,6 @@ function runFor(
           ownerForWidgetHolder,
           failedBinds,
           defaultParent,
-          context,
         );
         rootWidget._forItems = _forItems;
       });
@@ -322,14 +313,22 @@ function runFor(
   return dispose;
 }
 
-function createAWidget(props, id, parent, ownerMpInst) {
+function createAWidget(props, nodeId, indexPostfix, parent, ownerMpInst) {
   const w = observable(props);
+  const id = `${nodeId}${indexPostfix}`;
 
   // Builtin props
   Object.defineProperty(w, 'id', { value: id });
   const { widgetType } = w;
   delete w.widgetType;
   Object.defineProperty(w, 'widgetType', { value: widgetType });
+  Object.defineProperty(w, '_scope', {
+    value: observable({
+      id: nodeId,
+      _parent: null,
+      dataContext: {},
+    }),
+  });
 
   // w._disposers = []
   // w.children = []
@@ -339,6 +338,7 @@ function createAWidget(props, id, parent, ownerMpInst) {
   if (parent) {
     // w.parent = parent
     Object.defineProperty(w, 'parent', { value: parent });
+    w._scope.parent = parent._scope;
     parent.children.push(w);
   }
   delete w._parentId;
@@ -348,7 +348,7 @@ function createAWidget(props, id, parent, ownerMpInst) {
   return w;
 }
 
-function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx, context) {
+function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx) {
   Object.keys(dataBinds || {})
     .sort((a, b) => {
       return a.length - b.length > 0 ? 1 : -1;
@@ -363,8 +363,11 @@ function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx, context)
         const dispose = autorun((reaction) => {
           try {
             clearTimeout(timer);
+
+            const dataContext = generateDataContext(w);
+
             // Computed data bind in the next tick since data bind may read widgets data
-            const value = dataBinds[prop].call(ctx, ctx, forItems.lists, forItems.itemsById, undefined, context);
+            const value = dataBinds[prop].call(ctx, ctx, forItems.lists, forItems.itemsById, undefined, dataContext);
             const paths = prop.split('.').filter((key) => !!key);
             if (paths.length > 1) {
               // 一定要 untracked 不然爆栈了
@@ -402,10 +405,9 @@ export function findForItemsOfWidget(widget) {
   if (widget.parent) return findForItemsOfWidget(widget.parent);
 }
 
-const idSeparator = '-';
-
+export const ID_SEPARATOR = '-';
 export function getWidget(widgets, id) {
-  return getDeep(widgets, id, idSeparator);
+  return getDeep(widgets, id, ID_SEPARATOR);
 }
 
 /**
@@ -445,7 +447,7 @@ function createWidgetDataTree(widgets, dataBinds) {
       node.forCount = node.parent.forCount;
     }
     if (dataBinds[node.id]?._waFor) {
-      node.forCount++;
+      node.forCount += 1;
     }
     node.children.map(addForCount);
   }

package/template/mp/component/index.js

@@ -11,7 +11,7 @@ import * as constObj from '../libCommonRes/const'
 import * as toolsObj from '../libCommonRes/tools'
 
 const libCode = '<%= materialName %>'
-const context = observable({});
+const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
 
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
 
@@ -21,8 +21,8 @@ const evtListeners = {<% Object.entries(eventHandlers).map(([handlerName, listen
       key: '<%= l.key %>',
       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, $context) => {const $for=forItems;return (
-        <%= expr === '' ? 'undefined': expr %>
+      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($comp, lists, forItems, event, $context) => {<%= bindMeta.imports %> return (
+        <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
       )},
         <%}) %>}
     },<%})%>
@@ -50,9 +50,9 @@ 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, $context) {const $for=forItems; return (
-      <%= expr === '' ? 'undefined': expr %>
+  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
+    "<%= prop %>": function ($comp, lists, forItems, event, $context) {<%= bindMeta.imports %> return (
+      <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
     ); },<% }) %>
   },<%}) %>
 }
@@ -60,4 +60,4 @@ const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
 const config = <%= JSON.stringify(config || {})%>
 
 createComponent('<%= key %>', behaviors, properties, events, handler, dataBinds, evtListeners, widgetProps,
- {}, lifeCycle, stateFn, computedFuncs, config, { const: constObj, tools: toolsObj }, libCode, context)
+ {}, lifeCycle, stateFn, computedFuncs, config, { const: constObj, tools: toolsObj }, libCode)

package/template/mp/package.json

@@ -3,7 +3,7 @@
 	"version": "1.0.8",
 	"scripts": {},
 	"dependencies": {
-		"@cloudbase/weda-client": "0.2.22",
+		"@cloudbase/weda-client": "0.2.25",
 		"@cloudbase/weda-cloud-sdk": "1.0.19",
 		"@cloudbase/oauth": "0.1.1-alpha.5",
 		"mobx": "^5.15.4",

package/template/mp/page/index.js

@@ -9,7 +9,6 @@ import { <%= pageName %> as handlers } from '../../app/handlers'
 import { $page } from './api'
 
 const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
-const context = observable({});
 
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
 /** widget event listeners **/
@@ -17,22 +16,22 @@ 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, $context}, $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}){const $for = forItems; const $index=lists?.[0]?.currentIndex; 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, $context) => {const $for = forItems; return (
-        <%= expr === '' ? 'undefined': expr %>
+      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($page, lists, forItems, event, $context) => {<%= bindMeta.imports %> return (
+        <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
       )},
         <%}) %>}
     },<%})%>
   ],<%})%>
 }
+
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
-  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    "<%= prop %>": function ($page, lists, forItems, event, $context) {const $for = forItems; return (
-      <%= expr === '' ? 'undefined': expr %>
+  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
+    "<%= prop %>": function ($page, lists, forItems, event, $context) {<%= bindMeta.imports %>  return (
+      <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
     ); },<% }) %>
   },<%}) %>
 }
 
-
-createPage('<%= pageName %>', '<%= pageUUID %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page, context, <%= pageAttributes?JSON.stringify(pageAttributes):'{}' %>)
+createPage('<%= pageName %>', '<%= pageUUID %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page, <%= pageAttributes?JSON.stringify(pageAttributes):'{}' %>)