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

package/lib/prerender/StyleSerializer.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyleSerializer = void 0;
+var _crypto = _interopRequireDefault(require("crypto"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** css.json format: { [styleObjectId]: { ".class": { prop: value } } } */
+
+const SELECTOR_CLASS = 0;
+const SELECTOR_ID = 1;
+const SELECTOR_TAG = 2;
+
+/**
+ * StyleSerializer - Converts compiled IStyleNode[] ($app_style$) into css.json format.
+ */
+class StyleSerializer {
+  cache = (() => new Map())();
+  selectorToString(selectors) {
+    return selectors.map(_ref => {
+      let [type, name] = _ref;
+      switch (type) {
+        case SELECTOR_CLASS:
+          return `.${name}`;
+        case SELECTOR_ID:
+          return `#${name}`;
+        case SELECTOR_TAG:
+          return `${name}`;
+        default:
+          return `${name}`;
+      }
+    }).join('');
+  }
+  parseStyleNodes(styleNodes) {
+    const result = {};
+    for (const node of styleNodes) {
+      if (!Array.isArray(node) || node.length < 2) continue;
+      const selectorPart = node[0];
+      const stylePart = node[1];
+      if (!Array.isArray(selectorPart)) continue;
+      const selectors = selectorPart;
+      if (!selectors.length || !Array.isArray(selectors[0])) continue;
+      const selectorStr = this.selectorToString(selectors);
+      if (!selectorStr) continue;
+      const styleMap = {};
+      if (stylePart && typeof stylePart === 'object' && !Array.isArray(stylePart)) {
+        for (const [prop, value] of Object.entries(stylePart)) {
+          // Keep numeric values as numbers (flex, order, z-index, opacity, etc.)
+          if (typeof value === 'number') {
+            styleMap[prop] = value;
+          } else {
+            styleMap[prop] = String(value);
+          }
+        }
+      }
+      result[selectorStr] = styleMap;
+    }
+    return result;
+  }
+  generateId(content) {
+    return _crypto.default.createHash('md5').update(content).digest('hex').slice(0, 6);
+  }
+  serialize(styleNodes) {
+    const cacheKey = JSON.stringify(styleNodes);
+    const cached = this.cache.get(cacheKey);
+    if (cached) return cached;
+    const styles = this.parseStyleNodes(styleNodes);
+    const id = this.generateId(cacheKey);
+    const entry = {
+      id,
+      styles
+    };
+    this.cache.set(cacheKey, entry);
+    return entry;
+  }
+  toCssJson() {
+    const result = {};
+    for (const {
+      id,
+      styles
+    } of this.cache.values()) {
+      result[id] = styles;
+    }
+    return result;
+  }
+  reset() {
+    this.cache.clear();
+  }
+}
+exports.StyleSerializer = StyleSerializer;
+var _default = exports.default = StyleSerializer;

package/lib/prerender/TemplateSerializer.d.ts

@@ -0,0 +1,26 @@
+import type { PrerenderNode } from './PrerenderVM';
+/**
+ * TemplateSerializer - 将 PrerenderVM 的渲染结果序列化为 template.json + css.json
+ */
+export default class TemplateSerializer {
+    private styleSerializer;
+    /**
+     * 将 DOM 树序列化为 template.json 格式
+     * 解析 class 列表，从 css.json 样式表中查找并内联 style
+     */
+    serializeTemplate(tree: PrerenderNode, styleSheet: Record<string, Record<string, string>>, styleObjectId?: number): Record<string, any>;
+    /**
+     * 将样式表序列化为 css.json 格式
+     * 格式: { [styleObjectId]: { ".className": { prop: value } } }
+     *
+     * Input: { [numericId]: rawStyleArray }
+     * Output: { [stringId]: { ".class": { prop: value } } }
+     */
+    serializeCss(styles: Record<number, any>): Record<string, Record<string, Record<string, string>>>;
+    private serializeNode;
+    /**
+     * 从 class 列表和 styleSheet 解析出内联 style
+     * 优先级: class 样式 < inline style（后者覆盖前者）
+     */
+    private resolveStyles;
+}

package/lib/prerender/TemplateSerializer.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StyleSerializer = require("./StyleSerializer");
+/**
+ * TemplateSerializer - 将 PrerenderVM 的渲染结果序列化为 template.json + css.json
+ */
+class TemplateSerializer {
+  styleSerializer = (() => new _StyleSerializer.StyleSerializer())();
+
+  /**
+   * 将 DOM 树序列化为 template.json 格式
+   * 解析 class 列表，从 css.json 样式表中查找并内联 style
+   */
+  serializeTemplate(tree, styleSheet, styleObjectId) {
+    return this.serializeNode(tree, styleSheet, styleObjectId);
+  }
+
+  /**
+   * 将样式表序列化为 css.json 格式
+   * 格式: { [styleObjectId]: { ".className": { prop: value } } }
+   *
+   * Input: { [numericId]: rawStyleArray }
+   * Output: { [stringId]: { ".class": { prop: value } } }
+   */
+  serializeCss(styles) {
+    const result = {};
+    for (const [id, styleData] of Object.entries(styles)) {
+      if (Array.isArray(styleData)) {
+        result[String(id)] = this.styleSerializer.parseStyleNodes(styleData);
+      } else if (styleData && typeof styleData === 'object' && Object.keys(styleData).length > 0) {
+        // Already normalized by PrerenderVM.normalizeStyleSheet (Vela format)
+        result[String(id)] = styleData;
+      }
+    }
+    return result;
+  }
+  serializeNode(node, styleSheet, styleObjectId) {
+    const result = {
+      type: node.type
+    };
+    if (styleObjectId !== undefined) {
+      result.styleObjectId = styleObjectId;
+    }
+    if (node.attr && Object.keys(node.attr).length) {
+      result.attr = node.attr;
+    }
+    if (node.bind) {
+      result.bind = node.bind;
+    }
+    if (node.class) {
+      result.class = node.class;
+    }
+    const resolvedStyle = this.resolveStyles(node.class, node.style, styleSheet);
+    if (resolvedStyle && Object.keys(resolvedStyle).length) {
+      result.style = resolvedStyle;
+    }
+
+    // Events: simple events use method name, dynamic use $event + function string
+    if (node.events && Object.keys(node.events).length) {
+      const events = {};
+      for (const [key, handler] of Object.entries(node.events)) {
+        const eventName = key.startsWith('$') ? key.slice(1) : key;
+        const handlerStr = String(handler).replace(/_vm_\./g, 'this.');
+        // Check if it's a simple method call: function(evt) { return this.methodName(evt); }
+        const simpleMatch = handlerStr.match(/^function\s*\(\w*\)\s*\{\s*return\s+this\.(\w+)\(\w*\);\s*\}$/);
+        if (simpleMatch) {
+          events[eventName] = simpleMatch[1];
+        } else if (handlerStr.includes('function') || handlerStr.includes('=>')) {
+          events[`$${eventName}`] = handlerStr;
+        } else {
+          events[eventName] = handlerStr;
+        }
+      }
+      result.events = events;
+    }
+    if (node.import) {
+      result.import = node.import;
+    }
+
+    // $repeat (for loops)
+    if (node.$repeat) {
+      result.$repeat = node.$repeat;
+      result.repeat = [];
+    }
+
+    // $shown (if conditions)
+    if (node['$shown']) {
+      result['$shown'] = node['$shown'];
+      result['shown'] = node['shown'] ?? false;
+    }
+    if (node.children?.length) {
+      result.children = node.children.map(child => this.serializeNode(child, styleSheet));
+    }
+    return result;
+  }
+
+  /**
+   * 从 class 列表和 styleSheet 解析出内联 style
+   * 优先级: class 样式 < inline style（后者覆盖前者）
+   */
+  resolveStyles(classStr, inlineStyle, styleSheet) {
+    const merged = {};
+    if (classStr) {
+      const classes = classStr.split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        const key = `.${cls}`;
+        if (styleSheet[key]) {
+          Object.assign(merged, styleSheet[key]);
+        }
+      }
+    }
+    if (inlineStyle) {
+      Object.assign(merged, inlineStyle);
+    }
+    return Object.keys(merged).length ? merged : undefined;
+  }
+}
+exports.default = TemplateSerializer;

package/lib/prerender/index.d.ts

@@ -0,0 +1,20 @@
+import { ILog } from '@aiot-toolkit/shared-utils';
+import IPrerenderOption from './interface/IPrerenderOption';
+/**
+ * 预渲染入口
+ *
+ * 读取编译后的 JS 产物，在 VM 沙箱中执行模板函数，
+ * 将静态 DOM 结构序列化为 .template.json + .css.json
+ * 支持子组件递归预渲染和多级缓存
+ */
+export declare function prerender(option: IPrerenderOption, onLog?: (logs: ILog[]) => void): Promise<void>;
+/**
+ * Clear prerender caches for watch mode.
+ * - No args or empty array: full clear (e.g. style file changed)
+ * - With page paths: incremental clear for those pages only
+ */
+export declare function watchChange(changedPages?: string[]): void;
+export { default as PrerenderVM } from './PrerenderVM';
+export type { BindingMarker, RepeatMarker, EventMarker, PrerenderNode } from './PrerenderVM';
+export { default as TemplateSerializer } from './TemplateSerializer';
+export type { default as IPrerenderOption } from './interface/IPrerenderOption';