@prismicio/react 3.4.1 → 3.4.2-canary.c2e05c8

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,69 @@ 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)
+	const onPreviewEndRef = useRef(onPreviewEnd)
 
-	const onPreviewEndRef = useRef(onPreviewEnd);
-	onPreviewEndRef.current = onPreviewEnd;
+	useEffect(() => {
+		onPreviewUpdateRef.current = onPreviewUpdate
+		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/SliceZone.tsx

@@ -1,6 +1,6 @@
-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 type { ComponentType, FC, ReactNode } from "react"
 
 /**
  * Returns the type of a `SliceLike` type.
@@ -11,7 +11,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 +22,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 +31,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 +52,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 +63,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 +75,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 +101,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 +128,8 @@ export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext =
 				? SliceLike
 				: Extract<TSlice, SliceLike<SliceType>>,
 			TContext
-		>;
-	};
+		>
+	}
 
 /**
  * React props for the `<SliceZone>` component.
@@ -139,19 +139,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 +162,56 @@ 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
 
 		if (!Comp) {
-			return <TODOSliceComponent key={key} slice={slice} />;
+			return <TODOSliceComponent key={key} slice={slice} />
 		}
 
 		if (slice.__mapped) {
-			const { __mapped, ...mappedProps } = slice;
+			const { __mapped, ...mappedProps } = slice
 
-			return <Comp key={key} {...mappedProps} />;
+			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}</>;
-};
+	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}`
 }