@prismicio/next 1.7.0 → 2.0.0-alpha.0

package/package.json

@@ -1,6 +1,10 @@
 {
+	"workspaces": [
+		".",
+		"e2e-projects/*"
+	],
 	"name": "@prismicio/next",
-	"version": "1.7.0",
+	"version": "2.0.0-alpha.0",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
 		"typescript",
@@ -11,26 +15,33 @@
 	],
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/prismicio/prismic-next"
+		"url": "git+https://github.com/prismicio/prismic-next.git"
 	},
 	"license": "Apache-2.0",
 	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
 	"sideEffects": false,
+	"type": "module",
 	"exports": {
 		".": {
-			"require": {
-				"types": "./dist/index.d.ts",
-				"default": "./dist/index.cjs"
-			},
-			"import": {
-				"types": "./dist/index.d.ts",
-				"default": "./dist/index.js"
-			}
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./pages": {
+			"types": "./dist/pages/index.d.ts",
+			"default": "./dist/pages.js"
 		},
 		"./package.json": "./package.json"
 	},
-	"main": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"typesVersions": {
+		"*": {
+			"*": [
+				"./dist/index.d.ts"
+			],
+			"pages": [
+				"./dist/pages/index.d.ts"
+			]
+		}
+	},
 	"files": [
 		"dist",
 		"src"
@@ -39,63 +50,59 @@
 		"build": "vite build",
 		"dev": "vite build --watch",
 		"format": "prettier --write .",
-		"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
-		"types": "tsc --noEmit",
+		"lint": "eslint",
 		"prepare": "npm run build",
 		"release": "npm run build && npm run test && standard-version && git push --follow-tags && npm run build && npm publish",
-		"release:alpha": "npm run build && npm run test && standard-version --release-as minor --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
-		"release:alpha:dry": "standard-version --release-as minor --prerelease alpha --dry-run",
+		"release:alpha": "npm run build && npm run test && standard-version --release-as major --prerelease alpha && git push --follow-tags && npm run build && npm publish --tag alpha",
+		"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
 		"release:dry": "standard-version --dry-run",
-		"unit": "vitest run --coverage",
-		"unit:watch": "vitest watch",
 		"size": "size-limit",
-		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
+		"test": "npm run lint && npm run types && npm run build && npm run e2e && npm run size && npm run e2e",
+		"types": "tsc --noEmit",
+		"e2e": "playwright test",
+		"e2e:ui": "npm run e2e -- --ui"
 	},
 	"dependencies": {
-		"@formatjs/intl-localematcher": "^0.5.2",
-		"imgix-url-builder": "^0.0.4",
-		"negotiator": "^0.6.3"
+		"esm-env": "^1.2.1",
+		"imgix-url-builder": "^0.0.5"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.11.0",
-		"@prismicio/mock": "^0.4.0",
-		"@size-limit/preset-small-lib": "^9.0.0",
-		"@types/negotiator": "^0.6.3",
-		"@types/react-test-renderer": "^18.0.2",
-		"@typescript-eslint/eslint-plugin": "^6.7.2",
-		"@typescript-eslint/parser": "^6.7.2",
-		"@vitejs/plugin-react": "^4.0.4",
-		"@vitest/coverage-v8": "^0.34.5",
-		"eslint": "^8.49.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-prettier": "^5.0.0",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-tsdoc": "^0.2.17",
-		"happy-dom": "^12.1.6",
-		"memfs": "^4.4.0",
-		"next": "^14.0.0",
-		"node-fetch": "^3.3.2",
-		"prettier": "^3.0.3",
-		"prettier-plugin-jsdoc": "^1.0.2",
-		"react": "^18.1.0",
-		"react-dom": "^18.2.0",
-		"react-test-renderer": "^18.2.0",
-		"rollup-plugin-preserve-directives": "^0.2.0",
-		"size-limit": "^9.0.0",
+		"@eslint/js": "^9.17.0",
+		"@playwright/test": "^1.49.1",
+		"@prismicio/client": "^7.12.0",
+		"@prismicio/types-internal": "^3.3.0",
+		"@rollup/plugin-typescript": "^12.1.2",
+		"@size-limit/preset-small-lib": "^11.1.6",
+		"@types/node": "^22.10.2",
+		"@types/react": "^19.0.2",
+		"@vitejs/plugin-react": "^4.3.4",
+		"dotenv": "^16.4.7",
+		"eslint": "^9.17.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-react": "^7.37.2",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-tsdoc": "^0.4.0",
+		"next": "^15.1.0",
+		"playwright": "^1.49.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-jsdoc": "^1.3.0",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"rollup-preserve-directives": "^1.1.3",
+		"size-limit": "^11.1.6",
 		"standard-version": "^9.5.0",
-		"typescript": "^5.2.2",
-		"vite": "^4.4.9",
-		"vite-plugin-sdk": "^0.1.1",
-		"vitest": "^0.34.5"
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.18.1",
+		"vite": "^6.0.4"
 	},
 	"peerDependencies": {
-		"@prismicio/client": "^6 || ^7",
+		"@prismicio/client": "^7",
 		"next": "^13.4.5 || ^14 || ^15.0.0-rc.0",
 		"react": "^18 || ^19.0.0-rc.0"
 	},
 	"engines": {
-		"node": ">=14.15.0"
+		"node": ">=18"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/PrismicNextImage.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import { JSX } from "react";
 import Image, { ImageProps } from "next/image";
 import { buildURL, ImgixURLParams } from "imgix-url-builder";
-import * as prismic from "@prismicio/client";
+import { ImageFieldImage, isFilled } from "@prismicio/client";
+import { DEV } from "esm-env";
 
-import { devMsg } from "./lib/devMsg";
+import { devMsg } from "./lib/devMsg.js";
 
-import { imgixLoader } from "./imgixLoader";
+import { imgixLoader } from "./imgixLoader.js";
 
 const castInt = (input: string | number | undefined): number | undefined => {
 	if (typeof input === "number" || typeof input === "undefined") {
@@ -22,11 +24,12 @@ const castInt = (input: string | number | undefined): number | undefined => {
 	}
 };
 
-export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
-	/**
-	 * The Prismic Image field or thumbnail to render.
-	 */
-	field: prismic.ImageFieldImage | null | undefined;
+export type PrismicNextImageProps = Omit<
+	ImageProps,
+	"src" | "alt" | "loader"
+> & {
+	/** The Prismic Image field or thumbnail to render. */
+	field: ImageFieldImage | null | undefined;
 
 	/**
 	 * An object of Imgix URL API parameters to transform the image.
@@ -57,6 +60,8 @@ export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt"> & {
 	 * be rendered.
 	 */
 	fallback?: React.ReactNode;
+
+	loader?: ImageProps["loader"] | null;
 };
 
 /**
@@ -84,9 +89,10 @@ export const PrismicNextImage = ({
 	width,
 	height,
 	fallback = null,
+	loader = imgixLoader,
 	...restProps
 }: PrismicNextImageProps): JSX.Element => {
-	if (process.env.NODE_ENV !== "production") {
+	if (DEV) {
 		if (typeof alt === "string" && alt !== "") {
 			console.warn(
 				`[PrismicNextImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg(
@@ -104,7 +110,7 @@ export const PrismicNextImage = ({
 		}
 	}
 
-	if (prismic.isFilled.imageThumbnail(field)) {
+	if (isFilled.imageThumbnail(field)) {
 		const resolvedImgixParams = imgixParams;
 		for (const x in imgixParams) {
 			if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
@@ -130,13 +136,10 @@ export const PrismicNextImage = ({
 
 		// A non-null assertion is required since we can't statically
 		// know if an alt attribute is available.
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
 		const resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;
 
-		if (
-			process.env.NODE_ENV !== "production" &&
-			typeof resolvedAlt !== "string"
-		) {
+		if (DEV && typeof resolvedAlt !== "string") {
 			console.error(
 				`[PrismicNextImage] The following image is missing an "alt" property. Please add Alternative Text to the image in Prismic. To mark the image as decorative instead, add one of \`alt=""\` or \`fallbackAlt=""\`.`,
 				src,
@@ -158,7 +161,7 @@ export const PrismicNextImage = ({
 				height={fill ? undefined : resolvedHeight}
 				alt={resolvedAlt}
 				fill={fill}
-				loader={imgixLoader}
+				loader={loader === null ? undefined : loader}
 				{...restProps}
 			/>
 		);

package/src/PrismicNextLink.tsx

@@ -1,43 +1,47 @@
-"use client";
-
-import * as React from "react";
-import * as prismic from "@prismicio/client";
+import { ComponentProps, forwardRef } from "react";
 import Link from "next/link";
+import {
+	AsLinkAttrsConfig,
+	LinkField,
+	LinkResolverFunction,
+	PrismicDocument,
+	asLinkAttrs,
+} from "@prismicio/client";
 
 export type PrismicNextLinkProps = Omit<
-	React.ComponentProps<typeof Link>,
+	ComponentProps<typeof Link>,
 	"field" | "document" | "href" | "rel"
 > & {
-	linkResolver?: prismic.LinkResolverFunction;
-	rel?: string | prismic.AsLinkAttrsConfig["rel"];
+	linkResolver?: LinkResolverFunction;
+	rel?: string | AsLinkAttrsConfig["rel"];
 } & (
 		| {
-				field: prismic.LinkField | null | undefined;
+				field: LinkField | null | undefined;
 				document?: never;
 				href?: never;
 		  }
 		| {
 				field?: never;
-				document: prismic.PrismicDocument | null | undefined;
+				document: PrismicDocument | null | undefined;
 				href?: never;
 		  }
 		| {
 				field?: never;
 				document?: never;
-				href: React.ComponentProps<typeof Link>["href"];
+				href: ComponentProps<typeof Link>["href"];
 		  }
 	);
 
-export const PrismicNextLink = React.forwardRef<
+export const PrismicNextLink = forwardRef<
 	HTMLAnchorElement,
 	PrismicNextLinkProps
->(function PrismicNextLink(props, ref): JSX.Element | null {
+>(function PrismicNextLink(props, ref) {
 	const { field, document, linkResolver, children, ...restProps } = props;
 	const {
 		href: computedHref,
 		rel: computedRel,
 		...attrs
-	} = prismic.asLinkAttrs(field ?? document, {
+	} = asLinkAttrs(field ?? document, {
 		linkResolver,
 		rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
 	});

package/src/PrismicPreview.tsx

@@ -1,13 +1,10 @@
+import type { ReactNode, JSX } from "react";
 import Script from "next/script";
-import { draftMode } from "next/headers";
-import * as React from "react";
-import * as prismic from "@prismicio/client";
+import { getToolbarSrc } from "@prismicio/client";
 
-import { PrismicPreviewClient } from "./PrismicPreviewClient";
+import { PrismicPreviewClient } from "./PrismicPreviewClient.js";
 
-/**
- * Props for `<PrismicPreview>`.
- */
+/** Props for `<PrismicPreview>`. */
 export type PrismicPreviewProps = {
 	/**
 	 * The name of your Prismic repository. A Prismic Toolbar will be registered
@@ -16,25 +13,19 @@ export type PrismicPreviewProps = {
 	repositoryName: string;
 
 	/**
-	 * **Only used in the Pages Directory (/pages).**
-	 *
 	 * The URL of your app's Prismic preview endpoint (default: `/api/preview`).
 	 * This URL will be fetched on preview update events.
 	 */
 	updatePreviewURL?: string;
 
 	/**
-	 * **Only used in the Pages Directory (/pages).**
-	 *
 	 * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).
 	 * This URL will be fetched on preview exit events.
 	 */
 	exitPreviewURL?: string;
 
-	/**
-	 * Children to render adjacent to the Prismic Toolbar.
-	 */
-	children?: React.ReactNode;
+	/** Children to render adjacent to the Prismic Toolbar. */
+	children?: ReactNode;
 };
 
 /**
@@ -46,21 +37,18 @@ export type PrismicPreviewProps = {
  * This component can be wrapped around your app or added anywhere in your app's
  * tree. It must be rendered on every page.
  */
-export function PrismicPreview({
-	repositoryName,
-	children,
-	...props
-}: PrismicPreviewProps): JSX.Element {
-	const toolbarSrc = prismic.getToolbarSrc(repositoryName);
+export async function PrismicPreview(
+	props: PrismicPreviewProps,
+): Promise<JSX.Element> {
+	const { repositoryName, children, ...otherProps } = props;
+
+	// Need this to avoid the following Next.js build-time error:
+	// You're importing a component that needs next/headers. That only works
+	// in a Server Component which is not supported in the pages/ directory.
+	const { draftMode } = await import("next/headers");
 
-	let isDraftMode = false;
-	try {
-		isDraftMode = draftMode().isEnabled;
-	} catch {
-		// noop - `requestAsyncStorage` propbably doesn't exist, such as
-		// in the Pages Router, which causes `draftMode()` to throw. We
-		// can ignore this case and assume Draft Mode is disabled.
-	}
+	const toolbarSrc = getToolbarSrc(repositoryName);
+	const isDraftMode = (await draftMode()).isEnabled;
 
 	return (
 		<>
@@ -68,7 +56,7 @@ export function PrismicPreview({
 			<PrismicPreviewClient
 				repositoryName={repositoryName}
 				isDraftMode={isDraftMode}
-				{...props}
+				{...otherProps}
 			/>
 			<Script src={toolbarSrc} strategy="lazyOnload" />
 		</>

package/src/PrismicPreviewClient.tsx

@@ -1,156 +1,129 @@
 "use client";
 
 import { useEffect } from "react";
-import { useRouter as usePagesRouter } from "next/router";
+import { cookie as prismicCookie } from "@prismicio/client";
 import { useRouter } from "next/navigation";
 
-import { getPrismicPreviewCookie } from "./lib/getPrismicPreviewCookie";
-import { getPreviewCookieRepositoryName } from "./lib/getPreviewCookieRepositoryName";
-
-import { PrismicPreviewProps } from "./PrismicPreview";
-
-type PrismicPreviewClientProps = Omit<PrismicPreviewProps, "children"> & {
+type PrismicPreviewClientProps = {
+	repositoryName: string;
 	isDraftMode: boolean;
+	updatePreviewURL?: string;
+	exitPreviewURL?: string;
 };
 
-export function PrismicPreviewClient({
-	repositoryName,
-	updatePreviewURL = "/api/preview",
-	exitPreviewURL = "/api/exit-preview",
-	isDraftMode,
-}: PrismicPreviewClientProps): null {
-	let isPreviewActive = isDraftMode;
-	let isAppRouter = true;
-	let basePath = "";
-	let refresh: () => void;
-
-	try {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const router = usePagesRouter();
-
-		isAppRouter = false;
-		basePath = router.basePath;
-		isPreviewActive ||= router.isPreview;
-		refresh = () => router.replace(router.asPath, undefined, { scroll: false });
-	} catch {
-		// Assume we are in App Router. Ignore the error.
-
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		const router = useRouter();
-
-		refresh = router.refresh;
-	}
+export function PrismicPreviewClient(props: PrismicPreviewClientProps): null {
+	const {
+		repositoryName,
+		isDraftMode,
+		updatePreviewURL = "/api/preview",
+		exitPreviewURL = "/api/exit-preview",
+	} = props;
+
+	const { refresh } = useRouter();
 
 	useEffect(() => {
-		/**
-		 * Starts Preview Mode and refreshes the page's props.
-		 */
-		const startPreviewMode = async () => {
-			const resolvedUpdatePreviewURL = basePath + updatePreviewURL;
-
-			// Start Next.js Preview Mode via the given preview API endpoint.
-			const res = await globalThis.fetch(resolvedUpdatePreviewURL);
-
-			// We check for `res.redirected` rather than `res.ok`
-			// since the update preview endpoint may redirect to a
-			// 404 page. As long as it redirects, we know the
-			// endpoint exists and at least attempted to set
-			// preview data.
-			if (res.redirected) {
-				refresh();
-			} else {
-				console.error(
-					`[<PrismicPreview>] Failed to start or update Preview Mode using the "${resolvedUpdatePreviewURL}" API endpoint. Does it exist?`,
-				);
-			}
-		};
-
-		const handlePrismicPreviewUpdate = async (event: Event) => {
-			// Prevent the toolbar from reloading the page.
-			event.preventDefault();
+		const controller = new AbortController();
+
+		window.addEventListener("prismicPreviewUpdate", onUpdate, {
+			signal: controller.signal,
+		});
+		window.addEventListener("prismicPreviewEnd", onEnd, {
+			signal: controller.signal,
+		});
+
+		const cookie = getPrismicPreviewCookie(window.document.cookie);
+		const cookieRepositoryName = cookie
+			? (decodeURIComponent(cookie).match(/"([^"]+)\.prismic\.io"/) || [])[1]
+			: undefined;
+		const hasCookieForRepository = cookieRepositoryName === repositoryName;
+
+		// Start the preview for preview share links. Previews from
+		// share links do not go to the `updatePreviewURL` like a normal
+		// preview.
+		if (hasCookieForRepository && !isDraftMode) {
+			console.log("starting preview link");
+
+			// We check `opaqueredirect` because we don't care if
+			// the redirect was successful or not. As long as it
+			// redirects, we know the endpoint exists and draft mode
+			// is active.
+			globalThis
+				.fetch(updatePreviewURL, {
+					redirect: "manual",
+					signal: controller.signal,
+				})
+				.then((res) => {
+					if (res.type !== "opaqueredirect") {
+						console.error(
+							`[<PrismicPreview>] Failed to start the preview using "${updatePreviewURL}". Does it exist?`,
+						);
+
+						return;
+					}
+
+					refresh();
+				})
+				.catch(() => {
+					// noop
+				});
+		}
 
-			if (isAppRouter) {
-				refresh();
-			} else {
-				await startPreviewMode();
-			}
-		};
+		function onUpdate() {
+			refresh();
+		}
 
-		const handlePrismicPreviewEnd = async (event: Event) => {
-			// Prevent the toolbar from reloading the page.
+		function onEnd(event: Event) {
 			event.preventDefault();
-
-			const resolvedExitPreviewURL = basePath + exitPreviewURL;
-
-			// Exit Next.js Preview Mode via the given preview API endpoint.
-			const res = await globalThis.fetch(resolvedExitPreviewURL);
-
-			if (res.ok) {
-				refresh();
-			} else {
-				console.error(
-					`[<PrismicPreview>] Failed to exit Preview Mode using the "${resolvedExitPreviewURL}" API endpoint. Does it exist?`,
-				);
-			}
-		};
-
-		window.addEventListener("prismicPreviewUpdate", handlePrismicPreviewUpdate);
-		window.addEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-
-		if (!isPreviewActive) {
-			const prismicPreviewCookie = getPrismicPreviewCookie(
-				globalThis.document.cookie,
-			);
-
-			if (prismicPreviewCookie) {
-				// If a Prismic preview cookie is present, but Next.js Preview
-				// Mode is not active, we must activate Preview Mode manually.
-				//
-				// This will happen when a visitor accesses the page using a
-				// Prismic preview share link.
-
-				/**
-				 * Determines if the current location is a descendant of the app's base
-				 * path.
-				 *
-				 * This is used to prevent infinite refrehes; when
-				 * `isDescendantOfBasePath` is `false`, `router.isPreview` is also
-				 * `false`.
-				 *
-				 * If the app does not have a base path, this should always be `true`.
-				 */
-				const locationIsDescendantOfBasePath = window.location.href.startsWith(
-					window.location.origin + basePath,
-				);
-
-				const prismicPreviewCookieRepositoryName =
-					getPreviewCookieRepositoryName(prismicPreviewCookie);
-
-				if (
-					locationIsDescendantOfBasePath &&
-					prismicPreviewCookieRepositoryName === repositoryName
-				) {
-					startPreviewMode();
-				}
-			}
+			globalThis
+				.fetch(exitPreviewURL, { signal: controller.signal })
+				.then((res) => {
+					if (!res.ok) {
+						console.error(
+							`[<PrismicPreview>] Failed to exit Preview Mode using the "${exitPreviewURL}" API endpoint. Does it exist?`,
+						);
+
+						return;
+					}
+
+					refresh();
+				})
+				.catch(() => {
+					// noop
+				});
 		}
 
-		return () => {
-			window.removeEventListener(
-				"prismicPreviewUpdate",
-				handlePrismicPreviewUpdate,
-			);
-			window.removeEventListener("prismicPreviewEnd", handlePrismicPreviewEnd);
-		};
-	}, [
-		basePath,
-		exitPreviewURL,
-		isAppRouter,
-		isPreviewActive,
-		refresh,
-		repositoryName,
-		updatePreviewURL,
-	]);
+		return () => controller.abort();
+	}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);
 
 	return null;
 }
+
+/**
+ * Returns the value of a cookie from a given cookie store.
+ *
+ * @param cookieJar - The stringified cookie store from which to read the
+ *   cookie.
+ *
+ * @returns The value of the cookie, if it exists.
+ */
+function getPrismicPreviewCookie(cookieJar: string): string | undefined {
+	function readValue(value: string): string {
+		return value.replace(/%3B/g, ";");
+	}
+
+	const cookies = cookieJar.split("; ");
+
+	let value: string | undefined;
+
+	for (const cookie of cookies) {
+		const parts = cookie.split("=");
+		const name = readValue(parts[0]).replace(/%3D/g, "=");
+
+		if (name === prismicCookie.preview) {
+			value = readValue(parts.slice(1).join("="));
+			continue;
+		}
+	}
+
+	return value;
+}