fix: rename hooks to match other vike integrations

BREAKING CHANGE: All vike-vue packages need to be updated simultaneously. rename `onBeforeMountApp` to `onBeforeRenderClient` and `onAfterRenderSSRApp` to `onAfterRenderHtml` Signed-off-by: Chris-Robin Ennen <[email protected]>
vikejs · Jun 4, 2024 · d99ee00 · d99ee00
1 parent aaa51f7
commit d99ee00
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 42 deletions.
diff --git a/packages/vike-vue-pinia/renderer/+config.ts b/packages/vike-vue-pinia/renderer/+config.ts
@@ -3,8 +3,8 @@ import type { Pinia, StateTree } from 'pinia'
 export default {
   name: 'vike-vue-pinia',
   onCreateApp: 'import:vike-vue-pinia/renderer/installPinia:installPinia',
-  onAfterRenderSSRApp: 'import:vike-vue-pinia/renderer/dehydratePinia:dehydratePinia',
-  onBeforeMountApp: 'import:vike-vue-pinia/renderer/hydratePinia:hydratePinia',
+  onAfterRenderHtml: 'import:vike-vue-pinia/renderer/dehydratePinia:dehydratePinia',
+  onBeforeRenderClient: 'import:vike-vue-pinia/renderer/hydratePinia:hydratePinia',
 }
 
 declare global {

diff --git a/packages/vike-vue-pinia/renderer/dehydratePinia.ts b/packages/vike-vue-pinia/renderer/dehydratePinia.ts
@@ -1,7 +1,7 @@
-import type { OnAfterRenderSSRAppSync } from 'vike-vue/types'
+import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
 
 export { dehydratePinia }
 
-const dehydratePinia: OnAfterRenderSSRAppSync = ({ pinia }): ReturnType<OnAfterRenderSSRAppSync> => {
+const dehydratePinia: OnAfterRenderHtmlSync = ({ pinia }): ReturnType<OnAfterRenderHtmlSync> => {
   return { piniaInitialState: pinia!.state.value }
 }
diff --git a/packages/vike-vue-pinia/renderer/hydratePinia.ts b/packages/vike-vue-pinia/renderer/hydratePinia.ts
@@ -1,8 +1,16 @@
-import type { OnBeforeMountAppSync } from 'vike-vue/types'
+import type { OnBeforeRenderClientSync } from 'vike-vue/types'
 
 export { hydratePinia }
 
-const hydratePinia: OnBeforeMountAppSync = ({ pinia, fromHtmlRenderer }): ReturnType<OnBeforeMountAppSync> => {
+const hydratePinia: OnBeforeRenderClientSync = ({
+  pinia,
+  fromHtmlRenderer,
+  isHydration,
+}): ReturnType<OnBeforeRenderClientSync> => {
+  if (!isHydration) {
+    return
+  }
+
   const { piniaInitialState } = fromHtmlRenderer
 
   if (!pinia || !piniaInitialState) {

diff --git a/packages/vike-vue-query/renderer/+config.ts b/packages/vike-vue-query/renderer/+config.ts
@@ -3,8 +3,8 @@ import type { DehydratedState, QueryClient, QueryClientConfig } from '@tanstack/
 export default {
   name: 'vike-vue-query',
   onCreateApp: 'import:vike-vue-query/renderer/installVueQuery:installVueQuery',
-  onAfterRenderSSRApp: 'import:vike-vue-query/renderer/dehydrateVueQuery:dehydrateVueQuery',
-  onBeforeMountApp: 'import:vike-vue-query/renderer/hydrateVueQuery:hydrateVueQuery',
+  onAfterRenderHtml: 'import:vike-vue-query/renderer/dehydrateVueQuery:dehydrateVueQuery',
+  onBeforeRenderClient: 'import:vike-vue-query/renderer/hydrateVueQuery:hydrateVueQuery',
   meta: {
     queryClientConfig: {
       env: {

diff --git a/packages/vike-vue-query/renderer/dehydrateVueQuery.ts b/packages/vike-vue-query/renderer/dehydrateVueQuery.ts
@@ -1,8 +1,8 @@
 import { dehydrate } from '@tanstack/vue-query'
-import type { OnAfterRenderSSRAppSync } from 'vike-vue/types'
+import type { OnAfterRenderHtmlSync } from 'vike-vue/types'
 
 export { dehydrateVueQuery }
 
-const dehydrateVueQuery: OnAfterRenderSSRAppSync = ({ queryClient }): ReturnType<OnAfterRenderSSRAppSync> => {
+const dehydrateVueQuery: OnAfterRenderHtmlSync = ({ queryClient }): ReturnType<OnAfterRenderHtmlSync> => {
   return { vueQueryInitialState: dehydrate(queryClient!) }
 }
diff --git a/packages/vike-vue-query/renderer/hydrateVueQuery.ts b/packages/vike-vue-query/renderer/hydrateVueQuery.ts
@@ -1,9 +1,16 @@
 import { hydrate } from '@tanstack/vue-query'
-import type { OnBeforeMountAppSync } from 'vike-vue/types'
+import type { OnBeforeRenderClientSync } from 'vike-vue/types'
 
 export { hydrateVueQuery }
 
-const hydrateVueQuery: OnBeforeMountAppSync = ({ queryClient, fromHtmlRenderer }): ReturnType<OnBeforeMountAppSync> => {
+const hydrateVueQuery: OnBeforeRenderClientSync = ({
+  queryClient,
+  fromHtmlRenderer,
+  isHydration,
+}): ReturnType<OnBeforeRenderClientSync> => {
+  if (!isHydration) {
+    return
+  }
   const { vueQueryInitialState } = fromHtmlRenderer
 
   if (!queryClient || !vueQueryInitialState) {

diff --git a/packages/vike-vue/README.md b/packages/vike-vue/README.md
@@ -62,8 +62,8 @@ Vike and Vue.
 `vike-vue` introduces the following new hooks:
 * [`onCreateApp()`](https://vike.dev/onCreateApp): Allows you to extend the Vue app, typically for registering a Vue
   plugin.
-* `onAfterRenderSSRApp()`: Called right after rendering the app on the server. Usually used for dehydration of state management libraries.
-* `onBeforeMountApp()`: Called before mounting the app on the client. Usually used for hydration of state management libraries.
+* `onAfterRenderHtml()`: Called right after rendering the app on the server. Usually used for dehydration of state management libraries.
+* `onBeforeRenderClient()`: Called before mounting the app on the client. Usually used for hydration of state management libraries.
 
 ## Settings
 

diff --git a/packages/vike-vue/src/+config.ts b/packages/vike-vue/src/+config.ts
@@ -1,10 +1,10 @@
 import type {
   OnCreateAppSync,
   OnCreateAppAsync,
-  OnAfterRenderSSRAppSync,
-  OnAfterRenderSSRAppAsync,
-  OnBeforeMountAppSync,
-  OnBeforeMountAppAsync,
+  OnAfterRenderHtmlSync,
+  OnAfterRenderHtmlAsync,
+  OnBeforeRenderClientSync,
+  OnBeforeRenderClientAsync,
 } from './hooks/types'
 
 import type { Config, ConfigEffect, PageContext } from 'vike/types'
@@ -85,11 +85,11 @@ export default {
       env: { server: true, client: true },
       cumulative: true,
     },
-    onAfterRenderSSRApp: {
+    onAfterRenderHtml: {
       env: { server: true },
       cumulative: true,
     },
-    onBeforeMountApp: {
+    onBeforeRenderClient: {
       env: { server: false, client: true },
       cumulative: true,
     },
@@ -169,14 +169,14 @@ declare global {
        *
        * Typically used for dehydrating state management libraries.
        */
-      onAfterRenderSSRApp?: OnAfterRenderSSRAppSync | OnAfterRenderSSRAppAsync
+      onAfterRenderHtml?: OnAfterRenderHtmlSync | OnAfterRenderHtmlAsync
 
       /**
        * Hook called right before mounting the page's root Vue component.
        *
        * Typically used for hydrating state management libraries.
        */
-      onBeforeMountApp?: OnBeforeMountAppSync | OnBeforeMountAppAsync
+      onBeforeRenderClient?: OnBeforeRenderClientSync | OnBeforeRenderClientAsync
     }
   }
 }

diff --git a/packages/vike-vue/src/hooks/types.ts b/packages/vike-vue/src/hooks/types.ts
@@ -1,13 +1,13 @@
 export type {
   OnCreateAppSync,
   OnCreateAppAsync,
-  OnAfterRenderSSRAppSync,
-  OnAfterRenderSSRAppAsync,
-  OnBeforeMountAppSync,
-  OnBeforeMountAppAsync,
+  OnAfterRenderHtmlSync,
+  OnAfterRenderHtmlAsync,
+  OnBeforeRenderClientSync,
+  OnBeforeRenderClientAsync,
 }
 
-import type { PageContext } from 'vike/types'
+import type { PageContext, PageContextClient, PageContextServer } from 'vike/types'
 type PageContextWithApp = PageContext & { app: NonNullable<PageContext['app']> }
 
 // Purposeful code duplication for improving QuickInfo IntelliSense
@@ -34,24 +34,26 @@ type OnCreateAppAsync = (pageContext: PageContextWithApp) => Promise<void>
  *
  * Typically used for dehydrating state management libraries.
  */
-type OnAfterRenderSSRAppSync = (pageContext: PageContext) => PageContext['fromHtmlRenderer']
+type OnAfterRenderHtmlSync = (pageContext: PageContextServer) => PageContextServer['fromHtmlRenderer']
 /**
  * Hook called right after rendering the page's root Vue component.
  * The hook can return additional page context that will be passed to the client under `pageContext.fromHtmlRenderer`.
  *
  * Typically used for dehydrating state management libraries.
  */
-type OnAfterRenderSSRAppAsync = (pageContext: PageContext) => Promise<PageContext['fromHtmlRenderer']>
+type OnAfterRenderHtmlAsync = (pageContext: PageContextServer) => Promise<PageContextServer['fromHtmlRenderer']>
 
 /**
- * Hook called right before mounting the page's root Vue component.
+ * Hook called right before mounting the page's root Vue component or when navigating on the client.
+ * When mounting pageContext.isHydration is true, otherwise false.
  *
  * Typically used for hydrating state management libraries.
  */
-type OnBeforeMountAppSync = (pageContext: PageContext) => void
+type OnBeforeRenderClientSync = (pageContext: PageContextClient) => void
 /**
- * Hook called right before mounting the page's root Vue component.
+ * Hook called right before mounting the page's root Vue component or when navigating on the client.
+ * When mounting pageContext.isHydration is true, otherwise false.
  *
  * Typically used for hydrating state management libraries.
  */
-type OnBeforeMountAppAsync = (pageContext: PageContext) => Promise<void>
+type OnBeforeRenderClientAsync = (pageContext: PageContextClient) => Promise<void>
diff --git a/packages/vike-vue/src/renderer/onRenderClient.ts b/packages/vike-vue/src/renderer/onRenderClient.ts
@@ -21,12 +21,12 @@ const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRe
     app = res.app
     objectAssign(pageContext, { app })
 
-    await callCumulativeHooks(pageContext.config.onBeforeMountApp, pageContext)
+    await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext)
 
     app.mount(container)
   } else {
     // Client-side navigation
-
+    await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext)
     await changePage!(pageContext)
 
     const title = getHeadSetting('title', pageContext) || ''

diff --git a/packages/vike-vue/src/renderer/onRenderHtml.ts b/packages/vike-vue/src/renderer/onRenderHtml.ts
@@ -31,7 +31,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
       ? dangerouslySkipEscape(await renderToStringWithErrorHandling(app))
       : renderToNodeStreamWithErrorHandling(app)
 
-    const afterRenderResults = await callCumulativeHooks(pageContext.config.onAfterRenderSSRApp, pageContext)
+    const afterRenderResults = await callCumulativeHooks(pageContext.config.onAfterRenderHtml, pageContext)
 
     Object.assign(fromHtmlRenderer, ...afterRenderResults)
   }

diff --git a/packages/vike-vue/src/types/PageContext.ts b/packages/vike-vue/src/types/PageContext.ts
@@ -2,10 +2,10 @@ export type { Component }
 
 import type { App, defineComponent } from 'vue'
 import type {
-  OnAfterRenderSSRAppAsync,
-  OnAfterRenderSSRAppSync,
-  OnBeforeMountAppAsync,
-  OnBeforeMountAppSync,
+  OnAfterRenderHtmlAsync,
+  OnAfterRenderHtmlSync,
+  OnBeforeRenderClientAsync,
+  OnBeforeRenderClientSync,
   OnCreateAppAsync,
   OnCreateAppSync,
 } from '../hooks/types'
@@ -27,8 +27,8 @@ declare global {
     }
     interface ConfigResolved {
       onCreateApp?: Array<OnCreateAppSync | OnCreateAppAsync>
-      onAfterRenderSSRApp?: Array<OnAfterRenderSSRAppSync | OnAfterRenderSSRAppAsync>
-      onBeforeMountApp?: Array<OnBeforeMountAppSync | OnBeforeMountAppAsync>
+      onAfterRenderHtml?: Array<OnAfterRenderHtmlSync | OnAfterRenderHtmlAsync>
+      onBeforeRenderClient?: Array<OnBeforeRenderClientSync | OnBeforeRenderClientAsync>
     }
   }
 }