@prismicio/react 3.4.0 → 3.4.1-canary.56c63d1

package/src/PrismicLink.tsx

@@ -1,3 +1,11 @@
+import {
+	type LinkField,
+	type LinkResolverFunction,
+	type PrismicDocument,
+	asLinkAttrs,
+	type AsLinkAttrsConfig,
+} from "@prismicio/client"
+import { DEV } from "esm-env"
 import {
 	type ComponentProps,
 	type ComponentType,
@@ -5,109 +13,96 @@ import {
 	type HTMLAttributeAnchorTarget,
 	type ReactNode,
 	forwardRef,
-} from "react";
-import {
-	type LinkField,
-	type LinkResolverFunction,
-	type PrismicDocument,
-	asLinkAttrs,
-	type AsLinkAttrsConfig,
-} from "@prismicio/client";
-import { DEV } from "esm-env";
+} from "react"
 
-import { devMsg } from "./lib/devMsg.js";
+import { devMsg } from "./lib/devMsg.js"
 
 /** The default component rendered for internal and external links. */
-const defaultComponent = "a";
+const defaultComponent = "a"
 
 /** Props provided to a component when rendered with `<PrismicLink>`. */
 export interface LinkProps {
 	/** The URL to link. */
-	href: string;
+	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`.
+	 * The `target` attribute for anchor elements. If the Prismic field is configured to open in a new
+	 * window, this prop defaults to `_blank`.
 	 */
-	target?: HTMLAttributeAnchorTarget;
+	target?: HTMLAttributeAnchorTarget
 
 	/**
-	 * The `rel` attribute for anchor elements. If the `target` prop is set to
-	 * `"_blank"`, this prop defaults to `"noopener noreferrer"`.
+	 * The `rel` attribute for anchor elements. If the `target` prop is set to `"_blank"`, this prop
+	 * defaults to `"noopener noreferrer"`.
 	 */
-	rel?: string;
+	rel?: string
 
 	/** Children for the component. */
-	children?: ReactNode;
+	children?: ReactNode
 }
 
 export type PrismicLinkProps<
 	InternalComponentProps = ComponentProps<typeof defaultComponent>,
 	ExternalComponentProps = ComponentProps<typeof defaultComponent>,
-> = Omit<
-	InternalComponentProps & ExternalComponentProps,
-	"rel" | "href" | "children"
-> & {
+> = Omit<InternalComponentProps & ExternalComponentProps, "rel" | "href" | "children"> & {
 	/**
-	 * The `rel` attribute for the link. By default, `"noreferrer"` is provided if
-	 * the link's URL is external. This prop can be provided a function to use the
-	 * link's metadata to determine the `rel` value.
+	 * The `rel` attribute for the link. By default, `"noreferrer"` is provided if the link's URL is
+	 * external. This prop can be provided a function to use the link's metadata to determine the
+	 * `rel` value.
 	 */
-	rel?: string | AsLinkAttrsConfig["rel"];
+	rel?: string | AsLinkAttrsConfig["rel"]
 
 	/**
 	 * 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.
-	 *
+	 *   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/routes}
 	 */
-	linkResolver?: LinkResolverFunction;
+	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.
+	 * If your app uses a client-side router that requires a special Link component, provide the Link
+	 * component to this prop.
 	 */
-	internalComponent?: ComponentType<InternalComponentProps>;
+	internalComponent?: ComponentType<InternalComponentProps>
 
 	/** The component rendered for external URLs. Defaults to `<a>`. */
-	externalComponent?: ComponentType<ExternalComponentProps>;
+	externalComponent?: ComponentType<ExternalComponentProps>
 
 	/**
-	 * The children to render for the link. If no children are provided, the
-	 * link's `text` property will be used.
+	 * The children to render for the link. If no children are provided, the link's `text` property
+	 * will be used.
 	 */
-	children?: ReactNode;
+	children?: ReactNode
 } & (
 		| {
-				document: PrismicDocument | null | undefined;
-				href?: never;
-				field?: never;
+				document: PrismicDocument | null | undefined
+				href?: never
+				field?: never
 		  }
 		| {
-				field: LinkField | null | undefined;
-				href?: never;
-				document?: never;
+				field: LinkField | null | undefined
+				href?: never
+				document?: never
 		  }
 		| {
-				href: LinkProps["href"];
-				field?: LinkField | null | undefined;
-				document?: never;
+				href: LinkProps["href"]
+				field?: LinkField | null | undefined
+				document?: never
 		  }
-	);
+	)
 
 /**
  * Renders a link from a Prismic link field or page.
  *
  * @example
- *
- * ```tsx
- * <PrismicLink field={slice.primary.link}>Click here</PrismicLink>;
- * ```
+ * 	;```tsx
+ * 	<PrismicLink field={slice.primary.link}>Click here</PrismicLink>;
+ * 	```
  *
  * @see Learn how to display links and use variants for styling: {@link https://prismic.io/docs/fields/link}
  */
@@ -126,7 +121,7 @@ export const PrismicLink = forwardRef(function PrismicLink<
 		externalComponent,
 		children,
 		...restProps
-	} = props;
+	} = props
 
 	if (DEV) {
 		if (field) {
@@ -134,16 +129,14 @@ export const PrismicLink = forwardRef(function PrismicLink<
 				console.error(
 					`[PrismicLink] This "field" prop value caused an error to be thrown.\n`,
 					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 (
-				("text" in field
-					? Object.keys(field).length > 2
-					: Object.keys(field).length > 1) &&
+				("text" in field ? Object.keys(field).length > 2 : Object.keys(field).length > 1) &&
 				!("url" in field || "uid" in field || "id" in field)
 			) {
 				console.warn(
@@ -151,7 +144,7 @@ export const PrismicLink = forwardRef(function PrismicLink<
 						"missing-link-properties",
 					)}`,
 					field,
-				);
+				)
 			}
 		} else if (doc) {
 			if (!("url" in doc || "id" in doc)) {
@@ -160,7 +153,7 @@ export const PrismicLink = forwardRef(function PrismicLink<
 						"missing-link-properties",
 					)}`,
 					doc,
-				);
+				)
 			}
 		}
 	}
@@ -172,50 +165,47 @@ export const PrismicLink = forwardRef(function PrismicLink<
 	} = asLinkAttrs(field ?? doc, {
 		linkResolver,
 		rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
-	});
+	})
 
-	let rel: string | undefined = computedRel;
+	let rel: string | undefined = computedRel
 	if ("rel" in restProps && typeof restProps.rel !== "function") {
-		rel = restProps.rel;
+		rel = restProps.rel
 	}
 
-	const href = ("href" in restProps ? restProps.href : computedHref) || "";
+	const href = ("href" in restProps ? restProps.href : computedHref) || ""
 
-	const InternalComponent = (internalComponent ||
-		defaultComponent) as ComponentType<LinkProps>;
-	const ExternalComponent = (externalComponent ||
-		defaultComponent) as ComponentType<LinkProps>;
+	const InternalComponent = (internalComponent || defaultComponent) as ComponentType<LinkProps>
+	const ExternalComponent = (externalComponent || defaultComponent) as ComponentType<LinkProps>
 	const Component = href
 		? isInternalURL(href)
 			? InternalComponent
 			: ExternalComponent
-		: InternalComponent;
+		: InternalComponent
 
 	return (
 		<Component ref={ref} {...attrs} {...restProps} href={href} rel={rel}>
 			{"children" in props ? children : field?.text}
 		</Component>
-	);
+	)
 }) as <
 	InternalComponentProps = ComponentProps<typeof defaultComponent>,
 	ExternalComponentProps = ComponentProps<typeof defaultComponent>,
 >(
 	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
-		ref?: ForwardedRef<Element>;
+		ref?: ForwardedRef<Element>
 	},
-) => ReactNode;
+) => ReactNode
 
 /**
  * Determines if a URL is internal or external.
  *
  * @param url - The URL to check if internal or external.
- *
  * @returns `true` if `url` is internal, `false` otherwise.
  */
 // TODO: This does not detect all relative URLs as internal such as `about` or `./about`. This function assumes relative URLs start with a "/" or "#"`.
 export function isInternalURL(url: string): boolean {
-	const isInternal = /^(\/(?!\/)|#)/.test(url);
-	const isSpecialLink = !isInternal && !/^https?:\/\//.test(url);
+	const isInternal = /^(\/(?!\/)|#)/.test(url)
+	const isSpecialLink = !isInternal && !/^https?:\/\//.test(url)
 
-	return isInternal && !isSpecialLink;
+	return isInternal && !isSpecialLink
 }

package/src/PrismicRichText.tsx

@@ -1,19 +1,17 @@
-import { type LinkProps, PrismicLink } from "./PrismicLink.js";
-import { devMsg } from "./lib/devMsg.js";
 import {
 	isFilled,
 	type LinkResolverFunction,
 	type RichTextField,
 	type RTAnyNode,
-} from "@prismicio/client";
+} from "@prismicio/client"
 import {
 	composeSerializers,
 	serialize,
 	wrapMapSerializer,
 	type RichTextFunctionSerializer,
 	type RichTextMapSerializer,
-} from "@prismicio/client/richtext";
-import { DEV } from "esm-env";
+} from "@prismicio/client/richtext"
+import { DEV } from "esm-env"
 import {
 	cloneElement,
 	type ComponentType,
@@ -21,110 +19,108 @@ import {
 	Fragment,
 	isValidElement,
 	type ReactNode,
-} from "react";
+} from "react"
+
+import { devMsg } from "./lib/devMsg.js"
+import { type LinkProps, PrismicLink } from "./PrismicLink.js"
 
 /**
- * A function mapping rich text block types to React Components. It is used to
- * render rich text fields.
+ * A function mapping rich text block types to React Components. It is used to render rich text
+ * fields.
  *
  * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
-export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
+export type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>
 
 /**
- * A map of rich text block types to React Components. It is used to render rich
- * text fields.
+ * A map of rich text block types to React Components. It is used to render rich text fields.
  *
  * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
  */
-export type RichTextComponents = RichTextMapSerializer<ReactNode>;
+export type RichTextComponents = RichTextMapSerializer<ReactNode>
 
-/**
- * @deprecated Use `RichTextComponents` instead.
- */
-export type JSXMapSerializer = RichTextComponents;
+/** @deprecated Use `RichTextComponents` instead. */
+export type JSXMapSerializer = RichTextComponents
 
 /** Props for `<PrismicRichText>`. */
 export type PrismicRichTextProps = {
 	/** The Prismic rich text field to render. */
-	field: RichTextField | null | undefined;
+	field: 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.
-	 *
+	 *   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/routes}
 	 */
-	linkResolver?: LinkResolverFunction;
+	linkResolver?: LinkResolverFunction
 
 	/**
 	 * 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.
+	 *   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>
-	 * }
-	 * ```
+	 * 	```jsx
+	 * 	{
+	 * 	heading1: ({children}) => <Heading>{children}</Heading>
+	 * 	}
+	 * 	```
 	 *
-	 * @example A function serializer.
+	 * @example
+	 * 	A function serializer.
 	 *
-	 * ```jsx
-	 * (type, node, content, children) => {
+	 * 	```jsx
+	 * 	(type, node, content, children) => {
 	 * 	switch (type) {
-	 * 		case "heading1": {
-	 * 			return <Heading>{children}</Heading>;
-	 * 		}
+	 * 	case "heading1": {
+	 * 	return <Heading>{children}</Heading>;
 	 * 	}
-	 * };
-	 * ```
+	 * 	}
+	 * 	};
+	 * 	```
 	 */
-	components?: RichTextComponents | JSXFunctionSerializer;
+	components?: RichTextComponents | JSXFunctionSerializer
 
 	/**
 	 * The React component rendered for links when the URL is internal.
 	 *
 	 * @defaultValue `<a>`
 	 */
-	internalLinkComponent?: ComponentType<LinkProps>;
+	internalLinkComponent?: ComponentType<LinkProps>
 
 	/**
 	 * The React component rendered for links when the URL is external.
 	 *
 	 * @defaultValue `<a>`
 	 */
-	externalLinkComponent?: ComponentType<LinkProps>;
+	externalLinkComponent?: ComponentType<LinkProps>
 
 	/**
-	 * The value to be rendered when the field is empty. If a fallback is not
-	 * given, `null` will be rendered.
+	 * The value to be rendered when the field is empty. If a fallback is not given, `null` will be
+	 * rendered.
 	 */
-	fallback?: ReactNode;
-};
+	fallback?: ReactNode
+}
 
 type CreateDefaultSerializerArgs = {
-	linkResolver: LinkResolverFunction | undefined;
-	internalLinkComponent?: ComponentType<LinkProps>;
-	externalLinkComponent?: ComponentType<LinkProps>;
-};
+	linkResolver: LinkResolverFunction | undefined
+	internalLinkComponent?: ComponentType<LinkProps>
+	externalLinkComponent?: ComponentType<LinkProps>
+}
 
 const getDir = (node: RTAnyNode): "rtl" | undefined => {
 	if ("direction" in node && node.direction === "rtl") {
-		return "rtl";
+		return "rtl"
 	}
-};
+}
 
-const createDefaultSerializer = (
-	args: CreateDefaultSerializerArgs,
-): JSXFunctionSerializer =>
+const createDefaultSerializer = (args: CreateDefaultSerializerArgs): JSXFunctionSerializer =>
 	wrapMapSerializer<ReactNode>({
 		heading1: ({ node, children, key }) => (
 			<h1 key={key} dir={getDir(node)}>
@@ -183,7 +179,7 @@ const createDefaultSerializer = (
 					alt={node.alt ?? undefined}
 					data-copyright={node.copyright ? node.copyright : undefined}
 				/>
-			);
+			)
 
 			return (
 				<p key={key} className="block-img">
@@ -200,7 +196,7 @@ const createDefaultSerializer = (
 						img
 					)}
 				</p>
-			);
+			)
 		},
 		embed: ({ node, key }) => (
 			<div
@@ -228,31 +224,30 @@ const createDefaultSerializer = (
 			</span>
 		),
 		span: ({ text, key }) => {
-			const result: ReactNode[] = [];
+			const result: ReactNode[] = []
 
-			let i = 0;
+			let i = 0
 			for (const line of text.split("\n")) {
 				if (i > 0) {
-					result.push(<br key={`${i}__break`} />);
+					result.push(<br key={`${i}__break`} />)
 				}
 
-				result.push(<Fragment key={`${i}__line`}>{line}</Fragment>);
+				result.push(<Fragment key={`${i}__line`}>{line}</Fragment>)
 
-				i++;
+				i++
 			}
 
-			return <Fragment key={key}>{result}</Fragment>;
+			return <Fragment key={key}>{result}</Fragment>
 		},
-	});
+	})
 
 /**
  * Renders content from a Prismic rich text field as React components.
  *
  * @example
- *
- * ```tsx
- * <PrismicRichText field={slice.primary.text} />;
- * ```
+ * 	;```tsx
+ * 	<PrismicRichText field={slice.primary.text} />;
+ * 	```
  *
  * @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
  */
@@ -265,7 +260,7 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 		externalLinkComponent,
 		internalLinkComponent,
 		...restProps
-	} = props;
+	} = props
 
 	if (DEV) {
 		if ("className" in restProps) {
@@ -274,12 +269,12 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 					"classname-is-not-a-valid-prop",
 				)}.`,
 				field,
-			);
+			)
 		}
 	}
 
 	if (!isFilled.richText(field)) {
-		return fallback != null ? <>{fallback}</> : null;
+		return fallback != null ? <>{fallback}</> : null
 	}
 
 	const serializer = composeSerializers<ReactNode>(
@@ -289,27 +284,24 @@ export const PrismicRichText: FC<PrismicRichTextProps> = (props) => {
 			internalLinkComponent,
 			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 = serialize<ReactNode>(
-		field,
-		(type, node, text, children, key) => {
-			const result = serializer(type, node, text, children, key);
+	const serialized = serialize<ReactNode>(field, (type, node, text, children, key) => {
+		const result = serializer(type, node, text, children, key)
 
-			if (isValidElement(result) && result.key == null) {
-				return cloneElement(result, { key });
-			} else {
-				return result;
-			}
-		},
-	);
+		if (isValidElement(result) && result.key == null) {
+			return cloneElement(result, { key })
+		} else {
+			return result
+		}
+	})
 
 	if (!serialized) {
-		return fallback != null ? <>{fallback}</> : null;
+		return fallback != null ? <>{fallback}</> : null
 	}
 
-	return <>{serialized}</>;
-};
+	return <>{serialized}</>
+}