@prismicio/react 3.4.1 → 3.4.2-pr.270.b8e16cb

package/src/PrismicTable.tsx

@@ -7,22 +7,22 @@ import {
 	type TableFieldBodyRow,
 	type TableFieldHeaderCell,
 	type TableFieldDataCell,
-} from "@prismicio/client";
-import type { ComponentType, FC, ReactNode } from "react";
+} from "@prismicio/client"
+import type { ComponentType, FC, ReactNode } from "react"
 
-import { type JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js";
+import { type JSXMapSerializer, PrismicRichText } from "./PrismicRichText.js"
 
 type TableComponents = {
-	table?: ComponentType<{ table: TableField<"filled">; children: ReactNode }>;
-	thead?: ComponentType<{ head: TableFieldHead; children: ReactNode }>;
-	tbody?: ComponentType<{ body: TableFieldBody; children: ReactNode }>;
+	table?: ComponentType<{ table: TableField<"filled">; children: ReactNode }>
+	thead?: ComponentType<{ head: TableFieldHead; children: ReactNode }>
+	tbody?: ComponentType<{ body: TableFieldBody; children: ReactNode }>
 	tr?: ComponentType<{
-		row: TableFieldHeadRow | TableFieldBodyRow;
-		children: ReactNode;
-	}>;
-	th?: ComponentType<{ cell: TableFieldHeaderCell; children: ReactNode }>;
-	td?: ComponentType<{ cell: TableFieldDataCell; children: ReactNode }>;
-};
+		row: TableFieldHeadRow | TableFieldBodyRow
+		children: ReactNode
+	}>
+	th?: ComponentType<{ cell: TableFieldHeaderCell; children: ReactNode }>
+	td?: ComponentType<{ cell: TableFieldDataCell; children: ReactNode }>
+}
 
 const defaultComponents: Required<TableComponents> = {
 	table: ({ children }) => <table>{children}</table>,
@@ -31,12 +31,12 @@ const defaultComponents: Required<TableComponents> = {
 	tr: ({ children }) => <tr>{children}</tr>,
 	th: ({ children }) => <th>{children}</th>,
 	td: ({ children }) => <td>{children}</td>,
-};
+}
 
 /** Props for `<PrismicTable>`. */
 export type PrismicTableProps = {
 	/** The Prismic table field to render. */
-	field: TableField;
+	field: TableField
 
 	/**
 	 * An object that maps a table block to a React component.
@@ -51,33 +51,33 @@ export type PrismicTableProps = {
 	 * 	}
 	 * 	```
 	 */
-	components?: JSXMapSerializer & TableComponents;
+	components?: JSXMapSerializer & TableComponents
 
 	/**
 	 * The value to be rendered when the field is empty. If a fallback is not given, `null` will be
 	 * rendered.
 	 */
-	fallback?: ReactNode;
-};
+	fallback?: ReactNode
+}
 
 /**
  * Renders content from a Prismic table field as React components.
  *
  * @example
- * 	```tsx
+ * 	;```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}
  */
 export const PrismicTable: FC<PrismicTableProps> = (props) => {
-	const { field, components, fallback = null } = props;
+	const { field, components, fallback = null } = props
 
 	if (!isFilled.table(field)) {
-		return fallback;
+		return fallback
 	}
 
-	const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components };
+	const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components }
 
 	return (
 		<Table table={field}>
@@ -94,18 +94,18 @@ export const PrismicTable: FC<PrismicTableProps> = (props) => {
 				))}
 			</Tbody>
 		</Table>
-	);
-};
+	)
+}
 
 type TableRowProps = {
-	row: TableFieldHeadRow | TableFieldBodyRow;
-	components?: JSXMapSerializer & TableComponents;
-};
+	row: TableFieldHeadRow | TableFieldBodyRow
+	components?: JSXMapSerializer & TableComponents
+}
 
 function TableRow(props: TableRowProps) {
-	const { row, components } = props;
+	const { row, components } = props
 
-	const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
+	const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components }
 
 	return (
 		<Tr row={row}>
@@ -121,5 +121,5 @@ function TableRow(props: TableRowProps) {
 				),
 			)}
 		</Tr>
-	);
+	)
 }

package/src/PrismicText.tsx

@@ -1,36 +1,36 @@
-import { asText, isFilled, type RichTextField } from "@prismicio/client";
-import { DEV } from "esm-env";
-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";
+import { devMsg } from "./lib/devMsg.js"
 
 /** Props for `<PrismicText>`. */
 export type PrismicTextProps = {
 	/** The Prismic rich text field to render. */
-	field: RichTextField | null | undefined;
+	field: RichTextField | null | undefined
 
 	/**
 	 * The string rendered when the field is empty. If a fallback is not given, `null` will be
 	 * rendered.
 	 */
-	fallback?: string;
+	fallback?: string
 
 	/** The separator used between blocks. Defaults to `\n`. */
-	separator?: string;
-};
+	separator?: string
+}
 
 /**
  * Renders content from a Prismic rich text field as plain text (no HTML).
  *
  * @example
- * 	```tsx
+ * 	;```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}
  */
 export const PrismicText: FC<PrismicTextProps> = (props) => {
-	const { field, fallback, separator } = props;
+	const { field, fallback, separator } = props
 
 	if (DEV) {
 		if ("className" in props) {
@@ -39,7 +39,7 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
 					"classname-is-not-a-valid-prop",
 				)}.`,
 				props.field,
-			);
+			)
 		}
 	}
 
@@ -50,15 +50,15 @@ export const PrismicText: FC<PrismicTextProps> = (props) => {
 					"prismictext-works-only-with-rich-text-and-title-fields",
 				)}`,
 				props.field,
-			);
+			)
 		}
 
-		return null;
+		return null
 	}
 
 	if (!isFilled.richText(field)) {
-		return fallback != null ? <>{fallback}</> : null;
+		return fallback != null ? <>{fallback}</> : null
 	}
 
-	return <>{asText(field, { separator })}</>;
-};
+	return <>{asText(field, { separator })}</>
+}

package/src/PrismicToolbar.tsx

@@ -1,7 +1,7 @@
-"use client";
+"use client"
 
-import { getToolbarSrc } from "@prismicio/client";
-import { type FC, useEffect, useRef } from "react";
+import { getToolbarSrc } from "@prismicio/client"
+import { type FC, useEffect, useRef } from "react"
 
 /** Props for `<PrismicToolbar>`. */
 export type PrismicToolbarProps = {
@@ -9,7 +9,7 @@ export type PrismicToolbarProps = {
 	 * The name of the Prismic repository. For example, `"my-repo"` if the repository URL is
 	 * `my-repo.prismic.io`.
 	 */
-	repositoryName: string;
+	repositoryName: string
 
 	/**
 	 * Called when the Prismic toolbar triggers a preview update. This happens when the previewed
@@ -19,7 +19,7 @@ export type PrismicToolbarProps = {
 	 *
 	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
 	 */
-	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void;
+	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void
 
 	/**
 	 * Called when the Prismic toolbar triggers a preview end. This happens when a preview session is
@@ -27,67 +27,67 @@ export type PrismicToolbarProps = {
 	 *
 	 * The default page reload behavior can be cancelled with `event.preventDefault()`.
 	 */
-	onPreviewEnd?: (event: CustomEvent<null>) => void;
-};
+	onPreviewEnd?: (event: CustomEvent<null>) => void
+}
 
 /**
  * Renders the Prismic Toolbar script to support draft previews.
  *
  * @example
- * 	```tsx
+ * 	;```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}
  */
 export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
-	const { repositoryName, onPreviewUpdate, onPreviewEnd } = props;
+	const { repositoryName, onPreviewUpdate, onPreviewEnd } = props
 
-	const src = getToolbarSrc(repositoryName);
+	const src = getToolbarSrc(repositoryName)
 
-	const onPreviewUpdateRef = useRef(onPreviewUpdate);
-	onPreviewUpdateRef.current = onPreviewUpdate;
+	const onPreviewUpdateRef = useRef(onPreviewUpdate)
+	onPreviewUpdateRef.current = onPreviewUpdate
 
-	const onPreviewEndRef = useRef(onPreviewEnd);
-	onPreviewEndRef.current = onPreviewEnd;
+	const onPreviewEndRef = useRef(onPreviewEnd)
+	onPreviewEndRef.current = onPreviewEnd
 
 	useEffect(() => {
-		const existingScript = document.querySelector(`script[src="${src}"]`);
+		const existingScript = document.querySelector(`script[src="${src}"]`)
 
 		if (!existingScript) {
-			const script = document.createElement("script");
-			script.src = src;
-			script.defer = true;
+			const script = document.createElement("script")
+			script.src = src
+			script.defer = true
 
 			// Used to distinguish the toolbar element from other elements.
-			script.dataset.prismicToolbar = "";
-			script.dataset.repositoryName = repositoryName;
+			script.dataset.prismicToolbar = ""
+			script.dataset.repositoryName = repositoryName
 
 			// Disable Happy DOM `<script>` evaluation during tests.
 			// @ts-expect-error - `_evaluateScript` is a Happy DOM-specific property.
-			script._evaluateScript = false;
+			script._evaluateScript = false
 
-			document.body.appendChild(script);
+			document.body.appendChild(script)
 		}
-	}, [repositoryName, src]);
+	}, [repositoryName, src])
 
 	useEffect(() => {
-		const controller = new AbortController();
+		const controller = new AbortController()
 
 		window.addEventListener(
 			"prismicPreviewUpdate",
 			(event) => onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
 			{ signal: controller.signal },
-		);
+		)
 
 		window.addEventListener(
 			"prismicPreviewEnd",
 			(event) => onPreviewEndRef.current?.(event as CustomEvent<null>),
 			{ signal: controller.signal },
-		);
+		)
 
-		return () => controller.abort();
-	}, []);
+		return () => controller.abort()
+	}, [])
 
-	return null;
-};
+	return null
+}

package/src/SliceBoundary.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { type ReactNode, useId, useLayoutEffect, useRef, useSyncExternalStore } from "react"
+
+type SliceBoundaryProps = {
+	children: ReactNode
+	sliceId: string
+}
+
+export function SliceBoundary(props: SliceBoundaryProps): ReactNode {
+	const { children, sliceId } = props
+
+	return (
+		<>
+			<CommentMarker value={`prismic-slice-start:${sliceId}`} />
+			{children}
+			<CommentMarker value={`prismic-slice-end:${sliceId}`} />
+		</>
+	)
+}
+
+type CommentMarkerProps = {
+	value: string
+}
+
+function CommentMarker(props: CommentMarkerProps) {
+	const { value } = props
+	const id = useId()
+	const isClient = useIsClient()
+	const anchorRef = useRef<Text>(null)
+
+	useLayoutEffect(() => {
+		let anchor = anchorRef.current
+
+		if (!anchor?.isConnected) {
+			anchor = findTextNode(id)
+			if (!anchor) return
+
+			anchor.data = ""
+			anchorRef.current = anchor
+		}
+
+		const comment = document.createComment(value)
+		anchor.after(comment)
+
+		return () => comment.remove()
+	})
+
+	return isClient ? id : null
+}
+
+function useIsClient() {
+	return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot)
+}
+
+function subscribe() {
+	return () => {}
+}
+
+function getClientSnapshot() {
+	return true
+}
+
+function getServerSnapshot() {
+	return false
+}
+
+function findTextNode(value: string) {
+	const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)
+
+	while (walker.nextNode()) {
+		const node = walker.currentNode
+		if (node instanceof Text && node.data === value) return node
+	}
+
+	return null
+}

package/src/SliceZone.tsx

@@ -1,6 +1,8 @@
-import type { Slice } from "@prismicio/client";
-import { DEV } from "esm-env";
-import type { ComponentType, FC, ReactNode } from "react";
+import type { Slice } from "@prismicio/client"
+import { DEV } from "esm-env"
+import { Fragment, type ComponentType, type FC, type ReactNode } from "react"
+
+import { SliceBoundary } from "./SliceBoundary.js"
 
 /**
  * Returns the type of a `SliceLike` type.
@@ -11,7 +13,7 @@ type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice
 	? TSlice["slice_type"]
 	: TSlice extends SliceLikeGraphQL
 		? TSlice["type"]
-		: never;
+		: never
 
 /**
  * The minimum required properties to represent a Prismic slice from the Prismic Content API for the
@@ -22,7 +24,7 @@ type ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice
 export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
 	Slice<TSliceType>,
 	"id" | "slice_type"
->;
+>
 
 /**
  * The minimum required properties to represent a Prismic slice from the Prismic GraphQL API for the
@@ -31,8 +33,8 @@ export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
  * @typeParam SliceType - Type name of the slice.
  */
 export type SliceLikeGraphQL<TSliceType extends string = string> = {
-	type: Slice<TSliceType>["slice_type"];
-};
+	type: Slice<TSliceType>["slice_type"]
+}
 
 /**
  * The minimum required properties to represent a Prismic slice for the `mapSliceZone()` helper.
@@ -52,8 +54,8 @@ export type SliceLike<TSliceType extends string = string> = (
 	 *
 	 * @internal
 	 */
-	__mapped?: true;
-};
+	__mapped?: true
+}
 
 /**
  * A looser version of the `SliceZone` type from `@prismicio/client` using `SliceLike`.
@@ -63,7 +65,7 @@ export type SliceLike<TSliceType extends string = string> = (
  *
  * @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>`
@@ -75,21 +77,21 @@ export type SliceZoneLike<TSlice extends SliceLike = SliceLike> = readonly TSlic
  */
 export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
 	/** Slice data for this component. */
-	slice: TSlice;
+	slice: TSlice
 
 	/** The index of the slice in the slice zone. */
-	index: number;
+	index: number
 
 	/** All slices from the slice zone to which the slice belongs. */
 	// TODO: We have to keep this list of slices general due to circular
 	// 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. */
-	context: TContext;
-};
+	context: TContext
+}
 
 /**
  * A React component to be rendered for each instance of its slice.
@@ -101,7 +103,7 @@ export type SliceComponentType<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	TSlice extends SliceLike = any,
 	TContext = unknown,
-> = ComponentType<SliceComponentProps<TSlice, TContext>>;
+> = ComponentType<SliceComponentProps<TSlice, TContext>>
 
 /**
  * A record of slice types mapped to a React component. The component will be rendered for each
@@ -128,8 +130,8 @@ export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext =
 				? SliceLike
 				: Extract<TSlice, SliceLike<SliceType>>,
 			TContext
-		>;
-	};
+		>
+	}
 
 /**
  * React props for the `<SliceZone>` component.
@@ -139,19 +141,19 @@ export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext =
  */
 export type SliceZoneProps<TContext = unknown> = {
 	/** List of slice data from the slice zone. */
-	slices?: SliceZoneLike;
+	slices?: SliceZoneLike
 
 	/** A record mapping slice types to React components. */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	components?: Record<string, ComponentType<any>>;
+	components?: Record<string, ComponentType<any>>
 
 	/** 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>>;
+	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>
 
 	/** Arbitrary data made available to all slice components. */
-	context?: TContext;
-};
+	context?: TContext
+}
 
 /**
  * This slice component can be used as a reminder to provide a proper implementation.
@@ -162,56 +164,65 @@ export type SliceZoneProps<TContext = unknown> = {
 export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
 }: {
-	slice: TSlice;
+	slice: TSlice
 }): ReactNode => {
 	if (!DEV) {
-		return null;
+		return null
 	}
 
-	const type = "slice_type" in slice ? slice.slice_type : slice.type;
+	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}>
 			Could not find a component for slice type &ldquo;{type}
 			&rdquo;
 		</section>
-	);
-};
+	)
+}
 
 /**
  * Renders slices in a slice zone as React components.
  *
  * @example
- * 	```tsx
+ * 	;```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 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
+		let renderedSlice: ReactNode
 
 		if (!Comp) {
-			return <TODOSliceComponent key={key} slice={slice} />;
-		}
+			renderedSlice = <TODOSliceComponent slice={slice} />
+		} else if (slice.__mapped) {
+			const { __mapped, ...mappedProps } = slice
 
-		if (slice.__mapped) {
-			const { __mapped, ...mappedProps } = slice;
+			renderedSlice = <Comp {...mappedProps} />
+		} else {
+			renderedSlice = <Comp slice={slice} index={index} slices={slices} context={context} />
+		}
 
-			return <Comp key={key} {...mappedProps} />;
+		if ("id" in slice && slice.id) {
+			return (
+				<SliceBoundary key={key} sliceId={slice.id}>
+					{renderedSlice}
+				</SliceBoundary>
+			)
 		}
 
-		return <Comp key={key} slice={slice} index={index} slices={slices} context={context} />;
-	});
+		return <Fragment key={key}>{renderedSlice}</Fragment>
+	})
 
-	return <>{renderedSlices}</>;
-};
+	return <>{renderedSlices}</>
+}

package/src/index.ts

@@ -1,26 +1,26 @@
-export { PrismicLink } from "./PrismicLink.js";
-export type { PrismicLinkProps, LinkProps } from "./PrismicLink.js";
+export { PrismicLink } from "./PrismicLink.js"
+export type { PrismicLinkProps, LinkProps } from "./PrismicLink.js"
 
-export { PrismicTable } from "./PrismicTable.js";
-export type { PrismicTableProps } from "./PrismicTable.js";
+export { PrismicTable } from "./PrismicTable.js"
+export type { PrismicTableProps } from "./PrismicTable.js"
 
-export { PrismicText } from "./PrismicText.js";
-export type { PrismicTextProps } from "./PrismicText.js";
+export { PrismicText } from "./PrismicText.js"
+export type { PrismicTextProps } from "./PrismicText.js"
 
-export { PrismicRichText } from "./PrismicRichText.js";
+export { PrismicRichText } from "./PrismicRichText.js"
 export type {
 	PrismicRichTextProps,
 	RichTextComponents,
 	JSXMapSerializer,
 	JSXFunctionSerializer,
-} from "./PrismicRichText.js";
+} from "./PrismicRichText.js"
 
-export { Element } from "@prismicio/client/richtext";
+export { Element } from "@prismicio/client/richtext"
 
-export { PrismicImage } from "./PrismicImage.js";
-export type { PrismicImageProps } from "./PrismicImage.js";
+export { PrismicImage } from "./PrismicImage.js"
+export type { PrismicImageProps } from "./PrismicImage.js"
 
-export { SliceZone, TODOSliceComponent } from "./SliceZone.js";
+export { SliceZone, TODOSliceComponent } from "./SliceZone.js"
 export type {
 	SliceComponentProps,
 	SliceComponentType,
@@ -30,7 +30,7 @@ export type {
 	SliceZoneComponents,
 	SliceZoneLike,
 	SliceZoneProps,
-} from "./SliceZone.js";
+} from "./SliceZone.js"
 
-export { PrismicToolbar } from "./PrismicToolbar.js";
-export type { PrismicToolbarProps } from "./PrismicToolbar.js";
+export { PrismicToolbar } from "./PrismicToolbar.js"
+export type { PrismicToolbarProps } from "./PrismicToolbar.js"

package/src/lib/devMsg.ts

@@ -1,10 +1,10 @@
-import { version } from "../../package.json";
+import { version } from "../../package.json"
 
 /**
  * Returns a `prismic.dev/msg` URL for a given message slug.
  *
  * @example
- * 	```ts
+ * 	;```ts
  * 	devMsg("missing-param");
  * 	// => "https://prismic.dev/msg/react/v1.2.3/missing-param"
  * 	```
@@ -14,5 +14,5 @@ import { version } from "../../package.json";
  * @returns The `prismic.dev/msg` URL for the given slug.
  */
 export function devMsg(slug: string): string {
-	return `https://prismic.dev/msg/react/v${version}/${slug}`;
+	return `https://prismic.dev/msg/react/v${version}/${slug}`
 }