@cloudbase/framework-plugin-low-code 0.7.30 → 0.7.33

package/template/mp/component/index.js

@@ -54,7 +54,7 @@ const handler = {<% handlers.forEach(h => {%>
 
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    <%= prop %>: function (lists, forItems, event, $context) {const $for=forItems; return (
+    '<%= prop %>': function (lists, forItems, event, $context) {const $for=forItems; return (
       <%= expr === '' ? 'undefined': expr %>
     ); },<% }) %>
   },<%}) %>

package/template/mp/page/index.js

@@ -28,7 +28,7 @@ const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listen
 }
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
   <%= id %>: { <% Object.entries(widgetBinds).map(([prop, expr]) => { %>
-    <%= prop %>: function (lists, forItems, event, $context) {const $for = forItems; return (
+    '<%= prop %>': function (lists, forItems, event, $context) {const $for = forItems; return (
       <%= expr === '' ? 'undefined': expr %>
     ); },<% }) %>
   },<%}) %>

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

@@ -129,7 +129,7 @@ function getForList(compId, dataBinds, parentForItems, dataContext) {
 
   try {
     // 绑定了 for 变量，但计算值错误时，应当空数组兜底
-    forList = dataBinds && dataBinds._waFor && (dataBinds._waFor(parentForItems, undefined, dataContext) || []);
+    forList = dataBinds?._waFor && (dataBinds._waFor(parentForItems, undefined, dataContext) || []);
   } catch (e) {
     // 计算值出错则使用空数组兜底
     forList = [];
@@ -226,7 +226,9 @@ function FieldWrapper({
   }, []);
 
   React.useLayoutEffect(() => {
-    currentWidget._getInstanceRef = () => instanceRef;
+    if (currentWidget) {
+      currentWidget._getInstanceRef = () => instanceRef;
+    }
   }, [currentWidget, instanceRef]);
 
   if (!Array.isArray(staticResourceAttribute)) {
@@ -342,6 +344,7 @@ export function getComponentRenderList(props) {
         const forItems = {
           ...parentForItems,
           [compId]: item,
+          index: { ...parentForItems.index, [compId]: index },
           forIndexes: forItemsIndexes,
         };
         const {
@@ -376,7 +379,7 @@ export function getComponentRenderList(props) {
         );
 
         return (
-          <ForContext.Provider key={index} value={forItems}>
+          <ForContext.Provider key={forItemData._key} value={forItems}>
             <FieldWrapper
               Field={Field}
               componentSchema={componentSchema}

package/template/src/handlers/render.jsx

@@ -4,6 +4,8 @@ import { ForContext, getComponentRenderList } from './FieldMiddleware/renderer';
 import { isScopeSlot } from '../utils/index';
 import { observer } from 'mobx-react-lite';
 
+export const RenderCustractorContext = React.createContext(AppRender);
+
 export function getComponentChildren(component, context = {}) {
   const { properties } = component;
   if (!properties) {
@@ -64,7 +66,7 @@ function getRenderList(props) {
 
   // wrapperClass
   const containerEl = Object.values(properties)[0];
-  if (containerEl && containerEl['x-props'] && className) {
+  if (containerEl?.['x-props'] && className) {
     let { classNameList = [] } = containerEl['x-props'];
 
     // 先替换掉先前计算出来的className部分
@@ -82,7 +84,7 @@ function getRenderList(props) {
     containerEl['x-props'].classNameList = Array.from(new Set([className, ...classNameList]));
   }
 
-  if (xProps && xProps.sourceKey) {
+  if (xProps?.sourceKey) {
     const { sourceKey } = xProps;
     const Field = virtualFields[sourceKey];
     if (!Field) {
@@ -124,10 +126,11 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
         type: isHOC ? 'HOC' : 'ELEMENT',
         node: isHOC
           ? (props) => {
+              const Render = React.useContext(RenderCustractorContext) || AppRender;
               let clonedScopeContext = cloneDeep(scopeContext);
               set(clonedScopeContext, `${componentSchema.key}.${key}`, props);
               return (
-                <AppRender
+                <Render
                   key={key}
                   componentSchema={child}
                   renderSlot={options?.renderSlot}
@@ -140,9 +143,10 @@ export function generateSlotMetaMap(componentSchema, context, options = {}) {
               );
             }
           : () => {
+              const Render = React.useContext(RenderCustractorContext) || AppRender;
               return (
                 <ForContext.Provider value={forContext}>
-                  <AppRender
+                  <Render
                     key={key}
                     componentSchema={child}
                     renderSlot={options?.renderSlot}
@@ -168,3 +172,11 @@ export const AppRender = observer(function (props) {
     injectContext: {},
   });
 });
+
+export function ComponentAppRender(props) {
+  return getRenderList({
+    ...props,
+    forContext: React.useContext(ForContext),
+    injectContext: {},
+  });
+}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { observable, autorun, untracked } from 'mobx';
-import { remove } from 'lodash';
+import { remove, set as lodashSet } from 'lodash';
 import { checkVisible } from '../../utils/index';
 
 export const WidgetsContext = React.createContext({ parent: null });
@@ -109,33 +109,73 @@ export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context
     if (!curForNode.value) {
       return createSubTree(curForNode, {}, scopeContext, context);
     }
+    const { _waForKey } = curForNode.value;
+    const timer = {};
     const dispose = autorun(() => {
       let forList = [];
       try {
-        forList = dataBinds[nodeId]._waFor(forItems, undefined, context);
+        clearTimeout(timer[nodeId]);
+        const list = dataBinds[nodeId]._waFor(forItems, undefined, context);
+        if (!Array.isArray(list)) {
+          timer[nodeId] = setTimeout(() => {
+            console.warn(nodeId, 'For 循环绑定的数据并不是数组，请检查');
+          }, 1000);
+        } else {
+          forList = list;
+        }
       } catch (e) {
-        console.warn('waFor error', e);
-      }
-
-      if (!Array.isArray(forList)) {
-        forList = [];
-        console.warn(nodeId, 'For 循环绑定的数据并不是数组，请检查');
+        timer[nodeId] = setTimeout(() => {
+          console.error('waFor error', e);
+        }, 1000);
       }
 
       // 让 forList 进行监听
       forList.forEach(() => {});
       untracked(() => {
-        disposeWidgets(parentLevelWidgets[curForNode.id]);
+        // dispose widgets before reused instead
+        // disposeWidgets(parentLevelWidgets[curForNode.id]);
+
+        const exsitMap = forList.reduce((map, item) => {
+          if (item?.[_waForKey]) {
+            map[item[_waForKey]] = true;
+          }
+          return map;
+        }, {});
+        const forWidgets = parentLevelWidgets?.[nodeId];
+        const existedWidgetIndex = [];
+        const extraWidgetsIndex = [];
+        const extraWidgets = [];
+        forWidgets.forEach((widget, index) => {
+          if (exsitMap[widget._key]) {
+            existedWidgetIndex.push(index);
+            // need to use uqique key
+            exsitMap[widget._key] = undefined;
+          } else {
+            extraWidgetsIndex.push(index);
+          }
+        });
+        const extraWidgetsIndexMap = extraWidgetsIndex.reduce((map, item) => {
+          map[item] = true;
+          extraWidgets.push(forWidgets[item]);
+          return map;
+        }, {});
 
         // clean nodes of previouse for run
         dfsTree(curForNode, (node) => {
           const arr = parentLevelWidgets[node.id];
-          arr.splice(0, arr.length);
-          parentWidget && remove(parentWidget.children, ({ id }) => id === node.id);
+          remove(arr, (_, index) => {
+            return extraWidgetsIndexMap[index];
+          });
+        });
+
+        // 清理根 for 的 autorun, 并递归清理子节点
+        extraWidgets.map((w) => {
+          disposeWidgets([w]);
+          parentWidget && remove(parentWidget.children, ({ id }) => id === nodeId);
         });
 
         forList.forEach((item, index) => {
-          const subForItems = { ...forItems, [nodeId]: item };
+          const subForItems = { ...forItems, [nodeId]: item, index: { ...forItems.index, [nodeId]: index } };
           createSubTree(curForNode, subForItems, scopeContext, context);
         });
 
@@ -150,80 +190,122 @@ export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context
       const widgets = {};
 
       // traverse down the tree to set all widgets
-      dfsTree(curForNode, (node, parentNode) => {
+      dfsTree(curForNode, (node, parentNode, cache) => {
+        const parentForWidgetArr = parentLevelWidgets?.[node.id] || [];
+        const { _waForKey } = node.value;
+        const key = subForItems[node.id]?.[_waForKey];
+        const index = cache[parentNode?.id]
+          ? cache[parentNode.id].index
+          : parentForWidgetArr.findIndex((widget) => key && widget._key === key);
+
+        const existedWidget = index !== -1 ? parentForWidgetArr[index] : null;
+
+        if (existedWidget) {
+          cache[node.id] = {
+            index,
+          };
+        }
+
         if (node.forCount === curForNode.forCount) {
           // Leaf node
-          const w = observable(widgetProps[node.id]);
-          w.id = node.id;
-          if (node === curForNode) {
-            w._disposers = [];
-          }
-          widgets[node.id] = w;
-          w.findWidgets = (type, includeInvisibleDescendants) =>
-            findWidgets(w, w.widgetType, type, includeInvisibleDescendants);
-          w.getWidgetsByType = (type, includeInvisibleDescendants) =>
-            w.findWidgets((currentWidget) => currentWidget.widgetType === type, includeInvisibleDescendants);
-          w.getOwnerWidget = () => null; // 寻找父widget，默认返回null， 后续会覆写
-          w._getInstanceRef = () => null; // 默认初始值
-          Object.defineProperty(w, '_methods', {
-            get() {
-              const instance = this._getInstanceRef();
-              return instance?.current?.methods;
-            },
-          });
-          // 提供一个给 Node 挂载 API 的方式
-          untracked(() => {
-            w.extends = (name, fnOrData) =>
-              Object.defineProperty(w, name, {
-                value: fnOrData,
-                writable: true,
+          let w = existedWidget;
+
+          if (!existedWidget) {
+            w = observable(widgetProps[node.id]);
+            w.id = node.id;
+            w._key = key;
+            if (node === curForNode) {
+              w._disposers = [];
+            }
+            widgets[node.id] = w;
+            // 提供一个给 Node 挂载 API 的方式
+            untracked(() => {
+              w.findWidgets = (type, includeInvisibleDescendants) =>
+                findWidgets(w, w.widgetType, type, includeInvisibleDescendants);
+              w.getWidgetsByType = (type, includeInvisibleDescendants) =>
+                w.findWidgets((currentWidget) => currentWidget.widgetType === type, includeInvisibleDescendants);
+              w.getOwnerWidget = () => null; // 寻找父widget，默认返回null， 后续会覆写
+              w._getInstanceRef = () => null; // 默认初始值
+              Object.defineProperty(w, '_methods', {
+                get() {
+                  const instance = this._getInstanceRef();
+                  return instance?.current?.methods;
+                },
               });
-          });
-          w.children = [];
-          const parent = parentNode ? widgets[parentNode.id] : parentWidget;
-          if (parent) {
-            w.parent = parent;
-            // 只有可显示 visible 的才存入 children 里
-            if (checkVisible(w)) {
-              parent.children.push(w);
+              w.extends = (name, fnOrData) =>
+                Object.defineProperty(w, name, {
+                  value: fnOrData,
+                  writable: true,
+                });
+            });
+            w.children = [];
+            const parent = parentNode ? widgets[parentNode.id] : parentWidget;
+            if (parent) {
+              w.parent = parent;
+              // 只有可显示 visible 的才存入 children 里
+              if (checkVisible(w)) {
+                parent.children.push(w);
+              }
             }
+            parentForWidgetArr.push?.(w);
+          } else {
+            disposeWidgets([existedWidget], true);
           }
-          parentLevelWidgets && parentLevelWidgets[node.id].push(w);
-
+          widgets[node.id] = w;
           // Setup data binds
-          Object.keys(dataBinds[node.id] || {}).map((prop) => {
-            if (prop === '_waFor') {
-              return;
-            }
-            function getBindData(options = {}) {
-              let disposeError = false;
-              const dispose = autorun(() => {
-                try {
-                  // Computed data bind in the next tick since data bind may read widgets data
-                  w[prop] = dataBinds[node.id][prop](subForItems, undefined, context, scopeContext);
-                  disposeError = false;
-                } catch (e) {
-                  options.showLog && console.error(e);
-                  retryQueue.push(getBindData);
-                  disposeError = true;
+          Object.keys(dataBinds[node.id] || {})
+            .sort((a, b) => {
+              return a.length - b.length > 0 ? 1 : -1;
+            })
+            .map((prop) => {
+              if (prop === '_waFor') {
+                return;
+              }
+              let timer = null;
+              function getBindData(options = {}) {
+                let disposeError = false;
+                const dispose = autorun(() => {
+                  try {
+                    clearTimeout(timer);
+                    // Computed data bind in the next tick since data bind may read widgets data
+                    const value = dataBinds[node.id][prop](subForItems, undefined, context, scopeContext);
+                    const paths = prop.split('.').filter((key) => !!key);
+                    if (paths.length > 1) {
+                      // 一定要 untracked 不然爆栈了
+                      untracked(() => lodashSet(w, prop, value));
+                    } else {
+                      // 普通 key 直接赋值
+                      w[prop] = value;
+                    }
+                    disposeError = false;
+                  } catch (e) {
+                    if (options?.showLog) {
+                      timer = setTimeout(() => {
+                        console.warn(`Error computing data bind ${w.id}.${prop}`, e);
+                        timer = null;
+                      }, 1000);
+                    }
+                    retryQueue.push(getBindData);
+                    disposeError = true;
+                  }
+                });
+                if (!!disposeError && curForNode.id) {
+                  widgets[curForNode.id]._disposers.push(dispose);
                 }
-              });
-              if (!!disposeError && curForNode.id) {
-                widgets[curForNode.id]._disposers.push(dispose);
               }
-            }
-            getBindData();
-          });
-        } else {
+              getBindData();
+            });
+        } else if (!existedWidget) {
           if (parentLevelWidgets) {
             const len = parentLevelWidgets[node.id].push([]);
             widgets[node.id] = parentLevelWidgets[node.id][len - 1];
           } else {
             widgets[node.id] = observable([]);
           }
+        } else {
+          widgets[node.id] = existedWidget;
         }
       });
-
       // run for of next level
       dfsTree(curForNode, (node, parentNode) => {
         if (node.forCount === curForNode.forCount + 1 && dataBinds[node.id]?._waFor) {
@@ -280,7 +362,7 @@ function createWidgetTree(widgets, dataBinds) {
     if (node.parent) {
       node.forCount = node.parent.forCount;
     }
-    if (dataBinds[node.id] && dataBinds[node.id]._waFor) {
+    if (dataBinds[node.id]?._waFor) {
       node.forCount++;
     }
     node.children.map(addForCount);
@@ -289,19 +371,21 @@ function createWidgetTree(widgets, dataBinds) {
   return virtualRoot;
 }
 
-function dfsTree(node, fn, parent) {
-  node.value && fn(node, parent);
-  node.children.map((e) => dfsTree(e, fn, node.value ? node : null));
+function dfsTree(node, fn, parent, cache = {}) {
+  node.value && fn(node, parent, cache);
+  node.children.map((e) => dfsTree(e, fn, node.value ? node : null, cache));
 }
 
 // dispose autorun
-function disposeWidgets(widgets = []) {
+function disposeWidgets(widgets = [], noRecursive = false) {
   widgets.forEach((widget) => {
     const disposers = widget._disposers;
     if (disposers) {
       disposers.map((dispose) => dispose());
       disposers.splice(0, disposers.length);
     }
-    disposeWidgets(widget.children);
+    if (!noRecursive) {
+      disposeWidgets(widget.children);
+    }
   });
 }

package/template/src/index.jsx

@@ -53,7 +53,9 @@ WEDA_CLOUD_SDK.setConfig({
         params.data.accessToken = accessToken;
       }
     } catch (e) {
-      console.error('beforeCallFunction error', e);
+      if (app?.cloud?.currentUser?.userType === "externalUser" && e?.error === 'unauthenticated') {
+        console.error('beforeCallFunction error', e);
+      }
     }
     return params;
   },

package/template/src/pages/composite.tpl

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { observer } from "mobx-react-lite";
-import { observable } from "mobx";
-import { get } from 'lodash'
+import { observable, autorun, reaction, runInAction } from "mobx";
+import { get } from 'lodash';
 
-import { AppRender } from "handlers/render";
+import { ComponentAppRender as AppRender } from "handlers/render";
 import { createComputed } from "../../../../utils";
 import { createWidgets, retryDataBinds, WidgetsContext, resolveComponentProps } from 'handlers/utils'
 import getStateFn from "./lowcode/state.js";
@@ -37,11 +37,15 @@ class CompositeCompWrapper extends React.Component {
   $WEAPPS_COMP = {}
 
   componentDidUpdate() {
-    const { data } = this.props
-    for(let prop in data) {
-      // 更新 propsData
-      this.propsData[prop] = data[prop]
-    }
+    runInAction(() => {
+      const { data } = this.props
+      for(let prop in data) {
+        // 更新 propsData
+        if (typeof data[prop] !== 'function') {
+          this.propsData[prop] = data[prop]
+        }
+      }
+    })
   }
 
 
@@ -56,9 +60,9 @@ class CompositeCompWrapper extends React.Component {
     });
     this.events = (<%= emitEvents %>).reduce((obj, trigger) => {
       obj[trigger] = (event) => {
-        this.props.emit(trigger, event)
+        this.props.emit(trigger, event);
       };
-      return obj
+      return obj;
     }, {});
     this.handler = this.$WEAPPS_COMP.handler = {
       <% handlersImports.forEach(handler => { %>
@@ -166,7 +170,9 @@ class CompositeCompWrapper extends React.Component {
   }
 }
 
+CompositeCompWrapper.contextType = WidgetsContext
+
 export default observer((props, _ref) => (
-   <CompositeCompWrapper {...props} forwardRef={_ref}></CompositeCompWrapper>
+  <CompositeCompWrapper {...props} forwardRef={_ref}></CompositeCompWrapper>
 ), { forwardRef: true });