ezfw-core 1.0.78 → 1.0.80

package/islands/StaticHtmlRenderer.d.ts

@@ -11,6 +11,7 @@ export interface RenderContext {
     islands: IslandData[];
     props?: Record<string, unknown>;
     serverData?: Record<string, unknown>;
+    insideIsland?: boolean;
 }
 export interface IslandData {
     id: string;
@@ -108,7 +109,8 @@ export declare class StaticHtmlRenderer {
      */
     private serializableProps;
     /**
-     * Reset island counter (for testing)
+     * Reset island counter and clear analyzer cache
+     * Called before each SSR render to ensure fresh analysis
      */
     resetIslandCounter(): void;
 }

package/islands/StaticHtmlRenderer.js

@@ -36,7 +36,6 @@ let islandIdCounter = 0;
  * Main static renderer class
  */
 export class StaticHtmlRenderer {
-    analyzer;
     constructor() {
         this.analyzer = analyzer;
     }
@@ -76,8 +75,15 @@ export class StaticHtmlRenderer {
             // Try to render as native HTML element
             return this.renderNativeElement(name, props, ctx);
         }
+        // If we're inside an island or template-based component, render children as static
+        // (they will be re-rendered when the parent hydrates or when SPA takes over)
+        if (ctx.insideIsland || ctx.insideTemplate) {
+            console.log(`[SSR] ${name} rendered as static (inside ${ctx.insideIsland ? 'island' : 'template'})`);
+            return this.renderStaticComponent(name, definition, props, ctx);
+        }
         // Analyze the component
         const analysis = this.analyzer.analyze(name, definition);
+        console.log(`[SSR] ${name} analyzed as: ${analysis.type}`);
         if (analysis.type === 'island') {
             // Render as island placeholder
             return this.renderIslandPlaceholder(name, definition, props, ctx);
@@ -94,6 +100,13 @@ export class StaticHtmlRenderer {
             ctx.styles.add(definition.css);
         }
         let config;
+        // If this component has a template, mark context so children render as static
+        // Template-based components are re-rendered by SPA, so their children don't need island markers
+        const hasTemplate = !!definition.template;
+        const childCtx = hasTemplate ? { ...ctx, insideTemplate: true } : ctx;
+        if (hasTemplate) {
+            console.log(`[SSR] ${name} has template, setting insideTemplate=true for children`);
+        }
         // Get component config from template or items
         if (definition.template) {
             // Get controller state for SSR
@@ -138,8 +151,8 @@ export class StaticHtmlRenderer {
                 config[key] = definition[key];
             }
         }
-        // Render the config tree
-        return this.renderConfig(config, ctx);
+        // Render the config tree using childCtx (which has insideTemplate=true if this has a template)
+        return this.renderConfig(config, childCtx);
     }
     /**
      * Render an island as a placeholder with hydration data
@@ -158,7 +171,10 @@ export class StaticHtmlRenderer {
         };
         ctx.islands.push(islandData);
         // Render the full static content (for SEO)
-        const staticContent = await this.renderStaticComponent(name, definition, props, ctx);
+        // Mark that we're inside an island so child components don't become islands
+        // (they will be re-rendered when this island hydrates on the client)
+        const islandCtx = { ...ctx, insideIsland: true };
+        const staticContent = await this.renderStaticComponent(name, definition, props, islandCtx);
         // Wrap in island container with data attributes for hydration
         const propsJson = this.escapeAttr(JSON.stringify(islandData.props));
         return `<div data-ez-island="${name}" data-ez-island-id="${islandId}" data-ez-props="${propsJson}">${staticContent}</div>`;
@@ -447,10 +463,12 @@ hydrateIslands(window.__EZ_ISLANDS__);
         return result;
     }
     /**
-     * Reset island counter (for testing)
+     * Reset island counter and clear analyzer cache
+     * Called before each SSR render to ensure fresh analysis
      */
     resetIslandCounter() {
         islandIdCounter = 0;
+        this.analyzer.clearCache();
     }
 }
 // Export singleton

package/islands/StaticHtmlRenderer.ts

@@ -19,6 +19,12 @@ export interface RenderContext {
     props?: Record<string, unknown>;
     // Server-side data loaded via load()
     serverData?: Record<string, unknown>;
+    // True when rendering inside an island - children should not be islands
+    // (they will be re-rendered when the parent island hydrates)
+    insideIsland?: boolean;
+    // True when rendering inside a template-based component
+    // Template components are re-rendered by SPA, so children don't need islands
+    insideTemplate?: boolean;
 }
 
 export interface IslandData {
@@ -150,8 +156,16 @@ export class StaticHtmlRenderer {
             return this.renderNativeElement(name, props as ComponentConfig, ctx);
         }
 
+        // If we're inside an island or template-based component, render children as static
+        // (they will be re-rendered when the parent hydrates or when SPA takes over)
+        if (ctx.insideIsland || ctx.insideTemplate) {
+            console.log(`[SSR] ${name} rendered as static (inside ${ctx.insideIsland ? 'island' : 'template'})`);
+            return this.renderStaticComponent(name, definition, props, ctx);
+        }
+
         // Analyze the component
         const analysis = this.analyzer.analyze(name, definition);
+        console.log(`[SSR] ${name} analyzed as: ${analysis.type}`);
 
         if (analysis.type === 'island') {
             // Render as island placeholder
@@ -178,6 +192,14 @@ export class StaticHtmlRenderer {
 
         let config: ComponentConfig;
 
+        // If this component has a template, mark context so children render as static
+        // Template-based components are re-rendered by SPA, so their children don't need island markers
+        const hasTemplate = !!definition.template;
+        const childCtx = hasTemplate ? { ...ctx, insideTemplate: true } : ctx;
+        if (hasTemplate) {
+            console.log(`[SSR] ${name} has template, setting insideTemplate=true for children`);
+        }
+
         // Get component config from template or items
         if (definition.template) {
             // Get controller state for SSR
@@ -224,8 +246,8 @@ export class StaticHtmlRenderer {
             }
         }
 
-        // Render the config tree
-        return this.renderConfig(config, ctx);
+        // Render the config tree using childCtx (which has insideTemplate=true if this has a template)
+        return this.renderConfig(config, childCtx);
     }
 
     /**
@@ -252,7 +274,10 @@ export class StaticHtmlRenderer {
         ctx.islands.push(islandData);
 
         // Render the full static content (for SEO)
-        const staticContent = await this.renderStaticComponent(name, definition, props, ctx);
+        // Mark that we're inside an island so child components don't become islands
+        // (they will be re-rendered when this island hydrates on the client)
+        const islandCtx = { ...ctx, insideIsland: true };
+        const staticContent = await this.renderStaticComponent(name, definition, props, islandCtx);
 
         // Wrap in island container with data attributes for hydration
         const propsJson = this.escapeAttr(JSON.stringify(islandData.props));
@@ -554,10 +579,12 @@ hydrateIslands(window.__EZ_ISLANDS__);
     }
 
     /**
-     * Reset island counter (for testing)
+     * Reset island counter and clear analyzer cache
+     * Called before each SSR render to ensure fresh analysis
      */
     resetIslandCounter(): void {
         islandIdCounter = 0;
+        this.analyzer.clearCache();
     }
 }
 

package/islands/ViteIslandsPlugin.js

@@ -665,6 +665,8 @@ async function renderPageDev(page, server, opts, renderer, islands, root) {
         islands: [],
         props: {}
     };
+    // Reset island counter before each render to ensure consistent IDs
+    renderer.resetIslandCounter();
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
     // Generate hydration script (pass CSS modules collected during render)
@@ -754,6 +756,8 @@ async function renderPageBuild(page, opts, renderer, analyzer, root, islands) {
         islands: [],
         props: {}
     };
+    // Reset island counter before each render to ensure consistent IDs
+    renderer.resetIslandCounter();
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
     // Generate hydration script (pass CSS modules collected during render)

package/islands/ViteIslandsPlugin.ts

@@ -857,6 +857,9 @@ async function renderPageDev(
         props: {}
     };
 
+    // Reset island counter before each render to ensure consistent IDs
+    renderer.resetIslandCounter();
+
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
 
@@ -965,6 +968,9 @@ async function renderPageBuild(
         props: {}
     };
 
+    // Reset island counter before each render to ensure consistent IDs
+    renderer.resetIslandCounter();
+
     // Render body
     const body = await renderer.renderPage(page.name, definition, ctx);
 

package/islands/analyzer.d.ts

@@ -47,7 +47,8 @@ export interface ComponentDefinition {
 export declare class ComponentAnalyzer {
     private cache;
     /**
-     * Analyze a component definition and determine its type
+     * Analyze a component definition and determine its type.
+     * Cache is cleared by StaticHtmlRenderer.resetIslandCounter() before each SSR render.
      */
     analyze(name: string, definition: ComponentDefinition): AnalysisResult;
     /**

package/islands/analyzer.js

@@ -58,9 +58,12 @@ const BROWSER_API_PATTERNS = [
  * Main analyzer class
  */
 export class ComponentAnalyzer {
-    cache = new Map();
+    constructor() {
+        this.cache = new Map();
+    }
     /**
-     * Analyze a component definition and determine its type
+     * Analyze a component definition and determine its type.
+     * Cache is cleared by StaticHtmlRenderer.resetIslandCounter() before each SSR render.
      */
     analyze(name, definition) {
         // Check cache first

package/islands/analyzer.ts

@@ -95,7 +95,8 @@ export class ComponentAnalyzer {
     private cache: Map<string, AnalysisResult> = new Map();
 
     /**
-     * Analyze a component definition and determine its type
+     * Analyze a component definition and determine its type.
+     * Cache is cleared by StaticHtmlRenderer.resetIslandCounter() before each SSR render.
      */
     analyze(name: string, definition: ComponentDefinition): AnalysisResult {
         // Check cache first

package/package.json

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