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

package/lib/afterCompile/ux/UxAfterCompile.js

@@ -9,7 +9,7 @@ var _fsExtra = _interopRequireDefault(require("fs-extra"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _path = _interopRequireDefault(require("path"));
 var _CompileMode = _interopRequireDefault(require("../../compiler/enum/CompileMode"));
-var _JavascriptCompiler = _interopRequireDefault(require("../../compiler/javascript/JavascriptCompiler"));
+var _ViteCompiler = _interopRequireDefault(require("../../compiler/javascript/ViteCompiler"));
 var _JavascriptDefaultCompileOption = _interopRequireDefault(require("../../compiler/javascript/JavascriptDefaultCompileOption"));
 var _Jsc = _interopRequireDefault(require("../../compiler/javascript/vela/utils/Jsc"));
 var _ZipUtil = _interopRequireDefault(require("../../compiler/javascript/vela/utils/ZipUtil"));
@@ -18,6 +18,7 @@ var _FileLaneTriggerType = _interopRequireDefault(require("file-lane/lib/enum/Fi
 var _ZipFileUtil = _interopRequireDefault(require("@aiot-toolkit/shared-utils/lib/utils/ZipFileUtil"));
 var _ImageIcu = _interopRequireDefault(require("../../compiler/tools/icu/ImageIcu"));
 var _LiteCard = _interopRequireDefault(require("../../compiler/javascript/vela/utils/LiteCard"));
+var _UxUtil = _interopRequireDefault(require("@aiot-toolkit/parser/lib/ux/utils/UxUtil"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BinaryPlugin = require('@aiot-toolkit/parser/lib/ux/translate/vela/protobuf/BinaryPlugin');
 
@@ -31,7 +32,7 @@ class UxAfterCompile {
       compilerOption,
       onLog
     } = params;
-    return new _JavascriptCompiler.default(context, onLog).compile({
+    return new _ViteCompiler.default(context, onLog).compile({
       projectPath: _path.default.join(context.projectPath, context.output),
       mode: _CompileMode.default.DEVELOPMENT,
       devtool: false,
@@ -239,6 +240,28 @@ class UxAfterCompile {
           });
         }
       }
+
+      // e2e
+      if (compilerOption.e2eConfigPath && compilerOption.enableE2e) {
+        const testConfig = _UxUtil.default.getE2eConfig({
+          projectPath: compilerOption.projectPath,
+          e2eConfigPath: compilerOption.e2eConfigPath
+        });
+        const testPagePath = _path.default.parse(_path.default.relative(_path.default.join(compilerOption.projectPath, sourceRoot), _path.default.join(testConfig.dir, testConfig.entry.path)).replaceAll(_path.default.sep, _path.default.posix.sep));
+        // 1. 修改entry
+        const entryName = testPagePath.dir;
+        const launchMode = testConfig.entry?.launchMode;
+        if (entryName) {
+          content.router.entry = entryName;
+        }
+        // 2. 添加测试页到router.pages
+        if (content.router.pages) {
+          content.router.pages[entryName] = {
+            component: testPagePath.name,
+            launchMode
+          };
+        }
+      }
       _fsExtra.default.writeJSONSync(_path.default.join(projectPath, outputPath, _UxFileUtils.default.CONFIG_FILE_NAME), content, {
         spaces: 2
       });

package/lib/compiler/javascript/JavascriptCompiler.js

@@ -135,12 +135,16 @@ class JavascriptCompiler {
     let result = {
       context: projectPath,
       mode,
-      devtool: devtool,
+      devtool: devtool || false,
       output: {
-        globalObject: 'window',
+        globalObject: 'global',
         filename: '[name].js',
         publicPath: './',
-        path: buildPath
+        path: buildPath,
+        iife: false,
+        library: {
+          type: 'commonjs2'
+        }
       },
       module: {
         rules: [{
@@ -178,7 +182,10 @@ class JavascriptCompiler {
       },
       optimization: {
         minimize: true,
-        minimizer: [this.createMinimizerRspackPlugin(param)]
+        minimizer: [this.createMinimizerRspackPlugin(param)],
+        splitChunks: false,
+        runtimeChunk: false,
+        concatenateModules: true
       },
       resolve: {
         extensions: ['.js', '.ts', '.ux']

package/lib/compiler/javascript/TemplateCompiler.d.ts

@@ -0,0 +1,29 @@
+declare function uxToTemplateJson(templateNode: any, styleObjectId?: number, styleSheet?: any, importMap?: Record<string, string>, pageDir?: string): any;
+/**
+ * Normalize a media query condition text from CSS Level 4 syntax to Level 3.
+ *
+ * Level 4 → Level 3:
+ *   `(width <= 30)`              → `(max-width: 30)`
+ *   `(width >= 80)`              → `(min-width: 80)`
+ *   `(400 <= width <= 700)`      → `(min-width: 400) and (max-width: 700)`
+ *   `(width < 30)`               → `(max-width: 29)`   // strict → off-by-one
+ *   Same for height/aspect-ratio. Other features pass through.
+ *
+ * `screen and ` is preserved; `not` / `only` are preserved as-is.
+ */
+declare function normalizeMediaQuery(condition: string): string;
+/**
+ * Parse compiled $app_style$ array. Each rule is either:
+ *   [selectors, props]                          — base rule
+ *   [{condition: "<media-query>"}, selectors, props] — conditional rule (@media or @import with query)
+ *
+ * Returns a flat map: selectors → props for base rules, plus
+ * `"@media <normalizedConditionText>"` keys whose values are the per-condition
+ * `{selector: props}` map. The condition text is normalized to Level 3 so
+ * runtime only needs a Level-3 matcher.
+ */
+declare function parseStyleArray(code: string): Record<string, any>;
+/** Convert CSS text to css.json format */
+export { uxToTemplateJson, parseStyleArray, normalizeMediaQuery };
+/** Compute styleObjectId hash from a string (same algorithm as blueos-pack) */
+export declare function getStyleObjectId(name: string): number;

package/lib/compiler/javascript/TemplateCompiler.js

@@ -0,0 +1,564 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyleObjectId = getStyleObjectId;
+exports.normalizeMediaQuery = normalizeMediaQuery;
+exports.parseStyleArray = parseStyleArray;
+exports.uxToTemplateJson = uxToTemplateJson;
+var acorn = _interopRequireWildcard(require("acorn"));
+var _astring = require("astring");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Template.json compilation from parse5 AST
+
+function uxToTemplateJson(templateNode, styleObjectId, styleSheet, importMap, pageDir) {
+  const children = templateNode.content?.childNodes || templateNode.childNodes || [];
+  const rootEl = children.find(n => n.tagName && n.nodeName !== '#text');
+  if (!rootEl) return {};
+  const result = elementToJson(rootEl, styleSheet, importMap, undefined, pageDir);
+  // Insert styleObjectId before children (vivo format)
+  if (styleObjectId !== undefined) {
+    const ordered = {};
+    for (const [k, v] of Object.entries(result)) {
+      if (k === 'children') {
+        ordered.styleObjectId = styleObjectId;
+      }
+      ordered[k] = v;
+    }
+    if (!ordered.styleObjectId) ordered.styleObjectId = styleObjectId;
+    return ordered;
+  }
+  return result;
+}
+/** Add this. prefix to variable references in an expression */
+// blueos-pack's pathTestRE: matches simple paths like a.b.c, a['key'], a[0], a[$idx]
+const pathTestRE = /^[A-Za-z_$][\w$]*(?:\.[\w$]+|\['.*?'\]|\[".*?"\]|\[\d+\]|\[[A-Za-z_$][\w$]*\])*$/;
+/**
+ * Normalize a media query condition text from CSS Level 4 syntax to Level 3.
+ *
+ * Level 4 → Level 3:
+ *   `(width <= 30)`              → `(max-width: 30)`
+ *   `(width >= 80)`              → `(min-width: 80)`
+ *   `(400 <= width <= 700)`      → `(min-width: 400) and (max-width: 700)`
+ *   `(width < 30)`               → `(max-width: 29)`   // strict → off-by-one
+ *   Same for height/aspect-ratio. Other features pass through.
+ *
+ * `screen and ` is preserved; `not` / `only` are preserved as-is.
+ */
+function normalizeMediaQuery(condition) {
+  if (!condition) return condition;
+  // Only operate on what's inside parens; leave operators (and/or/not/only) alone.
+  return condition.replace(/\(([^)]+)\)/g, (_match, inner) => {
+    const expr = String(inner).trim();
+    // Range form: <num> <op1> <feature> <op2> <num>, e.g. "400 <= width <= 700"
+    const range = expr.match(/^(-?\d+(?:\.\d+)?)\s*(<=?|>=?)\s*([a-zA-Z-]+)\s*(<=?|>=?)\s*(-?\d+(?:\.\d+)?)$/);
+    if (range) {
+      const [, lhs, op1, feat, op2, rhs] = range;
+      const lo = op1 === '<=' || op1 === '<' ? lhs : rhs;
+      const hi = op1 === '<=' || op1 === '<' ? rhs : lhs;
+      // Both operators must be the same direction; otherwise fall through.
+      if ((op1 === '<=' || op1 === '<') && (op2 === '<=' || op2 === '<') || (op1 === '>=' || op1 === '>') && (op2 === '>=' || op2 === '>')) {
+        const loNum = op1 === '<' || op2 === '<' ? +lo + 1 : +lo;
+        const hiNum = op1 === '<' || op2 === '<' ? +hi - 1 : +hi;
+        return `(min-${feat}: ${loNum}) and (max-${feat}: ${hiNum})`;
+      }
+    }
+    // Comparison form: <feature> <op> <num> or <num> <op> <feature>
+    const cmp = expr.match(/^(?:([a-zA-Z-]+)\s*(<=?|>=?)\s*(-?\d+(?:\.\d+)?)|(-?\d+(?:\.\d+)?)\s*(<=?|>=?)\s*([a-zA-Z-]+))$/);
+    if (cmp) {
+      let feat, op, num;
+      if (cmp[1]) {
+        feat = cmp[1];
+        op = cmp[2];
+        num = +cmp[3];
+      } else {
+        feat = cmp[6];
+        op = cmp[5];
+        num = +cmp[4];
+        // Flip operator since we're moving feature to the left
+        op = op === '<=' ? '>=' : op === '>=' ? '<=' : op === '<' ? '>' : '<';
+      }
+      // Strict comparisons get off-by-one (CSS spec: (width < 30) means width is at most 29 in integer dp)
+      if (op === '<') return `(max-${feat}: ${num - 1})`;
+      if (op === '>') return `(min-${feat}: ${num + 1})`;
+      if (op === '<=') return `(max-${feat}: ${num})`;
+      if (op === '>=') return `(min-${feat}: ${num})`;
+    }
+    return `(${expr})`;
+  });
+}
+
+/**
+ * Parse compiled $app_style$ array. Each rule is either:
+ *   [selectors, props]                          — base rule
+ *   [{condition: "<media-query>"}, selectors, props] — conditional rule (@media or @import with query)
+ *
+ * Returns a flat map: selectors → props for base rules, plus
+ * `"@media <normalizedConditionText>"` keys whose values are the per-condition
+ * `{selector: props}` map. The condition text is normalized to Level 3 so
+ * runtime only needs a Level-3 matcher.
+ */
+function parseStyleArray(code) {
+  const styleSheet = {};
+  const ingest = parsed => {
+    if (!Array.isArray(parsed)) return;
+    for (const rule of parsed) {
+      if (!Array.isArray(rule) || rule.length < 2) continue;
+      let selectors, props, conditionText;
+      if (rule.length >= 3 && rule[0] && typeof rule[0] === 'object' && !Array.isArray(rule[0]) && typeof rule[0].condition === 'string') {
+        conditionText = rule[0].condition;
+        selectors = rule[1];
+        props = rule[2];
+      } else {
+        selectors = rule[0];
+        props = rule[1];
+      }
+      if (!Array.isArray(selectors)) continue;
+      let target = styleSheet;
+      if (conditionText) {
+        const key = `@media ${normalizeMediaQuery(conditionText)}`;
+        target = styleSheet[key] = styleSheet[key] || {};
+      }
+      for (const sel of selectors) {
+        if (Array.isArray(sel) && sel.length >= 2) {
+          target[sel[0] === 0 ? `.${sel[1]}` : sel[1]] = props;
+        }
+      }
+    }
+  };
+  try {
+    const jsonLike = code.replace(/'/g, '"').replace(/([{,]\s*)([a-zA-Z_$][\w$]*)\s*:/g, '$1"$2":').replace(/,\s*([}\]])/g, '$1');
+    ingest(JSON.parse(jsonLike));
+  } catch {
+    try {
+      ingest(new Function(`return ${code}`)());
+    } catch {}
+  }
+  return styleSheet;
+}
+function addThisPrefix(expr, extraReserved) {
+  const reserved = new Set(['true', 'false', 'null', 'undefined', 'NaN', 'Infinity', 'typeof', 'instanceof', 'new', 'delete', 'void', 'in', 'of', 'if', 'else', 'return', 'this', 'function', 'var', 'let', 'const', '$event', 'evt', 'event', 'Math', 'JSON', 'Object', 'Array', 'String', 'Number', 'Boolean', 'Date', 'RegExp', 'Error', 'Promise', 'parseInt', 'parseFloat', 'console']);
+  try {
+    const generate = _astring.generate;
+    const ast = acorn.parseExpressionAt(expr, 0, {
+      ecmaVersion: 2020
+    });
+    // Walk AST and add this. prefix to free identifiers
+    function walk(node, parent) {
+      if (!node || typeof node !== 'object') return;
+      if (node.type === 'Identifier' && !reserved.has(node.name) && !extraReserved?.has(node.name)) {
+        if (parent?.type === 'MemberExpression' && parent.property === node && !parent.computed) return;
+        if (parent?.type === 'Property' && parent.key === node && !parent.computed) return;
+        const origName = node.name;
+        node.type = 'MemberExpression';
+        node.object = {
+          type: 'ThisExpression'
+        };
+        node.property = {
+          type: 'Identifier',
+          name: origName
+        };
+        node.computed = false;
+        delete node.name;
+      }
+      for (const key of Object.keys(node)) {
+        if (key === 'type' || key === 'start' || key === 'end') continue;
+        const child = node[key];
+        if (Array.isArray(child)) child.forEach(c => c?.type && walk(c, node));else if (child?.type) walk(child, node);
+      }
+    }
+    walk(ast, null);
+    return generate(ast, {
+      indent: '',
+      lineEnd: ' '
+    }).trim();
+  } catch {
+    // Fallback to regex for unparseable expressions
+    const parts = expr.split(/('(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/);
+    return parts.map((part, i) => {
+      if (i % 2 === 1) return part;
+      return part.replace(/(?<![.'"\w$/])([a-zA-Z_$][a-zA-Z0-9_$]*)/g, (match, id) => {
+        if (reserved.has(id) || extraReserved?.has(id)) return match;
+        return `this.${id}`;
+      });
+    }).join('');
+  }
+}
+function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
+  const tagName = el.tagName === 'img' ? 'image' : el.tagName;
+  const node = {
+    type: tagName
+  };
+  const attrs = el.attrs || [];
+  const attrObj = {};
+  const events = {};
+  let className = '';
+  let hasBind = false;
+  // Static inline style values (from style="key: val") are merged into node.style alongside
+  // tag/class selector styles to match vivo's behavior — only dynamic values stay in inlineStyle
+  const staticInlineStyle = {};
+  // Check if this is an imported sub-component
+  const isComponent = importMap && importMap[el.tagName];
+  for (const attr of attrs) {
+    let {
+      name,
+      value
+    } = attr;
+    // :attr shorthand for dynamic binding
+    if (name.startsWith(':') && !name.startsWith('::')) {
+      name = name.slice(1);
+      if (!value.includes('{{')) value = `{{${value}}}`;
+    }
+    if (name === 'is' && tagName === 'component') {
+      continue; // is attribute handled at runtime
+    } else if (name === 'class') {
+      className = value.trim();
+    } else if (name.startsWith('@') || name.startsWith('on') && name.length > 2) {
+      const rawEvtName = name.startsWith('@') ? name.slice(1) : name.replace(/^on/, '');
+      const evtName = rawEvtName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      // Events with parameters use $event format with function wrapper
+      const evtVal = value.trim();
+      if (evtVal.includes('(')) {
+        // Add evt as last parameter
+        const withEvt = evtVal.replace(/\)$/, evtVal.includes('()') ? 'evt)' : ', evt)');
+        events[`$${evtName}`] = `function (evt) { return ${addThisPrefix(withEvt)}; }`;
+      } else {
+        events[evtName] = evtVal;
+      }
+      hasBind = true;
+    } else if (name === 'if') {
+      const ifVal = value.replace(/\{\{|\}\}/g, '').trim();
+      if (ifVal === 'true') {
+        node['shown'] = true;
+      } else if (ifVal === 'false') {
+        node['shown'] = false;
+      } else {
+        node['__cond__'] = {
+          kind: 'if',
+          expr: ifVal
+        };
+        hasBind = true;
+      }
+    } else if (name === 'elif') {
+      const elifVal = value.replace(/\{\{|\}\}/g, '').trim();
+      node['__cond__'] = {
+        kind: 'elif',
+        expr: elifVal
+      };
+      hasBind = true;
+    } else if (name === 'else') {
+      node['__cond__'] = {
+        kind: 'else'
+      };
+      hasBind = true;
+    } else if (name === 'show') {
+      const showVal = value.replace(/\{\{|\}\}/g, '').trim();
+      if (showVal === 'true') attrObj['show'] = true;else if (showVal === 'false') attrObj['show'] = false;else {
+        // Try to evaluate as literal
+        try {
+          const v = JSON.parse(showVal);
+          attrObj["show"] = v;
+        } catch {
+          attrObj['$show'] = showVal;
+          hasBind = true;
+        }
+      }
+    } else if (name === 'for') {
+      const forVal = value.replace(/\{\{|\}\}/g, '').trim();
+      const inMatch = forVal.match(/^\((\w+)\s*,\s*(\w+)\)\s+in\s+(.+)$/);
+      const simpleInMatch = !inMatch && forVal.match(/^(\w+)\s+in\s+(.+)$/);
+      if (inMatch) {
+        // for="(key, value) in expr" syntax
+        const expr = inMatch[3].trim();
+        if (/^[a-zA-Z_$][\w$.]*$/.test(expr)) {
+          node['repeat'] = {
+            '$exp': expr,
+            key: inMatch[1],
+            value: inMatch[2]
+          };
+        } else {
+          node['$repeat'] = `function () { return ${addThisPrefix(expr)}; }`;
+          node['repeat'] = [];
+        }
+      } else if (simpleInMatch) {
+        // for="value in expr" syntax
+        const expr = simpleInMatch[2].trim();
+        if (/^[a-zA-Z_$][\w$.]*$/.test(expr)) {
+          node['repeat'] = {
+            '$exp': expr,
+            value: simpleInMatch[1]
+          };
+        } else {
+          node['$repeat'] = `function () { return ${addThisPrefix(expr)}; }`;
+          node['repeat'] = [];
+        }
+      } else if (pathTestRE.test(forVal)) {
+        node['$repeat'] = forVal;
+        node['repeat'] = [];
+      } else {
+        node['$repeat'] = `function () { return ${addThisPrefix(forVal)}; }`;
+        node['repeat'] = [];
+      }
+      hasBind = true;
+      // For-loop variables should NOT get this. prefix
+      if (inMatch) {
+        scopeVars = new Set(scopeVars);
+        scopeVars.add(inMatch[1]); // key
+        scopeVars.add(inMatch[2]); // value
+      } else if (simpleInMatch) {
+        scopeVars = new Set(scopeVars);
+        scopeVars.add(simpleInMatch[1]); // value
+      }
+    } else if (name === 'style') {
+      if (/^\{\{[^}]+\}\}$/.test(value.trim())) {
+        // Pure dynamic style binding: style="{{variable}}"
+        const inner = value.replace(/\{\{|\}\}/g, '').trim();
+        if (/^[a-zA-Z_$][\w$.]*$/.test(inner)) {
+          node['$style'] = inner;
+        } else {
+          node['$style'] = `function () { return ${addThisPrefix(inner)}; }`;
+        }
+        hasBind = true;
+      } else {
+        // Static or per-property dynamic inline style
+        // Static values get merged into node.style (alongside tag/class selectors)
+        // Dynamic values ($key: function) stay in inlineStyle
+        // Only set hasBind if there are dynamic values
+        const inlineStyle = {};
+        let hasDynamicInlineStyle = false;
+        value.split(';').forEach(decl => {
+          const [prop, ...vals] = decl.split(':');
+          if (prop && vals.length) {
+            const key = prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            const propVal = vals.join(':').trim();
+            if (/\{\{[\s\S]*?\}\}/.test(propVal)) {
+              // Dynamic value — emit as $key: function() {...}
+              const parts = propVal.split(/(\{\{[\s\S]*?\}\})/);
+              const exprs = parts.filter(Boolean).map(p => {
+                const m = p.match(/^\{\{([\s\S]*?)\}\}$/);
+                if (m) return addThisPrefix(m[1].trim());
+                return `'${p.replace(/'/g, "\\'")}'`;
+              });
+              const fullExpr = exprs.length === 1 ? exprs[0] : `'' + ${exprs.join(' + ')}`;
+              inlineStyle['$' + key] = `function () { return ${fullExpr}; }`;
+              hasDynamicInlineStyle = true;
+            } else {
+              // Static value — accumulate to staticInlineStyle for merging into node.style later
+              staticInlineStyle[key] = propVal;
+            }
+          }
+        });
+        if (Object.keys(inlineStyle).length) node['inlineStyle'] = inlineStyle;
+        if (hasDynamicInlineStyle) hasBind = true;
+      }
+    } else if (/\{\{.*\}\}/.test(value)) {
+      // Dynamic binding - build expression from mixed static/dynamic parts
+      const parts = value.split(/(\{\{[\s\S]*?\}\})/);
+      const exprs = parts.filter(Boolean).map(p => {
+        const m = p.match(/^\{\{([\s\S]*?)\}\}$/);
+        if (m) return addThisPrefix(m[1].trim());
+        return `'${p.replace(/'/g, "\\'")}'`;
+      });
+      const camelName = '$' + name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      const plainName = name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+      // Handle literal values (null, true, false, numbers)
+      if (exprs.length === 1) {
+        const raw = exprs[0].replace(/^this\./, '');
+        if (raw === 'null') {
+          attrObj[plainName] = null;
+          hasBind = true;
+        } else if (raw === 'undefined') {
+          attrObj[plainName] = undefined;
+          hasBind = true;
+        } else if (raw === 'true') {
+          attrObj[plainName] = true;
+          hasBind = true;
+        } else if (raw === 'false') {
+          attrObj[plainName] = false;
+          hasBind = true;
+        } else if (pathTestRE.test(raw)) {
+          // Simple variable reference - just the name without this. prefix
+          attrObj[camelName] = raw;
+        } else {
+          attrObj[camelName] = `function () { return ${exprs[0]}; }`;
+        }
+      } else {
+        const wrappedExprs = exprs.map(e => {
+          if (e.startsWith("'") || e.startsWith('"')) return e; // string literal
+          if (/(\|\||&&|\?\s|\+)/.test(e) && !e.startsWith('(')) return `(${e})`;
+          return e;
+        });
+        const fullExpr = `'' + ${wrappedExprs.join(' + ')}`;
+        attrObj[camelName] = `function () { return ${fullExpr}; }`;
+      }
+      hasBind = true;
+    } else {
+      let staticVal = value ? value.replace(/ {2,}/g, ' ') : '';
+      // Normalize relative path attrs (src, href) to absolute paths from src root
+      if (staticVal && (name === 'src' || name === 'href') && !staticVal.startsWith('/') && !/^[a-z]+:/.test(staticVal) && pageDir) {
+        // Resolve relative to pageDir, then make absolute from src root
+        const segments = pageDir.split('/').filter(Boolean).concat(staticVal.split('/'));
+        const stack = [];
+        for (const seg of segments) {
+          if (seg === '..') stack.pop();else if (seg && seg !== '.') stack.push(seg);
+        }
+        staticVal = '/' + stack.join('/');
+      }
+      attrObj[name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = staticVal;
+      if (name === 'id') hasBind = true;
+    }
+  }
+  // Handle text content
+  for (const child of el.childNodes || []) {
+    const textElements = new Set(['text', 'span', 'a', 'input', 'qrcode', 'barcode', 'marquee', 'arc-text', 'option', 'button', 'label', 'textarea', 'richtext']);
+    if (child.value?.trim() && !child.tagName && !(el.childNodes || []).some(c => c.tagName) && textElements.has(tagName)) {
+      // Collapse whitespace for static text; dynamic text is trimmed separately
+      const text = child.value;
+      if (/\{\{.*\}\}/.test(text)) {
+        // Build function expression from template literal
+        // Trim surrounding whitespace before splitting (vivo ignores indentation whitespace)
+        const trimmedText = text.trim();
+        const parts = trimmedText.split(/(\{\{[\s\S]*?\}\})/);
+        const exprs = parts.filter(Boolean).map(p => {
+          const m = p.match(/^\{\{([\s\S]*?)\}\}$/);
+          if (m) return addThisPrefix(m[1].trim());
+          return `'${p.replace(/'/g, "\\'")}'`;
+        });
+        if (exprs.length === 1 && pathTestRE.test(exprs[0].replace(/^this\./, ''))) {
+          attrObj['$value'] = exprs[0].replace(/^this\./, '');
+        } else if (exprs.length === 1) {
+          attrObj['$value'] = `function () { return ${exprs[0]}; }`;
+        } else {
+          const wrappedExprs = exprs.map(e => {
+            if (e.startsWith("'") || e.startsWith('"')) return e;
+            if (/(\|\||&&|\?\s|\+)/.test(e) && !e.startsWith('(')) return `(${e})`;
+            return e;
+          });
+          attrObj['$value'] = `function () { return '' + ${wrappedExprs.join(' + ')}; }`;
+        }
+        hasBind = true;
+      } else {
+        attrObj['value'] = text.replace(/\s*\n\s*/g, ' ');
+      }
+    }
+  }
+  // Output in vivo order: attr → bind → class → events → import → style → children
+  if (Object.keys(attrObj).length) node.attr = attrObj;
+  // Handle dynamic class before bind assignment
+  let hasDynClass = false;
+  if (className && /\{\{.*\}\}/.test(className)) {
+    const parts = className.split(/(\{\{[\s\S]*?\}\})/).filter(Boolean);
+    const arrayParts = parts.map(p => {
+      const m = p.match(/^\{\{([\s\S]*?)\}\}$/);
+      if (m) return addThisPrefix(m[1].trim());
+      return p.trim().split(/\s+/).map(c => `'${c}'`).join(', ');
+    });
+    // Single dynamic variable → just the name; otherwise array format
+    if (arrayParts.length === 1 && pathTestRE.test(arrayParts[0].replace(/^this\./, ''))) {
+      node['$class'] = arrayParts[0].replace(/^this\./, '');
+    } else {
+      node['$class'] = `function () { return [${arrayParts.join(', ')}]; }`;
+    }
+    hasBind = true;
+    hasDynClass = true;
+  }
+  if (isComponent) {
+    node.bind = 3;
+    node['import'] = importMap[el.tagName];
+  } else if (node['$shown'] !== undefined || node['$repeat'] || node['repeat']?.['$exp']) {
+    node.bind = 2;
+  } else if (hasBind) {
+    node.bind = 1;
+  }
+  if (!hasDynClass && className) {
+    node.class = className;
+  }
+  if (Object.keys(events).length) node.events = events;
+  // Inline style from styleSheet (class selector + tag selector) + static portion of style="..."
+  // Only base (non-@media) selectors are inlined; @media rules are applied at runtime by SDK.
+  if (styleSheet) {
+    const merged = {};
+    if (styleSheet[el.tagName]) Object.assign(merged, styleSheet[el.tagName]);
+    if (className && !hasDynClass) {
+      for (const cls of className.split(/\s+/)) {
+        if (cls && styleSheet[`.${cls}`]) Object.assign(merged, styleSheet[`.${cls}`]);
+      }
+    }
+    Object.assign(merged, staticInlineStyle);
+    if (Object.keys(merged).length) node.style = merged;
+  } else if (Object.keys(staticInlineStyle).length) {
+    node.style = {
+      ...staticInlineStyle
+    };
+  }
+  // Process children (skip text nodes already handled above)
+  const childNodes = [];
+  const hasElementChildren = (el.childNodes || []).some(c => c.tagName);
+  const hasTextChildren = (el.childNodes || []).some(c => !c.tagName && c.value?.trim());
+  const isMixedContent = hasElementChildren && hasTextChildren && (tagName === 'text' || tagName === 'span' || tagName === 'a' || tagName === 'marquee');
+  for (const child of el.childNodes || []) {
+    if (child.tagName) {
+      childNodes.push(elementToJson(child, styleSheet, importMap, scopeVars, pageDir));
+    } else if (isMixedContent && child.value?.trim()) {
+      // Wrap text nodes in <span> for mixed content
+      const text = child.value.replace(/[ \t]*\n[ \t]*/g, ' ').replace(/ {2,}/g, ' ');
+      const spanNode = {
+        type: 'span',
+        attr: {
+          value: text
+        }
+      };
+      childNodes.push(spanNode);
+    }
+  }
+  // Resolve if/elif/else chain — emit $shown with composite negations.
+  //   if   → $shown = self
+  //   elif → $shown = self && !prev1 && !prev2 ...
+  //   else → $shown = !prev1 && !prev2 ...
+  // Each chain participant gets bind=2 (virtual fragment); else terminates the chain.
+  const negate = e => /^this\.[\w$.[\]'"]+$/.test(e) ? `!${e}` : `!(${e})`;
+  let prevConds = [];
+  for (const child of childNodes) {
+    const cond = child['__cond__'];
+    if (!cond) {
+      prevConds = [];
+      continue;
+    }
+    delete child['__cond__'];
+    if (cond.kind === 'if') {
+      const expr = cond.expr;
+      child['$shown'] = pathTestRE.test(expr) ? expr : `function () { return ${addThisPrefix(expr)}; }`;
+      child['shown'] = false;
+      child['bind'] = 2;
+      prevConds = [addThisPrefix(expr)];
+    } else if (cond.kind === 'elif') {
+      const selfExpr = addThisPrefix(cond.expr);
+      const negs = prevConds.map(negate).join(' && ');
+      child['$shown'] = `function () { return ${selfExpr}${negs ? ' && ' + negs : ''}; }`;
+      child['shown'] = false;
+      child['bind'] = 2;
+      prevConds.push(selfExpr);
+    } else if (cond.kind === 'else') {
+      const negs = prevConds.map(negate).join(' && ');
+      child['$shown'] = `function () { return ${negs || 'true'}; }`;
+      child['shown'] = false;
+      child['bind'] = 2;
+      prevConds = [];
+    }
+  }
+  if (childNodes.length) node.children = childNodes;
+  return node;
+}
+/** Convert CSS text to css.json format */
+
+/** Compute styleObjectId hash from a string (same algorithm as blueos-pack) */
+function getStyleObjectId(name) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) {
+    h = (h << 5) - h + name.charCodeAt(i);
+    h = h & h;
+  }
+  return Math.abs(h);
+}