elm-ssr 0.90.0 → 0.90.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elm-ssr",
-  "version": "0.90.0",
+  "version": "0.90.1",
   "description": "Elm-first SSR library and framework for Cloudflare Workers (and Bun): file-based routes/islands, backend-neutral effect adapters (KV/D1/Redis/Postgres), background tasks (waitUntil/Queues), SQL-file migrations, CLI scaffold + build.",
   "license": "MIT",
   "author": "Michał Majchrzak <michmajchrzak@gmail.com>",

package/src/debugger.ts

@@ -235,38 +235,51 @@ export const injectDebugger = (html: string, data: unknown): string => {
   toggleBtn.id = 'elm-ssr-debug-toggle';
   toggleBtn.innerHTML = '⚡ Debug';
   document.body.appendChild(toggleBtn);
-
+  
   // 4. Create Panel DOM
   const panel = document.createElement('div');
   panel.id = 'elm-ssr-debug-panel';
   
-  let effectsHtml = '';
-  if (data.effects && data.effects.length > 0) {
-    effectsHtml = data.effects.map(eff => {
-      const isSql = ['query', 'queryOne', 'execute'].includes(eff.kind);
-      const sqlSnippet = isSql ? \`<pre class="debug-code">\${eff.payload.sql}</pre>\` : '';
-      const paramsSnippet = isSql && eff.payload.params && eff.payload.params.length > 0 ? 
-        \`<div><strong>Params:</strong> \${JSON.stringify(eff.payload.params)}</div>\` : '';
-      const outcome = eff.ok ? '<span class="status-ok">SUCCESS</span>' : '<span class="status-error">FAILED</span>';
-      const detailError = eff.error ? \`<div class="status-error">\${eff.error}</div>\` : '';
-      return \`
-        <li class="debug-item">
-          <div class="debug-item-meta" style="flex: 1;">
-            <div style="display: flex; gap: 8px; align-items: center;">
-              <span class="debug-badge badge-primary">\${eff.kind}</span>
-              \${outcome}
-              <span style="color: #9ca3af; font-size: 0.85em;">\${eff.durationMs.toFixed(1)}ms</span>
-            </div>
-            \${sqlSnippet}
-            \${paramsSnippet}
-            \${detailError}
+  const isSqlKind = (kind) => ['query', 'queryOne', 'execute'].includes(kind);
+  
+  const generateEffectItemHtml = (eff) => {
+    const isSql = isSqlKind(eff.kind);
+    const sqlSnippet = isSql ? \`<pre class="debug-code">\${eff.payload.sql}</pre>\` : '';
+    const paramsSnippet = isSql && eff.payload.params && eff.payload.params.length > 0 ? 
+      \`<div><strong>Params:</strong> \${JSON.stringify(eff.payload.params)}</div>\` : '';
+    const outcome = eff.ok ? '<span class="status-ok">SUCCESS</span>' : '<span class="status-error">FAILED</span>';
+    const detailError = eff.error ? \`<div class="status-error">\${eff.error}</div>\` : '';
+    return \`
+      <li class="debug-item">
+        <div class="debug-item-meta" style="flex: 1;">
+          <div style="display: flex; gap: 8px; align-items: center;">
+            <span class="debug-badge badge-primary">\${eff.kind}</span>
+            \${outcome}
+            <span style="color: #9ca3af; font-size: 0.85em;">\${eff.durationMs.toFixed(1)}ms</span>
           </div>
-        </li>
-      \`;
-    }).join('');
-  } else {
-    effectsHtml = '<div style="color: #9ca3af; text-align: center; padding: 20px;">No server-side effects executed for this request.</div>';
-  }
+          \${sqlSnippet}
+          \${paramsSnippet}
+          \${detailError}
+        </div>
+      </li>
+    \`;
+  };
+
+  const getDbHtml = (effects) => {
+    const dbEffects = (effects || []).filter(eff => isSqlKind(eff.kind));
+    if (dbEffects.length === 0) {
+      return '<div style="color: #9ca3af; text-align: center; padding: 20px;">No SQL database queries executed for this request.</div>';
+    }
+    return \`<ul class="debug-list">\${dbEffects.map(generateEffectItemHtml).join('')}</ul>\`;
+  };
+
+  const getEffectsHtml = (effects) => {
+    const nonDbEffects = (effects || []).filter(eff => !isSqlKind(eff.kind));
+    if (nonDbEffects.length === 0) {
+      return '<div style="color: #9ca3af; text-align: center; padding: 20px;">No other server-side effects executed for this request.</div>';
+    }
+    return \`<ul class="debug-list">\${nonDbEffects.map(generateEffectItemHtml).join('')}</ul>\`;
+  };
 
   panel.innerHTML = \`
     <div class="debug-header">
@@ -276,6 +289,7 @@ export const injectDebugger = (html: string, data: unknown): string => {
       <div class="debug-tabs">
         <button class="debug-tab active" data-tab="overview">Overview</button>
         <button class="debug-tab" data-tab="islands">Islands</button>
+        <button class="debug-tab" data-tab="database">Database</button>
         <button class="debug-tab" data-tab="effects">Effects</button>
         <button class="debug-tab" data-tab="session">Session</button>
         <button class="debug-tab" data-tab="bridges">Bridges</button>
@@ -313,11 +327,14 @@ export const injectDebugger = (html: string, data: unknown): string => {
         </ul>
       </div>
       
+      <!-- DATABASE TAB -->
+      <div class="debug-pane" id="pane-database">
+        \${getDbHtml(data.effects)}
+      </div>
+      
       <!-- EFFECTS TAB -->
       <div class="debug-pane" id="pane-effects">
-        <ul class="debug-list">
-          \${effectsHtml}
-        </ul>
+        \${getEffectsHtml(data.effects)}
       </div>
       
       <!-- SESSION TAB -->
@@ -379,6 +396,38 @@ export const injectDebugger = (html: string, data: unknown): string => {
     highlight.style.display = 'none';
   };
 
+  // Track island mutations to detect client-side state updates
+  const islandMutations = new Map();
+  const activeObservers = new Map();
+  
+  const setupMutationObservers = () => {
+    for (const obs of activeObservers.values()) {
+      obs.disconnect();
+    }
+    activeObservers.clear();
+    
+    const markers = Array.from(document.getElementsByTagName('elm-ssr-island'));
+    markers.forEach(marker => {
+      if (!islandMutations.has(marker)) {
+        islandMutations.set(marker, { count: 0, lastUpdate: null });
+      }
+      
+      const observer = new MutationObserver(() => {
+        const stats = islandMutations.get(marker);
+        stats.count += 1;
+        stats.lastUpdate = new Date();
+        
+        const activeTab = panel.querySelector('.debug-tab.active')?.getAttribute('data-tab');
+        if (activeTab === 'islands') {
+          scanIslands();
+        }
+      });
+      
+      observer.observe(marker, { childList: true, subtree: true, characterData: true, attributes: true });
+      activeObservers.set(marker, observer);
+    });
+  };
+
   const scanIslands = () => {
     const list = panel.querySelector('#debug-islands-list');
     const markers = Array.from(document.getElementsByTagName('elm-ssr-island'));
@@ -395,6 +444,11 @@ export const injectDebugger = (html: string, data: unknown): string => {
       const isBooted = marker.getAttribute('data-elmssr-booted') === 'true';
       const id = marker.getAttribute('data-elmssr-id') || 'none';
       
+      const stats = islandMutations.get(marker) || { count: 0, lastUpdate: null };
+      const lastUpdateStr = stats.lastUpdate 
+        ? \`Last active DOM mutation: \${stats.lastUpdate.toLocaleTimeString()}\`
+        : 'No client state changes recorded';
+      
       const li = document.createElement('li');
       li.className = 'debug-item';
       li.style.cursor = 'pointer';
@@ -406,9 +460,12 @@ export const injectDebugger = (html: string, data: unknown): string => {
               \${isBooted ? 'BOOTED' : 'INITIALIZING'}
             </span>
           </div>
-          <div style="font-size: 0.8em; margin-top: 4px; color: #9ca3af;">
+          <div style="font-size: 0.8em; margin-top: 4px; color: #9ca3af; display: flex; justify-content: space-between;">
             <span><strong>ID:</strong> \${id}</span>
+            <span style="color: #34d399;"><strong>DOM Mutations:</strong> \${stats.count}</span>
           </div>
+          <div style="font-size: 0.75em; color: #9ca3af; margin-top: 2px;">\${lastUpdateStr}</div>
+          <div style="font-size: 0.8em; margin-top: 6px; color: #e5e7eb;"><strong>Initial Props:</strong></div>
           <pre class="debug-code" style="font-size: 0.85em; max-height: 80px; overflow-y: auto;">\${JSON.stringify(JSON.parse(props), null, 2)}</pre>
         </div>
       \`;
@@ -420,6 +477,7 @@ export const injectDebugger = (html: string, data: unknown): string => {
   };
 
   panel.querySelector('[data-tab="islands"]').addEventListener('click', scanIslands);
+  setupMutationObservers();
 
   const bridgeLog = panel.querySelector('#debug-bridges-log');
   let firstBridge = true;
@@ -472,35 +530,11 @@ export const injectDebugger = (html: string, data: unknown): string => {
       </div>
     \`;
     
+    const dbPane = panel.querySelector('#pane-database');
+    dbPane.innerHTML = getDbHtml(newData.effects);
+    
     const effectsPane = panel.querySelector('#pane-effects');
-    let newEffectsHtml = '';
-    if (newData.effects && newData.effects.length > 0) {
-      newEffectsHtml = newData.effects.map(eff => {
-        const isSql = ['query', 'queryOne', 'execute'].includes(eff.kind);
-        const sqlSnippet = isSql ? \`<pre class="debug-code">\${eff.payload.sql}</pre>\` : '';
-        const paramsSnippet = isSql && eff.payload.params && eff.payload.params.length > 0 ? 
-          \`<div><strong>Params:</strong> \${JSON.stringify(eff.payload.params)}</div>\` : '';
-        const outcome = eff.ok ? '<span class="status-ok">SUCCESS</span>' : '<span class="status-error">FAILED</span>';
-        const detailError = eff.error ? \`<div class="status-error">\${eff.error}</div>\` : '';
-        return \`
-          <li class="debug-item">
-            <div class="debug-item-meta" style="flex: 1;">
-              <div style="display: flex; gap: 8px; align-items: center;">
-                <span class="debug-badge badge-primary">\${eff.kind}</span>
-                \${outcome}
-                <span style="color: #9ca3af; font-size: 0.85em;">\${eff.durationMs.toFixed(1)}ms</span>
-              </div>
-              \${sqlSnippet}
-              \${paramsSnippet}
-              \${detailError}
-            </div>
-          </li>
-        \`;
-      }).join('');
-      effectsPane.innerHTML = \`<ul class="debug-list">\${newEffectsHtml}</ul>\`;
-    } else {
-      effectsPane.innerHTML = '<div style="color: #9ca3af; text-align: center; padding: 20px;">No server-side effects executed for this request.</div>';
-    }
+    effectsPane.innerHTML = getEffectsHtml(newData.effects);
     
     const sessionPane = panel.querySelector('#pane-session');
     sessionPane.innerHTML = \`
@@ -512,6 +546,8 @@ export const injectDebugger = (html: string, data: unknown): string => {
       </div>
     \`;
     
+    setupMutationObservers(); // Observe any newly mounted islands
+    
     const activeTab = panel.querySelector('.debug-tab.active').getAttribute('data-tab');
     if (activeTab === 'islands') {
       scanIslands();