@cloudbase/lowcode-builder 1.2.4 → 1.3.0

package/template/mp/common/widget.js

@@ -1,9 +1,10 @@
 import { observable, autorun, untracked } from 'mobx';
 import { styleToCss } from './style';
 import { getDeep, generateDataContext } from './util';
-import { compLowcodes, create$comp } from './weapp-component';
+import { compLowcodes } from './weapp-component';
 import EventEmitter from './event-emitter';
 import lodashSet from 'lodash.set';
+import { REPEATER } from './constant'
 
 function basePullAt(array, indexes) {
   let length = array ? indexes.length : 0;
@@ -58,16 +59,18 @@ function resolveWidgetProp(props) {
   data.className = classList.join ? classList.join(' ') : classList;
   const extraProps = [
     'classList',
-    '_forItems',
+    '_forContext',
     '_disposers',
     'children',
     'parent',
     '_parentId',
+    '_ancestorId',
+    '_descendants',
     'id',
     '_order',
     '_scope',
+    '_userWidget',
     'widgetType',
-    '$comp',
   ];
   extraProps.map((prop) => {
     delete data[prop];
@@ -113,22 +116,22 @@ function createSubWidgetTree(
   dataBinds,
   ownerMpInst,
   widgetHolder = {},
-  forItems = {},
+  forContext = {},
   ownerForWidgetHolder = null,
   failedBinds = [],
   defaultParent = { children: observable([]), _disposers: [] },
 ) {
-  const indexPostfix = (forItems.lists || [])
+  const indexPostfix = (forContext.lists || [])
     .slice()
     .reverse()
-    .map((list) => ID_SEPARATOR + list.currentIndex)
+    .map(({ currentIndex }) => ID_SEPARATOR + currentIndex)
     .join('');
 
   // traverse down the tree to set up all widgets
   dfsTree(curForNode, (node, parentNode, cache) => {
     const parentForWidgetArr = ownerForWidgetHolder?.[node.id] || [];
     const { _waForKey } = node.value;
-    const key = forItems.itemsById?.[node.id]?.[_waForKey];
+    const key = forContext.forItems?.[node.id]?.[_waForKey];
     const index = cache[parentNode?.id]
       ? cache[parentNode.id].index
       : parentForWidgetArr.findIndex((widget) => key && widget._key === key);
@@ -149,8 +152,9 @@ function createSubWidgetTree(
         if (parentNode) {
           parentWidget = widgetHolder[parentNode.id] || ownerForWidgetHolder[parentNode.id];
         }
-        w = createAWidget(widgetProps[node.id], node.id, indexPostfix, parentWidget, ownerMpInst);
+        w = createWidget(widgetProps[node.id], node.id, indexPostfix, parentWidget, ownerMpInst, forContext.forItems?.[node.id]);
         w._key = key;
+
         if (!parentWidget) {
           defaultParent.children.push(w);
         }
@@ -158,8 +162,14 @@ function createSubWidgetTree(
       } else {
         disposeWidget(existedWidget, true);
       }
-      setUpWidgetDataBinds(w, dataBinds[node.id], forItems, failedBinds, ownerMpInst.getWeAppInst());
+      setUpWidgetDataBinds(w, dataBinds[node.id], forContext, failedBinds, ownerMpInst._getInstance());
       widgetHolder[node.id] = w;
+      if (widgetHolder?.[node._ancestorId]) {
+        // 在虚拟项 RepeaterItem 下挂载所有的子孙 __descendants
+        // 这里不要用 lodashSet，否则会出现刷新几次，出现 Error: [mobx.array] Index out of bounds 的错误，原因暂不明
+        widgetHolder[node._ancestorId]._descendants = widgetHolder[node._ancestorId]._descendants || {};
+        widgetHolder[node._ancestorId]._descendants[node.id] = widgetHolder[node.id];
+      }
     } else if (!existedWidget) {
       const len = parentForWidgetArr.push(observable([]));
       widgetHolder[node.id] = parentForWidgetArr[len - 1];
@@ -174,7 +184,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);
+      const dispose = runFor(node, widgetProps, dataBinds, ownerMpInst, forContext, widgetHolder, failedBinds, parent);
       parent._disposers.push(dispose); // Add the for bind dispose to the parent node of forNode
     }
   });
@@ -196,7 +206,7 @@ function retryFailedBinds(failedBinds, finalTry) {
 /**
  *
  * @param {*} curForNode
- * @param {*} forItems
+ * @param {*} forContext
  * @param {*} parentForWidgets
  * @param {*} parentWidget
  * @returns top level widgets or for dispose
@@ -207,7 +217,7 @@ function runFor(
   widgetProps,
   dataBinds,
   ownerMpInst,
-  forItems,
+  forContext,
   ownerForWidgetHolder,
   failedBinds,
   defaultParent,
@@ -217,19 +227,22 @@ function runFor(
 
   const dispose = autorun(() => {
     let forList = [];
+    const currentForParentWidget = ownerForWidgetHolder[curForNode.parent?.id];
     try {
       clearTimeout(_FOR_ERROR_CACHE_MAP[nodeId]);
 
-      const $instance = ownerMpInst.getWeAppInst();
-      const dataContext = untracked(()=>generateDataContext(defaultParent));
+      const $instance = ownerMpInst._getInstance();
+      const dataContext = untracked(() => generateDataContext(defaultParent));
+      const $w = untracked(() => generateWidgetAPIContext($instance?.__internal__?.$w, currentForParentWidget, forContext));
 
       forList = dataBinds[nodeId]._waFor.call(
         $instance,
         $instance,
-        forItems.lists,
-        forItems.itemsById,
+        forContext.lists,
+        forContext.forItems,
         undefined,
         dataContext,
+        $w,
       );
       if (!Array.isArray(forList)) {
         forList = [];
@@ -288,11 +301,21 @@ function runFor(
         // w.parent = null
       });
 
+      const isInRepeaterChild =
+        currentForParentWidget?.widgetType === `${REPEATER.MODULE_NAME}:${REPEATER.REPEATER_NAME}`;
       forList.forEach((item, index) => {
-        let { lists = [], itemsById = {} } = forItems;
-        const _forItems = {
-          lists: [{ currentItem: item, currentIndex: index }, ...lists],
-          itemsById: { ...itemsById, [nodeId]: item },
+        let forContextListAlias;
+        let { lists = [], forItems = {} } = forContext;
+        const listMeta = { currentItem: item, currentIndex: index };
+        if (isInRepeaterChild) {
+          forContextListAlias = {
+            [`${currentForParentWidget.forIndex}` || 'currentIndex']: listMeta.currentIndex,
+            [`${currentForParentWidget.forItem}` || 'currentItem']: listMeta.currentItem,
+          };
+        }
+        const _forContext = {
+          lists: [{ ...listMeta, alias: forContextListAlias }, ...lists],
+          forItems: { ...forItems, [nodeId]: item },
         };
         const { rootWidget } = createSubWidgetTree(
           curForNode,
@@ -300,12 +323,12 @@ function runFor(
           dataBinds,
           ownerMpInst,
           {},
-          _forItems,
+          _forContext,
           ownerForWidgetHolder,
           failedBinds,
           defaultParent,
         );
-        rootWidget._forItems = _forItems;
+        rootWidget._forContext = _forContext;
       });
     });
   });
@@ -313,20 +336,19 @@ function runFor(
   return dispose;
 }
 
-function createAWidget(props, nodeId, indexPostfix, parent, ownerMpInst) {
-  const w = observable(props);
+function createWidget(props, nodeId, indexPostfix, parent, ownerMpInst, forContext) {
+  const { widgetType, _parentId, ...restProps } = props;
+  const w = observable(restProps);
   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: {},
+      forContext
     }),
   });
 
@@ -338,17 +360,33 @@ function createAWidget(props, nodeId, indexPostfix, 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;
 
-  Object.defineProperty(w, '$comp', { value: create$comp(w) });
+  switch (widgetType) {
+    case `${REPEATER.MODULE_NAME}:${REPEATER.REPEATER_NAME}`: {
+      if (!w.items) {
+        Object.defineProperty(w, 'items', {
+          get() {
+            return (w.children || []).map((item) => {
+              const descendants = {};
+              Object.keys(item?._descendants || {}).forEach((key) => {
+                descendants[key] = item._descendants[key]._userWidget;
+              });
+              return descendants;
+            });
+          },
+        });
+      }
+      break;
+    }
+  }
+
   mountBuiltinWigetsAPI(w, ownerMpInst);
   return w;
 }
 
-function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx) {
+function setUpWidgetDataBinds(w, dataBinds, forContext, failedBinds, ctx) {
   Object.keys(dataBinds || {})
     .sort((a, b) => {
       return a.length - b.length > 0 ? 1 : -1;
@@ -364,10 +402,19 @@ function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx) {
           try {
             clearTimeout(timer);
 
-            const dataContext = untracked(()=>generateDataContext(w));
+            const dataContext = untracked(() => generateDataContext(w));
+            const $w = untracked(() => generateWidgetAPIContext(ctx?.__internal__?.$w, w, forContext));
 
             // 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, dataContext);
+            const value = dataBinds[prop].call(
+              ctx,
+              ctx,
+              forContext.lists,
+              forContext.forItems,
+              undefined,
+              dataContext,
+              $w,
+            );
             const paths = prop.split('.').filter((key) => !!key);
             if (paths.length > 1) {
               // 一定要 untracked 不然爆栈了
@@ -399,10 +446,10 @@ function setUpWidgetDataBinds(w, dataBinds, forItems, failedBinds, ctx) {
     });
 }
 
-export function findForItemsOfWidget(widget) {
-  const forItems = widget._forItems;
-  if (forItems) return forItems;
-  if (widget.parent) return findForItemsOfWidget(widget.parent);
+export function generateForContextOfWidget(widget) {
+  const forContext = widget._forContext;
+  if (forContext) return forContext;
+  if (widget.parent) return generateForContextOfWidget(widget.parent);
 }
 
 export const ID_SEPARATOR = '-';
@@ -445,6 +492,16 @@ function createWidgetDataTree(widgets, dataBinds) {
   function addForCount(node) {
     if (node.parent) {
       node.forCount = node.parent.forCount;
+      const { widgetType } = node.parent.value;
+      if (widgetType === `${REPEATER.MODULE_NAME}:${REPEATER.REPEATER_ITEM_NAME}`) {
+        node._ancestorId = node.parent.id;
+      }
+      if (node.parent?._ancestorId) {
+        // Repeater 作用域内的所有子孙（排除里面的 Repeater 组件，它本身又产生深一层的作用域）继承父级的循环信息
+        if (!node._ancestorId) {
+          node._ancestorId = node.parent._ancestorId;
+        }
+      }
     }
     if (dataBinds[node.id]?._waFor) {
       node.forCount += 1;
@@ -517,7 +574,7 @@ function mountBuiltinWigetsAPI(widget, owner) {
    * Similar to selectOwnerComponent of WX MP: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
    */
   widget.getOwnerWidget = function () {
-    return owner?.getWeAppInst?.()?.node;
+    return owner?._getInstance?.()?.node;
   };
 
   // Will be overwritten by composited component
@@ -545,29 +602,150 @@ function mountBuiltinWigetsAPI(widget, owner) {
 
   const lowcode = compLowcodes[widget.widgetType];
   if (lowcode) {
-    const { index = {}, config } = lowcode;
-    const builtinProps = Object.keys(widget.$comp);
-
+    const { config } = lowcode;
     widget.getConfig = () => config;
+  }
 
-    // #2 User defined APIs
-    const { publicMethods = {} } = index;
-    Object.keys(publicMethods).map((name) => {
-      if (builtinProps.indexOf(name) > -1) {
-        console.error(
-          `Invalid publicMethod name(${name}) of Component(${widget.widgetType}), builtin name can't be used, please rename this method.`,
-        );
-        return;
-      }
-      const method = publicMethods[name];
-      if (method instanceof Function) {
-        Object.defineProperty(widget, name, { value: method.bind(widget.$comp) });
-        Object.defineProperty(widget.$comp, name, { value: method });
-      } else {
-        console.error(`Component(${widget.widgetType}) method(${name}) is not a function.`);
-      }
+  widget._getInstanceRef = () => null;
+
+  /**
+   * @deprecated
+   */
+  widget._methods = {};
+
+  widget._userWidget = untracked(() => {
+    return new UserWidget(widget);
+  });
+}
+
+/**
+ * 对外（用户）的 Widget
+ */
+class UserWidget {
+  _widget = null;
+
+  get description() {
+    const { id } = this._widget;
+    return `
+    使用说明：
+    1. w 命名空间下为内置方法，可通过 $w.${id}.w.<成员> 或 $w.${id}.<成员> 访问。
+       访问 id 示例: $w.${id}.id 或 $w.${id}.w.id
+    2. custom 命名空间下为用户自定义对外暴露的成员，可通过 $w.${id}.custom.<成员> 或 $w.${id}.<成员> 访问。
+       访问自定义方法 hello 示例: $w.${id}.hello() 或 $w.${id}.custom.hello()
+    3. 通过 $w.${id}.<成员> 访问时，如果自定义成员与内置成员重名，则自定义成员覆盖内置成员。
+    4. [注意]: 请不要直接访问 _widget，它里面的成员为内部实现，随时可能进行调整
+    `;
+  }
+
+  constructor(widget) {
+    this._widget = widget;
+    return new Proxy(this, {
+      get(target, prop) {
+        if (prop in target) {
+          return target[prop];
+        }
+
+        // 优先 custom
+        if (target.custom[prop]) {
+          return target.custom[prop];
+        }
+
+        // 再尝试内置的方法和属性
+        const buildinMember = target.sys[prop];
+        if (buildinMember) return buildinMember;
+
+        // 兼容原来的 widget。最后直接代理到 widget 上，主要是访问组件的属性
+        return target._widget[prop];
+      },
     });
   }
 
-  widget._methods = {};
+  // 内置属性和方法命名空间
+  get sys() {
+    const widget = this._widget;
+    return {
+      /**
+       * 内置属性
+       */
+
+      get id() {
+        return widget.id;
+      },
+
+      get name() {
+        return widget.widgetType;
+      },
+
+      get parent() {
+        return widget.parent?._userWidget;
+      },
+
+      get children() {
+        return widget.children?.map((item) => item._userWidget) || [];
+      },
+
+      /**
+       * 内置方法
+       */
+
+      closest(filter) {
+        let { parent } = this;
+        if (!filter) return parent;
+
+        while (parent) {
+          const matched = filter(parent);
+          if (matched) return parent;
+
+          parent = parent.parent;
+        }
+
+        return null;
+      },
+    };
+  }
+
+  get custom() {
+    const { methods = {}, ...restInstance } = this._widget._getInstanceRef?.()?.current || {};
+
+    const userCustomMember = {
+      ...this._widget._methods,
+      ...restInstance,
+      ...methods,
+    };
+
+    return userCustomMember;
+  }
+}
+
+export function generateWidgetAPIContext($w = {}, widget, forContext) {
+  return new Proxy($w, {
+    get(target, prop) {
+      // debugger;
+
+      /**
+       * for context 变量优先
+       */
+      const { lists = [] } = forContext;
+      for (const meta of lists) {
+        const map = meta.alias || {};
+        if (prop in map) {
+          return map[prop];
+        }
+      }
+
+      // 尝试代理同级 widget
+      if (widget) {
+        let { parent } = widget;
+        while (parent) {
+          if (parent._descendants?.[prop]) {
+            return parent._descendants[prop]._userWidget;
+          }
+          parent = parent.parent;
+        }
+      }
+
+      // 尝试代理到全局的 $w
+      return target[prop];
+    },
+  });
 }

package/template/mp/component/index.js

@@ -1,7 +1,7 @@
 import { observable } from 'mobx';
 import { createComponent } from '../../../common/weapp-component'
 import { concatClassList, px2rpx } from '../../../common/style'
-import { app } from '../../../app/weapps-api'
+import { app, $app } from '../../../app/weapps-api'
 <%= importor.lifecycle? "import lifeCycle from './lowcode/lifecycle'" : "const lifeCycle = {}" %>
 <%= importor.state? "import stateFn from './lowcode/state'" : "const stateFn = {}" %>
 <%= importor.computed? "import computedFuncs from './lowcode/computed'" : "const computedFuncs = {}" %>
@@ -11,7 +11,6 @@ import * as constObj from '../libCommonRes/const'
 import * as toolsObj from '../libCommonRes/tools'
 
 const libCode = '<%= materialName %>'
-const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
 
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
 
@@ -19,9 +18,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, $context}, $comp){ <%= l.handler %> } <%} else {%> <%= l.handler %> <%} %>,
+      handler: <% if (l.type == 'rematch') {%> _handler<%= l.handler %> <%} else {%> <%= l.handler %> <%} %>,
       data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($comp, lists, forItems, event, $context) => {<%= bindMeta.imports %> return (
+      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($comp, lists, forItems, event, $context, $w) => {<%= bindMeta.imports %> return (
         <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
       )},
         <%}) %>}
@@ -51,7 +50,7 @@ const handler = {<% handlers.forEach(h => {%>
 
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
-    "<%= prop %>": function ($comp, lists, forItems, event, $context) {<%= bindMeta.imports %> return (
+    "<%= prop %>": function ($comp, lists, forItems, event, $context, $w) {<%= bindMeta.imports %> return (
       <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
     ); },<% }) %>
   },<%}) %>

package/template/mp/package.json

@@ -5,7 +5,7 @@
 	"dependencies": {<% if(importJSSDK) {%>
 		"@cloudbase/js-sdk": "2.5.6-beta.1",<% } %>
 		"@cloudbase/oauth": "0.1.1-alpha.5",
-		"@cloudbase/weda-client": "0.2.36",
+		"@cloudbase/weda-client": "0.2.38",
 		"@cloudbase/weda-cloud-sdk": "1.0.26",
 		"mobx": "^5.15.4",
 		"lodash.get": "^4.4.2",

package/template/mp/page/api.js

@@ -1 +1,21 @@
-export const $page = {}
+import { $w as baseAPI } from '<%= subLevelPath %>../../app/weapps-api'
+
+export const $page = {
+  __internal__: {}
+};
+
+export const $w = new Proxy(
+  baseAPI,
+  {
+    get(target, prop) {
+      // 尝试代理页面级别组件实例
+      const pageWidget = $page.widgets?.[prop];
+      if (pageWidget) {
+        return pageWidget._userWidget;
+      }
+      return target[prop]
+    },
+  },
+);
+
+$page.__internal__.$w = $w

package/template/mp/page/index.js

@@ -1,24 +1,22 @@
 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'
+import { app, $app } from '<%= subLevelPath %>../../app/weapps-api'
 import { $$<%= pageName %> as handlers } from '../../app/handlers'
 <%= importor.lifecycle? `import lifecyle from '../../lowcode/${pageName}/lifecycle'` : "const lifecyle = {}" %>
 <%= importor.state? `import state from '../../lowcode/${pageName}/state'` : "const state = {}" %>
 <%= importor.computed? `import computed from '../../lowcode/${pageName}/computed'` : "const computed = {}" %>
 import { $page } from './api'
 
-const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
-
 const widgetProps = <%= stringifyObj(widgetProps, {depth: null}) %>
 /** widget event listeners **/
 const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listeners])=>{%>
   <%= 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}){const $for = forItems; const $index=lists?.[0]?.currentIndex; 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 {%> <%= l.handler %> <%} %>,
       data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($page, lists, forItems, event, $context) => {<%= bindMeta.imports %> return (
+      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($page, lists, forItems, event, $context, $w) => {<%= bindMeta.imports %> return (
         <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
       )},
         <%}) %>}
@@ -28,7 +26,7 @@ const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listen
 
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
-    "<%= prop %>": function ($page, lists, forItems, event, $context) {<%= bindMeta.imports %>  return (
+    "<%= prop %>": function ($page, lists, forItems, event, $context, $w) {<%= bindMeta.imports %>  return (
       <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
     ); },<% }) %>
   },<%}) %>

package/template/mp/page/index.json

@@ -1,3 +1,3 @@
 {
-  "usingComponents": <%= JSON.stringify(usingComponents)%><%= extra %>
+  "usingComponents": <%= JSON.stringify(usingComponents, undefined, 2)%><%= extra %>
 }

package/template/mp/common/process.js

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