@prismicio/react 3.4.0-pr.257.68f2f80 → 3.4.0-pr.257.71ee28e

package/src/PrismicToolbar.tsx

@@ -6,26 +6,28 @@ 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;
 };
@@ -34,9 +36,10 @@ 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}
  */
@@ -76,7 +79,8 @@ 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,10 +35,11 @@ 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.
  */
@@ -47,8 +48,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
 	 */
@@ -56,24 +57,29 @@ 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;
 
@@ -85,9 +91,14 @@ export type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext =
 	// 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;
 };
 
@@ -104,15 +115,19 @@ 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
@@ -145,7 +160,10 @@ 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>>;
 
@@ -154,10 +172,11 @@ 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,
@@ -170,7 +189,10 @@ 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}>
@@ -184,21 +206,31 @@ 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} />;
@@ -210,7 +242,15 @@ 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,13 +4,15 @@ 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"
- * 	```
  *
- * @param slug - Slug for the message. This corresponds to a Markdown file in the Git repository's
- *   `/messages` directory.
+ * ```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.
+ *
  * @returns The `prismic.dev/msg` URL for the given slug.
  */
 export function devMsg(slug: string): string {