vinext 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/shims/error.js

@@ -1,5 +1,6 @@
 import { AppRouterContext } from "./internal/app-router-context.js";
 import { RouterContext } from "./internal/router-context.js";
+import Head from "./head.js";
 import { isNextRouterError } from "./navigation-errors.js";
 import "./navigation.js";
 import { useUntrackedPathname } from "./internal/navigation-untracked.js";
@@ -16,32 +17,69 @@ import React from "react";
 * (`unstable_catchError`) and its `ErrorInfo` type, mirroring
 * `next/error`'s public surface.
 */
-function ErrorComponent({ statusCode, title }) {
-	const displayTitle = title ?? (statusCode === 404 ? "This page could not be found" : "Internal Server Error");
-	return React.createElement("div", { style: {
-		fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+const statusCodes = {
+	400: "Bad Request",
+	404: "This page could not be found",
+	405: "Method Not Allowed",
+	500: "Internal Server Error"
+};
+function getErrorInitialProps({ err, req, res }) {
+	const statusCode = res?.statusCode ? res.statusCode : err ? err.statusCode : 404;
+	let hostname;
+	if (typeof window !== "undefined") hostname = window.location.hostname;
+	else if (req) {
+		if (req.url) try {
+			hostname = new URL(req.url).hostname;
+		} catch {}
+		if (!hostname) {
+			const host = Array.isArray(req.headers?.host) ? req.headers.host[0] : req.headers?.host;
+			if (host) hostname = new URL(`http://${host}`).hostname;
+		}
+	}
+	return {
+		statusCode,
+		hostname
+	};
+}
+const styles = {
+	error: {
+		fontFamily: "system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"",
 		height: "100vh",
 		textAlign: "center",
 		display: "flex",
 		flexDirection: "column",
 		alignItems: "center",
 		justifyContent: "center"
-	} }, React.createElement("div", null, React.createElement("h1", { style: {
+	},
+	desc: { lineHeight: "48px" },
+	h1: {
 		display: "inline-block",
 		margin: "0 20px 0 0",
-		padding: "0 23px 0 0",
+		paddingRight: 23,
 		fontSize: 24,
 		fontWeight: 500,
-		verticalAlign: "top",
-		lineHeight: "49px",
-		borderRight: "1px solid rgba(0, 0, 0, .3)"
-	} }, statusCode), React.createElement("div", { style: { display: "inline-block" } }, React.createElement("h2", { style: {
+		verticalAlign: "top"
+	},
+	h2: {
 		fontSize: 14,
 		fontWeight: 400,
-		lineHeight: "49px",
-		margin: 0
-	} }, displayTitle + "."))));
-}
+		lineHeight: "28px"
+	},
+	wrap: { display: "inline-block" }
+};
+var ErrorComponent = class extends React.Component {
+	static displayName = "ErrorPage";
+	static getInitialProps = getErrorInitialProps;
+	static origGetInitialProps = getErrorInitialProps;
+	render() {
+		const { statusCode, hostname, title: customTitle, withDarkMode = true } = this.props;
+		const title = customTitle || statusCodes[statusCode] || "An unexpected error has occurred";
+		return React.createElement("div", { style: styles.error }, React.createElement(Head, null, React.createElement("title", null, statusCode ? `${statusCode}: ${title}` : "Application error: a client-side exception has occurred")), React.createElement("div", { style: styles.desc }, React.createElement("style", { dangerouslySetInnerHTML: { __html: `body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}${withDarkMode ? "@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}" : ""}` } }), statusCode ? React.createElement("h1", {
+			className: "next-error-h1",
+			style: styles.h1
+		}, statusCode) : null, React.createElement("div", { style: styles.wrap }, React.createElement("h2", { style: styles.h2 }, customTitle || statusCode ? `${title}.` : `Application error: a client-side exception has occurred${hostname ? ` while loading ${hostname}` : ""} (see the browser console for more information).`))));
+	}
+};
 const _CatchErrorAppRouterContext = AppRouterContext ?? React.createContext(null);
 var _CatchError = class extends React.Component {
 	static contextType = _CatchErrorAppRouterContext;
@@ -81,7 +119,7 @@ var _CatchError = class extends React.Component {
 		if (this.state.error) {
 			const Fallback = this.props.fallback;
 			const errorInfo = {
-				error: this.state.error.thrownValue,
+				error: this.state.error.thrownValue instanceof Error ? this.state.error.thrownValue : new Error(String(this.state.error.thrownValue)),
 				reset: this.reset,
 				unstable_retry: this.unstable_retry
 			};

package/dist/shims/fetch-cache.js

@@ -3,7 +3,7 @@ import { getRequestContext, isInsideUnifiedScope, runWithUnifiedStateMutation }
 import { getRequestExecutionContext } from "./request-context.js";
 import { getDataCacheHandler } from "./cache-handler.js";
 import { markDynamicUsage } from "./headers.js";
-import { _setRequestScopedCacheLife } from "./cache-request-state.js";
+import { _hasPendingRevalidatedTag, _setRequestScopedCacheLife } from "./cache-request-state.js";
 import { encodeCacheTags } from "../utils/encode-cache-tag.js";
 //#region src/shims/fetch-cache.ts
 /**
@@ -371,7 +371,7 @@ async function writeFetchCacheResponse(handler, cacheKey, response, tags, revali
 }
 async function lowerFetchCacheRevalidateIfNeeded(handler, cacheKey, cachedValue, tags, revalidateSeconds) {
 	if (!Number.isFinite(revalidateSeconds) || revalidateSeconds <= 0 || typeof cachedValue.revalidate !== "number" || cachedValue.revalidate <= revalidateSeconds) return;
-	const mergedTags = Array.from(new Set([...cachedValue.tags ?? [], ...tags]));
+	const mergedTags = Array.from(/* @__PURE__ */ new Set([...cachedValue.tags ?? [], ...tags]));
 	const updatedValue = {
 		...cachedValue,
 		tags: mergedTags,
@@ -639,13 +639,22 @@ function createPatchedFetch() {
 			throw err;
 		}
 		const handler = getDataCacheHandler();
+		let mustBypassPendingRevalidation = _hasPendingRevalidatedTag([...tags, ...softTags]);
 		try {
-			const cached = await handler.get(cacheKey, {
+			let cached = mustBypassPendingRevalidation ? null : await handler.get(cacheKey, {
 				kind: "FETCH",
 				tags,
 				softTags,
 				revalidate: revalidateSeconds
 			});
+			if (cached?.value?.kind === "FETCH" && _hasPendingRevalidatedTag([
+				...cached.value.tags ?? [],
+				...tags,
+				...softTags
+			])) {
+				mustBypassPendingRevalidation = true;
+				cached = null;
+			}
 			if (cached?.value && cached.value.kind === "FETCH" && cached.cacheState !== "stale") {
 				await lowerFetchCacheRevalidateIfNeeded(handler, cacheKey, cached.value, tags, revalidateSeconds);
 				const cachedData = cached.value.data;
@@ -679,7 +688,7 @@ function createPatchedFetch() {
 		} catch (cacheErr) {
 			console.error("[vinext] fetch cache read error:", cacheErr);
 		}
-		const response = await dedupeFetch(input, fetchInit);
+		const response = await (mustBypassPendingRevalidation ? originalFetch(input, fetchInit) : dedupeFetch(input, fetchInit));
 		const cacheValue = await buildFetchCacheValue(response, tags, revalidateSeconds);
 		if (cacheValue) handler.set(cacheKey, cacheValue, {
 			fetchCache: true,

package/dist/shims/font-google-base.d.ts

@@ -1,7 +1,8 @@
 import { FontStyle } from "./font-utils.js";
 
 //#region src/shims/font-google-base.d.ts
-type FontOptions = {
+type CssVariable = `--${string}`;
+type FontOptions<T extends CssVariable | undefined = CssVariable | undefined> = {
   weight?: string | string[];
   style?: string | string[];
   subsets?: string[];
@@ -9,7 +10,7 @@ type FontOptions = {
   preload?: boolean;
   fallback?: string[];
   adjustFontFallback?: boolean | string;
-  variable?: string;
+  variable?: T;
   axes?: string[];
 };
 type FontResult = {
@@ -24,7 +25,7 @@ type InternalGoogleFontRuntimeOptions = {
   fontWeight?: number;
   fontStyle?: "normal" | "italic";
 };
-type FontLoaderOptions = FontOptions & {
+type FontLoaderOptions<T extends CssVariable | undefined = CssVariable | undefined> = FontOptions<T> & {
   /**
    * Internal payload injected by the vinext:google-fonts transform after
    * metadata validation. Runtime must prefer these values over user options
@@ -76,7 +77,13 @@ declare function getSSRFontPreloads(): Array<{
   href: string;
   type: string;
 }>;
-type FontLoader = (options?: FontLoaderOptions) => FontResult;
+type NextFont = Omit<FontResult, "variable"> & {
+  variable?: undefined;
+};
+type NextFontWithVariable = Omit<NextFont, "variable"> & {
+  variable: string;
+};
+type FontLoader = <T extends CssVariable | undefined = undefined>(options?: FontLoaderOptions<T>) => T extends undefined ? NextFont : NextFontWithVariable;
 declare function createFontLoader(family: string): FontLoader;
 declare const googleFonts: Record<string, FontLoader>;
 //#endregion

package/dist/shims/font-local.d.ts

@@ -6,14 +6,15 @@ type LocalFontSrc = {
   weight?: string;
   style?: string;
 };
-type LocalFontOptions = {
+type CssVariable = `--${string}`;
+type LocalFontOptions<T extends CssVariable | undefined = CssVariable | undefined> = {
   src: string | LocalFontSrc | LocalFontSrc[];
   display?: string;
   weight?: string;
   style?: string;
   fallback?: string[];
   preload?: boolean;
-  variable?: string;
+  variable?: T;
   adjustFontFallback?: boolean | string;
   declarations?: Array<{
     prop: string;
@@ -30,6 +31,12 @@ type FontResult = {
   style: FontStyle;
   variable?: string;
 };
+type NextFont = Omit<FontResult, "variable"> & {
+  variable?: undefined;
+};
+type NextFontWithVariable = Omit<NextFont, "variable"> & {
+  variable: string;
+};
 /**
  * Get collected SSR font styles (used by the renderer).
  * Note: We don't clear the arrays because fonts are loaded at module import
@@ -45,6 +52,6 @@ declare function getSSRFontPreloads(): Array<{
   href: string;
   type: string;
 }>;
-declare function localFont(options: LocalFontOptions): FontResult;
+declare function localFont<T extends CssVariable | undefined = undefined>(options: LocalFontOptions<T>): T extends undefined ? NextFont : NextFontWithVariable;
 //#endregion
 export { localFont as default, getSSRFontPreloads, getSSRFontStyles };

package/dist/shims/font-utils.js

@@ -30,7 +30,7 @@ function sanitizeCSSVarName(name) {
 * crafted fallback values like `); } body { color: red; } .x {`.
 */
 function sanitizeFallback(name) {
-	const generics = new Set([
+	const generics = /* @__PURE__ */ new Set([
 		"serif",
 		"sans-serif",
 		"monospace",

package/dist/shims/form.d.ts

@@ -16,6 +16,6 @@ declare const Form: import("react").ForwardRefExoticComponent<{
    * In pages dir, prefetch is not supported and the prop has no effect.
    */
   prefetch?: false | null;
-} & Omit<FormHTMLAttributes<HTMLFormElement>, "method" | "encType" | "target"> & import("react").RefAttributes<HTMLFormElement>>;
+} & Omit<FormHTMLAttributes<HTMLFormElement>, "encType" | "method" | "target"> & import("react").RefAttributes<HTMLFormElement>>;
 //#endregion
 export { createFormSubmitDestinationUrl, Form as default, useActionState };

package/dist/shims/head.d.ts

@@ -28,6 +28,17 @@ declare function resetSSRHead(): void;
  * Pass an empty array (or simply don't call this) to skip the merge.
  */
 declare function setDocumentInitialHead(head: React.ReactNode[]): void;
+/**
+ * Default head tags emitted alongside every Pages Router render — charset
+ * first, then viewport. Mirrors Next.js's `defaultHead()` in
+ * `packages/next/src/shared/lib/head.tsx`, which seeds the head array used
+ * by `HeadManagerContext` before any user `<Head>` reduces over it.
+ *
+ * The canonical Next.js order is `<meta charset>` then `<meta viewport>`
+ * then user tags, all with `data-next-head=""`. See assertion in
+ * `test/e2e/next-head/index.test.ts`.
+ */
+declare function defaultHead(): React.ReactElement[];
 /** Get collected head HTML. Call after render. */
 declare function getSSRHeadHTML(): string;
 type HeadDOMElement = Pick<HTMLElement, "innerHTML" | "setAttribute" | "textContent">;
@@ -68,6 +79,6 @@ declare function _applyHeadPropsToElement(domEl: HeadDOMElement, props: Record<s
 declare function _syncClientHead(): void;
 declare function Head({
   children
-}: HeadProps): null;
+}: HeadProps): React.ReactElement;
 //#endregion
-export { _applyHeadPropsToElement, _clientHeadChildren, _registerHeadStateAccessors, _syncClientHead, Head as default, escapeAttr, escapeInlineContent, getSSRHeadHTML, isSafeAttrName, reduceHeadChildren, resetSSRHead, setDocumentInitialHead };
+export { _applyHeadPropsToElement, _clientHeadChildren, _registerHeadStateAccessors, _syncClientHead, Head as default, defaultHead, escapeAttr, escapeInlineContent, getSSRHeadHTML, isSafeAttrName, reduceHeadChildren, resetSSRHead, setDocumentInitialHead };

package/dist/shims/head.js

@@ -80,7 +80,7 @@ function getSSRHeadHTML() {
 * Tags allowed inside <head>. Anything else is silently dropped.
 * This prevents injection of dangerous elements like <iframe>, <object>, etc.
 */
-const ALLOWED_HEAD_TAGS = new Set([
+const ALLOWED_HEAD_TAGS = /* @__PURE__ */ new Set([
 	"title",
 	"meta",
 	"link",
@@ -97,13 +97,13 @@ const META_TYPES = [
 	"itemProp"
 ];
 /** Self-closing tags: no inner content, emit as <tag ... /> */
-const SELF_CLOSING_HEAD_TAGS = new Set([
+const SELF_CLOSING_HEAD_TAGS = /* @__PURE__ */ new Set([
 	"meta",
 	"link",
 	"base"
 ]);
 /** Tags whose content is raw text — closing-tag sequences must be escaped during SSR. */
-const RAW_CONTENT_TAGS = new Set(["script", "style"]);
+const RAW_CONTENT_TAGS = /* @__PURE__ */ new Set(["script", "style"]);
 const INLINE_CLOSE_TAG_RES = {
 	script: /<\/(script)/gi,
 	style: /<\/(style)/gi
@@ -323,7 +323,7 @@ function Head({ children }) {
 	if (headInstanceIdRef.current === null) headInstanceIdRef.current = Symbol("vinext-head");
 	if (typeof window === "undefined") {
 		_getSSRHeadChildren().push(children);
-		return null;
+		return React.createElement(React.Fragment);
 	}
 	useEffect(() => {
 		const instanceId = headInstanceIdRef.current;
@@ -334,7 +334,7 @@ function Head({ children }) {
 			_syncClientHead();
 		};
 	}, [children]);
-	return null;
+	return React.createElement(React.Fragment);
 }
 //#endregion
-export { _applyHeadPropsToElement, _clientHeadChildren, _registerHeadStateAccessors, _syncClientHead, Head as default, escapeAttr, escapeInlineContent, getSSRHeadHTML, isSafeAttrName, reduceHeadChildren, resetSSRHead, setDocumentInitialHead };
+export { _applyHeadPropsToElement, _clientHeadChildren, _registerHeadStateAccessors, _syncClientHead, Head as default, defaultHead, escapeAttr, escapeInlineContent, getSSRHeadHTML, isSafeAttrName, reduceHeadChildren, resetSSRHead, setDocumentInitialHead };

package/dist/shims/headers.d.ts

@@ -1,4 +1,6 @@
 import { RenderRequestApiKind } from "../server/cache-proof.js";
+import { ReadonlyRequestCookies } from "@vinext/types/next/upstream/dist/server/web/spec-extension/adapters/request-cookies";
+import { ResponseCookie } from "@vinext/types/next/upstream/dist/compiled/@edge-runtime/cookies/index";
 
 //#region src/shims/headers.d.ts
 type HeadersContext = {
@@ -27,6 +29,8 @@ type VinextHeadersShimState = {
   phase: HeadersAccessPhase;
 };
 type ConnectionProbeState = {
+  active: boolean;
+  dynamicUsageTarget: VinextHeadersShimState;
   interrupted: boolean;
   interrupt: () => void;
   pending: Promise<never>;
@@ -47,6 +51,16 @@ type ConnectionProbeResult<T> = {
  * Called by connection(), cookies(), headers(), and noStore().
  */
 declare function markDynamicUsage(): void;
+/**
+ * Measure dynamic usage in a child async scope without clearing the parent.
+ * Concurrent work that already belongs to the request (such as deferred
+ * metadata) keeps writing to the parent state and therefore remains visible
+ * to the final cache policy.
+ */
+declare function runWithIsolatedDynamicUsage<T>(fn: () => T | Promise<T>): Promise<{
+  result: T;
+  dynamicDetected: boolean;
+}>;
 declare function markRenderRequestApiUsage(kind: RenderRequestApiKind): void;
 declare function throwIfStaticGenerationAccessError(): void;
 declare function runWithConnectionProbe<T>(fn: () => T | Promise<T>): Promise<ConnectionProbeResult<T>>;
@@ -162,11 +176,8 @@ declare function headersContextFromRequest(request: Request, options?: HeadersCo
  * the context is already available).
  */
 declare function headers(): Promise<Headers> & Headers;
-/**
- * Cookie jar from the incoming request.
- * Returns a ReadonlyRequestCookies-like object.
- */
-declare function cookies(): Promise<RequestCookies> & RequestCookies;
+type VinextReadonlyRequestCookies = Omit<ReadonlyRequestCookies, keyof RequestCookies> & RequestCookies;
+declare function cookies(): Promise<VinextReadonlyRequestCookies> & VinextReadonlyRequestCookies;
 /** Accumulated Set-Cookie headers from cookies().set() / .delete() calls */
 /**
  * Get and clear all pending Set-Cookie headers generated by cookies().set()/delete().
@@ -179,6 +190,12 @@ declare function getAndClearPendingCookies(): string[];
  */
 declare function getDraftModeCookieHeader(): string | null;
 declare function isDraftModeRequest(request: Request, draftModeSecret: string): boolean;
+/**
+ * Read draft mode from the live request context without recording request API
+ * usage. `null` means there is no active request context, which lets framework
+ * callers fall back to an explicitly supplied request when needed.
+ */
+declare function getActiveDraftModeState(): boolean | null;
 /**
  * Read the active request's draft-mode state without recording request API usage.
  * Internal cache implementations use this to bypass persistent reads and writes,
@@ -223,39 +240,19 @@ declare class RequestCookies {
    * Set a cookie. In Route Handlers and Server Actions, this produces
    * a Set-Cookie header on the response.
    */
-  set(nameOrOptions: string | {
-    name: string;
-    value: string;
-    path?: string;
-    domain?: string;
-    maxAge?: number;
-    expires?: Date;
-    httpOnly?: boolean;
-    secure?: boolean;
-    sameSite?: "Strict" | "Lax" | "None";
-  }, value?: string, options?: {
-    path?: string;
-    domain?: string;
-    maxAge?: number;
-    expires?: Date;
-    httpOnly?: boolean;
-    secure?: boolean;
-    sameSite?: "Strict" | "Lax" | "None";
-  }): this;
+  set(options: ResponseCookie): this;
+  set(key: string, value: string, cookie?: Partial<ResponseCookie>): this;
   /**
    * Delete a cookie by emitting an expired Set-Cookie header.
    */
-  delete(nameOrOptions: string | {
-    name: string;
-    path?: string;
-    domain?: string;
-  }): this;
+  delete(name: string): this;
+  delete(options: Omit<ResponseCookie, "value" | "expires">): this;
   get size(): number;
-  [Symbol.iterator](): IterableIterator<[string, {
+  [Symbol.iterator](): MapIterator<[string, {
     name: string;
     value: string;
   }]>;
   toString(): string;
 }
 //#endregion
-export { HeadersAccessPhase, HeadersContext, type RequestCookies, VinextHeadersShimState, applyMiddlewareRequestHeaders, consumeDynamicUsage, consumeInvalidDynamicUsageError, consumeRenderRequestApiUsage, cookies, draftMode, getAndClearPendingCookies, getDraftModeCookieHeader, getHeadersAccessPhase, getHeadersContext, headers, headersContextFromRequest, isDraftModeEnabled, isDraftModeRequest, markDynamicUsage, markRenderRequestApiUsage, peekDynamicUsage, peekRenderRequestApiUsage, runWithConnectionProbe, runWithHeadersContext, setHeadersAccessPhase, setHeadersContext, suspendConnectionProbe, throwIfInsideCacheScope, throwIfStaticGenerationAccessError };
+export { HeadersAccessPhase, HeadersContext, type RequestCookies, VinextHeadersShimState, applyMiddlewareRequestHeaders, consumeDynamicUsage, consumeInvalidDynamicUsageError, consumeRenderRequestApiUsage, cookies, draftMode, getActiveDraftModeState, getAndClearPendingCookies, getDraftModeCookieHeader, getHeadersAccessPhase, getHeadersContext, headers, headersContextFromRequest, isDraftModeEnabled, isDraftModeRequest, markDynamicUsage, markRenderRequestApiUsage, peekDynamicUsage, peekRenderRequestApiUsage, runWithConnectionProbe, runWithHeadersContext, runWithIsolatedDynamicUsage, setHeadersAccessPhase, setHeadersContext, suspendConnectionProbe, throwIfInsideCacheScope, throwIfStaticGenerationAccessError };