fix: simplify vike-vue-{query,pinia} integration

vikejs · Sep 12, 2024 · 08b612f · 08b612f
1 parent d85d957
commit 08b612f
Show file tree

Hide file tree

Showing 9 changed files with 15 additions and 24 deletions.
diff --git a/packages/vike-vue-pinia/integration/+config.ts b/packages/vike-vue-pinia/integration/+config.ts
@@ -9,6 +9,7 @@ const config = {
   require: {
     'vike-vue': '>=0.7.0',
   },
+  passToClient: ['_piniaInitialState'],
   onCreateApp: 'import:vike-vue-pinia/__internal/integration/onCreateApp:onCreateApp',
   onAfterRenderHtml: 'import:vike-vue-pinia/__internal/integration/onAfterRenderHtml:onAfterRenderHtml',
   onBeforeRenderClient: 'import:vike-vue-pinia/__internal/integration/onBeforeRenderClient:onBeforeRenderClient',
@@ -18,10 +19,7 @@ declare global {
   namespace Vike {
     interface PageContext {
       pinia?: Pinia
-      // @ts-expect-error TODO: fix type mismatch
-      fromHtmlRenderer: {
-        piniaInitialState?: StateTree
-      }
+      _piniaInitialState?: StateTree
     }
   }
 }
diff --git a/packages/vike-vue-pinia/integration/onAfterRenderHtml.ts b/packages/vike-vue-pinia/integration/onAfterRenderHtml.ts
@@ -3,11 +3,11 @@ export { onAfterRenderHtml }
 import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
 
 const onAfterRenderHtml: OnAfterRenderHtmlSync = (pageContext): ReturnType<OnAfterRenderHtmlSync> => {
-  return dehydratePinia(pageContext)
+  dehydratePinia(pageContext)
 }
 
 type PageContext = Parameters<typeof onAfterRenderHtml>[0]
 function dehydratePinia(pageContext: PageContext) {
   const { pinia } = pageContext
-  return { piniaInitialState: pinia!.state.value }
+  pageContext._piniaInitialState = pinia!.state.value
 }
diff --git a/packages/vike-vue-pinia/integration/onBeforeRenderClient.ts b/packages/vike-vue-pinia/integration/onBeforeRenderClient.ts
@@ -11,14 +11,11 @@ function hydratePinia(pageContext: PageContext) {
   if (!pageContext.isHydration) {
     return
   }
-  const {
-    pinia,
-    fromHtmlRenderer: { piniaInitialState },
-  } = pageContext
+  const { pinia } = pageContext
+  const piniaInitialState = pageContext._piniaInitialState
   if (!pinia || !piniaInitialState) {
     // happens if SSR is off
     return
   }
-  // @ts-expect-error TODO: fix type mismatch between Config['fromHtmlRenderer'] set by vike-vue and vike-vue-pinia
   pinia.state.value = piniaInitialState
 }
diff --git a/packages/vike-vue-query/integration/+config.ts b/packages/vike-vue-query/integration/+config.ts
@@ -24,10 +24,7 @@ declare global {
   namespace Vike {
     interface PageContext {
       queryClient?: QueryClient
-      // @ts-expect-error TODO: fix type mismatch
-      fromHtmlRenderer: {
-        vueQueryInitialState?: DehydratedState
-      }
+      _vueQueryInitialState?: DehydratedState
     }
   }
   namespace Vike {

diff --git a/packages/vike-vue-query/integration/dehydrateVueQuery.ts b/packages/vike-vue-query/integration/dehydrateVueQuery.ts
@@ -3,6 +3,6 @@ import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
 
 export { dehydrateVueQuery }
 
-const dehydrateVueQuery: OnAfterRenderHtmlSync = ({ queryClient }): ReturnType<OnAfterRenderHtmlSync> => {
-  return { vueQueryInitialState: dehydrate(queryClient!) }
+const dehydrateVueQuery: OnAfterRenderHtmlSync = (pageContext): ReturnType<OnAfterRenderHtmlSync> => {
+  pageContext._vueQueryInitialState = dehydrate(pageContext.queryClient!)
 }
diff --git a/packages/vike-vue-query/integration/hydrateVueQuery.ts b/packages/vike-vue-query/integration/hydrateVueQuery.ts
@@ -7,7 +7,7 @@ const hydrateVueQuery: OnBeforeRenderClientSync = (pageContext): ReturnType<OnBe
   if (!pageContext.isHydration) {
     return
   }
-  const { vueQueryInitialState } = pageContext.fromHtmlRenderer
+  const vueQueryInitialState = pageContext._vueQueryInitialState
   const queryClient = 'queryClient' in pageContext ? pageContext.queryClient : null
   if (!queryClient || !vueQueryInitialState) {
     // happens if SSR is off

diff --git a/packages/vike-vue/src/types/Config.ts b/packages/vike-vue/src/types/Config.ts
@@ -187,7 +187,6 @@ declare global {
 
       /**
        * Hook called right after rendering the page's root Vue component to HTML.
-       * The hook can return additional page context that will be passed to the client under `pageContext.fromHtmlRenderer`.
        *
        * https://vike.dev/onAfterRenderHtml
        */

diff --git a/packages/vike-vue/src/types/PageContext.ts b/packages/vike-vue/src/types/PageContext.ts
@@ -18,7 +18,9 @@ declare global {
       // Set by createVueApp()
       app?: App
 
-      // Set by onRenderHtml()
+      // TODO/eventually: remove (vike-vue-pinia and vike-vue-query don't use this anymore).
+      // - Let's wait a bit before removing as old vike-vue-pinia and vike-vue-query versions still need this.
+      /** @deprecated */
       fromHtmlRenderer: Record<string, unknown>
 
       ssrContext?: SSRContext

diff --git a/packages/vike-vue/src/types/VikeHooks.ts b/packages/vike-vue/src/types/VikeHooks.ts
@@ -46,18 +46,16 @@ type OnBeforeRenderHtmlAsync = (pageContext: PageContextServer) => Promise<void>
 
 /**
  * Hook called right after rendering the page's root Vue component to HTML.
- * The hook can return additional page context that will be passed to the client under `pageContext.fromHtmlRenderer`.
  *
  * https://vike.dev/onAfterRenderHtml
  */
-type OnAfterRenderHtmlSync = (pageContext: PageContextServer) => PageContextServer['fromHtmlRenderer']
+type OnAfterRenderHtmlSync = (pageContext: PageContextServer) => void | PageContextServer['fromHtmlRenderer']
 /**
  * Hook called right after rendering the page's root Vue component to HTML.
- * The hook can return additional page context that will be passed to the client under `pageContext.fromHtmlRenderer`.
  *
  * https://vike.dev/onAfterRenderHtml
  */
-type OnAfterRenderHtmlAsync = (pageContext: PageContextServer) => Promise<PageContextServer['fromHtmlRenderer']>
+type OnAfterRenderHtmlAsync = (pageContext: PageContextServer) => Promise<void | PageContextServer['fromHtmlRenderer']>
 
 /**
  * Hook called right before mounting the page's root Vue component or when navigating on the client.