@cloudbase/framework-plugin-low-code 0.6.59 → 0.6.63

package/README.md

@@ -102,3 +102,24 @@ cloudbase framework:deploy
 - 云开发官网地址： [https://cloudbase.net/](https://cloudbase.net/)
 - 云开发静态网站开通指南：[https://docs.cloudbase.net/hosting/](https://docs.cloudbase.net/hosting/)
 - 云开发控制台地址： [https://console.cloud.tencent.com/tcb](https://console.cloud.tencent.com/tcb)
+
+## 本地测试
+
+1. 需要先 link framework。简单可以 clone http://git.code.oa.com/QBase/cloudbase-framework-plugin-low-code.git，切换 release/cals_v2 分支，执行命令，完成 framework-core 的 link；
+
+   ```bash
+   yarn
+   yarn run bootstrap
+   yarn run build
+   yarn run link
+
+   ```
+
+1. link low-code-plugin。在本目录执行命令，完成 framework 的 link
+   ```
+   yarn
+   yarn run build
+   yarn run link
+   ```
+1. 本地开发 通过 `yarn run dev` 监听文件变化并 ts 编译。
+1. `__test__/sample` 目录中有测试项目，通过添加 `.env` 文件可指定 mpAppId /ENV_ID 以及 SECRET 等环境变量。`input.json` 为低码配置，`yarn run dev` 进行文件生成及发布。

package/lib/builder/mp/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/builder/mp/index.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,aAAa,EACb,UAAU,EAEV,OAAO,EAIR,MAAM,mBAAmB,CAAC;AAU3B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAkB/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAEL,SAAS,EACT,YAAY,EACZ,UAAU,EACX,MAAM,iBAAiB,CAAC;AAUzB,wBAAsB,YAAY,CAAC,EACjC,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAO,EACP,YAAY,EACZ,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,GAAG,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE;QACP,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,aAAa,EAAE,SAAS,EAAE,CAAC;CAC5B,GAAG,OAAO,CAAC;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,CAAC,CAuSvC;AA8KD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,aAAa,iBAgCnB;AAYD,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,MAAM,EACN,SAAS,GACV,EAAE;IACD,YAAY,EAAE,aAAa,CAAC;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,EAAE,aAAa,EAAE,CAAC;CAC5B;;;EA0CA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/builder/mp/index.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,aAAa,EACb,UAAU,EAEV,OAAO,EAIR,MAAM,mBAAmB,CAAC;AAU3B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAkB/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAEL,SAAS,EACT,YAAY,EACZ,UAAU,EACX,MAAM,iBAAiB,CAAC;AAUzB,wBAAsB,YAAY,CAAC,EACjC,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EACN,SAAS,EACT,OAAO,EACP,YAAY,EACZ,UAAU,EACV,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,GACd,EAAE;IACD,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,WAAW,CAAC;IACxB,SAAS,EAAE,GAAG,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE;QACP,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,aAAa,EAAE,SAAS,EAAE,CAAC;CAC5B,GAAG,OAAO,CAAC;IAAE,eAAe,EAAE,MAAM,CAAA;CAAE,CAAC,CAuSvC;AAiLD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,aAAa,iBAgCnB;AAYD,wBAAgB,oBAAoB,CAAC,EACnC,YAAY,EACZ,MAAM,EACN,SAAS,GACV,EAAE;IACD,YAAY,EAAE,aAAa,CAAC;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,EAAE,aAAa,EAAE,CAAC;CAC5B;;;EA0CA"}

package/lib/builder/mp/index.js

@@ -248,7 +248,7 @@ function generatePkg(weapp, appRoot, ctx, pageConfigs) {
             console.log('Generating ' + em('page') + ' files');
             generateFiles_1.cleanDir(path_1.default.join(appRoot, 'pages'), []);
             yield Promise.all(weapp.pageInstanceList.map((page) => __awaiter(this, void 0, void 0, function* () {
-                var _a;
+                var _a, _b;
                 const rootPath = weapp.rootPath || '';
                 const usingComponents = {};
                 const wxml = wxml_1.generateWxml(page.componentInstances, `Page ${rootPath ? path_1.default.join(rootPath, 'pages') : ''}/${page.id}`, wxmlDataPrefix, Object.assign(Object.assign({}, ctx), { rootPath, isPage: true }), usingComponents);
@@ -261,6 +261,7 @@ function generatePkg(weapp, appRoot, ctx, pageConfigs) {
                         pageSource: page.data.src || '',
                         eventHanlders: util_2.createEventHanlders(page.componentInstances, '$page', ctx),
                         dataBinds: util_2.createDataBinds(page.componentInstances, ctx),
+                        pageAttributes: Object.assign({}, (((_a = page.data) === null || _a === void 0 ? void 0 : _a.appShareMessage) ? { 'appShareMessage': page.data.appShareMessage.value } : {})),
                         debug: !ctx.isProduction,
                         stringifyObj: util_1.inspect,
                         subLevelPath: rootPath ? path_2.default.relative(rootPath, '') + '/' : '',
@@ -273,7 +274,7 @@ function generatePkg(weapp, appRoot, ctx, pageConfigs) {
                         content: wxml,
                     },
                     [`index.wxss|${pageFileName}.wxss`]: {
-                        subWxss: rootPath && !((_a = ctx.mainAppData) === null || _a === void 0 ? void 0 : _a.mpPkgUrl)
+                        subWxss: rootPath && !((_b = ctx.mainAppData) === null || _b === void 0 ? void 0 : _b.mpPkgUrl)
                             ? `@import "${path_2.default.relative(`/${rootPath}/pages/${page.id}`, '/lowcode')}/style.wxss";`
                             : '',
                         content: weapps_core_1.toCssText(weapps_core_1.toCssStyle(page.commonStyle, {

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/lib/weapps-core/utils/file.d.ts

@@ -6,7 +6,7 @@ export declare function originJsonToFileList(appData: IWeAppData): (import("../t
     code: string;
     pageId: string;
 })[];
-export declare function getExtByType(type: CodeType): ".less" | ".js" | ".json";
+export declare function getExtByType(type: CodeType): ".js" | ".json" | ".less";
 export declare function HACK_FIX_LOWCODE_IN(code?: string): string;
 export declare function HACK_FIX_LOWCODE_OUT(code?: string): string;
 //# sourceMappingURL=file.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/framework-plugin-low-code",
-  "version": "0.6.59",
+  "version": "0.6.63",
   "description": "云开发 Tencent CloudBase Framework Low Code Plugin，将低码配置生成完整项目并一键部署云开发资源。",
   "author": "yhsunshining@gmail.com",
   "homepage": "https://github.com/TencentCloudBase/cloudbase-framework#readme",

package/template/mp/common/util.js

@@ -51,7 +51,7 @@ export function createEventHandlers(evtListeners, context) {
             detail: res
           })
         } catch (e) {
-          let eventName = l.key ? `${l.key}_fail` : ''
+          let eventName = l.key ? `${prefix}$${l.key}_fail` : ''
           if(self[eventName]){
             await self[eventName]({
               ...event,

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

@@ -14,6 +14,7 @@ export function createPage(
   app,
   $page,
   context,
+  pageAttributes
 ) {
   const evtHandlers = createEventHandlers(evtListeners, context);
 
@@ -32,6 +33,18 @@ export function createPage(
       if (res?.from === 'button' && res?.target?.dataset?.weda_share_info) {
         return res?.target?.dataset?.weda_share_info;
       }
+      if (res?.from === 'menu' && pageAttributes?.appShareMessage) {
+        let { enable, pageId, params, imageUrl, title } = pageAttributes.appShareMessage;
+        if (enable) {
+          pageId = pageId ? pageId.replace(/^(\.)?\//, '') : pageId;
+          let realPath = `/pages/${pageId}/index` + (params ? '?' + params.map(pair => pair.key + '=' + pair.value).join('&') : '');
+          return {
+            path: realPath,
+            imageUrl,
+            title
+          };
+        }
+      }
       try {
         return lifecycle?.['onShareAppMessage']?.() || {};
       } catch (error) {
@@ -119,7 +132,7 @@ export function createPage(
       },
 
       getWeAppInst() {
-        if(!this.$WEAPPS_PAGE){
+        if (!this.$WEAPPS_PAGE) {
           $page.state = observable(pageState);
           let dataset = createDataset($page.uuid);
           $page.dataset = dataset;

package/template/mp/page/index.js

@@ -34,7 +34,9 @@ const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   },<%}) %>
 }
 
+const pageAttributes = <%= pageAttributes?JSON.stringify(pageAttributes):'{}' %>
+
 $page.id = '<%= pageName %>'
 $page.uuid = '<%= pageUUID %>'
 $page.handler = handlers
-createPage(lifecyle, widgetProps, state, computed, evtListeners, dataBinds, app, $page, context)
+createPage(lifecyle, widgetProps, state, computed, evtListeners, dataBinds, app, $page, context,pageAttributes)

package/template/src/handlers/FieldMiddleware/renderer.jsx

@@ -7,7 +7,7 @@ import { get, set } from 'lodash';
 import { $page } from '../../app/global-api';
 import { getDom } from '../utils/widgets';
 import { checkVisible } from '../../utils/index';
-import { generateSlotMetaMap } from '../render';
+import { getComponentChildren, generateSlotMetaMap } from '../render';
 
 export const ForContext = createContext({});
 
@@ -35,275 +35,434 @@ function generateSlotMap(slots, forContext = undefined) {
   return map;
 }
 
-export const CompRenderer = observer(function (props) {
-  const {
-    id: compId,
-    xProps,
-    virtualFields,
-    renderSlot,
-    codeContext,
-    scopeContext,
-    context = {},
-    updateContext,
-    emitEvents = [],
-    componentSchema = {},
-  } = props;
-
-  const indexRef = useRef();
-  const typeRef = useRef();
+function getSafeComponentProps({ style, classNameList }) {
+  const componentProps = {};
 
-  const isInComposite = !!props.codeContext;
-  // 判断 widgets 是从 page 来的，还是组件来的
-  const widgetsData = !isInComposite
-    ? $page.widgets[compId]
-    : codeContext.$WEAPPS_COMP.widgets[compId];
-
-  if (!xProps) {
-    return props.children;
+  if (classNameList.length) {
+    componentProps.className = classNameList.join(' ');
   }
 
-  const {
-    commonStyle = {},
-    sourceKey,
-    data = {},
-    dataBinds,
-    listenerInstances,
-    styleBind,
-    classNameList = [],
-    classNameListBind,
-    staticResourceAttribute = [],
-  } = xProps;
-  const Field = virtualFields[sourceKey];
-  const parentForItems = useContext(ForContext);
-
-  const _context = {
-    scopeContext,
-    forContext: parentForItems,
-    codeContext,
-    dataContext: context,
-  };
+  if (style && Object.keys(style).length) {
+    componentProps.style = style;
+  }
+  return componentProps;
+}
 
-  // 组件最终用于执行的事件函数
-  const emit = useCallback(
-    (trigger, eventDetail, forItems, scopeContext) => {
-      const listeners = listenerInstances || [];
-
-      // 如果是数据容器，则将传过来的data，赋值给容器上下文context
-      if (
-        componentSchema?.compConfig?.isDataContainer &&
-        !listeners?.some((listener) => listener.trigger === 'onDataChange')
-      ) {
-        listeners?.push({
-          key: `wa${Date.now().toString().slice(-8)}`,
-          trigger: 'onDataChange',
-          isCapturePhase: false,
-          data: {},
-          dataBinds: {},
-          instanceFunction: ({ event }) => {
-            return updateContext(compId, event?.detail?.data);
-          },
-        });
+// TODO: 需要不断移除 dataBinds(style/classList)
+function getBindData({
+  widgetData,
+  forItems,
+  scopeContext,
+  codeContext,
+  commonStyle = {},
+  classNameList = [],
+}) {
+  // bindData
+  if (Array.isArray(widgetData)) {
+    widgetData =
+      forItems.forIndexes === void 0 || widgetData.length === 0
+        ? {}
+        : get(widgetData, getForIndexes(forItems, widgetData));
+  }
+  widgetData = widgetData || {};
+  const fieldData = { ...widgetData };
+
+  const isRootNode = widgetData && !widgetData.parent;
+  const isInComposite = !!codeContext;
+
+  // 再次计算 scope value
+  for (let key in fieldData) {
+    if (Object.prototype.hasOwnProperty.call(fieldData, key)) {
+      const value = fieldData[key];
+      if (value && value.__type === 'scopedValue') {
+        try {
+          fieldData[key] = value.getValue(scopeContext);
+        } catch (e) {
+          console.warn(`Error computing data bind '${key}' error:`, e);
+          fieldData[key] = '';
+        }
       }
+    }
+  }
 
-      let event = { detail: eventDetail, name: trigger };
-      forItems = {
-        ...forItems,
-        forIndexes: getForIndexes(forItems, widgetsData),
-      };
-      emitEvent(
-        trigger,
-        listeners,
-        {
-          event,
-          customEventData: event,
-          forItems,
-        },
-        scopeContext,
-        context
-      );
-    },
-    [props]
-  );
-
-  // 选区最终用于执行的事件函数
-  const emitSB = useCallback(
-    (trigger, eventDetail, forItems, scopeContext, fieldData) => {
-      const listeners =
-        indexRef?.current !== undefined &&
-        typeRef?.current &&
-        fieldData?.[typeRef.current]?.[indexRef.current]?.selectableBlock?.[
-          'x-props'
-        ]?.listenerInstances;
-      let event = { detail: eventDetail, name: trigger };
-      forItems = {
-        ...forItems,
-        forIndexes: getForIndexes(forItems, widgetsData),
-      };
-      emitEvent(
-        trigger,
-        listeners,
-        {
-          event,
-          customEventData: event,
-          forItems,
-        },
-        scopeContext,
-        context
-      );
-    },
-    [props]
-  );
+  // bindStyle
+  let bindStyle = fieldData.style || {};
+  // 复合组件第一层需要将最外层样式 style 挂到节点上
+  let cssStyle = commonStyle || {};
+  if (isInComposite && isRootNode) {
+    cssStyle = {
+      ...cssStyle,
+      ...(codeContext.$WEAPPS_COMP.props?.style || {}),
+    };
+    bindStyle = {
+      ...bindStyle,
+      ...(codeContext.$WEAPPS_COMP.props?.style || {}),
+    };
+  }
+  const finalStyle = getFinalStyle(cssStyle, bindStyle);
 
-  function getSafeComponentProps({
-    style,
+  // bindClassList
+  const bindClassList = fieldData.classList || [];
+  const finalClassNameList = getFinalClassNameList(
     classNameList,
-    staticResourceAttribute,
-  }) {
-    const componentProps = {};
-    if (classNameList.length) {
-      componentProps.className = classNameList.join(' ');
-    }
+    bindClassList
+  );
 
-    if (style && Object.keys(style).length) {
-      componentProps.style = style;
-    }
-    if (staticResourceAttribute && staticResourceAttribute.length > 0) {
-      componentProps.staticResourceAttribute = staticResourceAttribute;
+  // 当前在复合组件中，且当前节点为根节点
+  if (isInComposite && isRootNode) {
+    if (widgetData.ownerWidget) {
+      Object.keys(widgetData.ownerWidget).forEach((propName) => {
+        if (
+          propName === 'role' ||
+          ['aria-', 'data-'].some((prefix) => propName.startsWith(prefix))
+        ) {
+          widgetData[propName] = widgetData.ownerWidget[propName];
+        }
+      });
     }
-    return componentProps;
   }
 
-  // 选区的预览的click事件
-  const onCustomEvent = ({ order: index, blockKey }) => {
-    if (index !== undefined) {
-      indexRef.current = index;
-      typeRef.current = blockKey;
-    }
+  // 防止渲染时 data 的 style 与实际的 style 冲突
+  delete fieldData.style;
+
+  return {
+    fieldData,
+    finalStyle,
+    finalClassNameList: Array.from(new Set(finalClassNameList)),
   };
+}
+
+function getForList(compId, dataBinds, parentForItems, dataContext) {
+  /**
+   * For循环渲染
+   * @important
+   * @default undfined // 代表没有进行for循环绑定
+   */
+  let forList = undefined;
 
-  // For循环渲染
-  let forList;
   try {
     // 绑定了 for 变量，但计算值错误时，应当空数组兜底
     forList =
       dataBinds &&
       dataBinds._waFor &&
-      (dataBinds._waFor(parentForItems, undefined, context) || []);
+      (dataBinds._waFor(parentForItems, undefined, dataContext) || []);
   } catch (e) {
     // 计算值出错则使用空数组兜底
     forList = [];
     console.warn('_waFor data', e);
   }
+
+  // 绑定了for 并且计算了值，但是不是数组类型，应该进行兜底
   if (forList) {
     if (!Array.isArray(forList)) {
       console.warn(`${compId}循环绑定非数组值：`, forList);
       forList = [];
     }
-    return forList.map((item, index) => {
-      const forItemsIndexes = (parentForItems.forIndexes || []).concat(index);
-      const forItems = {
-        ...parentForItems,
-        [compId]: item,
-        forIndexes: forItemsIndexes,
-      };
-      const {
-        fieldData: forItemData,
-        finalStyle: forItemStyle,
-        finalClassNameList: forItemClassNameList,
-      } = getBindData(forItems, scopeContext);
-      if (!checkVisible(forItemData)) {
-        return null;
+  }
+
+  return forList;
+}
+
+function FieldWrapper({
+  Field,
+  componentSchema,
+  id,
+  data,
+  style = {},
+  className = '',
+  events,
+  compositeParent,
+  context,
+  children,
+  updateContext,
+}) {
+  const {
+    scopeContext,
+    forContext,
+    forIndexes,
+    widgetsData,
+    codeContext,
+    dataContext,
+  } = context;
+
+  const injectContext = {};
+  const indexRef = React.useRef();
+  const typeRef = React.useRef();
+  const { 'x-props': xProps } = componentSchema;
+  let { staticResourceAttribute = [], listenerInstances = [] } = xProps;
+
+  // 组件最终用于执行的事件函数
+  const emit = React.useCallback(
+    (trigger, listeners, eventData, forItems, domEvent, scopeContext) => {
+      // 当组件是数据容器并且listeners未含有onDataChange事件时，增加一个onDataChange事件
+      if (componentSchema?.compConfig?.isDataContainer) {
+        listeners = listeners.concat({
+          key: `wa${Date.now().toString().slice(-8)}`,
+          trigger: 'onDataChange',
+          isCapturePhase: false,
+          data: {},
+          dataBinds: {},
+          instanceFunction: ({ event }) => {
+            return updateContext(id, event?.detail?.data);
+          },
+        });
       }
 
-      const slotMap = generateSlotMap(
-        generateSlotMetaMap(
-          componentSchema,
+      if (injectContext?.emit) {
+        return injectContext.emit(
+          trigger,
+          listeners,
+          eventData,
+          forItems,
+          domEvent,
+          scopeContext
+        );
+      } else {
+        const event = {
+          detail: eventData,
+          name: trigger,
+          target: widgetsData,
+          currentTarget: widgetsData,
+          domEvent,
+        };
+        forItems = {
+          ...forItems,
+          forIndexes: getForIndexes(forItems, widgetsData),
+        };
+        emitEvent(
+          trigger,
+          listeners,
           {
-            ..._context,
-            forContext: forItems,
-            virtualFields,
-            updateContext,
+            event,
+            customEventData: event,
+            forItems,
+            domEvent,
           },
-          {
-            renderSlot,
-          }
-        )
-      );
-
-      const emitWithForItems = (trigger, evt) =>
-        emit(trigger, evt, forItems, scopeContext);
-
-      const _selectableBlockEventsForItems = {
-        onCustomEvent,
-        events:
-          componentSchema?.selectableBlock?.events.map((item) => item.name) ||
-          [],
-        emit: (trigger, evt) =>
-          emitSB(trigger, evt, forItems, scopeContext, forItemData),
-      };
-
-      delete forItemData.style;
-
-      // 获取当前元素的 ref
-      const currentWidget = Array.isArray(widgetsData)
-        ? get(widgetsData, forItemsIndexes)
-        : widgetsData;
-      const domRef = setGetDomApi(currentWidget, isInComposite);
-
-      const componentProps = getSafeComponentProps({
-        style: forItemStyle,
-        classNameList: forItemClassNameList,
-        staticResourceAttribute,
-      });
-
-      // 判断为容器组件，则增加一个onDataChange事件
-      if (
-        componentSchema?.compConfig?.isDataContainer &&
-        !emitEvents?.includes('onDataChange')
-      ) {
-        emitEvents.push('onDataChange');
+          scopeContext,
+          dataContext
+        );
       }
+    },
+    [widgetsData]
+  );
 
-      return (
-        <ForContext.Provider key={index} value={forItems}>
-          <Field
-            data={{
-              ...forItemData,
-              ...slotMap,
-              _selectableBlockEvents: _selectableBlockEventsForItems,
-            }}
-            id={compId}
-            {...componentProps}
-            emit={emitWithForItems}
-            events={emitEvents}
-            compositeParent={codeContext}
-            forIndexes={forItemsIndexes}
-            $node={currentWidget}
-            domRef={domRef}
-          >
-            {props.children}
-          </Field>
-        </ForContext.Provider>
-      );
-    });
+  const currentWidget = Array.isArray(widgetsData)
+    ? get(widgetsData, forIndexes)
+    : widgetsData;
+
+  if (!Array.isArray(staticResourceAttribute)) {
+    staticResourceAttribute = [];
   }
 
-  // 单节点渲染
-  const { fieldData, finalClassNameList, finalStyle } = getBindData(
-    parentForItems,
-    scopeContext
+  // 判断为容器组件，则增加一个onDataChange事件
+  if (
+    componentSchema?.compConfig?.isDataContainer &&
+    !events?.includes('onDataChange')
+  ) {
+    events.push('onDataChange');
+  }
+
+  return (
+    <Field
+      data={{
+        ...data,
+        _selectableBlockEvents: {
+          onCustomEvent: ({ order: index, blockKey }) => {
+            if (index !== undefined) {
+              indexRef.current = index;
+              typeRef.current = blockKey;
+            }
+          },
+          events:
+            componentSchema?.selectableBlock?.events.map((item) => item.name) ||
+            [],
+          emit: (trigger, evt, domEvent) =>
+            emit(
+              trigger,
+              indexRef?.current !== undefined &&
+                typeRef?.current &&
+                data?.[typeRef.current]?.[indexRef.current]?.selectableBlock?.[
+                  'x-props'
+                ]?.listenerInstances,
+              evt,
+              forContext,
+              domEvent,
+              scopeContext
+            ),
+        },
+      }}
+      id={id}
+      emit={(trigger, eventData, domEvent) =>
+        emit(
+          trigger,
+          listenerInstances,
+          eventData,
+          forContext,
+          domEvent,
+          scopeContext
+        )
+      }
+      events={events}
+      compositeParent={compositeParent}
+      forIndexes={forIndexes}
+      $node={currentWidget}
+      domRef={setGetDomApi(currentWidget, { codeContext })}
+      style={style}
+      className={className}
+      staticResourceAttribute={staticResourceAttribute}
+    >
+      {children}
+    </Field>
   );
-  const emitWithForItems = (trigger, evt) =>
-    emit(trigger, evt, parentForItems, scopeContext);
-
-  const _selectableBlockEventsWithItem = {
-    onCustomEvent,
-    events:
-      componentSchema?.selectableBlock?.events.map((item) => item.name) || [],
-    emit: (trigger, evt) =>
-      emitSB(trigger, evt, parentForItems, scopeContext, fieldData),
+}
+
+export const CompRenderer = observer(function (props) {
+  return getComponentRenderList({
+    ...props,
+    forContext: React.createContext(ForContext),
+    injectContext: {},
+  });
+});
+
+export function getComponentRenderList(props) {
+  const {
+    key = undefined,
+    id: compId,
+    xProps,
+    virtualFields,
+    renderSlot,
+    codeContext,
+    scopeContext,
+    context = {},
+    updateContext,
+    emitEvents = [],
+    componentSchema = {},
+    forContext: parentForItems = {},
+  } = props;
+
+  const _context = {
+    scopeContext,
+    forContext: parentForItems,
+    codeContext,
+    dataContext: context,
   };
 
+  const isInComposite = !!codeContext;
+  // 判断 widgets 是从 page 来的，还是组件来的
+  const widgetsData = !isInComposite
+    ? $page.widgets[compId]
+    : codeContext.$WEAPPS_COMP.widgets[compId];
+
+  if (!xProps) {
+    return (
+      <>
+        {getComponentChildren(componentSchema, {
+          ..._context,
+          virtualFields,
+          updateContext,
+        })}
+      </>
+    );
+  }
+
+  const { commonStyle = {}, sourceKey, dataBinds, classNameList = [] } = xProps;
+  const Field = virtualFields[sourceKey];
+
+  // For循环渲染
+  let forList = getForList(compId, dataBinds, parentForItems, context);
+
+  if (forList) {
+    return forList
+      .map((item, index) => {
+        const forItemsIndexes = (parentForItems['forIndexes'] || []).concat(
+          index
+        );
+        const forItems = {
+          ...parentForItems,
+          [compId]: item,
+          forIndexes: forItemsIndexes,
+        };
+        const {
+          fieldData: forItemData,
+          finalStyle: forItemStyle,
+          finalClassNameList: forItemClassNameList,
+        } = getBindData({
+          widgetData: widgetsData,
+          forItems,
+          scopeContext,
+          codeContext,
+          commonStyle,
+          classNameList,
+        });
+        if (!checkVisible(forItemData)) {
+          return null;
+        }
+
+        const slotMap = generateSlotMap(
+          generateSlotMetaMap(
+            componentSchema,
+            {
+              ..._context,
+              forContext: forItems,
+              virtualFields,
+              updateContext,
+            },
+            {
+              renderSlot,
+            }
+          )
+        );
+
+        return (
+          <ForContext.Provider key={index} value={forItems}>
+            <FieldWrapper
+              Field={Field}
+              componentSchema={componentSchema}
+              context={{
+                ..._context,
+                widgetsData,
+                forContext: forItems,
+                forIndexes: forItemsIndexes,
+              }}
+              id={compId}
+              updateContext={updateContext}
+              data={{
+                ...forItemData,
+                ...slotMap,
+              }}
+              {...getSafeComponentProps({
+                style: forItemStyle,
+                classNameList: forItemClassNameList,
+              })}
+              events={emitEvents}
+              compositeParent={codeContext}
+            >
+              {getComponentChildren(componentSchema, {
+                ..._context,
+                forContext: forItems,
+                virtualFields,
+                updateContext,
+              })}
+            </FieldWrapper>
+          </ForContext.Provider>
+        );
+      })
+      .filter((item) => !!item);
+  }
+
+  // 修正 forIndexes
+  const forIndexes = getForIndexes(parentForItems, widgetsData);
+
+  // 单节点渲染
+  const { fieldData, finalClassNameList, finalStyle } = getBindData({
+    widgetData: widgetsData,
+    forItems: parentForItems,
+    scopeContext,
+    codeContext,
+    commonStyle,
+    classNameList,
+  });
+
   // false 或空字符串时
   if (!checkVisible(fieldData)) {
     return null;
@@ -314,7 +473,7 @@ export const CompRenderer = observer(function (props) {
     generateSlotMetaMap(
       componentSchema,
       {
-        ...context,
+        ..._context,
         virtualFields,
         updateContext,
       },
@@ -324,106 +483,37 @@ export const CompRenderer = observer(function (props) {
     )
   );
 
-  // 防止渲染时 data 的 style 与实际的 style 冲突
-  delete fieldData.style;
-
-  // 修正 forIndexes
-  const forIndexes = getForIndexes(parentForItems, widgetsData);
-
-  // 获取 Element Ref
-  const currentWidget = Array.isArray(widgetsData)
-    ? get(widgetsData, forIndexes)
-    : widgetsData;
-  const domRef = setGetDomApi(currentWidget, props);
-
-  const componentProps = getSafeComponentProps({
-    style: finalStyle,
-    classNameList: finalClassNameList,
-    staticResourceAttribute,
-  });
-
-  // 判断为容器组件，则增加一个onDataChange事件
-  if (
-    componentSchema?.compConfig?.isDataContainer &&
-    !emitEvents?.includes('onDataChange')
-  ) {
-    emitEvents.push('onDataChange');
-  }
-
   return (
-    <Field
+    <FieldWrapper
+      key={key}
+      Field={Field}
+      componentSchema={componentSchema}
+      context={{
+        ..._context,
+        forIndexes: forIndexes,
+        widgetsData,
+      }}
+      id={compId}
+      updateContext={updateContext}
       data={{
         ...fieldData,
         ...slotMap,
-        _selectableBlockEvents: _selectableBlockEventsWithItem,
       }}
-      id={compId}
-      {...componentProps}
-      emit={emitWithForItems}
+      {...getSafeComponentProps({
+        style: finalStyle,
+        classNameList: finalClassNameList,
+      })}
       events={emitEvents}
       compositeParent={codeContext}
-      forIndexes={forIndexes}
-      $node={currentWidget}
-      domRef={domRef}
     >
-      {props.children}
-    </Field>
+      {getComponentChildren(componentSchema, {
+        ..._context,
+        virtualFields,
+        updateContext,
+      })}
+    </FieldWrapper>
   );
-
-  // TODO: 需要不断移除 dataBinds(style/classList)
-  function getBindData(forItems, scopeContext) {
-    // bindData
-    let wData = widgetsData;
-    if (Array.isArray(wData)) {
-      wData =
-        forItems.forIndexes === void 0 || wData.length === 0
-          ? {}
-          : get(wData, getForIndexes(forItems, wData));
-    }
-    wData = wData || {};
-    const fieldData = { ...wData };
-
-    // 再次计算 scope value
-    for (let key in fieldData) {
-      if (Object.prototype.hasOwnProperty.call(fieldData, key)) {
-        const value = fieldData[key];
-        if (value && value.__type === 'scopedValue') {
-          try {
-            fieldData[key] = value.getValue(scopeContext);
-          } catch (e) {
-            console.warn(`Error computing data bind '${key}' error:`, e);
-            fieldData[key] = '';
-          }
-        }
-      }
-    }
-
-    // bindStyle
-    let bindStyle = fieldData.style || {};
-    // 复合组件第一层需要将最外层样式 style 挂到节点上
-    let cssStyle = commonStyle;
-    if (isInComposite && wData && !wData.parent) {
-      cssStyle = {
-        ...cssStyle,
-        ...(codeContext.$WEAPPS_COMP.props?.style || {}),
-      };
-      bindStyle = {
-        ...bindStyle,
-        ...(codeContext.$WEAPPS_COMP.props?.style || {}),
-      };
-    }
-    const finalStyle = getFinalStyle(cssStyle, bindStyle);
-
-    // bindClassList
-    const bindClassList = fieldData.classList || [];
-    const finalClassNameList = getFinalClassNameList(
-      classNameList,
-      bindClassList
-    );
-
-    return { fieldData, finalStyle, finalClassNameList };
-  }
-});
+}
 
 export function getFinalStyle(
   commonStyle = {},

package/template/src/handlers/render.jsx

@@ -1,17 +1,117 @@
 import * as React from 'react';
-import { useRef } from 'react';
 import * as _ from 'lodash';
-import { CompRenderer, ForContext } from './FieldMiddleware/renderer';
+import { ForContext, getComponentRenderList } from './FieldMiddleware/renderer';
 import { isScopeSlot } from '../utils/index';
+import { observer } from 'mobx-react-lite';
 
-function getComponentChildren(component) {
+export function getComponentChildren(component, context = {}) {
   const { properties } = component;
   if (!properties) {
     return [];
   }
-  return Object.values(properties).sort(
+  const list = Object.values(properties).sort(
     (a, b) => (a['x-index'] || 0) - (b['x-index'] || 0)
   );
+  const {
+    virtualFields,
+    codeContext,
+    scopeContext,
+    forContext,
+    injectContext = {},
+    dataContext,
+    updateContext,
+  } = context;
+
+  return list.map((schema) => {
+    return getRenderList({
+      key: schema.key,
+      componentSchema: schema,
+      rootNode: false,
+      renderSlot: false,
+      virtualFields,
+      codeContext,
+      scopeContext,
+      forContext,
+      injectContext,
+      context: dataContext,
+      updateContext,
+    });
+  });
+}
+
+function getRenderList(props) {
+  const {
+    key = '',
+    className,
+    virtualFields,
+    componentSchema,
+    renderSlot,
+    rootNode = true,
+    codeContext,
+    scopeContext = {},
+    context = {},
+    updateContext,
+    forContext = {},
+  } = props;
+
+  const { 'x-props': xProps, properties = {} } = componentSchema;
+
+  // 判断是否为 slot
+  const isSlot = !xProps;
+  if (isSlot && !(renderSlot || rootNode)) {
+    return null;
+  }
+
+  // const preClassName = useRef();
+
+  // wrapperClass
+  const containerEl = Object.values(properties)[0];
+  if (containerEl && containerEl['x-props'] && className) {
+    let { classNameList = [] } = containerEl['x-props'];
+
+    // 先替换掉先前计算出来的className部分
+    // if (preClassName.current) {
+    //   if (preClassName.current !== className) {
+    //     classNameList = classNameList.filter(
+    //       (clsName) => clsName !== preClassName.current
+    //     );
+    //     preClassName.current = className;
+    //   }
+    // } else {
+    //   preClassName.current = className;
+    // }
+
+    containerEl['x-props'].classNameList = Array.from(
+      new Set([className, ...classNameList])
+    );
+  }
+
+  if (xProps && xProps.sourceKey) {
+    const { sourceKey } = xProps;
+    const Field = virtualFields[sourceKey];
+    if (!Field) {
+      return (
+        <div style={{ color: 'red' }}>
+          组件<em>{sourceKey}</em>未找到
+        </div>
+      );
+    }
+  }
+
+  return getComponentRenderList({
+    key,
+    componentSchema,
+    id: componentSchema.key,
+    xProps,
+    emitEvents: componentSchema.emitEvents || [],
+    virtualFields,
+    renderSlot,
+    codeContext,
+    scopeContext,
+    forContext,
+    context,
+    updateContext,
+  });
 }
 
 export function generateSlotMetaMap(componentSchema, context, options = {}) {
@@ -36,14 +136,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
         node: isHOC
           ? (props) => {
               let clonedScopeContext = _.cloneDeep(scopeContext);
-              _.set(
-                clonedScopeContext,
-                `${componentSchema.key}.${child.key}`,
-                props
-              );
+              _.set(clonedScopeContext, `${componentSchema.key}.${key}`, props);
               return (
                 <AppRender
-                  key={child.key}
+                  key={key}
                   componentSchema={child}
                   renderSlot={options?.renderSlot}
                   virtualFields={virtualFields}
@@ -58,7 +154,7 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
               return (
                 <ForContext.Provider value={forContext}>
                   <AppRender
-                    key={child.key}
+                    key={key}
                     componentSchema={child}
                     renderSlot={options?.renderSlot}
                     virtualFields={virtualFields}
@@ -76,89 +172,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
   return slots;
 }
 
-export function AppRender(props) {
-  const {
-    className,
-    virtualFields,
-    componentSchema,
-    renderSlot,
-    rootNode = true,
-    codeContext,
-    scopeContext = {},
-    context = {},
-    updateContext,
-  } = props;
-
-  const { 'x-props': xProps, properties = {} } = componentSchema;
-
-  // 判断是否为 slot
-  const isSlot = !xProps;
-  if (isSlot && !(renderSlot || rootNode)) {
-    return null;
-  }
-
-  const preClassName = useRef();
-
-  // wrapperClass
-  const containerEl = Object.values(properties)[0];
-  if (containerEl && containerEl['x-props'] && className) {
-    let { classNameList = [] } = containerEl['x-props'];
-
-    // 先替换掉先前计算出来的className部分
-    if (preClassName.current) {
-      if (preClassName.current !== className) {
-        classNameList = classNameList.filter(
-          (clsName) => clsName !== preClassName.current
-        );
-        preClassName.current = className;
-      }
-    } else {
-      preClassName.current = className;
-    }
-
-    containerEl['x-props'].classNameList = [className, ...classNameList];
-  }
-
-  if (xProps && xProps.sourceKey) {
-    const { sourceKey } = xProps;
-    const Field = virtualFields[sourceKey];
-    if (!Field) {
-      return (
-        <div style={{ color: 'red' }}>
-          组件<em>{sourceKey}</em>未找到
-        </div>
-      );
-    }
-  }
-
-  const children = getComponentChildren(componentSchema);
-
-  return (
-    <CompRenderer
-      id={componentSchema.key}
-      xProps={xProps}
-      emitEvents={componentSchema.emitEvents || []}
-      componentSchema={componentSchema}
-      virtualFields={virtualFields}
-      renderSlot={renderSlot}
-      codeContext={codeContext}
-      scopeContext={scopeContext}
-      context={context}
-      updateContext={updateContext}
-    >
-      {children.map((comp) => (
-        <AppRender
-          key={comp.key}
-          componentSchema={comp}
-          rootNode={false}
-          renderSlot={false}
-          virtualFields={virtualFields}
-          codeContext={codeContext}
-          scopeContext={scopeContext}
-          context={context}
-          updateContext={updateContext}
-        />
-      ))}
-    </CompRenderer>
-  );
-}
+export const AppRender = observer(function (props) {
+  return getRenderList({
+    ...props,
+    forContext: React.useContext(ForContext),
+    injectContext: {},
+  });
+});

package/template/src/handlers/utils/common.js

@@ -77,7 +77,7 @@ export function resolveComponentProps(props, isPlainProps) {
       ...props,
     };
   }
-  const { data = {}, events = [], ...restProps } = props;
+  const { data = {}, events = [], $node, ...restProps } = props;
   const customProps = { ...data };
   const builtinProps = [
     // react 保留字

package/template/src/pages/app.tpl

@@ -78,32 +78,13 @@ initLifeCycle({
 export default function App() {
   // 检查权限
   const [weDaHasLogin, setWeDaHasLogin] = React.useState(false);
-  const context = React.useRef(observable({})).current;
+  const dataContextRef =  React.useRef(observable({}))
+  const context = dataContextRef.current;
   const containerRef = React.useRef(null);
   const microApp = React.useRef(null);
   const pureSrc = '<%= pageSource %>';
   const isPure = !!pureSrc;
 
-  /**
-   * 更新数据容器的上下文的方法
-   * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
-   * 当组件卸载时，传过来的data为undefined即可
-   * {
-   *   id1: [{...}],
-   *   id2: {...},
-   *   id3: undefined,
-   *   id4: null,
-   *   ...
-   * }
-   * @param id
-   * @param data
-   */
-  const updateContext = (id, data) => {
-    if (id) {
-      context[id] = { data };
-    }
-  }
-
   React.useEffect(() => {
     checkAuth(app, app.id, '<%= pageName %>').then((checkAuthResult) => {
       setWeDaHasLogin(checkAuthResult)
@@ -114,6 +95,7 @@ export default function App() {
       id: '<%= pageName %>',
       state: observable(initPageState),
       computed: createComputed(computed),
+      // _context: context,
       handler,
     });
 
@@ -133,10 +115,10 @@ export default function App() {
   }, []);
 
   React.useEffect(() => {
-    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, context);
+    $page.widgets = createWidgets(widgetsContext, dataBinds, {}, dataContextRef.current);
     // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
     retryDataBinds();
-  }, [context]);
+  }, [dataContextRef.current]);
 
   // Web 环境页面级别生命周期
   if (!process.env.isMiniprogram) {
@@ -178,8 +160,27 @@ export default function App() {
         <AppRender pageListenerInstances={pageListenerInstances}
           virtualFields={virtualFields}
           componentSchema={componentSchema}
-          context={context}
-          updateContext={updateContext}
+          context={dataContextRef.current}
+           /**
+            * 更新数据容器的上下文的方法
+            * 会传递到事件emit的地方，将从组件获取到的数据data赋值给上下文
+            * 当组件卸载时，传过来的data为undefined即可
+            * {
+            *   id1: [{...}],
+            *   id2: {...},
+            *   id3: undefined,
+            *   id4: null,
+            *   ...
+            * }
+            * @param id
+            * @param data
+            */
+          updateContext={(id, data) => {
+            if (id) {
+              dataContextRef.current[id] = { data };
+              // console.log('111', context[id])
+            }
+          }}
         />
       )}
     </div>