@cloudbase/framework-plugin-low-code 0.6.67 → 0.6.68

package/lib/weapps-core/utils/index.js

@@ -7,7 +7,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./formily"), exports);

package/lib/weapps-core/utils/style.js

@@ -76,9 +76,9 @@ function toCssStyle(commonStyle = {}, options = { toRem: true, ignoreSelf: false
         if (radius !== undefined) {
             setStyleValue(style, 'borderRadius', _handleStyleNumValue(radius, !!options.addPXUnit));
         }
-        if (radiusInfo && !common_1.isEmptyObj(radiusInfo)) {
+        if (radiusInfo && !(0, common_1.isEmptyObj)(radiusInfo)) {
             if (Object.keys(radiusInfo).length === 4) {
-                if (uniq_1.default(map_1.default(radiusInfo, (val) => val)).length === 1) {
+                if ((0, uniq_1.default)((0, map_1.default)(radiusInfo, (val) => val)).length === 1) {
                     setStyleValue(style, 'borderRadius', _handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit));
                 }
                 else if (radiusInfo.topLeft === radiusInfo.bottomRight &&
@@ -120,7 +120,7 @@ function toCssStyle(commonStyle = {}, options = { toRem: true, ignoreSelf: false
                 setStyleValue(style, 'backgroundSize', _handleStyleNumValue(size, !!options.addPXUnit));
             }
             setStyleValue(style, 'backgroundPosition', position);
-            if (positionObj && !common_1.isEmptyObj(positionObj)) {
+            if (positionObj && !(0, common_1.isEmptyObj)(positionObj)) {
                 style.background += ` ${_handleStyleNumValue(positionObj.left, !!options.addPXUnit)} ${_handleStyleNumValue(positionObj.top, !!options.addPXUnit)}`;
             }
         }
@@ -166,7 +166,7 @@ exports.toCssStyle = toCssStyle;
 function removeInvalidStyleFormValue(styleForm = {}) {
     return Object.keys(styleForm).reduce((result, key) => {
         const propStyleFormData = styleForm[key];
-        if (common_1.isPlainObject(propStyleFormData)) {
+        if ((0, common_1.isPlainObject)(propStyleFormData)) {
             setStyleValue(result, key, removeInvalidStyleFormValue(propStyleFormData));
         }
         else {
@@ -178,24 +178,24 @@ function removeInvalidStyleFormValue(styleForm = {}) {
 exports.removeInvalidStyleFormValue = removeInvalidStyleFormValue;
 function setDistanceStyle(style, distance, attr, addPXUnit) {
     if (Object.keys(distance).length === 4) {
-        if (uniq_1.default(map_1.default(distance, (val) => val)).length === 1) {
-            setStyleValue(style, common_1.camelcase(`${attr}`), _handleStyleNumValue(distance.top, addPXUnit));
+        if ((0, uniq_1.default)((0, map_1.default)(distance, (val) => val)).length === 1) {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), _handleStyleNumValue(distance.top, addPXUnit));
         }
         else if (distance.top === distance.bottom &&
             distance.left === distance.right) {
-            setStyleValue(style, common_1.camelcase(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)}`);
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)}`);
         }
         else if (distance.left === distance.right) {
-            setStyleValue(style, common_1.camelcase(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)}`);
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)}`);
         }
         else {
-            setStyleValue(style, common_1.camelcase(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)} ${_handleStyleNumValue(distance.left, addPXUnit)}`);
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)} ${_handleStyleNumValue(distance.left, addPXUnit)}`);
         }
     }
     else {
         config_1.DISTANCE_KEY_LIST.forEach((key) => {
             if (distance[key] !== undefined)
-                setStyleValue(style, common_1.camelcase(`${attr}_${key}`), _handleStyleNumValue(distance[key], addPXUnit));
+                setStyleValue(style, (0, common_1.camelcase)(`${attr}_${key}`), _handleStyleNumValue(distance[key], addPXUnit));
         });
     }
 }
@@ -227,10 +227,10 @@ function setStyleValue(object, key, value) {
     if (key === 'open') {
         return;
     }
-    if (common_1.isEmptyObj(value)) {
+    if ((0, common_1.isEmptyObj)(value)) {
         return;
     }
-    object[common_1.camelcase(key)] = value;
+    object[(0, common_1.camelcase)(key)] = value;
 }
 function calPxToREM(px) {
     if (Number.isNaN(px / 28))
@@ -280,7 +280,7 @@ exports.toRPX = toRPX;
 function removeWrapperBadEffectStyle(commonStyle = {}) {
     return Object.keys(commonStyle).reduce((result, key) => {
         const value = commonStyle[key];
-        const camelcaseKey = common_1.camelcase(key);
+        const camelcaseKey = (0, common_1.camelcase)(key);
         if (config_1.WRAPPER_REMOVE_STYLE_KEY_LIST.includes(camelcaseKey)) {
             return result;
         }
@@ -296,7 +296,7 @@ function removeEffectTwiceStyle(commonStyle = {}) {
     const style = {};
     Object.keys(commonStyle).map((key) => {
         const value = commonStyle[key];
-        const camelcaseKey = common_1.camelcase(key);
+        const camelcaseKey = (0, common_1.camelcase)(key);
         if (config_1.SELF_REMOVE_STYLE_KEY_LIST.includes(camelcaseKey)) {
             return false;
         }
@@ -313,7 +313,7 @@ function toCssText(style, className = '.some-class-name') {
     const attrText = Object.keys(style)
         .map((key) => {
         const value = style[key];
-        return `${common_1.kebabCase(key)}: ${value};`;
+        return `${(0, common_1.kebabCase)(key)}: ${value};`;
     })
         .join('\n');
     return `${className} { ${attrText} }\n`;

package/package.json

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

package/template/mp/app/weapps-api.js

@@ -50,6 +50,9 @@ function createGlboalApi() {
         });
       }
     },
+    invoke(params) {
+      return app.activePage.invokeComponentMethod(params)
+    },
     utils: {
       formatDate,
       formatEnum,

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

@@ -3,6 +3,7 @@ import { createEventHandlers, createComputed } from './util'
 import { createWidgets, mpCompToWidget, disposeWidget } from './widget'
 import mergeRenderer from './merge-renderer'
 import sdk from './weapp-sdk'
+import lodashGet from 'lodash.get';
 
 /**
  * Lowcodes of all components
@@ -48,7 +49,7 @@ export function createComponent(key, behaviors, properties, events, handler, dat
       },
       attached() {
         const $comp = this.getWeAppInst()
-        if(!$comp) return
+        if (!$comp) return
 
         $comp.props.events = createPropEvents(events, this)
         $comp.widgets = {}
@@ -57,6 +58,19 @@ export function createComponent(key, behaviors, properties, events, handler, dat
 
         try {
           lifeCycle.onAttached && lifeCycle.onAttached.call($comp)
+          this.__handlerAttached__ = (e) => {
+            const widget = lodashGet(widgets, e.target.id);
+            widget._methods = e.detail.methods;
+          }
+          this.__handlerDetached__ = (e) => {
+            const widget = lodashGet(widgets, e.target.id);
+            delete widget._methods;
+          }
+          if ($comp.methods) {
+            this.triggerEvent('attached', {
+              'methods': $comp.methods
+            })
+          }
         } catch (e) {
           console.error('Component lifecycle(attached) error', this.is, e)
         }
@@ -69,29 +83,33 @@ export function createComponent(key, behaviors, properties, events, handler, dat
       },
       detached() {
         const $comp = this.getWeAppInst()
-        if(!$comp) return
+        if (!$comp) return
 
         $comp.widgets = null
         disposeWidget(this._virtualRootWidget)
         this._disposers.forEach(dispose => dispose())
         lifeCycle.onDetached && lifeCycle.onDetached.call($comp)
+
+        if ($comp?.methods) {
+          this.triggerEvent('detached');
+        }
       }
     },
 
     pageLifetimes: {
       show() {
         const $comp = this.getWeAppInst()
-        if(!$comp) return
+        if (!$comp) return
         lifeCycle.onPageShow && lifeCycle.onPageShow.call($comp)
       },
       hide() {
         const $comp = this.getWeAppInst()
-        if(!$comp) return
+        if (!$comp) return
         lifeCycle.onPageHide && lifeCycle.onPageHide.call($comp)
       },
       resize(size) {
         const $comp = this.getWeAppInst()
-        if(!$comp) return
+        if (!$comp) return
         lifeCycle.onPageResize && lifeCycle.onPageResize.call($comp, size)
       }
     },
@@ -119,12 +137,12 @@ export function createComponent(key, behaviors, properties, events, handler, dat
         return widget.$comp
       },
       _runWatch() {
-        const { watchEffects = {}} = index
+        const { watchEffects = {} } = index
         Object.keys(watchEffects).map(name => {
           const fn = watchEffects[name]
           if (fn instanceof Function) {
             const $comp = this.getWeAppInst()
-            if(!$comp) return
+            if (!$comp) return
             this._disposers.push(autorun(fn.bind($comp)))
           } else {
             console.error(`WatchEffect(${name}) of ${key} is not a function.`)
@@ -155,6 +173,7 @@ export function create$comp(w) {
       get classList() { return w.classList },
     },
     lib,
+    methods: undefined,
     i18n: {
       ...sdk.i18n,
       t(key, data) {

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

@@ -3,6 +3,8 @@ import { createComputed, createEventHandlers, checkAuth } from './util';
 import { createWidgets, createInitData, disposeWidget } from './widget';
 import mergeRenderer from './merge-renderer';
 import { createDataset, EXTRA_API, createStateDataSourceVar, generateParamsParser, setConfig } from '../datasources/index';
+import lodashGet from 'lodash.get';
+
 
 export function createPage(
   lifecycle,
@@ -67,6 +69,28 @@ export function createPage(
         this._rootWidget = rootWidget;
         this._widgets = widgets;
         this._pageActive = true;
+        this.__handlerAttached__ = (e) => {
+          if (!$page.componentMethods) {
+            $page.componentMethods = {};
+          }
+          const [id, index = 0] = e.target.id.split('-');
+          if (!$page.componentMethods[id]) {
+            $page.componentMethods[id] = [];
+          }
+          $page.componentMethods[id][index] = e.detail.methods;
+        };
+        this.__handlerDetached__ = (e) => {
+          const [id, index = 0] = e.target.id.split('-');
+          if ($page.componentMethods) {
+            const components = $page.componentMethods[id];
+            if (components) {
+              components[index] = undefined;
+              if (components.filter(com => com !== undefined).length === 0) {
+                delete $page.componentMethods[id];
+              }
+            }
+          }
+        }
         this._disposers = this.initMergeRenderer(widgets);
       },
       detached() {
@@ -143,7 +167,20 @@ export function createPage(
               app.utils.set($page.dataset.state, keyPath, userSetState[keyPath]);
             });
           };
-
+          $page.invokeComponentMethod = ({ component, method, params }) => {
+            const components = lodashGet($page.componentMethods, component);
+            if (Array.isArray(components)) {
+              throw new Error('调用方法失败：id为'+component+'的组件拥有多个实例')
+              // components.forEach(component => {
+              //   component[method](params);
+              // })
+            } else {
+              if(!components?.[method] || typeof components[method]!= 'function') {
+                throw new Error('调用方法失败：未找到id为'+component+'下的方法'+method)
+              }
+              return components[method](params);
+            }
+          };
           this.$WEAPPS_PAGE = $page;
         }
         return this.$WEAPPS_PAGE

package/template/mp/common/widget.js

@@ -377,4 +377,5 @@ function mountBuiltinWigetsAPI(widget, owner) {
     })
   }
 
+  widget._methods = {}
 }

package/template/src/app/global-api.js

@@ -9,6 +9,7 @@ import { formatEnum, enumOptions } from '../utils/formatEnum';
 import { getter, setter, _isMobile } from '../utils';
 import actionMap from './material-actions';
 import { scanCodeApi } from '../utils/scan-code-action';
+import { get as lodashGet } from 'lodash'
 
 const mainAppKey = '__weappsMainApp';
 const appGlobal = process.env.isMiniprogram ? getApp() : window;
@@ -45,6 +46,9 @@ function createGlboalApi() {
         });
       }
     },
+    invoke(params) {
+      return $page.invokeComponentMethod(params)
+    },
     utils: {
       formatDate,
       formatEnum,
@@ -114,6 +118,24 @@ function createPageApi() {
     // 页面数据源变量存储位置
     dataVar: {},
   };
+  $page.invokeComponentMethod = ({ component, method, params }) => {
+    const widgetData = lodashGet($page.widgets, component);
+    if (Array.isArray(widgetData)) {
+      throw new Error('调用方法失败：id为'+component+'的组件拥有多个实例')
+      // widgetData.forEach(widget => {
+      //   if(!widget._methods[method]) {
+      //     throw new Error('NOT_FOUND')
+      //   } else {
+      //     actions.push(widget._methods[method])
+      //   }
+      // })
+    } else {
+      if(!widgetData._methods[method] || typeof widgetData._methods[method]!= 'function') {
+        throw new Error('调用方法失败：未找到id为'+component+'下的方法'+method)
+      }
+      return widgetData._methods[method](params)
+    }
+  }
   return $page;
 }
 

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

@@ -188,6 +188,7 @@ function FieldWrapper({
   const injectContext = {};
   const indexRef = React.useRef();
   const typeRef = React.useRef();
+  const instanceRef = React.useRef();
   const { 'x-props': xProps } = componentSchema;
   let { staticResourceAttribute = [], listenerInstances = [] } = xProps;
 
@@ -250,6 +251,16 @@ function FieldWrapper({
     ? get(widgetsData, forIndexes)
     : widgetsData;
 
+  React.useLayoutEffect(() => {
+    return () => {
+      instanceRef.current = undefined;
+    };
+  }, []);
+
+  React.useLayoutEffect(() => {
+    currentWidget._getInstanceRef = () => instanceRef;
+  }, [currentWidget, instanceRef]);
+
   if (!Array.isArray(staticResourceAttribute)) {
     staticResourceAttribute = [];
   }
@@ -264,6 +275,7 @@ function FieldWrapper({
 
   return (
     <Field
+      ref={instanceRef}
       data={{
         ...data,
         _selectableBlockEvents: {

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

@@ -39,11 +39,9 @@ export function emitEvent(
               ? {
                   /**
                    * @deprecated 历史bug
-                   * value,origin,isCapturePhase
+                   * value
                    */
                   value: res,
-                  origin: args.event,
-                  isCapturePhase: !!args.event?.isCapturePhase,
                   ...res,
                 }
               : res,

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

@@ -94,7 +94,12 @@ export function retryDataBinds(tryTime = 10) {
     retryDataBinds(tryTime - 1);
   }, 0);
 }
-export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context = {}) {
+export function createWidgets(
+  widgetProps,
+  dataBinds,
+  scopeContext = {},
+  context = {}
+) {
   const nodeTree = createWidgetTree(widgetProps, dataBinds);
   const widgets = runFor(nodeTree, {}, null, null, scopeContext, context);
   return widgets;
@@ -115,7 +120,7 @@ export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context
     parentLevelWidgets,
     parentWidget,
     scopeContext,
-    context,
+    context
   ) {
     const nodeId = curForNode.id;
     if (!curForNode.value) {
@@ -180,6 +185,13 @@ export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context
               includeInvisibleDescendants
             );
           w.getOwnerWidget = () => null; // 寻找父widget，默认返回null， 后续会覆写
+          w._getInstanceRef = () => null; // 默认初始值
+          Object.defineProperty(w, '_methods', {
+            get() {
+              const instance = w._getInstanceRef();
+              return instance?.current.methods;
+            },
+          });
           // 提供一个给 Node 挂载 API 的方式
           untracked(() => {
             w.extends = (name, fnOrData) =>
@@ -213,7 +225,7 @@ export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context
                     subForItems,
                     undefined,
                     context,
-                    scopeContext,
+                    scopeContext
                   );
                   disposeError = false;
                 } catch (e) {
@@ -251,7 +263,7 @@ export function createWidgets(widgetProps, dataBinds, scopeContext = {}, context
             widgets,
             node.parent && widgets[node.parent.id],
             scopeContext,
-            context,
+            context
           );
           curForNode.id && widgets[curForNode.id]._disposers.push(dispose);
         }

package/template/src/pages/composite.tpl

@@ -51,7 +51,7 @@ class CompositeCompWrapper extends React.Component {
     this.compConfig = <%= JSON.stringify(compConfig, null, 2) %>
     this.virtualFields = Object.assign({}, props.pageVirtualFields || {}, {
     <% useComponents.forEach(compItem => {%>
-      "<%= compItem.key %>": <% if(compItem.isPlainProps) {%> (props) => <<%= compItem.var %> {...resolveComponentProps(props, 1)} /> <% } else {%>  (props) => <<%= compItem.var %>{...resolveComponentProps(props, 0)} />  <% }%>,
+      "<%= compItem.key %>": React.forwardRef((props,ref) => <<%= compItem.var %> {...resolveComponentProps(props,  <%= compItem.isPlainProps? 1:0 %>)} ref={ref}/>),
     <%}) %>
     });
     this.events = (<%= emitEvents %>).reduce((obj, trigger) => {
@@ -107,6 +107,7 @@ class CompositeCompWrapper extends React.Component {
   }
 
   createCompAPI(compThis) {
+    const { forwardRef, ...restProps } = compThis.props || {};
     compThis.$WEAPPS_COMP = {
       compConfig: compThis.compConfig,
       widgets: compThis.widgets,
@@ -114,7 +115,7 @@ class CompositeCompWrapper extends React.Component {
       handler: compThis.handler,
       lib: { const: constObj, tools: toolsObj },
       get props() {
-        return {...compThis.props, events: compThis.events, data: compThis.propsData }
+        return {...restProps, events: compThis.events, data: compThis.propsData }
       },
       get state() {
         return compThis.state
@@ -122,16 +123,32 @@ class CompositeCompWrapper extends React.Component {
       get computed() {
         return compThis.computed
       },
+      get _instanceRef() {
+        return forwardRef
+      },
+      get methods() {
+        return forwardRef.current?.methods
+      },
+      set methods(value) {
+        if(!forwardRef.current) {
+          forwardRef.current = {}
+        }
+        forwardRef.current.methods = value
+        return value
+      }
     };
   }
 
   componentDidMount() {
-    lifecycle.onAttached && lifecycle.onAttached.bind(this)()
-    lifecycle.onReady && lifecycle.onReady.bind(this)()
+    const onAttached = lifecycle.onAttached && lifecycle.onAttached.bind(this)
+    Promise.resolve(onAttached()).then(()=>{
+      lifecycle.onReady && lifecycle.onReady.bind(this)()
+    })
   }
 
   componentWillUnmount() {
     lifecycle.onDetached && lifecycle.onDetached.bind(this)()
+    this.$WEAPPS_COMP._instanceRef.current = undefined
   }
 
   render() {
@@ -148,6 +165,7 @@ class CompositeCompWrapper extends React.Component {
   }
 }
 
-export default observer((props) => (
-   <CompositeCompWrapper {...props}></CompositeCompWrapper>
-));
+export default observer((props, _ref) => (
+   <CompositeCompWrapper {...props} forwardRef={_ref}></CompositeCompWrapper>
+), { forwardRef: true });
+