mirror of
https://github.com/cloudflare/vinext.git
synced 2026-09-14 19:04:59 +08:00
3a1e56748f
* fix(app-router): emit pages client entry for hybrid builds * fix pages router navigation params readiness * fix(pages-router): track hashed fallback client entry * fix(pages-router): honor navigation readiness in hooks * fix(pages-router): derive server router.isReady from SSR readiness Address review feedback on #1741: - getRouterSnapshot() now reads navigationIsReady from the SSR context on the server instead of unconditionally returning true. For pre-ready Pages routes (auto-export dynamic / query-string / rewrite-capable builds) this keeps useRouter().isReady consistent between SSR and client hydration, avoiding a hydration mismatch for components that read it in JSX. Mirrors Next.js render.tsx's server readiness rule. - Drop the redundant guard branch in getClientParamsSnapshot. - Add a regression test asserting server useRouter().isReady reflects the SSR navigationIsReady context. * fix(pages-router): align param resolution and dev/prod readiness parity Address review feedback (ask-bonk + self-review) on #1741: - Align client Pages navigation params to query-first, matching the server snapshot and Next.js's adaptForPathParams (derives path params from router.query). __NEXT_DATA__.query is kept current on client navigation, so the two snapshots are now provably identical and avoid a latent post- hydration mismatch. - Populate window.__VINEXT_PAGE_PATTERNS__ in the dev server (own script tag) so the next/navigation compat hooks can resolve a dynamic pattern from a resolved path in dev exactly as in production. Closes a dev/prod parity gap (prod set this via the client entry; dev never did). - Drop the redundant pre-readiness setSSRContext in dev; the single post- module-load call now publishes navigationIsReady before rendering, matching the prod handler. - Document that installPagesClientAssetGlobals is intentionally inert for App-only builds, and that getReadonlyPagesSearchParams' string-keyed cache is safe to share across concurrent SSR requests (immutable wrappers). - Add a dev regression test asserting __VINEXT_PAGE_PATTERNS__ exposure. * fix(pages-router): prefer URL params for client snapshots * fix(app-router): gate pages asset globals * test(app-router): add production test for hybrid basePath + assetPrefix * fix(navigation): widen usePathname return type to string | null * refactor(pages-router): dedupe navigation readiness modeling and cache pattern scan Addresses code-review cleanup findings on the Pages Router navigation readiness work: - Extract buildPagesReadinessNextData() so the dev SSR handler and the production Pages page handler derive the gssp/gsp/gip/appGip/autoExport __NEXT_DATA__ readiness flags from one place, instead of two hand-kept copies that could drift and produce a dev/prod hydration mismatch. - Extract resolvePagesNavigationPathname() shared by the client and SSR branches of getPagesNavigationContext, so the pathname null-ness rule (fallback / pre-ready auto-export dynamic) cannot diverge between them. - Memoize resolvePagesRoutePatternForPath()'s pattern scan, which ran an uncached O(routes) loop on every useSyncExternalStore snapshot read. - In getServerSearchParamsSnapshot, serialize the source only when the object-identity fast path misses, avoiding a toString() on every read. * refactor(pages-router): consistent ISR readiness data + robustness cleanups Addresses further code-review findings: - Thread the readiness flags (gssp/gsp/gip/appGip/autoExport) through the ISR background-regeneration path: renderPagesIsrHtml now serializes the same __NEXT_DATA__ readiness state the initial render emits, so a regenerated, re-cached page hydrates with the identical initial router.isReady the server computed. Previously these flags were dropped on that path — benign today (ISR-eligible getStaticProps routes never trigger the flag-gated early-ready branches) but a latent dev/prod hydration-readiness drift. Adds a shared PagesNextDataExtras type so every render path stays in lockstep. - readSsrManifest: degrade a malformed/unparseable SSR manifest to "no SSR manifest" with a warning instead of throwing and aborting server startup, restoring the previous tolerant behavior. - pages-readiness: project PagesReadinessNextData from the canonical VinextNextData and accept PagesPageModule, instead of bespoke types that could drift from the __NEXT_DATA__ shape. - getReadonlyPagesSearchParams: drop the redundant string-keyed cache slot; the per-object WeakMap is authoritative and concurrency-safe on its own. - isPagesRouterReady: drop the redundant server-side window check. * fix(pages-router): restore string-keyed readonly search-params cache Reverts the cache simplification from the previous commit. The string-keyed slot is load-bearing, not redundant: across the Pages Router pre-ready → ready transition the navigation context swaps in a new URLSearchParams instance even when the query string is unchanged, so the per-object WeakMap alone returns a fresh ReadonlyURLSearchParams wrapper and useSearchParams() loses Object.is stability — re-firing a [searchParams] effect. Caught by the rewrite-driven pre-ready static page e2e (search-params-snapshots saw ['',''] not ['']). Keeps the improved comment explaining why both cache levels are needed. --------- Co-authored-by: James <james@eli.cx>
400 lines
15 KiB
TypeScript
400 lines
15 KiB
TypeScript
/**
|
|
* Unit tests for the Pages Router render orchestrator.
|
|
*
|
|
* Tests the behavior of `createPagesPageHandler` through stub closures,
|
|
* verifying route matching, 404/500 fallback, _next/data envelope,
|
|
* i18n redirect, 405 method check, and internal-error guard.
|
|
*/
|
|
import { describe, it, expect, vi } from "vite-plus/test";
|
|
import { createPagesPageHandler } from "../packages/vinext/src/server/pages-page-handler.js";
|
|
import type { CreatePagesPageHandlerOptions } from "../packages/vinext/src/server/pages-page-handler.js";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function makeRequest(pathname = "/", method = "GET"): Request {
|
|
return new Request(`http://localhost${pathname}`, { method });
|
|
}
|
|
|
|
function makePageModule(overrides: Record<string, unknown> = {}): Record<string, unknown> {
|
|
return { default: () => null, ...overrides };
|
|
}
|
|
|
|
type PageRoute = {
|
|
pattern: string;
|
|
patternParts: string[];
|
|
isDynamic: boolean;
|
|
params: string[];
|
|
module: Record<string, unknown>;
|
|
filePath: string;
|
|
};
|
|
|
|
function makeRoute(pattern: string, module: Record<string, unknown> = makePageModule()): PageRoute {
|
|
return {
|
|
pattern,
|
|
patternParts: pattern === "/" ? [] : pattern.split("/").filter(Boolean),
|
|
isDynamic: pattern.includes(":"),
|
|
params: [],
|
|
module,
|
|
filePath: `/project/pages${pattern === "/" ? "/index" : pattern}.tsx`,
|
|
};
|
|
}
|
|
|
|
// Default stubs — most tests override only the pieces they care about.
|
|
function makeOpts(
|
|
overrides: Partial<CreatePagesPageHandlerOptions> = {},
|
|
): CreatePagesPageHandlerOptions {
|
|
const pageRoutes: PageRoute[] = overrides.pageRoutes ?? [makeRoute("/")];
|
|
return {
|
|
pageRoutes,
|
|
errorPageRoute: null,
|
|
matchRoute: (url, routes) => {
|
|
const p = url.split("?")[0];
|
|
const route = routes.find((r) => r.pattern === p || r.pattern === p.replace(/\/$/, ""));
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
i18nConfig: null,
|
|
vinextConfig: {
|
|
basePath: "",
|
|
trailingSlash: false,
|
|
disableOptimizedLoading: true,
|
|
},
|
|
buildId: "test-build-id",
|
|
hasMiddleware: false,
|
|
appAssetPath: null,
|
|
hasRewrites: false,
|
|
setSSRContext: null,
|
|
getPagesNavigationIsReadyFromSerializedState: null,
|
|
setI18nContext: null,
|
|
wrapWithRouterContext: null,
|
|
resetSSRHead: undefined,
|
|
getSSRHeadHTML: undefined,
|
|
setDocumentInitialHead: undefined,
|
|
flushPreloads: undefined,
|
|
getFontLinks: () => [],
|
|
getFontStyles: () => [],
|
|
getFontPreloads: () => [],
|
|
renderToReadableStream: async (_element) => {
|
|
const encoder = new TextEncoder();
|
|
return new ReadableStream({
|
|
start(controller) {
|
|
controller.enqueue(encoder.encode("<html><body>page</body></html>"));
|
|
controller.close();
|
|
},
|
|
});
|
|
},
|
|
renderIsrPassToStringAsync: async (_element) => "<html><body>isr</body></html>",
|
|
safeJsonStringify: (v) => JSON.stringify(v),
|
|
sanitizeDestination: (d) => d,
|
|
createPageElement: (_PageComp, _AppComp, _props) => null,
|
|
enhancePageElement: (_PageComp, _AppComp, _props, _opts) => null,
|
|
AppComponent: null,
|
|
DocumentComponent: null,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Route miss → 404 fallback
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — route miss", () => {
|
|
it("returns default 404 when no custom 404 page and no _error page", async () => {
|
|
const handler = createPagesPageHandler(makeOpts({ pageRoutes: [] }));
|
|
const res = await handler(makeRequest("/missing"), "/missing", null, null, null);
|
|
expect(res.status).toBe(404);
|
|
const body = await res.text();
|
|
expect(body).toContain("This page could not be found");
|
|
});
|
|
|
|
it("renders custom /404 page on route miss", async () => {
|
|
const notFoundModule = makePageModule();
|
|
const routes = [makeRoute("/404", notFoundModule)];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
matchRoute: (url, r) => {
|
|
const p = url.split("?")[0];
|
|
const route = r.find((rt) => rt.pattern === p);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
const res = await handler(makeRequest("/nonexistent"), "/nonexistent", null, null, null);
|
|
// Custom 404 renders successfully (200 body, 404 status via override)
|
|
expect(res.status).toBe(404);
|
|
});
|
|
|
|
it("returns _next/data 404 JSON on data request route miss", async () => {
|
|
const handler = createPagesPageHandler(makeOpts({ pageRoutes: [] }));
|
|
const res = await handler(makeRequest("/missing"), "/missing", null, null, { isDataReq: true });
|
|
expect(res.status).toBe(404);
|
|
const ct = res.headers.get("content-type");
|
|
expect(ct).toContain("application/json");
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Page has no default export
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — no default export", () => {
|
|
it("returns 500 when page module has no default export", async () => {
|
|
const routes = [makeRoute("/", {})]; // no `default`
|
|
const handler = createPagesPageHandler(makeOpts({ pageRoutes: routes }));
|
|
const res = await handler(makeRequest("/"), "/", null, null, null);
|
|
expect(res.status).toBe(500);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// _next/data JSON envelope
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — _next/data", () => {
|
|
it("detects /_next/data URL and returns JSON envelope", async () => {
|
|
const routes = [makeRoute("/about")];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
const dataUrl = "/_next/data/test-build-id/about.json";
|
|
const res = await handler(makeRequest(dataUrl), dataUrl, null, null, null);
|
|
expect(res.status).toBe(200);
|
|
const ct = res.headers.get("content-type");
|
|
expect(ct).toContain("application/json");
|
|
const body = (await res.json()) as Record<string, unknown>;
|
|
expect(body).toHaveProperty("pageProps");
|
|
});
|
|
|
|
it("returns 404 JSON for _next/data with wrong buildId", async () => {
|
|
const handler = createPagesPageHandler(makeOpts());
|
|
const badUrl = "/_next/data/wrong-build-id/about.json";
|
|
const res = await handler(makeRequest(badUrl), badUrl, null, null, null);
|
|
expect(res.status).toBe(404);
|
|
const ct = res.headers.get("content-type");
|
|
expect(ct).toContain("application/json");
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// 405 method check
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — 405 method check", () => {
|
|
it("returns 405 for POST to a static page (no getServerSideProps)", async () => {
|
|
const routes = [makeRoute("/about", makePageModule())];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
const res = await handler(makeRequest("/about", "POST"), "/about", null, null, null);
|
|
expect(res.status).toBe(405);
|
|
const allow = res.headers.get("Allow");
|
|
expect(allow).toContain("GET");
|
|
});
|
|
|
|
it("skips 405 check when page exports getServerSideProps", async () => {
|
|
// The 405 guard only applies to static (no-gSSP) pages. When gSSP is
|
|
// present, resolvePagesPageMethodResponse returns null and the render
|
|
// pipeline proceeds. Verify by spying on the module method check result.
|
|
// We use a module that returns { props: {} } from gSSP so the render
|
|
// can complete without hitting renderToReadableStream errors.
|
|
const gsspModule = makePageModule({
|
|
getServerSideProps: async () => ({ props: {} }),
|
|
});
|
|
const routes = [makeRoute("/about", gsspModule)];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
const res = await handler(makeRequest("/about", "POST"), "/about", null, null, null);
|
|
// Must not be 405 — the method check is bypassed for gSSP pages
|
|
expect(res.status).not.toBe(405);
|
|
// Must not be 405 Allow header either
|
|
expect(res.headers.get("Allow")).toBeNull();
|
|
});
|
|
|
|
it("does not 405 on /404 pattern (error pages are exempt)", async () => {
|
|
const routes = [makeRoute("/404", makePageModule())];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
const res = await handler(makeRequest("/404", "POST"), "/404", null, null, null);
|
|
expect(res.status).not.toBe(405);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// i18n redirect — 307 short-circuit from resolvePagesI18nRequest
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — i18n redirect", () => {
|
|
// getLocaleRedirect fires when pathname === "/" and the Accept-Language
|
|
// header prefers a non-default locale. The handler must return a 307
|
|
// before attempting any route match.
|
|
it("returns 307 when i18n locale detection produces a redirect", async () => {
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: [makeRoute("/")],
|
|
i18nConfig: {
|
|
locales: ["en", "fr"],
|
|
defaultLocale: "en",
|
|
},
|
|
}),
|
|
);
|
|
// Visit / with Accept-Language: fr — resolvePagesI18nRequest redirects to /fr
|
|
const req = new Request("http://localhost/", {
|
|
headers: { "accept-language": "fr" },
|
|
});
|
|
const res = await handler(req, "/", null, null, null);
|
|
expect(res.status).toBe(307);
|
|
expect(res.headers.get("location")).toContain("/fr");
|
|
});
|
|
|
|
it("does not redirect when locale prefix is already present", async () => {
|
|
const routes = [makeRoute("/fr/about")];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
i18nConfig: {
|
|
locales: ["en", "fr"],
|
|
defaultLocale: "en",
|
|
},
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
const res = await handler(makeRequest("/fr/about"), "/fr/about", null, null, null);
|
|
// Not a 307 — the locale prefix is already present
|
|
expect(res.status).not.toBe(307);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Internal error guard (prevents infinite recursion on error pages)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — internal error guard", () => {
|
|
it("returns 500 text when __isInternalErrorRender is set and render throws", async () => {
|
|
const errorRoute = makeRoute("/_error", makePageModule());
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: [errorRoute],
|
|
errorPageRoute: errorRoute,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
// Cause an error during render
|
|
renderToReadableStream: async () => {
|
|
throw new Error("render failure");
|
|
},
|
|
}),
|
|
);
|
|
const res = await handler(makeRequest("/_error"), "/_error", null, null, {
|
|
__isInternalErrorRender: true,
|
|
__forcedRoute: errorRoute,
|
|
});
|
|
expect(res.status).toBe(500);
|
|
const body = await res.text();
|
|
expect(body).toBe("Internal Server Error");
|
|
});
|
|
|
|
it("falls back to 500 text on data request even without __isInternalErrorRender", async () => {
|
|
// Data requests skip renderToReadableStream (JSON envelope path), so we
|
|
// need to throw earlier — in createPageElement, which is called inside
|
|
// resolvePagesPageData to build the element for ISR/SSR rendering.
|
|
const routes = [
|
|
makeRoute("/about", {
|
|
...makePageModule(),
|
|
getStaticProps: async () => {
|
|
throw new Error("gssp failure");
|
|
},
|
|
}),
|
|
];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
// getFontPreloads is called before the isDataReq branch.
|
|
// Throwing here triggers the catch block regardless of isDataReq.
|
|
getFontPreloads: () => {
|
|
throw new Error("font failure");
|
|
},
|
|
}),
|
|
);
|
|
// isDataReq=true → no error-page recursion, direct 500
|
|
const res = await handler(makeRequest("/about"), "/about", null, null, { isDataReq: true });
|
|
expect(res.status).toBe(500);
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// renderErrorPageOnMiss: false — no 404 recursion
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — renderErrorPageOnMiss: false", () => {
|
|
it("returns default 404 without recursing when renderErrorPageOnMiss=false", async () => {
|
|
const handler = createPagesPageHandler(makeOpts({ pageRoutes: [] }));
|
|
const res = await handler(makeRequest("/missing"), "/missing", null, null, {
|
|
renderErrorPageOnMiss: false,
|
|
});
|
|
expect(res.status).toBe(404);
|
|
const body = await res.text();
|
|
expect(body).toContain("This page could not be found");
|
|
});
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// setSSRContext called
|
|
// ---------------------------------------------------------------------------
|
|
|
|
describe("createPagesPageHandler — SSR context", () => {
|
|
it("calls setSSRContext with the matched route pattern", async () => {
|
|
const setSSRContext = vi.fn();
|
|
const routes = [makeRoute("/about")];
|
|
const handler = createPagesPageHandler(
|
|
makeOpts({
|
|
pageRoutes: routes,
|
|
setSSRContext,
|
|
matchRoute: (url, r) => {
|
|
const route = r.find((rt) => rt.pattern === url.split("?")[0]);
|
|
return route ? { route, params: {} } : null;
|
|
},
|
|
}),
|
|
);
|
|
await handler(makeRequest("/about"), "/about", null, null, null);
|
|
expect(setSSRContext).toHaveBeenCalled();
|
|
const ctx = setSSRContext.mock.calls[0][0] as Record<string, unknown>;
|
|
expect(ctx.pathname).toBe("/about");
|
|
});
|
|
});
|