vinext 0.0.19 → 0.0.21

package/dist/index.js

@@ -1,4 +1,4 @@
-import { parseAst } from "vite";
+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 { createSSRHandler } from "./server/dev-server.js";
@@ -12,6 +12,7 @@ import { findInstrumentationFile, runInstrumentation } from "./server/instrument
 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 MagicString from "magic-string";
 import path from "node:path";
@@ -554,6 +555,13 @@ export default function vinext(options = {}) {
             rewrites: nextConfig?.rewrites ?? { beforeFiles: [], afterFiles: [], fallback: [] },
             headers: nextConfig?.headers ?? [],
             i18n: nextConfig?.i18n ?? null,
+            images: {
+                deviceSizes: nextConfig?.images?.deviceSizes,
+                imageSizes: nextConfig?.images?.imageSizes,
+                dangerouslyAllowSVG: nextConfig?.images?.dangerouslyAllowSVG,
+                contentDispositionType: nextConfig?.images?.contentDispositionType,
+                contentSecurityPolicy: nextConfig?.images?.contentSecurityPolicy,
+            },
         });
         // Generate middleware code if middleware.ts exists
         const middlewareImportCode = middlewarePath
@@ -656,7 +664,7 @@ import React from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
 import { resetSSRHead, getSSRHeadHTML } from "next/head";
 import { flushPreloads } from "next/dynamic";
-import { setSSRContext } from "next/router";
+import { setSSRContext, wrapWithRouterContext } from "next/router";
 import { getCacheHandler } from "next/cache";
 import { runWithFetchCache } from "vinext/fetch-cache";
 import { _runWithCacheState } from "next/cache";
@@ -1221,6 +1229,7 @@ export async function renderPage(request, url, manifest) {
     } else {
       element = React.createElement(PageComponent, pageProps);
     }
+    element = wrapWithRouterContext(element);
 
     if (typeof resetSSRHead === "function") resetSSRHead();
     if (typeof flushPreloads === "function") await flushPreloads();
@@ -1318,6 +1327,7 @@ export async function renderPage(request, url, manifest) {
       } else {
         isrElement = React.createElement(PageComponent, pageProps);
       }
+      isrElement = wrapWithRouterContext(isrElement);
       var isrHtml = await renderToStringAsync(isrElement);
       var fullHtml = shellPrefix + isrHtml + shellSuffix;
       var isrPathname = url.split("?")[0];
@@ -1479,6 +1489,10 @@ async function hydrate() {
   element = React.createElement(PageComponent, pageProps);
   `}
 
+  // Wrap with RouterContext.Provider so next/compat/router works during hydration
+  const { wrapWithRouterContext } = await import("next/router");
+  element = wrapWithRouterContext(element);
+
   const container = document.getElementById("__next");
   if (!container) {
     console.error("[vinext] No #__next element found");
@@ -1529,7 +1543,7 @@ hydrate();
     if (earlyAppDirExists && autoRsc) {
         if (!resolvedRscPath) {
             throw new Error("vinext: App Router detected but @vitejs/plugin-rsc is not installed.\n" +
-                "Run: npm install -D @vitejs/plugin-rsc");
+                "Run: " + detectPackageManager(process.cwd()) + " @vitejs/plugin-rsc");
         }
         const rscImport = import(pathToFileURL(resolvedRscPath).href);
         rscPluginPromise = rscImport
@@ -1545,6 +1559,9 @@ hydrate();
         });
     }
     const imageImportDimCache = new Map();
+    // 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 plugins = [
         // Resolve tsconfig paths/baseUrl aliases so real-world Next.js repos
         // that use @/*, #/*, or baseUrl imports work out of the box.
@@ -1555,8 +1572,36 @@ hydrate();
         {
             name: "vinext:config",
             enforce: "pre",
-            async config(config) {
+            async config(config, env) {
                 root = config.root ?? process.cwd();
+                // Load .env files into process.env before anything else.
+                // Next.js loads .env files before evaluating next.config.js, so
+                // env vars are available in config, server-side code, and as
+                // NEXT_PUBLIC_* defines for the client bundle.
+                // Pass '' as prefix to load ALL vars, not just VITE_-prefixed ones.
+                const mode = env?.mode ?? "development";
+                const envDir = config.envDir ?? root;
+                const dotenvVars = loadEnv(mode, envDir, "");
+                for (const [key, value] of Object.entries(dotenvVars)) {
+                    if (process.env[key] === undefined) {
+                        process.env[key] = value;
+                    }
+                }
+                // Align NODE_ENV with Next.js semantics: build -> production, serve -> development.
+                // Next.js unconditionally forces NODE_ENV during build/dev, so we do the same.
+                let resolvedNodeEnv;
+                if (mode === "test") {
+                    resolvedNodeEnv = "test";
+                }
+                else if (env?.command === "build") {
+                    resolvedNodeEnv = "production";
+                }
+                else {
+                    resolvedNodeEnv = "development";
+                }
+                if (process.env.NODE_ENV !== resolvedNodeEnv) {
+                    process.env.NODE_ENV = resolvedNodeEnv;
+                }
                 // Resolve the base directory for app/pages detection.
                 // If appDir is provided, resolve it (supports both relative and absolute paths).
                 // If not provided, auto-detect: check root first, then src/ subdirectory.
@@ -1593,7 +1638,16 @@ hydrate();
                 nextConfig = await resolveNextConfig(rawConfig);
                 // Merge env from next.config.js with NEXT_PUBLIC_* env vars
                 const defines = getNextPublicEnvDefines();
+                if (!config.define ||
+                    typeof config.define !== "object" ||
+                    !("process.env.NODE_ENV" in config.define)) {
+                    defines["process.env.NODE_ENV"] = JSON.stringify(resolvedNodeEnv);
+                }
                 for (const [key, value] of Object.entries(nextConfig.env)) {
+                    // Skip NODE_ENV from next.config.js env — Next.js ignores it too,
+                    // and it would silently override the value we just set above.
+                    if (key === "NODE_ENV")
+                        continue;
                     defines[`process.env.${key}`] = JSON.stringify(value);
                 }
                 // Expose basePath to client-side code
@@ -1610,6 +1664,9 @@ hydrate();
                     defines["process.env.__VINEXT_IMAGE_DEVICE_SIZES"] = JSON.stringify(JSON.stringify(deviceSizes));
                     defines["process.env.__VINEXT_IMAGE_SIZES"] = JSON.stringify(JSON.stringify(imageSizes));
                 }
+                // Expose dangerouslyAllowSVG flag for the image shim's auto-skip logic.
+                // When false (default), .svg sources bypass the optimization endpoint.
+                defines["process.env.__VINEXT_IMAGE_DANGEROUSLY_ALLOW_SVG"] = JSON.stringify(String(nextConfig.images?.dangerouslyAllowSVG ?? false));
                 // Draft mode secret — generated once at build time so the
                 // __prerender_bypass cookie is consistent across all server
                 // instances (e.g. multiple Cloudflare Workers isolates).
@@ -1620,6 +1677,7 @@ hydrate();
                     "next/link": path.join(shimsDir, "link"),
                     "next/head": path.join(shimsDir, "head"),
                     "next/router": path.join(shimsDir, "router"),
+                    "next/compat/router": path.join(shimsDir, "compat-router"),
                     "next/image": path.join(shimsDir, "image"),
                     "next/legacy/image": path.join(shimsDir, "legacy-image"),
                     "next/dynamic": path.join(shimsDir, "dynamic"),
@@ -1698,11 +1756,10 @@ hydrate();
                 // already configured. Applies remark/rehype plugins from next.config.
                 const hasMdxPlugin = pluginsFlat.some((p) => p && typeof p === "object" && typeof p.name === "string" &&
                     (p.name === "@mdx-js/rollup" || p.name === "mdx"));
-                const mdxPlugins = [];
                 if (!hasMdxPlugin && hasMdxFiles(root, hasAppDir ? appDir : null, hasPagesDir ? pagesDir : null)) {
                     try {
                         const mdxRollup = await import("@mdx-js/rollup");
-                        const mdxPlugin = mdxRollup.default ?? mdxRollup;
+                        const mdxFactory = mdxRollup.default ?? mdxRollup;
                         const mdxOpts = {};
                         if (nextConfig.mdx) {
                             if (nextConfig.mdx.remarkPlugins)
@@ -1712,7 +1769,7 @@ hydrate();
                             if (nextConfig.mdx.recmaPlugins)
                                 mdxOpts.recmaPlugins = nextConfig.mdx.recmaPlugins;
                         }
-                        mdxPlugins.push(mdxPlugin(mdxOpts));
+                        mdxDelegate = mdxFactory(mdxOpts);
                         if (nextConfig.mdx) {
                             console.log("[vinext] Auto-injected @mdx-js/rollup with remark/rehype plugins from next.config");
                         }
@@ -1723,7 +1780,7 @@ hydrate();
                     catch {
                         // @mdx-js/rollup not installed — warn but don't fail
                         console.warn("[vinext] MDX files detected but @mdx-js/rollup is not installed. " +
-                            "Install it with: npm install -D @mdx-js/rollup");
+                            "Install it with: " + detectPackageManager(process.cwd()) + " @mdx-js/rollup");
                     }
                 }
                 // Detect if this is a standalone SSR build (set by `vite build --ssr`
@@ -1936,10 +1993,6 @@ hydrate();
                         },
                     };
                 }
-                // Add auto-injected MDX plugin if needed
-                if (mdxPlugins.length > 0) {
-                    viteConfig.plugins = mdxPlugins;
-                }
                 return viteConfig;
             },
             configResolved(config) {
@@ -2045,6 +2098,31 @@ hydrate();
                 }
             },
         },
+        // Proxy plugin for @mdx-js/rollup. The real MDX plugin is created lazily
+        // during vinext:config's config() (when MDX files are detected), but
+        // plugins returned from config() hooks run too late in the pipeline —
+        // after vite:import-analysis. This top-level proxy with enforce:"pre"
+        // ensures MDX transforms run at the correct stage. Both vinext:config
+        // and this proxy are enforce:"pre", and vinext:config comes first in
+        // the array, so mdxDelegate is already set when this proxy's hooks fire.
+        {
+            name: "vinext:mdx",
+            enforce: "pre",
+            config(config, env) {
+                if (!mdxDelegate?.config)
+                    return;
+                const hook = mdxDelegate.config;
+                const fn = typeof hook === "function" ? hook : hook.handler;
+                return fn.call(this, config, env);
+            },
+            transform(code, id, options) {
+                if (!mdxDelegate?.transform)
+                    return;
+                const hook = mdxDelegate.transform;
+                const fn = typeof hook === "function" ? hook : hook.handler;
+                return fn.call(this, code, id, options);
+            },
+        },
         // Shim React canary/experimental APIs (ViewTransition, addTransitionType)
         // that exist in Next.js's bundled React canary but not in stable React 19.
         // Provides graceful no-op fallbacks so projects using these APIs degrade
@@ -2311,9 +2389,22 @@ hydrate();
                                 const result = await runMiddleware(server, middlewarePath, middlewareRequest);
                                 if (!result.continue) {
                                     if (result.redirectUrl) {
-                                        res.writeHead(result.redirectStatus ?? 307, {
-                                            Location: result.redirectUrl,
-                                        });
+                                        const redirectHeaders = { Location: result.redirectUrl };
+                                        if (result.responseHeaders) {
+                                            for (const [key, value] of result.responseHeaders) {
+                                                const existing = redirectHeaders[key];
+                                                if (existing === undefined) {
+                                                    redirectHeaders[key] = value;
+                                                }
+                                                else if (Array.isArray(existing)) {
+                                                    existing.push(value);
+                                                }
+                                                else {
+                                                    redirectHeaders[key] = [existing, value];
+                                                }
+                                            }
+                                        }
+                                        res.writeHead(result.redirectStatus ?? 307, redirectHeaders);
                                         res.end();
                                         return;
                                     }
@@ -2383,7 +2474,10 @@ hydrate();
                                 const handled = await handleApiRoute(server, req, res, resolvedUrl, apiRoutes);
                                 if (handled)
                                     return;
-                                // No API route matched — fall through to 404
+                                // No API route matched — if app dir exists, let the RSC plugin handle it
+                                // (app/api/* route handlers live there). Otherwise hard-404.
+                                if (hasAppDir)
+                                    return next();
                                 res.statusCode = 404;
                                 res.end("404 - API route not found");
                                 return;
@@ -2424,7 +2518,10 @@ hydrate();
                                     return;
                                 }
                             }
-                            // No fallback matched — render as-is (will hit 404 handler)
+                            // No fallback matched - if app dir exists, let the RSC plugin handle it,
+                            // otherwise render via the pages SSR handler (will 404 for unknown routes).
+                            if (hasAppDir)
+                                return next();
                             await handler(req, res, resolvedUrl, mwStatus);
                         }
                         catch (e) {
@@ -2767,7 +2864,7 @@ hydrate();
                         return null;
                     if (!resolvedRscTransformsPath) {
                         throw new Error("vinext: 'use cache' requires @vitejs/plugin-rsc to be installed.\n" +
-                            "Run: npm install -D @vitejs/plugin-rsc");
+                            "Run: " + detectPackageManager(process.cwd()) + " @vitejs/plugin-rsc");
                     }
                     const { transformWrapExport, transformHoistInlineDirective } = await import(pathToFileURL(resolvedRscTransformsPath).href);
                     const ast = parseAst(code);
@@ -2905,6 +3002,33 @@ hydrate();
                 },
             },
         },
+        // Write image config JSON for the App Router production server.
+        // The App Router RSC entry doesn't export vinextConfig (that's a Pages
+        // Router pattern), so we write a separate JSON file at build time that
+        // prod-server.ts reads at startup for SVG/security header config.
+        {
+            name: "vinext:image-config",
+            apply: "build",
+            enforce: "post",
+            writeBundle: {
+                sequential: true,
+                order: "post",
+                handler(options) {
+                    const envName = this.environment?.name;
+                    if (envName !== "rsc")
+                        return;
+                    const outDir = options.dir;
+                    if (!outDir)
+                        return;
+                    const imageConfig = {
+                        dangerouslyAllowSVG: nextConfig?.images?.dangerouslyAllowSVG,
+                        contentDispositionType: nextConfig?.images?.contentDispositionType,
+                        contentSecurityPolicy: nextConfig?.images?.contentSecurityPolicy,
+                    };
+                    fs.writeFileSync(path.join(outDir, "image-config.json"), JSON.stringify(imageConfig));
+                },
+            },
+        },
         // Cloudflare Workers production build integration:
         // After all environments are built, compute lazy chunks from the client
         // build manifest and inject globals into the worker entry.