ezfw-core 1.0.66 → 1.0.68

package/islands/ViteIslandsPlugin.js

@@ -669,7 +669,7 @@ async function renderPageDev(page, server, opts, renderer, islands, root) {
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
     // Generate hydration script
-    const scripts = generateHydrationScript(ctx.islands, true);
+    const scripts = generateHydrationScript(ctx.islands, true, [...ctx.styles]);
     // Generate head meta tags
     const title = page.title || page.name;
     const headTags = page.description
@@ -758,7 +758,7 @@ async function renderPageBuild(page, opts, renderer, analyzer, root, islands) {
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
     // Generate hydration script
-    const scripts = generateHydrationScript(ctx.islands, false);
+    const scripts = generateHydrationScript(ctx.islands, false, [...ctx.styles]);
     // Generate head meta tags
     const title = page.title || page.name;
     const headTags = page.description
@@ -773,21 +773,29 @@ async function renderPageBuild(page, opts, renderer, analyzer, root, islands) {
 /**
  * Generate hydration script
  */
-function generateHydrationScript(islands, isDev) {
-    if (islands.length === 0) {
-        return '';
-    }
+function generateHydrationScript(islands, isDev, cssModules = []) {
     const islandsJson = JSON.stringify(islands);
-    // In dev mode, use path that Vite's dev server can resolve from node_modules
+    const cssModulesJson = JSON.stringify(cssModules);
+    // In dev mode, use node_modules path (works for projects using ezfw-core from npm)
     const runtimePath = isDev ? '/node_modules/ezfw-core/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/islands/ViteIslandsPlugin.ts

@@ -996,8 +996,8 @@ function generateHydrationScript(
     const islandsJson = JSON.stringify(islands);
     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';
+    // In dev mode, use node_modules path (works for projects using ezfw-core from npm)
+    const runtimePath = isDev ? '/node_modules/ezfw-core/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';
 

package/package.json

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