@prismicio/next 2.1.1-pr.120.777302d → 2.1.1-pr.120.d4d6ca6
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/SliceSimulator.cjs +5 -1
- package/dist/SliceSimulator.cjs.map +1 -1
- package/dist/SliceSimulator.d.cts +17 -4
- package/dist/SliceSimulatorWrapper.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/package.cjs +1 -1
- package/dist/pages/SliceSimulator.cjs +1 -3
- package/dist/pages/SliceSimulator.cjs.map +1 -1
- package/dist/pages/SliceSimulator.d.cts +3 -6
- package/dist/types.d.cts +1 -9
- package/package.json +1 -1
- package/src/SliceSimulator.tsx +17 -5
- package/src/SliceSimulatorWrapper.tsx +3 -3
- package/src/index.ts +5 -2
- package/src/pages/SliceSimulator.tsx +22 -37
- package/src/types.ts +0 -9
package/dist/SliceSimulator.cjs
CHANGED
|
@@ -12,6 +12,10 @@ let lz_string = require("lz-string");
|
|
|
12
12
|
//#region src/SliceSimulator.tsx
|
|
13
13
|
const STATE_PARAMS_KEY = "state";
|
|
14
14
|
const simulatorManager = new _prismicio_simulator_kit.SimulatorManager();
|
|
15
|
+
/**
|
|
16
|
+
* Simulate slices in isolation. The slice simulator enables live slice
|
|
17
|
+
* development in Slice Machine and live previews in the Page Builder.
|
|
18
|
+
*/
|
|
15
19
|
const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
16
20
|
const [message, setMessage] = (0, react.useState)(() => (0, _prismicio_simulator_kit.getDefaultMessage)());
|
|
17
21
|
const router = (0, next_navigation.useRouter)();
|
|
@@ -29,7 +33,7 @@ const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
|
29
33
|
simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Slices, "simulator-slices");
|
|
30
34
|
simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Message, "simulator-message");
|
|
31
35
|
};
|
|
32
|
-
}, []);
|
|
36
|
+
}, [router]);
|
|
33
37
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliceSimulatorWrapper.SliceSimulatorWrapper, {
|
|
34
38
|
message,
|
|
35
39
|
hasSlices,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","getSlices","StateEventType","SliceSimulatorWrapper"],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\";\n\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\nimport {\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport type { SliceSimulatorProps as BaseSliceSimulatorProps } from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useState } from \"react\";\nimport type { FC } from \"react\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type
|
|
1
|
+
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","getSlices","StateEventType","SliceSimulatorWrapper"],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\";\n\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\nimport {\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport type { SliceSimulatorProps as BaseSliceSimulatorProps } from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useState } from \"react\";\nimport type { FC, ReactNode } from \"react\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\n/**\n * Parameters provided to the Slice Simulator page.\n */\nexport type SliceSimulatorParams = {\n\tsearchParams: Promise<{\n\t\tstate?: string;\n\t}>;\n};\n\nexport type SliceSimulatorProps = BaseSliceSimulatorProps & {\n\tchildren: ReactNode;\n\tclassName?: string;\n};\n\n/**\n * Simulate slices in isolation. The slice simulator enables live slice\n * development in Slice Machine and live previews in the Page Builder.\n */\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tchildren,\n\tbackground,\n\tzIndex,\n\tclassName,\n}) => {\n\tconst [message, setMessage] = useState(() => getDefaultMessage());\n\tconst router = useRouter();\n\n\tconst state =\n\t\ttypeof window !== \"undefined\"\n\t\t\t? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)\n\t\t\t: undefined;\n\tconst hasSlices = getSlices(state).length > 0;\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(newSlices) => {\n\t\t\t\tconst url = new URL(window.location.href);\n\t\t\t\turl.searchParams.set(\n\t\t\t\t\tSTATE_PARAMS_KEY,\n\t\t\t\t\tcompressToEncodedURIComponent(JSON.stringify(newSlices)),\n\t\t\t\t);\n\n\t\t\t\twindow.history.replaceState(null, \"\", url);\n\t\t\t\t// Wait until the next tick to prevent URL state race conditions.\n\t\t\t\tsetTimeout(() => router.refresh(), 0);\n\t\t\t},\n\t\t\t\"simulator-slices\",\n\t\t);\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Message,\n\t\t\t(newMessage) => setMessage(newMessage),\n\t\t\t\"simulator-message\",\n\t\t);\n\n\t\tsimulatorManager.init();\n\n\t\treturn () => {\n\t\t\tsimulatorManager.state.off(StateEventType.Slices, \"simulator-slices\");\n\n\t\t\tsimulatorManager.state.off(StateEventType.Message, \"simulator-message\");\n\t\t};\n\t}, [router]);\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\n\t\t\thasSlices={hasSlices}\n\t\t\tbackground={background}\n\t\t\tzIndex={zIndex}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t{children}\n\t\t</SliceSimulatorWrapper>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB,IAAIA,2CAAkB;;;;;AAoB/C,MAAa,kBAA2C,EACvD,UACA,YACA,QACA,gBACK;CACL,MAAM,CAAC,SAAS,yFAAgD,CAAC;CACjE,MAAM,yCAAoB;CAM1B,MAAM,YAAYC,4BAHjB,OAAO,WAAW,cACf,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC,aAAa,IAAI,iBAAiB,GAChE,OAC8B,CAAC,SAAS;AAE5C,4BAAgB;AACf,mBAAiB,MAAM,GACtBC,wCAAe,SACd,cAAc;GACd,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,KAAK;AACzC,OAAI,aAAa,IAChB,+DAC8B,KAAK,UAAU,UAAU,CAAC,CACxD;AAED,UAAO,QAAQ,aAAa,MAAM,IAAI,IAAI;AAE1C,oBAAiB,OAAO,SAAS,EAAE,EAAE;KAEtC,mBACA;AACD,mBAAiB,MAAM,GACtBA,wCAAe,UACd,eAAe,WAAW,WAAW,EACtC,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAIA,wCAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAIA,wCAAe,SAAS,oBAAoB;;IAEtE,CAAC,OAAO,CAAC;AAEZ,QACC,2CAACC;EACS;EACE;EACC;EACJ;EACG;EAEV;GACsB"}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
|
-
import { FC } from "react";
|
|
1
|
+
import { FC, ReactNode } from "react";
|
|
2
2
|
import { SliceSimulatorProps } from "@prismicio/simulator/kit";
|
|
3
3
|
|
|
4
4
|
//#region src/SliceSimulator.d.ts
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Parameters provided to the Slice Simulator page.
|
|
8
|
+
*/
|
|
9
|
+
type SliceSimulatorParams = {
|
|
10
|
+
searchParams: Promise<{
|
|
11
|
+
state?: string;
|
|
12
|
+
}>;
|
|
13
|
+
};
|
|
14
|
+
type SliceSimulatorProps$1 = SliceSimulatorProps & {
|
|
15
|
+
children: ReactNode;
|
|
7
16
|
className?: string;
|
|
8
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* Simulate slices in isolation. The slice simulator enables live slice
|
|
20
|
+
* development in Slice Machine and live previews in the Page Builder.
|
|
21
|
+
*/
|
|
9
22
|
declare const SliceSimulator: FC<SliceSimulatorProps$1>;
|
|
10
23
|
//#endregion
|
|
11
|
-
export { SliceSimulator, SliceSimulatorProps$1 as SliceSimulatorProps };
|
|
24
|
+
export { SliceSimulator, SliceSimulatorParams, SliceSimulatorProps$1 as SliceSimulatorProps };
|
|
12
25
|
//# sourceMappingURL=SliceSimulator.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulatorWrapper.cjs","names":["simulatorClass","simulatorRootClass","onClickHandler","disableEventHandler"],"sources":["../src/SliceSimulatorWrapper.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"SliceSimulatorWrapper.cjs","names":["simulatorClass","simulatorRootClass","onClickHandler","disableEventHandler"],"sources":["../src/SliceSimulatorWrapper.tsx"],"sourcesContent":["import {\n\tdisableEventHandler,\n\tgetDefaultProps,\n\tonClickHandler,\n\tsimulatorClass,\n\tsimulatorRootClass,\n} from \"@prismicio/simulator/kit\";\nimport type { SliceSimulatorProps } from \"@prismicio/simulator/kit\";\nimport type { FC, ReactNode } from \"react\";\n\ntype SliceSimulatorWrapperProps = SliceSimulatorProps & {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tmessage?: string;\n\thasSlices: boolean;\n};\n\n/**\n * A wrapper for the slice simulator that isolates the given children from the\n * page's layout.\n */\nexport const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({\n\tclassName,\n\tchildren,\n\tzIndex,\n\tbackground,\n\tmessage,\n\thasSlices,\n}) => {\n\tconst defaultProps = getDefaultProps();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={[simulatorClass, className].filter(Boolean).join(\" \")}\n\t\t\tstyle={{\n\t\t\t\tzIndex:\n\t\t\t\t\ttypeof zIndex === \"undefined\"\n\t\t\t\t\t\t? defaultProps.zIndex\n\t\t\t\t\t\t: (zIndex ?? undefined),\n\t\t\t\tposition: \"fixed\",\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\twidth: \"100%\",\n\t\t\t\theight: \"100vh\",\n\t\t\t\toverflow: \"auto\",\n\t\t\t\tbackground:\n\t\t\t\t\ttypeof background === \"undefined\"\n\t\t\t\t\t\t? defaultProps.background\n\t\t\t\t\t\t: (background ?? undefined),\n\t\t\t}}\n\t\t>\n\t\t\t{message ? (\n\t\t\t\t<article dangerouslySetInnerHTML={{ __html: message }} />\n\t\t\t) : hasSlices ? (\n\t\t\t\t<div\n\t\t\t\t\tid=\"root\"\n\t\t\t\t\tclassName={simulatorRootClass}\n\t\t\t\t\tonClickCapture={onClickHandler as unknown as React.MouseEventHandler}\n\t\t\t\t\tonSubmitCapture={\n\t\t\t\t\t\tdisableEventHandler as unknown as React.FormEventHandler\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;AAqBA,MAAa,yBAAyD,EACrE,WACA,UACA,QACA,YACA,SACA,gBACK;CACL,MAAM,8DAAgC;AAEtC,QACC,2CAAC;EACA,WAAW,CAACA,yCAAgB,UAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAChE,OAAO;GACN,QACC,OAAO,WAAW,cACf,aAAa,SACZ,UAAU;GACf,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,UAAU;GACV,YACC,OAAO,eAAe,cACnB,aAAa,aACZ,cAAc;GACnB;YAEA,UACA,2CAAC,aAAQ,yBAAyB,EAAE,QAAQ,SAAS,GAAI,GACtD,YACH,2CAAC;GACA,IAAG;GACH,WAAWC;GACX,gBAAgBC;GAChB,iBACCC;GAGA;IACI,GACH;GACC"}
|
package/dist/index.d.cts
CHANGED
|
@@ -2,10 +2,10 @@ import { exitPreview } from "./exitPreview.cjs";
|
|
|
2
2
|
import { PrismicPreview, PrismicPreviewProps } from "./PrismicPreview.cjs";
|
|
3
3
|
import { PrismicNextLink, PrismicNextLinkProps } from "./PrismicNextLink.cjs";
|
|
4
4
|
import { EnableAutoPreviewsConfig, enableAutoPreviews } from "./enableAutoPreviews.cjs";
|
|
5
|
-
import { CreateClientConfig
|
|
5
|
+
import { CreateClientConfig } from "./types.cjs";
|
|
6
6
|
import { RedirectToPreviewURLConfig, redirectToPreviewURL } from "./redirectToPreviewURL.cjs";
|
|
7
7
|
import { PrismicNextImage, PrismicNextImageProps } from "./PrismicNextImage.cjs";
|
|
8
|
-
import { SliceSimulator, SliceSimulatorProps } from "./SliceSimulator.cjs";
|
|
8
|
+
import { SliceSimulator, SliceSimulatorParams, SliceSimulatorProps } from "./SliceSimulator.cjs";
|
|
9
9
|
import { getSlices } from "./getSlices.cjs";
|
|
10
10
|
import { imgixLoader } from "./imgixLoader.cjs";
|
|
11
11
|
import { CreateLocaleRedirectConfig, createLocaleRedirect } from "./createLocaleRedirect.cjs";
|
package/dist/package.cjs
CHANGED
|
@@ -10,8 +10,7 @@ const simulatorManager = new _prismicio_simulator_kit.SimulatorManager();
|
|
|
10
10
|
* Simulate slices in isolation. The slice simulator enables live slice
|
|
11
11
|
* development in Slice Machine and live previews in the Page Builder.
|
|
12
12
|
*/
|
|
13
|
-
const SliceSimulator = ({ background, zIndex, className,
|
|
14
|
-
if (!("sliceZone" in restProps)) throw new Error("A sliceZone prop must be provided when <SliceZone> is rendered in a Client Component. Add a sliceZone prop or convert your simulator to a Server Component with the getSlices helper.");
|
|
13
|
+
const SliceSimulator = ({ background, zIndex, className, sliceZone: SliceZoneComp }) => {
|
|
15
14
|
const [slices, setSlices] = (0, react.useState)(() => (0, _prismicio_simulator_kit.getDefaultSlices)());
|
|
16
15
|
const [message, setMessage] = (0, react.useState)(() => (0, _prismicio_simulator_kit.getDefaultMessage)());
|
|
17
16
|
(0, react.useEffect)(() => {
|
|
@@ -27,7 +26,6 @@ const SliceSimulator = ({ background, zIndex, className, ...restProps }) => {
|
|
|
27
26
|
simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Message, "simulator-message");
|
|
28
27
|
};
|
|
29
28
|
}, []);
|
|
30
|
-
const SliceZoneComp = restProps.sliceZone;
|
|
31
29
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliceSimulatorWrapper.SliceSimulatorWrapper, {
|
|
32
30
|
message,
|
|
33
31
|
hasSlices: slices.length > 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","StateEventType","SliceSimulatorWrapper"],"sources":["../../src/pages/SliceSimulator.tsx"],"sourcesContent":["import { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport {\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n\tgetDefaultSlices,\n} from \"@prismicio/simulator/kit\";\nimport type {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSliceSimulatorState,\n} from \"@prismicio/simulator/kit\";\nimport { useEffect, useState } from \"react\";\nimport type { ComponentType, FC } from \"react\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorSliceZoneProps = {\n\tslices: SliceSimulatorState[\"slices\"];\n};\n\nexport type SliceSimulatorProps =
|
|
1
|
+
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","StateEventType","SliceSimulatorWrapper"],"sources":["../../src/pages/SliceSimulator.tsx"],"sourcesContent":["import { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport {\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n\tgetDefaultSlices,\n} from \"@prismicio/simulator/kit\";\nimport type {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSliceSimulatorState,\n} from \"@prismicio/simulator/kit\";\nimport { useEffect, useState } from \"react\";\nimport type { ComponentType, FC } from \"react\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorSliceZoneProps = {\n\tslices: SliceSimulatorState[\"slices\"];\n};\n\nexport type SliceSimulatorProps = BaseSliceSimulatorProps & {\n\t/**\n\t * React component to render simulated Slices.\n\t *\n\t * @example\n\t *\n\t * ```tsx\n\t * import { SliceSimulator } from \"@slicemachine/adapter-next/simulator\";\n\t * import { SliceZone } from \"@prismicio/react\";\n\t *\n\t * import { components } from \"../slices\";\n\t *\n\t * <SliceSimulator\n\t * \tsliceZone={({ slices }) => (\n\t * \t\t<SliceZone slices={slices} components={components} />\n\t * \t)}\n\t * />;\n\t * ```\n\t */\n\tsliceZone: ComponentType<SliceSimulatorSliceZoneProps>;\n\tclassName?: string;\n};\n\n/**\n * Simulate slices in isolation. The slice simulator enables live slice\n * development in Slice Machine and live previews in the Page Builder.\n */\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tbackground,\n\tzIndex,\n\tclassName,\n\tsliceZone: SliceZoneComp,\n}) => {\n\tconst [slices, setSlices] = useState(() => getDefaultSlices());\n\tconst [message, setMessage] = useState(() => getDefaultMessage());\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(_slices) => {\n\t\t\t\tsetSlices(_slices);\n\t\t\t},\n\t\t\t\"simulator-slices\",\n\t\t);\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Message,\n\t\t\t(_message) => {\n\t\t\t\tsetMessage(_message);\n\t\t\t},\n\t\t\t\"simulator-message\",\n\t\t);\n\n\t\tsimulatorManager.init();\n\n\t\treturn () => {\n\t\t\tsimulatorManager.state.off(StateEventType.Slices, \"simulator-slices\");\n\n\t\t\tsimulatorManager.state.off(StateEventType.Message, \"simulator-message\");\n\t\t};\n\t}, []);\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\n\t\t\thasSlices={slices.length > 0}\n\t\t\tbackground={background}\n\t\t\tzIndex={zIndex}\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SliceZoneComp slices={slices} />\n\t\t</SliceSimulatorWrapper>\n\t);\n};\n"],"mappings":";;;;;;;AAcA,MAAM,mBAAmB,IAAIA,2CAAkB;;;;;AAiC/C,MAAa,kBAA2C,EACvD,YACA,QACA,WACA,WAAW,oBACN;CACL,MAAM,CAAC,QAAQ,uFAA8C,CAAC;CAC9D,MAAM,CAAC,SAAS,yFAAgD,CAAC;AAEjE,4BAAgB;AACf,mBAAiB,MAAM,GACtBC,wCAAe,SACd,YAAY;AACZ,aAAU,QAAQ;KAEnB,mBACA;AACD,mBAAiB,MAAM,GACtBA,wCAAe,UACd,aAAa;AACb,cAAW,SAAS;KAErB,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAIA,wCAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAIA,wCAAe,SAAS,oBAAoB;;IAEtE,EAAE,CAAC;AAEN,QACC,2CAACC;EACS;EACT,WAAW,OAAO,SAAS;EACf;EACJ;EACG;YAEX,2CAAC,iBAAsB,SAAU;GACV"}
|
|
@@ -5,9 +5,7 @@ import { SliceSimulatorProps, SliceSimulatorState } from "@prismicio/simulator/k
|
|
|
5
5
|
type SliceSimulatorSliceZoneProps = {
|
|
6
6
|
slices: SliceSimulatorState["slices"];
|
|
7
7
|
};
|
|
8
|
-
type SliceSimulatorProps$1 = {
|
|
9
|
-
className?: string;
|
|
10
|
-
} & Omit<SliceSimulatorProps, "state"> & ({
|
|
8
|
+
type SliceSimulatorProps$1 = SliceSimulatorProps & {
|
|
11
9
|
/**
|
|
12
10
|
* React component to render simulated Slices.
|
|
13
11
|
*
|
|
@@ -27,9 +25,8 @@ type SliceSimulatorProps$1 = {
|
|
|
27
25
|
* ```
|
|
28
26
|
*/
|
|
29
27
|
sliceZone: ComponentType<SliceSimulatorSliceZoneProps>;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
});
|
|
28
|
+
className?: string;
|
|
29
|
+
};
|
|
33
30
|
/**
|
|
34
31
|
* Simulate slices in isolation. The slice simulator enables live slice
|
|
35
32
|
* development in Slice Machine and live previews in the Page Builder.
|
package/dist/types.d.cts
CHANGED
|
@@ -26,14 +26,6 @@ type NextRequestLike = {
|
|
|
26
26
|
};
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
|
-
/**
|
|
30
|
-
* Parameters provided to the Slice Simulator page.
|
|
31
|
-
*/
|
|
32
|
-
type SliceSimulatorParams = {
|
|
33
|
-
searchParams: Promise<{
|
|
34
|
-
state?: string;
|
|
35
|
-
}>;
|
|
36
|
-
};
|
|
37
29
|
//#endregion
|
|
38
|
-
export { CreateClientConfig, NextRequestLike
|
|
30
|
+
export { CreateClientConfig, NextRequestLike };
|
|
39
31
|
//# sourceMappingURL=types.d.cts.map
|
package/package.json
CHANGED
package/src/SliceSimulator.tsx
CHANGED
|
@@ -11,17 +11,30 @@ import type { SliceSimulatorProps as BaseSliceSimulatorProps } from "@prismicio/
|
|
|
11
11
|
import { compressToEncodedURIComponent } from "lz-string";
|
|
12
12
|
import { useRouter } from "next/navigation";
|
|
13
13
|
import { useEffect, useState } from "react";
|
|
14
|
-
import type { FC } from "react";
|
|
14
|
+
import type { FC, ReactNode } from "react";
|
|
15
15
|
|
|
16
16
|
const STATE_PARAMS_KEY = "state";
|
|
17
17
|
|
|
18
18
|
const simulatorManager = new SimulatorManager();
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
/**
|
|
21
|
+
* Parameters provided to the Slice Simulator page.
|
|
22
|
+
*/
|
|
23
|
+
export type SliceSimulatorParams = {
|
|
24
|
+
searchParams: Promise<{
|
|
25
|
+
state?: string;
|
|
26
|
+
}>;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export type SliceSimulatorProps = BaseSliceSimulatorProps & {
|
|
30
|
+
children: ReactNode;
|
|
22
31
|
className?: string;
|
|
23
32
|
};
|
|
24
33
|
|
|
34
|
+
/**
|
|
35
|
+
* Simulate slices in isolation. The slice simulator enables live slice
|
|
36
|
+
* development in Slice Machine and live previews in the Page Builder.
|
|
37
|
+
*/
|
|
25
38
|
export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
26
39
|
children,
|
|
27
40
|
background,
|
|
@@ -66,8 +79,7 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
66
79
|
|
|
67
80
|
simulatorManager.state.off(StateEventType.Message, "simulator-message");
|
|
68
81
|
};
|
|
69
|
-
|
|
70
|
-
}, []);
|
|
82
|
+
}, [router]);
|
|
71
83
|
|
|
72
84
|
return (
|
|
73
85
|
<SliceSimulatorWrapper
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { SliceSimulatorProps } from "./SliceSimulator";
|
|
2
1
|
import {
|
|
3
2
|
disableEventHandler,
|
|
4
3
|
getDefaultProps,
|
|
@@ -6,14 +5,15 @@ import {
|
|
|
6
5
|
simulatorClass,
|
|
7
6
|
simulatorRootClass,
|
|
8
7
|
} from "@prismicio/simulator/kit";
|
|
8
|
+
import type { SliceSimulatorProps } from "@prismicio/simulator/kit";
|
|
9
9
|
import type { FC, ReactNode } from "react";
|
|
10
10
|
|
|
11
|
-
type SliceSimulatorWrapperProps = {
|
|
11
|
+
type SliceSimulatorWrapperProps = SliceSimulatorProps & {
|
|
12
12
|
children: ReactNode;
|
|
13
13
|
className?: string;
|
|
14
14
|
message?: string;
|
|
15
15
|
hasSlices: boolean;
|
|
16
|
-
}
|
|
16
|
+
};
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
* A wrapper for the slice simulator that isolates the given children from the
|
package/src/index.ts
CHANGED
|
@@ -16,13 +16,16 @@ export { PrismicNextImage } from "./PrismicNextImage";
|
|
|
16
16
|
export type { PrismicNextImageProps } from "./PrismicNextImage";
|
|
17
17
|
|
|
18
18
|
export { SliceSimulator } from "./SliceSimulator";
|
|
19
|
-
export type {
|
|
19
|
+
export type {
|
|
20
|
+
SliceSimulatorProps,
|
|
21
|
+
SliceSimulatorParams,
|
|
22
|
+
} from "./SliceSimulator";
|
|
20
23
|
|
|
21
24
|
export { getSlices } from "./getSlices";
|
|
22
25
|
|
|
23
26
|
export { imgixLoader } from "./imgixLoader";
|
|
24
27
|
|
|
25
|
-
export type { CreateClientConfig
|
|
28
|
+
export type { CreateClientConfig } from "./types";
|
|
26
29
|
|
|
27
30
|
export { createLocaleRedirect } from "./createLocaleRedirect";
|
|
28
31
|
export type { CreateLocaleRedirectConfig } from "./createLocaleRedirect";
|
|
@@ -18,35 +18,28 @@ export type SliceSimulatorSliceZoneProps = {
|
|
|
18
18
|
slices: SliceSimulatorState["slices"];
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
export type SliceSimulatorProps = {
|
|
21
|
+
export type SliceSimulatorProps = BaseSliceSimulatorProps & {
|
|
22
|
+
/**
|
|
23
|
+
* React component to render simulated Slices.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
*
|
|
27
|
+
* ```tsx
|
|
28
|
+
* import { SliceSimulator } from "@slicemachine/adapter-next/simulator";
|
|
29
|
+
* import { SliceZone } from "@prismicio/react";
|
|
30
|
+
*
|
|
31
|
+
* import { components } from "../slices";
|
|
32
|
+
*
|
|
33
|
+
* <SliceSimulator
|
|
34
|
+
* sliceZone={({ slices }) => (
|
|
35
|
+
* <SliceZone slices={slices} components={components} />
|
|
36
|
+
* )}
|
|
37
|
+
* />;
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
sliceZone: ComponentType<SliceSimulatorSliceZoneProps>;
|
|
22
41
|
className?: string;
|
|
23
|
-
}
|
|
24
|
-
(
|
|
25
|
-
| {
|
|
26
|
-
/**
|
|
27
|
-
* React component to render simulated Slices.
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
*
|
|
31
|
-
* ```tsx
|
|
32
|
-
* import { SliceSimulator } from "@slicemachine/adapter-next/simulator";
|
|
33
|
-
* import { SliceZone } from "@prismicio/react";
|
|
34
|
-
*
|
|
35
|
-
* import { components } from "../slices";
|
|
36
|
-
*
|
|
37
|
-
* <SliceSimulator
|
|
38
|
-
* sliceZone={({ slices }) => (
|
|
39
|
-
* <SliceZone slices={slices} components={components} />
|
|
40
|
-
* )}
|
|
41
|
-
* />;
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
sliceZone: ComponentType<SliceSimulatorSliceZoneProps>;
|
|
45
|
-
}
|
|
46
|
-
| {
|
|
47
|
-
children: React.ReactNode;
|
|
48
|
-
}
|
|
49
|
-
);
|
|
42
|
+
};
|
|
50
43
|
|
|
51
44
|
/**
|
|
52
45
|
* Simulate slices in isolation. The slice simulator enables live slice
|
|
@@ -56,14 +49,8 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
56
49
|
background,
|
|
57
50
|
zIndex,
|
|
58
51
|
className,
|
|
59
|
-
|
|
52
|
+
sliceZone: SliceZoneComp,
|
|
60
53
|
}) => {
|
|
61
|
-
if (!("sliceZone" in restProps)) {
|
|
62
|
-
throw new Error(
|
|
63
|
-
"A sliceZone prop must be provided when <SliceZone> is rendered in a Client Component. Add a sliceZone prop or convert your simulator to a Server Component with the getSlices helper.",
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
54
|
const [slices, setSlices] = useState(() => getDefaultSlices());
|
|
68
55
|
const [message, setMessage] = useState(() => getDefaultMessage());
|
|
69
56
|
|
|
@@ -92,8 +79,6 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
92
79
|
};
|
|
93
80
|
}, []);
|
|
94
81
|
|
|
95
|
-
const SliceZoneComp = restProps.sliceZone;
|
|
96
|
-
|
|
97
82
|
return (
|
|
98
83
|
<SliceSimulatorWrapper
|
|
99
84
|
message={message}
|