@cloudbase/lowcode-builder 1.2.4 → 1.3.1

package/package.json

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

package/template/html/index.html.ejs

@@ -475,7 +475,7 @@
       crossorigin
       src="<%=
         cdnEndpoints.cdngo
-      %>/lcap/lcap-resource-cdngo/-/0.1.4/_files/static/weda-render/main.ccc8cf9b70a10613d046.bundle.js"
+      %>/lcap/lcap-resource-cdngo/-/0.1.4/_files/static/weda-render/main.5982bff553419fc070b7.bundle.js"
     ></script>
   </body>
 </html>

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

@@ -1,9 +1,10 @@
 import { observable } from 'mobx'
 import { createMpApp } from '@cloudbase/weda-client';
 import { createComputed, formatEnum, enumOptions } from '<%= subLevelPath %>../common/util'
-import process from '<%= subLevelPath %>../common/process'
 import appGlobal from '<%= subLevelPath %>../app/app-global'
 import { createDataset } from '<%= subLevelPath %>../datasources/index'
+import lodashGet from 'lodash.get';
+
 
 <%= importor.state? `import state from '../lowcode/state'` : "const state = {}" %>
 <%= importor.computed? `import computed from '../lowcode/computed'` : "const computed = {}" %>
@@ -12,7 +13,15 @@ import { createDataset } from '<%= subLevelPath %>../datasources/index'
 const mainAppKey = '__weappsMainApp'
 
 export const app = createGlboalApi()
-export { process }
+export const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
+export const $w = new Proxy(
+  {},
+  {
+    get(_, prop) {
+      return app.__internal__.$w?.[prop];
+    },
+  },
+);
 
 function createGlboalApi() {
   const mpApp = createMpApp({

package/template/mp/app.js

@@ -1,5 +1,5 @@
 <%= importor.lifecycle? "import lifeCycle from './lowcode/lifecycle'" : "const lifeCycle = {}" %>
-import { app } from './app/weapps-api'
+import { app, $app } from './app/weapps-api'
 // 引入数据源管理器并进行初始化
 import { setConfig, getAccessToken, EXTRA_API, createStateDataSourceVar, generateParamsParser } from './datasources/index'
 import { redirectToLogin, findLoginPage, getAuthConfig, checkAnonymous } from './common/util'
@@ -15,7 +15,6 @@ console.warn = (...args) => {
     }
 }
 
-const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});
 // 设置数据源请求的 loading 及 toast 处理
 setConfig({
   beforeDSRequest: (cfg) => {

package/template/mp/common/constant.js

@@ -0,0 +1 @@
+export const REPEATER = <%= REPEATER %>

package/template/mp/common/util.js

@@ -1,37 +1,37 @@
 'use strict';
-import { findForItemsOfWidget, getWidget } from './widget'
+import { generateForContextOfWidget, generateWidgetAPIContext, getWidget } from './widget';
 import { observable, untracked } from 'mobx';
-import { getAccessToken, loginScope } from '../datasources/index'
-import { app } from '../app/weapps-api'
+import { getAccessToken, loginScope } from '../datasources/index';
+import { app } from '../app/weapps-api';
 
 /**
  * Convert abcWordSnd -> abc-word-snd
  */
 export function toDash(str) {
-  return str.replace(/[A-Z]/g, upperLetter => `-${upperLetter.toLowerCase()}`)
+  return str.replace(/[A-Z]/g, (upperLetter) => `-${upperLetter.toLowerCase()}`);
 }
 
 export function createComputed(funcs, bindContext = null) {
-  const computed = {}
+  const computed = {};
   for (const name in funcs) {
     Object.defineProperty(computed, name, {
       get() {
         try {
-          return bindContext ? funcs[name].call(bindContext) : funcs[name]()
+          return bindContext ? funcs[name].call(bindContext) : funcs[name]();
         } catch (e) {
-          console.error('Computed error', e)
+          console.error('Computed error', e);
         }
       },
-      enumerable: true
-    })
+      enumerable: true,
+    });
   }
-  return computed
+  return computed;
 }
 
 export function generateDataContext(widget) {
   const dataContext = {};
   while (widget?._scope) {
-    const current = widget
+    const current = widget;
     // 此处采用代理的方式，是为了可以获取到最新的 _scope.dataContext 防止 dataContext 引用被重新赋值
     Object.defineProperty(dataContext, current._scope.id, {
       get() {
@@ -59,24 +59,26 @@ export function createEventHandlers(
     const listeners = evtListeners[name];
     evtHandlers[name] = function (event = {}) {
       const self = this;
-      const owner = this.getWeAppInst();
+      const owner = this._getInstance();
       const target = !!event?.target?.id ? getWidget(owner.widgets, event.target.id) : undefined;
       const currentTarget = !!event?.currentTarget?.id ? getWidget(owner.widgets, event.currentTarget.id) : undefined;
       event.target = target;
       event.currentTarget = currentTarget;
       const [prefix = ''] = name.split('$');
       // The page event handler
-      const { lists = [], itemsById = {} } = (!!currentTarget && findForItemsOfWidget(currentTarget)) || {};
+      const forContext = (!!currentTarget && generateForContextOfWidget(currentTarget)) || {};
+      const { lists = [], forItems = {} } = forContext;
       const dataContext = untracked(() => generateDataContext(currentTarget));
+      const $w = untracked(() => generateWidgetAPIContext(owner?.__internal__?.$w, currentTarget, forContext));
 
       listeners.forEach(async (l) => {
         let { data = {}, boundData = {} } = l;
         data = { ...data };
         try {
           for (const k in boundData) {
-            set(data, k, boundData[k].call(owner, owner, lists, itemsById, event, dataContext));
+            set(data, k, boundData[k].call(owner, owner, lists, forItems, event, dataContext, $w));
           }
-          let res = await l.handler.call(owner, { event, lists, forItems: itemsById, data });
+          let res = await l.handler.call(owner, { event, data });
           let eventName = prefix && l.key ? `${prefix}$${l.key}_success` : '';
           self[eventName] &&
             self[eventName]({
@@ -109,13 +111,13 @@ export function createEventHandlers(
 }
 export function getDeep(target, key, keySeparator = '.') {
   if (key == null) {
-    return target
+    return target;
   }
-  const keys = (key + '').split(keySeparator)
+  const keys = (key + '').split(keySeparator);
   while (keys.length > 0 && target != null) {
-    target = target[keys.shift()]
+    target = target[keys.shift()];
   }
-  return keys.length === 0 ? target : undefined
+  return keys.length === 0 ? target : undefined;
 }
 
 /**
@@ -123,141 +125,135 @@ export function getDeep(target, key, keySeparator = '.') {
  */
 export function touchObj(obj) {
   if (!obj) {
-    return
+    return;
   }
   if (typeof obj === 'string') {
-    return
+    return;
   }
   if (Array.isArray(obj)) {
-    obj.forEach(touchObj)
+    obj.forEach(touchObj);
   } else if (obj) {
-    Object.keys(obj).forEach(key => touchObj(obj[key]))
+    Object.keys(obj).forEach((key) => touchObj(obj[key]));
   }
 }
 
 export function throttle(fn, limit) {
-  let lastExecTime = 0
-  let timer = null
+  let lastExecTime = 0;
+  let timer = null;
 
   function invoke() {
-    lastExecTime = Date.now()
-    timer = null
-    fn()
+    lastExecTime = Date.now();
+    timer = null;
+    fn();
   }
 
   const throttled = function () {
-    const idledDuration = Date.now() - lastExecTime
+    const idledDuration = Date.now() - lastExecTime;
     if (idledDuration >= limit) {
       if (timer) {
-        clearTimeout(timer)
-        timer = null
+        clearTimeout(timer);
+        timer = null;
       }
-      invoke()
+      invoke();
     } else if (!timer) {
-      timer = setTimeout(invoke, limit - idledDuration)
+      timer = setTimeout(invoke, limit - idledDuration);
     }
-  }
-  return throttled
+  };
+  return throttled;
 }
 
 export function deepEqual(a, b) {
   if (a === b) {
-    return true
+    return true;
   }
 
   if (Array.isArray(a) && Array.isArray(b)) {
     if (a.length !== b.length) {
-      return false
+      return false;
     }
     for (let i = 0; i < a.length; i++) {
       if (!deepEqual(a[i], b[i])) {
-        return false
+        return false;
       }
     }
-    return true
+    return true;
   }
 
   if (a && b && typeof a === 'object' && typeof b === 'object') {
-    const aProps = Object.keys(a), bProps = Object.keys(b)
+    const aProps = Object.keys(a),
+      bProps = Object.keys(b);
     if (!deepEqual(aProps, bProps)) {
-      return false
+      return false;
     }
     for (let i = 0; i < aProps.length; i++) {
-      const prop = aProps[i]
+      const prop = aProps[i];
       if (!deepEqual(a[prop], b[prop])) {
-        return false
+        return false;
       }
     }
-    return true
+    return true;
   }
-  return false
+  return false;
 }
 
 function isObject(value) {
-  var type = typeof value
-  return !!value && (type == 'object' || type == 'function')
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
 }
 
 function isIndex(value, length) {
-  length = length == null ? 9007199254740991 : length
+  length = length == null ? 9007199254740991 : length;
   return (
     !!length &&
     (typeof value == 'number' || /^(?:0|[1-9]\d*)$/.test(value)) &&
     value > -1 &&
     value % 1 == 0 &&
     value < length
-  )
+  );
 }
 
 function assignValue(object, key, value) {
-  var objValue = object[key]
+  var objValue = object[key];
   if (
-    !(
-      Object.hasOwnProperty.call(object, key) &&
-      (objValue === value || (objValue !== objValue && value !== value))
-    ) ||
+    !(Object.hasOwnProperty.call(object, key) && (objValue === value || (objValue !== objValue && value !== value))) ||
     (value === undefined && !(key in object))
   ) {
-    object[key] = value
+    object[key] = value;
   }
 }
 
 export function set(object, path, value) {
   if (!isObject(object)) {
-    return object
+    return object;
   }
-  path = path.split('.')
+  path = path.split('.');
 
   var index = -1,
     length = path.length,
     lastIndex = length - 1,
-    nested = object
+    nested = object;
 
   while (nested != null && ++index < length) {
     var key = path[index],
-      newValue = value
+      newValue = value;
 
     if (index != lastIndex) {
-      var objValue = nested[key]
-      newValue = undefined
+      var objValue = nested[key];
+      newValue = undefined;
       if (newValue === undefined) {
-        newValue = isObject(objValue)
-          ? objValue
-          : isIndex(path[index + 1])
-            ? []
-            : {}
+        newValue = isObject(objValue) ? objValue : isIndex(path[index + 1]) ? [] : {};
       }
     }
-    assignValue(nested, key, newValue)
-    nested = nested[key]
+    assignValue(nested, key, newValue);
+    nested = nested[key];
   }
-  return object
+  return object;
 }
 
 export function findLoginPage() {
   const { app } = getApp();
   const { pages = [] } = app.__internal__.getConfig();
-  return pages.find(item => item.type === 'login');
+  return pages.find((item) => item.type === 'login');
 }
 
 let _AUTH_CONFIG_CACHE = null;
@@ -269,7 +265,7 @@ export async function getAuthConfig() {
   }
   try {
     const res = await app.cloud.callWedaApi({
-      action: "DescribeRuntimeResourceStrategy",
+      action: 'DescribeRuntimeResourceStrategy',
       data: {
         ResourceType: `<%= isAdminPortal? 'modelApp' : 'app'%>`,
         ResourceId: app.id,
@@ -285,15 +281,15 @@ export async function getAuthConfig() {
   } catch (e) {
     return {
       NeedLogin: false,
-      RejectStrategy: "show_warning",
+      RejectStrategy: 'show_warning',
     };
   }
 }
 
-let _AUTH_CACHE_MAP = {}
+let _AUTH_CACHE_MAP = {};
 
 async function getAccessPermission(app, appId, pageId) {
-  const cacheKey = `${appId}-${pageId}`
+  const cacheKey = `${appId}-${pageId}`;
   if (_AUTH_CACHE_MAP[cacheKey] !== undefined) {
     return _AUTH_CACHE_MAP[cacheKey];
   }
@@ -345,9 +341,10 @@ export function formatErrorMsg(e) {
  * 检查页面权限
  **/
 export async function checkAuth(app, appId, $page) {
+  return true;
   const loginPage = findLoginPage(app);
   if (loginPage?.id === $page.id) {
-    return true
+    return true;
   }
   app.showNavigationBarLoading();
   const requestList = [getAccessPermission(app, appId, $page.id)];
@@ -400,16 +397,16 @@ export function redirectToLogin(currentPage) {
     currentPage = app.utils.getCurrentPage() || {};
   }
   if (loginPage?.id === currentPage.id) {
-    return true
+    return true;
   }
   if (loginPage) {
     app.redirectTo({
       pageId: loginPage.id,
       params: {
         sourcePageId: currentPage.id,
-        sourcePageParams: currentPage.params
-      }
-    })
+        sourcePageParams: currentPage.params,
+      },
+    });
   } else {
     app.showToast({
       title: '用户未登录',
@@ -433,8 +430,8 @@ export function formatEnum(path, optionname) {
   let value = !isSingle
     ? JSON.parse(parseOptions)?.find((item) => item?.key === path)?.value
     : JSON.parse(parseOptions)
-      ?.filter((item) => path.some((pathValue) => item?.key === pathValue))
-      .map((item) => multiTmp.push(item?.value));
+        ?.filter((item) => path.some((pathValue) => item?.key === pathValue))
+        .map((item) => multiTmp.push(item?.value));
   // 对多选或者单选有不同处理
   return !isSingle ? value : multiTmp?.join(',');
 }

package/template/mp/common/watch.js

@@ -7,7 +7,7 @@ import { getDeep } from './util'
  * @returns Dipsonsers
  */
 export function runWatchers({ watchEffects = {}, watch = {}, watchState = {}, watchWidget = {} }, mpInst) {
-  const weappInst = mpInst.getWeAppInst()
+  const weappInst = mpInst._getInstance()
   const disposers = []
   Object.keys(watchEffects).map(name => {
     const fn = watchEffects[name]

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

@@ -3,9 +3,10 @@ import { createEventHandlers, createComputed } from './util'
 import { createWidgets, getWidget, disposeWidget } from './widget'
 import mergeRenderer from './merge-renderer'
 import { runWatchers } from './watch'
-import sdk from './weapp-sdk'
 import lodashGet from 'lodash.get';
 import { createInitData } from './widget';
+import { commonCompBehavior } from '@cloudbase/weda-client';
+import { $w as baseAPI } from '../app/weapps-api'
 
 /**
  * Lowcodes of all components
@@ -30,12 +31,12 @@ export function createComponent(key, behaviors, properties, events, handler, dat
       multipleSlots: true,
       styleIsolation: 'shared',
     },
-    behaviors: behaviors,
+    /**
+     * commonCompBehavior 生命周期最先执行
+     */
+    behaviors: [commonCompBehavior, ...behaviors,],
     // externalClasses: ['class'],
     properties: {
-      id: {
-        type: String
-      },
       style: {
         type: String
       },
@@ -53,23 +54,23 @@ export function createComponent(key, behaviors, properties, events, handler, dat
         this._disposers = []
       },
       attached() {
-        const $comp = this.getWeAppInst()
+        const $comp = this._getInstance()
         if(!$comp) return
 
         $comp.props.events = createPropEvents(events, this)
-        $comp.widgets = {}
-        const { widgets, rootWidget: virtualRootWidget } = createWidgets(widgetProps, dataBinds, $comp.widgets, this)
+        const { widgets, rootWidget: virtualRootWidget } = createWidgets(widgetProps, dataBinds, this)
+        $comp.widgets = widgets
         this._virtualRootWidget = virtualRootWidget
 
         try {
           lifeCycle.onAttached && lifeCycle.onAttached.call($comp)
           this.__mnt__ = (e) => {
-            const widget = lodashGet(widgets, e.target.id);
+            const widget = getWidget($comp.widgets, e.target.id)
             widget._methods = e.detail.methods;
           }
           this.__unmnt__ = (e) => {
-            const widget = lodashGet(widgets, e.target.id);
-            delete widget._methods;
+            const widget = lodashGet($comp.widgets, e.target.id);
+            widget._methods = {}
           }
           if ($comp.methods) {
             this.triggerEvent('attached', {
@@ -80,16 +81,16 @@ export function createComponent(key, behaviors, properties, events, handler, dat
           console.error('Component lifecycle(attached) error', this.is, e)
         }
 
-        this._disposers = this.initMergeRenderer(widgets)
+        this._disposers = this.initMergeRenderer($comp.widgets)
       },
       ready() {
-        const $comp = this.getWeAppInst()
+        const $comp = this._getInstance()
         if(!$comp) return
         this._disposers.push(...runWatchers(index, this))
         lifeCycle.onReady && lifeCycle.onReady.call($comp)
       },
       detached() {
-        const $comp = this.getWeAppInst()
+        const $comp = this._getInstance()
         if(!$comp) return
 
         $comp.widgets = null
@@ -105,17 +106,17 @@ export function createComponent(key, behaviors, properties, events, handler, dat
 
     pageLifetimes: {
       show() {
-        const $comp = this.getWeAppInst()
+        const $comp = this._getInstance()
         if(!$comp) return
         lifeCycle.onPageShow && lifeCycle.onPageShow.call($comp)
       },
       hide() {
-        const $comp = this.getWeAppInst()
+        const $comp = this._getInstance()
         if(!$comp) return
         lifeCycle.onPageHide && lifeCycle.onPageHide.call($comp)
       },
       resize(size) {
-        const $comp = this.getWeAppInst()
+        const $comp = this._getInstance()
         if(!$comp) return
         lifeCycle.onPageResize && lifeCycle.onPageResize.call($comp, size)
       }
@@ -124,24 +125,17 @@ export function createComponent(key, behaviors, properties, events, handler, dat
     methods: {
       ...createEventHandlers(evtListeners, { looseError: true }),
       ...mergeRenderer,
-      getWeAppInst() {
-        const $comp = this.$WEAPPS_COMP
-        if ($comp) { return $comp }
-
-        if (!this.selectOwnerComponent) {
-          console.error('Fatal error: not support selectOwnerComponent API, need 2.8.2')
-          return null
-        }
-
-        const owner = this.selectOwnerComponent()
-        const widget = getWidget(owner.getWeAppInst().widgets, this.id)
-        if (!widget || !widget.$comp) {
-          console.error('Fatal error: weapps component instance not created', this.is, this.id)
+      _getInstance() {
+        if(!this.$WEAPPS_COMP){
+          const widget = this.$widget
+          if (!widget) {
+            console.error('Fatal error: weapps component instance not created', this.is, this.id)
+          }else {
+            widget.getDom = (fields) => this._virtualRootWidget.children[0].getDom(fields)
+            this.$WEAPPS_COMP = create$comp(widget)
+          }
         }
-        widget.getDom = (fields) => this._virtualRootWidget.children[0].getDom(fields)
-
-        this.$WEAPPS_COMP = widget.$comp
-        return widget.$comp
+        return this.$WEAPPS_COMP
       },
     },
     // observers: createObservers(Object.keys(properties))
@@ -158,6 +152,8 @@ export function create$comp(w) {
   const { stateFn, computedFuncs, handler, lib } = lowcode
 
   const $comp = {
+    __internal__: {
+    },
     state: {},
     computed: {},
     widgets: {},
@@ -170,13 +166,12 @@ export function create$comp(w) {
     },
     handler: {},
     lib,
-    i18n: {
-      ...sdk.i18n,
-      t(key, data) {
-        const ns = libCode;
-        return sdk.i18n.t(`${ns}:${key}`, data)
-      },
-    }
+    // i18n: {
+    //   t(key, data) {
+    //     const ns = libCode;
+    //     return sdk.i18n.t(`${ns}:${key}`, data)
+    //   },
+    // }
   }
   $comp.$WEAPPS_COMP = $comp  // TODO $comp will replaced to this.$WEAPPS_COMP
   $comp.computed = createComputed(computedFuncs, $comp)
@@ -187,13 +182,30 @@ export function create$comp(w) {
   $comp.state = observable(stateFn.call($comp))  // May depend on this.props.data.xxx
 
 
+  $comp.__internal__.$w = new Proxy(
+    baseAPI,
+    {
+      get(target, prop) {
+        if(prop === '$comp'){
+          return $comp
+        }
+        // 尝试代理组件级别组件实例
+        const childWidget = $comp.widgets?.[prop];
+        if (childWidget) {
+          return childWidget._userWidget;
+        }
+        return target[prop]
+      },
+    },
+  );
+
   return $comp
 }
 
 function createObservers(props) {
   return props.reduce((observers, prop) => {
     observers[prop] = function (newVal) {
-      const data = this.getWeAppInst().props.data
+      const data = this._getInstance().props.data
       if (!deepEqual(data[prop], newVal)) {
         data[prop] = newVal
       } else {
@@ -240,7 +252,7 @@ function createPropEvents(events, mpInst) {
           mpInst.setData({ value: evt.getValueFromEvent({ detail: evtDetail }) })
         }
         mpInst.triggerEvent(evt.name, evtDetail)
-        mpInst.getWeAppInst().node._eventListeners.emit(evt.name, evtDetail)
+        mpInst._getInstance().node._eventListeners.emit(evt.name, evtDetail)
       }
     }
   })