Skip to content

Commit

Permalink
Create separate de- & hydration hooks for pinia
Browse files Browse the repository at this point in the history
This allows users to use `onBeforeMountApp` and `onAfterRenderSSRApp` without overwriting pinia's hooks

Signed-off-by: Chris-Robin Ennen <[email protected]>
  • Loading branch information
4350pChris committed Apr 16, 2024
1 parent a2ea70f commit b23aecd
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 6 deletions.
4 changes: 2 additions & 2 deletions packages/vike-pinia/renderer/+config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ export default {
// @ts-ignore Remove this ts-ignore once Vike's new version is released.
name: 'vike-pinia',
onCreateAppPinia: 'import:vike-pinia/renderer/installPinia:installPinia',
onAfterRenderSSRApp: 'import:vike-pinia/renderer/dehydratePinia:dehydratePinia',
onBeforeMountApp: 'import:vike-pinia/renderer/hydratePinia:hydratePinia'
onAfterRenderSSRAppPinia: 'import:vike-pinia/renderer/dehydratePinia:dehydratePinia',
onBeforeMountAppPinia: 'import:vike-pinia/renderer/hydratePinia:hydratePinia'
}

declare global {
Expand Down
20 changes: 20 additions & 0 deletions packages/vike-vue/src/+config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,15 @@ const config = {
onCreateAppPinia: {
env: { server: true, client: true }
},
onAfterRenderSSRAppPinia: {
env: { server: true }
},
onAfterRenderSSRApp: {
env: { server: true }
},
onBeforeMountAppPinia: {
env: { server: false, client: true }
},
onBeforeMountApp: {
env: { server: false, client: true }
},
Expand Down Expand Up @@ -172,6 +178,20 @@ declare global {
*/
onCreateAppPinia?: OnCreateAppSync | OnCreateAppAsync

/**
* Temporary workaround until `cumulative` is implemented for `onCreateApp`.
*
* See https://github.com/vikejs/vike-vue/pull/65#discussion_r1449227587
*/
onAfterRenderSSRAppPinia?: OnAfterRenderSSRAppSync | OnAfterRenderSSRAppAsync

/**
* Temporary workaround until `cumulative` is implemented for `onCreateApp`.
*
* See https://github.com/vikejs/vike-vue/pull/65#discussion_r1449227587
*/
onBeforeMountAppPinia?: OnBeforeMountAppSync | OnBeforeMountAppAsync

/**
* 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`.
Expand Down
1 change: 1 addition & 0 deletions packages/vike-vue/src/renderer/onRenderClient.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const onRenderClient: OnRenderClientAsync = async (pageContext): ReturnType<OnRe
const ctxWithApp = await createVueApp(pageContext, ssr, 'Page')
app = ctxWithApp.app

await pageContext.config.onBeforeMountAppPinia?.(ctxWithApp)
await pageContext.config.onBeforeMountApp?.(ctxWithApp)

app.mount(container)
Expand Down
8 changes: 5 additions & 3 deletions packages/vike-vue/src/renderer/onRenderHtml.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export { onRenderHtml }
import { renderToNodeStream, renderToString } from 'vue/server-renderer'
import { dangerouslySkipEscape, escapeInject, version } from 'vike/server'
import { getHeadSetting } from './getHeadSetting.js'
import type { OnRenderHtmlAsync } from 'vike/types'
import type { OnRenderHtmlAsync, PageContext } from 'vike/types'
import { createVueApp } from './createVueApp.js'
import { App } from 'vue'

Expand All @@ -19,7 +19,7 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
const faviconTag = !favicon ? '' : escapeInject`<link rel="icon" href="${favicon}" />`

let pageView: ReturnType<typeof dangerouslySkipEscape> | ReturnType<typeof renderToNodeStream> | string = ''
let fromHtmlRenderer = undefined
const fromHtmlRenderer: PageContext['fromHtmlRenderer'] = {}

if (!!pageContext.Page) {
// SSR is enabled
Expand All @@ -29,7 +29,9 @@ const onRenderHtml: OnRenderHtmlAsync = async (pageContext): ReturnType<OnRender
? dangerouslySkipEscape(await renderToStringWithErrorHandling(app))
: renderToNodeStreamWithErrorHandling(app)

fromHtmlRenderer = await pageContext.config.onAfterRenderSSRApp?.(ctxWithApp)
const piniaCtx = await pageContext.config.onAfterRenderSSRAppPinia?.(ctxWithApp)
const userFromHtmlRenderer = await pageContext.config.onAfterRenderSSRApp?.(ctxWithApp)
Object.assign(fromHtmlRenderer, piniaCtx, userFromHtmlRenderer)
}

let headHtml: ReturnType<typeof dangerouslySkipEscape> | string = ''
Expand Down
2 changes: 1 addition & 1 deletion packages/vike-vue/src/types/PageContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ declare global {
app?: VikeVueApp

// Set by onRenderHtml()
fromHtmlRenderer: unknown
fromHtmlRenderer: Record<string, unknown>
}
}
}

0 comments on commit b23aecd

Please sign in to comment.