@prismicio/react 2.1.1 → 2.2.0

package/src/PrismicProvider.tsx

@@ -10,7 +10,10 @@ import { JSXFunctionSerializer, JSXMapSerializer } from "./types";
  * React context value containing shared configuration for `@prismicio/react`
  * components and hooks.
  */
-export type PrismicContextValue = {
+export type PrismicContextValue<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+> = {
 	/**
 	 * A `@prismicio/client` instance used to fetch content from a Prismic
 	 * repository. This is used by `@prismicio/react` hooks, such as
@@ -26,7 +29,7 @@ export type PrismicContextValue = {
 	 * 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?: prismicH.LinkResolverFunction;
+	linkResolver?: LinkResolverFunction;
 
 	/**
 	 * A map or function that maps a Rich Text block to a React component.
@@ -81,7 +84,9 @@ export const PrismicContext = React.createContext<PrismicContextValue>({});
 /**
  * Props for `<PrismicProvider>`.
  */
-export type PrismicProviderProps = PrismicContextValue;
+export type PrismicProviderProps<
+	LinkResolverFunction extends prismicH.LinkResolverFunction,
+> = PrismicContextValue<LinkResolverFunction>;
 
 /**
  * React context provider to share configuration for `@prismicio/react`
@@ -89,15 +94,18 @@ export type PrismicProviderProps = PrismicContextValue;
  *
  * @returns A React context provider with shared configuration.
  */
-export const PrismicProvider = ({
+export const PrismicProvider = <
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismicH.LinkResolverFunction<any>,
+>({
 	client,
 	linkResolver,
 	richTextComponents,
 	internalLinkComponent,
 	externalLinkComponent,
 	children,
-}: PrismicProviderProps): JSX.Element => {
-	const value = React.useMemo<PrismicContextValue>(
+}: PrismicProviderProps<LinkResolverFunction>): JSX.Element => {
+	const value = React.useMemo<PrismicContextValue<LinkResolverFunction>>(
 		() => ({
 			client,
 			linkResolver,

package/src/PrismicRichText.tsx

@@ -13,7 +13,10 @@ import { usePrismicContext } from "./usePrismicContext";
 /**
  * Props for `<PrismicRichText>`.
  */
-export type PrismicRichTextProps = {
+export type PrismicRichTextProps<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+> = {
 	/**
 	 * The Prismic Rich Text field to render.
 	 */
@@ -27,7 +30,7 @@ export type PrismicRichTextProps = {
 	 * 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?: PrismicLinkProps["linkResolver"];
+	linkResolver?: LinkResolverFunction;
 
 	/**
 	 * A function that maps a Rich Text block to a React component.
@@ -58,7 +61,7 @@ export type PrismicRichTextProps = {
 	 * (type, node, content, children) => {
 	 * 	switch (type) {
 	 * 		case "heading1": {
-	 * 			return <Heading>{chidlren}</Heading>;
+	 * 			return <Heading>{children}</Heading>;
 	 * 		}
 	 * 	}
 	 * };
@@ -79,10 +82,19 @@ export type PrismicRichTextProps = {
 	 * @defaultValue `<a>`
 	 */
 	externalLinkComponent?: PrismicLinkProps["externalComponent"];
+
+	/**
+	 * The value to be rendered when the field is empty. If a fallback is not
+	 * given, `null` will be rendered.
+	 */
+	fallback?: React.ReactNode;
 };
 
-type CreateDefaultSerializerArgs = {
-	linkResolver: prismicH.LinkResolverFunction<string> | undefined;
+type CreateDefaultSerializerArgs<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+> = {
+	linkResolver: LinkResolverFunction | undefined;
 	internalLinkComponent: PrismicRichTextProps["internalLinkComponent"];
 	externalLinkComponent: PrismicRichTextProps["externalLinkComponent"];
 };
@@ -214,8 +226,11 @@ const createDefaultSerializer = (
  * @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}
  */
-export const PrismicRichText = (
-	props: PrismicRichTextProps,
+export const PrismicRichText = <
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+>(
+	props: PrismicRichTextProps<LinkResolverFunction>,
 ): JSX.Element | null => {
 	const context = usePrismicContext();
 
@@ -255,7 +270,7 @@ export const PrismicRichText = (
 
 			return <>{serialized}</>;
 		} else {
-			return null;
+			return props.fallback != null ? <>{props.fallback}</> : null;
 		}
 	}, [
 		props.field,
@@ -263,6 +278,7 @@ export const PrismicRichText = (
 		props.externalLinkComponent,
 		props.components,
 		props.linkResolver,
+		props.fallback,
 		context.linkResolver,
 		context.richTextComponents,
 	]);

package/src/SliceZone.tsx

@@ -4,24 +4,57 @@ import * as prismicT from "@prismicio/types";
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
 import { pascalCase, PascalCase } from "./lib/pascalCase";
 
+/**
+ * Returns the type of a `SliceLike` type.
+ *
+ * @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"]
+	: 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.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+export type SliceLikeRestV2<SliceType extends string = string> = {
+	slice_type: prismicT.Slice<SliceType>["slice_type"];
+};
+
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+export type SliceLikeGraphQL<SliceType extends string = string> = {
+	type: prismicT.Slice<SliceType>["slice_type"];
+};
+
 /**
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone>` component.
  *
- * If using Prismic's REST API, use the `Slice` export from `@prismicio/types`
- * for a full interface.
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLike<SliceType extends string = string> = Pick<
-	prismicT.Slice<SliceType>,
-	"slice_type"
->;
+export type SliceLike<SliceType extends string = string> =
+	| SliceLikeRestV2<SliceType>
+	| SliceLikeGraphQL<SliceType>;
 
 /**
  * A looser version of the `SliceZone` type from `@prismicio/types` using `SliceLike`.
  *
- * If using Prismic's REST API, use the `SliceZone` export from
+ * If using Prismic's Rest API V2, use the `SliceZone` export from
  * `@prismicio/types` for the full type.
  *
  * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
@@ -97,10 +130,7 @@ export type SliceZoneComponents<
 	// signals to future developers that it is a placeholder and should be
 	// implemented.
 	{
-		[SliceType in keyof Record<
-			TSlice["slice_type"],
-			never
-		>]: SliceComponentType<
+		[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<
 			Extract<TSlice, SliceLike<SliceType>> extends never
 				? SliceLike
 				: Extract<TSlice, SliceLike<SliceType>>,
@@ -119,19 +149,18 @@ export const TODOSliceComponent = __PRODUCTION__
 	: <TSlice extends SliceLike, TContext>({
 			slice,
 	  }: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
+			const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
 			React.useEffect(() => {
 				console.warn(
-					`[SliceZone] Could not find a component for Slice type "${slice.slice_type}"`,
+					`[SliceZone] Could not find a component for Slice type "${type}"`,
 					slice,
 				);
-			}, [slice]);
+			}, [slice, type]);
 
 			return (
-				<section
-					data-slice-zone-todo-component=""
-					data-slice-type={slice.slice_type}
-				>
-					Could not find a component for Slice type &ldquo;{slice.slice_type}
+				<section data-slice-zone-todo-component="" data-slice-type={type}>
+					Could not find a component for Slice type &ldquo;{type}
 					&rdquo;
 				</section>
 			);
@@ -149,7 +178,7 @@ type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
 	/**
 	 * The name of the Slice.
 	 */
-	sliceName: PascalCase<TSlice["slice_type"]>;
+	sliceName: PascalCase<ExtractSliceType<TSlice>>;
 
 	/**
 	 * The index of the Slice in the Slice Zone.
@@ -243,14 +272,16 @@ export const SliceZone = <TSlice extends SliceLike, TContext>({
 }: SliceZoneProps<TSlice, TContext>): JSX.Element => {
 	const renderedSlices = React.useMemo(() => {
 		return slices.map((slice, index) => {
-			let Comp = (components[slice.slice_type as keyof typeof components] ||
+			const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
+			let Comp = (components[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: pascalCase(slice.slice_type),
+					sliceName: pascalCase(type),
 					i: index,
 				});
 

package/src/lib/pascalCase.ts

@@ -34,7 +34,7 @@ type InnerCamelCaseStringArray<
 
 type CamelCaseStringArray<Parts extends readonly string[]> = Parts extends [
 	`${infer FirstPart}`,
-	...infer RemainingParts
+	...infer RemainingParts,
 ]
 	? Uncapitalize<`${FirstPart}${InnerCamelCaseStringArray<
 			RemainingParts,