@absolutejs/absolute 0.20.0-beta.127 → 0.20.0-beta.128

package/dist/react/index.js

@@ -374,7 +374,96 @@ var init_devRouteRegistrationCallsite = __esm(() => {
   pageHandlerWrappers = new WeakMap;
 });
 
+// src/utils/ssrErrorPage.ts
+var exports_ssrErrorPage = {};
+__export(exports_ssrErrorPage, {
+  buildErrorPage: () => buildErrorPage,
+  ssrErrorPage: () => ssrErrorPage
+});
+var errorPageHtml = ({
+  framework,
+  hint,
+  kind,
+  message,
+  script = ""
+}) => {
+  const frameworkColors = {
+    angular: "#dd0031",
+    html: "#e34c26",
+    htmx: "#1a365d",
+    react: "#61dafb",
+    svelte: "#ff3e00",
+    vue: "#42b883"
+  };
+  const accent = frameworkColors[framework] ?? "#94a3b8";
+  const label = framework.charAt(0).toUpperCase() + framework.slice(1);
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SSR Error - AbsoluteJS</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{min-height:100vh;background:linear-gradient(135deg,rgba(15,23,42,0.98) 0%,rgba(30,41,59,0.98) 100%);color:#e2e8f0;font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.6;display:flex;align-items:flex-start;justify-content:center;padding:32px}
+.card{max-width:720px;width:100%;background:rgba(30,41,59,0.6);border:1px solid rgba(71,85,105,0.5);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);overflow:hidden}
+.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:rgba(15,23,42,0.5);border-bottom:1px solid rgba(71,85,105,0.4)}
+.brand{font-weight:700;font-size:20px;color:#fff;letter-spacing:-0.02em}
+.badge{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;background:${accent};color:#fff;opacity:0.95;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
+.kind{color:#94a3b8;font-size:13px;font-weight:500}
+.content{padding:24px}
+.label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:8px}
+.message{margin:0;padding:16px 20px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:#fca5a5;font-size:13px;line-height:1.5}
+.hint{margin-top:20px;padding:12px 20px;background:rgba(71,85,105,0.3);border-radius:10px;border:1px solid rgba(71,85,105,0.4);color:#cbd5e1;font-size:13px}
+</style>
+</head>
+<body>
+<div class="card">
+<div class="header">
+<div style="display:flex;align-items:center;gap:12px">
+<span class="brand">AbsoluteJS</span>
+<span class="badge">${label}</span>
+</div>
+<span class="kind">${kind}</span>
+</div>
+<div class="content">
+<div class="label">What went wrong</div>
+<pre class="message">${message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>
+<div class="hint">${hint}</div>
+</div>
+</div>
+${script}
+</body>
+</html>`;
+}, RELOAD_ON_REBUILD = `<script>(()=>{const url=(location.protocol==='https:'?'wss://':'ws://')+location.host+'/hmr';let seen=false;const connect=()=>{const socket=new WebSocket(url);socket.onopen=()=>{if(seen)location.reload();seen=true;};socket.onmessage=(event)=>{try{const message=JSON.parse(event.data);const type=message&&typeof message.type==='string'?message.type:'';if(type==='rebuild-complete'||type==='server-entry-reloaded'||type.endsWith('-update'))location.reload();}catch{}};socket.onclose=()=>setTimeout(connect,500);};connect();})();</script>`, buildErrorPage = (framework, pageName, error) => errorPageHtml({
+  framework,
+  hint: "Fix the file and save. This page reloads by itself when the build succeeds.",
+  kind: "Build Error",
+  message: `${pageName || "This page"} could not be built.
+
+${error ?? "The dev-server terminal has the build output."}`,
+  script: RELOAD_ON_REBUILD
+}), ssrErrorPage = (framework, error) => errorPageHtml({
+  framework,
+  hint: "A component threw during server-side rendering. Check the terminal for the full stack trace.",
+  kind: "Server Render Error",
+  message: error instanceof Error ? error.message : String(error)
+});
+
 // src/core/requestContext.ts
+var exports_requestContext = {};
+__export(exports_requestContext, {
+  absoluteRequestContext: () => absoluteRequestContext,
+  devBuildErrorResponse: () => devBuildErrorResponse,
+  getCurrentAbsoluteRequest: () => getCurrentAbsoluteRequest,
+  getDevPageWarmer: () => getDevPageWarmer,
+  getMissingAssets: () => getMissingAssets,
+  recordMissingAsset: () => recordMissingAsset,
+  resolveDeferredPageAssets: () => resolveDeferredPageAssets,
+  runWithAbsoluteRequest: () => runWithAbsoluteRequest,
+  setDevPageWarmer: () => setDevPageWarmer,
+  withDeferredStylesheets: () => withDeferredStylesheets
+});
 import { AsyncLocalStorage as AsyncLocalStorage2 } from "async_hooks";
 import { Elysia as Elysia2 } from "elysia";
 var REQUEST_STORAGE_KEY, PAGE_WARMER_KEY, isAbsoluteRequestStorage = (value) => typeof value === "object" && value !== null && ("getStore" in value) && typeof value.getStore === "function" && ("run" in value) && typeof value.run === "function", getRequestStorage = () => {
@@ -387,7 +476,17 @@ var REQUEST_STORAGE_KEY, PAGE_WARMER_KEY, isAbsoluteRequestStorage = (value) =>
   const storage = new AsyncLocalStorage2;
   Reflect.set(globalThis, REQUEST_STORAGE_KEY, storage);
   return storage;
-}, absoluteRequestContext, getCurrentAbsoluteRequest = () => getRequestStorage()?.getStore()?.request, runWithAbsoluteRequest = (request, callback) => ensureRequestStorage().run({ request }, callback), CSS_KEY_RE, isDevPageWarmer = (value) => typeof value === "object" && value !== null && ("describe" in value) && typeof value.describe === "function" && ("warm" in value) && typeof value.warm === "function" && ("lookup" in value) && typeof value.lookup === "function", getDevPageWarmer = () => {
+}, absoluteRequestContext, getCurrentAbsoluteRequest = () => getRequestStorage()?.getStore()?.request, runWithAbsoluteRequest = (request, callback) => ensureRequestStorage().run({ request }, callback), CSS_KEY_RE, isDevPageWarmer = (value) => typeof value === "object" && value !== null && ("describe" in value) && typeof value.describe === "function" && ("warm" in value) && typeof value.warm === "function" && ("lookup" in value) && typeof value.lookup === "function", devBuildErrorResponse = (framework, assets) => {
+  if (!assets?.failed)
+    return null;
+  return new Response(buildErrorPage(framework, assets.name, assets.error), {
+    headers: {
+      "cache-control": "no-store",
+      "content-type": "text/html; charset=utf-8"
+    },
+    status: 500
+  });
+}, getDevPageWarmer = () => {
   const value = Reflect.get(globalThis, PAGE_WARMER_KEY);
   return isDevPageWarmer(value) ? value : undefined;
 }, getMissingAssets = () => {
@@ -417,6 +516,7 @@ var REQUEST_STORAGE_KEY, PAGE_WARMER_KEY, isAbsoluteRequestStorage = (value) =>
   const cssHrefs = () => cssKeys.map(lookup).filter((href) => href.length > 0 && href.startsWith("/"));
   const assets = {
     cssHrefs,
+    error: failed ? warmer.lastError?.() : undefined,
     failed,
     lookup,
     name: described.name
@@ -1694,62 +1794,6 @@ var init_logger = __esm(() => {
   };
 });
 
-// src/utils/ssrErrorPage.ts
-var exports_ssrErrorPage = {};
-__export(exports_ssrErrorPage, {
-  ssrErrorPage: () => ssrErrorPage
-});
-var ssrErrorPage = (framework, error) => {
-  const frameworkColors2 = {
-    angular: "#dd0031",
-    html: "#e34c26",
-    htmx: "#1a365d",
-    react: "#61dafb",
-    svelte: "#ff3e00",
-    vue: "#42b883"
-  };
-  const accent = frameworkColors2[framework] ?? "#94a3b8";
-  const label = framework.charAt(0).toUpperCase() + framework.slice(1);
-  const message = error instanceof Error ? error.message : String(error);
-  return `<!DOCTYPE html>
-<html>
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>SSR Error - AbsoluteJS</title>
-<style>
-*{margin:0;padding:0;box-sizing:border-box}
-body{min-height:100vh;background:linear-gradient(135deg,rgba(15,23,42,0.98) 0%,rgba(30,41,59,0.98) 100%);color:#e2e8f0;font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.6;display:flex;align-items:flex-start;justify-content:center;padding:32px}
-.card{max-width:720px;width:100%;background:rgba(30,41,59,0.6);border:1px solid rgba(71,85,105,0.5);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);overflow:hidden}
-.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:rgba(15,23,42,0.5);border-bottom:1px solid rgba(71,85,105,0.4)}
-.brand{font-weight:700;font-size:20px;color:#fff;letter-spacing:-0.02em}
-.badge{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;background:${accent};color:#fff;opacity:0.95;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
-.kind{color:#94a3b8;font-size:13px;font-weight:500}
-.content{padding:24px}
-.label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:8px}
-.message{margin:0;padding:16px 20px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:#fca5a5;font-size:13px;line-height:1.5}
-.hint{margin-top:20px;padding:12px 20px;background:rgba(71,85,105,0.3);border-radius:10px;border:1px solid rgba(71,85,105,0.4);color:#cbd5e1;font-size:13px}
-</style>
-</head>
-<body>
-<div class="card">
-<div class="header">
-<div style="display:flex;align-items:center;gap:12px">
-<span class="brand">AbsoluteJS</span>
-<span class="badge">${label}</span>
-</div>
-<span class="kind">Server Render Error</span>
-</div>
-<div class="content">
-<div class="label">What went wrong</div>
-<pre class="message">${message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>
-<div class="hint">A component threw during server-side rendering. Check the terminal for the full stack trace.</div>
-</div>
-</div>
-</body>
-</html>`;
-};
-
 // src/utils/stringModifiers.ts
 var normalizeSlug = (str) => str.trim().replace(/\s+/g, "-").replace(/[^A-Za-z0-9\-_]+/g, "").replace(/[-_]{2,}/g, "-"), toKebab = (str) => normalizeSlug(str).replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), toPascal = (str) => {
   if (!str.includes("-") && !str.includes("_")) {
@@ -4804,6 +4848,9 @@ var buildRefreshSetup = () => {
 var handleReactPageRequest = async (input) => {
   const { Page } = input;
   const deferredAssets = input.index === "" ? await resolveDeferredPageAssets() : null;
+  const buildFailure = devBuildErrorResponse("react", deferredAssets);
+  if (buildFailure)
+    return buildFailure;
   const resolvedIndex = deferredAssets && input.index === "" ? deferredAssets.lookup(`${deferredAssets.name}Index`) : input.index;
   const options = input;
   const userProps = input.props;
@@ -5029,5 +5076,5 @@ export {
   useIslandStore
 };
 
-//# debugId=EB8174B81607FA3364756E2164756E21
+//# debugId=9893AAB6846669EF64756E2164756E21
 //# sourceMappingURL=index.js.map