diff --git a/examples/zustand/store.ts b/examples/zustand/store.ts index da7cf051..20a1a9df 100644 --- a/examples/zustand/store.ts +++ b/examples/zustand/store.ts @@ -8,23 +8,27 @@ interface Store { serverEnv: string } -const useStore = create()( - ( - set, - get - /* TODO +const useStore = withPageContext( + // pageContextProviderFn + (pageContext) => + create( + ( + set, + get + /* TODO pageContext */ - ) => ({ - counter: Math.floor(10000 * Math.random()), - setCounter(value) { - set({ counter: value }) - }, + ) => ({ + counter: Math.floor(10000 * Math.random()), + setCounter(value) { + set({ counter: value }) + }, - // the callback only runs on the server, - // the return value is passed to the client on the initial navigation - ...server(() => ({ - serverEnv: process.env.SOME_ENV! - })) - }) + // the callback only runs on the server, + // the return value is passed to the client on the initial navigation + ...server(() => ({ + serverEnv: process.env.SOME_ENV! + })) + }) + ) ) diff --git a/packages/vike-react-zustand/src/index.tsx b/packages/vike-react-zustand/src/index.tsx index 77eb67d7..d45856c9 100644 --- a/packages/vike-react-zustand/src/index.tsx +++ b/packages/vike-react-zustand/src/index.tsx @@ -1,9 +1,10 @@ -export { create, server } +export { create, server, withPageContext } import { useContext } from 'react' import { getContext, setCreateStore } from './renderer/context.js' import { create as create_ } from 'zustand' import type { StoreMutatorIdentifier, UseBoundStore, Mutate, StoreApi as ZustandStoreApi } from 'zustand' +import {assert} from './utils.js' type Create = { ( @@ -39,7 +40,12 @@ const create: Create = ((createState: any) => { function createImpl(createStore: any): any { // @ts-ignore setCreateStore((pageContext: any) => { - return create_(createStore) + if( createStore._withPageContext_ ) { + return create_(createStore(pageContext)) + } else { + assert(false) + // return create_(createStore) + } }) function useStore(...args: any[]) { @@ -60,11 +66,8 @@ function server>(fn: () => T) { return {} as T } type StoreAndHook = ReturnType -function withPageContext(storeCreatorCreatorFn: (pageContext: StoreAndHook) => S) { - //@ts-ignore - // createImpl._withPageContext_ = storeCreatorFn - // const storeCreatorFn = () => { - // storeCreatorCreatorFn(pageContext) - // return createImpl(storeCreatorFn) - // } +function withPageContext(pageContextProviderFn: (pageContext: StoreAndHook) => S) { + const fn = (pageContext: any) => pageContextProviderFn(pageContext) + fn._withPageContext_ = true + return createImpl(fn) } diff --git a/packages/vike-react-zustand/src/renderer/VikeReactZustandWrapper.tsx b/packages/vike-react-zustand/src/renderer/VikeReactZustandWrapper.tsx index 863af90d..0b9946a9 100644 --- a/packages/vike-react-zustand/src/renderer/VikeReactZustandWrapper.tsx +++ b/packages/vike-react-zustand/src/renderer/VikeReactZustandWrapper.tsx @@ -13,7 +13,8 @@ export default function VikeReactZustandWrapper({ pageContext, children }: VikeR const context = getContext() assert(context) const createStore = getCreateStore() - const store = useMemo(() => createStore?.(), [createStore]) + const store = useMemo(() => createStore?.(pageContext), [createStore]) + assert(store) if (!store) { // Is that the best thing to do? return children diff --git a/packages/vike-react-zustand/src/renderer/context.ts b/packages/vike-react-zustand/src/renderer/context.ts index 5b0a502b..7400f9fe 100644 --- a/packages/vike-react-zustand/src/renderer/context.ts +++ b/packages/vike-react-zustand/src/renderer/context.ts @@ -1,9 +1,10 @@ import React, { createContext } from 'react' import { getGlobalObject } from '../utils.js' import type { create } from 'zustand' +import type { PageContext } from 'vike/types' type StoreAndHook = ReturnType -type CreateStore = () => StoreAndHook & { __hydrated__?: true } +type CreateStore = (pageContext: PageContext) => StoreAndHook & { __hydrated__?: true } const globalObject = getGlobalObject('VikeReactZustandContext.ts', { createStore: undefined as CreateStore | undefined, @@ -14,5 +15,5 @@ export const getCreateStore = () => globalObject.createStore export const getContext = () => globalObject.context as unknown as React.Context export const setCreateStore = (createStore_: CreateStore) => { - globalObject.createStore = createStore_ + globalObject.createStore = globalObject.createStore || createStore_ }