@prismicio/react 3.4.0-canary.e2a0168 → 3.4.0-pr.257.68f2f80

package/src/PrismicRichText.tsx

@@ -1,5 +1,3 @@
-import { type LinkProps, PrismicLink } from "./PrismicLink.js";
-import { devMsg } from "./lib/devMsg.js";
 import {
 	isFilled,
 	type LinkResolverFunction,
@@ -23,25 +21,25 @@ import {
 	type ReactNode,
 } from "react";
 
+import { devMsg } from "./lib/devMsg.js";
+import { type LinkProps, PrismicLink } from "./PrismicLink.js";
+
 /**
- * A function mapping rich text block types to React Components. It is used to
- * render rich text fields.
+ * A function mapping rich text block types to React Components. It is used to render rich text
+ * fields.
  *
  * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
 export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
 
 /**
- * A map of rich text block types to React Components. It is used to render rich
- * text fields.
+ * A map of rich text block types to React Components. It is used to render rich text fields.
  *
  * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
 export type RichTextComponents = RichTextMapSerializer<ReactNode>;
 
-/**
- * @deprecated Use `RichTextComponents` instead.
- */
+/** @deprecated Use `RichTextComponents` instead. */
 export type JSXMapSerializer = RichTextComponents;
 
 /** Props for `<PrismicRichText>`. */
@@ -53,9 +51,8 @@ export type PrismicRichTextProps = {
 	 * The link resolver used to resolve links.
 	 *
 	 * @remarks
-	 * If your app uses route resolvers when querying for your Prismic
-	 * repository's content, a link resolver does not need to be provided.
-	 *
+	 *   If your app uses route resolvers when querying for your Prismic repository's content, a link
+	 *   resolver does not need to be provided.
 	 * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
 	 */
 	linkResolver?: LinkResolverFunction;
@@ -64,28 +61,29 @@ export type PrismicRichTextProps = {
 	 * A map or function that maps a rich text block to a React component.
 	 *
 	 * @remarks
-	 * Prefer using a map serializer over the function serializer when possible.
-	 * The map serializer is simpler to maintain.
-	 *
-	 * @example A map serializer.
+	 *   Prefer using a map serializer over the function serializer when possible. The map serializer
+	 *   is simpler to maintain.
+	 * @example
+	 * 	A map serializer.
 	 *
-	 * ```jsx
-	 * {
-	 *   heading1: ({children}) => <Heading>{children}</Heading>
-	 * }
-	 * ```
+	 * 	```jsx
+	 * 	{
+	 * 	heading1: ({children}) => <Heading>{children}</Heading>
+	 * 	}
+	 * 	```
 	 *
-	 * @example A function serializer.
+	 * @example
+	 * 	A function serializer.
 	 *
-	 * ```jsx
-	 * (type, node, content, children) => {
+	 * 	```jsx
+	 * 	(type, node, content, children) => {
 	 * 	switch (type) {
-	 * 		case "heading1": {
-	 * 			return <Heading>{children}</Heading>;
-	 * 		}
+	 * 	case "heading1": {
+	 * 	return <Heading>{children}</Heading>;
+	 * 	}
 	 * 	}
-	 * };
-	 * ```
+	 * 	};
+	 * 	```
 	 */
 	components?: RichTextComponents | JSXFunctionSerializer;
 
@@ -104,8 +102,8 @@ export type PrismicRichTextProps = {
 	externalLinkComponent?: ComponentType<LinkProps>;
 
 	/**
-	 * 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;
 };
@@ -122,9 +120,7 @@ const getDir = (node: RTAnyNode): "rtl" | undefined => {
 	}
 };
 
-const createDefaultSerializer = (
-	args: CreateDefaultSerializerArgs,
-): JSXFunctionSerializer =>
+const createDefaultSerializer = (args: CreateDefaultSerializerArgs): JSXFunctionSerializer =>
 	wrapMapSerializer<ReactNode>({
 		heading1: ({ node, children, key }) => (
 			<h1 key={key} dir={getDir(node)}>
@@ -249,10 +245,9 @@ const createDefaultSerializer = (
  * Renders content from a Prismic rich text field as React components.
  *
  * @example
- *
- * ```tsx
- * <PrismicRichText field={slice.primary.text} />;
- * ```
+ * 	```tsx
+ * 	<PrismicRichText field={slice.primary.text} />;
+ * 	```
  *
  * @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
  */
@@ -294,18 +289,15 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 	// The serializer is wrapped in a higher-order function that
 	// automatically applies a key to React Elements if one is not already
 	// given.
-	const serialized = serialize<ReactNode>(
-		field,
-		(type, node, text, children, key) => {
-			const result = serializer(type, node, text, children, key);
+	const serialized = serialize<ReactNode>(field, (type, node, text, children, key) => {
+		const result = serializer(type, node, text, children, key);
 
-			if (isValidElement(result) && result.key == null) {
-				return cloneElement(result, { key });
-			} else {
-				return result;
-			}
-		},
-	);
+		if (isValidElement(result) && result.key == null) {
+			return cloneElement(result, { key });
+		} else {
+			return result;
+		}
+	});
 
 	if (!serialized) {
 		return fallback != null ? <>{fallback}</> : null;

package/src/PrismicTable.tsx

@@ -1,4 +1,3 @@
-import type { ComponentType, FC, ReactNode } from "react";
 import {
 	isFilled,
 	type TableField,
@@ -9,6 +8,7 @@ import {
 	type TableFieldHeaderCell,
 	type TableFieldDataCell,
 } from "@prismicio/client";
+import type { ComponentType, FC, ReactNode } from "react";
 
 import { type JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
 
@@ -41,20 +41,21 @@ export type PrismicTableProps = {
 	/**
 	 * An object that maps a table block to a React component.
 	 *
-	 * @example A map serializer.
+	 * @example
+	 * 	A map serializer.
 	 *
-	 * ```jsx
-	 * {
-	 *   table: ({children}) => <table>{children}</table>
-	 *   thead: ({children}) => <thead>{children}</thead>
-	 * }
-	 * ```
+	 * 	```jsx
+	 * 	{
+	 * 	table: ({children}) => <table>{children}</table>
+	 * 	thead: ({children}) => <thead>{children}</thead>
+	 * 	}
+	 * 	```
 	 */
 	components?: JSXMapSerializer & TableComponents;
 
 	/**
-	 * 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;
 };
@@ -63,10 +64,9 @@ export type PrismicTableProps = {
  * Renders content from a Prismic table field as React components.
  *
  * @example
- *
- * ```tsx
- * <PrismicTable field={slice.primary.pricing_table} />;
- * ```
+ * 	```tsx
+ * 	<PrismicTable field={slice.primary.pricing_table} />;
+ * 	```
  *
  * @see Learn how to style tables and customize table element components: {@link https://prismic.io/docs/fields/table}
  */
@@ -77,11 +77,7 @@ export const PrismicTable: FC<PrismicTableProps> = (props) => {
 		return fallback;
 	}
 
-	const {
-		table: Table,
-		thead: Thead,
-		tbody: Tbody,
-	} = { ...defaultComponents, ...components };
+	const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components };
 
 	return (
 		<Table table={field}>

package/src/PrismicText.tsx

@@ -1,6 +1,6 @@
-import type { FC } from "react";
 import { asText, isFilled, type RichTextField } from "@prismicio/client";
 import { DEV } from "esm-env";
+import type { FC } from "react";
 
 import { devMsg } from "./lib/devMsg.js";
 
@@ -10,8 +10,8 @@ export type PrismicTextProps = {
 	field: RichTextField | null | undefined;
 
 	/**
-	 * The string rendered when the field is empty. If a fallback is not given,
-	 * `null` will be rendered.
+	 * The string rendered when the field is empty. If a fallback is not given, `null` will be
+	 * rendered.
 	 */
 	fallback?: string;
 
@@ -23,10 +23,9 @@ export type PrismicTextProps = {
  * Renders content from a Prismic rich text field as plain text (no HTML).
  *
  * @example
- *
- * ```tsx
- * <PrismicText field={slice.primary.text} />;
- * ```
+ * 	```tsx
+ * 	<PrismicText field={slice.primary.text} />;
+ * 	```
  *
  * @see Learn how to display rich text as plain text or React components: {@link https://prismic.io/docs/fields/rich-text}
  */

package/src/PrismicToolbar.tsx

@@ -6,28 +6,26 @@ import { type FC, useEffect, useRef } from "react";
 /** Props for `<PrismicToolbar>`. */
 export type PrismicToolbarProps = {
 	/**
-	 * The name of the Prismic repository. For example, `"my-repo"` if the
-	 * repository URL is `my-repo.prismic.io`.
+	 * The name of the Prismic repository. For example, `"my-repo"` if the repository URL is
+	 * `my-repo.prismic.io`.
 	 */
 	repositoryName: string;
 
 	/**
-	 * Called when the Prismic toolbar triggers a preview update. This happens
-	 * when the previewed content changes.
+	 * Called when the Prismic toolbar triggers a preview update. This happens when the previewed
+	 * content changes.
 	 *
 	 * The new ref can be read from `event.detail.ref`.
 	 *
-	 * The default page reload behavior can be cancelled with
-	 * `event.preventDefault()`.
+	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
 	 */
 	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void;
 
 	/**
-	 * Called when the Prismic toolbar triggers a preview end. This happens when
-	 * a preview session is closed.
+	 * Called when the Prismic toolbar triggers a preview end. This happens when a preview session is
+	 * closed.
 	 *
-	 * The default page reload behavior can be cancelled with
-	 * `event.preventDefault()`.
+	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
 	 */
 	onPreviewEnd?: (event: CustomEvent<null>) => void;
 };
@@ -36,10 +34,9 @@ export type PrismicToolbarProps = {
  * Renders the Prismic Toolbar script to support draft previews.
  *
  * @example
- *
- * ```tsx
- * <PrismicToolbar repositoryName="my-repo" />;
- * ```
+ * 	```tsx
+ * 	<PrismicToolbar repositoryName="my-repo" />;
+ * 	```
  *
  * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}
  */
@@ -79,8 +76,7 @@ export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
 
 		window.addEventListener(
 			"prismicPreviewUpdate",
-			(event) =>
-				onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
+			(event) => onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
 			{ signal: controller.signal },
 		);
 

package/src/SliceZone.tsx

@@ -1,6 +1,6 @@
-import type { ComponentType, FC, ReactNode } from "react";
 import type { Slice } from "@prismicio/client";
 import { DEV } from "esm-env";
+import type { ComponentType, FC, ReactNode } from "react";
 
 /**
  * Returns the type of a `SliceLike` type.
@@ -14,8 +14,8 @@ type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice
 		: never;
 
 /**
- * The minimum required properties to represent a Prismic slice from the Prismic
- * Content API for the `mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice from the Prismic Content API for the
+ * `mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the slice.
  */
@@ -25,8 +25,8 @@ export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
 >;
 
 /**
- * The minimum required properties to represent a Prismic slice from the Prismic
- * GraphQL API for the `mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice from the Prismic GraphQL API for the
+ * `mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the slice.
  */
@@ -35,11 +35,10 @@ export type SliceLikeGraphQL<TSliceType extends string = string> = {
 };
 
 /**
- * The minimum required properties to represent a Prismic slice for the
- * `mapSliceZone()` helper.
+ * The minimum required properties to represent a Prismic slice for the `mapSliceZone()` helper.
  *
- * If using Prismic's Content API, use the `Slice` export from
- * `@prismicio/client` for a full interface.
+ * If using Prismic's Content API, use the `Slice` export from `@prismicio/client` for a full
+ * interface.
  *
  * @typeParam SliceType - Type name of the slice.
  */
@@ -48,8 +47,8 @@ export type SliceLike<TSliceType extends string = string> = (
 	| SliceLikeGraphQL<TSliceType>
 ) & {
 	/**
-	 * If `true`, this slice has been modified from its original value using a
-	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+	 * If `true`, this slice has been modified from its original value using a mapper and
+	 * `@prismicio/client`'s `mapSliceZone()`.
 	 *
 	 * @internal
 	 */
@@ -57,29 +56,24 @@ export type SliceLike<TSliceType extends string = string> = (
 };
 
 /**
- * A looser version of the `SliceZone` type from `@prismicio/client` using
- * `SliceLike`.
+ * A looser version of the `SliceZone` type from `@prismicio/client` using `SliceLike`.
  *
- * If using Prismic's Content API, use the `SliceZone` export from
- * `@prismicio/client` for the full type.
+ * If using Prismic's Content API, use the `SliceZone` export from `@prismicio/client` for the full
+ * type.
  *
  * @typeParam TSlice - The type(s) of a slice in the slice zone.
  */
-export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
-	readonly TSlice[];
+export type SliceZoneLike<TSlice extends SliceLike = SliceLike> = readonly TSlice[];
 
 /**
- * React props for a component rendering content from a Prismic slice using the
- * `<SliceZone>` component.
+ * React props for a component rendering content from a Prismic slice using the `<SliceZone>`
+ * component.
  *
  * @typeParam TSlice - The slice passed as a prop.
- * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made
- *   available to all slice components.
+ * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made available to all slice
+ *   components.
  */
-export type SliceComponentProps<
-	TSlice extends SliceLike = SliceLike,
-	TContext = unknown,
-> = {
+export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
 	/** Slice data for this component. */
 	slice: TSlice;
 
@@ -91,14 +85,9 @@ export type SliceComponentProps<
 	// reference limtiations. If we had another generic to determine the full
 	// union of slice types, it would include TSlice. This causes TypeScript to
 	// throw a compilation error.
-	slices: SliceZoneLike<
-		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
-	>;
+	slices: SliceZoneLike<TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2>;
 
-	/**
-	 * Arbitrary data passed to `<SliceZone>` and made available to all slice
-	 * components.
-	 */
+	/** Arbitrary data passed to `<SliceZone>` and made available to all slice components. */
 	context: TContext;
 };
 
@@ -115,19 +104,15 @@ export type SliceComponentType<
 > = ComponentType<SliceComponentProps<TSlice, TContext>>;
 
 /**
- * A record of slice types mapped to a React component. The component will be
- * rendered for each instance of its slice.
+ * A record of slice types mapped to a React component. The component will be rendered for each
+ * instance of its slice.
  *
  * @deprecated This type is no longer used by `@prismicio/react`. Prefer using
  *   `Record<string, SliceComponentType<any>>` instead.
- *
  * @typeParam TSlice - The type(s) of a slice in the slice zone.
  * @typeParam TContext - Arbitrary data made available to all slice components.
  */
-export type SliceZoneComponents<
-	TSlice extends SliceLike = SliceLike,
-	TContext = unknown,
-> =
+export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> =
 	// This is purposely not wrapped in Partial to ensure a component is provided
 	// for all slice types. <SliceZone> will render a default component if one is
 	// not provided, but it *should* be a type error if an explicit component is
@@ -160,10 +145,7 @@ export type SliceZoneProps<TContext = unknown> = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	components?: Record<string, ComponentType<any>>;
 
-	/**
-	 * The React component rendered if a component mapping from the `components`
-	 * prop cannot be found.
-	 */
+	/** The React component rendered if a component mapping from the `components` prop cannot be found. */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
 
@@ -172,11 +154,10 @@ export type SliceZoneProps<TContext = unknown> = {
 };
 
 /**
- * This slice component can be used as a reminder to provide a proper
- * implementation.
+ * This slice component can be used as a reminder to provide a proper implementation.
  *
- * This is also the default React component rendered when a component mapping
- * cannot be found in `<SliceZone>`.
+ * This is also the default React component rendered when a component mapping cannot be found in
+ * `<SliceZone>`.
  */
 export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
@@ -189,10 +170,7 @@ export const TODOSliceComponent = <TSlice extends SliceLike>({
 
 	const type = "slice_type" in slice ? slice.slice_type : slice.type;
 
-	console.warn(
-		`[SliceZone] Could not find a component for slice type "${type}"`,
-		slice,
-	);
+	console.warn(`[SliceZone] Could not find a component for slice type "${type}"`, slice);
 
 	return (
 		<section data-slice-zone-todo-component="" data-slice-type={type}>
@@ -206,31 +184,21 @@ export const TODOSliceComponent = <TSlice extends SliceLike>({
  * Renders slices in a slice zone as React components.
  *
  * @example
- *
- * ```tsx
- * <SliceZone slices={page.data.slices} components={components} />;
- * ```
+ * 	```tsx
+ * 	<SliceZone slices={page.data.slices} components={components} />;
+ * 	```
  *
  * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}
  */
 export const SliceZone: FC<SliceZoneProps> = (props) => {
-	const {
-		slices = [],
-		components = {},
-		defaultComponent,
-		context = {},
-	} = props;
+	const { slices = [], components = {}, defaultComponent, context = {} } = props;
 
 	const renderedSlices = slices.map((slice, index) => {
 		const type = "slice_type" in slice ? slice.slice_type : slice.type;
 
-		const key =
-			"id" in slice && slice.id
-				? slice.id
-				: `${index}-${JSON.stringify(slice)}`;
+		const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`;
 
-		const Comp =
-			components[type as keyof typeof components] || defaultComponent;
+		const Comp = components[type as keyof typeof components] || defaultComponent;
 
 		if (!Comp) {
 			return <TODOSliceComponent key={key} slice={slice} />;
@@ -242,15 +210,7 @@ export const SliceZone: FC<SliceZoneProps> = (props) => {
 			return <Comp key={key} {...mappedProps} />;
 		}
 
-		return (
-			<Comp
-				key={key}
-				slice={slice}
-				index={index}
-				slices={slices}
-				context={context}
-			/>
-		);
+		return <Comp key={key} slice={slice} index={index} slices={slices} context={context} />;
 	});
 
 	return <>{renderedSlices}</>;

package/src/lib/devMsg.ts

@@ -4,15 +4,13 @@ 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/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.
  */
 export function devMsg(slug: string): string {