ezfw-core 1.0.30 → 1.0.32

package/components/drawer/EzDrawer.module.scss

@@ -0,0 +1,105 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+
+    &.open {
+        opacity: 1;
+        visibility: visible;
+    }
+}
+
+.drawer {
+    position: fixed;
+    z-index: 1001;
+    background: var(--ez-surface);
+    box-shadow: var(--ez-shadow-lg);
+    transition: transform 0.3s ease;
+    overflow: auto;
+
+    // Positions
+    &.left {
+        top: 0;
+        left: 0;
+        height: 100%;
+        transform: translateX(-100%);
+    }
+
+    &.right {
+        top: 0;
+        right: 0;
+        height: 100%;
+        transform: translateX(100%);
+    }
+
+    &.top {
+        top: 0;
+        left: 0;
+        width: 100%;
+        transform: translateY(-100%);
+    }
+
+    &.bottom {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        transform: translateY(100%);
+    }
+
+    // Open state
+    &.open {
+        &.left,
+        &.right {
+            transform: translateX(0);
+        }
+
+        &.top,
+        &.bottom {
+            transform: translateY(0);
+        }
+    }
+
+    // Sizes for left/right
+    &.left,
+    &.right {
+        &.sm {
+            width: 280px;
+        }
+
+        &.md {
+            width: 400px;
+        }
+
+        &.lg {
+            width: 600px;
+        }
+    }
+
+    // Sizes for top/bottom
+    &.top,
+    &.bottom {
+        &.sm {
+            height: 200px;
+        }
+
+        &.md {
+            height: 300px;
+        }
+
+        &.lg {
+            height: 450px;
+        }
+    }
+}
+
+.content {
+    height: 100%;
+    overflow: auto;
+}

package/components/drawer/EzDrawer.ts

@@ -0,0 +1,92 @@
+import styles from './EzDrawer.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent } from '../EzBaseComponent.js';
+
+const css = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    define(name: string, component: unknown): void;
+};
+
+export interface DrawerInstance {
+    close: () => void;
+}
+
+interface EzDrawerConfig {
+    props?: {
+        position?: 'left' | 'right' | 'top' | 'bottom';
+        size?: 'sm' | 'md' | 'lg' | string;
+        closeOnOverlayClick?: boolean;
+        onOverlayClick?: () => void;
+        items?: unknown[];
+        _drawerInstance?: DrawerInstance;
+    };
+    [key: string]: unknown;
+}
+
+export class EzDrawer extends EzBaseComponent {
+    static eztype = 'EzDrawer';
+    declare config: EzDrawerConfig;
+
+    async render(): Promise<HTMLDivElement> {
+        const props = this.config.props || this.config;
+
+        const {
+            position = 'left',
+            size = 'md',
+            closeOnOverlayClick = true,
+            onOverlayClick,
+            items = [],
+            _drawerInstance
+        } = props as EzDrawerConfig['props'] & { [key: string]: unknown };
+
+        const isPresetSize = ['sm', 'md', 'lg'].includes(size as string);
+
+        const overlay = await ez._createElement({
+            eztype: 'div',
+            cls: css('overlay'),
+            onClick: () => {
+                if (onOverlayClick) {
+                    onOverlayClick();
+                }
+                if (closeOnOverlayClick) {
+                    _drawerInstance?.close();
+                }
+            }
+        }) as HTMLDivElement;
+
+        const drawerClasses = [css('drawer'), css(position)];
+        if (isPresetSize) {
+            drawerClasses.push(css(size as string));
+        }
+
+        const drawerStyle: Record<string, string> = {};
+        if (!isPresetSize && size) {
+            if (position === 'left' || position === 'right') {
+                drawerStyle.width = size as string;
+            } else {
+                drawerStyle.height = size as string;
+            }
+        }
+
+        const drawer = await ez._createElement({
+            eztype: 'div',
+            cls: drawerClasses.join(' '),
+            style: Object.keys(drawerStyle).length ? drawerStyle : undefined,
+            onClick: (e: Event) => e.stopPropagation(),
+            items: [{
+                eztype: 'div',
+                cls: css('content'),
+                controller: this.config.controller,
+                items
+            }]
+        }) as HTMLDivElement;
+
+        overlay.appendChild(drawer);
+
+        return overlay;
+    }
+}
+
+ez.define('EzDrawer', EzDrawer);

package/core/ez.ts

@@ -218,6 +218,7 @@ export interface EzFramework {
     dialog: unknown;
     toast: unknown;
     mask: unknown;
+    drawer: unknown;
     setTheme(themeName: string): void;
     getTheme(): string;
     getAvailableThemes(): string[];
@@ -583,6 +584,10 @@ const ez: EzFramework = {
         return this._services?.mask;
     },
 
+    get drawer(): unknown {
+        return this._services?.drawer;
+    },
+
     setTheme(themeName: string): void {
         if (!this._availableThemes.includes(themeName)) {
             console.warn(`[ez] Theme "${themeName}" not found. Available: ${this._availableThemes.join(', ')}`);

package/core/router.ts

@@ -206,11 +206,21 @@ export class EzRouter {
         // If not found, try to load via the loader (dynamic import)
         if (!def) {
             const modules = this.ez._loader.getModules();
-            const path = Object.keys(modules).find(p =>
-                p.toLowerCase().includes(`/${viewName.toLowerCase()}/`)
-                || p.toLowerCase().endsWith(`/${viewName.toLowerCase()}.js`)
+            const viewLower = viewName.toLowerCase();
+            const moduleKeys = Object.keys(modules);
+
+            // Priority 1: Exact file match /ViewName.js
+            let path = moduleKeys.find(p =>
+                p.toLowerCase().endsWith(`/${viewLower}.js`)
             );
 
+            // Priority 2: Folder structure /ViewName/ViewName.js
+            if (!path) {
+                path = moduleKeys.find(p =>
+                    p.toLowerCase().endsWith(`/${viewLower}/${viewLower}.js`)
+                );
+            }
+
             if (path) {
                 await this.ez._loader.loadModule(path);
                 def = this.ez.get(viewName);

package/core/services.ts

@@ -1,6 +1,7 @@
 import { RouteUIService } from '../services/RouteUI.js';
 import { FetchApi } from '../services/fetchApi.js';
 import { EzDialogService } from '../services/dialog.js';
+import { EzDrawerService } from '../services/drawer.js';
 import { EzToastService } from '../services/toast.js';
 import { EzMaskService } from '../services/mask.js';
 
@@ -25,6 +26,7 @@ export class EzServices {
     private _api: FetchApi | null = null;
     private _routeUI: RouteUIService | null = null;
     private _dialog: EzDialogService | null = null;
+    private _drawer: EzDrawerService | null = null;
     private _toast: EzToastService | null = null;
     private _mask: EzMaskService | null = null;
     private _initialized: boolean = false;
@@ -41,6 +43,7 @@ export class EzServices {
             this._initApi(),
             this._initFirebase(),
             this._initDialog(),
+            this._initDrawer(),
             this._initToast(),
             this._initMask()
         ]);
@@ -124,6 +127,14 @@ export class EzServices {
         return this._dialog;
     }
 
+    private _initDrawer(): void {
+        this._drawer = new EzDrawerService();
+    }
+
+    get drawer(): EzDrawerService | null {
+        return this._drawer;
+    }
+
     private _initToast(): void {
         this._toast = new EzToastService();
     }

package/islands/StaticHtmlRenderer.test.ts

@@ -0,0 +1,344 @@
+/**
+ * Ez Islands - Static HTML Renderer Tests
+ */
+
+import { StaticHtmlRenderer, ComponentDefinition, RenderContext } from './StaticHtmlRenderer.js';
+import { ComponentAnalyzer } from './analyzer.js';
+
+const renderer = new StaticHtmlRenderer();
+
+// Reset island counter before each test suite
+renderer.resetIslandCounter();
+
+interface TestCase {
+    name: string;
+    component: ComponentDefinition;
+    props?: Record<string, unknown>;
+    registry?: Map<string, ComponentDefinition>;
+    expected: string | RegExp;
+    description: string;
+}
+
+const testCases: TestCase[] = [
+    // Basic static rendering
+    {
+        name: 'SimpleDiv',
+        component: {
+            template: () => ({
+                eztype: 'div',
+                cls: 'container',
+                text: 'Hello World'
+            })
+        },
+        expected: '<div class="container">Hello World</div>',
+        description: 'Simple div with class and text'
+    },
+    {
+        name: 'NestedElements',
+        component: {
+            template: () => ({
+                eztype: 'article',
+                cls: 'post',
+                items: [
+                    { eztype: 'h1', text: 'Title' },
+                    { eztype: 'p', text: 'Content here' }
+                ]
+            })
+        },
+        expected: '<article class="post"><h1>Title</h1><p>Content here</p></article>',
+        description: 'Nested elements with items'
+    },
+    {
+        name: 'VoidElements',
+        component: {
+            template: () => ({
+                eztype: 'div',
+                items: [
+                    { eztype: 'img', src: '/image.jpg', alt: 'Test' },
+                    { eztype: 'br' },
+                    { eztype: 'input', type: 'text', placeholder: 'Enter text' }
+                ]
+            })
+        },
+        expected: '<div><img src="/image.jpg" alt="Test"><br><input type="text" placeholder="Enter text"></div>',
+        description: 'Void elements render without closing tag'
+    },
+    {
+        name: 'BooleanAttributes',
+        component: {
+            template: () => ({
+                eztype: 'input',
+                type: 'checkbox',
+                checked: true,
+                disabled: true
+            })
+        },
+        expected: '<input type="checkbox" checked disabled>',
+        description: 'Boolean attributes render correctly'
+    },
+    {
+        name: 'StyleObject',
+        component: {
+            template: () => ({
+                eztype: 'div',
+                style: {
+                    backgroundColor: 'red',
+                    fontSize: '16px',
+                    marginTop: '10px'
+                }
+            })
+        },
+        expected: '<div style="background-color: red; font-size: 16px; margin-top: 10px"></div>',
+        description: 'Style object converts to CSS string'
+    },
+    {
+        name: 'EscapeHtml',
+        component: {
+            template: () => ({
+                eztype: 'div',
+                text: '<script>alert("xss")</script>'
+            })
+        },
+        expected: '<div>&lt;script&gt;alert("xss")&lt;/script&gt;</div>',
+        description: 'HTML in text is escaped'
+    },
+    {
+        name: 'EzComponentAsDiv',
+        component: {
+            template: () => ({
+                eztype: 'EzComponent',
+                cls: 'wrapper',
+                items: [
+                    { eztype: 'span', text: 'Inside' }
+                ]
+            })
+        },
+        expected: '<div class="wrapper"><span>Inside</span></div>',
+        description: 'EzComponent renders as div'
+    },
+    {
+        name: 'PropsInTemplate',
+        component: {
+            template: (props) => {
+                const p = props as { title: string; count: number };
+                return {
+                    eztype: 'div',
+                    items: [
+                        { eztype: 'h1', text: p.title },
+                        { eztype: 'span', text: `Count: ${p.count}` }
+                    ]
+                };
+            }
+        },
+        props: { title: 'My Title', count: 42 },
+        expected: '<div><h1>My Title</h1><span>Count: 42</span></div>',
+        description: 'Props are passed to template'
+    },
+    {
+        name: 'ArrayClasses',
+        component: {
+            template: () => ({
+                eztype: 'div',
+                cls: ['class1', 'class2', 'class3']
+            })
+        },
+        expected: '<div class="class1 class2 class3"></div>',
+        description: 'Array of classes joins correctly'
+    },
+    {
+        name: 'NullItemsFiltered',
+        component: {
+            template: () => ({
+                eztype: 'div',
+                items: [
+                    { eztype: 'span', text: 'First' },
+                    null,
+                    { eztype: 'span', text: 'Second' },
+                    undefined
+                ] as ComponentDefinition['items']
+            })
+        },
+        expected: '<div><span>First</span><span>Second</span></div>',
+        description: 'Null/undefined items are filtered out'
+    },
+
+    // Island rendering
+    {
+        name: 'IslandWithState',
+        component: {
+            state: { count: 0 },
+            template: () => ({
+                eztype: 'button',
+                text: 'Click me'
+            })
+        },
+        expected: /data-ez-island="IslandWithState"/,
+        description: 'Component with state renders as island placeholder'
+    },
+    {
+        name: 'IslandWithProps',
+        component: {
+            state: { loading: false },
+            template: (props) => ({
+                eztype: 'button',
+                text: `Add product ${(props as { productId: number }).productId}`
+            })
+        },
+        props: { productId: 123 },
+        expected: /data-ez-props="[^"]*productId[^"]*123/,
+        description: 'Island props are serialized in data attribute'
+    },
+    {
+        name: 'IslandInitialRender',
+        component: {
+            state: { count: 0 },
+            template: () => ({
+                eztype: 'div',
+                cls: 'counter',
+                text: 'Count: 0'
+            })
+        },
+        expected: /<div class="counter">Count: 0<\/div>/,
+        description: 'Island pre-renders initial content'
+    },
+    {
+        name: 'ManualIslandOverride',
+        component: {
+            island: true,
+            template: () => ({
+                eztype: 'div',
+                text: 'Forced island'
+            })
+        },
+        expected: /data-ez-island="ManualIslandOverride"/,
+        description: 'Manual island: true forces island rendering'
+    },
+    {
+        name: 'ManualStaticOverride',
+        component: {
+            static: true,
+            state: { value: '' }, // Would normally be island
+            template: () => ({
+                eztype: 'div',
+                text: 'Forced static'
+            })
+        },
+        expected: '<div>Forced static</div>',
+        description: 'Manual static: true forces static rendering'
+    }
+];
+
+// Run tests
+console.log('\n🧪 Running Ez Islands Renderer Tests\n');
+console.log('='.repeat(60));
+
+let passed = 0;
+let failed = 0;
+
+async function runTests() {
+    for (const test of testCases) {
+        try {
+            const registry = test.registry || new Map([[test.name, test.component]]);
+            const ctx: RenderContext = {
+                registry,
+                styles: new Set(),
+                islands: [],
+                props: test.props || {}
+            };
+
+            const result = await renderer.renderComponent(test.name, ctx, test.props || {});
+
+            let success: boolean;
+            if (test.expected instanceof RegExp) {
+                success = test.expected.test(result);
+            } else {
+                success = result === test.expected;
+            }
+
+            if (success) {
+                passed++;
+                console.log(`✅ ${test.name}`);
+                console.log(`   ${test.description}`);
+            } else {
+                failed++;
+                console.log(`❌ ${test.name}`);
+                console.log(`   ${test.description}`);
+                console.log(`   Expected: ${test.expected}`);
+                console.log(`   Got:      ${result}`);
+            }
+        } catch (error) {
+            failed++;
+            console.log(`❌ ${test.name}`);
+            console.log(`   ${test.description}`);
+            console.log(`   Error: ${error}`);
+        }
+        console.log('');
+    }
+
+    console.log('='.repeat(60));
+    console.log(`\n📊 Results: ${passed} passed, ${failed} failed\n`);
+
+    // Test page rendering with hydration script
+    console.log('\n📄 Testing full page render with islands:\n');
+
+    renderer.resetIslandCounter();
+
+    const pageRegistry = new Map<string, ComponentDefinition>();
+
+    pageRegistry.set('Header', {
+        template: () => ({
+            eztype: 'header',
+            items: [{ eztype: 'h1', text: 'My App' }]
+        })
+    });
+
+    pageRegistry.set('AddToCart', {
+        state: { quantity: 1 },
+        template: (props) => ({
+            eztype: 'button',
+            text: `Add to cart (${(props as { productId: number }).productId})`
+        })
+    });
+
+    pageRegistry.set('ProductPage', {
+        template: (props) => {
+            const p = props as { product: { id: number; name: string } };
+            return {
+                eztype: 'main',
+                items: [
+                    { eztype: 'Header' },
+                    { eztype: 'h2', text: p.product.name },
+                    { eztype: 'AddToCart', props: { productId: p.product.id } }
+                ]
+            };
+        }
+    });
+
+    const ctx: RenderContext = {
+        registry: pageRegistry,
+        styles: new Set(),
+        islands: [],
+        props: {}
+    };
+
+    const pageHtml = await renderer.renderComponent(
+        'ProductPage',
+        ctx,
+        { product: { id: 42, name: 'iPhone 15' } }
+    );
+
+    console.log('Generated HTML:');
+    console.log('-'.repeat(40));
+    console.log(pageHtml);
+    console.log('-'.repeat(40));
+    console.log(`\nIslands found: ${ctx.islands.length}`);
+    ctx.islands.forEach(island => {
+        console.log(`  🏝️  ${island.component} (id: ${island.id})`);
+    });
+
+    if (failed > 0) {
+        process.exit(1);
+    }
+}
+
+runTests().catch(console.error);