ezfw-core 1.0.55 → 1.0.57

package/islands/StaticHtmlRenderer.js

@@ -20,7 +20,11 @@ const BOOLEAN_ATTRS = new Set([
 const SKIP_ATTRS = new Set([
     'eztype', 'items', 'template', 'props', 'bind', 'controller',
     'load', 'state', 'island', 'static', 'onMount', 'onVisible',
-    'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr', 'layout'
+    'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr',
+    // Ez shortcuts (converted to styles)
+    'layout', 'flex', 'gap', 'bg',
+    'px', 'py', 'pt', 'pb', 'pl', 'pr',
+    'mx', 'my', 'mt', 'mb', 'ml', 'mr'
 ]);
 // Event attributes to skip in static render
 const EVENT_ATTRS = new Set([
@@ -110,6 +114,9 @@ export class StaticHtmlRenderer {
         if (definition.eztype && !config.eztype) {
             config.eztype = definition.eztype;
         }
+        if (definition.props) {
+            config.props = { ...definition.props, ...(config.props || {}) };
+        }
         if (definition.cls) {
             config.cls = this.mergeCls(config.cls, definition.cls);
         }
@@ -225,9 +232,48 @@ export class StaticHtmlRenderer {
                 parts.push(`class="${this.escapeAttr(classes)}"`);
             }
         }
+        // Convert Ez shortcuts to CSS styles
+        const shortcutStyles = {};
+        // Layout shortcuts
+        if (config.layout === 'hbox') {
+            shortcutStyles.display = 'flex';
+            shortcutStyles.flexDirection = 'row';
+        } else if (config.layout === 'vbox') {
+            shortcutStyles.display = 'flex';
+            shortcutStyles.flexDirection = 'column';
+        }
+        // Flex shortcut
+        if (config.flex !== undefined) {
+            shortcutStyles.flex = String(config.flex);
+        }
+        // Gap shortcut (in rem)
+        if (config.gap !== undefined) {
+            shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : config.gap;
+        }
+        // Background shortcut
+        if (config.bg !== undefined) {
+            shortcutStyles.background = String(config.bg);
+        }
+        // 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); }
+        // 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); }
+        // Merge shortcut styles with explicit styles (explicit wins)
+        const mergedStyles = { ...shortcutStyles, ...(config.style || {}) };
         // Handle style
-        if (config.style && typeof config.style === 'object') {
-            const styleStr = Object.entries(config.style)
+        if (Object.keys(mergedStyles).length > 0) {
+            const styleStr = Object.entries(mergedStyles)
                 .map(([key, value]) => {
                 // Convert camelCase to kebab-case
                 const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -277,11 +323,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

@@ -74,7 +74,11 @@ const BOOLEAN_ATTRS = new Set([
 const SKIP_ATTRS = new Set([
     'eztype', 'items', 'template', 'props', 'bind', 'controller',
     'load', 'state', 'island', 'static', 'onMount', 'onVisible',
-    'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr', 'layout'
+    'onDestroy', 'css', '_ezAfterRender', '_styleModule', 'attr',
+    // Ez shortcuts (converted to styles)
+    'layout', 'flex', 'gap', 'bg',
+    'px', 'py', 'pt', 'pb', 'pl', 'pr',
+    'mx', 'my', 'mt', 'mb', 'ml', 'mr'
 ]);
 
 // Event attributes to skip in static render
@@ -194,6 +198,9 @@ export class StaticHtmlRenderer {
         if (definition.eztype && !config.eztype) {
             config.eztype = definition.eztype as string;
         }
+        if (definition.props) {
+            config.props = { ...(definition.props as Record<string, unknown>), ...(config.props as Record<string, unknown> || {}) };
+        }
         if (definition.cls) {
             config.cls = this.mergeCls(config.cls, definition.cls);
         }
@@ -339,9 +346,56 @@ export class StaticHtmlRenderer {
             }
         }
 
+        // Convert Ez shortcuts to CSS styles
+        const shortcutStyles: Record<string, string> = {};
+
+        // Layout shortcuts
+        if (config.layout === 'hbox') {
+            shortcutStyles.display = 'flex';
+            shortcutStyles.flexDirection = 'row';
+        } else if (config.layout === 'vbox') {
+            shortcutStyles.display = 'flex';
+            shortcutStyles.flexDirection = 'column';
+        }
+
+        // Flex shortcut
+        if (config.flex !== undefined) {
+            shortcutStyles.flex = String(config.flex);
+        }
+
+        // Gap shortcut (in rem)
+        if (config.gap !== undefined) {
+            shortcutStyles.gap = typeof config.gap === 'number' ? `${config.gap * 0.5}rem` : config.gap;
+        }
+
+        // Background shortcut
+        if (config.bg !== undefined) {
+            shortcutStyles.background = String(config.bg);
+        }
+
+        // Padding shortcuts (in rem)
+        const toRem = (v: unknown) => 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); }
+
+        // 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); }
+
+        // Merge shortcut styles with explicit styles (explicit wins)
+        const mergedStyles = { ...shortcutStyles, ...(config.style as Record<string, string> || {}) };
+
         // Handle style
-        if (config.style && typeof config.style === 'object') {
-            const styleStr = Object.entries(config.style)
+        if (Object.keys(mergedStyles).length > 0) {
+            const styleStr = Object.entries(mergedStyles)
                 .map(([key, value]) => {
                     // Convert camelCase to kebab-case
                     const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();

package/package.json

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