vitrify 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.22.0",
+  "version": "0.23.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,60 +54,67 @@
   "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.2",
+    "@unocss/preset-uno": "^66.1.2",
+    "@unocss/preset-web-fonts": "66.1.2",
+    "@unocss/preset-wind": "^66.1.2",
+    "@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.4",
+    "fastify": "^5.3.3",
     "glob": "^11.0.2",
-    "happy-dom": "^17.4.6",
+    "happy-dom": "^17.4.7",
     "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",
+    "sass": "1.89.0",
+    "stringify-object": "^5.0.0",
     "ts-node": "^10.9.2",
-    "unocss": "^66.0.0",
+    "unocss": "^66.1.2",
     "unplugin-vue-components": "^28.5.0",
-    "vite": "^6.3.4",
+    "vite": "^6.3.5",
     "vite-plugin-pwa": "^1.0.0",
     "vitefu": "^1.0.6",
-    "vitest": "^3.1.2",
+    "vitest": "^3.1.4",
     "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.21",
+    "@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.2",
+    "@vue/runtime-core": "^3.5.14",
+    "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.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
     "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-router": "^4.5.1"

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,
+  OnMountedHook,
+  OnRenderedHook,
+  OnTemplateRenderedHook,
+  OnSetupFile,
+  OnSetupHook
+} from '../vitrify-config.js'
+
+export {
+  OnBootHook,
+  onAppCreatedHook,
+  OnMountedHook,
+  OnRenderedHook,
+  OnTemplateRenderedHook,
+  OnSetupFile,
+  OnSetupHook
+}

package/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,9 @@ import type {
   VitrifySSRModes,
   OnRenderedHook,
   OnBootHook,
-  OnSetupFile
+  OnSetupFile,
+  onAppCreatedHook,
+  OnTemplateRenderedHook
 } from './vitrify-config.js'
 import type { VitrifyContext } from './bin/run.js'
 import type { VitrifyPlugin } from './plugins/index.js'
@@ -63,7 +64,7 @@ const manualChunkNames = [
 ]
 
 const moduleChunks = {
-  vue: ['vue', '@vue', 'vue-router'],
+  vue: ['vue', '@vue', 'vue-router', 'pinia', '@pinia/colada', '@vue/devtools'],
   quasar: ['quasar'],
   atQuasar: ['@quasar']
 }
@@ -279,7 +280,9 @@ export const baseConfig = async ({
 
   let onBootHooks: OnBootHook[]
   let onRenderedHooks: OnRenderedHook[]
+  let onTemplateRenderedHooks: OnTemplateRenderedHook[]
   let onMountedHooks: OnMountedHook[]
+  let onAppCreatedHooks: onAppCreatedHook[]
   let onSetupFiles: OnSetupFile[]
   let globalCss: string[] = []
   let staticImports: StaticImports
@@ -357,7 +360,10 @@ export const baseConfig = async ({
       config: (config: VitrifyConfig, env) => {
         onBootHooks = config.vitrify?.hooks?.onBoot || []
         onRenderedHooks = config.vitrify?.hooks?.onRendered || []
+        onTemplateRenderedHooks =
+          config.vitrify?.hooks?.onTemplateRendered || []
         onMountedHooks = config.vitrify?.hooks?.onMounted || []
+        onAppCreatedHooks = config.vitrify?.hooks?.onAppCreated || []
         onSetupFiles = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
@@ -395,6 +401,12 @@ export const baseConfig = async ({
             export const onRendered = [${onRenderedHooks
               .map((fn) => `${String(fn)}`)
               .join(', ')}]
+            export const onTemplateRendered = [${onTemplateRenderedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
+            export const onAppCreated = [${onAppCreatedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
             export const onSetup = []
             ${onSetupFiles
               .map((url, index) => {
@@ -726,5 +738,5 @@ export type {
   VitrifyConfigAsync,
   VitrifyPlugin,
   VitrifyContext,
-  BootFunction
+  OnBootHook
 }

package/src/node/plugins/index.ts

@@ -26,3 +26,4 @@ export type VitrifyPlugin<Options> = ({
 }) => Promise<VitrifyPluginReturnType> | VitrifyPluginReturnType
 
 export * from './quasar/index.js'
+export * from './pinia/index.js'

package/src/node/plugins/pinia/index.ts

@@ -0,0 +1,96 @@
+import type { onAppCreatedHook, OnRenderedHook } from '../../vitrify-config.js'
+import type { VitrifyPlugin } from '../index.js'
+
+export type PiniaPluginOptions = {
+  // Initialize Pinia Colada
+  colada?: boolean
+}
+
+const piniaonAppCreated: onAppCreatedHook = async ({
+  app,
+  ctx,
+  initialState,
+  ssrContext
+}) => {
+  const { createPinia } = await import('pinia')
+  const pinia = createPinia()
+  ctx.pinia = pinia
+  app.use(pinia)
+
+  // SSR Client
+  if (initialState?.pinia) pinia.state.value = initialState.pinia
+  // SSR Server
+  if (ssrContext) ssrContext.pinia = pinia
+}
+
+const piniaOnRenderedHook: OnRenderedHook = ({ app, ssrContext }) => {
+  // SSR Server
+  if (ssrContext?.initialState && ssrContext.pinia) {
+    ssrContext.initialState.pinia = ssrContext.pinia.state.value
+  }
+}
+
+const piniaColadaonAppCreated: onAppCreatedHook = async ({
+  app,
+  ctx,
+  initialState
+}) => {
+  if (ctx?.pinia) {
+    const { PiniaColada, useQueryCache, hydrateQueryCache } = await import(
+      '@pinia/colada'
+    )
+
+    app.use(PiniaColada)
+
+    // SSR Client
+    if (initialState?.piniaColada) {
+      hydrateQueryCache(useQueryCache(ctx.pinia), initialState.piniaColada)
+    }
+  }
+}
+
+const piniaColadaOnRenderedHook: OnRenderedHook = async ({
+  app,
+  ssrContext
+}) => {
+  // SSR Server
+  if (ssrContext?.initialState && ssrContext.pinia) {
+    const { useQueryCache, serializeQueryCache } = await import('@pinia/colada')
+
+    // Delete to prevent Non-POJO error
+    if (ssrContext.initialState.pinia?._pc_query) {
+      delete ssrContext.initialState.pinia._pc_query
+    }
+    ssrContext.initialState.piniaColada = serializeQueryCache(
+      useQueryCache(ssrContext.pinia)
+    )
+  }
+}
+
+export const PiniaPlugin: VitrifyPlugin<PiniaPluginOptions> = async ({
+  ssr = false,
+  pwa = false,
+  options = {}
+}) => {
+  const onAppCreated = [piniaonAppCreated]
+  const onRendered = [piniaOnRenderedHook]
+  if (options.colada) {
+    onAppCreated.push(piniaColadaonAppCreated)
+    onRendered.push(piniaColadaOnRenderedHook)
+  }
+
+  return {
+    plugins: [],
+    config: {
+      vitrify: {
+        ssr: {
+          serverModules: ['@pinia/colada']
+        },
+        hooks: {
+          onAppCreated,
+          onRendered
+        }
+      }
+    }
+  }
+}