@aiot-toolkit/aiotpack 2.1.0-prender.7 → 2.1.0-prender.9

package/lib/compiler/javascript/TemplateCompiler.js

@@ -13,6 +13,126 @@ 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
 
+// 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');
@@ -485,7 +605,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;
+              }
             }
           }
         });
@@ -581,28 +711,45 @@ 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="..."
   // 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.
+  // - 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) {
-      const classSet = new Set(className.split(/\s+/).filter(Boolean));
+    // Collect class tokens that are LITERAL strings (skip `{{ ... }}` binding parts).
+    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);
+      }
+    }
+    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]);
@@ -610,7 +757,22 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
       }
     }
     Object.assign(merged, staticInlineStyle);
-    if (Object.keys(merged).length) node.style = merged;
+    if (merged.animationName && styleSheet['@KEYFRAMES']?.[merged.animationName]) {
+      merged.animationKeyframes = {
+        [merged.animationName]: styleSheet['@KEYFRAMES'][merged.animationName]
+      };
+    }
+    if (Object.keys(merged).length) {
+      if (hasDynClass) {
+        const existing = node['inlineStyle'] || {};
+        node['inlineStyle'] = {
+          ...merged,
+          ...existing
+        };
+      } else {
+        node.style = merged;
+      }
+    }
   } else if (Object.keys(staticInlineStyle).length) {
     node.style = {
       ...staticInlineStyle

package/lib/compiler/javascript/ViteCompiler.js

@@ -238,6 +238,30 @@ class ViteCompiler {
             }
           },
           plugins: [{
+            name: 'image-asset-string',
+            enforce: 'pre',
+            load(id) {
+              // require("./x.png") in .ux <script> must resolve to a path string,
+              // matching webpack file-loader / vivo blueos-pack semantics. Without
+              // this hook rolldown treats each image as an ES module and emits
+              // `(init_x(), __toCommonJS(x_exports))` — the site assigns
+              // `{ default: fn }` to src and runtime cannot render.
+              const match = id.match(/\.(png|jpe?g|gif|svg|webp|bmp|ico)(\?.*)?$/i);
+              if (!match) return null;
+              const filePath = id.replace(/\?.*$/, '');
+              if (!_fsExtra.default.existsSync(filePath)) return null;
+              const relFromSrc = _path.default.relative(srcPath, filePath).split(_path.default.sep).join('/');
+              // Assets outside src/ (typically node_modules) fall through to the
+              // default asset handler — the caller is responsible for their path
+              // resolution. Vivo blueos-pack + webpack file-loader use rpk-root
+              // absolute paths (`/common/...`, `/dynamicAssets/name-hash.png`);
+              // runtime <image src> resolves against the rpk root, so relative
+              // `./common/...` from a nested page directory would misdirect.
+              if (relFromSrc.startsWith('..')) return null;
+              const runtimePath = '/' + relFromSrc;
+              return `module.exports = ${JSON.stringify(runtimePath)};`;
+            }
+          }, {
             name: "cjs-shim",
             enforce: "pre",
             load(id) {

package/lib/compiler/javascript/vela/utils/ZipUtil.d.ts

@@ -36,8 +36,11 @@ declare class ZipUtil {
      * Build the blueos-pack compatible "wrapped release" RPK.
      * Outer RPK (zip) contains:
      *   - manifest.json (top-level metadata)
-     *   - logo.<ext> (icon - kept as png since VUG conversion is out of scope)
+     *   - <icon-basename>.<ext> (icon - kept as png since VUG conversion is out of scope,
+     *     basename taken from manifest.icon so runtime + IDE previews can locate it)
      *   - META-INF/CERT (signature)
+     *   - META-INF/build.txt (key=value pipeline info; includes `json=true`
+     *     so downstream can distinguish this from legacy webpack output)
      *   - <package>.vru (multi-file VRU containing all build artifacts)
      */
     private static createWrappedReleaseRpk;

package/lib/compiler/javascript/vela/utils/ZipUtil.js

@@ -88,8 +88,11 @@ class ZipUtil {
    * Build the blueos-pack compatible "wrapped release" RPK.
    * Outer RPK (zip) contains:
    *   - manifest.json (top-level metadata)
-   *   - logo.<ext> (icon - kept as png since VUG conversion is out of scope)
+   *   - <icon-basename>.<ext> (icon - kept as png since VUG conversion is out of scope,
+   *     basename taken from manifest.icon so runtime + IDE previews can locate it)
    *   - META-INF/CERT (signature)
+   *   - META-INF/build.txt (key=value pipeline info; includes `json=true`
+   *     so downstream can distinguish this from legacy webpack output)
    *   - <package>.vru (multi-file VRU containing all build artifacts)
    */
   static async createWrappedReleaseRpk(param, config, files, signConfig) {
@@ -146,14 +149,16 @@ class ZipUtil {
       });
     }
 
-    // Add icon (as-is, no VUG conversion)
+    // Add icon (as-is, no VUG conversion). Vivo blueos-pack preserves the icon
+    // basename from manifest.icon (e.g. `/resources/base/media/icon_small.png`
+    // → `icon_small.vug` at rpk root) so runtime + IDE previews can look it up
+    // by the manifest-declared name.
     if (config.icon) {
       const iconPath = _path.default.join(buildDir, config.icon.replace(/^\//, ''));
       if (_fsExtra.default.existsSync(iconPath)) {
         const iconBuf = _fsExtra.default.readFileSync(iconPath);
-        const iconExt = _path.default.extname(iconPath) || '.png';
         outerPackage.addResource({
-          fileBuildPath: `logo${iconExt}`,
+          fileBuildPath: _path.default.basename(iconPath),
           fileContentBuffer: iconBuf,
           fileContentDigest: _sharedUtils.CommonUtil.calcDataDigest(iconBuf)
         });
@@ -167,6 +172,18 @@ class ZipUtil {
       fileContentDigest: _sharedUtils.CommonUtil.calcDataDigest(vruBuffer)
     });
 
+    // Add META-INF/build.txt — key=value lines matching what UxAfterCompile
+    // writes for flat-mode rpks. Historical downstream (IDE preview, cli
+    // rebuild) reads this to identify the source toolkit / pipeline.
+    const buildInfo = this.createComment(param);
+    const buildTxt = Object.keys(buildInfo).map(k => `${k}=${buildInfo[k]}`).join('\n');
+    const buildTxtBuf = Buffer.from(buildTxt, 'utf-8');
+    outerPackage.addResource({
+      fileBuildPath: ZipUtil.BUILD_FILE_PATH,
+      fileContentBuffer: buildTxtBuf,
+      fileContentDigest: _sharedUtils.CommonUtil.calcDataDigest(buildTxtBuf)
+    });
+
     // Add CERT if present
     const certAbsPath = _path.default.join(buildDir, ZipUtil.CERT_PATH);
     if (_fsExtra.default.existsSync(certAbsPath)) {
@@ -367,7 +384,8 @@ class ZipUtil {
       node: process.version,
       platform: process.platform,
       arch: process.arch,
-      component: true
+      component: true,
+      json: true
     };
     return obj;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiot-toolkit/aiotpack",
-  "version": "2.1.0-prender.7",
+  "version": "2.1.0-prender.9",
   "description": "The process tool for packaging aiot projects.",
   "keywords": [
     "aiotpack"
@@ -19,16 +19,16 @@
     "test": "node ./__tests__/aiotpack.test.js"
   },
   "dependencies": {
-    "@aiot-toolkit/generator": "2.1.0-prender.7",
-    "@aiot-toolkit/parser": "2.1.0-prender.7",
-    "@aiot-toolkit/shared-utils": "2.1.0-prender.7",
+    "@aiot-toolkit/generator": "2.1.0-prender.9",
+    "@aiot-toolkit/parser": "2.1.0-prender.9",
+    "@aiot-toolkit/shared-utils": "2.1.0-prender.9",
     "@hap-toolkit/aaptjs": "^2.0.0",
     "@rspack/core": "^1.3.9",
     "acorn": "^8.16.0",
     "aiot-parse5": "^1.0.2",
     "astring": "^1.9.0",
     "babel-loader": "^9.1.3",
-    "file-lane": "2.1.0-prender.7",
+    "file-lane": "2.1.0-prender.9",
     "file-loader": "^6.2.0",
     "fs-extra": "^11.2.0",
     "jsrsasign": "^11.1.0",