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

package/src/PrismicNextImage.tsx

@@ -1,164 +1,185 @@
-"use client"
-
-import type { ImageFieldImage } from "@prismicio/client"
-import { isFilled } from "@prismicio/client"
-import type { ImgixURLParams } from "imgix-url-builder"
-import { buildURL } from "imgix-url-builder"
-import type { ImageProps } from "next/image"
-import Image from "next/image"
-import type { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from "react"
-import { forwardRef } from "react"
-
-import { imgixLoader } from "./imgixLoader"
-import { devMsg } from "./lib/devMsg"
-import { resolveDefaultExport } from "./lib/resolveDefaultExport"
+"use client";
+
+import type {
+	ForwardRefExoticComponent,
+	PropsWithoutRef,
+	RefAttributes} from "react";
+import {
+	forwardRef
+} from "react";
+import type { ImageProps } from "next/image";
+import Image from "next/image";
+import type { ImgixURLParams } from "imgix-url-builder";
+import { buildURL } from "imgix-url-builder";
+import type { ImageFieldImage} from "@prismicio/client";
+import { isFilled } from "@prismicio/client";
+
+import { devMsg } from "./lib/devMsg";
+import { resolveDefaultExport } from "./lib/resolveDefaultExport";
+
+import { imgixLoader } from "./imgixLoader";
 
 const castInt = (input: string | number | undefined): number | undefined => {
 	if (typeof input === "number" || typeof input === "undefined") {
-		return input
+		return input;
 	} else {
-		const parsed = Number.parseInt(input)
+		const parsed = Number.parseInt(input);
 
 		if (Number.isNaN(parsed)) {
-			return undefined
+			return undefined;
 		} else {
-			return parsed
+			return parsed;
 		}
 	}
-}
+};
 
-export type PrismicNextImageProps = Omit<ImageProps, "src" | "alt" | "loader"> & {
+export type PrismicNextImageProps = Omit<
+	ImageProps,
+	"src" | "alt" | "loader"
+> & {
 	/** The Prismic Image field or thumbnail to render. */
-	field: ImageFieldImage | null | undefined
+	field: ImageFieldImage | null | undefined;
 
 	/**
 	 * An object of Imgix URL API parameters to transform the image.
 	 *
 	 * @see https://docs.imgix.com/apis/rendering
 	 */
-	imgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null }
+	imgixParams?: { [P in keyof ImgixURLParams]: ImgixURLParams[P] | null };
 
 	/**
 	 * Declare an image as decorative by providing `alt=""`.
 	 *
-	 * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
 	 */
-	alt?: ""
+	alt?: "";
 
 	/**
-	 * Declare an image as decorative only if the Image field does not have alternative text by
-	 * providing `fallbackAlt=""`.
+	 * Declare an image as decorative only if the Image field does not have
+	 * alternative text by providing `fallbackAlt=""`.
 	 *
-	 * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+	 * See:
+	 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
 	 */
-	fallbackAlt?: ""
+	fallbackAlt?: "";
 
-	/** Rendered when the field is empty. If a fallback is not given, `null` will be rendered. */
-	fallback?: React.ReactNode
+	/**
+	 * Rendered when the field is empty. If a fallback is not given, `null` will
+	 * be rendered.
+	 */
+	fallback?: React.ReactNode;
 
-	loader?: ImageProps["loader"] | null
-}
+	loader?: ImageProps["loader"] | null;
+};
 
 /**
- * React component that renders an image from a Prismic Image field or one of its thumbnails using
- * `next/image`. It will automatically set the `alt` attribute using the Image field's `alt`
- * property.
+ * React component that renders an image from a Prismic Image field or one of
+ * its thumbnails using `next/image`. It will automatically set the `alt`
+ * attribute using the Image field's `alt` property.
  *
- * It uses an Imgix URL-based loader by default. A custom loader can be provided with the `loader`
- * prop. If you would like to use the Next.js Image Optimization API instead, set
- * `loader={undefined}`.
+ * It uses an Imgix URL-based loader by default. A custom loader can be provided
+ * with the `loader` prop. If you would like to use the Next.js Image
+ * Optimization API instead, set `loader={undefined}`.
  *
  * @param props - Props for the component.
+ *
  * @returns A responsive image component using `next/image` for the given Image
- * field.
+ *   field.
+ *
  * @see To learn more about `next/image`, see: https://nextjs.org/docs/api-reference/next/image
  */
 // The type annotation is necessary to avoid a type reference issue.
 export const PrismicNextImage: ForwardRefExoticComponent<
 	PropsWithoutRef<PrismicNextImageProps> & RefAttributes<HTMLImageElement>
-> = forwardRef<HTMLImageElement, PrismicNextImageProps>(function PrismicNextImage(
-	{
-		field,
-		imgixParams = {},
-		alt,
-		fallbackAlt,
-		fill,
-		width,
-		height,
-		fallback = null,
-		loader = imgixLoader,
-		...restProps
-	},
-	ref,
-) {
-	if (process.env.NODE_ENV === "development") {
-		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(
-					"alt-must-be-an-empty-string",
-				)}`,
-			)
+> = forwardRef<HTMLImageElement, PrismicNextImageProps>(
+	function PrismicNextImage(
+		{
+			field,
+			imgixParams = {},
+			alt,
+			fallbackAlt,
+			fill,
+			width,
+			height,
+			fallback = null,
+			loader = imgixLoader,
+			...restProps
+		},
+		ref,
+	) {
+		if (process.env.NODE_ENV === "development") {
+			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(
+						"alt-must-be-an-empty-string",
+					)}`,
+				);
+			}
+
+			if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
+				console.warn(
+					`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg(
+						"alt-must-be-an-empty-string",
+					)}`,
+				);
+			}
 		}
 
-		if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
-			console.warn(
-				`[PrismicNextImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg(
-					"alt-must-be-an-empty-string",
-				)}`,
-			)
+		if (!isFilled.imageThumbnail(field)) {
+			return <>{fallback}</>;
 		}
-	}
 
-	if (!isFilled.imageThumbnail(field)) {
-		return <>{fallback}</>
-	}
-
-	const resolvedImgixParams = imgixParams
-	for (const x in imgixParams) {
-		if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
-			resolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined
+		const resolvedImgixParams = imgixParams;
+		for (const x in imgixParams) {
+			if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
+				resolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;
+			}
 		}
-	}
 
-	const src = buildURL(field.url, imgixParams as ImgixURLParams)
+		const src = buildURL(field.url, imgixParams as ImgixURLParams);
 
-	const ar = field.dimensions.width / field.dimensions.height
+		const ar = field.dimensions.width / field.dimensions.height;
 
-	const castedWidth = castInt(width)
-	const castedHeight = castInt(height)
+		const castedWidth = castInt(width);
+		const castedHeight = castInt(height);
 
-	let resolvedWidth = castedWidth ?? field.dimensions.width
-	let resolvedHeight = castedHeight ?? field.dimensions.height
-
-	if (castedWidth != null && castedHeight == null) {
-		resolvedHeight = castedWidth / ar
-	} else if (castedWidth == null && castedHeight != null) {
-		resolvedWidth = castedHeight * ar
-	}
+		let resolvedWidth = castedWidth ?? field.dimensions.width;
+		let resolvedHeight = castedHeight ?? field.dimensions.height;
 
-	// A non-null assertion is required since we can't statically
-	// know if an alt attribute is available.
-	const resolvedAlt = (alt ?? (field.alt || fallbackAlt))!
+		if (castedWidth != null && castedHeight == null) {
+			resolvedHeight = castedWidth / ar;
+		} else if (castedWidth == null && castedHeight != null) {
+			resolvedWidth = castedHeight * ar;
+		}
 
-	if (process.env.NODE_ENV === "development" && 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,
-		)
-	}
+		// A non-null assertion is required since we can't statically
+		// know if an alt attribute is available.
+		const resolvedAlt = (alt ?? (field.alt || fallbackAlt))!;
+
+		if (
+			process.env.NODE_ENV === "development" &&
+			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,
+			);
+		}
 
-	const ResolvedImage = resolveDefaultExport(Image)
-
-	return (
-		<ResolvedImage
-			ref={ref}
-			src={src}
-			width={fill ? undefined : resolvedWidth}
-			height={fill ? undefined : resolvedHeight}
-			alt={resolvedAlt}
-			fill={fill}
-			loader={loader === null ? undefined : loader}
-			{...restProps}
-		/>
-	)
-})
+		const ResolvedImage = resolveDefaultExport(Image);
+
+		return (
+			<ResolvedImage
+				ref={ref}
+				src={src}
+				width={fill ? undefined : resolvedWidth}
+				height={fill ? undefined : resolvedHeight}
+				alt={resolvedAlt}
+				fill={fill}
+				loader={loader === null ? undefined : loader}
+				{...restProps}
+			/>
+		);
+	},
+);

package/src/PrismicNextLink.tsx

@@ -1,65 +1,67 @@
+import type { ComponentProps} from "react";
+import { forwardRef } from "react";
+import Link from "next/link";
 import type {
 	AsLinkAttrsConfig,
 	LinkField,
 	LinkResolverFunction,
-	PrismicDocument,
-} from "@prismicio/client"
-import { asLinkAttrs } from "@prismicio/client"
-import Link from "next/link"
-import type { ComponentProps } from "react"
-import { forwardRef } from "react"
+	PrismicDocument} from "@prismicio/client";
+import {
+	asLinkAttrs,
+} from "@prismicio/client";
 
-import { resolveDefaultExport } from "./lib/resolveDefaultExport"
+import { resolveDefaultExport } from "./lib/resolveDefaultExport";
 
 export type PrismicNextLinkProps = Omit<
 	ComponentProps<typeof Link>,
 	"field" | "document" | "href" | "rel"
 > & {
-	linkResolver?: LinkResolverFunction
-	rel?: string | AsLinkAttrsConfig["rel"]
+	linkResolver?: LinkResolverFunction;
+	rel?: string | AsLinkAttrsConfig["rel"];
 } & (
 		| {
-				field: LinkField | null | undefined
-				document?: never
-				href?: never
+				field: LinkField | null | undefined;
+				document?: never;
+				href?: never;
 		  }
 		| {
-				field?: never
-				document: PrismicDocument | null | undefined
-				href?: never
+				field?: never;
+				document: PrismicDocument | null | undefined;
+				href?: never;
 		  }
 		| {
-				field?: never
-				document?: never
-				href: ComponentProps<typeof Link>["href"]
+				field?: never;
+				document?: never;
+				href: ComponentProps<typeof Link>["href"];
 		  }
-	)
+	);
 
-export const PrismicNextLink = forwardRef<HTMLAnchorElement, PrismicNextLinkProps>(
-	function PrismicNextLink(props, ref) {
-		const { field, document, linkResolver, children, ...restProps } = props
-		const {
-			href: computedHref,
-			rel: computedRel,
-			...attrs
-		} = asLinkAttrs(field ?? document, {
-			linkResolver,
-			rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
-		})
+export const PrismicNextLink = forwardRef<
+	HTMLAnchorElement,
+	PrismicNextLinkProps
+>(function PrismicNextLink(props, ref) {
+	const { field, document, linkResolver, children, ...restProps } = props;
+	const {
+		href: computedHref,
+		rel: computedRel,
+		...attrs
+	} = asLinkAttrs(field ?? document, {
+		linkResolver,
+		rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
+	});
 
-		const href = ("href" in restProps ? restProps.href : computedHref) || ""
+	const href = ("href" in restProps ? restProps.href : computedHref) || "";
 
-		let rel = computedRel
-		if ("rel" in restProps && typeof restProps.rel !== "function") {
-			rel = restProps.rel
-		}
+	let rel = computedRel;
+	if ("rel" in restProps && typeof restProps.rel !== "function") {
+		rel = restProps.rel;
+	}
 
-		const ResolvedLink = resolveDefaultExport(Link)
+	const ResolvedLink = resolveDefaultExport(Link);
 
-		return (
-			<ResolvedLink ref={ref} {...attrs} {...restProps} href={href} rel={rel}>
-				{"children" in props ? children : field?.text}
-			</ResolvedLink>
-		)
-	},
-)
+	return (
+		<ResolvedLink ref={ref} {...attrs} {...restProps} href={href} rel={rel}>
+			{"children" in props ? children : field?.text}
+		</ResolvedLink>
+	);
+});

package/src/PrismicPreview.tsx

@@ -1,54 +1,55 @@
-import { getToolbarSrc } from "@prismicio/client"
-import Script from "next/script"
-import type { FC, ReactNode } from "react"
+import type { FC, ReactNode } from "react";
+import Script from "next/script";
+import { getToolbarSrc } from "@prismicio/client";
 
-import { resolveDefaultExport } from "./lib/resolveDefaultExport"
-import { PrismicPreviewClient } from "./PrismicPreviewClient"
+import { resolveDefaultExport } from "./lib/resolveDefaultExport";
+import { PrismicPreviewClient } from "./PrismicPreviewClient";
 
 /** 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> = async (props) => {
-	const { repositoryName, children, ...otherProps } = props
+	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")
+	const { draftMode } = await import("next/headers");
 
-	const toolbarSrc = getToolbarSrc(repositoryName)
-	const isDraftMode = (await draftMode()).isEnabled
+	const toolbarSrc = getToolbarSrc(repositoryName);
+	const isDraftMode = (await draftMode()).isEnabled;
 
-	const ResolvedScript = resolveDefaultExport(Script)
+	const ResolvedScript = resolveDefaultExport(Script);
 
 	return (
 		<>
@@ -60,5 +61,5 @@ export const PrismicPreview: FC<PrismicPreviewProps> = async (props) => {
 			/>
 			<ResolvedScript src={toolbarSrc} strategy="lazyOnload" />
 		</>
-	)
-}
+	);
+};

package/src/PrismicPreviewClient.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import { cookie as prismicCookie } from "@prismicio/client"
-import { useRouter } from "next/navigation"
-import type { FC } from "react"
-import { useEffect } from "react"
+import { cookie as prismicCookie } from "@prismicio/client";
+import { useRouter } from "next/navigation";
+import type { FC } from "react";
+import { useEffect } from "react";
 
 type PrismicPreviewClientProps = {
-	repositoryName: string
-	isDraftMode: boolean
-	updatePreviewURL?: string
-	exitPreviewURL?: string
-}
+	repositoryName: string;
+	isDraftMode: boolean;
+	updatePreviewURL?: string;
+	exitPreviewURL?: string;
+};
 
 export const PrismicPreviewClient: FC<PrismicPreviewClientProps> = (props) => {
 	const {
@@ -18,25 +18,25 @@ export const PrismicPreviewClient: FC<PrismicPreviewClientProps> = (props) => {
 		isDraftMode,
 		updatePreviewURL = "/api/preview",
 		exitPreviewURL = "/api/exit-preview",
-	} = props
+	} = props;
 
-	const { refresh } = useRouter()
+	const { refresh } = useRouter();
 
 	useEffect(() => {
-		const controller = new AbortController()
+		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 cookie = getPrismicPreviewCookie(window.document.cookie);
 		const cookieRepositoryName = cookie
 			? (decodeURIComponent(cookie).match(/"([^"]+)\.prismic\.io"/) || [])[1]
-			: undefined
-		const hasCookieForRepository = cookieRepositoryName === repositoryName
+			: 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
@@ -55,73 +55,75 @@ export const PrismicPreviewClient: FC<PrismicPreviewClientProps> = (props) => {
 					if (res.type !== "opaqueredirect") {
 						console.error(
 							`[<PrismicPreview>] Failed to start the preview using "${updatePreviewURL}". Does it exist?`,
-						)
+						);
 
-						return
+						return;
 					}
 
-					refresh()
+					refresh();
 				})
 				.catch(() => {
 					// noop
-				})
+				});
 		}
 
 		function onUpdate(event: Event) {
-			event.preventDefault()
-			refresh()
+			event.preventDefault();
+			refresh();
 		}
 
 		function onEnd(event: Event) {
-			event.preventDefault()
+			event.preventDefault();
 			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
+						return;
 					}
 
-					refresh()
+					refresh();
 				})
 				.catch(() => {
 					// noop
-				})
+				});
 		}
 
-		return () => controller.abort()
-	}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh])
+		return () => controller.abort();
+	}, [repositoryName, isDraftMode, updatePreviewURL, exitPreviewURL, refresh]);
 
-	return null
-}
+	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.
+ * @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, ";")
+		return value.replace(/%3B/g, ";");
 	}
 
-	const cookies = cookieJar.split("; ")
+	const cookies = cookieJar.split("; ");
 
-	let value: string | undefined
+	let value: string | undefined;
 
 	for (const cookie of cookies) {
-		const parts = cookie.split("=")
-		const name = readValue(parts[0]).replace(/%3D/g, "=")
+		const parts = cookie.split("=");
+		const name = readValue(parts[0]).replace(/%3D/g, "=");
 
 		if (name === prismicCookie.preview) {
-			value = readValue(parts.slice(1).join("="))
-			continue
+			value = readValue(parts.slice(1).join("="));
+			continue;
 		}
 	}
 
-	return value
+	return value;
 }