@aiot-toolkit/aiotpack 2.1.0-prender.1 → 2.1.0-prender.10

package/lib/afterCompile/ux/UxAfterCompile.d.ts

@@ -6,10 +6,6 @@ import IJavascriptCompileOption from '../../compiler/javascript/interface/IJavas
 declare class UxAfterCompile {
     static compileJavascript: FollowWork<IJavascriptCompileOption>;
     static protobuf: FollowWork<IJavascriptCompileOption>;
-    /**
-     * 预渲染：在 VM 沙箱中执行编译后的模板函数，生成 .template.json + .css.json
-     */
-    static prerender: FollowWork<IJavascriptCompileOption>;
     static jsc: FollowWork<IJavascriptCompileOption>;
     static toRpk: FollowWork<IJavascriptCompileOption>;
     /**

package/lib/afterCompile/ux/UxAfterCompile.js

@@ -19,7 +19,6 @@ var _ZipFileUtil = _interopRequireDefault(require("@aiot-toolkit/shared-utils/li
 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"));
-var _prerender = require("../../prerender");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const BinaryPlugin = require('@aiot-toolkit/parser/lib/ux/translate/vela/protobuf/BinaryPlugin');
 
@@ -45,11 +44,16 @@ class UxAfterCompile {
         level: _sharedUtils.Loglevel.SUCCESS,
         message: ['javascript compile success']
       }]);
-    }).catch(_ref => {
-      let {
-        errors,
-        warnings
-      } = _ref;
+    }).catch(err => {
+      const errors = err?.errors;
+      const warnings = err?.warnings;
+      if (!errors?.length && !warnings?.length) {
+        onLog?.([{
+          level: _sharedUtils.Loglevel.THROW,
+          message: [`javascript compile failed: ${err?.message ?? err}`]
+        }]);
+        throw err instanceof Error ? err : new Error(String(err));
+      }
       const errorLength = errors?.length || 0;
       const messages = [`webpack error:\r\n`];
       if (errors?.length) {
@@ -90,70 +94,6 @@ class UxAfterCompile {
       BinaryPlugin.createBinFiles();
     }
   };
-
-  /**
-   * 预渲染：在 VM 沙箱中执行编译后的模板函数，生成 .template.json + .css.json
-   */
-  static prerender = async params => {
-    const {
-      compilerOption,
-      onLog,
-      compilation
-    } = params;
-    if (!compilerOption || compilerOption.enablePrerender === false) {
-      return;
-    }
-
-    // In watch mode, clear prerender caches for changed pages
-    if (compilation && compilation.trigger !== _FileLaneTriggerType.default.START) {
-      const {
-        sourceRoot
-      } = compilerOption;
-      const srcPath = _path.default.join(compilerOption.projectPath, sourceRoot);
-      const changedPages = (compilation.changedFiles || []).filter(f => compilation.entries?.includes(f)).map(f => {
-        const rel = _path.default.relative(srcPath, f).replace(/\\/g, '/');
-        return rel.replace(/\.[^.]+$/, '');
-      });
-      (0, _prerender.watchChange)(changedPages.length > 0 ? changedPages : undefined);
-    }
-    const {
-      projectPath,
-      outputPath,
-      sourceRoot
-    } = compilerOption;
-    const buildPath = _path.default.join(projectPath, outputPath);
-    const manifestPath = _path.default.join(projectPath, sourceRoot, 'manifest.json');
-    if (!_fsExtra.default.existsSync(manifestPath)) {
-      return;
-    }
-    const excludeList = compilerOption.prerenderExclude || [];
-    const manifest = _fsExtra.default.readJSONSync(manifestPath);
-    const pages = Object.keys(manifest.router?.pages || {}).filter(pageName => {
-      if (excludeList.some(pattern => pageName.startsWith(pattern))) {
-        onLog?.([{
-          level: _sharedUtils.Loglevel.INFO,
-          message: [`prerender: skip excluded ${pageName}`]
-        }]);
-        return false;
-      }
-      return true;
-    }).map(pageName => {
-      const pageConf = manifest.router.pages[pageName];
-      const component = pageConf.component || 'index';
-      return `${pageName}/${component}`;
-    });
-    if (!pages.length) {
-      return;
-    }
-    const deviceTypes = manifest.deviceTypeList?.length ? manifest.deviceTypeList : ['default'];
-    await (0, _prerender.prerender)({
-      buildPath,
-      sourcePath: _path.default.join(projectPath, sourceRoot),
-      pages,
-      prerenderSubComp: compilerOption.prerenderSubComp !== false,
-      deviceTypes
-    }, onLog);
-  };
   static jsc = async params => {
     const {
       context,

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

@@ -12,16 +12,6 @@ declare function uxToTemplateJson(templateNode: any, styleObjectId?: number, sty
  * `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 };

package/lib/compiler/javascript/TemplateCompiler.js

@@ -13,6 +13,149 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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
 
+// A stylesheet has an applicable @MEDIA rule for a node when any @MEDIA entry
+// carries a selector that matches the node's tag or one of its static class
+// tokens (either directly or as a component of a descendant/combinator sel).
+function hasApplicableMediaRule(styleSheet, tagName, classTokens) {
+  const media = styleSheet?.['@MEDIA'];
+  if (!Array.isArray(media)) return false;
+  const classSet = new Set(classTokens);
+  for (const entry of media) {
+    if (!entry || typeof entry !== 'object') continue;
+    for (const sel of Object.keys(entry)) {
+      if (sel === 'condition') continue;
+      for (const part of sel.split(/[\s>+~]/).map(s => s.trim()).filter(Boolean)) {
+        if (part.startsWith('.')) {
+          if (classSet.has(part.slice(1))) return true;
+        } else if (!part.startsWith('#')) {
+          if (part === tagName) return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+
+// vivo blueos-pack's aggressive camelCase applied to transition-property values.
+// Every letter that follows a non-letter character (separator or digit) is upper-cased,
+// then all non-alphanumeric characters are dropped. This intentionally covers both the
+// simple case (`background-position` → `backgroundPosition`) and the odd shorthand-inside-
+// transition-property form we see in inline styles (`transform-origin 0.2s ease-in-out .5s`
+// → `transformOrigin02SEaseInOut5S`).
+function normalizeTransitionPropertyValue(s) {
+  let out = '';
+  let capNext = false;
+  for (const ch of s) {
+    if (/[A-Za-z]/.test(ch)) {
+      out += capNext ? ch.toUpperCase() : ch;
+      capNext = false;
+    } else if (/[0-9]/.test(ch)) {
+      out += ch;
+      capNext = true;
+    } else {
+      capNext = true;
+    }
+  }
+  return out;
+}
+
+// vivo blueos-pack's inline `animation-timing-function` normalization.
+// Returns:
+//   - string        → the normalized value to emit
+//   - null (drop)   → invalid; caller should skip this inline decl so the class-level
+//                     value (or default) applies
+// Rules (traced empirically from build-vivo/watch-round baseline):
+//   - Predefined keywords (`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`,
+//     `step-start`, `step-end`) → keep as-is
+//   - `steps(N)`                → normalize to `steps(N, end)` (fill default dir)
+//   - `steps(N, start|end)`     → keep as-is
+//   - `cubic-bezier(a, b, c, d)`
+//       * all 4 numeric and x1,x2 ∈ [0,1]        → keep (spec-compliant)
+//       * otherwise                              → drop (invalid per vivo validator)
+//   - Any other unrecognized function            → drop
+function normalizeAnimationTimingFunction(s) {
+  const trimmed = s.trim();
+  if (['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end'].includes(trimmed)) return trimmed;
+  const stepsMatch = /^steps\s*\(\s*([^,)]+?)\s*(?:,\s*(start|end)\s*)?\)$/.exec(trimmed);
+  if (stepsMatch) {
+    const n = stepsMatch[1];
+    const dir = stepsMatch[2] || 'end';
+    return `steps(${n}, ${dir})`;
+  }
+  const cubicMatch = /^cubic-bezier\s*\(\s*([^)]+)\)$/.exec(trimmed);
+  if (cubicMatch) {
+    const args = cubicMatch[1].split(',').map(a => a.trim());
+    if (args.length !== 4) return null;
+    const nums = args.map(a => Number(a));
+    if (nums.some(n => !isFinite(n))) return null;
+    // spec: x1 and x2 must be in [0, 1]; y1 and y2 unbounded. Reproduce vivo behavior:
+    // any component outside [0, 1] is treated as invalid (vivo is stricter than spec).
+    if (nums.some(n => n < 0 || n > 1)) return null;
+    return `cubic-bezier(${args.join(', ')})`;
+  }
+  return null;
+}
+
+// `transform: translate(40px) scale(0.5) ...` (CSS function-list from inline style="")
+// → `{"translateX":"40px","translateY":"0px","scaleX":0.5,"scaleY":0.5}`.
+// Returns null when input isn't a plain CSS function list (already JSON, dynamic
+// binding, or unknown function), so callers can fall back to the raw string.
+function normalizeCssTransform(input) {
+  if (typeof input !== 'string') return null;
+  const s = input.trim();
+  if (!s || s.startsWith('{') || /\{\{/.test(s)) return null;
+  const out = {};
+  const funcRe = /(\w+)\s*\(([^)]*)\)/g;
+  let matched = false;
+  let m;
+  const toNum = x => /^-?\d+(?:\.\d+)?$/.test(x) ? Number(x) : x;
+  // Add a CSS unit to bare numeric arguments; keep existing unit / percent forms.
+  const withUnit = (x, defaultUnit) => {
+    if (x === undefined) return '0' + defaultUnit;
+    return /^-?\d+(?:\.\d+)?$/.test(x) ? x + defaultUnit : x;
+  };
+  while ((m = funcRe.exec(s)) !== null) {
+    matched = true;
+    const fn = m[1];
+    const args = m[2].split(',').map(a => a.trim()).filter(Boolean);
+    switch (fn) {
+      case 'translate':
+        out.translateX = withUnit(args[0], 'px');
+        out.translateY = withUnit(args[1], 'px');
+        break;
+      case 'scale':
+        {
+          const x = args[0] ?? '1';
+          out.scaleX = toNum(x);
+          out.scaleY = args[1] !== undefined ? toNum(args[1]) : toNum(x);
+          break;
+        }
+      case 'translateX':
+      case 'translateY':
+      case 'translateZ':
+        out[fn] = withUnit(args[0], 'px');
+        break;
+      case 'scaleX':
+      case 'scaleY':
+        out[fn] = toNum(args[0] ?? '1');
+        break;
+      case 'rotate':
+      case 'rotateX':
+      case 'rotateY':
+      case 'rotateZ':
+      case 'skew':
+      case 'skewX':
+      case 'skewY':
+        // Only the first arg is meaningful for single-axis rotate/skew; vivo silently
+        // discards extras (e.g. `rotate(90deg,120deg)` → `rotate: "90deg"`). We follow suit.
+        out[fn] = withUnit(args[0], 'deg');
+        break;
+      default:
+        return null;
+    }
+  }
+  return matched ? JSON.stringify(out) : null;
+}
 function uxToTemplateJson(templateNode, styleObjectId, styleSheet, importMap, pageDir) {
   const children = templateNode.content?.childNodes || templateNode.childNodes || [];
   const rootEl = children.find(n => n.tagName && n.nodeName !== '#text');
@@ -100,10 +243,74 @@ function normalizeMediaQuery(condition) {
  * `{selector: props}` map. The condition text is normalized to Level 3 so
  * runtime only needs a Level-3 matcher.
  */
+const NAMED_COLORS = new Set(['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategray', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategray', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'slategrey', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']);
+const COLOR_PROP_RE = /(?:^|[a-z])[Cc]olor$/;
+const NON_NAMED_COLOR_VALUE_RE = /^(?:#[0-9a-fA-F]{3,8}|rgba?\(|hsla?\(|currentColor)/;
 function parseStyleArray(code) {
   const styleSheet = {};
+  const expandShortHex = value => {
+    const short = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])?$/.exec(value);
+    if (!short) return value;
+    const r = short[1] + short[1];
+    const g = short[2] + short[2];
+    const b = short[3] + short[3];
+    const a = short[4] ? short[4] + short[4] : '';
+    return ('#' + r + g + b + a).toLowerCase();
+  };
+  const normalizeTransform = obj => {
+    if (!obj || typeof obj !== 'object') return typeof obj === 'string' ? obj : JSON.stringify(obj);
+    const out = {};
+    for (const [k, v] of Object.entries(obj)) {
+      out[k] = typeof v === 'number' && /^translate[XYZ]?$/.test(k) ? `${v}px` : v;
+    }
+    return JSON.stringify(out);
+  };
+  const expandKeyframeSteps = value => {
+    let arr = [];
+    if (typeof value === 'string') {
+      try {
+        arr = JSON.parse(value);
+      } catch {
+        return [];
+      }
+    } else if (Array.isArray(value)) {
+      arr = value;
+    } else {
+      return [];
+    }
+    return arr.map(step => {
+      const out = {};
+      const entries = Object.entries(step ?? {});
+      for (const [k, v] of entries) {
+        if (k === 'time') continue;
+        out[k] = k === 'transform' && v && typeof v === 'object' ? normalizeTransform(v) : v;
+      }
+      if ('time' in (step ?? {})) out.time = step.time;
+      return out;
+    });
+  };
+  const normalizeStyleProps = props => {
+    if (!props || typeof props !== 'object') return props;
+    const out = {};
+    for (const [k, v] of Object.entries(props)) {
+      if ((k === 'animationIterationCount' || k === 'iterationCount') && v === 'infinite') {
+        out[k] = -1;
+      } else if (typeof v === 'string' && COLOR_PROP_RE.test(k)) {
+        if (NAMED_COLORS.has(v.toLowerCase())) {
+          out[k] = v;
+        } else if (NON_NAMED_COLOR_VALUE_RE.test(v)) {
+          out[k] = expandShortHex(v);
+        }
+      } else {
+        out[k] = v;
+      }
+    }
+    return out;
+  };
   const ingest = parsed => {
     if (!Array.isArray(parsed)) return;
+    let currentMediaCondition = null;
+    let currentMediaEntry = null;
     for (const rule of parsed) {
       if (!Array.isArray(rule) || rule.length < 2) continue;
       let selectors, props, conditionText;
@@ -115,16 +322,47 @@ function parseStyleArray(code) {
         selectors = rule[0];
         props = rule[1];
       }
-      if (!Array.isArray(selectors)) continue;
-      let target = styleSheet;
+      if (!Array.isArray(selectors) || selectors.length === 0) continue;
+      let target;
       if (conditionText) {
-        const key = `@media ${normalizeMediaQuery(conditionText)}`;
-        target = styleSheet[key] = styleSheet[key] || {};
+        const normalized = normalizeMediaQuery(conditionText);
+        if (currentMediaCondition !== normalized) {
+          const list = styleSheet['@MEDIA'] = styleSheet['@MEDIA'] || [];
+          currentMediaEntry = {
+            condition: normalized
+          };
+          list.push(currentMediaEntry);
+          currentMediaCondition = normalized;
+        }
+        target = currentMediaEntry;
+      } else {
+        target = styleSheet;
+        currentMediaCondition = null;
+        currentMediaEntry = null;
       }
-      for (const sel of selectors) {
-        if (Array.isArray(sel) && sel.length >= 2) {
-          target[sel[0] === 0 ? `.${sel[1]}` : sel[1]] = props;
+      const normalizedProps = normalizeStyleProps(props);
+      const firstSel = selectors[0];
+      if (Array.isArray(firstSel) && firstSel.length >= 2 && firstSel[0] === 3) {
+        const bucket = target['@KEYFRAMES'] = target['@KEYFRAMES'] || {};
+        bucket[firstSel[1]] = expandKeyframeSteps(props?.keyframes ?? '[]');
+      } else if (Array.isArray(firstSel) && firstSel.length >= 2 && firstSel[0] === 4) {
+        const bucket = target['@FONT-FACE'] = target['@FONT-FACE'] || {};
+        bucket[firstSel[1]] = props?.fontface ?? normalizedProps;
+      } else {
+        const pieces = [];
+        for (let i = 0; i < selectors.length; i++) {
+          const sel = selectors[i];
+          if (!Array.isArray(sel) || sel.length < 2) continue;
+          if (sel[0] === 5) {
+            pieces.push(String(sel[1]));
+            continue;
+          }
+          if (pieces.length && pieces[pieces.length - 1] !== '>' && pieces[pieces.length - 1] !== '~' && pieces[pieces.length - 1] !== '+') {
+            pieces.push(' ');
+          }
+          if (sel[0] === 0) pieces.push(`.${sel[1]}`);else if (sel[0] === 1) pieces.push(`#${sel[1]}`);else pieces.push(String(sel[1]));
         }
+        if (pieces.length) target[pieces.join('')] = normalizedProps;
       }
     }
   };
@@ -186,6 +424,50 @@ function addThisPrefix(expr, extraReserved) {
     }).join('');
   }
 }
+function emitTextValueAttr(rawText) {
+  const text = rawText.trim();
+  if (!/\{\{[\s\S]*?\}\}/.test(text)) {
+    return {
+      attr: {
+        value: text.replace(/\s*\n\s*/g, ' ')
+      },
+      needsBind: false
+    };
+  }
+  const parts = text.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\./, ''))) {
+    return {
+      attr: {
+        $value: exprs[0].replace(/^this\./, '')
+      },
+      needsBind: true
+    };
+  }
+  if (exprs.length === 1) {
+    return {
+      attr: {
+        $value: `function () { return ${exprs[0]}; }`
+      },
+      needsBind: true
+    };
+  }
+  const wrapped = exprs.map(e => {
+    if (e.startsWith("'") || e.startsWith('"')) return e;
+    if (/(\|\||&&|\?\s|\+)/.test(e) && !e.startsWith('(')) return `(${e})`;
+    return e;
+  });
+  return {
+    attr: {
+      $value: `function () { return '' + ${wrapped.join(' + ')}; }`
+    },
+    needsBind: true
+  };
+}
 function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
   const tagName = el.tagName === 'img' ? 'image' : el.tagName;
   const node = {
@@ -214,7 +496,7 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
     if (name === 'is' && tagName === 'component') {
       continue; // is attribute handled at runtime
     } else if (name === 'class') {
-      className = value.trim();
+      className = value.replace(/\s+/g, ' ').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());
@@ -346,7 +628,17 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
               hasDynamicInlineStyle = true;
             } else {
               // Static value — accumulate to staticInlineStyle for merging into node.style later
-              staticInlineStyle[key] = propVal;
+              if (key === 'transform') {
+                staticInlineStyle[key] = normalizeCssTransform(propVal) ?? propVal;
+              } else if (key === 'transitionProperty') {
+                staticInlineStyle[key] = normalizeTransitionPropertyValue(propVal);
+              } else if (key === 'animationTimingFunction' || key === 'transitionTimingFunction') {
+                const normalized = normalizeAnimationTimingFunction(propVal);
+                if (normalized !== null) staticInlineStyle[key] = normalized;
+                // else drop — invalid inline value; class-level rule (or default) applies
+              } else {
+                staticInlineStyle[key] = propVal;
+              }
             }
           }
         });
@@ -396,8 +688,11 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
       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) {
+      // Normalize relative path attrs (src, href, alt) to absolute paths from src root.
+      // alt can also carry prose (e.g. "blank") — only rewrite when the value starts with
+      // ./ or ../ so image alt-text prose passes through untouched.
+      const isRelPath = staticVal.startsWith('./') || staticVal.startsWith('../');
+      if (staticVal && isRelPath && (name === 'src' || name === 'href' || name === 'alt') && pageDir) {
         // Resolve relative to pageDir, then make absolute from src root
         const segments = pageDir.split('/').filter(Boolean).concat(staticVal.split('/'));
         const stack = [];
@@ -414,34 +709,9 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
   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, ' ');
-      }
+      const emitted = emitTextValueAttr(child.value);
+      Object.assign(attrObj, emitted.attr);
+      if (emitted.needsBind) hasBind = true;
     }
   }
   // Output in vivo order: attr → bind → class → events → import → style → children
@@ -464,30 +734,88 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
     hasBind = true;
     hasDynClass = true;
   }
-  if (isComponent) {
-    node.bind = 3;
-    node['import'] = importMap[el.tagName];
-  } else if (node['$shown'] !== undefined || node['$repeat'] || node['repeat']?.['$exp']) {
+  if (node['$shown'] !== undefined || node['$repeat'] !== undefined || node['repeat']?.['$exp']) {
     node.bind = 2;
+  } else if (isComponent) {
+    node.bind = 3;
   } else if (hasBind) {
     node.bind = 1;
   }
+  if (isComponent) {
+    node['import'] = importMap[el.tagName];
+  }
   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.
+  // Inline style from styleSheet (class selector + tag selector) + static portion of style="...".
+  // - Static class only:            merge tag + class rules + staticInlineStyle → node.style
+  // - Dynamic class (partly {{}}):  vivo emits merged tag + STATIC class rules into
+  //                                 node.inlineStyle (alongside per-key $foo bindings),
+  //                                 so the runtime still applies them even though the
+  //                                 class list is only known at runtime.
+  // - Fully dynamic (only {{...}}): no static class tokens → tag rules only, still into
+  //                                 inlineStyle.
+  // @media rules are applied at runtime by SDK, not inlined here.
+  // Class rules apply in stylesheet declaration order (later declarations override earlier),
+  // NOT in class-attribute order.
   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}`]);
+    const staticClassTokens = [];
+    if (className) {
+      const parts = className.split(/(\{\{[\s\S]*?\}\})/).filter(Boolean);
+      for (const p of parts) {
+        if (/^\{\{[\s\S]*?\}\}$/.test(p)) continue;
+        for (const tok of p.trim().split(/\s+/)) if (tok) staticClassTokens.push(tok);
       }
     }
-    Object.assign(merged, staticInlineStyle);
-    if (Object.keys(merged).length) node.style = merged;
+    const hasMedia = hasApplicableMediaRule(styleSheet, el.tagName, staticClassTokens);
+    // Skip class-rule merge when the node has any dynamic binding OR any @media
+    // rule that applies to it — runtime must resolve class chain against the
+    // stylesheet for correct priority + media evaluation. Only the user-authored
+    // `style="..."` static portion stays inlined on the node.
+    const skipClassMerge = hasBind || hasMedia;
+    // @media-only presence with no other dynamic binding still needs runtime
+    // re-evaluation, mark bind=1 (vivo convention).
+    if (!node.bind && hasMedia) node.bind = 1;
+    if (skipClassMerge) {
+      const inlined = {
+        ...staticInlineStyle
+      };
+      if (inlined.animationName && styleSheet['@KEYFRAMES']?.[inlined.animationName]) {
+        inlined.animationKeyframes = {
+          [inlined.animationName]: styleSheet['@KEYFRAMES'][inlined.animationName]
+        };
+      }
+      if (Object.keys(inlined).length) {
+        if (hasDynClass) {
+          const existing = node['inlineStyle'] || {};
+          node['inlineStyle'] = {
+            ...inlined,
+            ...existing
+          };
+        } else {
+          node.style = inlined;
+        }
+      }
+    } else {
+      const merged = {};
+      if (styleSheet[el.tagName]) Object.assign(merged, styleSheet[el.tagName]);
+      if (staticClassTokens.length) {
+        const classSet = new Set(staticClassTokens);
+        for (const key of Object.keys(styleSheet)) {
+          if (key.length > 1 && key.startsWith('.') && classSet.has(key.slice(1))) {
+            Object.assign(merged, styleSheet[key]);
+          }
+        }
+      }
+      Object.assign(merged, staticInlineStyle);
+      if (merged.animationName && styleSheet['@KEYFRAMES']?.[merged.animationName]) {
+        merged.animationKeyframes = {
+          [merged.animationName]: styleSheet['@KEYFRAMES'][merged.animationName]
+        };
+      }
+      if (Object.keys(merged).length) node.style = merged;
+    }
   } else if (Object.keys(staticInlineStyle).length) {
     node.style = {
       ...staticInlineStyle
@@ -502,14 +830,12 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
     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 emitted = emitTextValueAttr(child.value);
       const spanNode = {
         type: 'span',
-        attr: {
-          value: text
-        }
+        attr: emitted.attr
       };
+      if (emitted.needsBind) spanNode.bind = 1;
       childNodes.push(spanNode);
     }
   }

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

@@ -10,4 +10,8 @@ declare class ViteCompiler implements ICompiler {
     compile(param: IJavascriptCompileOption): Promise<void>;
     clean(param: ICompileParam & IJavascriptCompileOption): Promise<void>;
 }
+declare function stripDeadDefProp(code: string): string;
+export declare const __test: {
+    stripDeadDefProp: typeof stripDeadDefProp;
+};
 export default ViteCompiler;