@prismicio/next 2.2.3 → 2.2.4

package/package.json

@@ -1,22 +1,32 @@
 {
 	"name": "@prismicio/next",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"description": "Helpers to integrate Prismic into Next.js apps",
 	"keywords": [
-		"typescript",
-		"prismic",
 		"next",
-		"vercel",
-		"preview"
+		"preview",
+		"prismic",
+		"typescript",
+		"vercel"
 	],
+	"license": "Apache-2.0",
+	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/prismicio/prismic-next.git"
 	},
-	"license": "Apache-2.0",
-	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
-	"sideEffects": false,
+	"workspaces": [
+		".",
+		"e2e-projects/*"
+	],
+	"files": [
+		"dist",
+		"src"
+	],
 	"type": "module",
+	"sideEffects": false,
+	"main": "./dist/index.cjs",
+	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
@@ -28,45 +38,36 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"main": "./dist/index.cjs",
-	"types": "./dist/index.d.ts",
-	"files": [
-		"dist",
-		"src"
-	],
-	"workspaces": [
-		".",
-		"e2e-projects/*"
-	],
+	"publishConfig": {
+		"access": "public"
+	},
 	"scripts": {
 		"build": "tsdown",
 		"dev": "tsdown --watch",
 		"e2e": "playwright test",
 		"e2e:ui": "npm run e2e -- --ui",
-		"format": "prettier --write .",
+		"format": "oxfmt",
 		"lint": "oxlint --deny-warnings",
 		"prepare": "npm run build",
 		"test": "npm run lint && npm run types && npm run build && npm run e2e",
 		"types": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@prismicio/simulator": "^0.2.0",
+		"@prismicio/simulator": "^0.2.2",
 		"imgix-url-builder": "^0.0.6",
 		"lz-string": "^1.5.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.58.2",
-		"@prismicio/client": "^7.12.0",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
-		"@types/node": "^25.5.0",
+		"@playwright/test": "^1.59.1",
+		"@prismicio/client": "^7.21.8",
+		"@types/node": "^25.5.2",
 		"@types/react": "^19.2.14",
-		"next": "16.2.1",
-		"oxlint": "^1.58.0",
-		"playwright": "^1.58.2",
-		"prettier": "^3.8.1",
-		"prettier-plugin-jsdoc": "^1.8.0",
-		"react": "^19.2.4",
-		"react-dom": "^19.2.4",
+		"next": "16.2.3",
+		"oxfmt": "^0.44.0",
+		"oxlint": "^1.59.0",
+		"playwright": "^1.59.1",
+		"react": "^19.2.5",
+		"react-dom": "^19.2.5",
 		"tsdown": "^0.21.7",
 		"typescript": "^6.0.2"
 	},
@@ -77,8 +78,5 @@
 	},
 	"engines": {
 		"node": ">=20"
-	},
-	"publishConfig": {
-		"access": "public"
 	}
 }

package/src/PrismicNextImage.tsx

@@ -1,185 +1,164 @@
-"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";
+"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"
 
 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",
-					)}`,
-				);
-			}
-
-			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",
-					)}`,
-				);
-			}
+> = 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 (!isFilled.imageThumbnail(field)) {
-			return <>{fallback}</>;
+		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",
+				)}`,
+			)
 		}
+	}
 
-		const resolvedImgixParams = imgixParams;
-		for (const x in imgixParams) {
-			if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
-				resolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined;
-			}
+	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 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;
+	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;
-		}
+	if (castedWidth != null && castedHeight == null) {
+		resolvedHeight = castedWidth / ar
+	} else if (castedWidth == null && castedHeight != null) {
+		resolvedWidth = castedHeight * ar
+	}
 
-		// 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,
-			);
-		}
+	// A non-null assertion is required since we can't statically
+	// know if an alt attribute is available.
+	const resolvedAlt = (alt ?? (field.alt || fallbackAlt))!
 
-		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}
-			/>
-		);
-	},
-);
+	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}
+		/>
+	)
+})

package/src/PrismicNextLink.tsx

@@ -1,67 +1,65 @@
-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";
+	PrismicDocument,
+} from "@prismicio/client"
+import { asLinkAttrs } from "@prismicio/client"
+import Link from "next/link"
+import type { ComponentProps } from "react"
+import { forwardRef } from "react"
 
-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,55 +1,54 @@
-import type { FC, ReactNode } from "react";
-import Script from "next/script";
-import { getToolbarSrc } from "@prismicio/client";
+import { getToolbarSrc } from "@prismicio/client"
+import Script from "next/script"
+import type { FC, ReactNode } from "react"
 
-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 (
 		<>
@@ -61,5 +60,5 @@ export const PrismicPreview: FC<PrismicPreviewProps> = async (props) => {
 			/>
 			<ResolvedScript src={toolbarSrc} strategy="lazyOnload" />
 		</>
-	);
-};
+	)
+}