@prismicio/react 2.5.2 → 2.6.0-alpha.0

package/src/react-server/PrismicRichText.tsx

@@ -0,0 +1,267 @@
+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";
+
+/**
+ * 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,
+}: PrismicRichTextProps<LinkResolverFunction>): JSX.Element | null {
+	return React.useMemo(() => {
+		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

@@ -0,0 +1,38 @@
+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

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

package/dist/lib/pascalCase.cjs

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const pascalCase = (input) => {
-  const camelCased = input.replace(/(?:-|_)(\w)/g, (_, c) => {
-    return c ? c.toUpperCase() : "";
-  });
-  return camelCased[0].toUpperCase() + camelCased.slice(1);
-};
-exports.pascalCase = pascalCase;
-//# sourceMappingURL=pascalCase.cjs.map

package/dist/lib/pascalCase.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"pascalCase.cjs","sources":["../../../src/lib/pascalCase.ts"],"sourcesContent":["// `PascalCase`-related types have been taken from the `type-fest` package.\n//\n// They are copied here to mininize dependencies in this project.\n//\n// See: https://github.com/sindresorhus/type-fest/blob/61c35052f09caa23de5eef96d95196375d8ed498/source/camel-case.d.ts\n\ntype WordSeparators = \"-\" | \"_\" | \" \";\n\ntype Split<\n\tS extends string,\n\tDelimiter extends string,\n> = S extends `${infer Head}${Delimiter}${infer Tail}`\n\t? [Head, ...Split<Tail, Delimiter>]\n\t: S extends Delimiter\n\t? []\n\t: [S];\n\ntype InnerCamelCaseStringArray<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tParts extends readonly any[],\n\tPreviousPart,\n> = Parts extends [`${infer FirstPart}`, ...infer RemainingParts]\n\t? FirstPart extends undefined\n\t\t? \"\"\n\t\t: FirstPart extends \"\"\n\t\t? InnerCamelCaseStringArray<RemainingParts, PreviousPart>\n\t\t: `${PreviousPart extends \"\"\n\t\t\t\t? FirstPart\n\t\t\t\t: Capitalize<FirstPart>}${InnerCamelCaseStringArray<\n\t\t\t\tRemainingParts,\n\t\t\t\tFirstPart\n\t\t  >}`\n\t: \"\";\n\ntype CamelCaseStringArray<Parts extends readonly string[]> = Parts extends [\n\t`${infer FirstPart}`,\n\t...infer RemainingParts,\n]\n\t? Uncapitalize<`${FirstPart}${InnerCamelCaseStringArray<\n\t\t\tRemainingParts,\n\t\t\tFirstPart\n\t  >}`>\n\t: never;\n\ntype CamelCase<K> = K extends string\n\t? CamelCaseStringArray<\n\t\t\tSplit<K extends Uppercase<K> ? Lowercase<K> : K, WordSeparators>\n\t  >\n\t: K;\n\n/**\n * Converts a string literal to Pascal case.\n *\n * Taken from the `type-fest` package.\n *\n * See:\n * https://github.com/sindresorhus/type-fest/blob/61c35052f09caa23de5eef96d95196375d8ed498/source/pascal-case.d.ts\n */\nexport type PascalCase<Value> = CamelCase<Value> extends string\n\t? Capitalize<CamelCase<Value>>\n\t: CamelCase<Value>;\n\n/**\n * Converts a string to Pascal case.\n *\n * @param input - The string to convert.\n *\n * @returns `input` as Pascal case.\n */\nexport const pascalCase = <Input extends string>(\n\tinput: Input,\n): PascalCase<Input> => {\n\tconst camelCased = input.replace(/(?:-|_)(\\w)/g, (_, c) => {\n\t\treturn c ? c.toUpperCase() : \"\";\n\t});\n\n\treturn (camelCased[0].toUpperCase() +\n\t\tcamelCased.slice(1)) as PascalCase<Input>;\n};\n"],"names":[],"mappings":";;AAqEa,MAAA,aAAa,CACzB,UACsB;AACtB,QAAM,aAAa,MAAM,QAAQ,gBAAgB,CAAC,GAAG,MAAK;AAClD,WAAA,IAAI,EAAE,YAAA,IAAgB;AAAA,EAAA,CAC7B;AAED,SAAQ,WAAW,GAAG,YACrB,IAAA,WAAW,MAAM,CAAC;AACpB;;"}

package/dist/lib/pascalCase.js

@@ -1,10 +0,0 @@
-const pascalCase = (input) => {
-  const camelCased = input.replace(/(?:-|_)(\w)/g, (_, c) => {
-    return c ? c.toUpperCase() : "";
-  });
-  return camelCased[0].toUpperCase() + camelCased.slice(1);
-};
-export {
-  pascalCase
-};
-//# sourceMappingURL=pascalCase.js.map

package/dist/lib/pascalCase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pascalCase.js","sources":["../../../src/lib/pascalCase.ts"],"sourcesContent":["// `PascalCase`-related types have been taken from the `type-fest` package.\n//\n// They are copied here to mininize dependencies in this project.\n//\n// See: https://github.com/sindresorhus/type-fest/blob/61c35052f09caa23de5eef96d95196375d8ed498/source/camel-case.d.ts\n\ntype WordSeparators = \"-\" | \"_\" | \" \";\n\ntype Split<\n\tS extends string,\n\tDelimiter extends string,\n> = S extends `${infer Head}${Delimiter}${infer Tail}`\n\t? [Head, ...Split<Tail, Delimiter>]\n\t: S extends Delimiter\n\t? []\n\t: [S];\n\ntype InnerCamelCaseStringArray<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tParts extends readonly any[],\n\tPreviousPart,\n> = Parts extends [`${infer FirstPart}`, ...infer RemainingParts]\n\t? FirstPart extends undefined\n\t\t? \"\"\n\t\t: FirstPart extends \"\"\n\t\t? InnerCamelCaseStringArray<RemainingParts, PreviousPart>\n\t\t: `${PreviousPart extends \"\"\n\t\t\t\t? FirstPart\n\t\t\t\t: Capitalize<FirstPart>}${InnerCamelCaseStringArray<\n\t\t\t\tRemainingParts,\n\t\t\t\tFirstPart\n\t\t  >}`\n\t: \"\";\n\ntype CamelCaseStringArray<Parts extends readonly string[]> = Parts extends [\n\t`${infer FirstPart}`,\n\t...infer RemainingParts,\n]\n\t? Uncapitalize<`${FirstPart}${InnerCamelCaseStringArray<\n\t\t\tRemainingParts,\n\t\t\tFirstPart\n\t  >}`>\n\t: never;\n\ntype CamelCase<K> = K extends string\n\t? CamelCaseStringArray<\n\t\t\tSplit<K extends Uppercase<K> ? Lowercase<K> : K, WordSeparators>\n\t  >\n\t: K;\n\n/**\n * Converts a string literal to Pascal case.\n *\n * Taken from the `type-fest` package.\n *\n * See:\n * https://github.com/sindresorhus/type-fest/blob/61c35052f09caa23de5eef96d95196375d8ed498/source/pascal-case.d.ts\n */\nexport type PascalCase<Value> = CamelCase<Value> extends string\n\t? Capitalize<CamelCase<Value>>\n\t: CamelCase<Value>;\n\n/**\n * Converts a string to Pascal case.\n *\n * @param input - The string to convert.\n *\n * @returns `input` as Pascal case.\n */\nexport const pascalCase = <Input extends string>(\n\tinput: Input,\n): PascalCase<Input> => {\n\tconst camelCased = input.replace(/(?:-|_)(\\w)/g, (_, c) => {\n\t\treturn c ? c.toUpperCase() : \"\";\n\t});\n\n\treturn (camelCased[0].toUpperCase() +\n\t\tcamelCased.slice(1)) as PascalCase<Input>;\n};\n"],"names":[],"mappings":"AAqEa,MAAA,aAAa,CACzB,UACsB;AACtB,QAAM,aAAa,MAAM,QAAQ,gBAAgB,CAAC,GAAG,MAAK;AAClD,WAAA,IAAI,EAAE,YAAA,IAAgB;AAAA,EAAA,CAC7B;AAED,SAAQ,WAAW,GAAG,YACrB,IAAA,WAAW,MAAM,CAAC;AACpB;"}