@prismicio/react 3.4.0 → 3.4.1-canary.56c63d1

package/dist/lib/devMsg.js

@@ -1,25 +1,22 @@
 import { version } from "../package.js";
-
 //#region src/lib/devMsg.ts
 /**
 * Returns a `prismic.dev/msg` URL for a given message slug.
 *
 * @example
+* 	;```ts
+* 	devMsg("missing-param");
+* 	// => "https://prismic.dev/msg/react/v1.2.3/missing-param"
+* 	```
 *
-* ```ts
-* devMsg("missing-param");
-* // => "https://prismic.dev/msg/react/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.
 */
 function devMsg(slug) {
 	return `https://prismic.dev/msg/react/v${version}/${slug}`;
 }
-
 //#endregion
 export { devMsg };
+
 //# sourceMappingURL=devMsg.js.map

package/dist/lib/devMsg.js.map

@@ -1 +1 @@
-{"version":3,"file":"devMsg.js","names":[],"sources":["../../src/lib/devMsg.ts"],"sourcesContent":["import { version } from \"../../package.json\";\n\n/**\n * Returns a `prismic.dev/msg` URL for a given message slug.\n *\n * @example\n *\n * ```ts\n * devMsg(\"missing-param\");\n * // => \"https://prismic.dev/msg/react/v1.2.3/missing-param\"\n * ```\n *\n * @param slug - Slug for the message. This corresponds to a Markdown file in\n *   the Git repository's `/messages` directory.\n *\n * @returns The `prismic.dev/msg` URL for the given slug.\n */\nexport function devMsg(slug: string): string {\n\treturn `https://prismic.dev/msg/react/v${version}/${slug}`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgB,OAAO,MAAsB;AAC5C,QAAO,kCAAkC,QAAQ,GAAG"}
+{"version":3,"file":"devMsg.js","names":[],"sources":["../../src/lib/devMsg.ts"],"sourcesContent":["import { version } from \"../../package.json\"\n\n/**\n * Returns a `prismic.dev/msg` URL for a given message slug.\n *\n * @example\n * \t;```ts\n * \tdevMsg(\"missing-param\");\n * \t// => \"https://prismic.dev/msg/react/v1.2.3/missing-param\"\n * \t```\n *\n * @param slug - Slug for the message. This corresponds to a Markdown file in the Git repository's\n *   `/messages` directory.\n * @returns The `prismic.dev/msg` URL for the given slug.\n */\nexport function devMsg(slug: string): string {\n\treturn `https://prismic.dev/msg/react/v${version}/${slug}`\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,SAAgB,OAAO,MAAsB;AAC5C,QAAO,kCAAkC,QAAQ,GAAG"}

package/dist/package.js

@@ -1,6 +1,6 @@
 //#region package.json
-var version = "3.4.0";
-
+var version = "3.4.1-canary.56c63d1";
 //#endregion
 export { version };
+
 //# sourceMappingURL=package.js.map

package/package.json

@@ -1,24 +1,28 @@
 {
 	"name": "@prismicio/react",
-	"version": "3.4.0",
+	"version": "3.4.1-canary.56c63d1",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
-		"typescript",
 		"prismic",
-		"react"
+		"react",
+		"typescript"
 	],
+	"license": "Apache-2.0",
+	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/prismicio/prismic-react.git"
 	},
-	"license": "Apache-2.0",
-	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
-	"sideEffects": false,
+	"workspaces": [
+		".",
+		"e2e-projects/*"
+	],
+	"files": [
+		"./dist",
+		"./src"
+	],
 	"type": "module",
-	"exports": {
-		".": "./dist/index.js",
-		"./package.json": "./package.json"
-	},
+	"sideEffects": false,
 	"types": "./dist/index.d.ts",
 	"typesVersions": {
 		"*": {
@@ -27,20 +31,19 @@
 			]
 		}
 	},
-	"files": [
-		"dist",
-		"src"
-	],
-	"workspaces": [
-		".",
-		"e2e-projects/*"
-	],
+	"exports": {
+		".": "./dist/index.js",
+		"./package.json": "./package.json"
+	},
+	"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",
@@ -50,20 +53,18 @@
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.57.0",
+		"@playwright/test": "^1.59.1",
 		"@prismicio/client": "^7.17.0",
-		"@trivago/prettier-plugin-sort-imports": "^6.0.2",
-		"@types/react": "^19.2.8",
+		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
-		"dotenv": "^17.2.3",
-		"oxlint": "^1.39.0",
-		"playwright": "^1.57.0",
-		"prettier": "^3.7.4",
-		"prettier-plugin-jsdoc": "^1.8.0",
-		"react": "^19.2.1",
-		"react-dom": "^19.2.3",
-		"tsdown": "^0.19.0",
-		"typescript": "^5.9.3"
+		"dotenv": "^17.4.0",
+		"oxfmt": "^0.43.0",
+		"oxlint": "^1.58.0",
+		"playwright": "^1.59.1",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"tsdown": "^0.21.7",
+		"typescript": "^6.0.2"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^7",
@@ -71,8 +72,5 @@
 	},
 	"engines": {
 		"node": ">=20"
-	},
-	"publishConfig": {
-		"access": "public"
 	}
 }

package/src/PrismicImage.tsx

@@ -1,194 +1,167 @@
-import {
-	type ForwardedRef,
-	forwardRef,
-	type ComponentProps,
-	type FC,
-	type ReactNode,
-} from "react";
 import {
 	type ImageFieldImage,
 	asImagePixelDensitySrcSet,
 	asImageWidthSrcSet,
 	isFilled,
-} from "@prismicio/client";
-import { DEV } from "esm-env";
+} from "@prismicio/client"
+import { DEV } from "esm-env"
+import { type ForwardedRef, forwardRef, type ComponentProps, type FC, type ReactNode } from "react"
 
-import { devMsg } from "./lib/devMsg.js";
+import { devMsg } from "./lib/devMsg.js"
 
-type ImgixURLParams = Omit<
-	NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>,
-	"widths"
-> &
-	Omit<
-		NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>,
-		"pixelDensities"
-	>;
+type ImgixURLParams = Omit<NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>, "widths"> &
+	Omit<NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>, "pixelDensities">
 
 /** Props for `<PrismicImage>`. */
-export type PrismicImageProps = Omit<
-	ComponentProps<"img">,
-	"src" | "srcset" | "alt"
-> & {
+export type PrismicImageProps = Omit<ComponentProps<"img">, "src" | "srcset" | "alt"> & {
 	/** 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?: ""
 
 	/**
-	 * The value to be rendered when the field is empty. If a fallback is not
-	 * given, `null` will be rendered.
+	 * The value to be rendered when the field is empty. If a fallback is not given, `null` will be
+	 * rendered.
 	 */
-	fallback?: ReactNode;
+	fallback?: ReactNode
 } & (
 		| {
 				/**
-				 * Widths (in pixels) used to build a `srcset` value for the image
-				 * field.
+				 * Widths (in pixels) used to build a `srcset` value for the image field.
 				 *
-				 * If omitted or set to `"defaults"`, the following widths will be used:
-				 * 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
+				 * If omitted or set to `"defaults"`, the following widths will be used: 640, 750, 828,
+				 * 1080, 1200, 1920, 2048, 3840.
 				 *
-				 * If the image field contains responsive views, each responsive view
-				 * can be used as a width in the resulting `srcset` by passing
-				 * `"thumbnails"` as the `widths` prop.
+				 * If the image field contains responsive views, each responsive view can be used as a width
+				 * in the resulting `srcset` by passing `"thumbnails"` as the `widths` prop.
 				 */
-				widths?:
-					| NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"]
-					| "defaults";
+				widths?: NonNullable<Parameters<typeof asImageWidthSrcSet>[1]>["widths"] | "defaults"
 				/** Not used when the `widths` prop is used. */
-				pixelDensities?: never;
+				pixelDensities?: never
 		  }
 		| {
 				/** Not used when the `widths` prop is used. */
-				widths?: never;
+				widths?: never
 				/**
 				 * Pixel densities used to build a `srcset` value for the image field.
 				 *
-				 * If a `pixelDensities` prop is passed `"defaults"`, the following
-				 * pixel densities will be used: 1, 2, 3.
+				 * If a `pixelDensities` prop is passed `"defaults"`, the following pixel densities will be
+				 * used: 1, 2, 3.
 				 */
 				pixelDensities:
-					| NonNullable<
-							Parameters<typeof asImagePixelDensitySrcSet>[1]
-					  >["pixelDensities"]
-					| "defaults";
+					| NonNullable<Parameters<typeof asImagePixelDensitySrcSet>[1]>["pixelDensities"]
+					| "defaults"
 		  }
-	);
+	)
 
 /**
  * Renders an optimized image from a Prismic image field.
  *
  * @example
- *
- * ```tsx
- * <PrismicImage field={slice.primary.photo} />;
- * ```
+ * 	;```tsx
+ * 	<PrismicImage field={slice.primary.photo} />;
+ * 	```
  *
  * @see Learn how to optimize images with imgix, use responsive images, and use framework-specific image components: {@link https://prismic.io/docs/fields/image}
  */
-export const PrismicImage: FC<PrismicImageProps> = forwardRef(
-	function PrismicImage(
-		props: PrismicImageProps,
-		ref: ForwardedRef<HTMLImageElement>,
-	) {
-		const {
-			field,
-			alt,
-			fallbackAlt,
-			imgixParams = {},
-			widths,
-			pixelDensities,
-			fallback,
-			...restProps
-		} = props;
-
-		if (DEV) {
-			if (typeof alt === "string" && alt !== "") {
-				console.warn(
-					`[PrismicImage] 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(
-					`[PrismicImage] 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 (widths && pixelDensities) {
-				console.warn(
-					`[PrismicImage] Only one of "widths" or "pixelDensities" props can be provided. You can resolve this warning by removing either the "widths" or "pixelDensities" prop. "widths" will be used in this case.`,
-				);
-			}
+export const PrismicImage: FC<PrismicImageProps> = forwardRef(function PrismicImage(
+	props: PrismicImageProps,
+	ref: ForwardedRef<HTMLImageElement>,
+) {
+	const {
+		field,
+		alt,
+		fallbackAlt,
+		imgixParams = {},
+		widths,
+		pixelDensities,
+		fallback,
+		...restProps
+	} = props
+
+	if (DEV) {
+		if (typeof alt === "string" && alt !== "") {
+			console.warn(
+				`[PrismicImage] 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(
+				`[PrismicImage] 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 (widths && pixelDensities) {
+			console.warn(
+				`[PrismicImage] Only one of "widths" or "pixelDensities" props can be provided. You can resolve this warning by removing either the "widths" or "pixelDensities" prop. "widths" will be used in this case.`,
+			)
 		}
+	}
 
-		let src: string | undefined;
-		let srcSet: string | undefined;
-
-		if (widths || !pixelDensities) {
-			const res = asImageWidthSrcSet(field, {
-				...resolvedImgixParams,
-				widths: widths === "defaults" ? undefined : widths,
-			} as ImgixURLParams);
+	if (!isFilled.imageThumbnail(field)) {
+		return <>{fallback}</>
+	}
 
-			src = res.src;
-			srcSet = res.srcset;
-		} else if (pixelDensities) {
-			const res = asImagePixelDensitySrcSet(field, {
-				...resolvedImgixParams,
-				pixelDensities:
-					pixelDensities === "defaults" ? undefined : pixelDensities,
-			} as ImgixURLParams);
-
-			src = res.src;
-			srcSet = res.srcset;
+	const resolvedImgixParams = imgixParams
+	for (const x in imgixParams) {
+		if (resolvedImgixParams[x as keyof typeof resolvedImgixParams] === null) {
+			resolvedImgixParams[x as keyof typeof resolvedImgixParams] = undefined
 		}
-
-		return (
-			<img
-				ref={ref}
-				src={src}
-				srcSet={srcSet}
-				alt={alt ?? (field.alt || fallbackAlt)}
-				{...restProps}
-			/>
-		);
-	},
-);
+	}
+
+	let src: string | undefined
+	let srcSet: string | undefined
+
+	if (widths || !pixelDensities) {
+		const res = asImageWidthSrcSet(field, {
+			...resolvedImgixParams,
+			widths: widths === "defaults" ? undefined : widths,
+		} as ImgixURLParams)
+
+		src = res.src
+		srcSet = res.srcset
+	} else if (pixelDensities) {
+		const res = asImagePixelDensitySrcSet(field, {
+			...resolvedImgixParams,
+			pixelDensities: pixelDensities === "defaults" ? undefined : pixelDensities,
+		} as ImgixURLParams)
+
+		src = res.src
+		srcSet = res.srcset
+	}
+
+	return (
+		<img
+			ref={ref}
+			src={src}
+			srcSet={srcSet}
+			alt={alt ?? (field.alt || fallbackAlt)}
+			{...restProps}
+		/>
+	)
+})