@prismicio/react 2.0.0-beta.2 → 2.0.0-beta.6

package/src/PrismicLink.tsx

@@ -49,69 +49,70 @@ export type PrismicLinkProps<
 	ExternalComponent extends string | React.ComponentType<LinkProps> =
 		| string
 		| React.ComponentType<LinkProps>,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
-> = ComponentProps<InternalComponent> &
-	ComponentProps<ExternalComponent> & {
-		/**
-		 * 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.
-		 * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
-		 */
-		linkResolver?: LinkResolverFunction;
-
-		/**
-		 * The component rendered for internal URLs. Defaults to `<a>`.
-		 *
-		 * If your app uses a client-side router that requires a special Link
-		 * component, provide the Link component to this prop.
-		 */
-		internalComponent?: InternalComponent;
-
-		/**
-		 * The component rendered for external URLs. Defaults to `<a>`.
-		 */
-		externalComponent?: ExternalComponent;
-
-		/**
-		 * The `target` attribute for anchor elements. If the Prismic field is
-		 * configured to open in a new window, this prop defaults to `_blank`.
-		 */
-		target?: string | null;
-
-		/**
-		 * The `rel` attribute for anchor elements. If the `target` prop is set to
-		 * `"_blank"`, this prop defaults to `"noopener noreferrer"`.
-		 */
-		rel?: string | null;
-
-		/**
-		 * Children for the component. *
-		 */
-		children?: React.ReactNode;
-	} & (
+	LinkResolverFunction extends prismicH.LinkResolverFunction = prismicH.LinkResolverFunction,
+> = Omit<
+	ComponentProps<InternalComponent> & ComponentProps<ExternalComponent>,
+	keyof LinkProps
+> & {
+	/**
+	 * 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.
+	 * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
+	 */
+	linkResolver?: LinkResolverFunction;
+
+	/**
+	 * The component rendered for internal URLs. Defaults to `<a>`.
+	 *
+	 * If your app uses a client-side router that requires a special Link
+	 * component, provide the Link component to this prop.
+	 */
+	internalComponent?: InternalComponent;
+
+	/**
+	 * The component rendered for external URLs. Defaults to `<a>`.
+	 */
+	externalComponent?: ExternalComponent;
+
+	/**
+	 * The `target` attribute for anchor elements. If the Prismic field is
+	 * configured to open in a new window, this prop defaults to `_blank`.
+	 */
+	target?: string | null;
+
+	/**
+	 * The `rel` attribute for anchor elements. If the `target` prop is set to
+	 * `"_blank"`, this prop defaults to `"noopener noreferrer"`.
+	 */
+	rel?: string | null;
+
+	/**
+	 * Children for the component. *
+	 */
+	children?: React.ReactNode;
+} & (
 		| {
 				/**
 				 * The Prismic Link field containing the URL or document to link.
 				 *
 				 * @see Learn about Prismic Link fields {@link https://prismic.io/docs/core-concepts/link-content-relationship}
 				 */
-				field?: prismicT.LinkField;
+				field: prismicT.LinkField | null | undefined;
 		  }
 		| {
 				/**
 				 * The Prismic document to link.
 				 */
-				document?: prismicT.PrismicDocument;
+				document: prismicT.PrismicDocument | null | undefined;
 		  }
 		| {
 				/**
 				 * The URL to link.
 				 */
-				href?: string;
+				href: string | null | undefined;
 		  }
 	);
 
@@ -141,14 +142,9 @@ const defaultExternalComponent = "a";
  *   link is internal or external.
  */
 export const PrismicLink = <
-	InternalComponent extends
-		| string
-		| React.ComponentType<LinkProps> = typeof defaultInternalComponent,
-	ExternalComponent extends
-		| string
-		| React.ComponentType<LinkProps> = typeof defaultExternalComponent,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+	InternalComponent extends string | React.ComponentType<LinkProps>,
+	ExternalComponent extends string | React.ComponentType<LinkProps>,
+	LinkResolverFunction extends prismicH.LinkResolverFunction,
 >(
 	props: PrismicLinkProps<
 		InternalComponent,

package/src/PrismicProvider.tsx

@@ -1,5 +1,6 @@
+import type * as prismic from "@prismicio/client";
+
 import * as React from "react";
-import * as prismic from "@prismicio/client";
 import * as prismicH from "@prismicio/helpers";
 
 import { LinkProps } from "./PrismicLink";
@@ -45,12 +46,12 @@ export type PrismicContextValue = {
 	 *
 	 * ```jsx
 	 * (type, node, content, children) => {
-	 *  switch (type) {
-	 *    case 'heading1': {
-	 *      return <Heading>{chidlren}</Heading>
-	 *    }
-	 *  }
-	 * }
+	 * 	switch (type) {
+	 * 		case "heading1": {
+	 * 			return <Heading>{chidlren}</Heading>;
+	 * 		}
+	 * 	}
+	 * };
 	 * ```
 	 */
 	richTextComponents?: JSXMapSerializer | JSXFunctionSerializer;

package/src/PrismicRichText.tsx

@@ -56,12 +56,12 @@ export type PrismicRichTextProps = {
 	 *
 	 * ```jsx
 	 * (type, node, content, children) => {
-	 *  switch (type) {
-	 *    case 'heading1': {
-	 *      return <Heading>{chidlren}</Heading>
-	 *    }
-	 *  }
-	 * }
+	 * 	switch (type) {
+	 * 		case "heading1": {
+	 * 			return <Heading>{chidlren}</Heading>;
+	 * 		}
+	 * 	}
+	 * };
 	 * ```
 	 */
 	components?: JSXMapSerializer | JSXFunctionSerializer;
@@ -193,23 +193,24 @@ const createDefaultSerializer = (
  * @example Rendering a Rich Text field using the default HTMl elements.
  *
  * ```jsx
- * <PrismicRichText field={document.data.content} />
+ * <PrismicRichText field={document.data.content} />;
  * ```
  *
  * @example Rendering a Rich Text field using a custom set of React components.
  *
  * ```jsx
  * <PrismicRichText
- *   field={document.data.content}
- *   components={{
- * 	 heading1: ({ children }) => <Heading>{children}</Heading>
- *   }}
- * />
+ * 	field={document.data.content}
+ * 	components={{
+ * 		heading1: ({ children }) => <Heading>{children}</Heading>,
+ * 	}}
+ * />;
  * ```
  *
  * @param props - Props for the component.
  *
  * @returns The Rich Text field's content as React components.
+ *
  * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}
  * @see Learn about Rich Text serializers {@link https://prismic.io/docs/core-concepts/html-serializer}
  */

package/src/PrismicText.tsx

@@ -26,12 +26,13 @@ export type PrismicTextProps = {
  * @example Rendering a Rich Text field as plain text.
  *
  * ```jsx
- * <PrismicText field={document.data.content} />
+ * <PrismicText field={document.data.content} />;
  * ```
  *
  * @param props - Props for the component.
  *
  * @returns The Rich Text field's content as plain text.
+ *
  * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}
  */
 export const PrismicText = (props: PrismicTextProps): JSX.Element | null => {

package/src/SliceZone.tsx

@@ -136,6 +136,44 @@ export const TODOSliceComponent = __PRODUCTION__
 			);
 	  };
 
+/**
+ * Arguments for a `<SliceZone>` `resolver` function.
+ */
+type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
+	/**
+	 * The Slice to resolve to a React component.
+	 */
+	slice: TSlice;
+
+	/**
+	 * The name of the Slice.
+	 */
+	sliceName: TSlice["slice_type"];
+
+	/**
+	 * The index of the Slice in the Slice Zone.
+	 */
+	i: number;
+};
+
+/**
+ * A function that determines the rendered React component for each Slice in the
+ * Slice Zone. If a nullish value is returned, the component will fallback to
+ * the `components` or `defaultComponent` props to determine the rendered component.
+ *
+ * @deprecated Use the `components` prop instead.
+ *
+ * @param args - Arguments for the resolver function.
+ *
+ * @returns The React component to render for a Slice.
+ */
+export type SliceZoneResolver<
+	TSlice extends SliceLike = SliceLike,
+	TContext = unknown,
+> = (
+	args: SliceZoneResolverArgs<TSlice>,
+) => SliceComponentType<TSlice, TContext> | undefined | null;
+
 /**
  * React props for the `<SliceZone>` component.
  *
@@ -156,6 +194,18 @@ export type SliceZoneProps<
 	 */
 	components?: SliceZoneComponents<TSlice, TContext>;
 
+	/**
+	 * A function that determines the rendered React component for each Slice in
+	 * the Slice Zone.
+	 *
+	 * @deprecated Use the `components` prop instead.
+	 *
+	 * @param args - Arguments for the resolver function.
+	 *
+	 * @returns The React component to render for a Slice.
+	 */
+	resolver?: SliceZoneResolver<TSlice, TContext>;
+
 	/**
 	 * The React component rendered if a component mapping from the `components`
 	 * prop cannot be found.
@@ -178,19 +228,36 @@ export type SliceZoneProps<
  *
  * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
  * @typeParam TContext - Arbitrary data made available to all Slice components.
+ *
  * @returns The Slice Zone's content as React components.
+ *
  * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}
  */
 export const SliceZone = <TSlice extends SliceLike, TContext>({
 	slices = [],
 	components = {} as SliceZoneComponents<TSlice, TContext>,
+	resolver,
 	defaultComponent = TODOSliceComponent,
 	context = {} as TContext,
 }: SliceZoneProps<TSlice, TContext>): JSX.Element => {
 	const renderedSlices = React.useMemo(() => {
 		return slices.map((slice, index) => {
-			const Comp = (components[slice.slice_type as keyof typeof components] ||
+			let Comp = (components[slice.slice_type as keyof typeof components] ||
 				defaultComponent) as SliceComponentType<TSlice, TContext>;
+
+			// TODO: Remove `resolver` in v3 in favor of `components`.
+			if (resolver) {
+				const resolvedComp = resolver({
+					slice,
+					sliceName: slice.slice_type,
+					i: index,
+				});
+
+				if (resolvedComp) {
+					Comp = resolvedComp;
+				}
+			}
+
 			const key = JSON.stringify(slice);
 
 			return (