@prismicio/next 2.2.1-canary.0a22932 → 2.2.1-pr.131.6624bed
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 -6
- package/dist/SliceSimulator.cjs.map +1 -1
- package/dist/SliceSimulator.js +6 -7
- package/dist/SliceSimulator.js.map +1 -1
- package/dist/SliceSimulatorWrapper.cjs +12 -5
- package/dist/SliceSimulatorWrapper.cjs.map +1 -1
- package/dist/SliceSimulatorWrapper.js +12 -5
- package/dist/SliceSimulatorWrapper.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/package.cjs +1 -1
- package/dist/package.js +1 -1
- package/dist/pages/SliceSimulator.cjs +0 -1
- package/dist/pages/SliceSimulator.cjs.map +1 -1
- package/dist/pages/SliceSimulator.js +0 -1
- package/dist/pages/SliceSimulator.js.map +1 -1
- package/package.json +1 -1
- package/src/SliceSimulator.tsx +6 -12
- package/src/SliceSimulatorWrapper.tsx +39 -35
- package/src/pages/SliceSimulator.tsx +0 -1
package/dist/SliceSimulator.cjs
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
|
|
4
4
|
const require_SliceSimulatorWrapper = require('./SliceSimulatorWrapper.cjs');
|
|
5
|
-
const require_getSlices = require('./getSlices.cjs');
|
|
6
5
|
let next_navigation = require("next/navigation");
|
|
7
6
|
let react = require("react");
|
|
8
7
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -17,15 +16,16 @@ const simulatorManager = new _prismicio_simulator_kit.SimulatorManager();
|
|
|
17
16
|
* development in Slice Machine and live previews in the Page Builder.
|
|
18
17
|
*/
|
|
19
18
|
const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
20
|
-
const [message, setMessage] = (0, react.useState)((
|
|
19
|
+
const [message, setMessage] = (0, react.useState)((0, _prismicio_simulator_kit.getDefaultMessage)());
|
|
21
20
|
const router = (0, next_navigation.useRouter)();
|
|
22
|
-
const
|
|
21
|
+
const routerRef = (0, react.useRef)(router);
|
|
22
|
+
routerRef.current = router;
|
|
23
23
|
(0, react.useEffect)(() => {
|
|
24
24
|
simulatorManager.state.on(_prismicio_simulator_kit.StateEventType.Slices, (newSlices) => {
|
|
25
25
|
const url = new URL(window.location.href);
|
|
26
26
|
url.searchParams.set(STATE_PARAMS_KEY, (0, lz_string.compressToEncodedURIComponent)(JSON.stringify(newSlices)));
|
|
27
27
|
window.history.replaceState(null, "", url);
|
|
28
|
-
setTimeout(() =>
|
|
28
|
+
setTimeout(() => routerRef.current.refresh(), 0);
|
|
29
29
|
}, "simulator-slices");
|
|
30
30
|
simulatorManager.state.on(_prismicio_simulator_kit.StateEventType.Message, (newMessage) => setMessage(newMessage), "simulator-message");
|
|
31
31
|
simulatorManager.init();
|
|
@@ -33,10 +33,9 @@ const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
|
33
33
|
simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Slices, "simulator-slices");
|
|
34
34
|
simulatorManager.state.off(_prismicio_simulator_kit.StateEventType.Message, "simulator-message");
|
|
35
35
|
};
|
|
36
|
-
}, [
|
|
36
|
+
}, []);
|
|
37
37
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliceSimulatorWrapper.SliceSimulatorWrapper, {
|
|
38
38
|
message,
|
|
39
|
-
hasSlices,
|
|
40
39
|
background,
|
|
41
40
|
zIndex,
|
|
42
41
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","
|
|
1
|
+
{"version":3,"file":"SliceSimulator.cjs","names":["SimulatorManager","StateEventType","SliceSimulatorWrapper"],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\";\n\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\";\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, useRef, 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\tconst routerRef = useRef(router);\n\trouterRef.current = router;\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(() => routerRef.current.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}, []);\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\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":";;;;;;;;;;;AAcA,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB,IAAIA,2CAAkB;;;;;AAoB/C,MAAa,kBAA2C,EACvD,UACA,YACA,QACA,gBACK;CACL,MAAM,CAAC,SAAS,mFAA0C,CAAC;CAC3D,MAAM,yCAAoB;CAC1B,MAAM,8BAAmB,OAAO;AAChC,WAAU,UAAU;AAEpB,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,UAAU,QAAQ,SAAS,EAAE,EAAE;KAEjD,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,EAAE,CAAC;AAEN,QACC,2CAACC;EACS;EACG;EACJ;EACG;EAEV;GACsB"}
|
package/dist/SliceSimulator.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { SliceSimulatorWrapper } from "./SliceSimulatorWrapper.js";
|
|
4
|
-
import { getSlices } from "./getSlices.js";
|
|
5
4
|
import { useRouter } from "next/navigation";
|
|
6
|
-
import { useEffect, useState } from "react";
|
|
5
|
+
import { useEffect, useRef, useState } from "react";
|
|
7
6
|
import { jsx } from "react/jsx-runtime";
|
|
8
7
|
import { SimulatorManager, StateEventType, getDefaultMessage } from "@prismicio/simulator/kit";
|
|
9
8
|
import { compressToEncodedURIComponent } from "lz-string";
|
|
@@ -16,15 +15,16 @@ const simulatorManager = new SimulatorManager();
|
|
|
16
15
|
* development in Slice Machine and live previews in the Page Builder.
|
|
17
16
|
*/
|
|
18
17
|
const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
19
|
-
const [message, setMessage] = useState(
|
|
18
|
+
const [message, setMessage] = useState(getDefaultMessage());
|
|
20
19
|
const router = useRouter();
|
|
21
|
-
const
|
|
20
|
+
const routerRef = useRef(router);
|
|
21
|
+
routerRef.current = router;
|
|
22
22
|
useEffect(() => {
|
|
23
23
|
simulatorManager.state.on(StateEventType.Slices, (newSlices) => {
|
|
24
24
|
const url = new URL(window.location.href);
|
|
25
25
|
url.searchParams.set(STATE_PARAMS_KEY, compressToEncodedURIComponent(JSON.stringify(newSlices)));
|
|
26
26
|
window.history.replaceState(null, "", url);
|
|
27
|
-
setTimeout(() =>
|
|
27
|
+
setTimeout(() => routerRef.current.refresh(), 0);
|
|
28
28
|
}, "simulator-slices");
|
|
29
29
|
simulatorManager.state.on(StateEventType.Message, (newMessage) => setMessage(newMessage), "simulator-message");
|
|
30
30
|
simulatorManager.init();
|
|
@@ -32,10 +32,9 @@ const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
|
32
32
|
simulatorManager.state.off(StateEventType.Slices, "simulator-slices");
|
|
33
33
|
simulatorManager.state.off(StateEventType.Message, "simulator-message");
|
|
34
34
|
};
|
|
35
|
-
}, [
|
|
35
|
+
}, []);
|
|
36
36
|
return /* @__PURE__ */ jsx(SliceSimulatorWrapper, {
|
|
37
37
|
message,
|
|
38
|
-
hasSlices,
|
|
39
38
|
background,
|
|
40
39
|
zIndex,
|
|
41
40
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.js","names":[],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\";\n\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\";\nimport {
|
|
1
|
+
{"version":3,"file":"SliceSimulator.js","names":[],"sources":["../src/SliceSimulator.tsx"],"sourcesContent":["\"use client\";\n\nimport { SliceSimulatorWrapper } from \"./SliceSimulatorWrapper\";\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, useRef, 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\tconst routerRef = useRef(router);\n\trouterRef.current = router;\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(() => routerRef.current.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}, []);\n\n\treturn (\n\t\t<SliceSimulatorWrapper\n\t\t\tmessage={message}\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":";;;;;;;;;;AAcA,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB,IAAI,kBAAkB;;;;;AAoB/C,MAAa,kBAA2C,EACvD,UACA,YACA,QACA,gBACK;CACL,MAAM,CAAC,SAAS,cAAc,SAAS,mBAAmB,CAAC;CAC3D,MAAM,SAAS,WAAW;CAC1B,MAAM,YAAY,OAAO,OAAO;AAChC,WAAU,UAAU;AAEpB,iBAAgB;AACf,mBAAiB,MAAM,GACtB,eAAe,SACd,cAAc;GACd,MAAM,MAAM,IAAI,IAAI,OAAO,SAAS,KAAK;AACzC,OAAI,aAAa,IAChB,kBACA,8BAA8B,KAAK,UAAU,UAAU,CAAC,CACxD;AAED,UAAO,QAAQ,aAAa,MAAM,IAAI,IAAI;AAE1C,oBAAiB,UAAU,QAAQ,SAAS,EAAE,EAAE;KAEjD,mBACA;AACD,mBAAiB,MAAM,GACtB,eAAe,UACd,eAAe,WAAW,WAAW,EACtC,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAI,eAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAI,eAAe,SAAS,oBAAoB;;IAEtE,EAAE,CAAC;AAEN,QACC,oBAAC;EACS;EACG;EACJ;EACG;EAEV;GACsB"}
|
|
@@ -7,9 +7,9 @@ let _prismicio_simulator_kit = require("@prismicio/simulator/kit");
|
|
|
7
7
|
* A wrapper for the slice simulator that isolates the given children from the
|
|
8
8
|
* page's layout.
|
|
9
9
|
*/
|
|
10
|
-
const SliceSimulatorWrapper = ({ className, children, zIndex, background, message
|
|
10
|
+
const SliceSimulatorWrapper = ({ className, children, zIndex, background, message }) => {
|
|
11
11
|
const defaultProps = (0, _prismicio_simulator_kit.getDefaultProps)();
|
|
12
|
-
|
|
12
|
+
const outerProps = {
|
|
13
13
|
className: [_prismicio_simulator_kit.simulatorClass, className].filter(Boolean).join(" "),
|
|
14
14
|
style: {
|
|
15
15
|
zIndex: typeof zIndex === "undefined" ? defaultProps.zIndex : zIndex ?? void 0,
|
|
@@ -20,14 +20,21 @@ const SliceSimulatorWrapper = ({ className, children, zIndex, background, messag
|
|
|
20
20
|
height: "100vh",
|
|
21
21
|
overflow: "auto",
|
|
22
22
|
background: typeof background === "undefined" ? defaultProps.background : background ?? void 0
|
|
23
|
-
}
|
|
24
|
-
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
if (message) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
26
|
+
...outerProps,
|
|
27
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", { dangerouslySetInnerHTML: { __html: message } })
|
|
28
|
+
});
|
|
29
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
30
|
+
...outerProps,
|
|
31
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
25
32
|
id: "root",
|
|
26
33
|
className: _prismicio_simulator_kit.simulatorRootClass,
|
|
27
34
|
onClickCapture: _prismicio_simulator_kit.onClickHandler,
|
|
28
35
|
onSubmitCapture: _prismicio_simulator_kit.disableEventHandler,
|
|
29
36
|
children
|
|
30
|
-
})
|
|
37
|
+
})
|
|
31
38
|
});
|
|
32
39
|
};
|
|
33
40
|
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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};\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}) => {\n\tconst defaultProps = getDefaultProps();\n\n\tconst outerProps = {\n\t\tclassName: [simulatorClass, className].filter(Boolean).join(\" \"),\n\t\tstyle: {\n\t\t\tzIndex:\n\t\t\t\ttypeof zIndex === \"undefined\"\n\t\t\t\t\t? defaultProps.zIndex\n\t\t\t\t\t: (zIndex ?? undefined),\n\t\t\tposition: \"fixed\" as const,\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t\twidth: \"100%\",\n\t\t\theight: \"100vh\",\n\t\t\toverflow: \"auto\",\n\t\t\tbackground:\n\t\t\t\ttypeof background === \"undefined\"\n\t\t\t\t\t? defaultProps.background\n\t\t\t\t\t: (background ?? undefined),\n\t\t},\n\t};\n\n\tif (message) {\n\t\treturn (\n\t\t\t<div {...outerProps}>\n\t\t\t\t<article dangerouslySetInnerHTML={{ __html: message }} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div {...outerProps}>\n\t\t\t<div\n\t\t\t\tid=\"root\"\n\t\t\t\tclassName={simulatorRootClass}\n\t\t\t\tonClickCapture={onClickHandler as unknown as React.MouseEventHandler}\n\t\t\t\tonSubmitCapture={\n\t\t\t\t\tdisableEventHandler as unknown as React.FormEventHandler\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,yBAAyD,EACrE,WACA,UACA,QACA,YACA,cACK;CACL,MAAM,8DAAgC;CAEtC,MAAM,aAAa;EAClB,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;EACD;AAED,KAAI,QACH,QACC,2CAAC;EAAI,GAAI;YACR,2CAAC,aAAQ,yBAAyB,EAAE,QAAQ,SAAS,GAAI;GACpD;AAIR,QACC,2CAAC;EAAI,GAAI;YACR,2CAAC;GACA,IAAG;GACH,WAAWC;GACX,gBAAgBC;GAChB,iBACCC;GAGA;IACI;GACD"}
|
|
@@ -6,9 +6,9 @@ import { disableEventHandler, getDefaultProps, onClickHandler, simulatorClass, s
|
|
|
6
6
|
* A wrapper for the slice simulator that isolates the given children from the
|
|
7
7
|
* page's layout.
|
|
8
8
|
*/
|
|
9
|
-
const SliceSimulatorWrapper = ({ className, children, zIndex, background, message
|
|
9
|
+
const SliceSimulatorWrapper = ({ className, children, zIndex, background, message }) => {
|
|
10
10
|
const defaultProps = getDefaultProps();
|
|
11
|
-
|
|
11
|
+
const outerProps = {
|
|
12
12
|
className: [simulatorClass, className].filter(Boolean).join(" "),
|
|
13
13
|
style: {
|
|
14
14
|
zIndex: typeof zIndex === "undefined" ? defaultProps.zIndex : zIndex ?? void 0,
|
|
@@ -19,14 +19,21 @@ const SliceSimulatorWrapper = ({ className, children, zIndex, background, messag
|
|
|
19
19
|
height: "100vh",
|
|
20
20
|
overflow: "auto",
|
|
21
21
|
background: typeof background === "undefined" ? defaultProps.background : background ?? void 0
|
|
22
|
-
}
|
|
23
|
-
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
if (message) return /* @__PURE__ */ jsx("div", {
|
|
25
|
+
...outerProps,
|
|
26
|
+
children: /* @__PURE__ */ jsx("article", { dangerouslySetInnerHTML: { __html: message } })
|
|
27
|
+
});
|
|
28
|
+
return /* @__PURE__ */ jsx("div", {
|
|
29
|
+
...outerProps,
|
|
30
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
24
31
|
id: "root",
|
|
25
32
|
className: simulatorRootClass,
|
|
26
33
|
onClickCapture: onClickHandler,
|
|
27
34
|
onSubmitCapture: disableEventHandler,
|
|
28
35
|
children
|
|
29
|
-
})
|
|
36
|
+
})
|
|
30
37
|
});
|
|
31
38
|
};
|
|
32
39
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulatorWrapper.js","names":[],"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
|
|
1
|
+
{"version":3,"file":"SliceSimulatorWrapper.js","names":[],"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};\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}) => {\n\tconst defaultProps = getDefaultProps();\n\n\tconst outerProps = {\n\t\tclassName: [simulatorClass, className].filter(Boolean).join(\" \"),\n\t\tstyle: {\n\t\t\tzIndex:\n\t\t\t\ttypeof zIndex === \"undefined\"\n\t\t\t\t\t? defaultProps.zIndex\n\t\t\t\t\t: (zIndex ?? undefined),\n\t\t\tposition: \"fixed\" as const,\n\t\t\ttop: 0,\n\t\t\tleft: 0,\n\t\t\twidth: \"100%\",\n\t\t\theight: \"100vh\",\n\t\t\toverflow: \"auto\",\n\t\t\tbackground:\n\t\t\t\ttypeof background === \"undefined\"\n\t\t\t\t\t? defaultProps.background\n\t\t\t\t\t: (background ?? undefined),\n\t\t},\n\t};\n\n\tif (message) {\n\t\treturn (\n\t\t\t<div {...outerProps}>\n\t\t\t\t<article dangerouslySetInnerHTML={{ __html: message }} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div {...outerProps}>\n\t\t\t<div\n\t\t\t\tid=\"root\"\n\t\t\t\tclassName={simulatorRootClass}\n\t\t\t\tonClickCapture={onClickHandler as unknown as React.MouseEventHandler}\n\t\t\t\tonSubmitCapture={\n\t\t\t\t\tdisableEventHandler as unknown as React.FormEventHandler\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;AAoBA,MAAa,yBAAyD,EACrE,WACA,UACA,QACA,YACA,cACK;CACL,MAAM,eAAe,iBAAiB;CAEtC,MAAM,aAAa;EAClB,WAAW,CAAC,gBAAgB,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;EACD;AAED,KAAI,QACH,QACC,oBAAC;EAAI,GAAI;YACR,oBAAC,aAAQ,yBAAyB,EAAE,QAAQ,SAAS,GAAI;GACpD;AAIR,QACC,oBAAC;EAAI,GAAI;YACR,oBAAC;GACA,IAAG;GACH,WAAW;GACX,gBAAgB;GAChB,iBACC;GAGA;IACI;GACD"}
|
package/dist/index.cjs
CHANGED
|
@@ -5,8 +5,8 @@ const require_enableAutoPreviews = require('./enableAutoPreviews.cjs');
|
|
|
5
5
|
const require_redirectToPreviewURL = require('./redirectToPreviewURL.cjs');
|
|
6
6
|
const require_imgixLoader = require('./imgixLoader.cjs');
|
|
7
7
|
const require_PrismicNextImage = require('./PrismicNextImage.cjs');
|
|
8
|
-
const require_getSlices = require('./getSlices.cjs');
|
|
9
8
|
const require_SliceSimulator = require('./SliceSimulator.cjs');
|
|
9
|
+
const require_getSlices = require('./getSlices.cjs');
|
|
10
10
|
const require_createLocaleRedirect = require('./createLocaleRedirect.cjs');
|
|
11
11
|
|
|
12
12
|
exports.PrismicNextImage = require_PrismicNextImage.PrismicNextImage;
|
package/dist/index.js
CHANGED
|
@@ -5,8 +5,8 @@ import { enableAutoPreviews } from "./enableAutoPreviews.js";
|
|
|
5
5
|
import { redirectToPreviewURL } from "./redirectToPreviewURL.js";
|
|
6
6
|
import { imgixLoader } from "./imgixLoader.js";
|
|
7
7
|
import { PrismicNextImage } from "./PrismicNextImage.js";
|
|
8
|
-
import { getSlices } from "./getSlices.js";
|
|
9
8
|
import { SliceSimulator } from "./SliceSimulator.js";
|
|
9
|
+
import { getSlices } from "./getSlices.js";
|
|
10
10
|
import { createLocaleRedirect } from "./createLocaleRedirect.js";
|
|
11
11
|
|
|
12
12
|
export { PrismicNextImage, PrismicNextLink, PrismicPreview, SliceSimulator, createLocaleRedirect, enableAutoPreviews, exitPreview, getSlices, imgixLoader, redirectToPreviewURL };
|
package/dist/package.cjs
CHANGED
package/dist/package.js
CHANGED
|
@@ -28,7 +28,6 @@ const SliceSimulator = ({ background, zIndex, className, sliceZone: SliceZoneCom
|
|
|
28
28
|
}, []);
|
|
29
29
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SliceSimulatorWrapper.SliceSimulatorWrapper, {
|
|
30
30
|
message,
|
|
31
|
-
hasSlices: slices.length > 0,
|
|
32
31
|
background,
|
|
33
32
|
zIndex,
|
|
34
33
|
className,
|
|
@@ -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 = 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\
|
|
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\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;EACG;EACJ;EACG;YAEX,2CAAC,iBAAsB,SAAU;GACV"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.js","names":[],"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\
|
|
1
|
+
{"version":3,"file":"SliceSimulator.js","names":[],"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\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,IAAI,kBAAkB;;;;;AAiC/C,MAAa,kBAA2C,EACvD,YACA,QACA,WACA,WAAW,oBACN;CACL,MAAM,CAAC,QAAQ,aAAa,eAAe,kBAAkB,CAAC;CAC9D,MAAM,CAAC,SAAS,cAAc,eAAe,mBAAmB,CAAC;AAEjE,iBAAgB;AACf,mBAAiB,MAAM,GACtB,eAAe,SACd,YAAY;AACZ,aAAU,QAAQ;KAEnB,mBACA;AACD,mBAAiB,MAAM,GACtB,eAAe,UACd,aAAa;AACb,cAAW,SAAS;KAErB,oBACA;AAED,mBAAiB,MAAM;AAEvB,eAAa;AACZ,oBAAiB,MAAM,IAAI,eAAe,QAAQ,mBAAmB;AAErE,oBAAiB,MAAM,IAAI,eAAe,SAAS,oBAAoB;;IAEtE,EAAE,CAAC;AAEN,QACC,oBAAC;EACS;EACG;EACJ;EACG;YAEX,oBAAC,iBAAsB,SAAU;GACV"}
|
package/package.json
CHANGED
package/src/SliceSimulator.tsx
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { SliceSimulatorWrapper } from "./SliceSimulatorWrapper";
|
|
4
|
-
import { getSlices } from "./getSlices";
|
|
5
4
|
import {
|
|
6
5
|
SimulatorManager,
|
|
7
6
|
StateEventType,
|
|
@@ -10,7 +9,7 @@ import {
|
|
|
10
9
|
import type { SliceSimulatorProps as BaseSliceSimulatorProps } from "@prismicio/simulator/kit";
|
|
11
10
|
import { compressToEncodedURIComponent } from "lz-string";
|
|
12
11
|
import { useRouter } from "next/navigation";
|
|
13
|
-
import { useEffect, useState } from "react";
|
|
12
|
+
import { useEffect, useRef, useState } from "react";
|
|
14
13
|
import type { FC, ReactNode } from "react";
|
|
15
14
|
|
|
16
15
|
const STATE_PARAMS_KEY = "state";
|
|
@@ -41,14 +40,10 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
41
40
|
zIndex,
|
|
42
41
|
className,
|
|
43
42
|
}) => {
|
|
44
|
-
const [message, setMessage] = useState(
|
|
43
|
+
const [message, setMessage] = useState(getDefaultMessage());
|
|
45
44
|
const router = useRouter();
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
typeof window !== "undefined"
|
|
49
|
-
? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)
|
|
50
|
-
: undefined;
|
|
51
|
-
const hasSlices = getSlices(state).length > 0;
|
|
45
|
+
const routerRef = useRef(router);
|
|
46
|
+
routerRef.current = router;
|
|
52
47
|
|
|
53
48
|
useEffect(() => {
|
|
54
49
|
simulatorManager.state.on(
|
|
@@ -62,7 +57,7 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
62
57
|
|
|
63
58
|
window.history.replaceState(null, "", url);
|
|
64
59
|
// Wait until the next tick to prevent URL state race conditions.
|
|
65
|
-
setTimeout(() =>
|
|
60
|
+
setTimeout(() => routerRef.current.refresh(), 0);
|
|
66
61
|
},
|
|
67
62
|
"simulator-slices",
|
|
68
63
|
);
|
|
@@ -79,12 +74,11 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
79
74
|
|
|
80
75
|
simulatorManager.state.off(StateEventType.Message, "simulator-message");
|
|
81
76
|
};
|
|
82
|
-
}, [
|
|
77
|
+
}, []);
|
|
83
78
|
|
|
84
79
|
return (
|
|
85
80
|
<SliceSimulatorWrapper
|
|
86
81
|
message={message}
|
|
87
|
-
hasSlices={hasSlices}
|
|
88
82
|
background={background}
|
|
89
83
|
zIndex={zIndex}
|
|
90
84
|
className={className}
|
|
@@ -12,7 +12,6 @@ type SliceSimulatorWrapperProps = SliceSimulatorProps & {
|
|
|
12
12
|
children: ReactNode;
|
|
13
13
|
className?: string;
|
|
14
14
|
message?: string;
|
|
15
|
-
hasSlices: boolean;
|
|
16
15
|
};
|
|
17
16
|
|
|
18
17
|
/**
|
|
@@ -25,44 +24,49 @@ export const SliceSimulatorWrapper: FC<SliceSimulatorWrapperProps> = ({
|
|
|
25
24
|
zIndex,
|
|
26
25
|
background,
|
|
27
26
|
message,
|
|
28
|
-
hasSlices,
|
|
29
27
|
}) => {
|
|
30
28
|
const defaultProps = getDefaultProps();
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
zIndex
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
background
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
30
|
+
const outerProps = {
|
|
31
|
+
className: [simulatorClass, className].filter(Boolean).join(" "),
|
|
32
|
+
style: {
|
|
33
|
+
zIndex:
|
|
34
|
+
typeof zIndex === "undefined"
|
|
35
|
+
? defaultProps.zIndex
|
|
36
|
+
: (zIndex ?? undefined),
|
|
37
|
+
position: "fixed" as const,
|
|
38
|
+
top: 0,
|
|
39
|
+
left: 0,
|
|
40
|
+
width: "100%",
|
|
41
|
+
height: "100vh",
|
|
42
|
+
overflow: "auto",
|
|
43
|
+
background:
|
|
44
|
+
typeof background === "undefined"
|
|
45
|
+
? defaultProps.background
|
|
46
|
+
: (background ?? undefined),
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
if (message) {
|
|
51
|
+
return (
|
|
52
|
+
<div {...outerProps}>
|
|
53
53
|
<article dangerouslySetInnerHTML={{ __html: message }} />
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<div {...outerProps}>
|
|
60
|
+
<div
|
|
61
|
+
id="root"
|
|
62
|
+
className={simulatorRootClass}
|
|
63
|
+
onClickCapture={onClickHandler as unknown as React.MouseEventHandler}
|
|
64
|
+
onSubmitCapture={
|
|
65
|
+
disableEventHandler as unknown as React.FormEventHandler
|
|
66
|
+
}
|
|
67
|
+
>
|
|
68
|
+
{children}
|
|
69
|
+
</div>
|
|
66
70
|
</div>
|
|
67
71
|
);
|
|
68
72
|
};
|