@prismicio/next 2.2.3 → 2.2.4-pr.114.39a5b55

package/src/SliceSimulator.tsx

@@ -1,39 +1,34 @@
-"use client";
+"use client"
 
-import { SliceSimulatorWrapper } from "./SliceSimulatorWrapper";
-import { getSlices } from "./getSlices";
-import {
-	SimulatorManager,
-	StateEventType,
-	getDefaultMessage,
-} from "@prismicio/simulator/kit";
-import type { SliceSimulatorProps as BaseSliceSimulatorProps } from "@prismicio/simulator/kit";
-import { compressToEncodedURIComponent } from "lz-string";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import type { FC, ReactNode } from "react";
+import { SimulatorManager, StateEventType, getDefaultMessage } from "@prismicio/simulator/kit"
+import type { SliceSimulatorProps as BaseSliceSimulatorProps } from "@prismicio/simulator/kit"
+import { compressToEncodedURIComponent } from "lz-string"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+import type { FC, ReactNode } from "react"
 
-const STATE_PARAMS_KEY = "state";
+import { getSlices } from "./getSlices"
+import { SliceSimulatorWrapper } from "./SliceSimulatorWrapper"
 
-const simulatorManager = new SimulatorManager();
+const STATE_PARAMS_KEY = "state"
 
-/**
- * Parameters provided to the Slice Simulator page.
- */
+const simulatorManager = new SimulatorManager()
+
+/** Parameters provided to the Slice Simulator page. */
 export type SliceSimulatorParams = {
 	searchParams: Promise<{
-		state?: string;
-	}>;
-};
+		state?: string
+	}>
+}
 
 export type SliceSimulatorProps = BaseSliceSimulatorProps & {
-	children: ReactNode;
-	className?: string;
-};
+	children: ReactNode
+	className?: string
+}
 
 /**
- * Simulate slices in isolation. The slice simulator enables live slice
- * development in Slice Machine and live previews in the Page Builder.
+ * Simulate slices in isolation. The slice simulator enables live slice development in Slice Machine
+ * and live previews in the Page Builder.
  */
 export const SliceSimulator: FC<SliceSimulatorProps> = ({
 	children,
@@ -41,45 +36,45 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
 	zIndex,
 	className,
 }) => {
-	const [message, setMessage] = useState(() => getDefaultMessage());
-	const router = useRouter();
+	const [message, setMessage] = useState(() => getDefaultMessage())
+	const router = useRouter()
 
 	const state =
 		typeof window !== "undefined"
 			? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)
-			: undefined;
-	const hasSlices = getSlices(state).length > 0;
+			: undefined
+	const hasSlices = getSlices(state).length > 0
 
 	useEffect(() => {
 		simulatorManager.state.on(
 			StateEventType.Slices,
 			(newSlices) => {
-				const url = new URL(window.location.href);
+				const url = new URL(window.location.href)
 				url.searchParams.set(
 					STATE_PARAMS_KEY,
 					compressToEncodedURIComponent(JSON.stringify(newSlices)),
-				);
+				)
 
-				window.history.replaceState(null, "", url);
+				window.history.replaceState(null, "", url)
 				// Wait until the next tick to prevent URL state race conditions.
-				setTimeout(() => router.refresh(), 0);
+				setTimeout(() => router.refresh(), 0)
 			},
 			"simulator-slices",
-		);
+		)
 		simulatorManager.state.on(
 			StateEventType.Message,
 			(newMessage) => setMessage(newMessage),
 			"simulator-message",
-		);
+		)
 
-		simulatorManager.init();
+		simulatorManager.init()
 
 		return () => {
-			simulatorManager.state.off(StateEventType.Slices, "simulator-slices");
+			simulatorManager.state.off(StateEventType.Slices, "simulator-slices")
 
-			simulatorManager.state.off(StateEventType.Message, "simulator-message");
-		};
-	}, [router]);
+			simulatorManager.state.off(StateEventType.Message, "simulator-message")
+		}
+	}, [router])
 
 	return (
 		<SliceSimulatorWrapper
@@ -91,5 +86,5 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
 		>
 			{children}
 		</SliceSimulatorWrapper>
-	);
-};
+	)
+}

package/src/SliceSimulatorWrapper.tsx

@@ -4,21 +4,18 @@ import {
 	onClickHandler,
 	simulatorClass,
 	simulatorRootClass,
-} from "@prismicio/simulator/kit";
-import type { SliceSimulatorProps } from "@prismicio/simulator/kit";
-import type { FC, ReactNode } from "react";
+} from "@prismicio/simulator/kit"
+import type { SliceSimulatorProps } from "@prismicio/simulator/kit"
+import type { FC, ReactNode } from "react"
 
 type SliceSimulatorWrapperProps = SliceSimulatorProps & {
-	children: ReactNode;
-	className?: string;
-	message?: string;
-	hasSlices: boolean;
-};
+	children: ReactNode
+	className?: string
+	message?: string
+	hasSlices: boolean
+}
 
-/**
- * A wrapper for the slice simulator that isolates the given children from the
- * page's layout.
- */
+/** A wrapper for the slice simulator that isolates the given children from the page's layout. */
 export const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({
 	className,
 	children,
@@ -27,16 +24,13 @@ export const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({
 	message,
 	hasSlices,
 }) => {
-	const defaultProps = getDefaultProps();
+	const defaultProps = getDefaultProps()
 
 	return (
 		<div
 			className={[simulatorClass, className].filter(Boolean).join(" ")}
 			style={{
-				zIndex:
-					typeof zIndex === "undefined"
-						? defaultProps.zIndex
-						: (zIndex ?? undefined),
+				zIndex: typeof zIndex === "undefined" ? defaultProps.zIndex : (zIndex ?? undefined),
 				position: "fixed",
 				top: 0,
 				left: 0,
@@ -44,9 +38,7 @@ export const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({
 				height: "100vh",
 				overflow: "auto",
 				background:
-					typeof background === "undefined"
-						? defaultProps.background
-						: (background ?? undefined),
+					typeof background === "undefined" ? defaultProps.background : (background ?? undefined),
 			}}
 		>
 			{message ? (
@@ -56,13 +48,11 @@ export const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({
 					id="root"
 					className={simulatorRootClass}
 					onClickCapture={onClickHandler as unknown as React.MouseEventHandler}
-					onSubmitCapture={
-						disableEventHandler as unknown as React.FormEventHandler
-					}
+					onSubmitCapture={disableEventHandler as unknown as React.FormEventHandler}
 				>
 					{children}
 				</div>
 			) : null}
 		</div>
-	);
-};
+	)
+}

package/src/cacheTagPrismicPages.ts

@@ -0,0 +1,8 @@
+import type { PrismicDocument } from "@prismicio/client"
+import { cacheTag } from "next/cache"
+
+import { getPrismicCacheTags } from "./getPrismicCacheTags"
+
+export function cacheTagPrismicPages(pages: PrismicDocument[]): void {
+	cacheTag(...getPrismicCacheTags(pages))
+}

package/src/createLocaleRedirect.ts

@@ -1,4 +1,4 @@
-import { devMsg } from "./lib/devMsg";
+import { devMsg } from "./lib/devMsg"
 
 /**
  * @deprecated `createLocaleRedirect()` has been removed due to performance
@@ -9,10 +9,10 @@ export function createLocaleRedirect(): never {
 		`createLocaleRedirect() has been removed due to performance issues. See ${devMsg(
 			"replace-createLocaleRedirect",
 		)} for more details.`,
-	);
+	)
 }
 /**
  * @deprecated `createLocaleRedirect()` has been removed due to performance
  *   issues.
  */
-export type CreateLocaleRedirectConfig = never;
+export type CreateLocaleRedirectConfig = never

package/src/enableAutoPreviews.ts

@@ -1,4 +1,6 @@
-import { type Client, cookie as prismicCookie } from "@prismicio/client";
+import type { Client } from "@prismicio/client"
+
+import { getPreviewRef } from "./getPreviewRef"
 
 /** Configuration for `enableAutoPreviews`. */
 export type EnableAutoPreviewsConfig = {
@@ -6,48 +8,16 @@ export type EnableAutoPreviewsConfig = {
 	// `Pick` is used to use the smallest possible subset of
 	// `prismic.Client`. Doing this reduces the surface area for breaking
 	// type changes.
-	client: Pick<Client, "queryContentFromRef" | "enableAutoPreviewsFromReq">;
-};
+	client: Pick<Client, "queryContentFromRef" | "enableAutoPreviewsFromReq">
+}
 
 /**
- * Configures a Prismic client to automatically query draft content during a
- * preview session.
+ * Configures a Prismic client to automatically query draft content during a preview session.
  *
  * @param config - Configuration for the function.
  */
 export function enableAutoPreviews(config: EnableAutoPreviewsConfig): void {
 	// We use a function value so the cookie is checked on every
 	// request. We don't have a static value to read from.
-	config.client.queryContentFromRef(async () => {
-		// 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 { cookies, draftMode } = await import("next/headers");
-
-		let isDraftModeEnabled = false;
-		try {
-			isDraftModeEnabled = (await draftMode()).isEnabled;
-		} catch {
-			// `draftMode()` may have been called in a palce that
-			// does not have access to its async storage. This
-			// occurs in places like `generateStaticParams()`. We
-			// can ignore this case.
-			return;
-		}
-		if (!isDraftModeEnabled) {
-			return;
-		}
-
-		const cookie = (await cookies()).get(prismicCookie.preview)?.value;
-		if (!cookie) {
-			return;
-		}
-
-		const isActiveCookie = cookie.includes("websitePreviewId=");
-		if (!isActiveCookie) {
-			return;
-		}
-
-		return cookie;
-	});
+	config.client.queryContentFromRef(() => getPreviewRef())
 }

package/src/exitPreview.ts

@@ -1,31 +1,36 @@
+import { cookie as prismicCookie } from "@prismicio/client"
+
 /**
- * Ends a Prismic preview session within a Next.js app. This function should be
- * used in a Router Handler.
+ * Ends a Prismic preview session within a Next.js app. This function should be used in a Router
+ * Handler.
  *
  * @example
+ * 	;```typescript
+ * 	// src/app/api/exit-preview/route.js
  *
- * ```typescript
- * // src/app/api/exit-preview/route.js
- *
- * import { exitPreview } from "@prismicio/next";
+ * 	import { exitPreview } from "@prismicio/next"
  *
- * export async function GET() {
- * 	return await exitPreview();
- * }
- * ```
+ * 	export async function GET() {
+ * 		return await exitPreview()
+ * 	}
+ * 	```
  */
 export async function exitPreview(): Promise<Response> {
 	// 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");
+	const { cookies, draftMode } = await import("next/headers")
+
+	;(await draftMode()).disable()
 
-	(await draftMode()).disable();
+	// `redirectToPreviewURL` writes the preview cookie, so `exitPreview`
+	// clears it to close the preview-cookie loop.
+	;(await cookies()).delete(prismicCookie.preview)
 
 	// `Cache-Control` header is used to prevent CDN-level caching.
 	return new Response(JSON.stringify({ success: true }), {
 		headers: {
 			"Cache-Control": "no-store",
 		},
-	});
+	})
 }

package/src/getPreviewRef.ts

@@ -0,0 +1,52 @@
+import { cookie as prismicCookie } from "@prismicio/client"
+
+/**
+ * Reads the Prismic preview ref for the current request when an active preview
+ * session exists.
+ *
+ * This is the read-side counterpart to `redirectToPreviewURL`, which writes the
+ * preview cookie. Use it with Next.js Cache Components to read the ref _outside_
+ * a cached function and pass it _in_ as an argument so it becomes part of the
+ * cache key:
+ *
+ * @example
+ * 	;```typescript
+ * 	import { getPreviewRef } from "@prismicio/next"
+ *
+ * 	const page = await fetchPage(uid, await getPreviewRef())
+ * 	```
+ *
+ * @returns The active preview ref, or `undefined` if no preview session is active.
+ */
+export async function getPreviewRef(): Promise<string | undefined> {
+	// 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 { cookies, draftMode } = await import("next/headers")
+
+	let isDraftModeEnabled = false
+	try {
+		isDraftModeEnabled = (await draftMode()).isEnabled
+	} catch {
+		// `draftMode()` may have been called in a place that
+		// does not have access to its async storage. This
+		// occurs in places like `generateStaticParams()`. We
+		// can ignore this case.
+		return
+	}
+	if (!isDraftModeEnabled) {
+		return
+	}
+
+	const cookie = (await cookies()).get(prismicCookie.preview)?.value
+	if (!cookie) {
+		return
+	}
+
+	const isActiveCookie = cookie.includes("websitePreviewId=")
+	if (!isActiveCookie) {
+		return
+	}
+
+	return cookie
+}

package/src/getPrismicCacheTags.ts

@@ -0,0 +1,44 @@
+import type { PrismicDocument } from "@prismicio/client"
+
+const CACHE_TAG_PREFIX = "prismic/"
+
+/**
+ * Generates cache tags for a set of Prismic pages. Tags for linked pages (e.g. a content
+ * relationship) are included to ensure all related content can be revalidated.
+ *
+ * @param pages - A set of Prismic pages used to tag the function.
+ * @see {@link https://nextjs.org/docs/app/api-reference/functions/cacheTag}
+ */
+export function getPrismicCacheTags(pages: PrismicDocument[]): string[] {
+	const ids = [...new Set(getPrismicDocumentIDs(pages))]
+	return ids.map((id) => buildPrismicCacheTag(id))
+}
+
+export function buildPrismicCacheTag(id: string): string {
+	return `${CACHE_TAG_PREFIX}${id}`
+}
+
+function getPrismicDocumentIDs(input: unknown): string[] {
+	if (typeof input !== "object" || input == null) return []
+
+	if (Array.isArray(input)) return input.flatMap((item) => getPrismicDocumentIDs(item))
+
+	if ("id" in input && typeof input.id === "string") {
+		// Document
+		// Content relationship or link
+		if (
+			("href" in input &&
+				typeof input.href === "string" &&
+				input.href.includes("/api/v2/documents/search?")) ||
+			("link_type" in input && input.link_type === "Document")
+		) {
+			if ("data" in input && typeof input.data === "object" && input.data !== null) {
+				return [input.id, ...getPrismicDocumentIDs(input.data)]
+			} else {
+				return [input.id]
+			}
+		}
+	}
+
+	return Object.values(input).flatMap((input) => getPrismicDocumentIDs(input))
+}

package/src/getSlices.ts

@@ -1,11 +1,7 @@
-import { getDefaultSlices } from "@prismicio/simulator/kit";
-import type { StateEvents, StateEventType } from "@prismicio/simulator/kit";
-import { decompressFromEncodedURIComponent } from "lz-string";
+import { getDefaultSlices } from "@prismicio/simulator/kit"
+import type { StateEvents, StateEventType } from "@prismicio/simulator/kit"
+import { decompressFromEncodedURIComponent } from "lz-string"
 
-export const getSlices = (
-	state: string | null | undefined,
-): StateEvents[StateEventType.Slices] => {
-	return state
-		? JSON.parse(decompressFromEncodedURIComponent(state))
-		: getDefaultSlices();
-};
+export const getSlices = (state: string | null | undefined): StateEvents[StateEventType.Slices] => {
+	return state ? JSON.parse(decompressFromEncodedURIComponent(state)) : getDefaultSlices()
+}

package/src/imgixLoader.ts

@@ -1,26 +1,26 @@
-import type { ImageLoaderProps } from "next/image";
-import type { ImgixURLParams } from "imgix-url-builder";
-import { buildURL } from "imgix-url-builder";
+import type { ImgixURLParams } from "imgix-url-builder"
+import { buildURL } from "imgix-url-builder"
+import type { ImageLoaderProps } from "next/image"
 
 /**
- * A `next/image` loader for Imgix, which Prismic uses, with an optional
- * collection of default Imgix parameters.
+ * A `next/image` loader for Imgix, which Prismic uses, with an optional collection of default Imgix
+ * parameters.
  *
  * @see To learn about `next/image` loaders: https://nextjs.org/docs/api-reference/next/image#loader
  * @see To learn about Imgix's URL API: https://docs.imgix.com/apis/rendering
  */
 export const imgixLoader = (args: ImageLoaderProps): string => {
-	const url = new URL(args.src);
+	const url = new URL(args.src)
 
 	const params: ImgixURLParams = {
 		fit: (url.searchParams.get("fit") as ImgixURLParams["fit"]) || "max",
 		w: args.width,
 		h: undefined,
-	};
+	}
 
 	if (args.quality) {
-		params.q = args.quality;
+		params.q = args.quality
 	}
 
-	return buildURL(args.src, params);
-};
+	return buildURL(args.src, params)
+}

package/src/index.ts

@@ -1,31 +1,36 @@
-export { exitPreview } from "./exitPreview";
+export { exitPreview } from "./exitPreview"
 
-export { PrismicPreview } from "./PrismicPreview";
-export type { PrismicPreviewProps } from "./PrismicPreview";
+export { PrismicPreview } from "./PrismicPreview"
+export type { PrismicPreviewProps } from "./PrismicPreview"
 
-export { PrismicNextLink } from "./PrismicNextLink";
-export type { PrismicNextLinkProps } from "./PrismicNextLink";
+export { PrismicNextLink } from "./PrismicNextLink"
+export type { PrismicNextLinkProps } from "./PrismicNextLink"
 
-export { enableAutoPreviews } from "./enableAutoPreviews";
-export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews";
+export { enableAutoPreviews } from "./enableAutoPreviews"
+export type { EnableAutoPreviewsConfig } from "./enableAutoPreviews"
 
-export { redirectToPreviewURL } from "./redirectToPreviewURL";
-export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
+export { getPreviewRef } from "./getPreviewRef"
 
-export { PrismicNextImage } from "./PrismicNextImage";
-export type { PrismicNextImageProps } from "./PrismicNextImage";
+export { redirectToPreviewURL } from "./redirectToPreviewURL"
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL"
 
-export { SliceSimulator } from "./SliceSimulator";
-export type {
-	SliceSimulatorProps,
-	SliceSimulatorParams,
-} from "./SliceSimulator";
+export { PrismicNextImage } from "./PrismicNextImage"
+export type { PrismicNextImageProps } from "./PrismicNextImage"
 
-export { getSlices } from "./getSlices";
+export { SliceSimulator } from "./SliceSimulator"
+export type { SliceSimulatorProps, SliceSimulatorParams } from "./SliceSimulator"
 
-export { imgixLoader } from "./imgixLoader";
+export { getSlices } from "./getSlices"
 
-export type { CreateClientConfig } from "./types";
+export { imgixLoader } from "./imgixLoader"
 
-export { createLocaleRedirect } from "./createLocaleRedirect";
-export type { CreateLocaleRedirectConfig } from "./createLocaleRedirect";
+export type { CreateClientConfig } from "./types"
+
+export { createLocaleRedirect } from "./createLocaleRedirect"
+export type { CreateLocaleRedirectConfig } from "./createLocaleRedirect"
+
+export { getPrismicCacheTags } from "./getPrismicCacheTags"
+
+export { cacheTagPrismicPages } from "./cacheTagPrismicPages"
+
+export { revalidatePrismicPages } from "./revalidatePrismicPages"

package/src/lib/devMsg.ts

@@ -1,20 +1,18 @@
-import { version } from "../../package.json";
+import { version } from "../../package.json"
 
 /**
  * Returns a `prismic.dev/msg` URL for a given message slug.
  *
  * @example
+ * 	;```ts
+ * 	devMsg("missing-param")
+ * 	// => "https://prismic.dev/msg/next/v1.2.3/missing-param"
+ * 	```
  *
- * ```ts
- * devMsg("missing-param");
- * // => "https://prismic.dev/msg/next/v1.2.3/missing-param"
- * ```
- *
- * @param slug - Slug for the message. This corresponds to a Markdown file in
- *   the Git repository's `/messages` directory.
- *
+ * @param slug - Slug for the message. This corresponds to a Markdown file in the Git repository's
+ *   `/messages` directory.
  * @returns The `prismic.dev/msg` URL for the given slug.
  */
 export const devMsg = (slug: string): string => {
-	return `https://prismic.dev/msg/next/v${version}/${slug}`;
-};
+	return `https://prismic.dev/msg/next/v${version}/${slug}`
+}

package/src/lib/resolveDefaultExport.ts

@@ -1,21 +1,17 @@
 /**
- * Resolves a module's default export. The module may provide its default export
- * as a `default` property on an object. This happens when named and default
- * exports are mixed in modules.
+ * Resolves a module's default export. The module may provide its default export as a `default`
+ * property on an object. This happens when named and default exports are mixed in modules.
  *
- * In ES Modules, mixing is fine since the module resolver can distinguish
- * default and named exports. In transpiled modules, however, all exports are
- * put into a single object, and the default export is provided at a property
- * called `default`.
+ * In ES Modules, mixing is fine since the module resolver can distinguish default and named
+ * exports. In transpiled modules, however, all exports are put into a single object, and the
+ * default export is provided at a property called `default`.
  *
- * This helper is needed by Next.js uses CJS files with named and default
- * exports.
+ * This helper is needed by Next.js uses CJS files with named and default exports.
  *
- * This helper _should_ be a temporary hack until Next.js and Node.js resolve
- * their ESM difficulties. This will likely not be removed any time soon,
- * unfortunately.
+ * This helper _should_ be a temporary hack until Next.js and Node.js resolve their ESM
+ * difficulties. This will likely not be removed any time soon, unfortunately.
  */
 export function resolveDefaultExport<T>(mod: T): T {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	return "default" in (mod as any) ? (mod as any).default : mod;
+	return "default" in (mod as any) ? (mod as any).default : mod
 }