@aiot-toolkit/aiotpack 2.0.6-beta.8 → 2.1.0-prender.1

package/lib/prerender/PrerenderVM.js

@@ -0,0 +1,677 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vm = _interopRequireDefault(require("vm"));
+var _sharedUtils = require("@aiot-toolkit/shared-utils");
+var _StyleSerializer = require("./StyleSerializer");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** 预渲染 DOM 节点 */
+
+/** 绑定标记：文本/属性绑定 */
+
+/** 循环标记 */
+
+/** 事件标记 */
+
+/** 组件定义 */
+
+/**
+ * PrerenderVM - 在 Node.js VM 沙箱中执行编译后的模板函数，收集 DOM 树
+ */
+class PrerenderVM {
+  components = (() => new Map())();
+  styleMap = (() => new Map())();
+  bindCounter = 0;
+  styleSerializer = (() => new _StyleSerializer.StyleSerializer())();
+  accessedKeys = [];
+
+  /** 创建 data Proxy，拦截访问并返回绑定标记（支持嵌套和数组） */
+  createDataProxy(data, parentPath) {
+    if (!parentPath) this.accessedKeys = [];
+    const accessedKeys = this.accessedKeys;
+    const self = this;
+    return new Proxy(data, {
+      get(target, prop) {
+        if (typeof prop === 'symbol') return undefined;
+        if (prop === '__raw__') return target;
+        if (prop === '$item' || prop === '$idx') return `{{${prop}}}`;
+        const fullPath = parentPath ? `${parentPath}.${prop}` : prop;
+        accessedKeys.push(fullPath);
+        if (!(prop in target)) {
+          console.warn(`prerender: access undefined value in data! key: ${fullPath}`);
+          return self.createBindingMarker(fullPath);
+        }
+        const val = target[prop];
+        // Pass through functions (e.g. $t, $tc, $r)
+        if (typeof val === 'function') {
+          return val;
+        }
+        // Nested object or array: return recursive Proxy
+        if (val !== null && typeof val === 'object') {
+          return self.createDataProxy(val, fullPath);
+        }
+        // Include the static value in the binding marker for SSR snapshot
+        return self.createBindingMarker(fullPath, val);
+      }
+    });
+  }
+
+  /** 获取已访问的 key 列表 */
+  getAccessedKeys() {
+    return [...this.accessedKeys];
+  }
+
+  /** Track binding markers accessed during a function call */
+  _bindingAccess = [];
+
+  /** Create a binding marker with toString for string concatenation */
+  createBindingMarker(key, staticValue) {
+    const self = this;
+    const marker = {
+      $value: key,
+      bind: 1,
+      toString: () => {
+        self._bindingAccess.push(key);
+        // Return static value for string concatenation (enables correct snapshot)
+        if (staticValue !== undefined) return String(staticValue);
+        return `{{${key}}}`;
+      }
+    };
+    if (staticValue !== undefined) {
+      marker._staticValue = staticValue;
+    }
+    return marker;
+  }
+
+  /** 文本绑定标记 */
+  static createTextBinding(key) {
+    return {
+      $value: key,
+      bind: 1
+    };
+  }
+
+  /** 属性绑定标记 */
+  static createAttrBinding(attr, key) {
+    return {
+      [`$${attr}`]: key,
+      bind: 1
+    };
+  }
+
+  /** 循环标记 */
+  static createRepeatMarker(listName) {
+    return {
+      $repeat: listName,
+      repeat: []
+    };
+  }
+
+  /** 事件标记 */
+  static createEventMarker(event, handler) {
+    return {
+      [`$${event}`]: handler
+    };
+  }
+
+  /**
+   * 执行编译后的 JS，收集组件定义
+   */
+  execute(jsCode, onLog) {
+    this.components.clear();
+    this.styleMap.clear();
+    this.bindCounter = 0;
+    const bootstrapName = [];
+    const sandbox = this.createSandbox(name => {
+      bootstrapName.push(name);
+    });
+
+    // 编译后的 JS 被 WrapPlugin 包裹为 export default function(global,...){...}
+    // 去掉 export default 包裹，直接执行内部代码
+    const unwrapped = this.unwrapCode(jsCode);
+    try {
+      const script = new _vm.default.Script(unwrapped, {
+        filename: 'prerender.js'
+      });
+      script.runInNewContext(sandbox, {
+        timeout: 5000
+      });
+    } catch (e) {
+      onLog?.([{
+        level: _sharedUtils.Loglevel.WARN,
+        message: [`prerender: VM execution error - ${e?.message || e}`]
+      }]);
+      return {
+        tree: null,
+        styles: {}
+      };
+    }
+
+    // 找到 bootstrap 的主组件
+    let mainComp;
+    const mainName = bootstrapName[bootstrapName.length - 1];
+    if (mainName) {
+      mainComp = this.components.get(mainName);
+    }
+
+    // Vela format: $app_exports$['entry'] sets template/style on $app_exports$.default
+    if (!mainComp?.template && typeof sandbox.$app_exports$?.entry === 'function') {
+      const velaExports = {
+        default: {}
+      };
+      try {
+        sandbox.$app_exports$.entry(velaExports);
+      } catch {/* ignore */}
+      const comp = velaExports.default;
+      if (comp?.template) {
+        mainComp = comp;
+        if (comp.style) {
+          this.collectStyles(comp.style);
+          // Vela styles may not have @info/styleObjectId, assign default
+          if (this.styleMap.size === 0) {
+            this.styleMap.set(0, comp.style);
+          }
+        }
+      }
+    }
+    if (!mainComp?.template) {
+      // app.ux sets style directly on $app_exports$.default.style (no $app_define$)
+      if (this.styleMap.size === 0 && sandbox.$app_exports$?.default?.style) {
+        const appStyle = sandbox.$app_exports$.default.style;
+        this.collectStyles(appStyle);
+        if (this.styleMap.size === 0) {
+          this.styleMap.set(0, appStyle);
+        }
+      }
+      // Still return collected styles even without template (e.g. app.ux)
+      const styles = {};
+      for (const [id, s] of this.styleMap) {
+        styles[id] = this.normalizeStyleSheet(s);
+      }
+      return {
+        tree: null,
+        styles
+      };
+    }
+
+    // 构建 mock VM 实例
+    const mockVm = this.createMockVM(mainComp);
+
+    // 执行模板函数
+    const tree = this.executeTemplate(mainComp.template, mockVm);
+
+    // 收集样式
+    const styles = {};
+    for (const [id, s] of this.styleMap) {
+      styles[id] = this.normalizeStyleSheet(s);
+    }
+    return {
+      tree,
+      styles
+    };
+  }
+  unwrapCode(code) {
+    // 去掉 export default function(global, globalThis, window, $app_exports$, $app_evaluate$){...}
+    // 新格式 $app_define$(...) 不需要 unwrap，直接返回
+    if (code.trimStart().startsWith('$app_define$')) {
+      return code;
+    }
+    const match = code.match(/export\s+default\s+function\s*\([^)]*\)\s*\{([\s\S]*)\}\s*$/);
+    if (match) {
+      return match[1];
+    }
+    return code;
+  }
+  createSandbox(onBootstrap) {
+    const self = this;
+    const sandbox = {
+      console,
+      setTimeout: () => {},
+      setInterval: () => {},
+      clearTimeout: () => {},
+      clearInterval: () => {},
+      global: {},
+      globalThis: {},
+      window: {},
+      exports: {},
+      module: {
+        exports: {}
+      },
+      require: () => ({}),
+      $app_exports$: {},
+      $app_evaluate$: () => {},
+      $app_require$: () => ({}),
+      $app_define$: (name, _deps, factory) => {
+        const mod = {
+          exports: {}
+        };
+        try {
+          factory(sandbox.$app_require$, mod.exports, mod);
+        } catch {
+          // ignore factory errors
+        }
+        let comp = mod.exports.default || mod.exports;
+
+        // If the export is a page factory function (old format), invoke it to get the component
+        if (typeof comp === 'function') {
+          const pageExports = {
+            default: {}
+          };
+          try {
+            comp(pageExports);
+          } catch {
+            // ignore
+          }
+          comp = pageExports.default || pageExports;
+        }
+        self.components.set(name, comp);
+
+        // 收集 style 中的 styleObjectId
+        if (comp.style) {
+          self.collectStyles(comp.style);
+        }
+      },
+      $app_bootstrap$: name => {
+        onBootstrap(name);
+      },
+      aiot: {
+        __ce__: (type, opts, children) => self.createNode(type, opts, children),
+        __cc__: (type, opts, children) => self.createNode(type, opts, children, true),
+        __ci__: (opts, renderFn) => self.createConditionalNode(opts, renderFn),
+        __cf__: (opts, renderFn) => self.createForNode(opts, renderFn),
+        __cb__: opts => self.createBlockNode(opts)
+      }
+    };
+
+    // global 上也挂载 aiot
+    sandbox.global.aiot = sandbox.aiot;
+    sandbox.global.$app_require$ = sandbox.$app_require$;
+    sandbox.global.setTimeout = sandbox.setTimeout;
+    sandbox.global.setInterval = sandbox.setInterval;
+    sandbox.global.clearTimeout = sandbox.clearTimeout;
+    sandbox.global.clearInterval = sandbox.clearInterval;
+    return sandbox;
+  }
+  collectStyles(style) {
+    if (Array.isArray(style)) {
+      for (const item of style) {
+        if (Array.isArray(item) && item.length >= 2) {
+          // 格式: [[[selectorType, selectorName]], {prop: value}]
+          // 不直接用，后面从 @info 中取 styleObjectId
+        }
+      }
+      // 查找 @info
+      const info = style.find(item => !Array.isArray(item) && item?.['@info']);
+      if (info?.['@info']?.styleObjectId != null) {
+        this.styleMap.set(info['@info'].styleObjectId, style);
+      } else if (style.length > 0) {
+        // Vela format: no @info, use default styleObjectId 0
+        if (this.styleMap.size === 0) {
+          this.styleMap.set(0, style);
+        }
+      }
+    } else if (style?.['@info']?.styleObjectId != null) {
+      this.styleMap.set(style['@info'].styleObjectId, style);
+    }
+  }
+  normalizeStyleSheet(style) {
+    if (Array.isArray(style)) {
+      return this.styleSerializer.parseStyleNodes(style);
+    }
+    return {};
+  }
+  createMockVM(comp) {
+    let data = {};
+
+    // 获取初始数据
+    if (typeof comp.data === 'function') {
+      try {
+        data = comp.data() || {};
+      } catch {/* ignore */}
+    } else if (comp.data) {
+      data = {
+        ...comp.data
+      };
+    }
+    if (comp.private) {
+      data = {
+        ...data,
+        ...comp.private
+      };
+    }
+
+    // Add common VM helper methods that return binding markers when called
+    const self = this;
+    const bindingFn = function () {
+      const expr = `$t(${JSON.stringify((arguments.length <= 0 ? undefined : arguments[0]) ?? '')})`;
+      return self.createBindingMarker(expr);
+    };
+    for (const method of ['$t', '$tc', '$r', '$set', '$delete', '$emit', '$dispatch', '$broadcast', '$watch', '$forceUpdate']) {
+      if (!(method in data)) {
+        data[method] = function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          const expr = `${method}(${args.map(a => JSON.stringify(a)).join(',')})`;
+          return self.createBindingMarker(expr);
+        };
+      }
+    }
+
+    // 用 Proxy 拦截数据访问，返回绑定标记
+    return this.createDataProxy(data);
+  }
+  createNode(type, opts, children, isComponent) {
+    const node = {
+      type
+    };
+    const vmOpts = opts?.__opts__ || {};
+
+    // 处理 class
+    if (vmOpts.classList?.length) {
+      node.class = vmOpts.classList.join(' ');
+    }
+
+    // 处理 style（内联样式）
+    if (vmOpts.style) {
+      node.style = typeof vmOpts.style === 'string' ? this.parseInlineStyle(vmOpts.style) : vmOpts.style;
+    }
+
+    // For custom components, capture props for attr
+    if (isComponent) {
+      const skipKeys = new Set(['classList', 'style', 'events', 'attr', '__vm__', 'is', 'remotewidget']);
+      const props = {};
+      for (const [key, val] of Object.entries(vmOpts)) {
+        if (skipKeys.has(key)) continue;
+        if (typeof val === 'function') {
+          props[`$${key}`] = val.toString().replace(/_vm_\./g, 'this.');
+        } else if (val !== undefined) {
+          props[key] = val;
+        }
+      }
+      if (Object.keys(props).length > 0) {
+        node.attr = {
+          ...(node.attr || {}),
+          ...props
+        };
+      }
+      node.bind = 3;
+    }
+
+    // 处理 attr
+    if (vmOpts.attr) {
+      node.attr = {};
+      for (const [key, val] of Object.entries(vmOpts.attr)) {
+        if (typeof val === 'function') {
+          // 动态绑定 - call the function to get the binding marker with static value
+          try {
+            this._bindingAccess = [];
+            const result = val();
+            if (result && typeof result === 'object' && result.bind === 1) {
+              // Pure binding marker (e.g. vm.appName) - no static value needed
+              node.attr[`$${key}`] = result.$value;
+            } else if (this._bindingAccess.length > 0) {
+              // String result from concatenation involving bindings (e.g. vm.temp + "°")
+              // The result string IS the static snapshot value
+              node.attr[`$${key}`] = this.extractBindingExpression(val);
+              node.attr[key] = result;
+            } else {
+              node.attr[`$${key}`] = this.extractBindingExpression(val);
+            }
+          } catch {
+            node.attr[`$${key}`] = this.extractBindingExpression(val);
+          }
+          if (!node.bind) {
+            this.bindCounter++;
+            node.bind = this.bindCounter;
+          }
+        } else {
+          node.attr[key] = val;
+        }
+      }
+    }
+
+    // Vela format: value/type/etc. may be directly on __opts__ instead of inside attr
+    for (const key of ['value', 'type', 'src', 'href', 'id', 'show', 'if']) {
+      if (key in vmOpts && vmOpts[key] !== undefined) {
+        if (!node.attr) node.attr = {};
+        const val = vmOpts[key];
+        if (typeof val === 'function') {
+          try {
+            this._bindingAccess = [];
+            const result = val();
+            if (result && typeof result === 'object' && result.bind === 1) {
+              node.attr[`$${key}`] = result.$value;
+              if (!node.bind) {
+                this.bindCounter++;
+                node.bind = this.bindCounter;
+              }
+            } else if (this._bindingAccess.length > 0) {
+              // String from concatenation with bindings - store expression only
+              node.attr[`$${key}`] = this.extractBindingExpression(val);
+              if (!node.bind) {
+                this.bindCounter++;
+                node.bind = this.bindCounter;
+              }
+            } else {
+              node.attr[key] = result;
+            }
+          } catch {
+            node.attr[key] = val;
+          }
+        } else {
+          node.attr[key] = val;
+        }
+      }
+    }
+
+    // 处理事件 (Android format: vmOpts.on, Vela format: vmOpts.events)
+    const eventsObj = vmOpts.on || vmOpts.events;
+    if (eventsObj) {
+      node.events = {};
+      for (const [event, handler] of Object.entries(eventsObj)) {
+        if (typeof handler === 'function') {
+          node.events[`$${event}`] = handler.toString();
+        } else {
+          node.events[event] = String(handler);
+        }
+      }
+    }
+
+    // 处理 import（自定义组件）
+    if (vmOpts.import) {
+      node.import = vmOpts.import;
+    }
+
+    // 处理 children
+    if (children?.length) {
+      node.children = children.flat().filter(Boolean);
+    }
+    return node;
+  }
+  createConditionalNode(opts, renderFn) {
+    // __ci__ 是条件渲染 - output $shown format (vivo style)
+    const shownFn = opts?.__opts__?.shown;
+    const actualRenderFn = renderFn || opts?.__render__;
+    if (typeof shownFn === 'function' && typeof actualRenderFn === 'function') {
+      const fnStr = shownFn.toString();
+      const varMatch = fnStr.match(/_vm_\.(\w+)/);
+      const shownVar = varMatch ? varMatch[1] : fnStr;
+      let shownValue = false;
+      try {
+        shownValue = !!shownFn();
+      } catch {}
+      try {
+        const rendered = actualRenderFn();
+        const children = Array.isArray(rendered) ? rendered.flat().filter(Boolean) : rendered ? [rendered] : [];
+        if (children.length > 0 && children[0]) {
+          const firstChild = children[0];
+          firstChild['$shown'] = shownVar;
+          firstChild['shown'] = shownValue;
+          if (!firstChild.bind) {
+            this.bindCounter++;
+            firstChild.bind = this.bindCounter;
+          }
+          return children;
+        }
+      } catch {}
+    }
+    if (typeof actualRenderFn === 'function') {
+      try {
+        const children = actualRenderFn();
+        return Array.isArray(children) ? children.flat().filter(Boolean) : children;
+      } catch {}
+    }
+    return null;
+  }
+  createForNode(opts, externalRenderFn) {
+    // __cf__ 是循环渲染 - output $repeat template (vivo style) + repeat_items snapshot
+    const expFn = opts?.__opts__?.exp;
+    const actualRenderFn = externalRenderFn || opts.__render__;
+    if (typeof actualRenderFn !== 'function') {
+      return null;
+    }
+
+    // Get the list expression name (e.g. "activities", "shortcuts")
+    let listName = '';
+    let rawListData = null;
+    if (typeof expFn === 'function') {
+      try {
+        const expResult = expFn();
+        const raw = expResult?.__raw__ || expResult;
+        if (Array.isArray(raw)) {
+          rawListData = raw;
+        }
+      } catch {/* ignore */}
+      listName = this.extractBindingExpression(expFn);
+    }
+
+    // Create $item proxy that returns binding markers for $item.xxx access
+    const self = this;
+    const itemProxy = new Proxy({}, {
+      get: (_target, prop) => {
+        if (typeof prop === 'symbol') return undefined;
+        return self.createBindingMarker(`$item.${prop}`);
+      }
+    });
+    try {
+      const children = actualRenderFn(0, itemProxy);
+      if (Array.isArray(children) && children.length > 0) {
+        const firstChild = children[0];
+        if (firstChild && typeof firstChild === 'object') {
+          firstChild.$repeat = listName || '$repeat';
+          firstChild.repeat = [];
+          if (!firstChild.bind) {
+            this.bindCounter++;
+            firstChild.bind = this.bindCounter;
+          }
+
+          // Generate repeat_items static snapshot from actual data
+          if (rawListData && rawListData.length > 0) {
+            const repeatItems = [];
+            for (let i = 0; i < rawListData.length; i++) {
+              try {
+                const itemResult = actualRenderFn(i, rawListData[i]);
+                if (Array.isArray(itemResult) && itemResult[0]) {
+                  const item = itemResult[0];
+                  // Bake $item references in event handlers to actual values
+                  this.bakeItemRefsInEvents(item, rawListData[i]);
+                  repeatItems.push(item);
+                }
+              } catch {/* skip failed items */}
+            }
+            if (repeatItems.length > 0) {
+              firstChild.repeat_items = repeatItems;
+            }
+          }
+        }
+        return children.flat().filter(Boolean);
+      }
+    } catch {/* ignore */}
+    return null;
+  }
+  createBlockNode(opts) {
+    if (typeof opts.__render__ === 'function') {
+      try {
+        const children = opts.__render__();
+        return Array.isArray(children) ? children.flat().filter(Boolean) : children;
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }
+  executeTemplate(templateFn, mockVm) {
+    try {
+      const result = templateFn(mockVm);
+      if (result && typeof result === 'object') {
+        return result;
+      }
+    } catch {
+      // template execution failed
+    }
+    return null;
+  }
+  parseInlineStyle(styleStr) {
+    return Object.fromEntries(styleStr.split(';').filter(s => s.trim()).map(s => {
+      const [key, ...rest] = s.split(':');
+      return [key.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase()), rest.join(':').trim()];
+    }));
+  }
+  extractBindingExpression(fn) {
+    const str = fn.toString();
+    // 尝试提取 return 后的表达式
+    const match = str.match(/return\s+(.+?)[\s;]*}/);
+    if (match) {
+      return match[1].replace(/^this\./, '').replace(/_vm_\./g, '');
+    }
+    return str;
+  }
+
+  /** Replace $item.xxx references in event handler strings with actual values */
+  bakeItemRefsInEvents(node, itemData) {
+    if (node.events) {
+      for (const [key, handler] of Object.entries(node.events)) {
+        // Replace $item.prop with the JSON-stringified actual value
+        node.events[key] = handler.replace(/\$item\.(\w+)/g, (_match, prop) => {
+          const val = itemData[prop];
+          return typeof val === 'string' ? JSON.stringify(val) : String(val ?? 'undefined');
+        });
+      }
+    }
+    if (node.children) {
+      for (const child of node.children) {
+        this.bakeItemRefsInEvents(child, itemData);
+      }
+    }
+  }
+
+  /**
+   * Get all registered sub-component templates (excluding the bootstrapped main component)
+   */
+  getSubComponentTemplates(mainName) {
+    const results = new Map();
+    for (const [name, comp] of this.components) {
+      if (name === mainName) continue;
+      if (!comp.template) continue;
+      const mockVm = this.createMockVM(comp);
+      try {
+        const tree = this.executeTemplate(comp.template, mockVm);
+        const compStyles = {};
+        if (comp.style) {
+          const normalized = this.normalizeStyleSheet(comp.style);
+          compStyles[0] = normalized;
+        }
+        results.set(name, {
+          tree,
+          styles: compStyles
+        });
+      } catch {}
+    }
+    return results;
+  }
+}
+exports.default = PrerenderVM;

package/lib/prerender/StyleSerializer.d.ts

@@ -0,0 +1,18 @@
+/** css.json format: { [styleObjectId]: { ".class": { prop: value } } } */
+export type CssJsonMap = Record<string, Record<string, Record<string, string>>>;
+/**
+ * StyleSerializer - Converts compiled IStyleNode[] ($app_style$) into css.json format.
+ */
+export declare class StyleSerializer {
+    private cache;
+    selectorToString(selectors: (number | string)[][]): string;
+    parseStyleNodes(styleNodes: any[]): Record<string, Record<string, string>>;
+    private generateId;
+    serialize(styleNodes: any[]): {
+        id: string;
+        styles: Record<string, Record<string, string>>;
+    };
+    toCssJson(): CssJsonMap;
+    reset(): void;
+}
+export default StyleSerializer;