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

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);
+}

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

@@ -0,0 +1,13 @@
+import IJavascriptCompileOption from './interface/IJavascriptCompileOption';
+import ICompileParam from '../interface/ICompileParam';
+import ICompiler from '../interface/ICompiler';
+import { ILog } from '@aiot-toolkit/shared-utils';
+import { IFileLaneContext } from 'file-lane';
+declare class ViteCompiler implements ICompiler {
+    private readonly context;
+    private readonly onLog?;
+    constructor(context: IFileLaneContext, onLog?: ((log: ILog[]) => void) | undefined);
+    compile(param: IJavascriptCompileOption): Promise<void>;
+    clean(param: ICompileParam & IJavascriptCompileOption): Promise<void>;
+}
+export default ViteCompiler;