@vistagenic/vista 0.2.4 → 0.2.6

package/dist/bin/build-rsc.js

@@ -26,6 +26,8 @@ const constants_1 = require("../constants");
 const structure_validator_1 = require("../server/structure-validator");
 const static_generator_1 = require("../server/static-generator");
 const structure_log_1 = require("../server/structure-log");
+const devtools_indicator_snippet_1 = require("./devtools-indicator-snippet");
+const dev_error_overlay_snippet_1 = require("./dev-error-overlay-snippet");
 const _debug = !!process.env.VISTA_DEBUG;
 /**
  * Run PostCSS for CSS compilation
@@ -101,55 +103,148 @@ function collectFrameworkClientReferences(cwd) {
  * Generate the RSC-aware client entry file
  */
 function generateRSCClientEntry(cwd, vistaDir, isDev) {
-    const clientEntryContent = `/**
- * Vista RSC Client Entry
+    const devToolsBootId = `rsc-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+    const clientEntryContent = `/**
+ * Vista RSC Client Entry
  *
  * This file is auto-generated. Do not edit directly.
  * It hydrates using React Flight data from /rsc and enables
  * RSC-aware client-side navigation via RSCRouter.
  */
 
-import * as React from 'react';
-import { hydrateRoot } from 'react-dom/client';
-import { createFromFetch } from 'react-server-dom-webpack/client';
-import { RSCRouter } from 'vista/client/rsc-router';
-import { callServer } from 'vista/client/server-actions';
+import * as React from 'react';
+import { hydrateRoot, createRoot } from 'react-dom/client';
+import { createFromFetch } from 'react-server-dom-webpack/client';
+import { RSCRouter } from 'vista/client/rsc-router';
+import { callServer } from 'vista/client/server-actions';
 
 const hydrateDocument = (window as any).${constants_1.HYDRATE_DOCUMENT_FLAG} === true;
 const rootElement = hydrateDocument ? document : document.getElementById('root');
-if (!rootElement) {
-  throw new Error('Missing #root element for hydration.');
-}
-
-const pathname = window.location.pathname;
-const search = window.location.search;
-const initialResponse = createFromFetch(
-  fetch(\`/rsc\${pathname}\${search}\`, { headers: { Accept: 'text/x-component' } }),
-  { callServer }
-) as Promise<React.ReactNode>;
-
-hydrateRoot(
-  rootElement as Document | Element,
-  React.createElement(RSCRouter, {
-    initialResponse,
-    initialPathname: pathname,
-  })
-);
-
+if (!rootElement) {
+  throw new Error('Missing #root element for hydration.');
+}
+
+${isDev ? (0, devtools_indicator_snippet_1.getDevToolsIndicatorBootstrapSource)(devToolsBootId) : ''}
+${isDev ? (0, dev_error_overlay_snippet_1.getDevErrorOverlayBootstrapSource)() : ''}
+
+function buildRuntimeMessage(title: string, error: unknown): string {
+  var value = error as any;
+  var text = '';
+  if (value && typeof value === 'object') {
+    if (typeof value.message === 'string' && value.message.trim().length > 0) {
+      text = value.message;
+    }
+    if (typeof value.stack === 'string' && value.stack.trim().length > 0) {
+      text = text ? text + '\\n\\n' + value.stack : value.stack;
+    }
+  }
+  if (!text) {
+    text = typeof error === 'string' ? error : String(error || 'Unknown runtime error.');
+  }
+  return title + '\\n\\n' + text;
+}
+
+function reportDevRuntimeError(title: string, error: unknown): void {
+  if (typeof window === 'undefined') return;
+  var indicator = (window as any).__VISTA_DEVTOOLS_INDICATOR__;
+  var overlay = (window as any).__VISTA_DEV_ERROR_OVERLAY__;
+  var message = buildRuntimeMessage(title, error);
+  if (indicator && typeof indicator.setError === 'function') {
+    indicator.setError(title, 1);
+  }
+  if (overlay && typeof overlay.capture === 'function') {
+    overlay.capture([message]);
+    return;
+  }
+  if (overlay && typeof overlay.show === 'function') {
+    overlay.show([message]);
+    if (typeof overlay.minimize === 'function') {
+      overlay.minimize();
+    }
+    return;
+  }
+  console.error('[vista] ' + title + ':', error);
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('error', function (event) {
+    var runtimeError = (event as ErrorEvent).error || (event as ErrorEvent).message;
+    reportDevRuntimeError('Runtime Error', runtimeError);
+  });
+  window.addEventListener('unhandledrejection', function (event) {
+    reportDevRuntimeError('Unhandled Promise Rejection', (event as PromiseRejectionEvent).reason);
+  });
+}
+
+const pathname = window.location.pathname;
+const search = window.location.search;
+const initialResponse = createFromFetch(
+  fetch(\`/rsc\${pathname}\${search}\`, { headers: { Accept: 'text/x-component' } }),
+  { callServer }
+) as Promise<React.ReactNode>;
+
+var appElement = React.createElement(RSCRouter, {
+  initialResponse,
+  initialPathname: pathname,
+});
+
+try {
+  hydrateRoot(
+    rootElement as Document | Element,
+    appElement,
+    {
+      onRecoverableError(error) {
+        var message = String((error as any)?.message || error || '');
+        if (/hydration|did not match|server rendered html|text content/i.test(message)) {
+          reportDevRuntimeError('Hydration Error', error);
+          return;
+        }
+        reportDevRuntimeError('Recoverable Error', error);
+      },
+    }
+  );
+} catch (error) {
+  reportDevRuntimeError('Hydration Error', error);
+  if (!hydrateDocument && rootElement instanceof Element) {
+    try {
+      createRoot(rootElement).render(appElement);
+    } catch (fallbackError) {
+      reportDevRuntimeError('Client Render Fallback Failed', fallbackError);
+    }
+  }
+}
+
 ${isDev
-        ? `// Vista live-reload: listen for server component changes via SSE
-(function connectReload() {
-  const es = new EventSource('${constants_1.SSE_ENDPOINT}');
-  es.onmessage = (e) => {
-    if (e.data === 'reload') {
-      window.location.reload();
-    } else {
-      try {
-        const msg = JSON.parse(e.data);
-        if (msg.type === 'error') {
-          console.error('[vista] Build error:', msg.message);
-        }
-      } catch {}
+        ? `// Vista live-reload: listen for server component changes via SSE
+(function connectReload() {
+  const es = new EventSource('${constants_1.SSE_ENDPOINT}');
+  es.onmessage = (e) => {
+    if (e.data === 'reload') {
+      const errorOverlay = window.__VISTA_DEV_ERROR_OVERLAY__;
+      if (errorOverlay && typeof errorOverlay.clear === 'function') {
+        errorOverlay.clear();
+      }
+      const indicator = window.__VISTA_DEVTOOLS_INDICATOR__;
+      if (indicator && typeof indicator.pulse === 'function') {
+        indicator.pulse('hmr', 460);
+      }
+      setTimeout(() => window.location.reload(), 180);
+    } else {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'error' || msg.type === 'structure-error') {
+          const errorOverlay = window.__VISTA_DEV_ERROR_OVERLAY__;
+          if (errorOverlay && typeof errorOverlay.show === 'function') {
+            errorOverlay.show(msg.errors || msg.message);
+          }
+          console.error('[vista] Build error:', msg.message);
+        } else if (msg.type === 'ok' || msg.type === 'structure-ok') {
+          const errorOverlay = window.__VISTA_DEV_ERROR_OVERLAY__;
+          if (errorOverlay && typeof errorOverlay.clear === 'function') {
+            errorOverlay.clear();
+          }
+        }
+      } catch {}
     }
   };
   es.onerror = () => {

package/dist/bin/build.js

@@ -15,6 +15,8 @@ const config_1 = require("../config");
 const constants_1 = require("../constants");
 const structure_validator_1 = require("../server/structure-validator");
 const structure_log_1 = require("../server/structure-log");
+const devtools_indicator_snippet_1 = require("./devtools-indicator-snippet");
+const dev_error_overlay_snippet_1 = require("./dev-error-overlay-snippet");
 const _debug = !!process.env.VISTA_DEBUG;
 // Helper to run PostCSS
 function runPostCSS(cwd, vistaDir) {
@@ -71,6 +73,7 @@ function collectRouteArtifactEntries(node, segments = [], entries = []) {
 // Generate Client Entry File - TRUE RSC
 // Only imports components with 'use client' directive
 function generateClientEntry(cwd, vistaDir, clientComponents, isDev = false) {
+    const devToolsBootId = `legacy-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
     const appDir = path_1.default.join(cwd, 'app');
     // Generate imports ONLY for client components
     const clientImports = [];
@@ -202,62 +205,43 @@ if ((module as any).hot) {
 
 // Server-Side Live Reload (for server component changes)
 ${isDev
-        ? `
-// Vista Error Overlay Logic
-const VISTA_ERROR_ID = 'vista-compile-error';
-
-function showCompileError(message: string) {
-    let div = document.getElementById(VISTA_ERROR_ID);
-    if (!div) {
-        div = document.createElement('div');
-        div.id = VISTA_ERROR_ID;
-        div.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:99999;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;backdrop-filter:blur(4px);';
-        document.body.appendChild(div);
-    }
-    
-    div.innerHTML = \`
-        <div style="width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;background:#0a0a0a;border:1px solid #333;border-radius:12px;box-shadow:0 24px 48px -12px rgba(0,0,0,0.5);overflow:hidden;">
-            <div style="padding:16px 24px;background:#111;border-bottom:1px solid #333;display:flex;align-items:center;justify-content:space-between;">
-                <div style="display:flex;align-items:center;gap:12px;">
-                     <span style="font-weight:600;color:#f87171;background:rgba(248,113,113,0.1);padding:4px 12px;border-radius:99px;font-size:12px;display:flex;align-items:center;gap:6px;">
-                        <span style="width:8px;height:8px;background:currentColor;border-radius:50%;"></span>
-                        BUILD ERROR
-                    </span>
-                    <span style="color:#666;font-size:13px;">Vista JS Dev</span>
-                </div>
-            </div>
-            <div style="padding:24px;overflow:auto;background:#0a0a0a;">
-                <pre style="margin:0;font-size:13px;line-height:1.6;color:#e5e7eb;white-space:pre-wrap;">\${message.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>
-            </div>
-        </div>
-    \`;
-}
-
-function hideCompileError() {
-    const div = document.getElementById(VISTA_ERROR_ID);
-    if (div) div.remove();
-}
-
-const sse = new EventSource('${constants_1.SSE_ENDPOINT}');
-sse.onmessage = (event) => {
-    if (event.data === 'reload') {
-        hideCompileError();
-        console.log('[Vista] Server component changed, reloading...');
-        window.location.reload();
-        return;
-    }
+        ? `
+${(0, devtools_indicator_snippet_1.getDevToolsIndicatorBootstrapSource)(devToolsBootId)}
+${(0, dev_error_overlay_snippet_1.getDevErrorOverlayBootstrapSource)()}
+
+const sse = new EventSource('${constants_1.SSE_ENDPOINT}');
+sse.onmessage = (event) => {
+    if (event.data === 'reload') {
+        const errorOverlay = window.__VISTA_DEV_ERROR_OVERLAY__;
+        if (errorOverlay && typeof errorOverlay.clear === 'function') {
+            errorOverlay.clear();
+        }
+        console.log('[Vista] Server component changed, reloading...');
+        const indicator = window.__VISTA_DEVTOOLS_INDICATOR__;
+        if (indicator && typeof indicator.pulse === 'function') {
+            indicator.pulse('hmr', 460);
+        }
+        setTimeout(() => window.location.reload(), 180);
+        return;
+    }
     
-    try {
-        const data = JSON.parse(event.data);
-        if (data.type === 'error') {
-            showCompileError(data.message);
-        } else if (data.type === 'ok') {
-            hideCompileError();
-        }
-    } catch (e) {
-        // Ignore JSON parse errors for non-JSON messages
-    }
-};
+    try {
+        const data = JSON.parse(event.data);
+        if (data.type === 'error' || data.type === 'structure-error') {
+            const errorOverlay = window.__VISTA_DEV_ERROR_OVERLAY__;
+            if (errorOverlay && typeof errorOverlay.show === 'function') {
+                errorOverlay.show(data.errors || data.message);
+            }
+        } else if (data.type === 'ok' || data.type === 'structure-ok') {
+            const errorOverlay = window.__VISTA_DEV_ERROR_OVERLAY__;
+            if (errorOverlay && typeof errorOverlay.clear === 'function') {
+                errorOverlay.clear();
+            }
+        }
+    } catch (e) {
+        // Ignore JSON parse errors for non-JSON messages
+    }
+};
 
 sse.onerror = (e) => {
     console.log('[Vista] SSE connection lost');

package/dist/bin/dev-error-overlay-snippet.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns a JS snippet that installs the Vista dev error overlay.
+ * It supports Next.js-style error pagination and indicator restore.
+ */
+export declare function getDevErrorOverlayBootstrapSource(): string;