ezfw-core 1.0.60 → 1.0.62

package/islands/StaticHtmlRenderer.js

@@ -168,7 +168,11 @@ export class StaticHtmlRenderer {
         const eztype = config.eztype || 'div';
         // Check if it's a registered component
         if (ctx.registry.has(eztype)) {
-            return this.renderComponent(eztype, ctx, config.props || {});
+            // Pass the entire config as props (excluding eztype and items which are structural)
+            // Props can be either in config.props or directly on the config object
+            const { eztype: _, items: __, ...configProps } = config;
+            const mergedProps = { ...configProps, ...(config.props || {}) };
+            return this.renderComponent(eztype, ctx, mergedProps);
         }
         // Check if eztype starts with uppercase (custom component)
         if (eztype[0] === eztype[0].toUpperCase() && eztype !== 'EzComponent') {

package/islands/StaticHtmlRenderer.ts

@@ -266,7 +266,11 @@ export class StaticHtmlRenderer {
 
         // Check if it's a registered component
         if (ctx.registry.has(eztype)) {
-            return this.renderComponent(eztype, ctx, config.props || {});
+            // Pass the entire config as props (excluding eztype and items which are structural)
+            // Props can be either in config.props or directly on the config object
+            const { eztype: _, items: __, ...configProps } = config;
+            const mergedProps = { ...configProps, ...(config.props || {}) };
+            return this.renderComponent(eztype, ctx, mergedProps);
         }
 
         // Check if eztype starts with uppercase (custom component)

package/islands/ssrShim.js

@@ -18,6 +18,72 @@ if (!globalThis.__ezSSRControllers) {
 const ssrRegistry = globalThis.__ezSSRRegistry;
 const ssrControllers = globalThis.__ezSSRControllers;
 
+// Framework components for SSR (declarative versions of class-based Ez components)
+function registerFrameworkComponents() {
+    ssrRegistry['EzIcon'] = {
+        template(props) {
+            const type = props.type || 'solid';
+            const classes = [`fa-${type}`];
+            if (props.fa) classes.push(`fa-${props.fa}`);
+            if (props.spin) classes.push('fa-spin');
+            if (props.pulse) classes.push('fa-pulse');
+            if (props.bounce) classes.push('fa-bounce');
+
+            const sizeMap = {
+                xxs: '0.65em', xs: '0.75em', sm: '0.875em',
+                lg: '1.25em', xl: '1.5em', '2x': '2em',
+                '3x': '3em', '4x': '4em', '5x': '5em'
+            };
+            const semanticColors = {
+                primary: 'var(--ez-primary)', secondary: 'var(--ez-secondary)',
+                success: 'var(--ez-success)', danger: 'var(--ez-danger)',
+                warning: 'var(--ez-warning)', info: 'var(--ez-info)',
+                muted: 'var(--ez-muted)', light: 'var(--ez-light)', dark: 'var(--ez-dark)'
+            };
+
+            return {
+                eztype: 'i',
+                cls: classes.join(' '),
+                style: {
+                    fontSize: props.size ? (sizeMap[props.size] || props.size) : undefined,
+                    color: props.color ? (semanticColors[props.color] || props.color) : undefined
+                }
+            };
+        }
+    };
+
+    ssrRegistry['EzLabel'] = {
+        template(props) {
+            return {
+                eztype: 'span',
+                text: props.text || '',
+                cls: props.cls,
+                style: props.style
+            };
+        }
+    };
+
+    ssrRegistry['EzButton'] = {
+        template(props) {
+            const items = [];
+            if (props.iconCls) {
+                items.push({ eztype: 'i', cls: props.iconCls });
+            }
+            if (props.text) {
+                items.push({ eztype: 'span', text: props.text });
+            }
+            return {
+                eztype: 'button',
+                cls: props.cls,
+                style: props.style,
+                attr: { type: props.type || 'button', disabled: props.disabled },
+                items: items.length > 0 ? items : undefined,
+                text: items.length === 0 ? props.text : undefined
+            };
+        }
+    };
+}
+
 const ezSSR = {
     _registry: ssrRegistry,
     _controllers: ssrControllers,
@@ -66,88 +132,25 @@ const ezSSR = {
         return ssrRegistry[name];
     },
 
-    // Clear registry (useful between renders)
+    // Clear registry (useful between renders) - preserves framework components
     _clear() {
         Object.keys(ssrRegistry).forEach(k => delete ssrRegistry[k]);
         Object.keys(ssrControllers).forEach(k => delete ssrControllers[k]);
+        // Re-register framework components after clear
+        registerFrameworkComponents();
     }
 };
 
 // Make available globally for SSR context
-// Always set/update the global ez reference
 globalThis.ez = ezSSR;
 if (typeof global !== 'undefined') {
     global.ez = ezSSR;
 }
 
-console.log('[SSR Shim] Initialized - ez is now available globally');
-
-// Register framework components for SSR
-// These are declarative versions of the class-based Ez components
-
-ezSSR.define('EzIcon', {
-    template(props) {
-        const type = props.type || 'solid';
-        const classes = [`fa-${type}`];
-        if (props.fa) classes.push(`fa-${props.fa}`);
-        if (props.spin) classes.push('fa-spin');
-        if (props.pulse) classes.push('fa-pulse');
-        if (props.bounce) classes.push('fa-bounce');
-
-        const sizeMap = {
-            xxs: '0.65em', xs: '0.75em', sm: '0.875em',
-            lg: '1.25em', xl: '1.5em', '2x': '2em',
-            '3x': '3em', '4x': '4em', '5x': '5em'
-        };
-        const semanticColors = {
-            primary: 'var(--ez-primary)', secondary: 'var(--ez-secondary)',
-            success: 'var(--ez-success)', danger: 'var(--ez-danger)',
-            warning: 'var(--ez-warning)', info: 'var(--ez-info)',
-            muted: 'var(--ez-muted)', light: 'var(--ez-light)', dark: 'var(--ez-dark)'
-        };
-
-        return {
-            eztype: 'i',
-            cls: classes.join(' '),
-            style: {
-                fontSize: props.size ? (sizeMap[props.size] || props.size) : undefined,
-                color: props.color ? (semanticColors[props.color] || props.color) : undefined
-            }
-        };
-    }
-});
-
-ezSSR.define('EzLabel', {
-    template(props) {
-        return {
-            eztype: 'span',
-            text: props.text || '',
-            cls: props.cls,
-            style: props.style
-        };
-    }
-});
-
-ezSSR.define('EzButton', {
-    template(props) {
-        const items = [];
-        if (props.iconCls) {
-            items.push({ eztype: 'i', cls: props.iconCls });
-        }
-        if (props.text) {
-            items.push({ eztype: 'span', text: props.text });
-        }
-        return {
-            eztype: 'button',
-            cls: props.cls,
-            style: props.style,
-            attr: { type: props.type || 'button', disabled: props.disabled },
-            items: items.length > 0 ? items : undefined,
-            text: items.length === 0 ? props.text : undefined
-        };
-    }
-});
+// Register framework components on init
+registerFrameworkComponents();
 
+console.log('[SSR Shim] Initialized - ez is now available globally');
 console.log('[SSR Shim] Framework components registered: EzIcon, EzLabel, EzButton');
 
 export { ezSSR as ez };

package/package.json

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