@prismicio/react 2.6.2 → 2.7.0

package/src/SliceZone.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ComponentType } from "react";
 import * as prismic from "@prismicio/client";
 
 import { pascalCase, PascalCase } from "./lib/pascalCase";
@@ -8,55 +8,61 @@ import { pascalCase, PascalCase } from "./lib/pascalCase";
  *
  * @typeParam Slice - The Slice from which the type will be extracted.
  */
-type ExtractSliceType<Slice extends SliceLike> = Slice extends SliceLikeRestV2
-	? Slice["slice_type"]
-	: Slice extends SliceLikeGraphQL
-	? Slice["type"]
+type ExtractSliceType<TSlice extends SliceLike> = TSlice extends prismic.Slice
+	? TSlice["slice_type"]
+	: TSlice extends SliceLikeGraphQL
+	? TSlice["type"]
 	: never;
 
 /**
  * The minimum required properties to represent a Prismic Slice from the Prismic
- * Rest API V2 for the `<SliceZone>` component.
- *
- * If using Prismic's Rest API V2, use the `Slice` export from
- * `@prismicio/types` for a full interface.
+ * Rest API V2 for the `unstable_mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLikeRestV2<SliceType extends string = string> = {
-	slice_type: prismic.Slice<SliceType>["slice_type"];
-	id?: string;
-};
+export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
+	prismic.Slice<TSliceType>,
+	"id" | "slice_type"
+>;
 
 /**
  * The minimum required properties to represent a Prismic Slice from the Prismic
- * GraphQL API for the `<SliceZone>` component.
+ * GraphQL API for the `unstable_mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLikeGraphQL<SliceType extends string = string> = {
-	type: prismic.Slice<SliceType>["slice_type"];
+export type SliceLikeGraphQL<TSliceType extends string = string> = {
+	type: prismic.Slice<TSliceType>["slice_type"];
 };
 
 /**
  * The minimum required properties to represent a Prismic Slice for the
- * `<SliceZone>` component.
+ * `unstable_mapSliceZone()` helper.
  *
  * If using Prismic's Rest API V2, use the `Slice` export from
- * `@prismicio/types` for a full interface.
+ * `@prismicio/client` for a full interface.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLike<SliceType extends string = string> =
-	| SliceLikeRestV2<SliceType>
-	| SliceLikeGraphQL<SliceType>;
+export type SliceLike<TSliceType extends string = string> = (
+	| SliceLikeRestV2<TSliceType>
+	| SliceLikeGraphQL<TSliceType>
+) & {
+	/**
+	 * If `true`, this Slice has been modified from its original value using a
+	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+	 *
+	 * @internal
+	 */
+	__mapped?: true;
+};
 
 /**
- * A looser version of the `SliceZone` type from `@prismicio/types` using
+ * A looser version of the `SliceZone` type from `@prismicio/client` using
  * `SliceLike`.
  *
  * If using Prismic's Rest API V2, use the `SliceZone` export from
- * `@prismicio/types` for the full type.
+ * `@prismicio/client` for the full type.
  *
  * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
  */
@@ -73,7 +79,7 @@ export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
  */
 export type SliceComponentProps<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TSlice extends SliceLike = any,
+	TSlice extends SliceLike = SliceLike,
 	TContext = unknown,
 > = {
 	/**
@@ -93,7 +99,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<SliceLike>;
+	slices: SliceZoneLike<
+		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
+	>;
 
 	/**
 	 * Arbitrary data passed to `<SliceZone>` and made available to all Slice
@@ -145,38 +153,6 @@ export type SliceZoneComponents<
 		>;
 	};
 
-/**
- * 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>`.
- */
-export const TODOSliceComponent = <TSlice extends SliceLike, TContext>({
-	slice,
-}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
-	if (
-		typeof process !== "undefined" &&
-		process.env.NODE_ENV === "development"
-	) {
-		const type = "slice_type" in slice ? slice.slice_type : slice.type;
-
-		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>
-		);
-	} else {
-		return null;
-	}
-};
-
 /**
  * Arguments for a `<SliceZone>` `resolver` function.
  */
@@ -215,15 +191,10 @@ type SliceZoneResolverArgs<
 export type SliceZoneResolver<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	TSlice extends SliceLike = any,
-	TContext = unknown,
-> = (args: SliceZoneResolverArgs<TSlice>) =>
-	| SliceComponentType<
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			any,
-			TContext
-	  >
-	| undefined
-	| null;
+> = (
+	args: SliceZoneResolverArgs<TSlice>,
+) => // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ComponentType<any> | undefined | null;
 
 /**
  * React props for the `<SliceZone>` component.
@@ -241,7 +212,7 @@ export type SliceZoneProps<TContext = unknown> = {
 	 * A record mapping Slice types to React components.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	components?: Record<string, SliceComponentType<any, TContext>>;
+	components?: Record<string, ComponentType<any>>;
 
 	/**
 	 * A function that determines the rendered React component for each Slice in
@@ -254,14 +225,14 @@ export type SliceZoneProps<TContext = unknown> = {
 	 * @returns The React component to render for a Slice.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	resolver?: SliceZoneResolver<any, TContext>;
+	resolver?: SliceZoneResolver<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?: SliceComponentType<any, TContext>;
+	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
 
 	/**
 	 * Arbitrary data made available to all Slice components.
@@ -269,6 +240,38 @@ export type SliceZoneProps<TContext = unknown> = {
 	context?: TContext;
 };
 
+/**
+ * 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>`.
+ */
+export const TODOSliceComponent = <TSlice extends SliceLike, TContext>({
+	slice,
+}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
+	if (
+		typeof process !== "undefined" &&
+		process.env.NODE_ENV === "development"
+	) {
+		const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
+		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>
+		);
+	} else {
+		return null;
+	}
+};
+
 /**
  * Renders content from a Prismic Slice Zone using React components for each
  * type of Slice.
@@ -284,38 +287,50 @@ export type SliceZoneProps<TContext = unknown> = {
  *
  * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}
  */
-export const SliceZone = <TContext,>({
+export function SliceZone<TContext>({
 	slices = [],
 	components = {},
 	resolver,
 	defaultComponent = TODOSliceComponent,
 	context = {} as TContext,
-}: SliceZoneProps<TContext>): JSX.Element => {
-	const renderedSlices = React.useMemo(() => {
-		return slices.map((slice, index) => {
-			const type = "slice_type" in slice ? slice.slice_type : slice.type;
-
-			let Comp =
-				components[type as keyof typeof components] || defaultComponent;
-
-			// TODO: Remove `resolver` in v3 in favor of `components`.
-			if (resolver) {
-				const resolvedComp = resolver({
-					slice,
-					sliceName: pascalCase(type),
-					i: index,
-				});
-
-				if (resolvedComp) {
-					Comp = resolvedComp as typeof Comp;
-				}
+}: SliceZoneProps<TContext>) {
+	// TODO: Remove in v3 when the `resolver` prop is removed.
+	if (process.env.NODE_ENV === "development") {
+		if (resolver) {
+			console.warn(
+				"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.",
+			);
+		}
+	}
+
+	const renderedSlices = slices.map((slice, index) => {
+		const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
+		let Comp = components[type as keyof typeof components] || defaultComponent;
+
+		// TODO: Remove `resolver` in v3 in favor of `components`.
+		if (resolver) {
+			const resolvedComp = resolver({
+				slice,
+				sliceName: pascalCase(type),
+				i: index,
+			});
+
+			if (resolvedComp) {
+				Comp = resolvedComp as typeof Comp;
 			}
+		}
 
-			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)}`;
 
+		if (slice.__mapped) {
+			const { __mapped, ...mappedProps } = slice;
+
+			return <Comp key={key} {...mappedProps} />;
+		} else {
 			return (
 				<Comp
 					key={key}
@@ -325,8 +340,8 @@ export const SliceZone = <TContext,>({
 					context={context}
 				/>
 			);
-		});
-	}, [components, context, defaultComponent, slices, resolver]);
+		}
+	});
 
 	return <>{renderedSlices}</>;
-};
+}

package/src/clientHooks.ts

@@ -1,4 +1,4 @@
-import type * as prismicT from "@prismicio/types";
+import type * as prismic from "@prismicio/client";
 
 import {
 	ClientHookReturnType,
@@ -21,9 +21,9 @@ import {
  *
  * @see Underlying `@prismicio/client` method {@link proto.get}
  */
-export const usePrismicDocuments = <TDocument extends prismicT.PrismicDocument>(
+export const usePrismicDocuments = <TDocument extends prismic.PrismicDocument>(
 	...args: [params?: ClientMethodParameters<"get">[0] & HookOnlyParameters]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("get", args);
 
 /**
@@ -42,7 +42,7 @@ export const usePrismicDocuments = <TDocument extends prismicT.PrismicDocument>(
  * @see Underlying `@prismicio/client` method {@link proto.getFirst}
  */
 export const useFirstPrismicDocument = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [params?: ClientMethodParameters<"getFirst">[0] & HookOnlyParameters]
 ): ClientHookReturnType<TDocument> =>
@@ -65,7 +65,7 @@ export const useFirstPrismicDocument = <
  * @see Underlying `@prismicio/client` method {@link proto.getAll}
  */
 export const useAllPrismicDocumentsDangerously = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		params?: ClientMethodParameters<"dangerouslyGetAll">[0] &
@@ -91,7 +91,7 @@ export const useAllPrismicDocumentsDangerously = <
  * @see Underlying `@prismicio/client` method {@link proto.getByID}
  */
 export const usePrismicDocumentByID = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		id: ClientMethodParameters<"getByID">[0],
@@ -116,13 +116,13 @@ export const usePrismicDocumentByID = <
  * @see Underlying `@prismicio/client` method {@link proto.getByIDs}
  */
 export const usePrismicDocumentsByIDs = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		id: ClientMethodParameters<"getByIDs">[0],
 		params?: ClientMethodParameters<"getByIDs">[1] & HookOnlyParameters,
 	]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("getByIDs", args);
 
 /**
@@ -142,7 +142,7 @@ export const usePrismicDocumentsByIDs = <
  * @see Underlying `@prismicio/client` method {@link proto.getAllByIDs}
  */
 export const useAllPrismicDocumentsByIDs = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		id: ClientMethodParameters<"getAllByIDs">[0],
@@ -169,7 +169,7 @@ export const useAllPrismicDocumentsByIDs = <
  * @see Underlying `@prismicio/client` method {@link proto.getByUID}
  */
 export const usePrismicDocumentByUID = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		documentType: ClientMethodParameters<"getByUID">[0],
@@ -197,14 +197,14 @@ export const usePrismicDocumentByUID = <
  * @see Underlying `@prismicio/client` method {@link proto.getByUID}
  */
 export const usePrismicDocumentsByUIDs = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		documentType: ClientMethodParameters<"getByUIDs">[0],
 		uids: ClientMethodParameters<"getByUIDs">[1],
 		params?: ClientMethodParameters<"getByUIDs">[2] & HookOnlyParameters,
 	]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("getByUIDs", args);
 
 /**
@@ -225,7 +225,7 @@ export const usePrismicDocumentsByUIDs = <
  * @see Underlying `@prismicio/client` method {@link proto.getByUID}
  */
 export const useAllPrismicDocumentsByUIDs = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		documentType: ClientMethodParameters<"getByUIDs">[0],
@@ -252,7 +252,7 @@ export const useAllPrismicDocumentsByUIDs = <
  * @see Underlying `@prismicio/client` method {@link proto.getSingle}
  */
 export const useSinglePrismicDocument = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		documentType: ClientMethodParameters<"getSingle">[0],
@@ -278,13 +278,13 @@ export const useSinglePrismicDocument = <
  * @see Underlying `@prismicio/client` method {@link proto.getByType}
  */
 export const usePrismicDocumentsByType = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		documentType: ClientMethodParameters<"getByType">[0],
 		params?: ClientMethodParameters<"getByType">[1] & HookOnlyParameters,
 	]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("getByType", args);
 
 /**
@@ -304,7 +304,7 @@ export const usePrismicDocumentsByType = <
  * @see Underlying `@prismicio/client` method {@link proto.getAllByType}
  */
 export const useAllPrismicDocumentsByType = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		documentType: ClientMethodParameters<"getAllByType">[0],
@@ -330,13 +330,13 @@ export const useAllPrismicDocumentsByType = <
  * @see Underlying `@prismicio/client` method {@link proto.getByTag}
  */
 export const usePrismicDocumentsByTag = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		tag: ClientMethodParameters<"getByTag">[0],
 		params?: ClientMethodParameters<"getByTag">[1] & HookOnlyParameters,
 	]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("getByTag", args);
 
 /**
@@ -356,7 +356,7 @@ export const usePrismicDocumentsByTag = <
  * @see Underlying `@prismicio/client` method {@link proto.getAllByTag}
  */
 export const useAllPrismicDocumentsByTag = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		tag: ClientMethodParameters<"getAllByTag">[0],
@@ -383,13 +383,13 @@ export const useAllPrismicDocumentsByTag = <
  * @see Underlying `@prismicio/client` method {@link proto.getByTags}
  */
 export const usePrismicDocumentsBySomeTags = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		tag: ClientMethodParameters<"getBySomeTags">[0],
 		params?: ClientMethodParameters<"getBySomeTags">[1] & HookOnlyParameters,
 	]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("getBySomeTags", args);
 
 /**
@@ -410,7 +410,7 @@ export const usePrismicDocumentsBySomeTags = <
  * @see Underlying `@prismicio/client` method {@link proto.getAllByTags}
  */
 export const useAllPrismicDocumentsBySomeTags = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		tag: ClientMethodParameters<"getAllBySomeTags">[0],
@@ -436,13 +436,13 @@ export const useAllPrismicDocumentsBySomeTags = <
  * @see Underlying `@prismicio/client` method {@link proto.getByTags}
  */
 export const usePrismicDocumentsByEveryTag = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		tag: ClientMethodParameters<"getByEveryTag">[0],
 		params?: ClientMethodParameters<"getByEveryTag">[1] & HookOnlyParameters,
 	]
-): ClientHookReturnType<prismicT.Query<TDocument>> =>
+): ClientHookReturnType<prismic.Query<TDocument>> =>
 	useStatefulPrismicClientMethod("getByEveryTag", args);
 
 /**
@@ -462,7 +462,7 @@ export const usePrismicDocumentsByEveryTag = <
  * @see Underlying `@prismicio/client` method {@link proto.getAllByTags}
  */
 export const useAllPrismicDocumentsByEveryTag = <
-	TDocument extends prismicT.PrismicDocument,
+	TDocument extends prismic.PrismicDocument,
 >(
 	...args: [
 		tag: ClientMethodParameters<"getAllByEveryTag">[0],