@prismicio/react 3.4.2-pr.269.5cf8da6 → 3.4.2-pr.270.b8e16cb
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/SliceBoundary.js +55 -0
- package/dist/SliceBoundary.js.map +1 -0
- package/dist/SliceZone.d.ts.map +1 -1
- package/dist/SliceZone.js +14 -7
- package/dist/SliceZone.js.map +1 -1
- package/dist/package.js +1 -1
- package/package.json +1 -1
- package/src/SliceBoundary.tsx +77 -0
- package/src/SliceZone.tsx +18 -7
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useId, useLayoutEffect, useRef, useSyncExternalStore } from "react";
|
|
3
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/SliceBoundary.tsx
|
|
5
|
+
function SliceBoundary(props) {
|
|
6
|
+
const { children, sliceId } = props;
|
|
7
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
8
|
+
/* @__PURE__ */ jsx(CommentMarker, { value: `prismic-slice-start:${sliceId}` }),
|
|
9
|
+
children,
|
|
10
|
+
/* @__PURE__ */ jsx(CommentMarker, { value: `prismic-slice-end:${sliceId}` })
|
|
11
|
+
] });
|
|
12
|
+
}
|
|
13
|
+
function CommentMarker(props) {
|
|
14
|
+
const { value } = props;
|
|
15
|
+
const id = useId();
|
|
16
|
+
const isClient = useIsClient();
|
|
17
|
+
const anchorRef = useRef(null);
|
|
18
|
+
useLayoutEffect(() => {
|
|
19
|
+
let anchor = anchorRef.current;
|
|
20
|
+
if (!anchor?.isConnected) {
|
|
21
|
+
anchor = findTextNode(id);
|
|
22
|
+
if (!anchor) return;
|
|
23
|
+
anchor.data = "";
|
|
24
|
+
anchorRef.current = anchor;
|
|
25
|
+
}
|
|
26
|
+
const comment = document.createComment(value);
|
|
27
|
+
anchor.after(comment);
|
|
28
|
+
return () => comment.remove();
|
|
29
|
+
});
|
|
30
|
+
return isClient ? id : null;
|
|
31
|
+
}
|
|
32
|
+
function useIsClient() {
|
|
33
|
+
return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
|
|
34
|
+
}
|
|
35
|
+
function subscribe() {
|
|
36
|
+
return () => {};
|
|
37
|
+
}
|
|
38
|
+
function getClientSnapshot() {
|
|
39
|
+
return true;
|
|
40
|
+
}
|
|
41
|
+
function getServerSnapshot() {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
function findTextNode(value) {
|
|
45
|
+
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
|
|
46
|
+
while (walker.nextNode()) {
|
|
47
|
+
const node = walker.currentNode;
|
|
48
|
+
if (node instanceof Text && node.data === value) return node;
|
|
49
|
+
}
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
export { SliceBoundary };
|
|
54
|
+
|
|
55
|
+
//# sourceMappingURL=SliceBoundary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SliceBoundary.js","names":[],"sources":["../src/SliceBoundary.tsx"],"sourcesContent":["\"use client\"\n\nimport { type ReactNode, useId, useLayoutEffect, useRef, useSyncExternalStore } from \"react\"\n\ntype SliceBoundaryProps = {\n\tchildren: ReactNode\n\tsliceId: string\n}\n\nexport function SliceBoundary(props: SliceBoundaryProps): ReactNode {\n\tconst { children, sliceId } = props\n\n\treturn (\n\t\t<>\n\t\t\t<CommentMarker value={`prismic-slice-start:${sliceId}`} />\n\t\t\t{children}\n\t\t\t<CommentMarker value={`prismic-slice-end:${sliceId}`} />\n\t\t</>\n\t)\n}\n\ntype CommentMarkerProps = {\n\tvalue: string\n}\n\nfunction CommentMarker(props: CommentMarkerProps) {\n\tconst { value } = props\n\tconst id = useId()\n\tconst isClient = useIsClient()\n\tconst anchorRef = useRef<Text>(null)\n\n\tuseLayoutEffect(() => {\n\t\tlet anchor = anchorRef.current\n\n\t\tif (!anchor?.isConnected) {\n\t\t\tanchor = findTextNode(id)\n\t\t\tif (!anchor) return\n\n\t\t\tanchor.data = \"\"\n\t\t\tanchorRef.current = anchor\n\t\t}\n\n\t\tconst comment = document.createComment(value)\n\t\tanchor.after(comment)\n\n\t\treturn () => comment.remove()\n\t})\n\n\treturn isClient ? id : null\n}\n\nfunction useIsClient() {\n\treturn useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot)\n}\n\nfunction subscribe() {\n\treturn () => {}\n}\n\nfunction getClientSnapshot() {\n\treturn true\n}\n\nfunction getServerSnapshot() {\n\treturn false\n}\n\nfunction findTextNode(value: string) {\n\tconst walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)\n\n\twhile (walker.nextNode()) {\n\t\tconst node = walker.currentNode\n\t\tif (node instanceof Text && node.data === value) return node\n\t}\n\n\treturn null\n}\n"],"mappings":";;;;AASA,SAAgB,cAAc,OAAsC;CACnE,MAAM,EAAE,UAAU,YAAY;AAE9B,QACC,qBAAA,YAAA,EAAA,UAAA;EACC,oBAAC,eAAD,EAAe,OAAO,uBAAuB,WAAa,CAAA;EACzD;EACD,oBAAC,eAAD,EAAe,OAAO,qBAAqB,WAAa,CAAA;EACtD,EAAA,CAAA;;AAQL,SAAS,cAAc,OAA2B;CACjD,MAAM,EAAE,UAAU;CAClB,MAAM,KAAK,OAAO;CAClB,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,OAAa,KAAK;AAEpC,uBAAsB;EACrB,IAAI,SAAS,UAAU;AAEvB,MAAI,CAAC,QAAQ,aAAa;AACzB,YAAS,aAAa,GAAG;AACzB,OAAI,CAAC,OAAQ;AAEb,UAAO,OAAO;AACd,aAAU,UAAU;;EAGrB,MAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,SAAO,MAAM,QAAQ;AAErB,eAAa,QAAQ,QAAQ;GAC5B;AAEF,QAAO,WAAW,KAAK;;AAGxB,SAAS,cAAc;AACtB,QAAO,qBAAqB,WAAW,mBAAmB,kBAAkB;;AAG7E,SAAS,YAAY;AACpB,cAAa;;AAGd,SAAS,oBAAoB;AAC5B,QAAO;;AAGR,SAAS,oBAAoB;AAC5B,QAAO;;AAGR,SAAS,aAAa,OAAe;CACpC,MAAM,SAAS,SAAS,iBAAiB,SAAS,MAAM,WAAW,UAAU;AAE7E,QAAO,OAAO,UAAU,EAAE;EACzB,MAAM,OAAO,OAAO;AACpB,MAAI,gBAAgB,QAAQ,KAAK,SAAS,MAAO,QAAO;;AAGzD,QAAO"}
|
package/dist/SliceZone.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceZone.d.ts","names":[],"sources":["../src/SliceZone.tsx"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"SliceZone.d.ts","names":[],"sources":["../src/SliceZone.tsx"],"mappings":";;;;;;AAE6E;;;KASxE,gBAAA,gBAAgC,SAAA,IAAa,MAAA,SAAe,KAAA,GAC9D,MAAA,iBACA,MAAA,SAAe,gBAAA,GACd,MAAA;;;;;;;KASQ,eAAA,uCAAsD,IAAA,CACjE,KAAA,CAAM,UAAA;;;;;;;KAUK,gBAAA;EACX,IAAA,EAAM,KAAA,CAAM,UAAA;AAAA;;;AAZb;;;;;;KAuBY,SAAA,wCACT,eAAA,CAAgB,UAAA,IAChB,gBAAA,CAAiB,UAAA;EAzBkD;;;;;;EAiCrE,QAAA;AAAA;;;;;;;;;KAWW,aAAA,gBAA6B,SAAA,GAAY,SAAA,aAAsB,MAAA;AArB3E;;;;;;;;AAAA,KA+BY,mBAAA,gBAAmC,SAAA,GAAY,SAAA;EA/BrC,qCAiCrB,KAAA,EAAO,MAAA,EAhCW;EAmClB,KAAA,UAlCmB;EAyCnB,MAAA,EAAQ,aAAA,CAAc,MAAA,SAAe,gBAAA,GAAmB,gBAAA,GAAmB,eAAA,GAjCnE;EAoCR,OAAA,EAAS,QAAA;AAAA;;;;;;;KASE,kBAAA,gBAEI,SAAA,8BAEZ,aAAA,CAAc,mBAAA,CAAoB,MAAA,EAAQ,QAAA;;;;;;;AA5B9C;;;KAuCY,mBAAA,gBAAmC,SAAA,GAAY,SAAA,wCAW3C,gBAAA,CAAiB,MAAA,IAAU,kBAAA,CACxC,OAAA,CAAQ,MAAA,EAAQ,SAAA,CAAU,SAAA,mBACvB,SAAA,GACA,OAAA,CAAQ,MAAA,EAAQ,SAAA,CAAU,SAAA,IAC7B,QAAA;;;;;;;KAUS,cAAA;EAjDM,8CAmDjB,MAAA,GAAS,aAAA,EAlEqC;EAsE9C,UAAA,GAAa,MAAA,SAAe,aAAA,QAtEyC;EA0ErE,gBAAA,GAAmB,aAAA,CAAc,mBAAA,MAAyB,QAAA,IAxEnD;EA2EP,OAAA,GAAU,QAAA;AAAA;;;;;;;cASE,kBAAA,kBAAqC,SAAA;EAAW;AAAA;EAG5D,KAAA,EAAO,MAAA;AAAA,MACJ,SAAA;AAlEJ;;;;;;;;;;AAAA,cA6Fa,SAAA,EAAW,EAAA,CAAG,cAAA"}
|
package/dist/SliceZone.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { SliceBoundary } from "./SliceBoundary.js";
|
|
1
2
|
import { DEV } from "esm-env";
|
|
2
|
-
import { Fragment
|
|
3
|
+
import { Fragment } from "react";
|
|
4
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
3
5
|
//#region src/SliceZone.tsx
|
|
4
6
|
/**
|
|
5
7
|
* This slice component can be used as a reminder to provide a proper implementation.
|
|
@@ -33,21 +35,26 @@ const TODOSliceComponent = ({ slice }) => {
|
|
|
33
35
|
*/
|
|
34
36
|
const SliceZone = (props) => {
|
|
35
37
|
const { slices = [], components = {}, defaultComponent, context = {} } = props;
|
|
36
|
-
return /* @__PURE__ */ jsx(Fragment, { children: slices.map((slice, index) => {
|
|
38
|
+
return /* @__PURE__ */ jsx(Fragment$1, { children: slices.map((slice, index) => {
|
|
37
39
|
const type = "slice_type" in slice ? slice.slice_type : slice.type;
|
|
38
40
|
const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`;
|
|
39
41
|
const Comp = components[type] || defaultComponent;
|
|
40
|
-
|
|
41
|
-
if (
|
|
42
|
+
let renderedSlice;
|
|
43
|
+
if (!Comp) renderedSlice = /* @__PURE__ */ jsx(TODOSliceComponent, { slice });
|
|
44
|
+
else if (slice.__mapped) {
|
|
42
45
|
const { __mapped, ...mappedProps } = slice;
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
return /* @__PURE__ */ jsx(Comp, {
|
|
46
|
+
renderedSlice = /* @__PURE__ */ jsx(Comp, { ...mappedProps });
|
|
47
|
+
} else renderedSlice = /* @__PURE__ */ jsx(Comp, {
|
|
46
48
|
slice,
|
|
47
49
|
index,
|
|
48
50
|
slices,
|
|
49
51
|
context
|
|
52
|
+
});
|
|
53
|
+
if ("id" in slice && slice.id) return /* @__PURE__ */ jsx(SliceBoundary, {
|
|
54
|
+
sliceId: slice.id,
|
|
55
|
+
children: renderedSlice
|
|
50
56
|
}, key);
|
|
57
|
+
return /* @__PURE__ */ jsx(Fragment, { children: renderedSlice }, key);
|
|
51
58
|
}) });
|
|
52
59
|
};
|
|
53
60
|
//#endregion
|
package/dist/SliceZone.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceZone.js","names":[],"sources":["../src/SliceZone.tsx"],"sourcesContent":["import type { Slice } from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport type
|
|
1
|
+
{"version":3,"file":"SliceZone.js","names":[],"sources":["../src/SliceZone.tsx"],"sourcesContent":["import type { Slice } from \"@prismicio/client\"\nimport { DEV } from \"esm-env\"\nimport { Fragment, type ComponentType, type FC, type ReactNode } from \"react\"\n\nimport { SliceBoundary } from \"./SliceBoundary.js\"\n\n/**\n * Returns the type of a `SliceLike` type.\n *\n * @typeParam TSlice - The slice from which the type will be extracted.\n */\ntype ExtractSliceType<TSlice extends SliceLike> = TSlice extends Slice\n\t? TSlice[\"slice_type\"]\n\t: TSlice extends SliceLikeGraphQL\n\t\t? TSlice[\"type\"]\n\t\t: never\n\n/**\n * The minimum required properties to represent a Prismic slice from the Prismic Content API for the\n * `mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the slice.\n */\nexport type SliceLikeRestV2<TSliceType extends string = string> = Pick<\n\tSlice<TSliceType>,\n\t\"id\" | \"slice_type\"\n>\n\n/**\n * The minimum required properties to represent a Prismic slice from the Prismic GraphQL API for the\n * `mapSliceZone()` helper.\n *\n * @typeParam SliceType - Type name of the slice.\n */\nexport type SliceLikeGraphQL<TSliceType extends string = string> = {\n\ttype: Slice<TSliceType>[\"slice_type\"]\n}\n\n/**\n * The minimum required properties to represent a Prismic slice for the `mapSliceZone()` helper.\n *\n * If using Prismic's Content API, use the `Slice` export from `@prismicio/client` for a full\n * 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 mapper and\n\t * `@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 `SliceLike`.\n *\n * If using Prismic's Content API, use the `SliceZone` export from `@prismicio/client` for the full\n * type.\n *\n * @typeParam TSlice - The type(s) of a slice in the slice zone.\n */\nexport type SliceZoneLike<TSlice extends SliceLike = SliceLike> = readonly TSlice[]\n\n/**\n * React props for a component rendering content from a Prismic slice using the `<SliceZone>`\n * component.\n *\n * @typeParam TSlice - The slice passed as a prop.\n * @typeParam TContext - Arbitrary data passed to `<SliceZone>` and made available to all slice\n * components.\n */\nexport type SliceComponentProps<TSlice extends SliceLike = SliceLike, TContext = unknown> = {\n\t/** Slice data for this component. */\n\tslice: TSlice\n\n\t/** The index of the slice in the slice zone. */\n\tindex: number\n\n\t/** All slices from the slice zone to which the slice belongs. */\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<TSlice extends SliceLikeGraphQL ? SliceLikeGraphQL : SliceLikeRestV2>\n\n\t/** Arbitrary data passed to `<SliceZone>` and made available to all slice components. */\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> = ComponentType<SliceComponentProps<TSlice, TContext>>\n\n/**\n * A record of slice types mapped to a React component. The component will be rendered for each\n * 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<TSlice extends SliceLike = SliceLike, TContext = unknown> =\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 * 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/** List of slice data from the slice zone. */\n\tslices?: SliceZoneLike\n\n\t/** A record mapping slice types to React components. */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tcomponents?: Record<string, ComponentType<any>>\n\n\t/** The React component rendered if a component mapping from the `components` prop cannot be found. */\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tdefaultComponent?: ComponentType<SliceComponentProps<any, TContext>>\n\n\t/** Arbitrary data made available to all slice components. */\n\tcontext?: TContext\n}\n\n/**\n * This slice component can be used as a reminder to provide a proper implementation.\n *\n * This is also the default React component rendered when a component mapping cannot be found in\n * `<SliceZone>`.\n */\nexport const TODOSliceComponent = <TSlice extends SliceLike>({\n\tslice,\n}: {\n\tslice: TSlice\n}): ReactNode => {\n\tif (!DEV) {\n\t\treturn null\n\t}\n\n\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type\n\n\tconsole.warn(`[SliceZone] Could not find a component for slice type \"${type}\"`, slice)\n\n\treturn (\n\t\t<section data-slice-zone-todo-component=\"\" data-slice-type={type}>\n\t\t\tCould not find a component for slice type “{type}\n\t\t\t”\n\t\t</section>\n\t)\n}\n\n/**\n * Renders slices in a slice zone as React components.\n *\n * @example\n * \t;```tsx\n * \t<SliceZone slices={page.data.slices} components={components} />;\n * \t```\n *\n * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}\n */\nexport const SliceZone: FC<SliceZoneProps> = (props) => {\n\tconst { slices = [], components = {}, defaultComponent, context = {} } = props\n\n\tconst renderedSlices = slices.map((slice, index) => {\n\t\tconst type = \"slice_type\" in slice ? slice.slice_type : slice.type\n\n\t\tconst key = \"id\" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`\n\n\t\tconst Comp = components[type as keyof typeof components] || defaultComponent\n\t\tlet renderedSlice: ReactNode\n\n\t\tif (!Comp) {\n\t\t\trenderedSlice = <TODOSliceComponent slice={slice} />\n\t\t} else if (slice.__mapped) {\n\t\t\tconst { __mapped, ...mappedProps } = slice\n\n\t\t\trenderedSlice = <Comp {...mappedProps} />\n\t\t} else {\n\t\t\trenderedSlice = <Comp slice={slice} index={index} slices={slices} context={context} />\n\t\t}\n\n\t\tif (\"id\" in slice && slice.id) {\n\t\t\treturn (\n\t\t\t\t<SliceBoundary key={key} sliceId={slice.id}>\n\t\t\t\t\t{renderedSlice}\n\t\t\t\t</SliceBoundary>\n\t\t\t)\n\t\t}\n\n\t\treturn <Fragment key={key}>{renderedSlice}</Fragment>\n\t})\n\n\treturn <>{renderedSlices}</>\n}\n"],"mappings":";;;;;;;;;;;AAmKA,MAAa,sBAAgD,EAC5D,YAGgB;AAChB,KAAI,CAAC,IACJ,QAAO;CAGR,MAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;AAE9D,SAAQ,KAAK,0DAA0D,KAAK,IAAI,MAAM;AAEtF,QACC,qBAAC,WAAD;EAAS,kCAA+B;EAAG,mBAAiB;YAA5D;GAAkE;GACf;GAAK;GAE9C;;;;;;;;;;;;;AAcZ,MAAa,aAAiC,UAAU;CACvD,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,EAAE,EAAE,kBAAkB,UAAU,EAAE,KAAK;AA+BzE,QAAO,oBAAA,YAAA,EAAA,UA7BgB,OAAO,KAAK,OAAO,UAAU;EACnD,MAAM,OAAO,gBAAgB,QAAQ,MAAM,aAAa,MAAM;EAE9D,MAAM,MAAM,QAAQ,SAAS,MAAM,KAAK,MAAM,KAAK,GAAG,MAAM,GAAG,KAAK,UAAU,MAAM;EAEpF,MAAM,OAAO,WAAW,SAAoC;EAC5D,IAAI;AAEJ,MAAI,CAAC,KACJ,iBAAgB,oBAAC,oBAAD,EAA2B,OAAS,CAAA;WAC1C,MAAM,UAAU;GAC1B,MAAM,EAAE,UAAU,GAAG,gBAAgB;AAErC,mBAAgB,oBAAC,MAAD,EAAM,GAAI,aAAe,CAAA;QAEzC,iBAAgB,oBAAC,MAAD;GAAa;GAAc;GAAe;GAAiB;GAAW,CAAA;AAGvF,MAAI,QAAQ,SAAS,MAAM,GAC1B,QACC,oBAAC,eAAD;GAAyB,SAAS,MAAM;aACtC;GACc,EAFI,IAEJ;AAIlB,SAAO,oBAAC,UAAD,EAAA,UAAqB,eAAyB,EAA/B,IAA+B;GACpD,EAE0B,CAAA"}
|
package/dist/package.js
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { type ReactNode, useId, useLayoutEffect, useRef, useSyncExternalStore } from "react"
|
|
4
|
+
|
|
5
|
+
type SliceBoundaryProps = {
|
|
6
|
+
children: ReactNode
|
|
7
|
+
sliceId: string
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function SliceBoundary(props: SliceBoundaryProps): ReactNode {
|
|
11
|
+
const { children, sliceId } = props
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<CommentMarker value={`prismic-slice-start:${sliceId}`} />
|
|
16
|
+
{children}
|
|
17
|
+
<CommentMarker value={`prismic-slice-end:${sliceId}`} />
|
|
18
|
+
</>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
type CommentMarkerProps = {
|
|
23
|
+
value: string
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function CommentMarker(props: CommentMarkerProps) {
|
|
27
|
+
const { value } = props
|
|
28
|
+
const id = useId()
|
|
29
|
+
const isClient = useIsClient()
|
|
30
|
+
const anchorRef = useRef<Text>(null)
|
|
31
|
+
|
|
32
|
+
useLayoutEffect(() => {
|
|
33
|
+
let anchor = anchorRef.current
|
|
34
|
+
|
|
35
|
+
if (!anchor?.isConnected) {
|
|
36
|
+
anchor = findTextNode(id)
|
|
37
|
+
if (!anchor) return
|
|
38
|
+
|
|
39
|
+
anchor.data = ""
|
|
40
|
+
anchorRef.current = anchor
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const comment = document.createComment(value)
|
|
44
|
+
anchor.after(comment)
|
|
45
|
+
|
|
46
|
+
return () => comment.remove()
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
return isClient ? id : null
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function useIsClient() {
|
|
53
|
+
return useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot)
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function subscribe() {
|
|
57
|
+
return () => {}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function getClientSnapshot() {
|
|
61
|
+
return true
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function getServerSnapshot() {
|
|
65
|
+
return false
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function findTextNode(value: string) {
|
|
69
|
+
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)
|
|
70
|
+
|
|
71
|
+
while (walker.nextNode()) {
|
|
72
|
+
const node = walker.currentNode
|
|
73
|
+
if (node instanceof Text && node.data === value) return node
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return null
|
|
77
|
+
}
|
package/src/SliceZone.tsx
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { Slice } from "@prismicio/client"
|
|
2
2
|
import { DEV } from "esm-env"
|
|
3
|
-
import type
|
|
3
|
+
import { Fragment, type ComponentType, type FC, type ReactNode } from "react"
|
|
4
|
+
|
|
5
|
+
import { SliceBoundary } from "./SliceBoundary.js"
|
|
4
6
|
|
|
5
7
|
/**
|
|
6
8
|
* Returns the type of a `SliceLike` type.
|
|
@@ -199,18 +201,27 @@ export const SliceZone: FC<SliceZoneProps> = (props) => {
|
|
|
199
201
|
const key = "id" in slice && slice.id ? slice.id : `${index}-${JSON.stringify(slice)}`
|
|
200
202
|
|
|
201
203
|
const Comp = components[type as keyof typeof components] || defaultComponent
|
|
204
|
+
let renderedSlice: ReactNode
|
|
202
205
|
|
|
203
206
|
if (!Comp) {
|
|
204
|
-
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
if (slice.__mapped) {
|
|
207
|
+
renderedSlice = <TODOSliceComponent slice={slice} />
|
|
208
|
+
} else if (slice.__mapped) {
|
|
208
209
|
const { __mapped, ...mappedProps } = slice
|
|
209
210
|
|
|
210
|
-
|
|
211
|
+
renderedSlice = <Comp {...mappedProps} />
|
|
212
|
+
} else {
|
|
213
|
+
renderedSlice = <Comp slice={slice} index={index} slices={slices} context={context} />
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
if ("id" in slice && slice.id) {
|
|
217
|
+
return (
|
|
218
|
+
<SliceBoundary key={key} sliceId={slice.id}>
|
|
219
|
+
{renderedSlice}
|
|
220
|
+
</SliceBoundary>
|
|
221
|
+
)
|
|
211
222
|
}
|
|
212
223
|
|
|
213
|
-
return <
|
|
224
|
+
return <Fragment key={key}>{renderedSlice}</Fragment>
|
|
214
225
|
})
|
|
215
226
|
|
|
216
227
|
return <>{renderedSlices}</>
|