diff --git a/examples/full/.testRun.ts b/examples/full/.testRun.ts index 5e2bcdda..9ead9674 100644 --- a/examples/full/.testRun.ts +++ b/examples/full/.testRun.ts @@ -200,7 +200,8 @@ async function testCounter() { ); } -/** Ensure page wasn't server-side routed. +/** + * Ensure page wasn't server-side routed. * * Examples: * await ensureWasClientSideRouted('/pages/index') diff --git a/examples/full/pages/star-wars/@id/+Page.tsx b/examples/full/pages/star-wars/@id/+Page.tsx index ad07e9c3..935e84ec 100644 --- a/examples/full/pages/star-wars/@id/+Page.tsx +++ b/examples/full/pages/star-wars/@id/+Page.tsx @@ -1,8 +1,8 @@ import type { Data } from "./+data.js"; -import { useData } from "vike-solid/useData"; +import { createDataStore } from "vike-solid/createDataStore"; export default function Page() { - const movie = useData(); + const [movie] = createDataStore(); return ( <>

{movie.title}

diff --git a/packages/vike-solid/hooks/createDataStore.tsx b/packages/vike-solid/hooks/createDataStore.tsx new file mode 100644 index 00000000..159e90ea --- /dev/null +++ b/packages/vike-solid/hooks/createDataStore.tsx @@ -0,0 +1,20 @@ +export { createDataStore }; + +import { createEffect } from "solid-js"; +import { type SetStoreFunction, createStore } from "solid-js/store"; +import { usePageContext } from "./usePageContext.jsx"; + +/** + * Access `pageContext.data` from any SolidJS component, and create a store with `pageContext.data` as initial state. + * + * https://vike.dev/useData + */ +function createDataStore(): [Data, SetStoreFunction] { + const pageContext = usePageContext() as any; + const [data, setData] = createStore(pageContext?.data); + // Sync the store when the navigation (and thus `pageContext.data`) changes. + createEffect(() => { + setData(pageContext?.data); + }); + return [data, setData]; +} diff --git a/packages/vike-solid/hooks/useData.tsx b/packages/vike-solid/hooks/useData.tsx index de08c70a..4afdf3e9 100644 --- a/packages/vike-solid/hooks/useData.tsx +++ b/packages/vike-solid/hooks/useData.tsx @@ -1,25 +1,15 @@ -import { createStore } from "solid-js/store"; - export { useData }; -import { createEffect } from "solid-js"; -import { usePageContext } from "./usePageContext.js"; +import { createDataStore } from "./createDataStore.jsx"; -/** Access `pageContext.data` from any SolidJS component +/** + * Access `pageContext.data` from any SolidJS component. * - * See - * - https://vike.dev/data - * - https://vike.dev/pageContext-anywhere + * https://vike.dev/useData */ function useData(): Data { - const pageContext = usePageContext() as any; - - // sub store to keep reactivity https://github.com/vikejs/vike-solid/issues/114 - const [data, setData] = createStore(pageContext?.data); - - createEffect(() => { - setData(pageContext?.data); - }); - + // https://github.com/vikejs/vike-solid/issues/114 + // We use `createEffect` to sync the store when the navigation (and thus `pageContext.data`) changes. + const [data] = createDataStore(); return data; } diff --git a/packages/vike-solid/package.json b/packages/vike-solid/package.json index 58b3f088..a78217fc 100644 --- a/packages/vike-solid/package.json +++ b/packages/vike-solid/package.json @@ -44,6 +44,7 @@ "./usePageContext": "./dist/hooks/usePageContext.js", "./useHydrated": "./dist/hooks/useHydrated.js", "./useData": "./dist/hooks/useData.js", + "./createDataStore": "./dist/hooks/createDataStore.js", "./useConfig": { "worker": "./dist/hooks/useConfig/useConfig-server.js", "browser": "./dist/hooks/useConfig/useConfig-client.js", @@ -87,6 +88,9 @@ "useData": [ "dist/hooks/useData.d.ts" ], + "createDataStore": [ + "dist/hooks/createDataStore.d.ts" + ], "useConfig": [ "dist/hooks/useConfig/useConfig-server.d.ts" ], diff --git a/packages/vike-solid/rollup.config.js b/packages/vike-solid/rollup.config.js index 7a6fb1de..ca27ae24 100644 --- a/packages/vike-solid/rollup.config.js +++ b/packages/vike-solid/rollup.config.js @@ -10,6 +10,7 @@ export default [ "hooks/usePageContext": "./hooks/usePageContext.tsx", "hooks/useHydrated": "./hooks/useHydrated.tsx", "hooks/useData": "./hooks/useData.tsx", + "hooks/createDataStore": "./hooks/createDataStore.tsx", "hooks/useConfig/useConfig-client": "./hooks/useConfig/useConfig-client.ts", "hooks/useConfig/useConfig-server": "./hooks/useConfig/useConfig-server.ts", "components/Config/Config-client": "./components/Config/Config-client.ts", @@ -28,6 +29,7 @@ export default [ "hooks/usePageContext": "./hooks/usePageContext.tsx", "hooks/useHydrated": "./hooks/useHydrated.tsx", "hooks/useData": "./hooks/useData.tsx", + "hooks/createDataStore": "./hooks/createDataStore.tsx", "hooks/useConfig/useConfig-client": "./hooks/useConfig/useConfig-client.ts", "hooks/useConfig/useConfig-server": "./hooks/useConfig/useConfig-server.ts", "components/Config/Config-client": "./components/Config/Config-client.ts", @@ -45,6 +47,7 @@ export default [ "./hooks/usePageContext.tsx", "./hooks/useHydrated.tsx", "./hooks/useData.tsx", + "./hooks/createDataStore.tsx", "./hooks/useConfig/useConfig-client.ts", "./hooks/useConfig/useConfig-server.ts", "./components/Config/Config-client.ts",