vitrify 0.22.0 → 0.24.0

package/dist/types/vitrify-config.d.ts

@@ -1,28 +1,84 @@
 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';
-export type BootFunction = ({ app, ssrContext, staticImports }: {
-    app: any;
-    ssrContext: Record<string, unknown>;
-    staticImports: Record<string, any>;
+import type { VitrifyPlugin } from './plugins/index.js';
+import type { Router } from 'vue-router';
+import type { App } from '@vue/runtime-core';
+import type { Pinia } from 'pinia';
+import type { _UseQueryEntryNodeValueSerialized } from '@pinia/colada/index.js';
+export type SSRContext = {
+    req: FastifyRequest | {
+        headers: Record<string, unknown>;
+        url: string;
+    };
+    res: FastifyReply | Record<string, unknown>;
+    provide: Record<string, unknown>;
+    initialState: {
+        provide?: Record<string, unknown>;
+        pinia?: Record<string, unknown>;
+        piniaColada?: Record<string, _UseQueryEntryNodeValueSerialized>;
+        [key: string]: unknown;
+    };
+    pinia?: Pinia;
+    _modules: Set<unknown>;
+    _meta: Record<string, any>;
+    __qMetaList: unknown[];
+    /**
+     * Required for Quasar
+     */
+    onRenderedList: (() => unknown)[];
+    onRendered: (fn: () => unknown) => void;
+    /**
+     * Vue internals
+     */
+    modules?: Map<unknown, unknown>;
+    transports?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+export type onAppCreatedHook = ({ app, router, ctx, initialState, ssrContext }: {
+    app: App;
+    router: Router;
+    ctx: {
+        pinia?: Pinia;
+        [key: string]: unknown;
+    };
+    initialState: {
+        provide?: Record<string, unknown>;
+        pinia?: Record<string, unknown>;
+        piniaColada?: Record<string, _UseQueryEntryNodeValueSerialized>;
+        [key: string]: unknown;
+    };
+    ssrContext?: SSRContext;
 }) => Promise<void> | void;
 export type OnBootHook = ({ app, ssrContext, staticImports }: {
-    app: any;
-    ssrContext: Record<string, unknown>;
+    app: App;
+    ssrContext: SSRContext;
     staticImports?: Record<string, any>;
 }) => Promise<void> | void;
-export type OnMountedHook = (instance: ComponentInternalInstance) => Promise<void> | void;
+export type OnAppMountedHook = ({ instance }: {
+    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: SSRContext, renderToString: (app: App, ctx?: Record<string, any>) => Promise<string>) => Promise<{
+    html: string;
+    preloadLinks: string;
+    app: App;
+}>;
+export type OnRenderedHook = ({ app, ssrContext }: {
+    app: App;
+    ssrContext?: SSRContext;
+}) => Promise<void> | void;
+export type OnTemplateRenderedHook = ({ html, ssrContext }: {
+    html: string;
+    ssrContext?: SSRContext;
+}) => Promise<string> | string;
 export interface VitrifyConfig extends ViteUserConfig {
     vitrify?: {
         lang?: string;
@@ -46,7 +102,7 @@ export interface VitrifyConfig extends ViteUserConfig {
             /**
              * Functions which run in the onMounted hook of the app
              */
-            onMounted?: OnMountedHook[];
+            onAppMounted?: OnAppMountedHook[];
             /**
              * Functions which run after initializing the app
              */
@@ -55,6 +111,14 @@ export interface VitrifyConfig extends ViteUserConfig {
              * Functions which run after rendering the app (SSR)
              */
             onRendered?: OnRenderedHook[];
+            /**
+             * Functions which run after rendering the template (SSR)
+             */
+            onTemplateRendered?: OnTemplateRenderedHook[];
+            /**
+             * Functions which run directly after initializing the application
+             */
+            onAppCreated?: onAppCreatedHook[];
         };
         /**
          * Global SASS variables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
@@ -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": {
@@ -50,62 +54,69 @@
   "dependencies": {
     "@fastify/middie": "^9.0.3",
     "@fastify/one-line-logger": "^2.0.2",
-    "@fastify/static": "^8.1.1",
-    "@unocss/core": "^66.0.0",
-    "@unocss/preset-uno": "^66.0.0",
-    "@unocss/preset-web-fonts": "66.1.0-beta.13",
-    "@unocss/preset-wind": "^66.0.0",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@fastify/static": "^8.2.0",
+    "@unocss/core": "^66.1.3",
+    "@unocss/preset-uno": "^66.1.3",
+    "@unocss/preset-web-fonts": "66.1.3",
+    "@unocss/preset-wind": "^66.1.3",
+    "@vitejs/plugin-vue": "^5.2.4",
     "ajv": "^8.17.1",
     "animated-unocss": "^0.0.6",
     "cac": "^6.7.14",
     "chalk": "^5.4.1",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.25.3",
-    "fastify": "^5.3.2",
+    "devalue": "^5.1.1",
+    "esbuild": "^0.25.5",
+    "fastify": "^5.3.3",
     "glob": "^11.0.2",
-    "happy-dom": "^17.4.6",
+    "happy-dom": "^17.5.6",
     "is-port-reachable": "^4.0.0",
     "magic-string": "^0.30.17",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "sass": "1.87.0",
+    "rollup-plugin-visualizer": "^6.0.1",
+    "sass": "1.89.1",
+    "stringify-object": "^5.0.0",
     "ts-node": "^10.9.2",
-    "unocss": "^66.0.0",
-    "unplugin-vue-components": "^28.5.0",
-    "vite": "^6.3.4",
+    "unocss": "^66.1.3",
+    "unplugin-vue-components": "^28.7.0",
+    "vite": "^6.3.5",
     "vite-plugin-pwa": "^1.0.0",
     "vitefu": "^1.0.6",
-    "vitest": "^3.1.2",
+    "vitest": "^3.2.0",
     "workbox-window": "^7.3.0"
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.3",
-    "@quasar/extras": "^1.16.17",
+    "@pinia/colada": "^0.16.1",
+    "@quasar/extras": "^1.17.0",
     "@quasar/quasar-ui-qmarkdown": "^2.0.5",
     "@quasar/quasar-ui-qmediaplayer": "^2.0.0-beta.0",
     "@types/connect": "^3.4.38",
     "@types/glob": "^8.1.0",
     "@types/merge-deep": "^3.0.3",
-    "@types/node": "^22.15.3",
+    "@types/node": "^22.15.29",
+    "@types/stringify-object": "^4.0.5",
     "@types/ws": "^8.18.1",
-    "@unocss/preset-icons": "^66.0.0",
-    "@vue/runtime-core": "^3.5.13",
-    "beasties": "^0.3.3",
+    "@unocss/preset-icons": "^66.1.3",
+    "@vue/runtime-core": "^3.5.16",
+    "beasties": "^0.3.4",
     "css": "^3.0.0",
     "css-to-tailwind-translator": "^1.2.8",
+    "pinia": "^3.0.2",
     "quasar": "^2.18.1",
-    "rollup": "^4.40.1",
+    "rollup": "^4.41.1",
     "typescript": "^5.8.3",
-    "vue": "^3.5.13",
+    "vue": "^3.5.16",
     "vue-router": "^4.5.1"
   },
   "peerDependencies": {
-    "@fastify/static": "^8.1.1",
-    "fastify": "^5.3.2",
+    "@fastify/static": "^8.2.0",
+    "@pinia/colada": "^0.16.1",
+    "fastify": "^5.3.3",
+    "pinia": "^3.0.2",
     "quasar": "^2.18.1",
-    "vue": "^3.5.13",
+    "vue": "^3.5.16",
     "vue-router": "^4.5.1"
   },
   "publishConfig": {

package/src/node/bin/cli.ts

@@ -24,7 +24,6 @@ cli
     const { build } = await import('./build.js')
     let appDir: URL
     let prerender
-    let onRendered
     if (options.appDir) {
       if (options.appDir.slice(-1) !== '/') options.appDir += '/'
       appDir = new URL(`file://${options.appDir}`)
@@ -90,11 +89,17 @@ cli
           new URL('ssr/server/prerender.mjs', baseOutDir).pathname
         ))
 
-        const { template, manifest, render, getRoutes, onRendered } =
-          await loadSSRAssets({
-            mode: 'ssg',
-            distDir: baseOutDir
-          })
+        const {
+          template,
+          manifest,
+          render,
+          getRoutes,
+          onRendered,
+          onTemplateRendered
+        } = await loadSSRAssets({
+          mode: 'ssg',
+          distDir: baseOutDir
+        })
         const routes = await getRoutes()
 
         prerender({
@@ -103,7 +108,8 @@ cli
           manifest,
           render,
           routes,
-          onRendered
+          onRendered,
+          onTemplateRendered
         })
         break
       default:

package/src/node/bin/dev.ts

@@ -5,7 +5,10 @@ import type { Server } from 'net'
 import fastify from 'fastify'
 import type { FastifyServerOptions } from 'fastify'
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
-import type { OnRenderedHook, VitrifyConfig } from '../vitrify-config.js'
+import type {
+  OnTemplateRenderedHook,
+  VitrifyConfig
+} from '../vitrify-config.js'
 import isPortReachable from 'is-port-reachable'
 import { exitLogs } from '../helpers/logger.js'
 import { fileURLToPath } from 'url'
@@ -138,7 +141,7 @@ export async function createServer({
   let setup
   let app: FastifyInstance | undefined
   let server: Server
-  let onRendered: OnRenderedHook[]
+  let onTemplateRendered: OnTemplateRenderedHook[]
   let vitrifyConfig: VitrifyConfig
 
   console.log(`Development mode: ${ssr ? ssr : 'csr'}`)
@@ -149,7 +152,7 @@ export async function createServer({
         : fileURLToPath(new URL(`src/vite/${framework}/ssr/app.ts`, cliDir))
 
     const environment = vite.environments.ssr
-    ;({ setup, onRendered, vitrifyConfig } =
+    ;({ setup, onTemplateRendered, vitrifyConfig } =
       // @ts-expect-error missing types
       await environment.runner.import(entryUrl))
     // console.log(module)
@@ -177,7 +180,7 @@ export async function createServer({
       await app.register(fastifySsrPlugin, {
         appDir,
         mode: 'development',
-        onRendered,
+        onTemplateRendered,
         host
       })
     }

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -8,8 +8,14 @@ import {
   appendToHead
 } from '../../helpers/utils.js'
 import type { ViteDevServer } from 'vite'
-import type { OnRenderedHook } from '../../vitrify-config.js'
+import type {
+  OnRenderedHook,
+  OnTemplateRenderedHook,
+  SSRContext
+} from '../../vitrify-config.js'
 import { getAppDir } from '../../app-urls.js'
+import { stringify } from 'devalue'
+import stringifyObject from 'stringify-object'
 
 type ProvideFn = (
   req: FastifyRequest,
@@ -23,6 +29,7 @@ export interface FastifySsrOptions {
   vite?: ViteDevServer
   // frameworkDir?: URL
   onRendered?: OnRenderedHook[]
+  onTemplateRendered?: OnTemplateRenderedHook[]
   appDir?: URL
   publicDir?: URL
   mode?: string
@@ -92,11 +99,12 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
         }
 
         const html = await renderHtml({
-          request: req,
-          reply: res,
+          req,
+          res,
           url: url ?? '/',
           provide,
           onRendered: options.onRendered,
+          onTemplateRendered: options.onTemplateRendered,
           template,
           manifest,
           render
@@ -127,16 +135,18 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
       const url = req.raw.url?.replace(options.baseUrl!, '/')
       const provide = options.provide ? await options.provide(req, res) : {}
 
-      const { template, manifest, render, onRendered } = await loadSSRAssets({
-        distDir: new URL('./dist/', options.appDir)
-      })
+      const { template, manifest, render, onRendered, onTemplateRendered } =
+        await loadSSRAssets({
+          distDir: new URL('./dist/', options.appDir)
+        })
 
       const html = await renderHtml({
-        request: req,
-        reply: res,
+        req,
+        res,
         url: url ?? '/',
         provide,
         onRendered,
+        onTemplateRendered,
         template,
         manifest,
         render
@@ -168,34 +178,77 @@ const renderTemplate = ({
 
 const renderHtml = async (options: {
   url: string
-  request: FastifyRequest | { headers: Record<string, unknown>; url: string }
-  reply: FastifyReply | Record<string, unknown>
+  req: FastifyRequest | { headers: Record<string, unknown>; url: string }
+  res: FastifyReply | Record<string, unknown>
   provide: Record<string, unknown>
   onRendered?: OnRenderedHook[]
+  onTemplateRendered?: OnTemplateRenderedHook[]
   template: string
   manifest: Record<string, unknown>
   render: any
 }) => {
-  const ssrContext: Record<string, any> = {
-    req: options.request,
-    res: options.reply,
-    provide: options.provide
+  const ssrContextOnRendered: (() => unknown)[] = []
+  const ssrContext: SSRContext = {
+    req: options.req,
+    res: options.res,
+    provide: options.provide,
+    initialState: {},
+    _modules: new Set(),
+    _meta: {},
+    __qMetaList: [],
+    onRenderedList: ssrContextOnRendered,
+    onRendered: (fn: () => unknown) => {
+      ssrContextOnRendered.push(fn)
+    }
   }
 
   const onRendered = options.onRendered ?? []
+  const onTemplateRendered = options.onTemplateRendered ?? []
 
-  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 (ssrContextOnRendered?.length) {
+    for (const ssrFunction of ssrContextOnRendered) {
+      await ssrFunction()
+    }
+  }
+
+  if (onRendered?.length) {
+    for (const ssrFunction of onRendered) {
+      await ssrFunction({ app, ssrContext })
+    }
+  }
 
-  if (!ssrContext.initialState) ssrContext.initialState = {}
+  // if (!ssrContext.initialState) ssrContext.initialState = {}
   ssrContext.initialState.provide = options.provide
 
+  const ssrContextInitialStateStringified: Record<
+    keyof SSRContext['initialState'],
+    string
+  > = {}
+  for (const key in ssrContext.initialState) {
+    if (key === 'provide') {
+      ssrContextInitialStateStringified[key] = JSON.stringify(
+        ssrContext.initialState.provide
+      )
+    } else if (key === 'piniaColada') {
+      ssrContextInitialStateStringified[key] = JSON.stringify(
+        ssrContext.initialState.piniaColada
+      )
+    } else {
+      ssrContextInitialStateStringified[key] = stringify(
+        ssrContext.initialState[key]
+      )
+    }
+  }
+
   const initialStateScript = `
   <script>
-  __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
+  __INITIAL_STATE__ = ${stringifyObject(ssrContextInitialStateStringified)}
   </script>`
 
   let html = renderTemplate({
@@ -205,9 +258,9 @@ const renderHtml = async (options: {
     preloadLinks
   })
 
-  if (onRendered?.length) {
-    for (const ssrFunction of onRendered) {
-      html = ssrFunction(html, ssrContext)
+  if (onTemplateRendered?.length) {
+    for (const ssrFunction of onTemplateRendered) {
+      html = await ssrFunction({ html, ssrContext })
     }
   }
 
@@ -229,7 +282,7 @@ const loadSSRAssets = async (
   const baseOutDir = distDir || new URL('dist/', appDir)
 
   let templatePath, manifestPath, entryServerPath
-  const onRenderedPath = fileURLToPath(
+  const vitrifyHooksPath = fileURLToPath(
     new URL('ssr/server/virtual_vitrify-hooks.mjs', baseOutDir)
   )
   if (mode === 'ssg') {
@@ -254,14 +307,15 @@ const loadSSRAssets = async (
     const manifest = JSON.parse(readFileSync(manifestPath).toString())
     const entryServer = await import(entryServerPath)
     const { render, getRoutes } = entryServer
-    const onRendered = (await import(onRenderedPath)).onRendered
+    const { onTemplateRendered, onRendered } = await import(vitrifyHooksPath)
 
     return {
       template,
       manifest,
       render,
       getRoutes,
-      onRendered
+      onRendered,
+      onTemplateRendered
     }
   } catch (e) {
     console.error(e)

package/src/node/frameworks/vue/prerender.ts

@@ -1,5 +1,5 @@
 import { existsSync, promises as fs, mkdirSync } from 'fs'
-import type { OnRenderedHook } from 'src/node/vitrify-config.js'
+import type { OnTemplateRenderedHook } from 'src/node/vitrify-config.js'
 import { routesToPaths } from '../../helpers/routes.js'
 import { renderHtml } from './fastify-ssr-plugin.js'
 import { type RouteRecordRaw } from 'vue-router'
@@ -10,14 +10,14 @@ export const prerender = async ({
   manifest,
   render,
   routes,
-  onRendered
+  onTemplateRendered
 }: {
   outDir: string
   template: string
   manifest: Record<string, unknown>
   render: unknown
   routes: RouteRecordRaw[]
-  onRendered: OnRenderedHook[]
+  onTemplateRendered: OnTemplateRenderedHook[]
 }) => {
   const promises = []
   const paths = routesToPaths(routes).filter(
@@ -49,10 +49,10 @@ export const prerender = async ({
       manifest,
       provide: {},
       render,
-      request: { headers: {}, url },
-      reply: {},
+      req: { headers: {}, url },
+      res: {},
       template,
-      onRendered
+      onTemplateRendered
     })
     html = await beasties.process(html)
 

package/src/node/frameworks/vue/server.ts

@@ -1,6 +1,9 @@
-import type { FastifyInstance } from 'fastify'
 import fastify from 'fastify'
-import type { OnRenderedHook, OnSetupHook } from '../../vitrify-config.js'
+import type {
+  OnTemplateRenderedHook,
+  OnSetupHook,
+  OnRenderedHook
+} from '../../vitrify-config.js'
 import type { FastifyCsrPlugin } from './fastify-csr-plugin.js'
 import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
@@ -10,6 +13,7 @@ export const createApp = ({
   baseUrl,
   fastifyPlugin,
   onRendered,
+  onTemplateRendered,
   vitrifyDir,
   mode
 }: {
@@ -18,6 +22,7 @@ export const createApp = ({
   baseUrl?: string
   fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
   onRendered?: OnRenderedHook[]
+  onTemplateRendered?: OnTemplateRenderedHook[]
   vitrifyDir?: URL
   mode: string
 }) => {
@@ -35,6 +40,7 @@ export const createApp = ({
     appDir,
     vitrifyDir,
     onRendered,
+    onTemplateRendered,
     mode
   })
 

package/src/node/hooks/index.ts

@@ -0,0 +1,19 @@
+import type {
+  OnBootHook,
+  onAppCreatedHook,
+  OnAppMountedHook,
+  OnRenderedHook,
+  OnTemplateRenderedHook,
+  OnSetupFile,
+  OnSetupHook
+} from '../vitrify-config.js'
+
+export {
+  OnBootHook,
+  onAppCreatedHook,
+  OnAppMountedHook,
+  OnRenderedHook,
+  OnTemplateRenderedHook,
+  OnSetupFile,
+  OnSetupHook
+}