@prismicio/react 2.6.1 → 2.7.0

package/dist/react-server/PrismicRichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicRichText.js","sources":["../../../src/react-server/PrismicRichText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\nimport * as prismicR from \"@prismicio/richtext\";\n\nimport { JSXFunctionSerializer, JSXMapSerializer } from \"../types\";\nimport { LinkProps, PrismicLink } from \"./PrismicLink\";\nimport { devMsg } from \"../lib/devMsg\";\n\n/**\n * Props for `<PrismicRichText>`.\n */\nexport type PrismicRichTextProps<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,\n> = {\n\t/**\n\t * The Prismic Rich Text field to render.\n\t */\n\tfield: prismic.RichTextField | null | undefined;\n\n\t/**\n\t * The Link Resolver used to resolve links.\n\t *\n\t * @remarks\n\t * If your app uses Route Resolvers when querying for your Prismic\n\t * repository's content, a Link Resolver does not need to be provided.\n\t * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction;\n\n\t/**\n\t * A map or function that maps a Rich Text block to a React component.\n\t *\n\t * @remarks\n\t * Prefer using a map serializer over the function serializer when possible.\n\t * The map serializer is simpler to maintain.\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t *   heading1: ({children}) => <Heading>{children}</Heading>\n\t * }\n\t * ```\n\t *\n\t * @example A function serializer.\n\t *\n\t * ```jsx\n\t * (type, node, content, children) => {\n\t * \tswitch (type) {\n\t * \t\tcase \"heading1\": {\n\t * \t\t\treturn <Heading>{children}</Heading>;\n\t * \t\t}\n\t * \t}\n\t * };\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer | JSXFunctionSerializer;\n\n\t/**\n\t * The React component rendered for links when the URL is internal.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\tinternalLinkComponent?: React.ComponentType<LinkProps>;\n\n\t/**\n\t * The React component rendered for links when the URL is external.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\texternalLinkComponent?: React.ComponentType<LinkProps>;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: React.ReactNode;\n};\n\ntype CreateDefaultSerializerArgs<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,\n> = {\n\tlinkResolver: LinkResolverFunction | undefined;\n\tinternalLinkComponent?: React.ComponentType<LinkProps>;\n\texternalLinkComponent?: React.ComponentType<LinkProps>;\n};\n\nconst createDefaultSerializer = <\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any>,\n>(\n\targs: CreateDefaultSerializerArgs<LinkResolverFunction>,\n): JSXFunctionSerializer =>\n\tprismicR.wrapMapSerializer({\n\t\theading1: ({ children, key }) => <h1 key={key}>{children}</h1>,\n\t\theading2: ({ children, key }) => <h2 key={key}>{children}</h2>,\n\t\theading3: ({ children, key }) => <h3 key={key}>{children}</h3>,\n\t\theading4: ({ children, key }) => <h4 key={key}>{children}</h4>,\n\t\theading5: ({ children, key }) => <h5 key={key}>{children}</h5>,\n\t\theading6: ({ children, key }) => <h6 key={key}>{children}</h6>,\n\t\tparagraph: ({ children, key }) => <p key={key}>{children}</p>,\n\t\tpreformatted: ({ node, key }) => <pre key={key}>{node.text}</pre>,\n\t\tstrong: ({ children, key }) => <strong key={key}>{children}</strong>,\n\t\tem: ({ children, key }) => <em key={key}>{children}</em>,\n\t\tlistItem: ({ children, key }) => <li key={key}>{children}</li>,\n\t\toListItem: ({ children, key }) => <li key={key}>{children}</li>,\n\t\tlist: ({ children, key }) => <ul key={key}>{children}</ul>,\n\t\toList: ({ children, key }) => <ol key={key}>{children}</ol>,\n\t\timage: ({ node, key }) => {\n\t\t\tconst img = (\n\t\t\t\t<img\n\t\t\t\t\tsrc={node.url}\n\t\t\t\t\talt={node.alt ?? undefined}\n\t\t\t\t\tdata-copyright={node.copyright ? node.copyright : undefined}\n\t\t\t\t/>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<p key={key} className=\"block-img\">\n\t\t\t\t\t{node.linkTo ? (\n\t\t\t\t\t\t<PrismicLink\n\t\t\t\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t\t\t\t\tfield={node.linkTo}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{img}\n\t\t\t\t\t\t</PrismicLink>\n\t\t\t\t\t) : (\n\t\t\t\t\t\timg\n\t\t\t\t\t)}\n\t\t\t\t</p>\n\t\t\t);\n\t\t},\n\t\tembed: ({ node, key }) => (\n\t\t\t<div\n\t\t\t\tkey={key}\n\t\t\t\tdata-oembed={node.oembed.embed_url}\n\t\t\t\tdata-oembed-type={node.oembed.type}\n\t\t\t\tdata-oembed-provider={node.oembed.provider_name}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: node.oembed.html ?? \"\" }}\n\t\t\t/>\n\t\t),\n\t\thyperlink: ({ node, children, key }) => (\n\t\t\t<PrismicLink\n\t\t\t\tkey={key}\n\t\t\t\tfield={node.data}\n\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</PrismicLink>\n\t\t),\n\t\tlabel: ({ node, children, key }) => (\n\t\t\t<span key={key} className={node.data.label}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t),\n\t\tspan: ({ text, key }) => {\n\t\t\tconst result: React.ReactNode[] = [];\n\n\t\t\tlet i = 0;\n\t\t\tfor (const line of text.split(\"\\n\")) {\n\t\t\t\tif (i > 0) {\n\t\t\t\t\tresult.push(<br key={`${i}__break`} />);\n\t\t\t\t}\n\n\t\t\t\tresult.push(<React.Fragment key={`${i}__line`}>{line}</React.Fragment>);\n\n\t\t\t\ti++;\n\t\t\t}\n\n\t\t\treturn <React.Fragment key={key}>{result}</React.Fragment>;\n\t\t},\n\t});\n\n/**\n * React component that renders content from a Prismic Rich Text field. By\n * default, HTML elements are rendered for each piece of content. A `heading1`\n * block will render an `<h1>` HTML element, for example. Links will use\n * `<PrismicLink>` by default which can be customized using the\n * `internalLinkComponent` and `externalLinkComponent` props.\n *\n * To customize the components that are rendered, provide a map or function\n * serializer to the `components` prop.\n *\n * @remarks\n * This component returns a React fragment with no wrapping element around the\n * content. If you need a wrapper, add a component around `<PrismicRichText>`.\n * @example Rendering a Rich Text field using the default HTMl elements.\n *\n * ```jsx\n * <PrismicRichText field={document.data.content} />;\n * ```\n *\n * @example Rendering a Rich Text field using a custom set of React components.\n *\n * ```jsx\n * <PrismicRichText\n * \tfield={document.data.content}\n * \tcomponents={{\n * \t\theading1: ({ children }) => <Heading>{children}</Heading>,\n * \t}}\n * />;\n * ```\n *\n * @param props - Props for the component.\n *\n * @returns The Rich Text field's content as React components.\n *\n * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}\n * @see Learn about Rich Text serializers {@link https://prismic.io/docs/core-concepts/html-serializer}\n */\nexport function PrismicRichText<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any>,\n>({\n\tlinkResolver,\n\tfield,\n\tfallback,\n\tcomponents,\n\texternalLinkComponent,\n\tinternalLinkComponent,\n\t...restProps\n}: PrismicRichTextProps<LinkResolverFunction>): JSX.Element | null {\n\treturn React.useMemo(() => {\n\t\tif (process.env.NODE_ENV === \"development\") {\n\t\t\tif (\"className\" in restProps) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg(\n\t\t\t\t\t\t\"classname-is-not-a-valid-prop\",\n\t\t\t\t\t)}.`,\n\t\t\t\t\tfield,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tif (prismic.isFilled.richText(field)) {\n\t\t\tconst serializer = prismicR.composeSerializers(\n\t\t\t\ttypeof components === \"object\"\n\t\t\t\t\t? prismicR.wrapMapSerializer(components)\n\t\t\t\t\t: components,\n\t\t\t\tcreateDefaultSerializer({\n\t\t\t\t\tlinkResolver,\n\t\t\t\t\tinternalLinkComponent,\n\t\t\t\t\texternalLinkComponent,\n\t\t\t\t}),\n\t\t\t);\n\n\t\t\t// The serializer is wrapped in a higher-order function\n\t\t\t// that automatically applies a key to React Elements\n\t\t\t// if one is not already given.\n\t\t\tconst serialized = prismicR.serialize<JSX.Element>(\n\t\t\t\tfield,\n\t\t\t\t(type, node, text, children, key) => {\n\t\t\t\t\tconst result = serializer(type, node, text, children, key);\n\n\t\t\t\t\tif (React.isValidElement(result) && result.key == null) {\n\t\t\t\t\t\treturn React.cloneElement(result, { key });\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn result;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t);\n\n\t\t\treturn <>{serialized}</>;\n\t\t} else {\n\t\t\treturn fallback != null ? <>{fallback}</> : null;\n\t\t}\n\t}, [\n\t\tfield,\n\t\tinternalLinkComponent,\n\t\texternalLinkComponent,\n\t\tcomponents,\n\t\tlinkResolver,\n\t\tfallback,\n\t]);\n}\n"],"names":["prismic.isFilled.richText"],"mappings":";;;;;;AAwFA,MAAM,0BAA0B,CAI/B,SAEA,SAAS,kBAAkB;AAAA,EAC1B,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,WAAW,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,KAAa,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,cAAc,CAAC,EAAE,MAAM,UAAW,oBAAA,OAAA,EAAe,UAAK,KAAA,KAAA,GAAX,GAAgB;AAAA,EAC3D,QAAQ,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,UAAkB,EAAA,SAAA,GAAN,GAAe;AAAA,EAC3D,IAAI,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACnD,UAAU,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACzD,WAAW,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EAC1D,MAAM,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACrD,OAAO,CAAC,EAAE,UAAU,IAAU,MAAA,oBAAC,MAAc,EAAA,SAAA,GAAN,GAAe;AAAA,EACtD,OAAO,CAAC,EAAE,MAAM,UAAS;AACxB,UAAM,MACL,oBAAC,OACA,EAAA,KAAK,KAAK,KACV,KAAK,KAAK,OAAO,QACjB,kBAAgB,KAAK,YAAY,KAAK,YAAY,OAAU,CAAA;AAK7D,WAAA,oBAAC,OAAY,WAAU,aACrB,eAAK,SACL,oBAAC,aACA,EAAA,cAAc,KAAK,cACnB,mBAAmB,KAAK,uBACxB,mBAAmB,KAAK,uBACxB,OAAO,KAAK,QAEX,UAAA,IACF,CAAA,IAEA,IAAA,GAXM,GAaR;AAAA,EAEF;AAAA,EACA,OAAO,CAAC,EAAE,MAAM,IAAK,MACnB,oBAAA,OAAA,EAEA,eAAa,KAAK,OAAO,WACzB,oBAAkB,KAAK,OAAO,MAC9B,wBAAsB,KAAK,OAAO,eAClC,yBAAyB,EAAE,QAAQ,KAAK,OAAO,QAAQ,GAAI,EAAA,GAJtD,GAIuD;AAAA,EAG9D,WAAW,CAAC,EAAE,MAAM,UAAU,IAAK,MACjC,oBAAA,aAAA,EAEA,OAAO,KAAK,MACZ,cAAc,KAAK,cACnB,mBAAmB,KAAK,uBACxB,mBAAmB,KAAK,uBAEvB,SAAA,GANI,GAON;AAAA,EAED,OAAO,CAAC,EAAE,MAAM,UAAU,IAAK,MAC7B,oBAAA,QAAA,EAAe,WAAW,KAAK,KAAK,OACnC,YADS,GAEX;AAAA,EAED,MAAM,CAAC,EAAE,MAAM,UAAS;AACvB,UAAM,SAA4B,CAAA;AAElC,QAAI,IAAI;AACR,eAAW,QAAQ,KAAK,MAAM,IAAI,GAAG;AACpC,UAAI,IAAI,GAAG;AACV,eAAO,KAAK,oBAAC,MAAQ,CAAA,GAAA,GAAG,UAAW,CAAG;AAAA,MACtC;AAEM,aAAA,yBAAM,MAAM,UAAN,EAAmC,UAAf,KAAA,GAAA,GAAG,SAAiB,CAAiB;AAEtE;AAAA,IACA;AAED,WAAQ,oBAAA,MAAM,UAAN,EAA0B,oBAAN,GAAa;AAAA,EAC1C;AACA,CAAA;AAuCc,SAAA,gBAGd,EACD,cACA,OACA,UACA,YACA,uBACA,uBACA,GAAG,aACyC;AACrC,SAAA,MAAM,QAAQ,MAAK;AACrB,QAAA,QAAQ,IAAI,aAAa,eAAe;AAC3C,UAAI,eAAe,WAAW;AAC7B,gBAAQ,KACP,mJAAmJ,OAClJ,+BAA+B,MAEhC,KAAK;AAAA,MAEN;AAAA,IACD;AAED,QAAIA,SAA0B,KAAK,GAAG;AAC/B,YAAA,aAAa,SAAS,mBAC3B,OAAO,eAAe,WACnB,SAAS,kBAAkB,UAAU,IACrC,YACH,wBAAwB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,MACA,CAAA,CAAC;AAMG,YAAA,aAAa,SAAS,UAC3B,OACA,CAAC,MAAM,MAAM,MAAM,UAAU,QAAO;AACnC,cAAM,SAAS,WAAW,MAAM,MAAM,MAAM,UAAU,GAAG;AAEzD,YAAI,MAAM,eAAe,MAAM,KAAK,OAAO,OAAO,MAAM;AACvD,iBAAO,MAAM,aAAa,QAAQ,EAAE,IAAK,CAAA;AAAA,QAAA,OACnC;AACC,iBAAA;AAAA,QACP;AAAA,MAAA,CACD;AAGF,6CAAU,UAAW,WAAA,CAAA;AAAA,IAAA,OACf;AACN,aAAO,YAAY,OAAU,oBAAA,UAAA,EAAA,UAAA,UAAS,IAAM;AAAA,IAC5C;AAAA,EAAA,GACC;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACA;AACF;"}
+{"version":3,"file":"PrismicRichText.js","sources":["../../../src/react-server/PrismicRichText.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as prismic from \"@prismicio/client\";\nimport * as prismicR from \"@prismicio/richtext\";\n\nimport { JSXFunctionSerializer, JSXMapSerializer } from \"../types\";\nimport { LinkProps, PrismicLink } from \"./PrismicLink\";\nimport { devMsg } from \"../lib/devMsg\";\n\n/**\n * Props for `<PrismicRichText>`.\n */\nexport type PrismicRichTextProps<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,\n> = {\n\t/**\n\t * The Prismic Rich Text field to render.\n\t */\n\tfield: prismic.RichTextField | null | undefined;\n\n\t/**\n\t * The Link Resolver used to resolve links.\n\t *\n\t * @remarks\n\t * If your app uses Route Resolvers when querying for your Prismic\n\t * repository's content, a Link Resolver does not need to be provided.\n\t * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}\n\t */\n\tlinkResolver?: LinkResolverFunction;\n\n\t/**\n\t * A map or function that maps a Rich Text block to a React component.\n\t *\n\t * @remarks\n\t * Prefer using a map serializer over the function serializer when possible.\n\t * The map serializer is simpler to maintain.\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t *   heading1: ({children}) => <Heading>{children}</Heading>\n\t * }\n\t * ```\n\t *\n\t * @example A function serializer.\n\t *\n\t * ```jsx\n\t * (type, node, content, children) => {\n\t * \tswitch (type) {\n\t * \t\tcase \"heading1\": {\n\t * \t\t\treturn <Heading>{children}</Heading>;\n\t * \t\t}\n\t * \t}\n\t * };\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer | JSXFunctionSerializer;\n\n\t/**\n\t * The React component rendered for links when the URL is internal.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\tinternalLinkComponent?: React.ComponentType<LinkProps>;\n\n\t/**\n\t * The React component rendered for links when the URL is external.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\texternalLinkComponent?: React.ComponentType<LinkProps>;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: React.ReactNode;\n};\n\ntype CreateDefaultSerializerArgs<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction,\n> = {\n\tlinkResolver: LinkResolverFunction | undefined;\n\tinternalLinkComponent?: React.ComponentType<LinkProps>;\n\texternalLinkComponent?: React.ComponentType<LinkProps>;\n};\n\nconst createDefaultSerializer = <\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any>,\n>(\n\targs: CreateDefaultSerializerArgs<LinkResolverFunction>,\n): JSXFunctionSerializer =>\n\tprismicR.wrapMapSerializer({\n\t\theading1: ({ children, key }) => <h1 key={key}>{children}</h1>,\n\t\theading2: ({ children, key }) => <h2 key={key}>{children}</h2>,\n\t\theading3: ({ children, key }) => <h3 key={key}>{children}</h3>,\n\t\theading4: ({ children, key }) => <h4 key={key}>{children}</h4>,\n\t\theading5: ({ children, key }) => <h5 key={key}>{children}</h5>,\n\t\theading6: ({ children, key }) => <h6 key={key}>{children}</h6>,\n\t\tparagraph: ({ children, key }) => <p key={key}>{children}</p>,\n\t\tpreformatted: ({ node, key }) => <pre key={key}>{node.text}</pre>,\n\t\tstrong: ({ children, key }) => <strong key={key}>{children}</strong>,\n\t\tem: ({ children, key }) => <em key={key}>{children}</em>,\n\t\tlistItem: ({ children, key }) => <li key={key}>{children}</li>,\n\t\toListItem: ({ children, key }) => <li key={key}>{children}</li>,\n\t\tlist: ({ children, key }) => <ul key={key}>{children}</ul>,\n\t\toList: ({ children, key }) => <ol key={key}>{children}</ol>,\n\t\timage: ({ node, key }) => {\n\t\t\tconst img = (\n\t\t\t\t<img\n\t\t\t\t\tsrc={node.url}\n\t\t\t\t\talt={node.alt ?? undefined}\n\t\t\t\t\tdata-copyright={node.copyright ? node.copyright : undefined}\n\t\t\t\t/>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<p key={key} className=\"block-img\">\n\t\t\t\t\t{node.linkTo ? (\n\t\t\t\t\t\t<PrismicLink\n\t\t\t\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t\t\t\t\tfield={node.linkTo}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{img}\n\t\t\t\t\t\t</PrismicLink>\n\t\t\t\t\t) : (\n\t\t\t\t\t\timg\n\t\t\t\t\t)}\n\t\t\t\t</p>\n\t\t\t);\n\t\t},\n\t\tembed: ({ node, key }) => (\n\t\t\t<div\n\t\t\t\tkey={key}\n\t\t\t\tdata-oembed={node.oembed.embed_url}\n\t\t\t\tdata-oembed-type={node.oembed.type}\n\t\t\t\tdata-oembed-provider={node.oembed.provider_name}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: node.oembed.html ?? \"\" }}\n\t\t\t/>\n\t\t),\n\t\thyperlink: ({ node, children, key }) => (\n\t\t\t<PrismicLink\n\t\t\t\tkey={key}\n\t\t\t\tfield={node.data}\n\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</PrismicLink>\n\t\t),\n\t\tlabel: ({ node, children, key }) => (\n\t\t\t<span key={key} className={node.data.label}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t),\n\t\tspan: ({ text, key }) => {\n\t\t\tconst result: React.ReactNode[] = [];\n\n\t\t\tlet i = 0;\n\t\t\tfor (const line of text.split(\"\\n\")) {\n\t\t\t\tif (i > 0) {\n\t\t\t\t\tresult.push(<br key={`${i}__break`} />);\n\t\t\t\t}\n\n\t\t\t\tresult.push(<React.Fragment key={`${i}__line`}>{line}</React.Fragment>);\n\n\t\t\t\ti++;\n\t\t\t}\n\n\t\t\treturn <React.Fragment key={key}>{result}</React.Fragment>;\n\t\t},\n\t});\n\n/**\n * React component that renders content from a Prismic Rich Text field. By\n * default, HTML elements are rendered for each piece of content. A `heading1`\n * block will render an `<h1>` HTML element, for example. Links will use\n * `<PrismicLink>` by default which can be customized using the\n * `internalLinkComponent` and `externalLinkComponent` props.\n *\n * To customize the components that are rendered, provide a map or function\n * serializer to the `components` prop.\n *\n * @remarks\n * This component returns a React fragment with no wrapping element around the\n * content. If you need a wrapper, add a component around `<PrismicRichText>`.\n * @example Rendering a Rich Text field using the default HTMl elements.\n *\n * ```jsx\n * <PrismicRichText field={document.data.content} />;\n * ```\n *\n * @example Rendering a Rich Text field using a custom set of React components.\n *\n * ```jsx\n * <PrismicRichText\n * \tfield={document.data.content}\n * \tcomponents={{\n * \t\theading1: ({ children }) => <Heading>{children}</Heading>,\n * \t}}\n * />;\n * ```\n *\n * @param props - Props for the component.\n *\n * @returns The Rich Text field's content as React components.\n *\n * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}\n * @see Learn about Rich Text serializers {@link https://prismic.io/docs/core-concepts/html-serializer}\n */\nexport function PrismicRichText<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tLinkResolverFunction extends prismic.LinkResolverFunction<any>,\n>({\n\tlinkResolver,\n\tfield,\n\tfallback,\n\tcomponents,\n\texternalLinkComponent,\n\tinternalLinkComponent,\n\t...restProps\n}: PrismicRichTextProps<LinkResolverFunction>): JSX.Element | null {\n\treturn React.useMemo(() => {\n\t\tif (\n\t\t\ttypeof process !== \"undefined\" &&\n\t\t\tprocess.env.NODE_ENV === \"development\"\n\t\t) {\n\t\t\tif (\"className\" in restProps) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg(\n\t\t\t\t\t\t\"classname-is-not-a-valid-prop\",\n\t\t\t\t\t)}.`,\n\t\t\t\t\tfield,\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\tif (prismic.isFilled.richText(field)) {\n\t\t\tconst serializer = prismicR.composeSerializers(\n\t\t\t\ttypeof components === \"object\"\n\t\t\t\t\t? prismicR.wrapMapSerializer(components)\n\t\t\t\t\t: components,\n\t\t\t\tcreateDefaultSerializer({\n\t\t\t\t\tlinkResolver,\n\t\t\t\t\tinternalLinkComponent,\n\t\t\t\t\texternalLinkComponent,\n\t\t\t\t}),\n\t\t\t);\n\n\t\t\t// The serializer is wrapped in a higher-order function\n\t\t\t// that automatically applies a key to React Elements\n\t\t\t// if one is not already given.\n\t\t\tconst serialized = prismicR.serialize<JSX.Element>(\n\t\t\t\tfield,\n\t\t\t\t(type, node, text, children, key) => {\n\t\t\t\t\tconst result = serializer(type, node, text, children, key);\n\n\t\t\t\t\tif (React.isValidElement(result) && result.key == null) {\n\t\t\t\t\t\treturn React.cloneElement(result, { key });\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn result;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t);\n\n\t\t\treturn <>{serialized}</>;\n\t\t} else {\n\t\t\treturn fallback != null ? <>{fallback}</> : null;\n\t\t}\n\t}, [\n\t\tfield,\n\t\tinternalLinkComponent,\n\t\texternalLinkComponent,\n\t\tcomponents,\n\t\tlinkResolver,\n\t\tfallback,\n\t]);\n}\n"],"names":["prismic.isFilled.richText"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/react",
-	"version": "2.6.1",
+	"version": "2.7.0",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -19,12 +19,24 @@
 	"exports": {
 		".": {
 			"react-server": {
-				"import": "./dist/react-server.js",
-				"require": "./dist/react-server.cjs"
+				"require": {
+					"types": "./dist/react-server/index.d.ts",
+					"default": "./dist/react-server.cjs"
+				},
+				"import": {
+					"types": "./dist/react-server/index.d.ts",
+					"default": "./dist/react-server.js"
+				}
 			},
 			"default": {
-				"import": "./dist/index.js",
-				"require": "./dist/index.cjs"
+				"require": {
+					"types": "./dist/index.d.ts",
+					"default": "./dist/index.cjs"
+				},
+				"import": {
+					"types": "./dist/index.d.ts",
+					"default": "./dist/index.js"
+				}
 			}
 		},
 		"./package.json": "./package.json"
@@ -54,41 +66,41 @@
 		"test": "npm run lint && npm run types && npm run unit && npm run build && npm run size"
 	},
 	"dependencies": {
-		"@prismicio/richtext": "^2.1.4"
+		"@prismicio/richtext": "^2.1.5"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.0.0-alpha.3",
-		"@prismicio/mock": "^0.2.0",
+		"@prismicio/client": "^7.1.0",
+		"@prismicio/mock": "^0.3.1",
 		"@size-limit/preset-small-lib": "^8.2.4",
 		"@testing-library/react": "^14.0.0",
 		"@types/node-fetch": "^3.0.3",
-		"@types/react": "^18.0.38",
+		"@types/react": "^18.2.9",
 		"@types/react-test-renderer": "^18.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.59.0",
-		"@typescript-eslint/parser": "^5.59.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.9",
+		"@typescript-eslint/parser": "^5.59.9",
 		"@vitejs/plugin-react": "^4.0.0",
-		"@vitest/coverage-c8": "^0.30.1",
-		"eslint": "^8.39.0",
+		"@vitest/coverage-v8": "^0.32.0",
+		"eslint": "^8.42.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-prettier": "^4.2.1",
 		"eslint-plugin-react": "^7.32.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
 		"eslint-plugin-tsdoc": "^0.2.17",
-		"happy-dom": "^9.9.2",
+		"happy-dom": "^9.20.3",
 		"msw": "^1.2.1",
 		"node-fetch": "^3.3.1",
-		"prettier": "^2.8.7",
+		"prettier": "^2.8.8",
 		"prettier-plugin-jsdoc": "^0.4.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-test-renderer": "^18.2.0",
-		"rollup-plugin-preserve-directives": "^0.1.0",
+		"rollup-plugin-preserve-directives": "^0.2.0",
 		"size-limit": "^8.2.4",
 		"standard-version": "^9.5.0",
 		"typescript": "^5.0.4",
-		"vite": "^4.3.1",
+		"vite": "^4.3.9",
 		"vite-plugin-sdk": "^0.1.1",
-		"vitest": "^0.30.1"
+		"vitest": "^0.32.0"
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6 || ^7",

package/src/PrismicImage.tsx

@@ -116,7 +116,10 @@ export const PrismicImage = React.forwardRef(function PrismicImage(
 		...restProps
 	} = props;
 
-	if (process.env.NODE_ENV === "development") {
+	if (
+		typeof process !== "undefined" &&
+		process.env.NODE_ENV === "development"
+	) {
 		if (typeof alt === "string" && props.alt !== "") {
 			console.warn(
 				`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg(

package/src/PrismicText.tsx

@@ -44,7 +44,10 @@ export type PrismicTextProps = {
  * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}
  */
 export const PrismicText = (props: PrismicTextProps): JSX.Element | null => {
-	if (process.env.NODE_ENV === "development") {
+	if (
+		typeof process !== "undefined" &&
+		process.env.NODE_ENV === "development"
+	) {
 		if ("className" in props) {
 			console.warn(
 				`[PrismicText] className cannot be passed to <PrismicText> since it renders plain text without a wrapping component. For more details, see ${devMsg(

package/src/PrismicToolbar.tsx

@@ -52,7 +52,7 @@ export const PrismicToolbar = ({
 			// environments.
 			//
 			// @see https://github.com/capricorn86/happy-dom/blob/02ae081e36f990c06171eda44f9d885fd9413d73/packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts#L191-L209
-			if (process.env.NODE_ENV === "test") {
+			if (typeof process !== "undefined" && process.env.NODE_ENV === "test") {
 				// @ts-expect-error - `_evaluateScript` is a Happy DOM-specific property.
 				script._evaluateScript = false;
 			}

package/src/SliceZone.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { ComponentType } from "react";
 import * as prismic from "@prismicio/client";
 
 import { pascalCase, PascalCase } from "./lib/pascalCase";
@@ -8,55 +8,61 @@ import { pascalCase, PascalCase } from "./lib/pascalCase";
  *
  * @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"]
+type ExtractSliceType<TSlice extends SliceLike> = TSlice extends prismic.Slice
+	? TSlice["slice_type"]
+	: TSlice extends SliceLikeGraphQL
+	? TSlice["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.
+ * Rest API V2 for the `unstable_mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLikeRestV2<SliceType extends string = string> = {
-	slice_type: prismic.Slice<SliceType>["slice_type"];
-	id?: string;
-};
+export type SliceLikeRestV2<TSliceType extends string = string> = Pick<
+	prismic.Slice<TSliceType>,
+	"id" | "slice_type"
+>;
 
 /**
  * The minimum required properties to represent a Prismic Slice from the Prismic
- * GraphQL API for the `<SliceZone>` component.
+ * GraphQL API for the `unstable_mapSliceZone()` helper.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLikeGraphQL<SliceType extends string = string> = {
-	type: prismic.Slice<SliceType>["slice_type"];
+export type SliceLikeGraphQL<TSliceType extends string = string> = {
+	type: prismic.Slice<TSliceType>["slice_type"];
 };
 
 /**
  * The minimum required properties to represent a Prismic Slice for the
- * `<SliceZone>` component.
+ * `unstable_mapSliceZone()` helper.
  *
  * If using Prismic's Rest API V2, use the `Slice` export from
- * `@prismicio/types` for a full interface.
+ * `@prismicio/client` for a full interface.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-export type SliceLike<SliceType extends string = string> =
-	| SliceLikeRestV2<SliceType>
-	| SliceLikeGraphQL<SliceType>;
+export type SliceLike<TSliceType extends string = string> = (
+	| SliceLikeRestV2<TSliceType>
+	| SliceLikeGraphQL<TSliceType>
+) & {
+	/**
+	 * If `true`, this Slice has been modified from its original value using a
+	 * mapper and `@prismicio/client`'s `mapSliceZone()`.
+	 *
+	 * @internal
+	 */
+	__mapped?: true;
+};
 
 /**
- * A looser version of the `SliceZone` type from `@prismicio/types` using
+ * A looser version of the `SliceZone` type from `@prismicio/client` using
  * `SliceLike`.
  *
  * If using Prismic's Rest API V2, use the `SliceZone` export from
- * `@prismicio/types` for the full type.
+ * `@prismicio/client` for the full type.
  *
  * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
  */
@@ -73,7 +79,7 @@ export type SliceZoneLike<TSlice extends SliceLike = SliceLike> =
  */
 export type SliceComponentProps<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	TSlice extends SliceLike = any,
+	TSlice extends SliceLike = SliceLike,
 	TContext = unknown,
 > = {
 	/**
@@ -93,7 +99,9 @@ export type SliceComponentProps<
 	// reference limtiations. If we had another generic to determine the full
 	// union of Slice types, it would include TSlice. This causes TypeScript to
 	// throw a compilation error.
-	slices: SliceZoneLike<SliceLike>;
+	slices: SliceZoneLike<
+		TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2
+	>;
 
 	/**
 	 * Arbitrary data passed to `<SliceZone>` and made available to all Slice
@@ -145,35 +153,6 @@ export type SliceZoneComponents<
 		>;
 	};
 
-/**
- * This Slice component can be used as a reminder to provide a proper
- * implementation.
- *
- * This is also the default React component rendered when a component mapping
- * cannot be found in `<SliceZone>`.
- */
-export const TODOSliceComponent = <TSlice extends SliceLike, TContext>({
-	slice,
-}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
-	if (process.env.NODE_ENV === "development") {
-		const type = "slice_type" in slice ? slice.slice_type : slice.type;
-
-		console.warn(
-			`[SliceZone] Could not find a component for Slice type "${type}"`,
-			slice,
-		);
-
-		return (
-			<section data-slice-zone-todo-component="" data-slice-type={type}>
-				Could not find a component for Slice type &ldquo;{type}
-				&rdquo;
-			</section>
-		);
-	} else {
-		return null;
-	}
-};
-
 /**
  * Arguments for a `<SliceZone>` `resolver` function.
  */
@@ -212,15 +191,10 @@ type SliceZoneResolverArgs<
 export type SliceZoneResolver<
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	TSlice extends SliceLike = any,
-	TContext = unknown,
-> = (args: SliceZoneResolverArgs<TSlice>) =>
-	| SliceComponentType<
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			any,
-			TContext
-	  >
-	| undefined
-	| null;
+> = (
+	args: SliceZoneResolverArgs<TSlice>,
+) => // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ComponentType<any> | undefined | null;
 
 /**
  * React props for the `<SliceZone>` component.
@@ -238,7 +212,7 @@ export type SliceZoneProps<TContext = unknown> = {
 	 * A record mapping Slice types to React components.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	components?: Record<string, SliceComponentType<any, TContext>>;
+	components?: Record<string, ComponentType<any>>;
 
 	/**
 	 * A function that determines the rendered React component for each Slice in
@@ -251,14 +225,14 @@ export type SliceZoneProps<TContext = unknown> = {
 	 * @returns The React component to render for a Slice.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	resolver?: SliceZoneResolver<any, TContext>;
+	resolver?: SliceZoneResolver<any>;
 
 	/**
 	 * The React component rendered if a component mapping from the `components`
 	 * prop cannot be found.
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	defaultComponent?: SliceComponentType<any, TContext>;
+	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
 
 	/**
 	 * Arbitrary data made available to all Slice components.
@@ -266,6 +240,38 @@ export type SliceZoneProps<TContext = unknown> = {
 	context?: TContext;
 };
 
+/**
+ * This Slice component can be used as a reminder to provide a proper
+ * implementation.
+ *
+ * This is also the default React component rendered when a component mapping
+ * cannot be found in `<SliceZone>`.
+ */
+export const TODOSliceComponent = <TSlice extends SliceLike, TContext>({
+	slice,
+}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
+	if (
+		typeof process !== "undefined" &&
+		process.env.NODE_ENV === "development"
+	) {
+		const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
+		console.warn(
+			`[SliceZone] Could not find a component for Slice type "${type}"`,
+			slice,
+		);
+
+		return (
+			<section data-slice-zone-todo-component="" data-slice-type={type}>
+				Could not find a component for Slice type &ldquo;{type}
+				&rdquo;
+			</section>
+		);
+	} else {
+		return null;
+	}
+};
+
 /**
  * Renders content from a Prismic Slice Zone using React components for each
  * type of Slice.
@@ -281,38 +287,50 @@ export type SliceZoneProps<TContext = unknown> = {
  *
  * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}
  */
-export const SliceZone = <TContext,>({
+export function SliceZone<TContext>({
 	slices = [],
 	components = {},
 	resolver,
 	defaultComponent = TODOSliceComponent,
 	context = {} as TContext,
-}: SliceZoneProps<TContext>): JSX.Element => {
-	const renderedSlices = React.useMemo(() => {
-		return slices.map((slice, index) => {
-			const type = "slice_type" in slice ? slice.slice_type : slice.type;
-
-			let Comp =
-				components[type as keyof typeof components] || defaultComponent;
-
-			// TODO: Remove `resolver` in v3 in favor of `components`.
-			if (resolver) {
-				const resolvedComp = resolver({
-					slice,
-					sliceName: pascalCase(type),
-					i: index,
-				});
-
-				if (resolvedComp) {
-					Comp = resolvedComp as typeof Comp;
-				}
+}: SliceZoneProps<TContext>) {
+	// TODO: Remove in v3 when the `resolver` prop is removed.
+	if (process.env.NODE_ENV === "development") {
+		if (resolver) {
+			console.warn(
+				"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.",
+			);
+		}
+	}
+
+	const renderedSlices = slices.map((slice, index) => {
+		const type = "slice_type" in slice ? slice.slice_type : slice.type;
+
+		let Comp = components[type as keyof typeof components] || defaultComponent;
+
+		// TODO: Remove `resolver` in v3 in favor of `components`.
+		if (resolver) {
+			const resolvedComp = resolver({
+				slice,
+				sliceName: pascalCase(type),
+				i: index,
+			});
+
+			if (resolvedComp) {
+				Comp = resolvedComp as typeof Comp;
 			}
+		}
 
-			const key =
-				"id" in slice && slice.id
-					? slice.id
-					: `${index}-${JSON.stringify(slice)}`;
+		const key =
+			"id" in slice && slice.id
+				? slice.id
+				: `${index}-${JSON.stringify(slice)}`;
 
+		if (slice.__mapped) {
+			const { __mapped, ...mappedProps } = slice;
+
+			return <Comp key={key} {...mappedProps} />;
+		} else {
 			return (
 				<Comp
 					key={key}
@@ -322,8 +340,8 @@ export const SliceZone = <TContext,>({
 					context={context}
 				/>
 			);
-		});
-	}, [components, context, defaultComponent, slices, resolver]);
+		}
+	});
 
 	return <>{renderedSlices}</>;
-};
+}