vinext 0.0.22 → 0.0.24

package/dist/index.js

@@ -1,6 +1,7 @@
 import { loadEnv, parseAst } from "vite";
 import { pagesRouter, apiRouter, invalidateRouteCache, matchRoute, patternToNextFormat as pagesPatternToNextFormat } from "./routing/pages-router.js";
 import { appRouter, invalidateAppRouteCache } from "./routing/app-router.js";
+import { createValidFileMatcher } from "./routing/file-matcher.js";
 import { createSSRHandler } from "./server/dev-server.js";
 import { handleApiRoute } from "./server/api-handler.js";
 import { generateRscEntry, generateSsrEntry, generateBrowserEntry, } from "./server/app-dev-server.js";
@@ -10,11 +11,13 @@ import { logRequest, now } from "./server/request-log.js";
 import { generateSafeRegExpCode, generateMiddlewareMatcherCode, generateNormalizePathCode } from "./server/middleware-codegen.js";
 import { normalizePath } from "./server/normalize-path.js";
 import { findInstrumentationFile, runInstrumentation } from "./server/instrumentation.js";
+import { PHASE_PRODUCTION_BUILD, PHASE_DEVELOPMENT_SERVER } from "./shims/constants.js";
 import { validateDevRequest } from "./server/dev-origin-check.js";
 import { safeRegExp, isExternalUrl, proxyExternalRequest, parseCookies, matchHeaders, matchRedirect, matchRewrite, } from "./config/config-matchers.js";
 import { scanMetadataFiles } from "./server/metadata-routes.js";
 import { detectPackageManager } from "./utils/project.js";
 import tsconfigPaths from "vite-tsconfig-paths";
+import react from "@vitejs/plugin-react";
 import MagicString from "magic-string";
 import path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
@@ -493,6 +496,7 @@ export default function vinext(options = {}) {
     let hasAppDir = false;
     let hasPagesDir = false;
     let nextConfig;
+    let fileMatcher;
     let middlewarePath = null;
     let instrumentationPath = null;
     let hasCloudflarePlugin = false;
@@ -506,8 +510,8 @@ export default function vinext(options = {}) {
      * This is the entry point for `vite build --ssr`.
      */
     async function generateServerEntry() {
-        const pageRoutes = await pagesRouter(pagesDir);
-        const apiRoutes = await apiRouter(pagesDir);
+        const pageRoutes = await pagesRouter(pagesDir, nextConfig?.pageExtensions, fileMatcher);
+        const apiRoutes = await apiRouter(pagesDir, nextConfig?.pageExtensions, fileMatcher);
         // Generate import statements using absolute paths since virtual
         // modules don't have a real file location for relative resolution.
         const pageImports = pageRoutes.map((r, i) => {
@@ -527,16 +531,15 @@ export default function vinext(options = {}) {
             return `  { pattern: ${JSON.stringify(r.pattern)}, isDynamic: ${r.isDynamic}, params: ${JSON.stringify(r.params)}, module: api_${i} }`;
         });
         // Check for _app and _document
-        const hasApp = fs.existsSync(path.join(pagesDir, "_app.tsx")) || fs.existsSync(path.join(pagesDir, "_app.jsx")) || fs.existsSync(path.join(pagesDir, "_app.ts")) || fs.existsSync(path.join(pagesDir, "_app.js"));
-        const hasDoc = fs.existsSync(path.join(pagesDir, "_document.tsx")) || fs.existsSync(path.join(pagesDir, "_document.jsx")) || fs.existsSync(path.join(pagesDir, "_document.ts")) || fs.existsSync(path.join(pagesDir, "_document.js"));
-        // Use absolute paths for _app and _document too
-        const appFileBase = path.join(pagesDir, "_app").replace(/\\/g, "/");
-        const docFileBase = path.join(pagesDir, "_document").replace(/\\/g, "/");
+        const appFilePath = findFileWithExts(pagesDir, "_app", fileMatcher);
+        const docFilePath = findFileWithExts(pagesDir, "_document", fileMatcher);
+        const hasApp = appFilePath !== null;
+        const hasDoc = docFilePath !== null;
         const appImportCode = hasApp
-            ? `import { default as AppComponent } from ${JSON.stringify(appFileBase)};`
+            ? `import { default as AppComponent } from ${JSON.stringify(appFilePath.replace(/\\/g, "/"))};`
             : `const AppComponent = null;`;
         const docImportCode = hasDoc
-            ? `import { default as DocumentComponent } from ${JSON.stringify(docFileBase)};`
+            ? `import { default as DocumentComponent } from ${JSON.stringify(docFilePath.replace(/\\/g, "/"))};`
             : `const DocumentComponent = null;`;
         // Serialize i18n config for embedding in the server entry
         const i18nConfigJson = nextConfig?.i18n
@@ -1460,8 +1463,9 @@ ${middlewareExportCode}
      * __NEXT_DATA__ to determine which page to hydrate.
      */
     async function generateClientEntry() {
-        const pageRoutes = await pagesRouter(pagesDir);
-        const hasApp = fs.existsSync(path.join(pagesDir, "_app.tsx")) || fs.existsSync(path.join(pagesDir, "_app.jsx")) || fs.existsSync(path.join(pagesDir, "_app.ts")) || fs.existsSync(path.join(pagesDir, "_app.js"));
+        const pageRoutes = await pagesRouter(pagesDir, nextConfig?.pageExtensions, fileMatcher);
+        const appFilePath = findFileWithExts(pagesDir, "_app", fileMatcher);
+        const hasApp = appFilePath !== null;
         // Build a map of route pattern -> dynamic import.
         // Keys must use Next.js bracket format (e.g. "/user/[id]") to match
         // __NEXT_DATA__.page which is set via patternToNextFormat() during SSR.
@@ -1473,7 +1477,7 @@ ${middlewareExportCode}
             // lgtm[js/bad-code-sanitization]
             return `  ${JSON.stringify(nextFormatPattern)}: () => import(${JSON.stringify(absPath)})`;
         });
-        const appFileBase = path.join(pagesDir, "_app").replace(/\\/g, "/");
+        const appFileBase = appFilePath?.replace(/\\/g, "/");
         return `
 import React from "react";
 import { hydrateRoot } from "react-dom/client";
@@ -1594,10 +1598,15 @@ hydrate();
     // Shared state for the MDX proxy plugin. Populated during config() if MDX
     // files are detected and @mdx-js/rollup is installed.
     let mdxDelegate = null;
+    const reactPlugin = options.react === false
+        ? false
+        : react(options.react === true ? undefined : options.react);
     const plugins = [
         // Resolve tsconfig paths/baseUrl aliases so real-world Next.js repos
         // that use @/*, #/*, or baseUrl imports work out of the box.
         tsconfigPaths(),
+        // React Fast Refresh + JSX transform for client components.
+        reactPlugin,
         // Transform CJS require()/module.exports to ESM before other plugins
         // analyze imports (RSC directive scanning, shim resolution, etc.)
         commonjs(),
@@ -1666,8 +1675,10 @@ hydrate();
                 middlewarePath = findMiddlewareFile(root);
                 instrumentationPath = findInstrumentationFile(root);
                 // Load next.config.js if present (always from project root, not src/)
-                const rawConfig = await loadNextConfig(root);
+                const phase = env?.command === "build" ? PHASE_PRODUCTION_BUILD : PHASE_DEVELOPMENT_SERVER;
+                const rawConfig = await loadNextConfig(root, phase);
                 nextConfig = await resolveNextConfig(rawConfig);
+                fileMatcher = createValidFileMatcher(nextConfig.pageExtensions);
                 // Merge env from next.config.js with NEXT_PUBLIC_* env vars
                 const defines = getNextPublicEnvDefines();
                 if (!config.define ||
@@ -1976,6 +1987,13 @@ hydrate();
                             },
                         },
                         client: {
+                            // Explicitly mark as client consumer so other plugins (e.g. Nitro)
+                            // can detect this during configEnvironment hooks — before Vite
+                            // applies the default consumer based on environment name.
+                            // Without this, Nitro's configEnvironment creates a server-side
+                            // service for the client environment, causing virtual module
+                            // imports to leak to Node's native ESM loader (ERR_UNSUPPORTED_ESM_URL_SCHEME).
+                            consumer: "client",
                             optimizeDeps: {
                                 exclude: ["vinext"],
                                 // React packages aren't crawled from app/ source files,
@@ -2013,6 +2031,7 @@ hydrate();
                     // and there's no client-side hydration.
                     viteConfig.environments = {
                         client: {
+                            consumer: "client",
                             build: {
                                 manifest: true,
                                 ssrManifest: true,
@@ -2110,10 +2129,10 @@ hydrate();
                 }
                 // App Router virtual modules
                 if (id === RESOLVED_RSC_ENTRY && hasAppDir) {
-                    const routes = await appRouter(appDir);
+                    const routes = await appRouter(appDir, nextConfig?.pageExtensions, fileMatcher);
                     const metaRoutes = scanMetadataFiles(appDir);
                     // Check for global-error.tsx at app root
-                    const globalErrorPath = findFileWithExts(appDir, "global-error");
+                    const globalErrorPath = findFileWithExts(appDir, "global-error", fileMatcher);
                     return generateRscEntry(appDir, routes, middlewarePath, metaRoutes, globalErrorPath, nextConfig?.basePath, nextConfig?.trailingSlash, {
                         redirects: nextConfig?.redirects,
                         rewrites: nextConfig?.rewrites,
@@ -2207,24 +2226,22 @@ hydrate();
         {
             name: "vinext:pages-router",
             // HMR: trigger full-reload for Pages Router page changes.
-            // Without @vitejs/plugin-react (React Fast Refresh), component edits
-            // can't be hot-updated. In theory Vite's default propagation should
-            // reach the root and trigger a full-reload, but the Pages Router
-            // injects hydration via inline <script type="module"> which may not
-            // be tracked in the module graph. Explicitly sending full-reload
-            // ensures changes are always reflected in the browser.
+            // Even with @vitejs/plugin-react providing React Fast Refresh,
+            // the Pages Router injects hydration via inline <script type="module">
+            // which may not be tracked in Vite's module graph. Explicitly
+            // sending full-reload ensures changes are always reflected in
+            // the browser.
             hotUpdate(options) {
                 if (!hasPagesDir || hasAppDir)
                     return;
-                const ext = /\.(tsx?|jsx?|mdx)$/;
-                if (options.file.startsWith(pagesDir) && ext.test(options.file)) {
+                if (options.file.startsWith(pagesDir) && fileMatcher.extensionRegex.test(options.file)) {
                     options.server.environments.client.hot.send({ type: "full-reload" });
                     return [];
                 }
             },
             configureServer(server) {
                 // Watch pages directory for file additions/removals to invalidate route cache.
-                const pageExtensions = /\.(tsx?|jsx?|mdx)$/;
+                const pageExtensions = fileMatcher.extensionRegex;
                 /**
                  * Invalidate the virtual RSC entry module in Vite's module graph.
                  *
@@ -2262,12 +2279,6 @@ hydrate();
                         invalidateRscEntryModule();
                     }
                 });
-                // Run instrumentation.ts register() if present (once at server startup)
-                if (instrumentationPath) {
-                    runInstrumentation(server, instrumentationPath).catch((err) => {
-                        console.error("[vinext] Instrumentation error:", err);
-                    });
-                }
                 // ── Dev request origin check ─────────────────────────────────────
                 // Registered directly (not in the returned function) so it runs
                 // BEFORE Vite's built-in middleware. This ensures all requests
@@ -2291,6 +2302,15 @@ hydrate();
                 });
                 // Return a function to register middleware AFTER Vite's built-in middleware
                 return () => {
+                    // Run instrumentation.ts register() if present (once at server startup).
+                    // Must be inside the returned function — ssrLoadModule() requires the
+                    // SSR environment's transport channel, which is not initialized until
+                    // after configureServer() returns. (See issue #167)
+                    if (instrumentationPath) {
+                        runInstrumentation(server, instrumentationPath).catch((err) => {
+                            console.error("[vinext] Instrumentation error:", err);
+                        });
+                    }
                     // App Router request logging in dev server
                     //
                     // For App Router, the RSC plugin handles requests internally.
@@ -2587,10 +2607,20 @@ hydrate();
                                         return;
                                     }
                                 }
-                                // Apply middleware response headers
+                                // Apply middleware response headers. Unpack
+                                // x-middleware-request-* headers into req.headers so
+                                // config has/missing conditions and downstream handlers
+                                // see middleware-modified cookies and headers.
                                 if (result.responseHeaders) {
+                                    const mwReqPrefix = "x-middleware-request-";
                                     for (const [key, value] of result.responseHeaders) {
-                                        res.appendHeader(key, value);
+                                        if (key.startsWith(mwReqPrefix)) {
+                                            const realName = key.slice(mwReqPrefix.length);
+                                            req.headers[realName] = value;
+                                        }
+                                        else if (!key.startsWith("x-middleware-")) {
+                                            res.appendHeader(key, value);
+                                        }
                                     }
                                 }
                                 // Apply middleware rewrite (URL and optional status code)
@@ -2639,7 +2669,7 @@ hydrate();
                             const resolvedPathname = resolvedUrl.split("?")[0];
                             if (resolvedPathname.startsWith("/api/") ||
                                 resolvedPathname === "/api") {
-                                const apiRoutes = await apiRouter(pagesDir);
+                                const apiRoutes = await apiRouter(pagesDir, nextConfig?.pageExtensions, fileMatcher);
                                 const handled = await handleApiRoute(server, req, res, resolvedUrl, apiRoutes);
                                 if (handled)
                                     return;
@@ -2651,7 +2681,7 @@ hydrate();
                                 res.end("404 - API route not found");
                                 return;
                             }
-                            const routes = await pagesRouter(pagesDir);
+                            const routes = await pagesRouter(pagesDir, nextConfig?.pageExtensions, fileMatcher);
                             // Apply afterFiles rewrites — these run after initial route matching
                             // If beforeFiles already rewrote the URL, afterFiles still run on the
                             // *resolved* pathname. Next.js applies these when route matching succeeds
@@ -2666,7 +2696,7 @@ hydrate();
                                 await proxyExternalRewriteNode(req, res, resolvedUrl);
                                 return;
                             }
-                            const handler = createSSRHandler(server, routes, pagesDir, nextConfig?.i18n);
+                            const handler = createSSRHandler(server, routes, pagesDir, nextConfig?.i18n, fileMatcher);
                             const mwStatus = req.__vinextRewriteStatus;
                             // Try rendering the resolved URL
                             const match = matchRoute(resolvedUrl.split("?")[0], routes);
@@ -2700,6 +2730,41 @@ hydrate();
                 };
             },
         },
+        // Strip server-only data-fetching exports (getServerSideProps, getStaticProps,
+        // getStaticPaths) from page modules in the client bundle. These functions
+        // often import server-only modules (database drivers, fs, etc.) that would
+        // break or bloat the client bundle. Next.js does this via an SWC transform
+        // (next-ssg-transform); we use Vite's parseAst + MagicString.
+        //
+        // Only applies to client builds (not SSR) and only to files under the
+        // pages/ directory.
+        {
+            name: "vinext:strip-server-exports",
+            transform: {
+                // Only match page source files, not node_modules
+                filter: { id: /\.(tsx?|jsx?|mjs)$/ },
+                handler(code, id) {
+                    const ssr = this.environment?.name !== "client";
+                    if (ssr)
+                        return null;
+                    if (!hasPagesDir)
+                        return null;
+                    // Only transform files under the pages/ directory
+                    if (!id.startsWith(pagesDir))
+                        return null;
+                    // Skip API routes, _app, _document, _error
+                    const relativePath = id.slice(pagesDir.length);
+                    if (relativePath.startsWith("/api/") || relativePath === "/api")
+                        return null;
+                    if (/\/_(?:app|document|error)\b/.test(relativePath))
+                        return null;
+                    const result = stripServerExports(code);
+                    if (!result)
+                        return null;
+                    return { code: result, map: null };
+                },
+            },
+        },
         // Local image import transform:
         // When a source file imports a local image (e.g., `import hero from './hero.jpg'`),
         // this plugin transforms the default import to a StaticImageData object with
@@ -3342,6 +3407,7 @@ hydrate();
                             "  Cache-Control: public, max-age=31536000, immutable",
                             "",
                         ].join("\n");
+                        fs.mkdirSync(clientDir, { recursive: true });
                         fs.writeFileSync(headersPath, headersContent);
                     }
                 },
@@ -3400,6 +3466,101 @@ function extractConstraint(str, re) {
  *   :param+    — matches one or more segments
  *   (regex)    — inline regex patterns in the source
  */
+/**
+ * Strip server-only data-fetching exports from a page module's source code.
+ * Returns the transformed code, or null if no changes were made.
+ *
+ * Handles:
+ * - export (async) function getServerSideProps(...) { ... }
+ * - export const getStaticProps = async (...) => { ... }
+ * - export const getServerSideProps = someHelper;
+ */
+/**
+ * Skip past balanced brackets/parens/braces starting at `pos` (which should
+ * point to the opening bracket). Returns the position AFTER the closing bracket.
+ * Handles nested brackets, string literals, and comments.
+ */
+/**
+ * Strip server-only data-fetching exports (getServerSideProps,
+ * getStaticProps, getStaticPaths) from page modules for the client
+ * bundle. Uses Vite's parseAst (Rollup/acorn) for correct handling
+ * of all export patterns including function expressions, arrow
+ * functions with TS return types, and re-exports.
+ *
+ * Modeled after Next.js's SWC `next-ssg-transform`.
+ */
+function stripServerExports(code) {
+    const SERVER_EXPORTS = new Set(["getServerSideProps", "getStaticProps", "getStaticPaths"]);
+    if (![...SERVER_EXPORTS].some(name => code.includes(name)))
+        return null;
+    let ast;
+    try {
+        ast = parseAst(code);
+    }
+    catch {
+        // If parsing fails (shouldn't happen post-JSX/TS transform), bail out
+        return null;
+    }
+    const s = new MagicString(code);
+    let changed = false;
+    for (const node of ast.body) {
+        if (node.type !== "ExportNamedDeclaration")
+            continue;
+        // Case 1: export function name() {} / export async function name() {}
+        // Case 2: export const/let/var name = ...
+        if (node.declaration) {
+            const decl = node.declaration;
+            if (decl.type === "FunctionDeclaration" && SERVER_EXPORTS.has(decl.id?.name)) {
+                s.overwrite(node.start, node.end, `export function ${decl.id.name}() { return { props: {} }; }`);
+                changed = true;
+            }
+            else if (decl.type === "VariableDeclaration") {
+                for (const declarator of decl.declarations) {
+                    if (declarator.id?.type === "Identifier" && SERVER_EXPORTS.has(declarator.id.name)) {
+                        s.overwrite(node.start, node.end, `export const ${declarator.id.name} = undefined;`);
+                        changed = true;
+                    }
+                }
+            }
+            continue;
+        }
+        // Case 3: export { getServerSideProps } or export { getServerSideProps as gSSP }
+        if (node.specifiers && node.specifiers.length > 0 && !node.source) {
+            const kept = [];
+            const stripped = [];
+            for (const spec of node.specifiers) {
+                // spec.local.name is the binding name, spec.exported.name is the export name
+                const exportedName = spec.exported?.name ?? spec.exported?.value;
+                if (SERVER_EXPORTS.has(exportedName)) {
+                    stripped.push(exportedName);
+                }
+                else {
+                    kept.push(spec);
+                }
+            }
+            if (stripped.length > 0) {
+                // Build replacement: keep non-server specifiers, add stubs for stripped ones
+                const parts = [];
+                if (kept.length > 0) {
+                    const keptStr = kept.map((sp) => {
+                        const local = sp.local.name;
+                        const exported = sp.exported?.name ?? sp.exported?.value;
+                        return local === exported ? local : `${local} as ${exported}`;
+                    }).join(", ");
+                    parts.push(`export { ${keptStr} };`);
+                }
+                for (const name of stripped) {
+                    parts.push(`export const ${name} = undefined;`);
+                }
+                s.overwrite(node.start, node.end, parts.join("\n"));
+                changed = true;
+            }
+        }
+    }
+    if (!changed)
+        return null;
+    return s.toString();
+}
 export function matchConfigPattern(pathname, pattern) {
     // If the pattern contains regex groups like (\\d+) or (.*), use regex matching.
     // Also enter this branch when a catch-all parameter (:param* or :param+) is
@@ -3610,16 +3771,44 @@ function applyRewrites(pathname, rewrites, ctx) {
 function applyHeaders(pathname, res, headers, ctx) {
     const matched = matchHeaders(pathname, headers, ctx);
     for (const header of matched) {
-        res.setHeader(header.key, header.value);
+        // Use append semantics for headers where multiple values must coexist
+        // (Vary, Set-Cookie). Using setHeader() on these would destroy
+        // existing values like "Vary: RSC, Accept".
+        const lk = header.key.toLowerCase();
+        if (lk === "set-cookie") {
+            // Node.js res.getHeader("set-cookie") returns string[] when
+            // multiple Set-Cookie headers have been set. Preserve the array.
+            const existing = res.getHeader(lk);
+            if (Array.isArray(existing)) {
+                res.setHeader(header.key, [...existing, header.value]);
+            }
+            else if (existing) {
+                res.setHeader(header.key, [String(existing), header.value]);
+            }
+            else {
+                res.setHeader(header.key, header.value);
+            }
+        }
+        else if (lk === "vary") {
+            const existing = res.getHeader(lk);
+            if (existing) {
+                res.setHeader(header.key, existing + ", " + header.value);
+            }
+            else {
+                res.setHeader(header.key, header.value);
+            }
+        }
+        else {
+            res.setHeader(header.key, header.value);
+        }
     }
 }
 /**
  * Find a file by name (without extension) in a directory.
- * Checks .tsx, .ts, .jsx, .js extensions.
+ * Checks the configured page extensions.
  */
-function findFileWithExts(dir, name) {
-    const extensions = [".tsx", ".ts", ".jsx", ".js"];
-    for (const ext of extensions) {
+function findFileWithExts(dir, name, matcher) {
+    for (const ext of matcher.dottedExtensions) {
         const filePath = path.join(dir, name + ext);
         if (fs.existsSync(filePath))
             return filePath;
@@ -3664,4 +3853,5 @@ export { staticExportPages, staticExportApp } from "./build/static-export.js";
 export { clientManualChunks, clientOutputConfig, clientTreeshakeConfig, computeLazyChunks };
 export { resolvePostcssStringPlugins as _resolvePostcssStringPlugins };
 export { parseStaticObjectLiteral as _parseStaticObjectLiteral };
+export { stripServerExports as _stripServerExports };
 //# sourceMappingURL=index.js.map