feat: createDataStore() hook

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')

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<Data>();
+  const [movie] = createDataStore<Data>();
   return (
     <>
       <h1>{movie.title}</h1>

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>(): [Data, SetStoreFunction<Data>] {
+  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];
+}

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>(): 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<Data>();
   return data;
 }

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"
       ],

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",