@prismicio/react 2.7.3 → 2.8.0

package/dist/SliceZone.cjs

@@ -15,7 +15,7 @@ const TODOSliceComponent = ({ slice }) => {
     return null;
   }
 };
-function SliceZone({ slices = [], components = {}, resolver, defaultComponent = TODOSliceComponent, context = {} }) {
+function SliceZone({ slices = [], components = {}, resolver, defaultComponent, context = {} }) {
   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.");
@@ -35,11 +35,15 @@ function SliceZone({ slices = [], components = {}, resolver, defaultComponent =
       }
     }
     const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`;
-    if (slice.__mapped) {
-      const { __mapped, ...mappedProps } = slice;
-      return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...mappedProps }, key);
+    if (Comp) {
+      if (slice.__mapped) {
+        const { __mapped, ...mappedProps } = slice;
+        return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...mappedProps }, key);
+      } else {
+        return /* @__PURE__ */ jsxRuntime.jsx(Comp, { slice, index, slices, context }, key);
+      }
     } else {
-      return /* @__PURE__ */ jsxRuntime.jsx(Comp, { slice, index, slices, context }, key);
+      return /* @__PURE__ */ jsxRuntime.jsx(TODOSliceComponent, { slice }, key);
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderedSlices });

package/dist/SliceZone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliceZone.cjs","sources":["../../src/SliceZone.tsx"],"sourcesContent":["import { ComponentType } from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { pascalCase, PascalCase } from \"./lib/pascalCase\";\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam Slice - The Slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends prismic.Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t? TSlice[\"type\"]\n\t: never;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * Rest API V2 for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tprismic.Slice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * GraphQL API for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: prismic.Slice<TSliceType>[\"slice_type\"];\n};\n\n/**\n * The minimum required properties to represent a Prismic Slice for the\n * `unstable_mapSliceZone()` helper.\n *\n * If using Prismic's Rest API V2, use the `Slice` export from\n * `@prismicio/client` for a full interface.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLike<TSliceType extends string = string> = (\n\t| SliceLikeRestV2<TSliceType>\n\t| SliceLikeGraphQL<TSliceType>\n) & {\n\t/**\n\t * If `true`, this Slice has been modified from its original value using a\n\t * mapper and `@prismicio/client`'s `mapSliceZone()`.\n\t *\n\t * @internal\n\t */\n\t__mapped?: true;\n};\n\n/**\n * A looser version of the `SliceZone` type from `@prismicio/client` using\n * `SliceLike`.\n *\n * If using Prismic's Rest API V2, use the `SliceZone` export from\n * `@prismicio/client` for the full type.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> =\n\treadonly TSlice[];\n\n/**\n * React props for a component rendering content from a Prismic Slice using the\n * `<SliceZone>` component.\n *\n * @typeParam TSlice - The Slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made\n *   available to all Slice components.\n */\nexport type SliceComponentProps<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> = {\n\t/**\n\t * Slice data for this component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\tindex: number;\n\n\t/**\n\t * All Slices from the Slice Zone to which the Slice belongs.\n\t */\n\t// TODO: We have to keep this list of Slices general due to circular\n\t// reference limtiations. If we had another generic to determine the full\n\t// union of Slice types, it would include TSlice. This causes TypeScript to\n\t// throw a compilation error.\n\tslices: SliceZoneLike<\n\t\tTSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2\n\t>;\n\n\t/**\n\t * Arbitrary data passed to `<SliceZone>` and made available to all Slice\n\t * components.\n\t */\n\tcontext: TContext;\n};\n\n/**\n * A React component to be rendered for each instance of its Slice.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceComponentType<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n\tTContext = unknown,\n> = React.ComponentType<SliceComponentProps<TSlice, TContext>>;\n\n/**\n * A record of Slice types mapped to a React component. The component will be\n * rendered for each instance of its Slice.\n *\n * @deprecated This type is no longer used by `@prismicio/react`. Prefer using\n *   `Record<string, SliceComponentType<any>>` instead.\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneComponents<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> =\n\t// This is purposely not wrapped in Partial to ensure a component is provided\n\t// for all Slice types. <SliceZone> will render a default component if one is\n\t// not provided, but it *should* be a type error if an explicit component is\n\t// missing.\n\t//\n\t// If a developer purposely does not want to provide a component, they can\n\t// assign it to the TODOSliceComponent exported from this package. This\n\t// signals to future developers that it is a placeholder and should be\n\t// implemented.\n\t{\n\t\t[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<\n\t\t\tExtract<TSlice, SliceLike<SliceType>> extends never\n\t\t\t\t? SliceLike\n\t\t\t\t: Extract<TSlice, SliceLike<SliceType>>,\n\t\t\tTContext\n\t\t>;\n\t};\n\n/**\n * Arguments for a `<SliceZone>` `resolver` function.\n */\ntype SliceZoneResolverArgs<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = {\n\t/**\n\t * The Slice to resolve to a React component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The name of the Slice.\n\t */\n\tsliceName: PascalCase<ExtractSliceType<TSlice>>;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\ti: number;\n};\n\n/**\n * A function that determines the rendered React component for each Slice in the\n * Slice Zone. If a nullish value is returned, the component will fallback to\n * the `components` or `defaultComponent` props to determine the rendered\n * component.\n *\n * @deprecated Use the `components` prop instead.\n *\n * @param args - Arguments for the resolver function.\n *\n * @returns The React component to render for a Slice.\n */\nexport type SliceZoneResolver<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = (\n\targs: SliceZoneResolverArgs<TSlice>,\n) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\nComponentType<any> | undefined | null;\n\n/**\n * React props for the `<SliceZone>` component.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneProps<TContext = unknown> = {\n\t/**\n\t * List of Slice data from the Slice Zone.\n\t */\n\tslices?: SliceZoneLike;\n\n\t/**\n\t * A record mapping Slice types to React components.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>;\n\n\t/**\n\t * A function that determines the rendered React component for each Slice in\n\t * the Slice Zone.\n\t *\n\t * @deprecated Use the `components` prop instead.\n\t *\n\t * @param args - Arguments for the resolver function.\n\t *\n\t * @returns The React component to render for a Slice.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tresolver?: SliceZoneResolver<any>;\n\n\t/**\n\t * The React component rendered if a component mapping from the `components`\n\t * prop cannot be found.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;\n\n\t/**\n\t * Arbitrary data made available to all Slice components.\n\t */\n\tcontext?: TContext;\n};\n\n/**\n * This Slice component can be used as a reminder to provide a proper\n * implementation.\n *\n * This is also the default React component rendered when a component mapping\n * cannot be found in `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike, TContext>({\n\tslice,\n}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tconsole.warn(\n\t\t\t`[SliceZone] Could not find a component for Slice type \"${type}\"`,\n\t\t\tslice,\n\t\t);\n\n\t\treturn (\n\t\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\t\tCould not find a component for Slice type &ldquo;{type}\n\t\t\t\t&rdquo;\n\t\t\t</section>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\n/**\n * Renders content from a Prismic Slice Zone using React components for each\n * type of Slice.\n *\n * If a component is not provided for a type of Slice, a default component can\n * be provided. A fallback component is provided by default that will not be\n * rendered in a production build of your app.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n *\n * @returns The Slice Zone's content as React components.\n *\n * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}\n */\nexport function SliceZone<TContext>({\n\tslices = [],\n\tcomponents = {},\n\tresolver,\n\tdefaultComponent = TODOSliceComponent,\n\tcontext = {} as TContext,\n}: SliceZoneProps<TContext>) {\n\t// TODO: Remove in v3 when the `resolver` prop is removed.\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (resolver) {\n\t\t\tconsole.warn(\n\t\t\t\t\"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.\",\n\t\t\t);\n\t\t}\n\t}\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tlet Comp = components[type as keyof typeof components] || defaultComponent;\n\n\t\t// TODO: Remove `resolver` in v3 in favor of `components`.\n\t\tif (resolver) {\n\t\t\tconst resolvedComp = resolver({\n\t\t\t\tslice,\n\t\t\t\tsliceName: pascalCase(type),\n\t\t\t\ti: index,\n\t\t\t});\n\n\t\t\tif (resolvedComp) {\n\t\t\t\tComp = resolvedComp as typeof Comp;\n\t\t\t}\n\t\t}\n\n\t\tconst key =\n\t\t\t\"id\" in slice && slice.id\n\t\t\t\t? slice.id\n\t\t\t\t: `${index}-${JSON.stringify(slice)}`;\n\n\t\tif (slice.__mapped) {\n\t\t\tconst { __mapped, ...mappedProps } = slice;\n\n\t\t\treturn <Comp key={key} {...mappedProps} />;\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<Comp\n\t\t\t\t\tkey={key}\n\t\t\t\t\tslice={slice}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tslices={slices}\n\t\t\t\t\tcontext={context}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t});\n\n\treturn <>{renderedSlices}</>;\n}\n"],"names":["jsxs","pascalCase","jsx"],"mappings":";;;;AAyPO,MAAM,qBAAqB,CAAqC,EACtE,YAC+D;AAC/D,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAEtD,YAAA,KACP,0DAA0D,SAC1D,KAAK;AAGN,WACEA,2BAAAA,KAAA,WAAA,EAAQ,kCAA+B,IAAG,mBAAiB,MAC3D,UAAA;AAAA,MAAA;AAAA,MAAkD;AAAA,MAClD;AAAA,IACD,EAAA,CAAA;AAAA,EAAA,OAEK;AACC,WAAA;AAAA,EACP;AACF;AAiBM,SAAU,UAAoB,EACnC,SAAS,IACT,aAAa,CAAA,GACb,UACA,mBAAmB,oBACnB,UAAU,MACgB;AAEtB,MAAA,QAAQ,IAAI,aAAa,eAAe;AAC3C,QAAI,UAAU;AACb,cAAQ,KACP,yGAAyG;AAAA,IAE1G;AAAA,EACD;AAED,QAAM,iBAAiB,OAAO,IAAI,CAAC,OAAO,UAAS;AAClD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE1D,QAAA,OAAO,WAAW,IAA+B,KAAK;AAG1D,QAAI,UAAU;AACb,YAAM,eAAe,SAAS;AAAA,QAC7B;AAAA,QACA,WAAWC,sBAAW,IAAI;AAAA,QAC1B,GAAG;AAAA,MAAA,CACH;AAED,UAAI,cAAc;AACV,eAAA;AAAA,MACP;AAAA,IACD;AAEK,UAAA,MACL,QAAQ,SAAS,MAAM,KACpB,MAAM,KACN,GAAG,SAAS,KAAK,UAAU,KAAK;AAEpC,QAAI,MAAM,UAAU;AACnB,YAAM,EAAE,UAAU,GAAG,YAAA,IAAgB;AAErC,aAAQC,2BAAAA,IAAA,MAAA,EAAe,GAAI,YAAA,GAAT,GAAqB;AAAA,IAAA,OACjC;AACN,4CACE,MAEA,EAAA,OACA,OACA,QACA,WAJK,GAIY;AAAA,IAGnB;AAAA,EAAA,CACD;AAED,+DAAU,UAAe,eAAA,CAAA;AAC1B;;;"}
+{"version":3,"file":"SliceZone.cjs","sources":["../../src/SliceZone.tsx"],"sourcesContent":["import { ComponentType } from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { pascalCase, PascalCase } from \"./lib/pascalCase\";\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam Slice - The Slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends prismic.Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t? TSlice[\"type\"]\n\t: never;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * Rest API V2 for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tprismic.Slice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * GraphQL API for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: prismic.Slice<TSliceType>[\"slice_type\"];\n};\n\n/**\n * The minimum required properties to represent a Prismic Slice for the\n * `unstable_mapSliceZone()` helper.\n *\n * If using Prismic's Rest API V2, use the `Slice` export from\n * `@prismicio/client` for a full interface.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLike<TSliceType extends string = string> = (\n\t| SliceLikeRestV2<TSliceType>\n\t| SliceLikeGraphQL<TSliceType>\n) & {\n\t/**\n\t * If `true`, this Slice has been modified from its original value using a\n\t * mapper and `@prismicio/client`'s `mapSliceZone()`.\n\t *\n\t * @internal\n\t */\n\t__mapped?: true;\n};\n\n/**\n * A looser version of the `SliceZone` type from `@prismicio/client` using\n * `SliceLike`.\n *\n * If using Prismic's Rest API V2, use the `SliceZone` export from\n * `@prismicio/client` for the full type.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> =\n\treadonly TSlice[];\n\n/**\n * React props for a component rendering content from a Prismic Slice using the\n * `<SliceZone>` component.\n *\n * @typeParam TSlice - The Slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made\n *   available to all Slice components.\n */\nexport type SliceComponentProps<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> = {\n\t/**\n\t * Slice data for this component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\tindex: number;\n\n\t/**\n\t * All Slices from the Slice Zone to which the Slice belongs.\n\t */\n\t// TODO: We have to keep this list of Slices general due to circular\n\t// reference limtiations. If we had another generic to determine the full\n\t// union of Slice types, it would include TSlice. This causes TypeScript to\n\t// throw a compilation error.\n\tslices: SliceZoneLike<\n\t\tTSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2\n\t>;\n\n\t/**\n\t * Arbitrary data passed to `<SliceZone>` and made available to all Slice\n\t * components.\n\t */\n\tcontext: TContext;\n};\n\n/**\n * A React component to be rendered for each instance of its Slice.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceComponentType<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n\tTContext = unknown,\n> = React.ComponentType<SliceComponentProps<TSlice, TContext>>;\n\n/**\n * A record of Slice types mapped to a React component. The component will be\n * rendered for each instance of its Slice.\n *\n * @deprecated This type is no longer used by `@prismicio/react`. Prefer using\n *   `Record<string, SliceComponentType<any>>` instead.\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneComponents<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> =\n\t// This is purposely not wrapped in Partial to ensure a component is provided\n\t// for all Slice types. <SliceZone> will render a default component if one is\n\t// not provided, but it *should* be a type error if an explicit component is\n\t// missing.\n\t//\n\t// If a developer purposely does not want to provide a component, they can\n\t// assign it to the TODOSliceComponent exported from this package. This\n\t// signals to future developers that it is a placeholder and should be\n\t// implemented.\n\t{\n\t\t[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<\n\t\t\tExtract<TSlice, SliceLike<SliceType>> extends never\n\t\t\t\t? SliceLike\n\t\t\t\t: Extract<TSlice, SliceLike<SliceType>>,\n\t\t\tTContext\n\t\t>;\n\t};\n\n/**\n * Arguments for a `<SliceZone>` `resolver` function.\n */\ntype SliceZoneResolverArgs<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = {\n\t/**\n\t * The Slice to resolve to a React component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The name of the Slice.\n\t */\n\tsliceName: PascalCase<ExtractSliceType<TSlice>>;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\ti: number;\n};\n\n/**\n * A function that determines the rendered React component for each Slice in the\n * Slice Zone. If a nullish value is returned, the component will fallback to\n * the `components` or `defaultComponent` props to determine the rendered\n * component.\n *\n * @deprecated Use the `components` prop instead.\n *\n * @param args - Arguments for the resolver function.\n *\n * @returns The React component to render for a Slice.\n */\nexport type SliceZoneResolver<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = (\n\targs: SliceZoneResolverArgs<TSlice>,\n) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\nComponentType<any> | undefined | null;\n\n/**\n * React props for the `<SliceZone>` component.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneProps<TContext = unknown> = {\n\t/**\n\t * List of Slice data from the Slice Zone.\n\t */\n\tslices?: SliceZoneLike;\n\n\t/**\n\t * A record mapping Slice types to React components.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>;\n\n\t/**\n\t * A function that determines the rendered React component for each Slice in\n\t * the Slice Zone.\n\t *\n\t * @deprecated Use the `components` prop instead.\n\t *\n\t * @param args - Arguments for the resolver function.\n\t *\n\t * @returns The React component to render for a Slice.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tresolver?: SliceZoneResolver<any>;\n\n\t/**\n\t * The React component rendered if a component mapping from the `components`\n\t * prop cannot be found.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;\n\n\t/**\n\t * Arbitrary data made available to all Slice components.\n\t */\n\tcontext?: TContext;\n};\n\n/**\n * This Slice component can be used as a reminder to provide a proper\n * implementation.\n *\n * This is also the default React component rendered when a component mapping\n * cannot be found in `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike>({\n\tslice,\n}: {\n\tslice: TSlice;\n}): JSX.Element | null => {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tconsole.warn(\n\t\t\t`[SliceZone] Could not find a component for Slice type \"${type}\"`,\n\t\t\tslice,\n\t\t);\n\n\t\treturn (\n\t\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\t\tCould not find a component for Slice type &ldquo;{type}\n\t\t\t\t&rdquo;\n\t\t\t</section>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\n/**\n * Renders content from a Prismic Slice Zone using React components for each\n * type of Slice.\n *\n * If a component is not provided for a type of Slice, a default component can\n * be provided. A fallback component is provided by default that will not be\n * rendered in a production build of your app.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n *\n * @returns The Slice Zone's content as React components.\n *\n * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}\n */\nexport function SliceZone<TContext>({\n\tslices = [],\n\tcomponents = {},\n\tresolver,\n\tdefaultComponent,\n\tcontext = {} as TContext,\n}: SliceZoneProps<TContext>) {\n\t// TODO: Remove in v3 when the `resolver` prop is removed.\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (resolver) {\n\t\t\tconsole.warn(\n\t\t\t\t\"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.\",\n\t\t\t);\n\t\t}\n\t}\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tlet Comp = components[type as keyof typeof components] || defaultComponent;\n\n\t\t// TODO: Remove `resolver` in v3 in favor of `components`.\n\t\tif (resolver) {\n\t\t\tconst resolvedComp = resolver({\n\t\t\t\tslice,\n\t\t\t\tsliceName: pascalCase(type),\n\t\t\t\ti: index,\n\t\t\t});\n\n\t\t\tif (resolvedComp) {\n\t\t\t\tComp = resolvedComp as typeof Comp;\n\t\t\t}\n\t\t}\n\n\t\tconst key =\n\t\t\t\"id\" in slice && slice.id\n\t\t\t\t? slice.id\n\t\t\t\t: `${index}-${JSON.stringify(slice)}`;\n\n\t\tif (Comp) {\n\t\t\tif (slice.__mapped) {\n\t\t\t\tconst { __mapped, ...mappedProps } = slice;\n\n\t\t\t\treturn <Comp key={key} {...mappedProps} />;\n\t\t\t} else {\n\t\t\t\treturn (\n\t\t\t\t\t<Comp\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\tslice={slice}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tslices={slices}\n\t\t\t\t\t\tcontext={context}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\treturn <TODOSliceComponent key={key} slice={slice} />;\n\t\t}\n\t});\n\n\treturn <>{renderedSlices}</>;\n}\n"],"names":["jsxs","pascalCase","jsx"],"mappings":";;;;AAyPO,MAAM,qBAAqB,CAA2B,EAC5D,YAGwB;AACxB,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAEtD,YAAA,KACP,0DAA0D,SAC1D,KAAK;AAGN,WACEA,2BAAAA,KAAA,WAAA,EAAQ,kCAA+B,IAAG,mBAAiB,MAC3D,UAAA;AAAA,MAAA;AAAA,MAAkD;AAAA,MAClD;AAAA,IACD,EAAA,CAAA;AAAA,EAAA,OAEK;AACC,WAAA;AAAA,EACP;AACF;SAiBgB,UAAoB,EACnC,SAAS,CAAA,GACT,aAAa,IACb,UACA,kBACA,UAAU,CAAA,KACgB;AAEtB,MAAA,QAAQ,IAAI,aAAa,eAAe;AAC3C,QAAI,UAAU;AACb,cAAQ,KACP,yGAAyG;AAAA,IAE1G;AAAA,EACD;AAED,QAAM,iBAAiB,OAAO,IAAI,CAAC,OAAO,UAAS;AAClD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE1D,QAAA,OAAO,WAAW,IAA+B,KAAK;AAG1D,QAAI,UAAU;AACb,YAAM,eAAe,SAAS;AAAA,QAC7B;AAAA,QACA,WAAWC,sBAAW,IAAI;AAAA,QAC1B,GAAG;AAAA,MAAA,CACH;AAED,UAAI,cAAc;AACV,eAAA;AAAA,MACP;AAAA,IACD;AAEK,UAAA,MACL,QAAQ,SAAS,MAAM,KACpB,MAAM,KACN,GAAG,SAAS,KAAK,UAAU,KAAK;AAEpC,QAAI,MAAM;AACT,UAAI,MAAM,UAAU;AACnB,cAAM,EAAE,UAAU,GAAG,YAAA,IAAgB;AAErC,eAAQC,2BAAAA,IAAA,MAAA,EAAe,GAAI,YAAA,GAAT,GAAqB;AAAA,MAAA,OACjC;AACN,8CACE,MAEA,EAAA,OACA,OACA,QACA,WAJK,GAIY;AAAA,MAGnB;AAAA,IAAA,OACK;AACC,aAAAA,2BAAA,IAAC,oBAA6B,EAAA,MAAA,GAAL,GAAkB;AAAA,IAClD;AAAA,EAAA,CACD;AAED,+DAAU,UAAe,eAAA,CAAA;AAC1B;;;"}

package/dist/SliceZone.d.ts

@@ -171,7 +171,9 @@ export type SliceZoneProps<TContext = unknown> = {
  * This is also the default React component rendered when a component mapping
  * cannot be found in `<SliceZone>`.
  */
-export declare const TODOSliceComponent: <TSlice extends SliceLike<string>, TContext>({ slice, }: SliceComponentProps<TSlice, TContext>) => JSX.Element | null;
+export declare const TODOSliceComponent: <TSlice extends SliceLike<string>>({ slice, }: {
+    slice: TSlice;
+}) => JSX.Element | null;
 /**
  * Renders content from a Prismic Slice Zone using React components for each
  * type of Slice.

package/dist/SliceZone.js

@@ -13,7 +13,7 @@ const TODOSliceComponent = ({ slice }) => {
     return null;
   }
 };
-function SliceZone({ slices = [], components = {}, resolver, defaultComponent = TODOSliceComponent, context = {} }) {
+function SliceZone({ slices = [], components = {}, resolver, defaultComponent, context = {} }) {
   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.");
@@ -33,11 +33,15 @@ function SliceZone({ slices = [], components = {}, resolver, defaultComponent =
       }
     }
     const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`;
-    if (slice.__mapped) {
-      const { __mapped, ...mappedProps } = slice;
-      return /* @__PURE__ */ jsx(Comp, { ...mappedProps }, key);
+    if (Comp) {
+      if (slice.__mapped) {
+        const { __mapped, ...mappedProps } = slice;
+        return /* @__PURE__ */ jsx(Comp, { ...mappedProps }, key);
+      } else {
+        return /* @__PURE__ */ jsx(Comp, { slice, index, slices, context }, key);
+      }
     } else {
-      return /* @__PURE__ */ jsx(Comp, { slice, index, slices, context }, key);
+      return /* @__PURE__ */ jsx(TODOSliceComponent, { slice }, key);
     }
   });
   return /* @__PURE__ */ jsx(Fragment, { children: renderedSlices });

package/dist/SliceZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliceZone.js","sources":["../../src/SliceZone.tsx"],"sourcesContent":["import { ComponentType } from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { pascalCase, PascalCase } from \"./lib/pascalCase\";\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam Slice - The Slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends prismic.Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t? TSlice[\"type\"]\n\t: never;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * Rest API V2 for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tprismic.Slice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * GraphQL API for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: prismic.Slice<TSliceType>[\"slice_type\"];\n};\n\n/**\n * The minimum required properties to represent a Prismic Slice for the\n * `unstable_mapSliceZone()` helper.\n *\n * If using Prismic's Rest API V2, use the `Slice` export from\n * `@prismicio/client` for a full interface.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLike<TSliceType extends string = string> = (\n\t| SliceLikeRestV2<TSliceType>\n\t| SliceLikeGraphQL<TSliceType>\n) & {\n\t/**\n\t * If `true`, this Slice has been modified from its original value using a\n\t * mapper and `@prismicio/client`'s `mapSliceZone()`.\n\t *\n\t * @internal\n\t */\n\t__mapped?: true;\n};\n\n/**\n * A looser version of the `SliceZone` type from `@prismicio/client` using\n * `SliceLike`.\n *\n * If using Prismic's Rest API V2, use the `SliceZone` export from\n * `@prismicio/client` for the full type.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> =\n\treadonly TSlice[];\n\n/**\n * React props for a component rendering content from a Prismic Slice using the\n * `<SliceZone>` component.\n *\n * @typeParam TSlice - The Slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made\n *   available to all Slice components.\n */\nexport type SliceComponentProps<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> = {\n\t/**\n\t * Slice data for this component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\tindex: number;\n\n\t/**\n\t * All Slices from the Slice Zone to which the Slice belongs.\n\t */\n\t// TODO: We have to keep this list of Slices general due to circular\n\t// reference limtiations. If we had another generic to determine the full\n\t// union of Slice types, it would include TSlice. This causes TypeScript to\n\t// throw a compilation error.\n\tslices: SliceZoneLike<\n\t\tTSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2\n\t>;\n\n\t/**\n\t * Arbitrary data passed to `<SliceZone>` and made available to all Slice\n\t * components.\n\t */\n\tcontext: TContext;\n};\n\n/**\n * A React component to be rendered for each instance of its Slice.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceComponentType<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n\tTContext = unknown,\n> = React.ComponentType<SliceComponentProps<TSlice, TContext>>;\n\n/**\n * A record of Slice types mapped to a React component. The component will be\n * rendered for each instance of its Slice.\n *\n * @deprecated This type is no longer used by `@prismicio/react`. Prefer using\n *   `Record<string, SliceComponentType<any>>` instead.\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneComponents<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> =\n\t// This is purposely not wrapped in Partial to ensure a component is provided\n\t// for all Slice types. <SliceZone> will render a default component if one is\n\t// not provided, but it *should* be a type error if an explicit component is\n\t// missing.\n\t//\n\t// If a developer purposely does not want to provide a component, they can\n\t// assign it to the TODOSliceComponent exported from this package. This\n\t// signals to future developers that it is a placeholder and should be\n\t// implemented.\n\t{\n\t\t[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<\n\t\t\tExtract<TSlice, SliceLike<SliceType>> extends never\n\t\t\t\t? SliceLike\n\t\t\t\t: Extract<TSlice, SliceLike<SliceType>>,\n\t\t\tTContext\n\t\t>;\n\t};\n\n/**\n * Arguments for a `<SliceZone>` `resolver` function.\n */\ntype SliceZoneResolverArgs<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = {\n\t/**\n\t * The Slice to resolve to a React component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The name of the Slice.\n\t */\n\tsliceName: PascalCase<ExtractSliceType<TSlice>>;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\ti: number;\n};\n\n/**\n * A function that determines the rendered React component for each Slice in the\n * Slice Zone. If a nullish value is returned, the component will fallback to\n * the `components` or `defaultComponent` props to determine the rendered\n * component.\n *\n * @deprecated Use the `components` prop instead.\n *\n * @param args - Arguments for the resolver function.\n *\n * @returns The React component to render for a Slice.\n */\nexport type SliceZoneResolver<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = (\n\targs: SliceZoneResolverArgs<TSlice>,\n) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\nComponentType<any> | undefined | null;\n\n/**\n * React props for the `<SliceZone>` component.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneProps<TContext = unknown> = {\n\t/**\n\t * List of Slice data from the Slice Zone.\n\t */\n\tslices?: SliceZoneLike;\n\n\t/**\n\t * A record mapping Slice types to React components.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>;\n\n\t/**\n\t * A function that determines the rendered React component for each Slice in\n\t * the Slice Zone.\n\t *\n\t * @deprecated Use the `components` prop instead.\n\t *\n\t * @param args - Arguments for the resolver function.\n\t *\n\t * @returns The React component to render for a Slice.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tresolver?: SliceZoneResolver<any>;\n\n\t/**\n\t * The React component rendered if a component mapping from the `components`\n\t * prop cannot be found.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;\n\n\t/**\n\t * Arbitrary data made available to all Slice components.\n\t */\n\tcontext?: TContext;\n};\n\n/**\n * This Slice component can be used as a reminder to provide a proper\n * implementation.\n *\n * This is also the default React component rendered when a component mapping\n * cannot be found in `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike, TContext>({\n\tslice,\n}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tconsole.warn(\n\t\t\t`[SliceZone] Could not find a component for Slice type \"${type}\"`,\n\t\t\tslice,\n\t\t);\n\n\t\treturn (\n\t\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\t\tCould not find a component for Slice type &ldquo;{type}\n\t\t\t\t&rdquo;\n\t\t\t</section>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\n/**\n * Renders content from a Prismic Slice Zone using React components for each\n * type of Slice.\n *\n * If a component is not provided for a type of Slice, a default component can\n * be provided. A fallback component is provided by default that will not be\n * rendered in a production build of your app.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n *\n * @returns The Slice Zone's content as React components.\n *\n * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}\n */\nexport function SliceZone<TContext>({\n\tslices = [],\n\tcomponents = {},\n\tresolver,\n\tdefaultComponent = TODOSliceComponent,\n\tcontext = {} as TContext,\n}: SliceZoneProps<TContext>) {\n\t// TODO: Remove in v3 when the `resolver` prop is removed.\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (resolver) {\n\t\t\tconsole.warn(\n\t\t\t\t\"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.\",\n\t\t\t);\n\t\t}\n\t}\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tlet Comp = components[type as keyof typeof components] || defaultComponent;\n\n\t\t// TODO: Remove `resolver` in v3 in favor of `components`.\n\t\tif (resolver) {\n\t\t\tconst resolvedComp = resolver({\n\t\t\t\tslice,\n\t\t\t\tsliceName: pascalCase(type),\n\t\t\t\ti: index,\n\t\t\t});\n\n\t\t\tif (resolvedComp) {\n\t\t\t\tComp = resolvedComp as typeof Comp;\n\t\t\t}\n\t\t}\n\n\t\tconst key =\n\t\t\t\"id\" in slice && slice.id\n\t\t\t\t? slice.id\n\t\t\t\t: `${index}-${JSON.stringify(slice)}`;\n\n\t\tif (slice.__mapped) {\n\t\t\tconst { __mapped, ...mappedProps } = slice;\n\n\t\t\treturn <Comp key={key} {...mappedProps} />;\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<Comp\n\t\t\t\t\tkey={key}\n\t\t\t\t\tslice={slice}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tslices={slices}\n\t\t\t\t\tcontext={context}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\t});\n\n\treturn <>{renderedSlices}</>;\n}\n"],"names":[],"mappings":";;AAyPO,MAAM,qBAAqB,CAAqC,EACtE,YAC+D;AAC/D,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAEtD,YAAA,KACP,0DAA0D,SAC1D,KAAK;AAGN,WACE,qBAAA,WAAA,EAAQ,kCAA+B,IAAG,mBAAiB,MAC3D,UAAA;AAAA,MAAA;AAAA,MAAkD;AAAA,MAClD;AAAA,IACD,EAAA,CAAA;AAAA,EAAA,OAEK;AACC,WAAA;AAAA,EACP;AACF;AAiBM,SAAU,UAAoB,EACnC,SAAS,IACT,aAAa,CAAA,GACb,UACA,mBAAmB,oBACnB,UAAU,MACgB;AAEtB,MAAA,QAAQ,IAAI,aAAa,eAAe;AAC3C,QAAI,UAAU;AACb,cAAQ,KACP,yGAAyG;AAAA,IAE1G;AAAA,EACD;AAED,QAAM,iBAAiB,OAAO,IAAI,CAAC,OAAO,UAAS;AAClD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE1D,QAAA,OAAO,WAAW,IAA+B,KAAK;AAG1D,QAAI,UAAU;AACb,YAAM,eAAe,SAAS;AAAA,QAC7B;AAAA,QACA,WAAW,WAAW,IAAI;AAAA,QAC1B,GAAG;AAAA,MAAA,CACH;AAED,UAAI,cAAc;AACV,eAAA;AAAA,MACP;AAAA,IACD;AAEK,UAAA,MACL,QAAQ,SAAS,MAAM,KACpB,MAAM,KACN,GAAG,SAAS,KAAK,UAAU,KAAK;AAEpC,QAAI,MAAM,UAAU;AACnB,YAAM,EAAE,UAAU,GAAG,YAAA,IAAgB;AAErC,aAAQ,oBAAA,MAAA,EAAe,GAAI,YAAA,GAAT,GAAqB;AAAA,IAAA,OACjC;AACN,iCACE,MAEA,EAAA,OACA,OACA,QACA,WAJK,GAIY;AAAA,IAGnB;AAAA,EAAA,CACD;AAED,yCAAU,UAAe,eAAA,CAAA;AAC1B;"}
+{"version":3,"file":"SliceZone.js","sources":["../../src/SliceZone.tsx"],"sourcesContent":["import { ComponentType } from \"react\";\nimport * as prismic from \"@prismicio/client\";\n\nimport { pascalCase, PascalCase } from \"./lib/pascalCase\";\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam Slice - The Slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends prismic.Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t? TSlice[\"type\"]\n\t: never;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * Rest API V2 for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tprismic.Slice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>;\n\n/**\n * The minimum required properties to represent a Prismic Slice from the Prismic\n * GraphQL API for the `unstable_mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: prismic.Slice<TSliceType>[\"slice_type\"];\n};\n\n/**\n * The minimum required properties to represent a Prismic Slice for the\n * `unstable_mapSliceZone()` helper.\n *\n * If using Prismic's Rest API V2, use the `Slice` export from\n * `@prismicio/client` for a full interface.\n *\n * @typeParam SliceType - Type name of the Slice.\n */\nexport type SliceLike<TSliceType extends string = string> = (\n\t| SliceLikeRestV2<TSliceType>\n\t| SliceLikeGraphQL<TSliceType>\n) & {\n\t/**\n\t * If `true`, this Slice has been modified from its original value using a\n\t * mapper and `@prismicio/client`'s `mapSliceZone()`.\n\t *\n\t * @internal\n\t */\n\t__mapped?: true;\n};\n\n/**\n * A looser version of the `SliceZone` type from `@prismicio/client` using\n * `SliceLike`.\n *\n * If using Prismic's Rest API V2, use the `SliceZone` export from\n * `@prismicio/client` for the full type.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> =\n\treadonly TSlice[];\n\n/**\n * React props for a component rendering content from a Prismic Slice using the\n * `<SliceZone>` component.\n *\n * @typeParam TSlice - The Slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made\n *   available to all Slice components.\n */\nexport type SliceComponentProps<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> = {\n\t/**\n\t * Slice data for this component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\tindex: number;\n\n\t/**\n\t * All Slices from the Slice Zone to which the Slice belongs.\n\t */\n\t// TODO: We have to keep this list of Slices general due to circular\n\t// reference limtiations. If we had another generic to determine the full\n\t// union of Slice types, it would include TSlice. This causes TypeScript to\n\t// throw a compilation error.\n\tslices: SliceZoneLike<\n\t\tTSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2\n\t>;\n\n\t/**\n\t * Arbitrary data passed to `<SliceZone>` and made available to all Slice\n\t * components.\n\t */\n\tcontext: TContext;\n};\n\n/**\n * A React component to be rendered for each instance of its Slice.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceComponentType<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n\tTContext = unknown,\n> = React.ComponentType<SliceComponentProps<TSlice, TContext>>;\n\n/**\n * A record of Slice types mapped to a React component. The component will be\n * rendered for each instance of its Slice.\n *\n * @deprecated This type is no longer used by `@prismicio/react`. Prefer using\n *   `Record<string, SliceComponentType<any>>` instead.\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneComponents<\n\tTSlice extends SliceLike = SliceLike,\n\tTContext = unknown,\n> =\n\t// This is purposely not wrapped in Partial to ensure a component is provided\n\t// for all Slice types. <SliceZone> will render a default component if one is\n\t// not provided, but it *should* be a type error if an explicit component is\n\t// missing.\n\t//\n\t// If a developer purposely does not want to provide a component, they can\n\t// assign it to the TODOSliceComponent exported from this package. This\n\t// signals to future developers that it is a placeholder and should be\n\t// implemented.\n\t{\n\t\t[SliceType in ExtractSliceType<TSlice>]: SliceComponentType<\n\t\t\tExtract<TSlice, SliceLike<SliceType>> extends never\n\t\t\t\t? SliceLike\n\t\t\t\t: Extract<TSlice, SliceLike<SliceType>>,\n\t\t\tTContext\n\t\t>;\n\t};\n\n/**\n * Arguments for a `<SliceZone>` `resolver` function.\n */\ntype SliceZoneResolverArgs<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = {\n\t/**\n\t * The Slice to resolve to a React component.\n\t */\n\tslice: TSlice;\n\n\t/**\n\t * The name of the Slice.\n\t */\n\tsliceName: PascalCase<ExtractSliceType<TSlice>>;\n\n\t/**\n\t * The index of the Slice in the Slice Zone.\n\t */\n\ti: number;\n};\n\n/**\n * A function that determines the rendered React component for each Slice in the\n * Slice Zone. If a nullish value is returned, the component will fallback to\n * the `components` or `defaultComponent` props to determine the rendered\n * component.\n *\n * @deprecated Use the `components` prop instead.\n *\n * @param args - Arguments for the resolver function.\n *\n * @returns The React component to render for a Slice.\n */\nexport type SliceZoneResolver<\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tTSlice extends SliceLike = any,\n> = (\n\targs: SliceZoneResolverArgs<TSlice>,\n) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\nComponentType<any> | undefined | null;\n\n/**\n * React props for the `<SliceZone>` component.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n */\nexport type SliceZoneProps<TContext = unknown> = {\n\t/**\n\t * List of Slice data from the Slice Zone.\n\t */\n\tslices?: SliceZoneLike;\n\n\t/**\n\t * A record mapping Slice types to React components.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>;\n\n\t/**\n\t * A function that determines the rendered React component for each Slice in\n\t * the Slice Zone.\n\t *\n\t * @deprecated Use the `components` prop instead.\n\t *\n\t * @param args - Arguments for the resolver function.\n\t *\n\t * @returns The React component to render for a Slice.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tresolver?: SliceZoneResolver<any>;\n\n\t/**\n\t * The React component rendered if a component mapping from the `components`\n\t * prop cannot be found.\n\t */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;\n\n\t/**\n\t * Arbitrary data made available to all Slice components.\n\t */\n\tcontext?: TContext;\n};\n\n/**\n * This Slice component can be used as a reminder to provide a proper\n * implementation.\n *\n * This is also the default React component rendered when a component mapping\n * cannot be found in `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike>({\n\tslice,\n}: {\n\tslice: TSlice;\n}): JSX.Element | null => {\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env.NODE_ENV === \"development\"\n\t) {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tconsole.warn(\n\t\t\t`[SliceZone] Could not find a component for Slice type \"${type}\"`,\n\t\t\tslice,\n\t\t);\n\n\t\treturn (\n\t\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\t\tCould not find a component for Slice type &ldquo;{type}\n\t\t\t\t&rdquo;\n\t\t\t</section>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\n/**\n * Renders content from a Prismic Slice Zone using React components for each\n * type of Slice.\n *\n * If a component is not provided for a type of Slice, a default component can\n * be provided. A fallback component is provided by default that will not be\n * rendered in a production build of your app.\n *\n * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.\n * @typeParam TContext - Arbitrary data made available to all Slice components.\n *\n * @returns The Slice Zone's content as React components.\n *\n * @see Learn about Prismic Slices and Slice Zones {@link https://prismic.io/docs/core-concepts/slices}\n */\nexport function SliceZone<TContext>({\n\tslices = [],\n\tcomponents = {},\n\tresolver,\n\tdefaultComponent,\n\tcontext = {} as TContext,\n}: SliceZoneProps<TContext>) {\n\t// TODO: Remove in v3 when the `resolver` prop is removed.\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (resolver) {\n\t\t\tconsole.warn(\n\t\t\t\t\"The `resolver` prop is deprecated. Please replace it with a components map using the `components` prop.\",\n\t\t\t);\n\t\t}\n\t}\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type;\n\n\t\tlet Comp = components[type as keyof typeof components] || defaultComponent;\n\n\t\t// TODO: Remove `resolver` in v3 in favor of `components`.\n\t\tif (resolver) {\n\t\t\tconst resolvedComp = resolver({\n\t\t\t\tslice,\n\t\t\t\tsliceName: pascalCase(type),\n\t\t\t\ti: index,\n\t\t\t});\n\n\t\t\tif (resolvedComp) {\n\t\t\t\tComp = resolvedComp as typeof Comp;\n\t\t\t}\n\t\t}\n\n\t\tconst key =\n\t\t\t\"id\" in slice && slice.id\n\t\t\t\t? slice.id\n\t\t\t\t: `${index}-${JSON.stringify(slice)}`;\n\n\t\tif (Comp) {\n\t\t\tif (slice.__mapped) {\n\t\t\t\tconst { __mapped, ...mappedProps } = slice;\n\n\t\t\t\treturn <Comp key={key} {...mappedProps} />;\n\t\t\t} else {\n\t\t\t\treturn (\n\t\t\t\t\t<Comp\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\tslice={slice}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tslices={slices}\n\t\t\t\t\t\tcontext={context}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\treturn <TODOSliceComponent key={key} slice={slice} />;\n\t\t}\n\t});\n\n\treturn <>{renderedSlices}</>;\n}\n"],"names":[],"mappings":";;AAyPO,MAAM,qBAAqB,CAA2B,EAC5D,YAGwB;AACxB,MACC,OAAO,YAAY,eACnB,QAAQ,IAAI,aAAa,eACxB;AACD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAEtD,YAAA,KACP,0DAA0D,SAC1D,KAAK;AAGN,WACE,qBAAA,WAAA,EAAQ,kCAA+B,IAAG,mBAAiB,MAC3D,UAAA;AAAA,MAAA;AAAA,MAAkD;AAAA,MAClD;AAAA,IACD,EAAA,CAAA;AAAA,EAAA,OAEK;AACC,WAAA;AAAA,EACP;AACF;SAiBgB,UAAoB,EACnC,SAAS,CAAA,GACT,aAAa,IACb,UACA,kBACA,UAAU,CAAA,KACgB;AAEtB,MAAA,QAAQ,IAAI,aAAa,eAAe;AAC3C,QAAI,UAAU;AACb,cAAQ,KACP,yGAAyG;AAAA,IAE1G;AAAA,EACD;AAED,QAAM,iBAAiB,OAAO,IAAI,CAAC,OAAO,UAAS;AAClD,UAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE1D,QAAA,OAAO,WAAW,IAA+B,KAAK;AAG1D,QAAI,UAAU;AACb,YAAM,eAAe,SAAS;AAAA,QAC7B;AAAA,QACA,WAAW,WAAW,IAAI;AAAA,QAC1B,GAAG;AAAA,MAAA,CACH;AAED,UAAI,cAAc;AACV,eAAA;AAAA,MACP;AAAA,IACD;AAEK,UAAA,MACL,QAAQ,SAAS,MAAM,KACpB,MAAM,KACN,GAAG,SAAS,KAAK,UAAU,KAAK;AAEpC,QAAI,MAAM;AACT,UAAI,MAAM,UAAU;AACnB,cAAM,EAAE,UAAU,GAAG,YAAA,IAAgB;AAErC,eAAQ,oBAAA,MAAA,EAAe,GAAI,YAAA,GAAT,GAAqB;AAAA,MAAA,OACjC;AACN,mCACE,MAEA,EAAA,OACA,OACA,QACA,WAJK,GAIY;AAAA,MAGnB;AAAA,IAAA,OACK;AACC,aAAA,oBAAC,oBAA6B,EAAA,MAAA,GAAL,GAAkB;AAAA,IAClD;AAAA,EAAA,CACD;AAED,yCAAU,UAAe,eAAA,CAAA;AAC1B;"}

package/dist/package.json.cjs

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "2.7.3";
+const version = "2.8.0";
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.map

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const version = "2.7.3";
+const version = "2.8.0";
 export {
   version
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/react",
-	"version": "2.7.3",
+	"version": "2.8.0",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
 		"typescript",
@@ -104,7 +104,7 @@
 	},
 	"peerDependencies": {
 		"@prismicio/client": "^6 || ^7",
-		"react": "^18"
+		"react": "^18 || ^19.0.0-rc.0"
 	},
 	"engines": {
 		"node": ">=12.7.0"

package/src/SliceZone.tsx

@@ -247,9 +247,11 @@ export type SliceZoneProps<TContext = unknown> = {
  * This is also the default React component rendered when a component mapping
  * cannot be found in `<SliceZone>`.
  */
-export const TODOSliceComponent = <TSlice extends SliceLike, TContext>({
+export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
-}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
+}: {
+	slice: TSlice;
+}): JSX.Element | null => {
 	if (
 		typeof process !== "undefined" &&
 		process.env.NODE_ENV === "development"
@@ -291,7 +293,7 @@ export function SliceZone<TContext>({
 	slices = [],
 	components = {},
 	resolver,
-	defaultComponent = TODOSliceComponent,
+	defaultComponent,
 	context = {} as TContext,
 }: SliceZoneProps<TContext>) {
 	// TODO: Remove in v3 when the `resolver` prop is removed.
@@ -326,20 +328,24 @@ export function SliceZone<TContext>({
 				? slice.id
 				: `${index}-${JSON.stringify(slice)}`;
 
-		if (slice.__mapped) {
-			const { __mapped, ...mappedProps } = slice;
-
-			return <Comp key={key} {...mappedProps} />;
+		if (Comp) {
+			if (slice.__mapped) {
+				const { __mapped, ...mappedProps } = slice;
+
+				return <Comp key={key} {...mappedProps} />;
+			} else {
+				return (
+					<Comp
+						key={key}
+						slice={slice}
+						index={index}
+						slices={slices}
+						context={context}
+					/>
+				);
+			}
 		} else {
-			return (
-				<Comp
-					key={key}
-					slice={slice}
-					index={index}
-					slices={slices}
-					context={context}
-				/>
-			);
+			return <TODOSliceComponent key={key} slice={slice} />;
 		}
 	});