@prismicio/react 2.9.0 → 3.0.0-alpha.0

package/src/react-server/PrismicLink.tsx

@@ -1,197 +0,0 @@
-import * as React from "react";
-import {
-	LinkField,
-	LinkResolverFunction,
-	PrismicDocument,
-	asLinkAttrs,
-	AsLinkAttrsConfig,
-} from "@prismicio/client";
-
-import { devMsg } from "../lib/devMsg";
-import { isInternalURL } from "../lib/isInternalURL";
-
-/**
- * The default component rendered for internal and external links.
- */
-export const defaultComponent = "a";
-
-/**
- * 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?: React.HTMLAttributeAnchorTarget;
-
-	/**
-	 * 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;
-}
-
-export type PrismicLinkProps<
-	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
-	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
-> = 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.
-	 */
-	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.
-	 * @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?: React.ElementType<InternalComponentProps>;
-
-	/**
-	 * The component rendered for external URLs. Defaults to `<a>`.
-	 */
-	externalComponent?: React.ComponentType<ExternalComponentProps>;
-
-	/**
-	 * The children to render for the link. If no children are provided, the
-	 * link's `text` property will be used.
-	 */
-	children?: React.ReactNode;
-} & (
-		| {
-				document: PrismicDocument | null | undefined;
-				href?: never;
-				field?: never;
-		  }
-		| {
-				field: LinkField | null | undefined;
-				href?: never;
-				document?: never;
-		  }
-		| {
-				href: LinkProps["href"];
-				field?: LinkField | null | undefined;
-				document?: never;
-		  }
-	);
-
-export const PrismicLink = React.forwardRef(function PrismicLink<
-	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
-	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
->(
-	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps>,
-	ref: React.ForwardedRef<Element>,
-): JSX.Element {
-	const {
-		field,
-		document: doc,
-		linkResolver,
-		internalComponent,
-		externalComponent,
-		children,
-		...restProps
-	} = props;
-
-	if (
-		typeof process !== "undefined" &&
-		process.env.NODE_ENV === "development"
-	) {
-		if (field) {
-			if (!field.link_type) {
-				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) &&
-				!("url" in field || "uid" in field || "id" in 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",
-					)}`,
-					field,
-				);
-			}
-		} else if (doc) {
-			if (!("url" in doc || "id" in doc)) {
-				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",
-					)}`,
-					doc,
-				);
-			}
-		}
-	}
-
-	const {
-		href: computedHref,
-		rel: computedRel,
-		...attrs
-	} = asLinkAttrs(field ?? doc, {
-		linkResolver,
-		rel: typeof restProps.rel === "function" ? restProps.rel : undefined,
-	});
-
-	let rel: string | undefined = computedRel;
-	if ("rel" in restProps && typeof restProps.rel !== "function") {
-		rel = restProps.rel;
-	}
-
-	const href = ("href" in restProps ? restProps.href : computedHref) || "";
-
-	const InternalComponent = (internalComponent ||
-		defaultComponent) as React.ComponentType<LinkProps>;
-	const ExternalComponent = (externalComponent ||
-		defaultComponent) as React.ComponentType<LinkProps>;
-	const Component =
-		href && isInternalURL(href) ? InternalComponent : ExternalComponent;
-
-	return (
-		<Component ref={ref} {...attrs} {...restProps} href={href} rel={rel}>
-			{"children" in props ? children : field?.text}
-		</Component>
-	);
-}) as <
-	InternalComponentProps = React.ComponentProps<typeof defaultComponent>,
-	ExternalComponentProps = React.ComponentProps<typeof defaultComponent>,
->(
-	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
-		ref?: React.ForwardedRef<Element>;
-	},
-) => JSX.Element;

package/src/react-server/PrismicRichText.tsx

@@ -1,283 +0,0 @@
-import * as React from "react";
-import * as prismic from "@prismicio/client";
-import * as prismicR from "@prismicio/richtext";
-
-import { JSXFunctionSerializer, JSXMapSerializer } from "../types";
-import { LinkProps, PrismicLink } from "./PrismicLink";
-import { devMsg } from "../lib/devMsg";
-
-/**
- * Props for `<PrismicRichText>`.
- */
-export type PrismicRichTextProps<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,
-> = {
-	/**
-	 * The Prismic Rich Text field to render.
-	 */
-	field: prismic.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 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?: React.ComponentType<LinkProps>;
-
-	/**
-	 * The React component rendered for links when the URL is external.
-	 *
-	 * @defaultValue `<a>`
-	 */
-	externalLinkComponent?: React.ComponentType<LinkProps>;
-
-	/**
-	 * 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 prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,
-> = {
-	linkResolver: LinkResolverFunction | undefined;
-	internalLinkComponent?: React.ComponentType<LinkProps>;
-	externalLinkComponent?: React.ComponentType<LinkProps>;
-};
-
-const createDefaultSerializer = <
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismic.LinkResolverFunction<any>,
->(
-	args: CreateDefaultSerializerArgs<LinkResolverFunction>,
-): 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>);
-
-				i++;
-			}
-
-			return <React.Fragment key={key}>{result}</React.Fragment>;
-		},
-	});
-
-/**
- * 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.
- *
- * @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 function PrismicRichText<
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	LinkResolverFunction extends prismic.LinkResolverFunction<any>,
->({
-	linkResolver,
-	field,
-	fallback,
-	components,
-	externalLinkComponent,
-	internalLinkComponent,
-	...restProps
-}: PrismicRichTextProps<LinkResolverFunction>): JSX.Element | null {
-	return React.useMemo(() => {
-		if (
-			typeof process !== "undefined" &&
-			process.env.NODE_ENV === "development"
-		) {
-			if ("className" in restProps) {
-				console.warn(
-					`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg(
-						"classname-is-not-a-valid-prop",
-					)}.`,
-					field,
-				);
-			}
-		}
-
-		if (prismic.isFilled.richText(field)) {
-			const serializer = prismicR.composeSerializers(
-				typeof components === "object"
-					? prismicR.wrapMapSerializer(components)
-					: components,
-				createDefaultSerializer({
-					linkResolver,
-					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 = prismicR.serialize<JSX.Element>(
-				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 fallback != null ? <>{fallback}</> : null;
-		}
-	}, [
-		field,
-		internalLinkComponent,
-		externalLinkComponent,
-		components,
-		linkResolver,
-		fallback,
-	]);
-}

package/src/react-server/index.ts

@@ -1,38 +0,0 @@
-export { PrismicLink } from "./PrismicLink";
-export { PrismicRichText } from "./PrismicRichText";
-
-export {
-	PrismicProvider,
-	useAllPrismicDocumentsByEveryTag,
-	useAllPrismicDocumentsByIDs,
-	useAllPrismicDocumentsBySomeTags,
-	useAllPrismicDocumentsByTag,
-	useAllPrismicDocumentsByType,
-	useAllPrismicDocumentsByUIDs,
-	useAllPrismicDocumentsDangerously,
-	useFirstPrismicDocument,
-	usePrismicClient,
-	usePrismicContext,
-	usePrismicDocumentByID,
-	usePrismicDocumentByUID,
-	usePrismicDocuments,
-	usePrismicDocumentsByEveryTag,
-	usePrismicDocumentsByIDs,
-	usePrismicDocumentsBySomeTags,
-	usePrismicDocumentsByTag,
-	usePrismicDocumentsByType,
-	usePrismicDocumentsByUIDs,
-	usePrismicPreviewResolver,
-	useSinglePrismicDocument,
-} from "./unsupported";
-
-// The following exports do not have RSC-specific implementations.
-// They are aliases for the default package exports.
-export {
-	Element,
-	PrismicImage,
-	PrismicText,
-	PrismicToolbar,
-	SliceZone,
-	TODOSliceComponent,
-} from "..";

package/src/react-server/unsupported.ts

@@ -1,184 +0,0 @@
-// Exports in this file are unsupported in the react-server environment.
-// All environments should export the same functions to maintian API compatability.
-
-function buildIncompatibleInServerComponentsErrorMessage(fnName: string) {
-	return `${fnName} is not supported in Server Components. Remove ${fnName} in Server Components or add the "use client" directive to the component using ${fnName}.`;
-}
-
-function buildIncompatibleQueryHookInServerComponentsErrorMessage(
-	fnName: string,
-) {
-	return `${fnName} is not supported in Server Components. Replace ${fnName} in Server Components with direct use of \`@prismicio/client\` (recommended) or add the "use client" directive to the component using the hook.`;
-}
-
-export function PrismicProvider(): JSX.Element {
-	throw new Error(
-		buildIncompatibleInServerComponentsErrorMessage("<PrismicProvider>"),
-	);
-}
-
-export function usePrismicContext() {
-	throw new Error(
-		buildIncompatibleInServerComponentsErrorMessage("usePrismicContext()"),
-	);
-}
-
-export function usePrismicClient() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicClient()",
-		),
-	);
-}
-
-export function usePrismicPreviewResolver() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicPreviewResolver()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsDangerously() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsDangerously()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsByEveryTag() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsByEveryTag()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsByIDs() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsByIDs()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsBySomeTags() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsBySomeTags()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsByTag() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsByTag()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsByType() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsByType()",
-		),
-	);
-}
-
-export function useAllPrismicDocumentsByUIDs() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useAllPrismicDocumentsByUIDs()",
-		),
-	);
-}
-
-export function useFirstPrismicDocument() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useFirstPrismicDocument()",
-		),
-	);
-}
-
-export function usePrismicDocumentByID() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentByID()",
-		),
-	);
-}
-
-export function usePrismicDocumentByUID() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentByUID()",
-		),
-	);
-}
-
-export function usePrismicDocuments() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocuments()",
-		),
-	);
-}
-
-export function usePrismicDocumentsByEveryTag() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentsByEveryTag()",
-		),
-	);
-}
-
-export function usePrismicDocumentsByIDs() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentsByIDs()",
-		),
-	);
-}
-
-export function usePrismicDocumentsBySomeTags() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentsBySomeTags()",
-		),
-	);
-}
-
-export function usePrismicDocumentsByTag() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentsByTag()",
-		),
-	);
-}
-
-export function usePrismicDocumentsByType() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentsByType()",
-		),
-	);
-}
-
-export function usePrismicDocumentsByUIDs() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"usePrismicDocumentsByUIDs()",
-		),
-	);
-}
-
-export function useSinglePrismicDocument() {
-	throw new Error(
-		buildIncompatibleQueryHookInServerComponentsErrorMessage(
-			"useSinglePrismicDocument()",
-		),
-	);
-}