@cloudbase/lowcode-builder 1.7.1 → 1.8.0

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

@@ -1,5 +1,5 @@
 import { observable } from 'mobx';
-import { createComputed, createEventHandlers, checkAuth } from './util';
+import { createComputed, createEventHandlers, checkAuth, getMpEventHandlerName, generateDatasetQuery, generateEventFlows } from './util';
 import { createWidgets, createInitData, disposeWidget, ID_SEPARATOR, getWidget } from './widget';
 import mergeRenderer from './merge-renderer';
 import {
@@ -10,27 +10,27 @@ import {
   setConfig,
 } from '../datasources/index';
 import { runWatchers } from './watch';
-import { getMpEventHandlerName } from './util';
-import { $w as baseAPI } from '../app/app-global';
+import { $w as baseAPI } from '../app/weapps-api'
+import { Event } from './event-emitter'
 
 const wxApp = getApp()
 
-export function createPage(
+export function createPage({
+  app,
   id,
-  uuid,
-  title,
   widgetProps,
   index = {},
   lifecycle,
-  pageState,
-  pageComputed,
+  state,
+  computed,
   evtListeners,
   dataBinds,
-  app,
-  handler,
+  handlers,
+  query: datasetQuery = {},
+  eventFlows = [],
   pageContext = {},
-  pageAttributes,
-) {
+  pageAttributes = {},
+}) {
   const evtHandlers = createEventHandlers(evtListeners);
 
   function extractLifecycles() {
@@ -69,7 +69,7 @@ export function createPage(
     // 更新设备信息 窗口信息
     result['onResize'] = (res) => {
       let device = baseAPI.device;
-      if(!device) {
+      if (!device) {
         return
       }
       const width = res?.size?.windowWidth;
@@ -89,6 +89,7 @@ export function createPage(
     data: createInitData(widgetProps, dataBinds),
     lifetimes: {
       attached() {
+        this._disposers = []
         const $page = this._getInstance();
         this._pageActive = true;
         /**
@@ -107,7 +108,7 @@ export function createPage(
           const widget = getWidget($page.widgets, e.target.id);
           widget._methods = {};
         };
-        this._disposers = this.initMergeRenderer($page.widgets);
+        this._disposers.push( ...this.initMergeRenderer($page.widgets));
       },
       detached() {
         const $page = this._getInstance();
@@ -120,8 +121,8 @@ export function createPage(
     },
     pageLifetimes: {
       // 组件所在页面的生命周期函数，定义下给运营平台上报用
-      show: function () {},
-      hide: function () {},
+      show: function () { },
+      hide: function () { },
     },
     methods: {
       _pageActive: true,
@@ -133,20 +134,31 @@ export function createPage(
       ...evtHandlers,
       ...mergeRenderer,
       async beforePageCustomLaunch(query) {
-        if(!this._beforePageCustomLaunchPromise){
-          this._beforePageCustomLaunchPromise = new Promise(async (resolve)=>{
+        if (!this._beforePageCustomLaunchPromise) {
+          this._beforePageCustomLaunchPromise = new Promise(async (resolve) => {
             await wxApp.globaldata?._beforePageCustomLaunchPromise
             const $page = this._getInstance();
-            if(query){
+            if (query) {
               EXTRA_API.setParams($page.uuid, query);
             }
-            if(await checkAuth(app, app.id, $page)){
+            if (await checkAuth(app, app.id, $page)) {
               this.setData({
                 weDaHasLogin: true,
               });
               createStateDataSourceVar($page.uuid, generateParamsParser({ app, $page }));
-              resolve()
             }
+            // eslint-disable-next-line no-restricted-syntax
+            for (const queryId in $page.dataset?.query||{}) {
+              if ($page.dataset.query[queryId]?._schema?.trigger === 'auto') {
+                try {
+                  $page.dataset.query[queryId].trigger();
+                  this._disposers.push($page.dataset.query[queryId].destroy)
+                } catch (e) {
+                  console.error(`query ${queryId} 初始化失败：`, e);
+                }
+              }
+            }
+            resolve()
           })
         }
         return this._beforePageCustomLaunchPromise
@@ -164,7 +176,7 @@ export function createPage(
 
         const hook = lifecycle.onLoad || lifecycle.onPageLoad;
         await hook?.call?.($page, this._query);
-        this.invokeEventHandler(id, 'load', { detail: { query: this._query } });
+        this._invokeEventHandler('load', { query: this._query });
       },
       async onReady() {
         const $page = this._getInstance();
@@ -174,7 +186,7 @@ export function createPage(
         const hook = lifecycle.onReady || lifecycle.onPageReady;
         await hook?.call?.($page);
 
-        this.invokeEventHandler(id, 'ready');
+        this._invokeEventHandler(id, 'ready');
       },
       onUnload() {
         const $page = this._getInstance();
@@ -182,7 +194,7 @@ export function createPage(
         const hook = lifecycle.onUnload || lifecycle.onPageUnload;
         hook?.call?.($page);
 
-        this.invokeEventHandler(id, 'unload');
+        this._invokeEventHandler('unload');
       },
       async onShow() {
         const $page = this._getInstance();
@@ -195,21 +207,25 @@ export function createPage(
 
         const hook = lifecycle.onShow || lifecycle.onPageShow;
         await hook?.call?.($page);
-        this.invokeEventHandler(id, 'show');
+        this._invokeEventHandler('show');
       },
       onHide() {
         const $page = this._getInstance();
         const hook = lifecycle.onHide || lifecycle.onPageHide;
         hook?.call?.($page);
         this._pageActive = false;
-        $page.__internal__.active = this._pageActive;
 
         // 触发页面节点事件
-        this.invokeEventHandler(id, 'hide');
+        this._invokeEventHandler('hide');
+        $page.__internal__.active = this._pageActive;
       },
-      invokeEventHandler(id, triggerName, params = {}) {
+      _invokeEventHandler(triggerName, params = {}) {
         const keyName = getMpEventHandlerName(id, triggerName);
-        typeof evtHandlers?.[keyName] === 'function' && evtHandlers[keyName].call(this, params);
+        const event = new Event({
+          type: triggerName,
+          detail: params
+        })
+        return this[keyName]?.call?.(this, event)
       },
       _getInstance() {
         let $page = this.$WEAPPS_PAGE;
@@ -218,20 +234,23 @@ export function createPage(
         }
         Object.assign(pageContext, {
           id,
-          uuid,
-          state: observable(pageState),
+          state: observable(state),
           path: this.route,
-          label: title,
           widgets: {},
         });
         $page = pageContext;
         this.$WEAPPS_PAGE = $page;
-        $page.handler = Object.keys(handler).reduce((result, key) => {
-          result[key] = handler[key].bind($page);
+        $page.handler = Object.keys(handlers).reduce((result, key) => {
+          result[key] = handlers[key].bind($page);
           return result;
         }, {});
-        $page.computed = createComputed(pageComputed, $page);
+        $page.computed = createComputed(computed, $page);
         let dataset = createDataset($page.uuid);
+        dataset.query = generateDatasetQuery(datasetQuery, {
+          $w: $page.__internal__.$w,
+          $app: app,
+          $page,
+        })
         $page.dataset = dataset;
         $page.state.dataset = dataset;
         $page.setState = (userSetState) => {
@@ -240,7 +259,7 @@ export function createPage(
           });
         };
 
-        const { widgets, rootWidget } = createWidgets(widgetProps, dataBinds, this,  $page.widgets);
+        const { widgets, rootWidget } = createWidgets(widgetProps, dataBinds, this, $page.widgets);
         $page.widgets = widgets
         $page._rootWidget = rootWidget;
 
@@ -270,6 +289,11 @@ export function createPage(
           }
           return readonlyMap[method](params);
         };
+        $page.__internal__.eventFlows = generateEventFlows(eventFlows, {
+          $w: $page.__internal__.$w,
+          $app: app,
+          $page,
+        });
 
         return $page;
       },

package/template/mp/page/api.js

@@ -3,7 +3,10 @@ import { $w as baseAPI } from '<%= subLevelPath %>../../app/weapps-api'
 export const $page = {
   __internal__: {
     active: false
-  }
+  },
+  uuid: '<%= uuid %>',
+  label: '<%= label %>',
+
 };
 
 export const $w = new Proxy(
@@ -16,6 +19,17 @@ export const $w = new Proxy(
       if (prop === '$page' || prop === 'page') {
         return $page;
       }
+
+      // 代理页面级 query
+      if ($page.dataset?.query?.[prop]) {
+        return $page.dataset.query[prop];
+      }
+
+      // 代理页面 flow
+      if ($page.__internal__.eventFlows?.[prop]) {
+        return $page.__internal__.eventFlows[prop];
+      }
+
       // 尝试代理页面级别组件实例
       const pageWidget = $page.widgets?.[prop];
       if (pageWidget) {

package/template/mp/page/index.js

@@ -3,34 +3,87 @@ import { createPage } from '<%= subLevelPath %>../../common/weapp-page'
 import { concatClassList, px2rpx } from '<%= subLevelPath %>../../common/style'
 import { app, $app } from '<%= subLevelPath %>../../app/weapps-api'
 import { $$<%= pageName %> as handlers } from '../../app/handlers'
-<%= importor.lifecycle? `import lifecyle from '../../lowcode/${pageName}/lifecycle'` : "const lifecyle = {}" %>
+<%= importor.lifecycle? `import lifecycle from '../../lowcode/${pageName}/lifecycle'` : "const lifecycle = {}" %>
 <%= importor.state? `import state from '../../lowcode/${pageName}/state'` : "const state = {}" %>
 <%= importor.computed? `import computed from '../../lowcode/${pageName}/computed'` : "const computed = {}" %>
-import { $page } from './api'
+import { $page, $w } from './api'
 import { widgetProps } from './data'
 
+<% function printBoundData(boundData={}) {
+  const list = []
+  Object.entries(boundData).map(([prop, bindMeta])=>{
+    const str = `'${prop}': ($page, lists, forItems, event, $context, $w) => {${bindMeta.imports} return(
+      ${bindMeta.expression === '' ? 'undefined': bindMeta.expression}
+    )}`
+    list.push(str)
+  })
+  return list.join(',')
+}%>
+
+<% function printEventHandler(eventHandlers) {
+  Object.entries(eventHandlers).map(([handlerName, listeners])=>{
+    print(`"${handlerName}": [
+      ${listeners.map(l=>{
+        let handler = 'undefined'
+        switch(l.type){
+          case 'rematch': {
+            handler = `handlers.${l.handler}`
+            break;
+          }
+          case 'material': {
+            handler = `function(...args) { return require('../../materials/${l.handlerModule}/actions/${l.handler}/index').default(...args) }`
+            break;
+          }
+          default: {
+            handler = l.handler
+          }
+        }
+        return `{
+          key: '${l.key||''}',
+          sourceKey: '${ l.sourceKey||"" }',
+          handler: ${handler},
+          data: ${stringifyObj(l.data||{}, {depth: null})},
+          boundData: {${printBoundData(l.boundData)}}
+        }`
+      }).join(',')}
+    ],`)
+  })
+}%>
+
 /** widget event listeners **/
-const evtListeners = {<% Object.entries(eventHanlders).map(([handlerName, listeners])=>{%>
-  <%= handlerName%>: [
-    <%listeners.map(l=> { %>{
-      key: '<%= l.key %>',
-      sourceKey: '<%= l.sourceKey %>',
-      handler: <% if (l.type === 'rematch') {%> handlers.<%= l.handler %> <%} else if (l.type == 'material') {%> function(...args) { return require('../../materials/<%= l.handlerModule %>/actions/<%= l.handler %>/index').default(...args) } <%} else {%> <%= l.handler %> <%} %>,
-      data: <%= stringifyObj(l.data, {depth: null}) %>,
-      boundData: {<% Object.entries(l.boundData).map(([prop, bindMeta])=>{%>'<%= prop %>':($page, lists, forItems, event, $context, $w) => {<%= bindMeta.imports %> return (
-        <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
-      )},
-        <%}) %>}
-    },<%})%>
-  ],<%})%>
-}
+const evtListeners = {<% printEventHandler(eventHandlers) %>}
 
 const dataBinds = {<% Object.entries(dataBinds).map(([id, widgetBinds])=>{%>
-  <%= id %>: { <% Object.entries(widgetBinds).map(([prop, bindMeta]) => { %>
-    "<%= prop %>": function ($page, lists, forItems, event, $context, $w) {<%= bindMeta.imports %>  return (
-      <%= bindMeta.expression === '' ? 'undefined': bindMeta.expression %>
-    ); },<% }) %>
+  <%= id %>: { <%= printBoundData(widgetBinds) %>
   },<%}) %>
 }
 
-createPage('<%= pageName %>', '<%= pageUUID %>','<%= pageTitle %>', widgetProps, {}, lifecyle, state, computed, evtListeners, dataBinds, app, handlers, $page, <%= pageAttributes?JSON.stringify(pageAttributes):'{}' %>)
+const query = {<% Object.entries(query).map(([id, item])=>{%>
+  <%= id %>: { <% const {dataBinds={}, eventHandlers, ...rest } = item %>
+    ...(<%= stringifyObj(rest, {depth: null}) %>),
+    dataBinds: {<%= printBoundData(dataBinds) %>},
+    eventHandlers: {<% printEventHandler(eventHandlers) %>}
+  },<%}) %>
+}
+
+const eventFlows = [<% eventFlows.map(flow => {%> { <% const { eventHandlers, ...rest } = flow %>
+  ...(<%= stringifyObj(rest, {depth: null}) %>),
+  eventHandlers: {<% printEventHandler(eventHandlers) %>}
+},<%}) %>
+]
+
+createPage({
+  app,
+  pageContext: $page,
+  id: '<%= pageName %>',
+  widgetProps,
+  lifecycle,
+  state,
+  computed,
+  evtListeners,
+  dataBinds,
+  handlers,
+  query,
+  eventFlows,
+  pageAttributes: <%= pageAttributes? stringifyObj(pageAttributes, {depth: null}):'{}' %>
+})

package/template/mp/common/event-emitter.js

@@ -1,49 +0,0 @@
-function checkFunc (listener) {
-  if (!listener instanceof Function) {
-    throw new Error(
-      " The listener argument must be of type Function. "
-    );
-  }
-}
-
-export default class EventEmitter {
-  constructor () {
-    this.listeners = {};
-  }
-
-  on (eventName, listener) {
-    checkFunc(listener)
-    let listeners = this.listeners[eventName]
-    if (!listeners) {
-      this.listeners[eventName] = [listener]
-    }
-    else {
-      listeners.push(listener)
-    }
-  }
-
-  off (eventName, listener) {
-    let listeners = this.listeners[eventName]
-    if (listeners && listeners.length) {
-      const index = listeners.indexOf(listener)
-      index > -1 && listeners.splice(index, 1)
-    }
-  }
-
-
-  emit (eventName, ...args) {
-    let listeners = this.listeners[eventName] || []
-    listeners.forEach(fn => {
-        try {
-          fn.call(this, ...args)
-        } catch (err) {
-          console.error(err);
-        }
-      }
-    );
-  }
-
-  clear () {
-    this.listeners = {};
-  }
-}

package/template/mp/common/jwt.js

@@ -1,106 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
-var b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/;
-exports.weBtoa = function (string) {
-  string = String(string);
-  var bitmap,
-    a,
-    b,
-    c,
-    result = "",
-    i = 0,
-    rest = string.length % 3;
-  for (; i < string.length; ) {
-    if (
-      (a = string.charCodeAt(i++)) > 255 ||
-      (b = string.charCodeAt(i++)) > 255 ||
-      (c = string.charCodeAt(i++)) > 255
-    )
-      throw new TypeError(
-        "Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range."
-      );
-    bitmap = (a << 16) | (b << 8) | c;
-    result +=
-      b64.charAt((bitmap >> 18) & 63) +
-      b64.charAt((bitmap >> 12) & 63) +
-      b64.charAt((bitmap >> 6) & 63) +
-      b64.charAt(bitmap & 63);
-  }
-  return rest ? result.slice(0, rest - 3) + "===".substring(rest) : result;
-};
-exports.weAtob = function (string) {
-  string = String(string).replace(/[\t\n\f\r ]+/g, "");
-  if (!b64re.test(string))
-    throw new TypeError(
-      "Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."
-    );
-  string += "==".slice(2 - (string.length & 3));
-  var bitmap,
-    result = "",
-    r1,
-    r2,
-    i = 0;
-  for (; i < string.length; ) {
-    bitmap =
-      (b64.indexOf(string.charAt(i++)) << 18) |
-      (b64.indexOf(string.charAt(i++)) << 12) |
-      ((r1 = b64.indexOf(string.charAt(i++))) << 6) |
-      (r2 = b64.indexOf(string.charAt(i++)));
-    result +=
-      r1 === 64
-        ? String.fromCharCode((bitmap >> 16) & 255)
-        : r2 === 64
-        ? String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255)
-        : String.fromCharCode(
-            (bitmap >> 16) & 255,
-            (bitmap >> 8) & 255,
-            bitmap & 255
-          );
-  }
-  return result;
-};
-function b64DecodeUnicode(str) {
-  return decodeURIComponent(
-    exports.weAtob(str).replace(/(.)/g, function (p) {
-      var code = p.charCodeAt(0).toString(16).toUpperCase();
-      if (code.length < 2) {
-        code = "0" + code;
-      }
-      return "%" + code;
-    })
-  );
-}
-function base64_url_decode(str) {
-  var output = str.replace(/-/g, "+").replace(/_/g, "/");
-  switch (output.length % 4) {
-    case 0:
-      break;
-    case 2:
-      output += "==";
-      break;
-    case 3:
-      output += "=";
-      break;
-    default:
-      throw "Illegal base64url string!";
-  }
-  try {
-    return b64DecodeUnicode(output);
-  } catch (err) {
-    return exports.weAtob(output);
-  }
-}
-function weappJwtDecode(token, options) {
-  if (typeof token !== "string") {
-    throw "Invalid token specified";
-  }
-  options = options || {};
-  var pos = options.header === true ? 0 : 1;
-  try {
-    return JSON.parse(base64_url_decode(token.split(".")[pos]));
-  } catch (e) {
-    throw "Invalid token specified: " + e.message;
-  }
-}
-exports.default = weappJwtDecode;

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

@@ -1,76 +0,0 @@
-import { urlJoinParams } from './url'
-import { promisifyAll } from 'miniprogram-api-promise'
-
-function createNavigatorFn(fnName) {
-  return function ({ pageId, packageName, params, mode='', events, success, fail, complete }) {
-    let url;
-    if(mode == 'plugin'){
-      url = `plugin://${packageName}/${pageId}`
-    } else if(mode ==='web'){
-      console.warn(`${fnName} url can only be used in h5 build`);
-      return;
-    } else {
-      pageId = pageId ? pageId.replace(/^(\.)?\//,'') : pageId;
-      url = packageName
-      ? `/${packageName}/pages/${pageId}/index`
-        : `/pages/${pageId}/index`
-    }
-
-    if (fnName === 'navigateTo') {
-      navigateToFn(urlJoinParams(url, params), { events, success, fail, complete});
-      return;
-    }
-
-    wx[fnName]({
-      url: urlJoinParams(url, params),
-      events,
-      success,
-      fail,
-      complete
-    })
-  }
-}
-
-/**
- * 页面堆栈10以内使用wx.navigateTo，超过10则使用wx.redirectTo
- * @param url
- * @param param1
- * @returns
- */
- function navigateToFn(url, { events, success, fail, complete}) {
-  const pages = getCurrentPages();
-  if(pages && pages.length >= 10) {
-    wx.redirectTo({
-      url,
-      success,
-      fail,
-      complete
-    });
-    return;
-  }
-
-  wx.navigateTo({
-    url,
-    // @types/weixin-app@2.9.3没有events的定义，但实际上官方文档有：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
-    // @ts-ignore
-    events,
-    success,
-    fail,
-    complete
-  });
-}
-
-const navigateTo = createNavigatorFn('navigateTo')
-const reLaunch = createNavigatorFn('reLaunch')
-const redirectTo = createNavigatorFn('redirectTo')
-
-export const wxp = {}
-promisifyAll(wx, wxp)
-
-export default {
-  ...wxp,
-  navigateTo,
-  reLaunch,
-  redirectTo,
-  auth: undefined
-}