@catmint/vite 0.0.0-prealpha.1 → 0.0.0-prealpha.11

package/dist/dev-server.js

@@ -14,6 +14,7 @@
 //                calls createFromReadableStream → React VDOM → hydrateRoot
 import { join, dirname, relative } from "node:path";
 import { existsSync } from "node:fs";
+import { createHash } from "node:crypto";
 import { createRequire } from "node:module";
 import { deterministicHash, toPosixPath, CLIENT_NAVIGATION_RUNTIME, } from "./utils.js";
 import { errorPageHtml } from "./error-page.js";
@@ -94,7 +95,7 @@ function collectLayouts(pageFilePath, appDir) {
     const layouts = [];
     let dir = dirname(pageFilePath);
     while (dir.startsWith(appDir)) {
-        for (const name of ["layout.tsx", "layout.jsx", "layout.ts", "layout.js"]) {
+        for (const name of ["layout.tsx", "layout.ts"]) {
             const layoutPath = join(dir, name);
             if (existsSync(layoutPath)) {
                 layouts.unshift(layoutPath);
@@ -107,6 +108,154 @@ function collectLayouts(pageFilePath, appDir) {
     }
     return layouts;
 }
+/**
+ * File names checked for middleware, in priority order.
+ */
+const MIDDLEWARE_FILENAMES = ["middleware.ts", "middleware.tsx"];
+/**
+ * Resolve the middleware chain for a given route directory.
+ * Walks from the page's directory up to appDir, collecting middleware files.
+ * Returns paths in root-to-tip execution order.
+ */
+function collectMiddleware(pageFilePath, appDir) {
+    const middlewareFiles = [];
+    let dir = dirname(pageFilePath);
+    while (dir.startsWith(appDir)) {
+        for (const name of MIDDLEWARE_FILENAMES) {
+            const middlewarePath = join(dir, name);
+            if (existsSync(middlewarePath)) {
+                middlewareFiles.unshift(middlewarePath); // prepend for root-to-tip order
+                break; // Only one middleware file per directory
+            }
+        }
+        if (dir === appDir)
+            break;
+        dir = dirname(dir);
+    }
+    return middlewareFiles;
+}
+/**
+ * Convert a Node.js IncomingMessage to a Web Request object.
+ */
+function nodeReqToWebRequest(req) {
+    const protocol = "http";
+    const host = req.headers.host ?? "localhost";
+    const url = new URL(req.originalUrl ?? req.url ?? "/", `${protocol}://${host}`);
+    const headers = new Headers();
+    for (const [key, value] of Object.entries(req.headers)) {
+        if (value) {
+            if (Array.isArray(value)) {
+                for (const v of value) {
+                    headers.append(key, v);
+                }
+            }
+            else {
+                headers.set(key, value);
+            }
+        }
+    }
+    return new Request(url.href, {
+        method: req.method ?? "GET",
+        headers,
+    });
+}
+/**
+ * Send a Web Response back through a Node.js ServerResponse.
+ */
+async function sendWebResponse(res, webResponse) {
+    res.statusCode = webResponse.status;
+    webResponse.headers.forEach((value, key) => {
+        res.setHeader(key, value);
+    });
+    const body = await webResponse.text();
+    res.end(body);
+}
+/**
+ * Execute the middleware chain for a route. Returns a Response from middleware
+ * if middleware short-circuits (e.g., 401), or null if middleware calls next()
+ * and page rendering should proceed. Also returns any response headers that
+ * middleware added (e.g., X-Response-Time) so they can be merged into the
+ * final page response.
+ */
+async function executeMiddleware(server, req, pageFilePath, appDir) {
+    const middlewarePaths = collectMiddleware(pageFilePath, appDir);
+    if (middlewarePaths.length === 0) {
+        return { shortCircuit: null, headers: new Headers() };
+    }
+    const handlers = [];
+    for (const mwPath of middlewarePaths) {
+        try {
+            const importPath = "/" + relative(server.config.root, mwPath);
+            const mod = await server.ssrLoadModule(importPath);
+            const handler = mod.default;
+            if (typeof handler === "function") {
+                handlers.push(handler);
+            }
+        }
+        catch (err) {
+            server.config.logger.warn(`[catmint] Failed to load middleware ${mwPath}: ${err}`);
+        }
+    }
+    if (handlers.length === 0) {
+        return { shortCircuit: null, headers: new Headers() };
+    }
+    // Apply inherit boundary: walk backwards to find inherit: false
+    let boundaryIndex = 0;
+    for (let i = handlers.length - 1; i >= 0; i--) {
+        const opts = handlers[i].__catmintMiddleware;
+        if (opts && opts.inherit === false) {
+            boundaryIndex = i;
+            break;
+        }
+    }
+    const effectiveHandlers = handlers.slice(boundaryIndex);
+    // Create the Web Request
+    const webRequest = nodeReqToWebRequest(req);
+    // Compose and execute middleware chain
+    let middlewareCalledNext = false;
+    const capturedHeaders = new Headers();
+    const executeChain = (index) => {
+        if (index >= effectiveHandlers.length) {
+            // End of chain — middleware called next(), page rendering should proceed
+            middlewareCalledNext = true;
+            return Promise.resolve(new Response(null, { status: 200 }));
+        }
+        const handler = effectiveHandlers[index];
+        return Promise.resolve(handler(webRequest, () => {
+            const nextResult = executeChain(index + 1);
+            return nextResult.then((response) => {
+                // Capture headers from inner middleware/next
+                response.headers.forEach((value, key) => {
+                    capturedHeaders.set(key, value);
+                });
+                return response;
+            });
+        })).then((response) => {
+            // Capture headers from this middleware
+            response.headers.forEach((value, key) => {
+                capturedHeaders.set(key, value);
+            });
+            return response;
+        });
+    };
+    try {
+        const response = await executeChain(0);
+        if (!middlewareCalledNext) {
+            // Middleware short-circuited (returned a response without calling next)
+            return { shortCircuit: response, headers: capturedHeaders };
+        }
+        // Middleware called next() — proceed with page rendering
+        // but pass along any headers middleware added
+        return { shortCircuit: null, headers: capturedHeaders };
+    }
+    catch (err) {
+        server.config.logger.error(`[catmint] Middleware error: ${err}`);
+        return {
+            shortCircuit: new Response("Internal Server Error", { status: 500 }),
+            headers: new Headers(),
+        };
+    }
+}
 /**
  * CSS file extensions that Vite processes.
  */
@@ -349,6 +498,52 @@ const SERVER_FN_PREFIX = "/__catmint/fn/";
  * RSC flight stream prefix for client-side navigation.
  */
 const RSC_NAVIGATION_PREFIX = "/__catmint/rsc";
+// ---------------------------------------------------------------------------
+// Server function error detection helpers (duck-typing)
+//
+// The dev-server cannot import from `catmint` directly (it's in the
+// `@catmint/vite` package). Instead, we detect error types by checking
+// for characteristic properties — this matches instances loaded at
+// runtime via Vite's SSR module loader.
+// ---------------------------------------------------------------------------
+/**
+ * Check if a value looks like a ClientSafeError (duck-typing).
+ * Matches: instance has `name === "ClientSafeError"` OR has `statusCode`
+ * property and the constructor chain includes a class with name "ClientSafeError".
+ */
+function isClientSafeErrorLike(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    // Direct instance check by name (supports subclasses via prototype chain)
+    if (value instanceof Error && typeof value.statusCode === "number") {
+        let proto = Object.getPrototypeOf(value);
+        while (proto && proto !== Error.prototype) {
+            if (proto.constructor?.name === "ClientSafeError")
+                return true;
+            proto = Object.getPrototypeOf(proto);
+        }
+    }
+    return false;
+}
+/**
+ * Check if a value looks like a RedirectError (duck-typing).
+ */
+function isRedirectErrorLike(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    return (value instanceof Error &&
+        value.name === "RedirectError" &&
+        typeof value.url === "string" &&
+        typeof value.status === "number");
+}
+/**
+ * Generate a short correlation hash for error tracking.
+ * Used in production to link client error messages to server logs.
+ */
+function errorRef(err) {
+    const content = `${Date.now()}:${err instanceof Error ? err.message : String(err)}`;
+    return createHash("sha256").update(content).digest("hex").slice(0, 8);
+}
 /**
  * Handle a server function RPC call.
  *
@@ -441,17 +636,63 @@ async function handleServerFn(server, req, res, pathname) {
     // Call the server function
     try {
         const result = await matchedFn(input);
+        // Check if the result IS a ClientSafeError (returned, not thrown).
+        // Use duck-typing since we can't import from `catmint` directly.
+        if (isClientSafeErrorLike(result)) {
+            res.statusCode = 200;
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({
+                __clientSafeError: true,
+                error: result.message,
+                statusCode: result.statusCode,
+                data: result.data,
+            }));
+            return;
+        }
         res.statusCode = 200;
         res.setHeader("Content-Type", "application/json");
         res.end(JSON.stringify(result));
     }
     catch (err) {
+        // Always log the full error server-side
         server.config.logger.error(`[catmint] Server function error: ${err instanceof Error ? (err.stack ?? err.message) : String(err)}`);
-        res.statusCode = 500;
         res.setHeader("Content-Type", "application/json");
-        res.end(JSON.stringify({
-            error: err instanceof Error ? err.message : "Server function error",
-        }));
+        // RedirectError — send redirect envelope to client
+        if (isRedirectErrorLike(err)) {
+            res.statusCode = 200;
+            res.end(JSON.stringify({
+                __redirect: true,
+                url: err.url,
+                status: err.status,
+            }));
+            return;
+        }
+        // ClientSafeError — developer opted in, expose to client
+        if (isClientSafeErrorLike(err)) {
+            res.statusCode = err.statusCode;
+            res.end(JSON.stringify({
+                error: err.message,
+                data: err.data,
+            }));
+            return;
+        }
+        // Default: sanitize error — in dev mode, leak with warning;
+        // in prod mode, use generic message with correlation hash
+        const isDev = server.config.mode === "development" || !server.config.isProduction;
+        res.statusCode = 500;
+        if (isDev) {
+            const originalMessage = err instanceof Error ? err.message : String(err);
+            res.end(JSON.stringify({
+                error: `[DEV ONLY] ${originalMessage}`,
+            }));
+        }
+        else {
+            const ref = errorRef(err);
+            server.config.logger.error(`[catmint] Error reference [ref: ${ref}] — see above for full error`);
+            res.end(JSON.stringify({
+                error: `Internal Server Error [ref: ${ref}]`,
+            }));
+        }
     }
 }
 /**
@@ -894,6 +1135,28 @@ export function devServerPlugin(options) {
             server = viteServer;
             appDir = join(server.config.root, "app");
             statusPages = scanStatusPages(appDir);
+            // Invalidate route matchers when route files are added or removed.
+            // Vite's handleHotUpdate only fires for files already in the module
+            // graph, so newly created or deleted files need this watcher to
+            // trigger a re-scan on the next request.
+            const isRouteFile = (f) => f.includes("/app/") &&
+                (f.endsWith("page.tsx") ||
+                    f.endsWith("page.mdx") ||
+                    f.endsWith("endpoint.ts"));
+            server.watcher.on("add", (file) => {
+                if (isRouteFile(file)) {
+                    pageMatcher = null;
+                    endpointMatcher = null;
+                    server.config.logger.info(`[catmint] Route file added: ${file} — invalidating route cache`);
+                }
+            });
+            server.watcher.on("unlink", (file) => {
+                if (isRouteFile(file)) {
+                    pageMatcher = null;
+                    endpointMatcher = null;
+                    server.config.logger.info(`[catmint] Route file removed: ${file} — invalidating route cache`);
+                }
+            });
             return () => {
                 server.middlewares.use(async (req, res, next) => {
                     const url = req.originalUrl ?? req.url ?? "/";
@@ -962,6 +1225,17 @@ export function devServerPlugin(options) {
                                 res.end(JSON.stringify({ error: "RSC not available" }));
                                 return;
                             }
+                            // Execute middleware for the TARGET page path (not /__catmint/rsc)
+                            const middlewareResult = await executeMiddleware(server, req, match.route.filePath, appDir);
+                            if (middlewareResult.shortCircuit) {
+                                // Middleware short-circuited (e.g., returned 401)
+                                await sendWebResponse(res, middlewareResult.shortCircuit);
+                                return;
+                            }
+                            // Apply middleware response headers (e.g., X-Response-Time)
+                            middlewareResult.headers.forEach((value, key) => {
+                                res.setHeader(key, value);
+                            });
                             await handleRscNavigation(server, req, res, match, appDir, i18nConfig);
                         }
                         catch (error) {
@@ -1016,6 +1290,19 @@ export function devServerPlugin(options) {
                             await sendStatusPage(res, 404, url);
                             return;
                         }
+                        // --- Execute middleware chain for this route ---
+                        const routeDir = dirname(match.route.filePath);
+                        const middlewareResult = await executeMiddleware(server, req, match.route.filePath, appDir);
+                        if (middlewareResult.shortCircuit) {
+                            // Middleware short-circuited (e.g., returned 401)
+                            await sendWebResponse(res, middlewareResult.shortCircuit);
+                            return;
+                        }
+                        // Apply middleware response headers (e.g., X-Response-Time)
+                        // These will be set on the response before page rendering streams
+                        middlewareResult.headers.forEach((value, key) => {
+                            res.setHeader(key, value);
+                        });
                         // Check if RSC environments are available
                         if (hasRscEnvironments()) {
                             await handlePageWithRsc(server, req, res, match, appDir, softNav, i18nConfig, sendStatusPage);
@@ -1051,10 +1338,8 @@ export function devServerPlugin(options) {
         handleHotUpdate({ file, server: hmrServer }) {
             if (file.includes("/app/") &&
                 (file.endsWith("page.tsx") ||
-                    file.endsWith("page.jsx") ||
                     file.endsWith("page.mdx") ||
-                    file.endsWith("endpoint.ts") ||
-                    file.endsWith("endpoint.js"))) {
+                    file.endsWith("endpoint.ts"))) {
                 pageMatcher = null;
                 endpointMatcher = null;
             }
@@ -1064,7 +1349,7 @@ export function devServerPlugin(options) {
             // status page is picked up on the next error.
             if (file.includes("/app/")) {
                 const basename = file.split("/").pop() ?? "";
-                if (/^\d{3}\.(tsx|jsx|ts|js)$/.test(basename)) {
+                if (/^\d{3}\.(tsx|ts)$/.test(basename)) {
                     statusPages = scanStatusPages(appDir);
                     hmrServer.config.logger.info(`[catmint] Status page changed: ${basename} — triggering reload`);
                     hmrServer.hot.send({ type: "full-reload", path: "*" });
@@ -1144,7 +1429,11 @@ async function handlePageWithRsc(server, req, res, match, appDir, softNavigation
     // If a loading.tsx is found, wrap the page with a Suspense boundary.
     // If an error.tsx is found via walk-up resolution, wrap the page
     // with the error boundary component inside the nearest layout.
-    let element = createElement(PageComponent, null);
+    const pageProps = {};
+    if (match.params && Object.keys(match.params).length > 0) {
+        pageProps.params = match.params;
+    }
+    let element = createElement(PageComponent, Object.keys(pageProps).length > 0 ? pageProps : null);
     // Resolve loading.tsx from the page directory for Suspense fallback
     const loadingPath = resolveLoadingComponent(match.route.filePath);
     if (loadingPath) {
@@ -1172,10 +1461,24 @@ async function handlePageWithRsc(server, req, res, match, appDir, softNavigation
         const errorBoundaryImportPath = "/" + relative(root, errorBoundaryPath);
         try {
             const errorMod = await rscEnv.runner.import(errorBoundaryImportPath);
-            const ErrorBoundaryComponent = errorMod.default;
-            if (ErrorBoundaryComponent) {
-                // Wrap page with error boundary — it renders inside the nearest layout
-                element = createElement(ErrorBoundaryComponent, { children: element });
+            const ErrorFallbackComponent = errorMod.default;
+            if (ErrorFallbackComponent) {
+                // Import the ErrorBoundary class component to properly catch errors
+                const errorBoundaryMod = await rscEnv.runner.import("catmint/error");
+                const ErrorBoundary = errorBoundaryMod.ErrorBoundary ??
+                    errorBoundaryMod.default?.ErrorBoundary;
+                if (ErrorBoundary) {
+                    element = createElement(ErrorBoundary, {
+                        fallback: ErrorFallbackComponent,
+                        children: element,
+                    });
+                }
+                else {
+                    // Fallback: wrap page with error fallback component directly
+                    element = createElement(ErrorFallbackComponent, {
+                        children: element,
+                    });
+                }
             }
         }
         catch {
@@ -1348,7 +1651,11 @@ async function handleRscNavigation(server, _req, res, match, appDir, i18nConfig
     // If a loading.tsx is found, wrap the page with a Suspense boundary.
     // If an error.tsx is found via walk-up resolution, wrap the page
     // with the error boundary component inside the nearest layout.
-    let element = createElement(PageComponent, null);
+    const navPageProps = {};
+    if (match.params && Object.keys(match.params).length > 0) {
+        navPageProps.params = match.params;
+    }
+    let element = createElement(PageComponent, Object.keys(navPageProps).length > 0 ? navPageProps : null);
     // Resolve loading.tsx from the page directory for Suspense fallback
     const loadingPath = resolveLoadingComponent(match.route.filePath);
     if (loadingPath) {
@@ -1376,10 +1683,24 @@ async function handleRscNavigation(server, _req, res, match, appDir, i18nConfig
         const errorBoundaryImportPath = "/" + relative(root, errorBoundaryPath);
         try {
             const errorMod = await rscEnv.runner.import(errorBoundaryImportPath);
-            const ErrorBoundaryComponent = errorMod.default;
-            if (ErrorBoundaryComponent) {
-                // Wrap page with error boundary — it renders inside the nearest layout
-                element = createElement(ErrorBoundaryComponent, { children: element });
+            const ErrorFallbackComponent = errorMod.default;
+            if (ErrorFallbackComponent) {
+                // Import the ErrorBoundary class component to properly catch errors
+                const errorBoundaryMod = await rscEnv.runner.import("catmint/error");
+                const ErrorBoundary = errorBoundaryMod.ErrorBoundary ??
+                    errorBoundaryMod.default?.ErrorBoundary;
+                if (ErrorBoundary) {
+                    element = createElement(ErrorBoundary, {
+                        fallback: ErrorFallbackComponent,
+                        children: element,
+                    });
+                }
+                else {
+                    // Fallback: wrap page with error fallback component directly
+                    element = createElement(ErrorFallbackComponent, {
+                        children: element,
+                    });
+                }
             }
         }
         catch {
@@ -1459,7 +1780,9 @@ async function handlePageLegacy(server, _req, res, match, appDir, hydrScripts, h
     }
     // Resolve generateMetadata exports from page + layout modules
     const headConfig = await resolveGenerateMetadata(pageMod, layoutMods, match.params ?? {}, url);
-    let element = React.createElement(PageComponent, null);
+    let element = React.createElement(PageComponent, match.params && Object.keys(match.params).length > 0
+        ? { params: match.params }
+        : null);
     for (let i = layoutComponents.length - 1; i >= 0; i--) {
         element = React.createElement(layoutComponents[i], null, element);
     }
@@ -1629,6 +1952,31 @@ hydrate().then(() => {
     setupClientNavigation(root);
   }
 });
+
+// HMR: When server components (page.tsx, layout.tsx) are edited, the RSC
+// plugin sends an "rsc:update" event.  Re-fetch the flight stream for the
+// current page and re-render so the update appears without a full reload.
+if (import.meta.hot) {
+  import.meta.hot.on("rsc:update", async () => {
+    if (!root) return;
+    try {
+      var rscUrl = "/__catmint/rsc?path=" + encodeURIComponent(
+        window.location.pathname + window.location.search
+      );
+      var response = await fetch(rscUrl);
+      if (!response.ok) {
+        window.location.reload();
+        return;
+      }
+      var { createFromReadableStream } = await import("@vitejs/plugin-rsc/browser");
+      var newRoot = await createFromReadableStream(response.body);
+      root.render(newRoot);
+    } catch (err) {
+      console.error("[catmint] HMR update failed, reloading:", err);
+      window.location.reload();
+    }
+  });
+}
 `;
 }
 // --------------------------------------------------------------------------