melina 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "melina",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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

@@ -1322,7 +1322,7 @@ export async function navigate(href: string): Promise<void> {
     // Update URL
     window.history.pushState({}, '', href);
 
-    // DOM update function
+    // DOM update function - optimized with DocumentFragment for minimal reflow
     const performUpdate = () => {
         // Dispatch navigation event (for island state updates)
         window.dispatchEvent(new CustomEvent('melina:navigation-start', {
@@ -1330,10 +1330,41 @@ export async function navigate(href: string): Promise<void> {
         }));
 
         document.title = newDoc.title;
-        document.body.innerHTML = newDoc.body.innerHTML;
 
-        // Sync existing islands immediately
-        syncIslands();
+        // OPTIMIZATION: Build new body off-screen using DocumentFragment
+        // This minimizes layout thrashing by preparing everything before touching DOM
+
+        // 1. Create a DocumentFragment with all new children
+        const fragment = document.createDocumentFragment();
+
+        // 2. Move all children from newDoc.body to fragment (off-screen)
+        while (newDoc.body.firstChild) {
+            fragment.appendChild(newDoc.body.firstChild);
+        }
+
+        // 3. Find island placeholders in the fragment and pre-insert storage nodes
+        //    This happens OFF-SCREEN, no reflow triggered
+        const placeholders = fragment.querySelectorAll('[data-melina-island]');
+        for (let i = 0; i < placeholders.length; i++) {
+            const el = placeholders[i] as HTMLElement;
+            const name = el.getAttribute('data-melina-island');
+            if (!name) continue;
+
+            const instanceId = el.getAttribute('data-instance') || `${name}-${i}`;
+            const existing = islandRegistry.get(instanceId);
+
+            if (existing) {
+                // Pre-insert storage node into fragment (still off-screen)
+                const propsStr = (el.getAttribute('data-props') || '{}').replace(/&quot;/g, '"');
+                existing.props = JSON.parse(propsStr);
+                el.appendChild(existing.storageNode);
+            }
+        }
+
+        // 4. SINGLE REFLOW: Clear body and append prepared fragment
+        //    All island storage nodes are already in place
+        document.body.replaceChildren(fragment);
+
         window.scrollTo(0, 0);
     };
 
@@ -1345,7 +1376,7 @@ export async function navigate(href: string): Promise<void> {
         performUpdate();
     }
 
-    // Hydrate new islands
+    // Hydrate new islands (ones that weren't in registry)
     await hydrateIslands();
 
     console.log('[Melina Client] Navigation complete');
@@ -1463,8 +1494,32 @@ export async function init(): Promise<void> {
             const newDoc = new DOMParser().parseFromString(html, 'text/html');
 
             document.title = newDoc.title;
-            document.body.innerHTML = newDoc.body.innerHTML;
-            syncIslands();
+
+            // OPTIMIZATION: Build off-screen with DocumentFragment
+            const fragment = document.createDocumentFragment();
+            while (newDoc.body.firstChild) {
+                fragment.appendChild(newDoc.body.firstChild);
+            }
+
+            // Pre-insert islands into fragment (off-screen)
+            const placeholders = fragment.querySelectorAll('[data-melina-island]');
+            for (let i = 0; i < placeholders.length; i++) {
+                const el = placeholders[i] as HTMLElement;
+                const name = el.getAttribute('data-melina-island');
+                if (!name) continue;
+
+                const instanceId = el.getAttribute('data-instance') || `${name}-${i}`;
+                const existing = islandRegistry.get(instanceId);
+
+                if (existing) {
+                    const propsStr = (el.getAttribute('data-props') || '{}').replace(/&quot;/g, '"');
+                    existing.props = JSON.parse(propsStr);
+                    el.appendChild(existing.storageNode);
+                }
+            }
+
+            // Single reflow: swap prepared fragment
+            document.body.replaceChildren(fragment);
         };
 
         if (document.startViewTransition) {