ezfw-core 1.0.51 → 1.0.53

package/components/HtmlWrapper.ts

@@ -4,7 +4,7 @@ declare const ez: {
     _createChildElements(items: unknown[], controller: string | null, parent: unknown, css?: string | null, isRepaint?: boolean): Promise<Node[]>;
 };
 
-type DOMEventHandler<E extends Event = Event> = (e: E) => void;
+type DOMEventHandler<E extends Event = Event> = (e: E, component: HtmlWrapper) => void;
 
 export interface HtmlWrapperConfig extends EzBaseComponentConfig {
     eztype: string;
@@ -138,6 +138,9 @@ export class HtmlWrapper extends EzBaseComponent {
     async render(): Promise<HTMLElement> {
         this._domListeners = [];
 
+        // Resolve controller so this.controller is available in event handlers
+        await this._resolveController();
+
         const cfg = this.config;
         const el = document.createElement(cfg.eztype) as HTMLElement;
 
@@ -282,9 +285,10 @@ export class HtmlWrapper extends EzBaseComponent {
         for (const [configKey, eventName] of eventMap) {
             const handler = cfg[configKey];
             if (typeof handler === "function") {
-                el.addEventListener(eventName, handler as EventListener);
+                const wrappedHandler = (e: Event) => (handler as (e: Event, component: HtmlWrapper) => void)(e, this);
+                el.addEventListener(eventName, wrappedHandler);
                 this._domListeners.push(() =>
-                    el.removeEventListener(eventName, handler as EventListener)
+                    el.removeEventListener(eventName, wrappedHandler)
                 );
             }
         }

package/components/tabs/EzTabPanel.ts

@@ -17,6 +17,8 @@ interface TabConfig {
     closable?: boolean;
     items?: unknown[];
     restoreData?: unknown;
+    cls?: string | string[];
+    [key: string]: unknown;
 }
 
 interface SavedTabState {
@@ -146,7 +148,7 @@ export class EzTabPanel extends EzComponent {
 
         // Set up internal structure for EzComponent to render
         this.config.layout = 'vbox';
-        this.config.style = { ...this.config.style, minHeight: 0 };
+        this.config.style = { ...this.config.style, minHeight: '0' };
         this.config.items = [
             {
                 cls: cls('tabHeaderWrapper'),
@@ -154,7 +156,7 @@ export class EzTabPanel extends EzComponent {
                     { cls: cls('tabHeader') }
                 ]
             },
-            { cls: cls('tabContent'), flex: 1, style: { minHeight: 0 } }
+            { cls: cls('tabContent'), flex: 1, style: { minHeight: '0' } }
         ];
 
         // Call super.render() to get element with all framework features (flex, styles, bindings)

package/core/renderer.ts

@@ -362,7 +362,11 @@ export class EzRenderer {
         }
 
         if (Array.isArray(config.items)) {
-            config.items.forEach(child => this.applyControllerBindings(child, controllerName));
+            config.items.forEach(child => {
+                if (typeof child === 'object' && child !== null) {
+                    this.applyControllerBindings(child as ComponentConfig, controllerName);
+                }
+            });
         }
     }
 

package/islands/StaticHtmlRenderer.ts

@@ -175,8 +175,8 @@ export class StaticHtmlRenderer {
             let mockCtrl = null;
 
             // Try to get controller from ez shim (set up by ViteIslandsPlugin)
-            const ez = globalThis.ez;
-            if (definition.controller && ez && ez.getControllerSync) {
+            const ez = (globalThis as unknown as { ez?: { getControllerSync?: (name: string) => { state: Record<string, unknown> } | null } }).ez;
+            if (definition.controller && typeof definition.controller === 'string' && ez && ez.getControllerSync) {
                 mockCtrl = ez.getControllerSync(definition.controller);
             } else if (definition.state) {
                 // Fallback to component's own state

package/islands/ViteIslandsPlugin.ts

@@ -37,6 +37,12 @@ export interface EzIslandsOptions {
      */
     islandsDir?: string;
 
+    /**
+     * Directory containing shared components (loaded for SSR)
+     * @default 'app/components'
+     */
+    componentsDir?: string;
+
     /**
      * Output directory for static files
      * @default 'dist'
@@ -171,6 +177,7 @@ export function ezIslands(options: EzIslandsOptions = {}): Plugin {
     const opts = {
         routesConfig: options.routesConfig || 'app/routes.config.js',
         islandsDir: options.islandsDir || 'app/islands',
+        componentsDir: options.componentsDir || 'app/components',
         outDir: options.outDir || 'dist',
         template: options.template || DEFAULT_TEMPLATE,
         ssr: options.ssr !== false,
@@ -728,7 +735,7 @@ function invalidateModule(server: ViteDevServer, filePath: string): void {
 async function renderPageDev(
     page: PageInfo,
     server: ViteDevServer,
-    opts: { template: string; islandsDir: string },
+    opts: { template: string; islandsDir: string; componentsDir?: string },
     renderer: StaticHtmlRenderer,
     islands: Map<string, IslandInfo>,
     root: string
@@ -766,33 +773,42 @@ async function renderPageDev(
     ez._clear();
     console.error('[Ez SSR] Registry cleared');
 
-    // Load all JS files in the page directory (for child components)
-    // These will call ez.define() which adds to the singleton registry
-    const pageDir = path.dirname(viewPath);
-    const allFiles = await walkDirectory(pageDir);
-    const jsFiles = allFiles
-        .filter(f => f.endsWith('.js') && !f.includes('.test.'))
-        // Sort to load controllers FIRST (they contain state that other components need)
-        .sort((a, b) => {
-            const aIsController = a.includes('Controller');
-            const bIsController = b.includes('Controller');
-            if (aIsController && !bIsController) return -1;
-            if (!aIsController && bIsController) return 1;
-            return 0;
-        });
-    console.error(`[Ez SSR] Found ${jsFiles.length} JS files in ${path.basename(pageDir)}/`);
+    // Helper to load all JS files from a directory
+    const loadComponentsFromDir = async (dir: string, label: string) => {
+        const allFiles = await walkDirectory(dir);
+        const jsFiles = allFiles
+            .filter(f => f.endsWith('.js') && !f.includes('.test.'))
+            // Sort to load controllers FIRST (they contain state that other components need)
+            .sort((a, b) => {
+                const aIsController = a.includes('Controller');
+                const bIsController = b.includes('Controller');
+                if (aIsController && !bIsController) return -1;
+                if (!aIsController && bIsController) return 1;
+                return 0;
+            });
+        console.error(`[Ez SSR] Found ${jsFiles.length} JS files in ${label}`);
 
-    for (const file of jsFiles) {
-        try {
-            console.error(`[Ez SSR] Loading: ${path.basename(file)}`);
-            // Invalidate in module graph to force re-execution
-            invalidateModule(server, file);
-            await server.ssrLoadModule(file);
-        } catch (err: any) {
-            console.error(`[Ez SSR] FAILED: ${path.basename(file)} - ${err.message}`);
+        for (const file of jsFiles) {
+            try {
+                console.error(`[Ez SSR] Loading: ${path.basename(file)}`);
+                invalidateModule(server, file);
+                await server.ssrLoadModule(file);
+            } catch (err: any) {
+                console.error(`[Ez SSR] FAILED: ${path.basename(file)} - ${err.message}`);
+            }
         }
+    };
+
+    // Load shared components first (if componentsDir is configured)
+    const componentsDir = opts.componentsDir ? path.resolve(root, opts.componentsDir) : path.resolve(root, 'app/components');
+    if (fs.existsSync(componentsDir)) {
+        await loadComponentsFromDir(componentsDir, 'app/components/');
     }
 
+    // Then load page-specific components (may override shared ones)
+    const pageDir = path.dirname(viewPath);
+    await loadComponentsFromDir(pageDir, `${path.basename(pageDir)}/`);
+
     console.error(`[Ez SSR] Registry now has: ${Object.keys(ez._registry).join(', ') || 'EMPTY'}`);
 
     // Get the page definition from SSR registry (already loaded above)

package/package.json

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