@prismicio/next 2.2.3-pr.136.19d76d2 → 2.2.3

package/src/pages/PrismicPreview.tsx

@@ -1,40 +1,41 @@
-import { getToolbarSrc, cookie as prismicCookie } from "@prismicio/client"
-import { useRouter } from "next/router"
-import Script from "next/script"
-import type { FC } from "react"
-import { type ReactNode, useEffect } from "react"
+import { getToolbarSrc, cookie as prismicCookie } from "@prismicio/client";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import type { FC } from "react";
+import { type ReactNode, useEffect } from "react";
 
 /** Props for `<PrismicPreview>`. */
 export type PrismicPreviewProps = {
 	/**
-	 * The name of your Prismic repository. A Prismic Toolbar will be registered using this
-	 * repository.
+	 * The name of your Prismic repository. A Prismic Toolbar will be registered
+	 * using this repository.
 	 */
-	repositoryName: string
+	repositoryName: string;
 
 	/**
-	 * The URL of your app's Prismic preview endpoint (default: `/api/preview`). This URL will be
-	 * fetched on preview update events.
+	 * The URL of your app's Prismic preview endpoint (default: `/api/preview`).
+	 * This URL will be fetched on preview update events.
 	 */
-	updatePreviewURL?: string
+	updatePreviewURL?: string;
 
 	/**
-	 * The URL of your app's exit preview endpoint (default: `/api/exit-preview`). This URL will be
-	 * fetched on preview exit events.
+	 * The URL of your app's exit preview endpoint (default: `/api/exit-preview`).
+	 * This URL will be fetched on preview exit events.
 	 */
-	exitPreviewURL?: string
+	exitPreviewURL?: string;
 
 	/** Children to render adjacent to the Prismic Toolbar. */
-	children?: ReactNode
-}
+	children?: ReactNode;
+};
 
 /**
- * React component that sets up Prismic Previews using the Prismic Toolbar. When the Prismic Toolbar
- * send events to the browser, such as on preview updates and exiting, this component will
- * automatically refresh the page with the changes.
+ * React component that sets up Prismic Previews using the Prismic Toolbar. When
+ * the Prismic Toolbar send events to the browser, such as on preview updates
+ * and exiting, this component will automatically refresh the page with the
+ * changes.
  *
- * This component can be wrapped around your app or added anywhere in your app's tree. It must be
- * rendered on every page.
+ * This component can be wrapped around your app or added anywhere in your app's
+ * tree. It must be rendered on every page.
  */
 export const PrismicPreview: FC<PrismicPreviewProps> = (props) => {
 	const {
@@ -42,21 +43,21 @@ export const PrismicPreview: FC<PrismicPreviewProps> = (props) => {
 		updatePreviewURL = "/api/preview",
 		exitPreviewURL = "/api/exit-preview",
 		children,
-	} = props
+	} = props;
 
-	const router = useRouter()
+	const router = useRouter();
 
-	const toolbarSrc = getToolbarSrc(repositoryName)
+	const toolbarSrc = getToolbarSrc(repositoryName);
 
 	useEffect(() => {
-		const controller = new AbortController()
+		const controller = new AbortController();
 
 		window.addEventListener("prismicPreviewUpdate", onUpdate, {
 			signal: controller.signal,
-		})
+		});
 		window.addEventListener("prismicPreviewEnd", onEnd, {
 			signal: controller.signal,
-		})
+		});
 
 		// Start the preview for preview share links. Previews from
 		// share links do not go to the `updatePreviewURL` like a normal
@@ -65,33 +66,35 @@ export const PrismicPreview: FC<PrismicPreviewProps> = (props) => {
 		// We check that the current URL is a descendant of the base
 		// path to prevent infinite refrehes.
 		if (
-			window.location.href.startsWith(window.location.origin + router.basePath) &&
+			window.location.href.startsWith(
+				window.location.origin + router.basePath,
+			) &&
 			getPreviewCookieRepositoryName() === repositoryName &&
 			!router.isPreview
 		) {
-			start()
+			start();
 		}
 
 		function onEnd(event: Event) {
-			event.preventDefault()
+			event.preventDefault();
 			fetch(router.basePath + 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
+						return;
 					}
 
-					refresh()
+					refresh();
 				})
-				.catch(() => {})
+				.catch(() => {});
 		}
 
 		function onUpdate(event: Event) {
-			event.preventDefault()
-			start()
+			event.preventDefault();
+			start();
 		}
 
 		function start() {
@@ -107,36 +110,37 @@ export const PrismicPreview: FC<PrismicPreviewProps> = (props) => {
 					if (res.type !== "opaqueredirect") {
 						console.error(
 							`[<PrismicPreview>] Failed to start or update the preview using "${updatePreviewURL}". Does it exist?`,
-						)
+						);
 
-						return
+						return;
 					}
 
-					refresh()
+					refresh();
 				})
-				.catch(() => {})
+				.catch(() => {});
 		}
 
 		function refresh() {
-			router.replace(router.asPath, undefined, { scroll: false })
+			router.replace(router.asPath, undefined, { scroll: false });
 		}
 
-		return () => controller.abort()
-	}, [exitPreviewURL, updatePreviewURL, repositoryName, router])
+		return () => controller.abort();
+	}, [exitPreviewURL, updatePreviewURL, repositoryName, router]);
 
 	return (
 		<>
 			{children}
 			<Script src={toolbarSrc} strategy="lazyOnload" />
 		</>
-	)
-}
+	);
+};
 
 function getPreviewCookieRepositoryName() {
 	const cookie = window.document.cookie
 		.split("; ")
 		.find((row) => row.startsWith(`${prismicCookie.preview}=`))
-		?.split("=")[1]
+		?.split("=")[1];
 
-	return (decodeURIComponent(cookie ?? "").match(/"([^"]+)\.prismic\.io"/) || [])[1]
+	return (decodeURIComponent(cookie ?? "").match(/"([^"]+)\.prismic\.io"/) ||
+		[])[1];
 }

package/src/pages/SliceSimulator.tsx

@@ -1,47 +1,49 @@
+import { SliceSimulatorWrapper } from "../SliceSimulatorWrapper";
 import {
 	SimulatorManager,
 	StateEventType,
 	getDefaultMessage,
 	getDefaultSlices,
-} from "@prismicio/simulator/kit"
+} from "@prismicio/simulator/kit";
 import type {
 	SliceSimulatorProps as BaseSliceSimulatorProps,
 	SliceSimulatorState,
-} from "@prismicio/simulator/kit"
-import { useEffect, useState } from "react"
-import type { ComponentType, FC } from "react"
+} from "@prismicio/simulator/kit";
+import { useEffect, useState } from "react";
+import type { ComponentType, FC } from "react";
 
-import { SliceSimulatorWrapper } from "../SliceSimulatorWrapper"
-
-const simulatorManager = new SimulatorManager()
+const simulatorManager = new SimulatorManager();
 
 export type SliceSimulatorSliceZoneProps = {
-	slices: SliceSimulatorState["slices"]
-}
+	slices: SliceSimulatorState["slices"];
+};
 
 export type SliceSimulatorProps = BaseSliceSimulatorProps & {
 	/**
 	 * React component to render simulated Slices.
 	 *
 	 * @example
-	 * 	```tsx
-	 * 	import { SliceSimulator } from "@slicemachine/adapter-next/simulator"
-	 * 	import { SliceZone } from "@prismicio/react"
 	 *
-	 * 	import { components } from "../slices"
+	 * ```tsx
+	 * import { SliceSimulator } from "@slicemachine/adapter-next/simulator";
+	 * import { SliceZone } from "@prismicio/react";
+	 *
+	 * import { components } from "../slices";
 	 *
-	 * 	;<SliceSimulator
-	 * 		sliceZone={({ slices }) => <SliceZone slices={slices} components={components} />}
-	 * 	/>
-	 * 	```
+	 * <SliceSimulator
+	 * 	sliceZone={({ slices }) => (
+	 * 		<SliceZone slices={slices} components={components} />
+	 * 	)}
+	 * />;
+	 * ```
 	 */
-	sliceZone: ComponentType<SliceSimulatorSliceZoneProps>
-	className?: string
-}
+	sliceZone: ComponentType<SliceSimulatorSliceZoneProps>;
+	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> = ({
 	background,
@@ -49,33 +51,33 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
 	className,
 	sliceZone: SliceZoneComp,
 }) => {
-	const [slices, setSlices] = useState(() => getDefaultSlices())
-	const [message, setMessage] = useState(() => getDefaultMessage())
+	const [slices, setSlices] = useState(() => getDefaultSlices());
+	const [message, setMessage] = useState(() => getDefaultMessage());
 
 	useEffect(() => {
 		simulatorManager.state.on(
 			StateEventType.Slices,
 			(_slices) => {
-				setSlices(_slices)
+				setSlices(_slices);
 			},
 			"simulator-slices",
-		)
+		);
 		simulatorManager.state.on(
 			StateEventType.Message,
 			(_message) => {
-				setMessage(_message)
+				setMessage(_message);
 			},
 			"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")
-		}
-	}, [])
+			simulatorManager.state.off(StateEventType.Message, "simulator-message");
+		};
+	}, []);
 
 	return (
 		<SliceSimulatorWrapper
@@ -87,5 +89,5 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
 		>
 			<SliceZoneComp slices={slices} />
 		</SliceSimulatorWrapper>
-	)
-}
+	);
+};

package/src/pages/enableAutoPreviews.ts

@@ -1,7 +1,7 @@
-import type { Client } from "@prismicio/client"
-import type { PreviewData } from "next"
+import type { PreviewData } from "next";
+import type { Client } from "@prismicio/client";
 
-import type { NextApiRequestLike } from "./types"
+import type { NextApiRequestLike } from "./types";
 
 /**
  * Configuration for `enableAutoPreviews`.
@@ -13,26 +13,26 @@ 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">;
 
 	/**
-	 * The `previewData` object provided in the `getStaticProps()` or `getServerSideProps()` context
-	 * object.
+	 * The `previewData` object provided in the `getStaticProps()` or
+	 * `getServerSideProps()` context object.
 	 */
-	previewData?: PreviewData
+	previewData?: PreviewData;
 
 	/**
 	 * The `req` object from a Next.js API route.
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
 	 */
-	req?: NextApiRequestLike
-}
+	req?: NextApiRequestLike;
+};
 
 /**
- * Configures a Prismic client to automatically query draft content during a preview session. It
- * either takes in a Next.js `getStaticProps` context object or a Next.js API endpoint request
- * object.
+ * Configures a Prismic client to automatically query draft content during a
+ * preview session. It either takes in a Next.js `getStaticProps` context object
+ * or a Next.js API endpoint request object.
  *
  * @param config - Configuration for the function.
  */
@@ -42,21 +42,21 @@ export function enableAutoPreviews(config: EnableAutoPreviewsConfig): void {
 		// `getServerSideProps()` with active Preview Mode.
 
 		if (isPrismicPreviewData(config.previewData)) {
-			config.client.queryContentFromRef(config.previewData.ref)
+			config.client.queryContentFromRef(config.previewData.ref);
 		}
 
-		return
+		return;
 	}
 
 	if ("req" in config && config.req) {
 		// Assume we are in an API Route.
 
-		config.client.enableAutoPreviewsFromReq(config.req)
+		config.client.enableAutoPreviewsFromReq(config.req);
 
-		return
+		return;
 	}
 }
 
 function isPrismicPreviewData(input: unknown): input is { ref: string } {
-	return typeof input === "object" && input !== null && "ref" in input
+	return typeof input === "object" && input !== null && "ref" in input;
 }

package/src/pages/exitPreview.ts

@@ -1,4 +1,4 @@
-import type { NextApiRequestLike, NextApiResponseLike } from "./types"
+import type { NextApiRequestLike, NextApiResponseLike } from "./types";
 
 /** Configuration for `exitPreview()`. */
 export type ExitPreviewAPIRouteConfig = {
@@ -7,38 +7,39 @@ export type ExitPreviewAPIRouteConfig = {
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
 	 */
-	req?: NextApiRequestLike
+	req?: NextApiRequestLike;
 
 	/**
 	 * The `res` object from a Next.js API route.
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
 	 */
-	res: NextApiResponseLike
-}
+	res: NextApiResponseLike;
+};
 
 /**
- * Ends a Prismic preview session within a Next.js app. This function should be used in an API
- * route.
+ * Ends a Prismic preview session within a Next.js app. This function should be
+ * used in an API route.
  *
  * @example
- * 	```typescript
- * 	// src/pages/api/exit-preview.js
  *
- * 	import { exitPreview } from "@prismicio/next"
+ * ```typescript
+ * // src/pages/api/exit-preview.js
+ *
+ * import { exitPreview } from "@prismicio/next";
  *
- * 	export default function handler(_req, res) {
- * 		return exitPreview({ res })
- * 	}
- * 	```
+ * export default function handler(_req, res) {
+ * 	return exitPreview({ res });
+ * }
+ * ```
  */
 export function exitPreview(config: ExitPreviewAPIRouteConfig): void {
-	config.res.clearPreviewData()
+	config.res.clearPreviewData();
 
 	// `Cache-Control` header is used to prevent CDN-level caching.
-	config.res.setHeader("Cache-Control", "no-store")
+	config.res.setHeader("Cache-Control", "no-store");
 
-	config.res.json({ success: true })
+	config.res.json({ success: true });
 
-	return
+	return;
 }

package/src/pages/index.ts

@@ -1,30 +1,33 @@
-export { PrismicNextLink } from "../PrismicNextLink"
-export { type PrismicNextLinkProps } from "../PrismicNextLink"
+export { PrismicNextLink } from "../PrismicNextLink";
+export { type PrismicNextLinkProps } from "../PrismicNextLink";
 
-export { PrismicNextImage } from "../PrismicNextImage"
-export { type PrismicNextImageProps } from "../PrismicNextImage"
+export { PrismicNextImage } from "../PrismicNextImage";
+export { type PrismicNextImageProps } from "../PrismicNextImage";
 
-export { SliceSimulator } from "./SliceSimulator"
-export type { SliceSimulatorProps, SliceSimulatorSliceZoneProps } from "./SliceSimulator"
+export { SliceSimulator } from "./SliceSimulator";
+export type {
+	SliceSimulatorProps,
+	SliceSimulatorSliceZoneProps,
+} from "./SliceSimulator";
 
-export { imgixLoader } from "../imgixLoader"
+export { imgixLoader } from "../imgixLoader";
 
-export { PrismicPreview } from "./PrismicPreview"
-export type { PrismicPreviewProps } from "./PrismicPreview"
+export { PrismicPreview } from "./PrismicPreview";
+export type { PrismicPreviewProps } from "./PrismicPreview";
 
-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 { redirectToPreviewURL } from "./redirectToPreviewURL";
+export type { RedirectToPreviewURLConfig } from "./redirectToPreviewURL";
 
-export { exitPreview } from "./exitPreview"
-export type { ExitPreviewAPIRouteConfig } from "./exitPreview"
+export { exitPreview } from "./exitPreview";
+export type { ExitPreviewAPIRouteConfig } from "./exitPreview";
 
-export { setPreviewData } from "./setPreviewData"
-export type { SetPreviewDataConfig } from "./setPreviewData"
+export { setPreviewData } from "./setPreviewData";
+export type { SetPreviewDataConfig } from "./setPreviewData";
 
-export type { CreateClientConfig } from "./types"
+export type { CreateClientConfig } from "./types";
 
-export { createLocaleRedirect } from "../createLocaleRedirect"
-export type { CreateLocaleRedirectConfig } from "../createLocaleRedirect"
+export { createLocaleRedirect } from "../createLocaleRedirect";
+export type { CreateLocaleRedirectConfig } from "../createLocaleRedirect";

package/src/pages/redirectToPreviewURL.ts

@@ -1,66 +1,77 @@
-import type { LinkResolverFunction, Client } from "@prismicio/client"
+import type { LinkResolverFunction, Client } from "@prismicio/client";
 
-import type { NextApiRequestLike, NextApiResponseLike } from "./types"
+import type { NextApiRequestLike, NextApiResponseLike } from "./types";
 
 export type RedirectToPreviewURLConfig = {
 	/** The Prismic client configured for the preview session's repository. */
 	// `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, "resolvePreviewURL">
+	client: Pick<Client, "resolvePreviewURL">;
 
 	/**
 	 * The `req` object from a Next.js API route.
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/pages/building-your-application/routing/api-routes\>
 	 */
-	req: NextApiRequestLike
+	req: NextApiRequestLike;
 
 	/**
 	 * The `res` object from a Next.js API route.
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/pages/building-your-application/routing/api-routes\>
 	 */
-	res: NextApiResponseLike
+	res: NextApiResponseLike;
 
 	/**
 	 * A Link Resolver used to resolve the previewed document's URL.
 	 *
 	 * @see To learn more about Link Resolver: {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
 	 */
-	linkResolver?: LinkResolverFunction
+	linkResolver?: LinkResolverFunction;
 
 	/**
-	 * The default redirect URL if a URL cannot be determined for the previewed document.
+	 * The default redirect URL if a URL cannot be determined for the previewed
+	 * document.
 	 *
-	 * **Note**: If you `next.config.js` file contains a `basePath`, the `defaultURL` option must
-	 * _not_ include it. Instead, provide the `basePath` property using the `basePath` option.
+	 * **Note**: If you `next.config.js` file contains a `basePath`, the
+	 * `defaultURL` option must _not_ include it. Instead, provide the `basePath`
+	 * property using the `basePath` option.
 	 */
-	defaultURL?: string
+	defaultURL?: string;
 
 	/**
-	 * The `basePath` for the Next.js app as it is defined in `next.config.js`. This option can be
-	 * omitted if the app does not have a `basePath`.
+	 * The `basePath` for the Next.js app as it is defined in `next.config.js`.
+	 * This option can be omitted if the app does not have a `basePath`.
 	 *
 	 * @remarks
-	 *   The Router Handler or API route is unable to detect the app's `basePath` automatically. It
-	 *   must be provided to `redirectToPreviewURL()` manually.
+	 * The Router Handler or API route is unable to detect the app's `basePath`
+	 * automatically. It must be provided to `redirectToPreviewURL()` manually.
 	 */
-	basePath?: string
-}
+	basePath?: string;
+};
 
-export async function redirectToPreviewURL(config: RedirectToPreviewURLConfig): Promise<void> {
-	const { client, req, res, linkResolver, defaultURL = "/", basePath = "" } = config
+export async function redirectToPreviewURL(
+	config: RedirectToPreviewURLConfig,
+): Promise<void> {
+	const {
+		client,
+		req,
+		res,
+		linkResolver,
+		defaultURL = "/",
+		basePath = "",
+	} = config;
 
-	const previewToken = req.query.token?.toString()
+	const previewToken = req.query.token?.toString();
 
 	const previewURL = await client.resolvePreviewURL({
 		linkResolver,
 		defaultURL,
 		previewToken,
-	})
+	});
 
-	res.redirect(basePath + previewURL)
+	res.redirect(basePath + previewURL);
 
-	return
+	return;
 }

package/src/pages/setPreviewData.ts

@@ -1,6 +1,6 @@
-import { cookie } from "@prismicio/client"
+import { cookie } from "@prismicio/client";
 
-import type { NextApiRequestLike, NextApiResponseLike } from "./types"
+import type { NextApiRequestLike, NextApiResponseLike } from "./types";
 
 /** Configuration for `setPreviewData`. */
 export type SetPreviewDataConfig = {
@@ -9,21 +9,21 @@ export type SetPreviewDataConfig = {
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
 	 */
-	req: NextApiRequestLike
+	req: NextApiRequestLike;
 
 	/**
 	 * The `res` object from a Next.js API route.
 	 *
 	 * @see Next.js API route docs: \<https://nextjs.org/docs/api-routes/introduction\>
 	 */
-	res: NextApiResponseLike
-}
+	res: NextApiResponseLike;
+};
 
 /** Set Prismic preview data for Next.js's Preview Mode. */
 export function setPreviewData({ req, res }: SetPreviewDataConfig): void {
-	const ref = req.query.token || req.cookies[cookie.preview]
+	const ref = req.query.token || req.cookies[cookie.preview];
 
 	if (ref) {
-		res.setPreviewData({ ref })
+		res.setPreviewData({ ref });
 	}
 }