feat(vitrify): add onCreateApp hook and type the internal render fn

Author: stefanvanherwijnen

.changeset/quick-days-draw.md

@@ -0,0 +1,5 @@
+---
+'vitrify': minor
+---
+
+feat(vitrify): add onCreateApp hook and type the internal render fn

packages/vitrify/package.json

@@ -33,6 +33,10 @@
     "./plugins": {
       "types": "./dist/types/plugins/index.d.ts",
       "import": "./dist/plugins/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/types/hooks/index.d.ts",
+      "import": "./dist/hooks/index.d.ts"
     }
   },
   "engines": {
@@ -99,6 +103,7 @@
     "beasties": "^0.3.3",
     "css": "^3.0.0",
     "css-to-tailwind-translator": "^1.2.8",
+    "pinia": "^3.0.2",
     "quasar": "^2.18.1",
     "rollup": "^4.40.1",
     "typescript": "^5.8.3",

packages/vitrify/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -184,11 +184,11 @@ const renderHtml = async (options: {
 
   const onRendered = options.onRendered ?? []
 
-  const [appHtml, preloadLinks] = await options.render(
-    options.url,
-    options.manifest,
-    ssrContext
-  )
+  const {
+    html: appHtml,
+    preloadLinks,
+    app
+  } = await options.render(options.url, options.manifest, ssrContext)
 
   if (!ssrContext.initialState) ssrContext.initialState = {}
   ssrContext.initialState.provide = options.provide

packages/vitrify/src/node/hooks/index.ts

@@ -0,0 +1,17 @@
+import type {
+  OnBootHook,
+  OnCreateAppHook,
+  OnMountedHook,
+  OnRenderedHook,
+  OnSetupFile,
+  OnSetupHook
+} from '../vitrify-config.js'
+
+export {
+  OnBootHook,
+  OnCreateAppHook,
+  OnMountedHook,
+  OnRenderedHook,
+  OnSetupFile,
+  OnSetupHook
+}

packages/vitrify/src/node/index.ts

@@ -17,7 +17,6 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import { fileURLToPath } from 'url'
 import type {
   StaticImports,
-  BootFunction,
   OnMountedHook,
   VitrifyConfig,
   VitrifyConfigAsync,
@@ -27,7 +26,8 @@ import type {
   VitrifySSRModes,
   OnRenderedHook,
   OnBootHook,
-  OnSetupFile
+  OnSetupFile,
+  OnCreateAppHook
 } from './vitrify-config.js'
 import type { VitrifyContext } from './bin/run.js'
 import type { VitrifyPlugin } from './plugins/index.js'
@@ -280,6 +280,7 @@ export const baseConfig = async ({
   let onBootHooks: OnBootHook[]
   let onRenderedHooks: OnRenderedHook[]
   let onMountedHooks: OnMountedHook[]
+  let onCreateAppHooks: OnCreateAppHook[]
   let onSetupFiles: OnSetupFile[]
   let globalCss: string[] = []
   let staticImports: StaticImports
@@ -358,6 +359,7 @@ export const baseConfig = async ({
         onBootHooks = config.vitrify?.hooks?.onBoot || []
         onRenderedHooks = config.vitrify?.hooks?.onRendered || []
         onMountedHooks = config.vitrify?.hooks?.onMounted || []
+        onCreateAppHooks = config.vitrify?.hooks?.onCreateApp || []
         onSetupFiles = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
@@ -395,6 +397,9 @@ export const baseConfig = async ({
             export const onRendered = [${onRenderedHooks
               .map((fn) => `${String(fn)}`)
               .join(', ')}]
+            export const onCreateApp = [${onCreateAppHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
             export const onSetup = []
             ${onSetupFiles
               .map((url, index) => {
@@ -726,5 +731,5 @@ export type {
   VitrifyConfigAsync,
   VitrifyPlugin,
   VitrifyContext,
-  BootFunction
+  OnBootHook
 }

packages/vitrify/src/node/vitrify-config.ts

@@ -1,48 +1,82 @@
 import type { Alias, UserConfig as ViteUserConfig, ViteDevServer } from 'vite'
 import type { ComponentInternalInstance } from '@vue/runtime-core'
-import type { FastifyInstance, FastifyServerOptions } from 'fastify'
+import type {
+  FastifyInstance,
+  FastifyReply,
+  FastifyRequest,
+  FastifyServerOptions
+} from 'fastify'
 import type { VitePWAOptions } from 'vite-plugin-pwa'
 import type { Options as unpluginVueComponentsOptions } from 'unplugin-vue-components'
 import type { UserConfig as UnoCSSUserConfig } from '@unocss/core'
-import { VitrifyPlugin } from './plugins/index.js'
+import type { VitrifyPlugin } from './plugins/index.js'
+import type { Router } from 'vue-router'
+import type { App } from '@vue/runtime-core'
 
-export type BootFunction = ({
+export type OnCreateAppHook = ({
   app,
-  ssrContext,
-  staticImports
+  router,
+  initialState,
+  ctx
 }: {
-  app: any
-  ssrContext: Record<string, unknown>
-  staticImports: Record<string, any>
+  app: App
+  router: Router
+  initialState: Record<string, unknown> | null
+  ctx?: Record<string, unknown>
 }) => Promise<void> | void
+
 export type OnBootHook = ({
   app,
   ssrContext,
   staticImports
 }: {
-  app: any
+  app: App
   ssrContext: Record<string, unknown>
   staticImports?: Record<string, any>
 }) => Promise<void> | void
+
 export type OnMountedHook = (
   instance: ComponentInternalInstance
 ) => Promise<void> | void
 export type StaticImports = Record<string, string[]>
-export type SsrFunction = (
-  html: string,
-  ssrContext: Record<string, any>
-) => string
-export type OnRenderedHook = (
-  html: string,
-  ssrContext: Record<string, any>
-) => string
+
+export type OnSetupFile = URL
 export type OnSetupHook = (
   fastify: FastifyInstance,
   options?: {
     vite?: ViteDevServer
   }
 ) => any
-export type OnSetupFile = URL
+
+export type Render = (
+  url: string,
+  manifest: Record<string, unknown>,
+  ssrContext: {
+    request:
+      | FastifyRequest
+      | {
+          headers: Record<string, unknown>
+          url: string
+        }
+    reply: FastifyReply | Record<string, unknown>
+    provide: Record<string, unknown>
+  },
+  renderToString: (app: App, ctx?: Record<string, any>) => Promise<string>
+) => Promise<{
+  html: string
+  preloadLinks: string
+  app: App
+}>
+
+export type OnRenderedHook = ({
+  html,
+  ssrContext,
+  app
+}: {
+  html: string
+  ssrContext?: Record<string, any>
+  app?: App
+}) => string
 
 export interface VitrifyConfig extends ViteUserConfig {
   vitrify?: {
@@ -76,6 +110,10 @@ export interface VitrifyConfig extends ViteUserConfig {
        * Functions which run after rendering the app (SSR)
        */
       onRendered?: OnRenderedHook[]
+      /**
+       * Functions which run directly after initializing the application
+       */
+      onCreateApp?: OnCreateAppHook[]
     }
     /**
      * Global SASS variables

packages/vitrify/src/vite/vue/RootComponent.vue

@@ -8,7 +8,7 @@ import {
   onMounted as onMountedVue,
   getCurrentInstance
 } from 'vue'
-import { onBoot, onMounted } from 'virtual:vitrify-hooks'
+import { onMounted } from 'virtual:vitrify-hooks'
 import * as staticImports from 'virtual:static-imports'
 import App from 'src/App.vue'
 // import 'vitrify.sass'

packages/vitrify/src/vite/vue/main.ts

@@ -1,11 +1,18 @@
 import createRouter from 'src/router'
-import { createSSRApp, createApp as createVueApp, ref } from 'vue'
-import { onBoot } from 'virtual:vitrify-hooks'
+import { App, createSSRApp, createApp as createVueApp, ref } from 'vue'
+import { onBoot, onCreateApp } from 'virtual:vitrify-hooks'
 import routes from 'src/router/routes'
 import * as staticImports from 'virtual:static-imports'
 import 'virtual:uno.css'
 
 import RootComponent from './RootComponent.vue'
+
+declare global {
+  interface Window {
+    __INITIAL_STATE__: any
+  }
+}
+
 interface ssrContext {
   provide?: Record<string, unknown>
   [key: string]: unknown
@@ -17,18 +24,44 @@ function capitalizeFirstLetter(string: string) {
 
 export async function createApp(
   ssr?: 'client' | 'server',
-  ssrContext?: ssrContext
+  ssrContext: ssrContext = {}
 ) {
-  let app
+  const initialState: Record<string, any> | null =
+    !import.meta.env.SSR && window.__INITIAL_STATE__
+      ? JSON.parse(window.__INITIAL_STATE__)
+      : null
+
+  // Delete for security reasons
+  if (!import.meta.env.SSR && window.__INITIAL_STATE__)
+    delete window.__INITIAL_STATE__
+
+  let provide: Record<string, any> = {}
+  if (import.meta.env.SSR) {
+    if (ssrContext.provide) {
+      provide = ssrContext?.provide
+    }
+  } else {
+    if (initialState) {
+      provide = initialState.provide
+    }
+  }
+
+  let app: App
 
   if (ssr) {
     app = createSSRApp(RootComponent)
   } else {
     app = createVueApp(RootComponent)
   }
+
   const router = createRouter()
   app.use(router)
 
+  const onCreateAppCtx = {}
+  for (const fn of onCreateApp) {
+    await fn({ app, router, initialState, ctx: onCreateAppCtx })
+  }
+
   // Workaround to fix hydration errors when serving html files directly
   router.beforeEach((to, from, next) => {
     if (to.path.endsWith('.html')) {
@@ -38,20 +71,6 @@ export async function createApp(
     next()
   })
 
-  let initialState: Record<string, any>
-  let provide: Record<string, any> = {}
-  if (import.meta.env.SSR) {
-    if (ssrContext?.provide) {
-      provide = ssrContext?.provide
-    }
-  } else {
-    // @ts-expect-error undefined
-    if (window.__INITIAL_STATE__) {
-      // @ts-expect-error undefined
-      initialState = JSON.parse(window.__INITIAL_STATE__)
-      provide = initialState.provide
-    }
-  }
   for (const key in provide) {
     if (provide[key]?.value) {
       const refValue = ref(provide[key].value)

packages/vitrify/src/vite/vue/ssr/entry-server.ts

@@ -1,6 +1,5 @@
-import { type FastifyReply, type FastifyRequest } from 'fastify'
 import { createApp } from '../main.js'
-import { renderToString as renderToStringVue } from 'vue/server-renderer'
+import type { Render } from '../../../node/vitrify-config.js'
 
 const initializeApp = async (
   url: string,
@@ -37,16 +36,12 @@ export const getRoutes = async () =>
     })
   ).routes
 
-export async function render(
-  url: string,
-  manifest: Record<string, unknown>,
-  ssrContext: {
-    request: FastifyRequest | { headers: Record<string, unknown>; url: string }
-    reply: FastifyReply | Record<string, unknown>
-    provide: Record<string, unknown>
-  },
-  renderToString: typeof renderToStringVue
-) {
+export const render: Render = async (
+  url,
+  manifest,
+  ssrContext,
+  renderToString
+) => {
   if (!renderToString)
     renderToString = (await import('vue/server-renderer')).renderToString
   const { app, router } = await initializeApp(url, ssrContext)
@@ -62,7 +57,7 @@ export async function render(
 
   const preloadLinks = renderPreloadLinks(ctx.modules!, manifest)
 
-  return [html, preloadLinks]
+  return { html, preloadLinks, app }
 }
 
 function renderPreloadLinks(