From d99ee0074e6838fe0270d4d9d311e40ad5f232ee Mon Sep 17 00:00:00 2001 From: Chris-Robin Ennen Date: Mon, 3 Jun 2024 15:56:02 +0200 Subject: [PATCH] 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 --- packages/vike-vue-pinia/renderer/+config.ts | 4 ++-- .../vike-vue-pinia/renderer/dehydratePinia.ts | 4 ++-- .../vike-vue-pinia/renderer/hydratePinia.ts | 12 ++++++++-- packages/vike-vue-query/renderer/+config.ts | 4 ++-- .../renderer/dehydrateVueQuery.ts | 4 ++-- .../renderer/hydrateVueQuery.ts | 11 +++++++-- packages/vike-vue/README.md | 4 ++-- packages/vike-vue/src/+config.ts | 16 ++++++------- packages/vike-vue/src/hooks/types.ts | 24 ++++++++++--------- .../vike-vue/src/renderer/onRenderClient.ts | 4 ++-- .../vike-vue/src/renderer/onRenderHtml.ts | 2 +- packages/vike-vue/src/types/PageContext.ts | 12 +++++----- 12 files changed, 59 insertions(+), 42 deletions(-) diff --git a/packages/vike-vue-pinia/renderer/+config.ts b/packages/vike-vue-pinia/renderer/+config.ts index ac61c250..0f0db8e9 100644 --- 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 index ce352dc6..b6cceba5 100644 --- 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 => { +const dehydratePinia: OnAfterRenderHtmlSync = ({ pinia }): ReturnType => { return { piniaInitialState: pinia!.state.value } } diff --git a/packages/vike-vue-pinia/renderer/hydratePinia.ts b/packages/vike-vue-pinia/renderer/hydratePinia.ts index 64286819..c3c46171 100644 --- 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 => { +const hydratePinia: OnBeforeRenderClientSync = ({ + pinia, + fromHtmlRenderer, + isHydration, +}): ReturnType => { + 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 index dd09c4e3..7a058567 100644 --- 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 index 8935ccd7..fc207125 100644 --- 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 => { +const dehydrateVueQuery: OnAfterRenderHtmlSync = ({ queryClient }): ReturnType => { return { vueQueryInitialState: dehydrate(queryClient!) } } diff --git a/packages/vike-vue-query/renderer/hydrateVueQuery.ts b/packages/vike-vue-query/renderer/hydrateVueQuery.ts index 4a315d9a..2a5073be 100644 --- 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 => { +const hydrateVueQuery: OnBeforeRenderClientSync = ({ + queryClient, + fromHtmlRenderer, + isHydration, +}): ReturnType => { + if (!isHydration) { + return + } const { vueQueryInitialState } = fromHtmlRenderer if (!queryClient || !vueQueryInitialState) { diff --git a/packages/vike-vue/README.md b/packages/vike-vue/README.md index 6b8245b6..846ff9c8 100644 --- 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 index 089bd24d..a4cf4842 100644 --- 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 index 9a918250..827f9a64 100644 --- 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 } // Purposeful code duplication for improving QuickInfo IntelliSense @@ -34,24 +34,26 @@ type OnCreateAppAsync = (pageContext: PageContextWithApp) => Promise * * 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 +type OnAfterRenderHtmlAsync = (pageContext: PageContextServer) => Promise /** - * 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 +type OnBeforeRenderClientAsync = (pageContext: PageContextClient) => Promise diff --git a/packages/vike-vue/src/renderer/onRenderClient.ts b/packages/vike-vue/src/renderer/onRenderClient.ts index fb6aec9a..9d75270c 100644 --- 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 - onAfterRenderSSRApp?: Array - onBeforeMountApp?: Array + onAfterRenderHtml?: Array + onBeforeRenderClient?: Array } } }