@nitronjs/framework 0.1.23 → 0.1.24

package/lib/Build/Manager.js

@@ -102,6 +102,7 @@ function wrapWithDepth(children) {
 
 function createIsland(Component, name) {
     function IslandBoundary(props) {
+        // Nested client components render normally (already inside an island)
         if (React.useContext(DepthContext)) {
             return OriginalJsx.jsx(Component, props);
         }
@@ -115,6 +116,8 @@ function createIsland(Component, name) {
             ctx.props[id] = safeProps;
         }
         
+        // SSR: Render full HTML for SEO and initial paint
+        // Client: Will re-render with createRoot for animations to work
         return OriginalJsx.jsx('div', {
             'data-cid': id,
             'data-island': name,
@@ -445,12 +448,16 @@ class Builder {
                 const importName = sanitizeName(baseName) + "_" + index++;
                 imports.push(`import ${importName} from "${relativePath}";`);
                 manifestEntries.push(`  "${baseName}": ${importName}`);
+                // Also add displayName entry
+                manifestEntries.push(`  [${importName}.displayName || ${importName}.name || "${baseName}"]: ${importName}`);
             }
 
             for (const namedExport of componentMeta.named || []) {
                 const importName = sanitizeName(namedExport) + "_" + index++;
                 imports.push(`import { ${namedExport} as ${importName} } from "${relativePath}";`);
                 manifestEntries.push(`  "${namedExport}": ${importName}`);
+                // Also add displayName entry
+                manifestEntries.push(`  [${importName}.displayName || ${importName}.name || "${namedExport}"]: ${importName}`);
             }
         }
 

package/lib/Console/Stubs/page-hydration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { hydrateRoot } from "react-dom/client";
+import { createRoot } from "react-dom/client";
 
 // __COMPONENT_IMPORTS__
 
@@ -13,7 +13,7 @@ const componentManifest: Record<string, React.ComponentType<any>> = {};
 
 // __COMPONENT_MANIFEST__
 
-function hydrate() {
+function mount() {
     const props = window.__NITRON_PROPS__ || {};
 
     const islands = document.querySelectorAll<HTMLElement>("[data-cid]");
@@ -35,11 +35,10 @@ function hydrate() {
         const componentProps = props[componentId] || {};
 
         try {
-            hydrateRoot(
-                element,
-                React.createElement(Component, componentProps),
-                { identifierPrefix: componentId }
-            );
+            // Use createRoot for full client-side rendering
+            // This ensures animations and effects work correctly
+            const root = createRoot(element);
+            root.render(React.createElement(Component, componentProps));
         } catch {
         }
     });
@@ -48,7 +47,8 @@ function hydrate() {
 }
 
 if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", hydrate);
+    document.addEventListener("DOMContentLoaded", mount);
 } else {
-    hydrate();
+    mount();
 }
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.1.23",
+	"version": "0.1.24",
 	"description": "NitronJS is a modern and extensible Node.js MVC framework built on Fastify. It focuses on clean architecture, modular structure, and developer productivity, offering built-in routing, middleware, configuration management, CLI tooling, and native React integration for scalable full-stack applications.",
 	"bin": {
 		"njs": "./cli/njs.js"