ezfw-core 1.0.57 → 1.0.58

package/islands/StaticHtmlRenderer.js

@@ -36,6 +36,7 @@ let islandIdCounter = 0;
  * Main static renderer class
  */
 export class StaticHtmlRenderer {
+    analyzer;
     constructor() {
         this.analyzer = analyzer;
     }
@@ -126,6 +127,13 @@ export class StaticHtmlRenderer {
         if (definition.attr) {
             config.attr = { ...definition.attr, ...(config.attr || {}) };
         }
+        // Merge Ez shortcuts from definition (layout, flex, gap, padding, margin, bg)
+        const shortcuts = ['layout', 'flex', 'gap', 'bg', 'px', 'py', 'pt', 'pb', 'pl', 'pr', 'mx', 'my', 'mt', 'mb', 'ml', 'mr'];
+        for (const key of shortcuts) {
+            if (definition[key] !== undefined && config[key] === undefined) {
+                config[key] = definition[key];
+            }
+        }
         // Render the config tree
         return this.renderConfig(config, ctx);
     }
@@ -238,7 +246,8 @@ export class StaticHtmlRenderer {
         if (config.layout === 'hbox') {
             shortcutStyles.display = 'flex';
             shortcutStyles.flexDirection = 'row';
-        } else if (config.layout === 'vbox') {
+        }
+        else if (config.layout === 'vbox') {
             shortcutStyles.display = 'flex';
             shortcutStyles.flexDirection = 'column';
         }
@@ -248,7 +257,7 @@ export class StaticHtmlRenderer {
         }
         // Gap shortcut (in rem)
         if (config.gap !== undefined) {
-            shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : config.gap;
+            shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : String(config.gap);
         }
         // Background shortcut
         if (config.bg !== undefined) {
@@ -256,19 +265,47 @@ export class StaticHtmlRenderer {
         }
         // Padding shortcuts (in rem)
         const toRem = (v) => typeof v === 'number' ? `${v * 0.5}rem` : String(v);
-        if (config.px !== undefined) { shortcutStyles.paddingLeft = toRem(config.px); shortcutStyles.paddingRight = toRem(config.px); }
-        if (config.py !== undefined) { shortcutStyles.paddingTop = toRem(config.py); shortcutStyles.paddingBottom = toRem(config.py); }
-        if (config.pt !== undefined) { shortcutStyles.paddingTop = toRem(config.pt); }
-        if (config.pb !== undefined) { shortcutStyles.paddingBottom = toRem(config.pb); }
-        if (config.pl !== undefined) { shortcutStyles.paddingLeft = toRem(config.pl); }
-        if (config.pr !== undefined) { shortcutStyles.paddingRight = toRem(config.pr); }
+        if (config.px !== undefined) {
+            shortcutStyles.paddingLeft = toRem(config.px);
+            shortcutStyles.paddingRight = toRem(config.px);
+        }
+        if (config.py !== undefined) {
+            shortcutStyles.paddingTop = toRem(config.py);
+            shortcutStyles.paddingBottom = toRem(config.py);
+        }
+        if (config.pt !== undefined) {
+            shortcutStyles.paddingTop = toRem(config.pt);
+        }
+        if (config.pb !== undefined) {
+            shortcutStyles.paddingBottom = toRem(config.pb);
+        }
+        if (config.pl !== undefined) {
+            shortcutStyles.paddingLeft = toRem(config.pl);
+        }
+        if (config.pr !== undefined) {
+            shortcutStyles.paddingRight = toRem(config.pr);
+        }
         // Margin shortcuts (in rem)
-        if (config.mx !== undefined) { shortcutStyles.marginLeft = toRem(config.mx); shortcutStyles.marginRight = toRem(config.mx); }
-        if (config.my !== undefined) { shortcutStyles.marginTop = toRem(config.my); shortcutStyles.marginBottom = toRem(config.my); }
-        if (config.mt !== undefined) { shortcutStyles.marginTop = toRem(config.mt); }
-        if (config.mb !== undefined) { shortcutStyles.marginBottom = toRem(config.mb); }
-        if (config.ml !== undefined) { shortcutStyles.marginLeft = toRem(config.ml); }
-        if (config.mr !== undefined) { shortcutStyles.marginRight = toRem(config.mr); }
+        if (config.mx !== undefined) {
+            shortcutStyles.marginLeft = toRem(config.mx);
+            shortcutStyles.marginRight = toRem(config.mx);
+        }
+        if (config.my !== undefined) {
+            shortcutStyles.marginTop = toRem(config.my);
+            shortcutStyles.marginBottom = toRem(config.my);
+        }
+        if (config.mt !== undefined) {
+            shortcutStyles.marginTop = toRem(config.mt);
+        }
+        if (config.mb !== undefined) {
+            shortcutStyles.marginBottom = toRem(config.mb);
+        }
+        if (config.ml !== undefined) {
+            shortcutStyles.marginLeft = toRem(config.ml);
+        }
+        if (config.mr !== undefined) {
+            shortcutStyles.marginRight = toRem(config.mr);
+        }
         // Merge shortcut styles with explicit styles (explicit wins)
         const mergedStyles = { ...shortcutStyles, ...(config.style || {}) };
         // Handle style
@@ -323,11 +360,11 @@ export class StaticHtmlRenderer {
         if (islands.length === 0)
             return '';
         const islandsJson = JSON.stringify(islands);
-        return `
-<script type="module">
-import { hydrateIslands } from '/ez/islands/runtime.js';
-window.__EZ_ISLANDS__ = ${islandsJson};
-hydrateIslands(window.__EZ_ISLANDS__);
+        return `
+<script type="module">
+import { hydrateIslands } from '/ez/islands/runtime.js';
+window.__EZ_ISLANDS__ = ${islandsJson};
+hydrateIslands(window.__EZ_ISLANDS__);
 </script>`;
     }
     /**

package/islands/StaticHtmlRenderer.ts

@@ -211,6 +211,14 @@ export class StaticHtmlRenderer {
             config.attr = { ...(definition.attr as Record<string, unknown>), ...(config.attr as Record<string, unknown> || {}) };
         }
 
+        // Merge Ez shortcuts from definition (layout, flex, gap, padding, margin, bg)
+        const shortcuts = ['layout', 'flex', 'gap', 'bg', 'px', 'py', 'pt', 'pb', 'pl', 'pr', 'mx', 'my', 'mt', 'mb', 'ml', 'mr'] as const;
+        for (const key of shortcuts) {
+            if ((definition as Record<string, unknown>)[key] !== undefined && (config as Record<string, unknown>)[key] === undefined) {
+                (config as Record<string, unknown>)[key] = (definition as Record<string, unknown>)[key];
+            }
+        }
+
         // Render the config tree
         return this.renderConfig(config, ctx);
     }
@@ -365,7 +373,7 @@ export class StaticHtmlRenderer {
 
         // Gap shortcut (in rem)
         if (config.gap !== undefined) {
-            shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : config.gap;
+            shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : String(config.gap);
         }
 
         // Background shortcut

package/islands/analyzer.js

@@ -58,9 +58,7 @@ const BROWSER_API_PATTERNS = [
  * Main analyzer class
  */
 export class ComponentAnalyzer {
-    constructor() {
-        this.cache = new Map();
-    }
+    cache = new Map();
     /**
      * Analyze a component definition and determine its type
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",