ezfw-core 1.0.62 → 1.0.63

package/islands/StaticHtmlRenderer.ts

@@ -11,7 +11,7 @@ import { ComponentAnalyzer, analyzer } from './analyzer.js';
 export interface RenderContext {
     // Component registry
     registry: Map<string, ComponentDefinition>;
-    // CSS classes collected during render
+    // CSS module names collected during render (e.g., 'LinearPageNav')
     styles: Set<string>;
     // Islands found during render (for hydration script)
     islands: IslandData[];
@@ -171,6 +171,11 @@ export class StaticHtmlRenderer {
         props: Record<string, unknown>,
         ctx: RenderContext
     ): Promise<string> {
+        // Track CSS module for this component
+        if (definition.css && typeof definition.css === 'string') {
+            ctx.styles.add(definition.css);
+        }
+
         let config: ComponentConfig;
 
         // Get component config from template or items

package/islands/ViteIslandsPlugin.ts

@@ -861,8 +861,8 @@ async function renderPageDev(
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
 
-    // Generate hydration script
-    const scripts = generateHydrationScript(ctx.islands, true);
+    // Generate hydration script (pass CSS modules collected during render)
+    const scripts = generateHydrationScript(ctx.islands, true, [...ctx.styles]);
 
     // Generate head meta tags
     const title = page.title || page.name;
@@ -969,8 +969,8 @@ async function renderPageBuild(
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
 
-    // Generate hydration script
-    const scripts = generateHydrationScript(ctx.islands, false);
+    // Generate hydration script (pass CSS modules collected during render)
+    const scripts = generateHydrationScript(ctx.islands, false, [...ctx.styles]);
 
     // Generate head meta tags
     const title = page.title || page.name;
@@ -990,24 +990,34 @@ async function renderPageBuild(
  */
 function generateHydrationScript(
     islands: Array<{ id: string; component: string; props: Record<string, unknown> }>,
-    isDev: boolean
+    isDev: boolean,
+    cssModules: string[] = []
 ): string {
-    if (islands.length === 0) {
-        return '';
-    }
-
     const islandsJson = JSON.stringify(islands);
-    // In dev mode, use path that Vite's dev server can resolve from node_modules
-    const runtimePath = isDev ? '/node_modules/ezfw-core/islands/runtime.ts' : '/assets/islands-runtime.js';
+    const cssModulesJson = JSON.stringify(cssModules);
+
+    // In dev mode, use local ez/ path (framework is in project, not node_modules)
+    const runtimePath = isDev ? '/ez/islands/runtime.ts' : '/assets/islands-runtime.js';
     // Use hydrate.js for SSR - it doesn't import CSS directly, avoiding MIME type issues
     const frameworkPath = isDev ? '/hydrate.js' : '/assets/hydrate.js';
 
+    // Generate CSS loading code - load CSS modules BEFORE rendering
+    const cssLoadingCode = cssModules.length > 0 ? `
+// Load CSS modules used by SSR-rendered components
+const cssModules = ${cssModulesJson};
+for (const cssName of cssModules) {
+    await ez.resolveStyles(cssName);
+}
+console.log('[Ez SSR] Loaded ${cssModules.length} CSS module(s):', cssModules);` : '';
+
     return `<script type="module">
 // Ez Islands v2 - Set SSR flag and islands data BEFORE loading runtime
 window.__EZ_SSR_MODE__ = true;
 window.__EZ_ISLANDS__ = ${islandsJson};
-// Load framework first, then runtime (which auto-executes hydration)
+// Load framework first
 await import('${frameworkPath}');
+${cssLoadingCode}
+// Then load runtime for island hydration
 await import('${runtimePath}');
 </script>`;
 }

package/package.json

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