@prismicio/react 2.5.2 → 2.6.0-alpha.1

package/src/PrismicLink.tsx

@@ -1,270 +1,41 @@
+"use client";
+
 import * as React from "react";
-import * as prismicH from "@prismicio/helpers";
-import * as prismicT from "@prismicio/types";
 
-import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
-import { devMsg } from "./lib/devMsg";
-import { isInternalURL } from "./lib/isInternalURL";
+import {
+	PrismicLink as ServerPrismicLink,
+	LinkProps,
+	PrismicLinkProps,
+	defaultComponent,
+} from "./react-server/PrismicLink";
 
 import { usePrismicContext } from "./usePrismicContext";
 
-/**
- * Props provided to a component when rendered with `<PrismicLink>`.
- */
-export interface LinkProps {
-	/**
-	 * The URL to link.
-	 */
-	href: string;
-
-	/**
-	 * 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;
-
-	/**
-	 * The `rel` attribute for anchor elements. If the `target` prop is set to
-	 * `"_blank"`, this prop defaults to `"noopener noreferrer"`.
-	 */
-	rel?: string;
-
-	/**
-	 * Children for the component. *
-	 */
-	children?: React.ReactNode;
-}
-
-/**
- * Props for `<PrismicLink>`.
- */
-export type PrismicLinkProps<
-	InternalComponent extends React.ElementType<LinkProps> = typeof defaultInternalComponent,
-	ExternalComponent extends React.ElementType<LinkProps> = typeof defaultInternalComponent,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
-> = Omit<
-	React.ComponentPropsWithoutRef<InternalComponent> &
-		React.ComponentPropsWithoutRef<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 | null | undefined;
-		  }
-		| {
-				/**
-				 * The Prismic document to link.
-				 */
-				document: prismicT.PrismicDocument | null | undefined;
-		  }
-		| {
-				/**
-				 * The URL to link.
-				 */
-				href: string | null | undefined;
-		  }
-	);
-
-/**
- * The default component rendered for internal URLs.
- */
-const defaultInternalComponent = "a";
-
-/**
- * The default component rendered for external URLs.
- */
-const defaultExternalComponent = "a";
+export { LinkProps, PrismicLinkProps };
 
-const _PrismicLink = <
-	InternalComponent extends React.ElementType<LinkProps> = typeof defaultInternalComponent,
-	ExternalComponent extends React.ElementType<LinkProps> = typeof defaultExternalComponent,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+export const PrismicLink = React.forwardRef(function PrismicLink<
+	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
+	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
 >(
-	props: PrismicLinkProps<
-		InternalComponent,
-		ExternalComponent,
-		LinkResolverFunction
-	>,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	ref: React.Ref<any>,
-): JSX.Element | null => {
+	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps>,
+	ref: React.ForwardedRef<Element>,
+) {
 	const context = usePrismicContext();
 
-	if (!__PRODUCTION__) {
-		if ("field" in props && props.field) {
-			if (!props.field.link_type) {
-				console.error(
-					`[PrismicLink] This "field" prop value caused an error to be thrown.\n`,
-					props.field,
-				);
-				throw new Error(
-					`[PrismicLink] The provided field is missing required properties to properly render a link. The link will not render. For more details, see ${devMsg(
-						"missing-link-properties",
-					)}`,
-				);
-			} else if (
-				Object.keys(props.field).length > 1 &&
-				!("url" in props.field || "uid" in props.field || "id" in props.field)
-			) {
-				console.warn(
-					`[PrismicLink] The provided field is missing required properties to properly render a link. The link may not render correctly. For more details, see ${devMsg(
-						"missing-link-properties",
-					)}`,
-					props.field,
-				);
-			}
-		} else if ("document" in props && props.document) {
-			if (!("url" in props.document || "id" in props.document)) {
-				console.warn(
-					`[PrismicLink] The provided document is missing required properties to properly render a link. The link may not render correctly. For more details, see ${devMsg(
-						"missing-link-properties",
-					)}`,
-					props.document,
-				);
-			}
-		}
-	}
-
-	const linkResolver = props.linkResolver || context.linkResolver;
-
-	let href: string | null | undefined;
-	if ("href" in props) {
-		href = props.href;
-	} else if ("document" in props && props.document) {
-		href = prismicH.asLink(props.document, linkResolver);
-	} else if ("field" in props && props.field) {
-		href = prismicH.asLink(props.field, linkResolver);
-	}
-
-	const isInternal = href && isInternalURL(href);
-
-	const target =
-		props.target ||
-		("field" in props &&
-			props.field &&
-			"target" in props.field &&
-			props.field.target) ||
-		undefined;
-
-	const rel =
-		props.rel || (target === "_blank" ? "noopener noreferrer" : undefined);
-
-	const InternalComponent: React.ElementType<LinkProps> =
-		props.internalComponent ||
-		context.internalLinkComponent ||
-		defaultInternalComponent;
-
-	const ExternalComponent: React.ElementType<LinkProps> =
-		props.externalComponent ||
-		context.externalLinkComponent ||
-		defaultExternalComponent;
-
-	const Component = isInternal ? InternalComponent : ExternalComponent;
-
-	const passthroughProps: typeof props = Object.assign({}, props);
-	delete passthroughProps.linkResolver;
-	delete passthroughProps.internalComponent;
-	delete passthroughProps.externalComponent;
-	delete passthroughProps.rel;
-	delete passthroughProps.target;
-	if ("field" in passthroughProps) {
-		delete passthroughProps.field;
-	} else if ("document" in passthroughProps) {
-		delete passthroughProps.document;
-	} else if ("href" in passthroughProps) {
-		delete passthroughProps.href;
-	}
-
-	return href ? (
-		<Component
-			// @ts-expect-error - Expression produces a union type
-			// that is too complex to represent. This most likely
-			// happens due to the polymorphic nature of this
-			// component, passing of "extra" props, and ref
-			// forwarding support.
-			{...passthroughProps}
+	return (
+		<ServerPrismicLink
 			ref={ref}
-			href={href}
-			target={target}
-			rel={rel}
+			linkResolver={context.linkResolver}
+			internalComponent={context.internalLinkComponent}
+			externalComponent={context.externalLinkComponent}
+			{...props}
 		/>
-	) : null;
-};
-
-if (!__PRODUCTION__) {
-	_PrismicLink.displayName = "PrismicLink";
-}
-
-/**
- * React component that renders a link from a Prismic Link field.
- *
- * Different components can be rendered depending on whether the link is
- * internal or external. This is helpful when integrating with client-side
- * routers, such as a router-specific Link component.
- *
- * If a link is configured to open in a new window using `target="_blank"`,
- * `rel="noopener noreferrer"` is set by default.
- *
- * @param props - Props for the component.
- *
- * @returns The internal or external link component depending on whether the
- *   link is internal or external.
- */
-export const PrismicLink = React.forwardRef(_PrismicLink) as <
-	InternalComponent extends React.ElementType<LinkProps> = typeof defaultInternalComponent,
-	ExternalComponent extends React.ElementType<LinkProps> = typeof defaultExternalComponent,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+	);
+}) as <
+	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
+	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
 >(
-	props: PrismicLinkProps<
-		InternalComponent,
-		ExternalComponent,
-		LinkResolverFunction
-	> & { ref?: React.Ref<Element> },
-) => JSX.Element | null;
+	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
+		ref?: React.ForwardedRef<Element>;
+	},
+) => JSX.Element;

package/src/PrismicProvider.tsx

@@ -1,10 +1,10 @@
-import type * as prismic from "@prismicio/client";
+"use client";
 
 import * as React from "react";
-import * as prismicH from "@prismicio/helpers";
+import * as prismic from "@prismicio/client";
 
-import { LinkProps } from "./PrismicLink";
 import { JSXFunctionSerializer, JSXMapSerializer } from "./types";
+import { LinkProps } from "./PrismicLink";
 
 /**
  * React context value containing shared configuration for `@prismicio/react`
@@ -12,7 +12,7 @@ import { JSXFunctionSerializer, JSXMapSerializer } from "./types";
  */
 export type PrismicContextValue<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
+	LinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,
 > = {
 	/**
 	 * A `@prismicio/client` instance used to fetch content from a Prismic
@@ -64,13 +64,13 @@ export type PrismicContextValue<
 	 * The component rendered by `<PrismicLink>` for internal URLs. Defaults to
 	 * `<a>`.
 	 */
-	internalLinkComponent?: React.ElementType<LinkProps>;
+	internalLinkComponent?: React.ComponentType<LinkProps>;
 
 	/**
 	 * The component rendered by `<PrismicLink>` for external URLs. Defaults to
 	 * `<a>`.
 	 */
-	externalLinkComponent?: React.ElementType<LinkProps>;
+	externalLinkComponent?: React.ComponentType<LinkProps>;
 
 	/**
 	 * Children for the component.
@@ -88,7 +88,8 @@ export const PrismicContext = React.createContext<PrismicContextValue>({});
  * Props for `<PrismicProvider>`.
  */
 export type PrismicProviderProps<
-	LinkResolverFunction extends prismicH.LinkResolverFunction,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	LinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction<any>,
 > = PrismicContextValue<LinkResolverFunction>;
 
 /**
@@ -99,7 +100,7 @@ export type PrismicProviderProps<
  */
 export const PrismicProvider = <
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any>,
+	LinkResolverFunction extends prismic.LinkResolverFunction<any>,
 >({
 	client,
 	linkResolver,

package/src/PrismicRichText.tsx

@@ -1,285 +1,38 @@
-/* eslint-disable react/display-name */
-/* eslint-disable react/prop-types */
+"use client";
 
-import * as React from "react";
-import * as prismicT from "@prismicio/types";
-import * as prismicH from "@prismicio/helpers";
+import * as prismic from "@prismicio/client";
 import * as prismicR from "@prismicio/richtext";
 
-import { JSXFunctionSerializer, JSXMapSerializer } from "./types";
-import { PrismicLink, PrismicLinkProps } from "./PrismicLink";
-import { usePrismicContext } from "./usePrismicContext";
-
-/**
- * Props for `<PrismicRichText>`.
- */
-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.
-	 */
-	field: prismicT.RichTextField | null | undefined;
-
-	/**
-	 * 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;
-
-	/**
-	 * A function that maps a Rich Text block to a React component.
-	 *
-	 * @deprecated Use the `components` prop instead. Prefer using a map
-	 *   serializer when possible.
-	 * @see Learn about Rich Text serializers {@link https://prismic.io/docs/core-concepts/html-serializer}
-	 */
-	htmlSerializer?: JSXFunctionSerializer;
-
-	/**
-	 * A map or function that maps a Rich Text block to a React component.
-	 *
-	 * @remarks
-	 * Prefer using a map serializer over the function serializer when possible.
-	 * The map serializer is simpler to maintain.
-	 * @example A map serializer.
-	 *
-	 * ```jsx
-	 * {
-	 *   heading1: ({children}) => <Heading>{children}</Heading>
-	 * }
-	 * ```
-	 *
-	 * @example A function serializer.
-	 *
-	 * ```jsx
-	 * (type, node, content, children) => {
-	 * 	switch (type) {
-	 * 		case "heading1": {
-	 * 			return <Heading>{children}</Heading>;
-	 * 		}
-	 * 	}
-	 * };
-	 * ```
-	 */
-	components?: JSXMapSerializer | JSXFunctionSerializer;
-
-	/**
-	 * The React component rendered for links when the URL is internal.
-	 *
-	 * @defaultValue `<a>`
-	 */
-	internalLinkComponent?: PrismicLinkProps["internalComponent"];
-
-	/**
-	 * The React component rendered for links when the URL is external.
-	 *
-	 * @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<
-	// 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"];
-};
-
-const createDefaultSerializer = (
-	args: CreateDefaultSerializerArgs,
-): JSXFunctionSerializer =>
-	prismicR.wrapMapSerializer({
-		heading1: ({ children, key }) => <h1 key={key}>{children}</h1>,
-		heading2: ({ children, key }) => <h2 key={key}>{children}</h2>,
-		heading3: ({ children, key }) => <h3 key={key}>{children}</h3>,
-		heading4: ({ children, key }) => <h4 key={key}>{children}</h4>,
-		heading5: ({ children, key }) => <h5 key={key}>{children}</h5>,
-		heading6: ({ children, key }) => <h6 key={key}>{children}</h6>,
-		paragraph: ({ children, key }) => <p key={key}>{children}</p>,
-		preformatted: ({ node, key }) => <pre key={key}>{node.text}</pre>,
-		strong: ({ children, key }) => <strong key={key}>{children}</strong>,
-		em: ({ children, key }) => <em key={key}>{children}</em>,
-		listItem: ({ children, key }) => <li key={key}>{children}</li>,
-		oListItem: ({ children, key }) => <li key={key}>{children}</li>,
-		list: ({ children, key }) => <ul key={key}>{children}</ul>,
-		oList: ({ children, key }) => <ol key={key}>{children}</ol>,
-		image: ({ node, key }) => {
-			const img = (
-				<img
-					src={node.url}
-					alt={node.alt ?? undefined}
-					data-copyright={node.copyright ? node.copyright : undefined}
-				/>
-			);
-
-			return (
-				<p key={key} className="block-img">
-					{node.linkTo ? (
-						<PrismicLink
-							linkResolver={args.linkResolver}
-							internalComponent={args.internalLinkComponent}
-							externalComponent={args.externalLinkComponent}
-							field={node.linkTo}
-						>
-							{img}
-						</PrismicLink>
-					) : (
-						img
-					)}
-				</p>
-			);
-		},
-		embed: ({ node, key }) => (
-			<div
-				key={key}
-				data-oembed={node.oembed.embed_url}
-				data-oembed-type={node.oembed.type}
-				data-oembed-provider={node.oembed.provider_name}
-				dangerouslySetInnerHTML={{ __html: node.oembed.html ?? "" }}
-			/>
-		),
-		hyperlink: ({ node, children, key }) => (
-			<PrismicLink
-				key={key}
-				field={node.data}
-				linkResolver={args.linkResolver}
-				internalComponent={args.internalLinkComponent}
-				externalComponent={args.externalLinkComponent}
-			>
-				{children}
-			</PrismicLink>
-		),
-		label: ({ node, children, key }) => (
-			<span key={key} className={node.data.label}>
-				{children}
-			</span>
-		),
-		span: ({ text, key }) => {
-			const result: React.ReactNode[] = [];
-
-			let i = 0;
-			for (const line of text.split("\n")) {
-				if (i > 0) {
-					result.push(<br key={`${i}__break`} />);
-				}
-
-				result.push(<React.Fragment key={`${i}__line`}>{line}</React.Fragment>);
+import {
+	PrismicRichText as ServerPrismicRichText,
+	PrismicRichTextProps,
+} from "./react-server/PrismicRichText";
 
-				i++;
-			}
+import { usePrismicContext } from "./usePrismicContext";
 
-			return <React.Fragment key={key}>{result}</React.Fragment>;
-		},
-	});
+export { PrismicRichTextProps };
 
-/**
- * React component that renders content from a Prismic Rich Text field. By
- * default, HTML elements are rendered for each piece of content. A `heading1`
- * block will render an `<h1>` HTML element, for example. Links will use
- * `<PrismicLink>` by default which can be customized using the
- * `internalLinkComponent` and `externalLinkComponent` props.
- *
- * To customize the components that are rendered, provide a map or function
- * serializer to the `components` prop.
- *
- * Components can also be provided in a centralized location using the
- * `<PrismicProvider>` React context provider.
- *
- * @remarks
- * This component returns a React fragment with no wrapping element around the
- * content. If you need a wrapper, add a component around `<PrismicRichText>`.
- * @example Rendering a Rich Text field using the default HTMl elements.
- *
- * ```jsx
- * <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>,
- * 	}}
- * />;
- * ```
- *
- * @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}
- */
-export const PrismicRichText = <
+export const PrismicRichText = function PrismicRichText<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction,
->(
-	props: PrismicRichTextProps<LinkResolverFunction>,
-): JSX.Element | null => {
+	LinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,
+>({ components, ...restProps }: PrismicRichTextProps<LinkResolverFunction>) {
 	const context = usePrismicContext();
 
-	return React.useMemo(() => {
-		if (prismicH.isFilled.richText(props.field)) {
-			const linkResolver = props.linkResolver || context.linkResolver;
-
-			const serializer = prismicR.composeSerializers(
-				typeof props.components === "object"
-					? prismicR.wrapMapSerializer(props.components)
-					: props.components,
-				typeof context.richTextComponents === "object"
-					? prismicR.wrapMapSerializer(context.richTextComponents)
-					: context.richTextComponents,
-				createDefaultSerializer({
-					linkResolver,
-					internalLinkComponent: props.internalLinkComponent,
-					externalLinkComponent: props.externalLinkComponent,
-				}),
-			);
-
-			// The serializer is wrapped in a higher-order function
-			// that automatically applies a key to React Elements
-			// if one is not already given.
-			const serialized = prismicR.serialize<JSX.Element>(
-				props.field,
-				(type, node, text, children, key) => {
-					const result = serializer(type, node, text, children, key);
-
-					if (React.isValidElement(result) && result.key == null) {
-						return React.cloneElement(result, { key });
-					} else {
-						return result;
-					}
-				},
-			);
-
-			return <>{serialized}</>;
-		} else {
-			return props.fallback != null ? <>{props.fallback}</> : null;
-		}
-	}, [
-		props.field,
-		props.internalLinkComponent,
-		props.externalLinkComponent,
-		props.components,
-		props.linkResolver,
-		props.fallback,
-		context.linkResolver,
-		context.richTextComponents,
-	]);
+	const serializer = prismicR.composeSerializers(
+		typeof components === "object"
+			? prismicR.wrapMapSerializer(components)
+			: components,
+		typeof context.richTextComponents === "object"
+			? prismicR.wrapMapSerializer(context.richTextComponents)
+			: context.richTextComponents,
+	);
+
+	return (
+		<ServerPrismicRichText
+			components={serializer}
+			internalLinkComponent={context.internalLinkComponent}
+			externalLinkComponent={context.externalLinkComponent}
+			{...restProps}
+		/>
+	);
 };

package/src/PrismicText.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import * as prismicT from "@prismicio/types";
-import * as prismicH from "@prismicio/helpers";
+import * as prismic from "@prismicio/client";
 
 import { __PRODUCTION__ } from "./lib/__PRODUCTION__";
 import { devMsg } from "./lib/devMsg";
@@ -12,7 +11,7 @@ export type PrismicTextProps = {
 	/**
 	 * The Prismic Rich Text field to render.
 	 */
-	field: prismicT.RichTextField | null | undefined;
+	field: prismic.RichTextField | null | undefined;
 
 	/**
 	 * The string rendered when the field is empty. If a fallback is not given,
@@ -57,8 +56,8 @@ export const PrismicText = (props: PrismicTextProps): JSX.Element | null => {
 	}
 
 	return React.useMemo(() => {
-		if (prismicH.isFilled.richText(props.field)) {
-			const text = prismicH.asText(props.field, props.separator);
+		if (prismic.isFilled.richText(props.field)) {
+			const text = prismic.asText(props.field, props.separator);
 
 			return <>{text}</>;
 		} else {