@slicemachine/adapter-next 0.3.98 → 0.3.100-beta.1
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/README.md +8 -0
- package/dist/simulator/react-server/SliceSimulator.cjs +10 -2
- package/dist/simulator/react-server/SliceSimulator.cjs.map +1 -1
- package/dist/simulator/react-server/SliceSimulator.js +10 -2
- package/dist/simulator/react-server/SliceSimulator.js.map +1 -1
- package/package.json +6 -5
- package/src/simulator/react-server/SliceSimulator.tsx +21 -5
package/README.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
> Slice Machine is replaced by the [Prismic CLI](https://prismic.io/docs/cli) and the [Type Builder](https://prismic.io/docs/type-builder). Existing projects are still supported. To move a project, see [Migrate to the Type Builder](https://prismic.io/docs/slice-machine#migrate-to-the-type-builder).
|
|
2
|
+
>
|
|
3
|
+
> Using an AI agent? Teach it the new way by installing the Prismic skill:
|
|
4
|
+
>
|
|
5
|
+
> ```bash
|
|
6
|
+
> npx skills add --global --yes prismicio/skills
|
|
7
|
+
> ```
|
|
8
|
+
|
|
1
9
|
# @slicemachine/adapter-next
|
|
2
10
|
|
|
3
11
|
[![npm version][npm-version-src]][npm-version-href]
|
|
@@ -13,14 +13,22 @@ const STATE_PARAMS_KEY = "state";
|
|
|
13
13
|
const simulatorManager = new kit.SimulatorManager();
|
|
14
14
|
const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
15
15
|
const [message, setMessage] = react.useState(() => kit.getDefaultMessage());
|
|
16
|
+
const [trustedState, setTrustedState] = react.useState(null);
|
|
16
17
|
const router = navigation.useRouter();
|
|
17
18
|
const state = typeof window !== "undefined" ? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY) : void 0;
|
|
18
|
-
const hasSlices = getSlices.getSlices(state).length > 0;
|
|
19
|
+
const hasSlices = state != null && state === trustedState && getSlices.getSlices(state).length > 0;
|
|
20
|
+
react.useEffect(() => {
|
|
21
|
+
if (process.env.NODE_ENV === "development") {
|
|
22
|
+
setTrustedState(new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY));
|
|
23
|
+
}
|
|
24
|
+
}, []);
|
|
19
25
|
react.useEffect(() => {
|
|
20
26
|
simulatorManager.state.on(kit.StateEventType.Slices, (newSlices) => {
|
|
27
|
+
const nextState = lzString.compressToEncodedURIComponent(JSON.stringify(newSlices));
|
|
21
28
|
const url = new URL(window.location.href);
|
|
22
|
-
url.searchParams.set(STATE_PARAMS_KEY,
|
|
29
|
+
url.searchParams.set(STATE_PARAMS_KEY, nextState);
|
|
23
30
|
window.history.replaceState(null, "", url);
|
|
31
|
+
setTrustedState(nextState);
|
|
24
32
|
setTimeout(() => router.refresh(), 0);
|
|
25
33
|
}, "simulator-slices");
|
|
26
34
|
simulatorManager.state.on(kit.StateEventType.Message, (newMessage) => setMessage(newMessage), "simulator-message");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.cjs","sources":["../../../../src/simulator/react-server/SliceSimulator.tsx"],"sourcesContent":["// This `<SliceSimulator>` is only accessible from Server Components.\n\n\"use client\";\n\nimport { FC, useEffect, useState } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\nimport {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\n\nimport { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorProps = Omit<BaseSliceSimulatorProps, \"state\"> & {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n};\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
|
|
1
|
+
{"version":3,"file":"SliceSimulator.cjs","sources":["../../../../src/simulator/react-server/SliceSimulator.tsx"],"sourcesContent":["// This `<SliceSimulator>` is only accessible from Server Components.\n\n\"use client\";\n\nimport { FC, useEffect, useState } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\nimport {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\n\nimport { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorProps = Omit<BaseSliceSimulatorProps, \"state\"> & {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n};\n\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tchildren,\n\tbackground,\n\tzIndex,\n\tclassName,\n}) => {\n\tconst [message, setMessage] = useState(() => getDefaultMessage());\n\tconst [trustedState, setTrustedState] = useState<string | null>(null);\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\t// Only render state this page received from Slice Machine or the Page\n\t// Builder. The `state` URL parameter on its own can be set by anyone.\n\tconst hasSlices =\n\t\tstate != null && state === trustedState && getSlices(state).length > 0;\n\n\tuseEffect(() => {\n\t\t// In development, @prismicio/simulator accepts slices from any origin, so\n\t\t// the URL is trusted too. This keeps slices visible after Next's dev\n\t\t// server fully reloads the page.\n\t\tif (process.env.NODE_ENV === \"development\") {\n\t\t\tsetTrustedState(\n\t\t\t\tnew URL(window.location.href).searchParams.get(STATE_PARAMS_KEY),\n\t\t\t);\n\t\t}\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(newSlices) => {\n\t\t\t\tconst nextState = compressToEncodedURIComponent(\n\t\t\t\t\tJSON.stringify(newSlices),\n\t\t\t\t);\n\t\t\t\tconst url = new URL(window.location.href);\n\t\t\t\turl.searchParams.set(STATE_PARAMS_KEY, nextState);\n\n\t\t\t\twindow.history.replaceState(null, \"\", url);\n\t\t\t\tsetTrustedState(nextState);\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}, []);\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"],"names":["useEffect"],"mappings":";;;;;;;;;;;AAkBA;AAEA;AAOO;AAMN;AACA;AACA;AAEA;AAMA;AAGAA;AAIC;AACC;AACiE;AAElE;AAGDA;AACC;AAGE;AAGA;AACA;AAEA;AACA;AAEA;AAAoC;AAItC;AAMA;AAEA;AACC;AAEA;AAAsE;AACvE;AAGD;AAWD;;"}
|
|
@@ -11,14 +11,22 @@ const STATE_PARAMS_KEY = "state";
|
|
|
11
11
|
const simulatorManager = new SimulatorManager();
|
|
12
12
|
const SliceSimulator = ({ children, background, zIndex, className }) => {
|
|
13
13
|
const [message, setMessage] = useState(() => getDefaultMessage());
|
|
14
|
+
const [trustedState, setTrustedState] = useState(null);
|
|
14
15
|
const router = useRouter();
|
|
15
16
|
const state = typeof window !== "undefined" ? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY) : void 0;
|
|
16
|
-
const hasSlices = getSlices(state).length > 0;
|
|
17
|
+
const hasSlices = state != null && state === trustedState && getSlices(state).length > 0;
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (process.env.NODE_ENV === "development") {
|
|
20
|
+
setTrustedState(new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY));
|
|
21
|
+
}
|
|
22
|
+
}, []);
|
|
17
23
|
useEffect(() => {
|
|
18
24
|
simulatorManager.state.on(StateEventType.Slices, (newSlices) => {
|
|
25
|
+
const nextState = compressToEncodedURIComponent(JSON.stringify(newSlices));
|
|
19
26
|
const url = new URL(window.location.href);
|
|
20
|
-
url.searchParams.set(STATE_PARAMS_KEY,
|
|
27
|
+
url.searchParams.set(STATE_PARAMS_KEY, nextState);
|
|
21
28
|
window.history.replaceState(null, "", url);
|
|
29
|
+
setTrustedState(nextState);
|
|
22
30
|
setTimeout(() => router.refresh(), 0);
|
|
23
31
|
}, "simulator-slices");
|
|
24
32
|
simulatorManager.state.on(StateEventType.Message, (newMessage) => setMessage(newMessage), "simulator-message");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SliceSimulator.js","sources":["../../../../src/simulator/react-server/SliceSimulator.tsx"],"sourcesContent":["// This `<SliceSimulator>` is only accessible from Server Components.\n\n\"use client\";\n\nimport { FC, useEffect, useState } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\nimport {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\n\nimport { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorProps = Omit<BaseSliceSimulatorProps, \"state\"> & {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n};\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
|
|
1
|
+
{"version":3,"file":"SliceSimulator.js","sources":["../../../../src/simulator/react-server/SliceSimulator.tsx"],"sourcesContent":["// This `<SliceSimulator>` is only accessible from Server Components.\n\n\"use client\";\n\nimport { FC, useEffect, useState } from \"react\";\n\nimport { useRouter } from \"next/navigation\";\nimport {\n\tSliceSimulatorProps as BaseSliceSimulatorProps,\n\tSimulatorManager,\n\tStateEventType,\n\tgetDefaultMessage,\n} from \"@prismicio/simulator/kit\";\nimport { compressToEncodedURIComponent } from \"lz-string\";\n\nimport { SliceSimulatorWrapper } from \"../SliceSimulatorWrapper\";\nimport { getSlices } from \"./getSlices\";\n\nconst STATE_PARAMS_KEY = \"state\";\n\nconst simulatorManager = new SimulatorManager();\n\nexport type SliceSimulatorProps = Omit<BaseSliceSimulatorProps, \"state\"> & {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n};\n\nexport const SliceSimulator: FC<SliceSimulatorProps> = ({\n\tchildren,\n\tbackground,\n\tzIndex,\n\tclassName,\n}) => {\n\tconst [message, setMessage] = useState(() => getDefaultMessage());\n\tconst [trustedState, setTrustedState] = useState<string | null>(null);\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\t// Only render state this page received from Slice Machine or the Page\n\t// Builder. The `state` URL parameter on its own can be set by anyone.\n\tconst hasSlices =\n\t\tstate != null && state === trustedState && getSlices(state).length > 0;\n\n\tuseEffect(() => {\n\t\t// In development, @prismicio/simulator accepts slices from any origin, so\n\t\t// the URL is trusted too. This keeps slices visible after Next's dev\n\t\t// server fully reloads the page.\n\t\tif (process.env.NODE_ENV === \"development\") {\n\t\t\tsetTrustedState(\n\t\t\t\tnew URL(window.location.href).searchParams.get(STATE_PARAMS_KEY),\n\t\t\t);\n\t\t}\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsimulatorManager.state.on(\n\t\t\tStateEventType.Slices,\n\t\t\t(newSlices) => {\n\t\t\t\tconst nextState = compressToEncodedURIComponent(\n\t\t\t\t\tJSON.stringify(newSlices),\n\t\t\t\t);\n\t\t\t\tconst url = new URL(window.location.href);\n\t\t\t\turl.searchParams.set(STATE_PARAMS_KEY, nextState);\n\n\t\t\t\twindow.history.replaceState(null, \"\", url);\n\t\t\t\tsetTrustedState(nextState);\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}, []);\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"],"names":[],"mappings":";;;;;;;;;AAkBA;AAEA;AAOO;AAMN;AACA;AACA;AAEA;AAMA;AAGA;AAIC;AACC;AACiE;AAElE;AAGD;AACC;AAGE;AAGA;AACA;AAEA;AACA;AAEA;AAAoC;AAItC;AAMA;AAEA;AACC;AAEA;AAAsE;AACvE;AAGD;AAWD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slicemachine/adapter-next",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.100-beta.1",
|
|
4
4
|
"description": "Slice Machine adapter for Next.js.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"typescript",
|
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
"audit": "yarn npm audit --environment production --severity high"
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@prismicio/simulator": "^0.
|
|
69
|
+
"@prismicio/simulator": "^0.2.4",
|
|
70
70
|
"@prismicio/types-internal": "^3.17.2",
|
|
71
|
-
"@slicemachine/plugin-kit": "0.4.
|
|
71
|
+
"@slicemachine/plugin-kit": "0.4.99-beta.1",
|
|
72
72
|
"common-tags": "^1.8.2",
|
|
73
73
|
"fp-ts": "^2.13.1",
|
|
74
74
|
"io-ts": "^2.2.20",
|
|
@@ -109,9 +109,10 @@
|
|
|
109
109
|
"react": "^17 || ^18 || ^19.0.0-rc.0"
|
|
110
110
|
},
|
|
111
111
|
"engines": {
|
|
112
|
-
"node": ">=
|
|
112
|
+
"node": ">=20.19.0"
|
|
113
113
|
},
|
|
114
114
|
"publishConfig": {
|
|
115
115
|
"access": "public"
|
|
116
|
-
}
|
|
116
|
+
},
|
|
117
|
+
"stableVersion": "0.3.99"
|
|
117
118
|
}
|
|
@@ -32,25 +32,41 @@ export const SliceSimulator: FC<SliceSimulatorProps> = ({
|
|
|
32
32
|
className,
|
|
33
33
|
}) => {
|
|
34
34
|
const [message, setMessage] = useState(() => getDefaultMessage());
|
|
35
|
+
const [trustedState, setTrustedState] = useState<string | null>(null);
|
|
35
36
|
const router = useRouter();
|
|
36
37
|
|
|
37
38
|
const state =
|
|
38
39
|
typeof window !== "undefined"
|
|
39
40
|
? new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY)
|
|
40
41
|
: undefined;
|
|
41
|
-
|
|
42
|
+
// Only render state this page received from Slice Machine or the Page
|
|
43
|
+
// Builder. The `state` URL parameter on its own can be set by anyone.
|
|
44
|
+
const hasSlices =
|
|
45
|
+
state != null && state === trustedState && getSlices(state).length > 0;
|
|
46
|
+
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
// In development, @prismicio/simulator accepts slices from any origin, so
|
|
49
|
+
// the URL is trusted too. This keeps slices visible after Next's dev
|
|
50
|
+
// server fully reloads the page.
|
|
51
|
+
if (process.env.NODE_ENV === "development") {
|
|
52
|
+
setTrustedState(
|
|
53
|
+
new URL(window.location.href).searchParams.get(STATE_PARAMS_KEY),
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
}, []);
|
|
42
57
|
|
|
43
58
|
useEffect(() => {
|
|
44
59
|
simulatorManager.state.on(
|
|
45
60
|
StateEventType.Slices,
|
|
46
61
|
(newSlices) => {
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
STATE_PARAMS_KEY,
|
|
50
|
-
compressToEncodedURIComponent(JSON.stringify(newSlices)),
|
|
62
|
+
const nextState = compressToEncodedURIComponent(
|
|
63
|
+
JSON.stringify(newSlices),
|
|
51
64
|
);
|
|
65
|
+
const url = new URL(window.location.href);
|
|
66
|
+
url.searchParams.set(STATE_PARAMS_KEY, nextState);
|
|
52
67
|
|
|
53
68
|
window.history.replaceState(null, "", url);
|
|
69
|
+
setTrustedState(nextState);
|
|
54
70
|
// Wait until the next tick to prevent URL state race conditions.
|
|
55
71
|
setTimeout(() => router.refresh(), 0);
|
|
56
72
|
},
|