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

package/lib/compiler/javascript/TemplateCompiler.js

@@ -595,7 +595,7 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
       }
     } else if (name === 'style') {
       if (/^\{\{[^}]+\}\}$/.test(value.trim())) {
-        // Pure dynamic style binding: style="{{variable}}"
+        // style="{{variable}}" — whole style bound to a single variable.
         const inner = value.replace(/\{\{|\}\}/g, '').trim();
         if (/^[a-zA-Z_$][\w$.]*$/.test(inner)) {
           node['$style'] = inner;
@@ -604,46 +604,51 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
         }
         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 = {};
+        // Per-property scan. Any dynamic entry promotes the whole attribute
+        // to $style-as-object, merging static and dynamic keys together
+        // (dynamic → `$key: function`, static → `key: value`). All-static
+        // falls back to staticInlineStyle for the pure-static merge path.
+        const dynEntries = {};
+        const staticEntries = {};
         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
-              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;
-              }
+          if (!prop || !vals.length) return;
+          const key = prop.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+          const propVal = vals.join(':').trim();
+          if (/\{\{[\s\S]*?\}\}/.test(propVal)) {
+            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(' + ')}`;
+            dynEntries['$' + key] = `function () { return ${fullExpr}; }`;
+            hasDynamicInlineStyle = true;
+          } else {
+            let normalized = propVal;
+            if (key === 'transform') {
+              normalized = normalizeCssTransform(propVal) ?? propVal;
+            } else if (key === 'transitionProperty') {
+              normalized = normalizeTransitionPropertyValue(propVal);
+            } else if (key === 'animationTimingFunction' || key === 'transitionTimingFunction') {
+              const n = normalizeAnimationTimingFunction(propVal);
+              if (n === null) return;
+              normalized = n;
             }
+            staticEntries[key] = normalized;
           }
         });
-        if (Object.keys(inlineStyle).length) node['inlineStyle'] = inlineStyle;
-        if (hasDynamicInlineStyle) hasBind = true;
+        if (hasDynamicInlineStyle) {
+          node['$style'] = {
+            ...staticEntries,
+            ...dynEntries
+          };
+          hasBind = true;
+        } else {
+          for (const [k, v] of Object.entries(staticEntries)) staticInlineStyle[k] = v;
+        }
       }
     } else if (/\{\{.*\}\}/.test(value)) {
       // Dynamic binding - build expression from mixed static/dynamic parts
@@ -786,17 +791,7 @@ function elementToJson(el, styleSheet, importMap, scopeVars, pageDir) {
           [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;
-        }
-      }
+      if (Object.keys(inlined).length) node.style = inlined;
     } else {
       const merged = {};
       if (styleSheet[el.tagName]) Object.assign(merged, styleSheet[el.tagName]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiot-toolkit/aiotpack",
-  "version": "2.1.0-prender.10",
+  "version": "2.1.0-prender.11",
   "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.10",
-    "@aiot-toolkit/parser": "2.1.0-prender.10",
-    "@aiot-toolkit/shared-utils": "2.1.0-prender.10",
+    "@aiot-toolkit/generator": "2.1.0-prender.11",
+    "@aiot-toolkit/parser": "2.1.0-prender.11",
+    "@aiot-toolkit/shared-utils": "2.1.0-prender.11",
     "@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.10",
+    "file-lane": "2.1.0-prender.11",
     "file-loader": "^6.2.0",
     "fs-extra": "^11.2.0",
     "jsrsasign": "^11.1.0",