melina 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melina",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A lightweight, islands-architecture web framework for Bun with Next.js-style routing.",
   "module": "./src/web.ts",
   "main": "./src/web.ts",

package/src/client.ts

@@ -1204,10 +1204,15 @@ async function loadComponent(name: string): Promise<Component<any> | null> {
 
 /**
  * Hydrate all islands in the current DOM
+ * Uses ReactDOM.createRoot for React-based components
  */
 export async function hydrateIslands(): Promise<void> {
     initHangar();
 
+    // Dynamic import of React and ReactDOM for island hydration
+    const React = await import('react');
+    const ReactDOM = await import('react-dom/client');
+
     const placeholders = document.querySelectorAll('[data-melina-island]');
     const seenIds = new Set<string>();
 
@@ -1239,19 +1244,22 @@ export async function hydrateIslands(): Promise<void> {
                 storageNode.setAttribute('data-storage', instanceId);
                 el.appendChild(storageNode);
 
-                // Render component into storage node
-                const vnode = createElement(Component, props);
-                const fiber = render(vnode, storageNode);
+                // Render component using ReactDOM.createRoot for proper React hydration
+                const root = ReactDOM.createRoot(storageNode);
+                root.render(React.createElement(Component as any, props));
+
+                // Store root for cleanup and re-rendering
+                (storageNode as any).__reactRoot = root;
 
                 islandRegistry.set(instanceId, {
                     name,
                     Component,
                     props,
-                    fiber,
+                    fiber: null as any, // Not using fiber for React components
                     storageNode,
                 });
 
-                console.log('[Melina Client] Created island:', instanceId);
+                console.log('[Melina Client] Created React island:', instanceId);
             }
         }
     }

package/src/web.ts

@@ -445,9 +445,9 @@ let cachedRuntimePath: string | null = null;
 
 /**
  * Build the Melina client runtime from TypeScript source
- * This bundles src/runtime/navigation.tsx and serves it from memory
+ * This bundles src/client.ts and serves it from memory
  * 
- * The client runtime is React-based - it uses html-react-parser for VDOM reconciliation.
+ * The client runtime handles island hydration using React.
  * SSR uses React on the server, and the browser uses React for hydration.
  */
 async function buildRuntime(): Promise<string> {
@@ -457,7 +457,7 @@ async function buildRuntime(): Promise<string> {
   }
 
   // Find the runtime source file (in the package, not the user's app)
-  const runtimePath = path.resolve(__dirname, './runtime/navigation.tsx');
+  const runtimePath = path.resolve(__dirname, './client.ts');
 
   if (!existsSync(runtimePath)) {
     throw new Error(`Melina runtime not found at: ${runtimePath}`);