vitrify 0.21.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
@@ -30,9 +30,13 @@
     "./client": {
       "types": "./client.d.ts"
     },
-    "./unocss/quasar/styles": {
-      "types": "./dist/types/plugins/quasar/unocss/styles/index.d.ts",
-      "import": "./dist/plugins/quasar/unocss/styles/index.js"
+    "./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": {
@@ -49,60 +53,68 @@
   "homepage": "https://github.com/simsustech/vitrify/tree/main/#readme",
   "dependencies": {
     "@fastify/middie": "^9.0.3",
-    "@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/one-line-logger": "^2.0.2",
+    "@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'
@@ -49,8 +52,6 @@ export async function createVitrifyDevServer({
     '../app-urls.js'
   )
 
-  const cliDir = getCliDir()
-
   if (!appDir) appDir = getAppDir()
   let config: InlineConfig = {}
   let ssrMode: 'server' | 'fastify' | undefined
@@ -66,52 +67,32 @@ export async function createVitrifyDevServer({
     base
   })
 
-  config.logLevel = logLevel
-
-  config.define = {
-    ...config.define,
-    __HOST__: `'${host}'`
-  }
-
   const wsPort = await getFirstOpenPort(24678)
   if (config.server?.https) {
     exitLogs.push(
       `[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`
     )
   }
-  config.server = {
-    https: config.server?.https,
-    hmr: {
-      protocol: config.server?.https ? 'wss' : 'ws',
-      port: wsPort
-    },
-    port,
-    // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
-    middlewareMode: ssr ? true : false,
-    fs: {
-      strict: false, // https://github.com/vitejs/vite/issues/8175
-      allow: [
-        searchForWorkspaceRoot(process.cwd()),
-        searchForWorkspaceRoot(fileURLToPath(appDir)),
-        searchForWorkspaceRoot(fileURLToPath(cliDir)),
-        fileURLToPath(appDir)
-      ]
-    },
-    watch: {
-      // During tests we edit the files too fast and sometimes chokidar
-      // misses change events, so enforce polling for consistency
-      usePolling: true,
-      interval: 100
-    },
-    host
-  }
-  if (ssr) config.appType = 'custom'
 
   const vitrifyDevServer = await (
     await import('vite')
   ).createServer({
     configFile: false,
-    ...config
+    ...config,
+    logLevel,
+    define: {
+      ...config.define,
+      __HOST__: `'${host}'`
+    },
+    server: {
+      ...config.server,
+      host,
+      port,
+      hmr: {
+        protocol: config.server?.https ? 'wss' : 'ws',
+        port: wsPort
+      }
+    }
   })
 
   return vitrifyDevServer
@@ -160,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'}`)
@@ -170,9 +151,17 @@ export async function createServer({
         ? fileURLToPath(new URL('src/vite/fastify/entry.ts', cliDir))
         : fileURLToPath(new URL(`src/vite/${framework}/ssr/app.ts`, cliDir))
 
-    ;({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl))
+    const environment = vite.environments.ssr
+    ;({ setup, onTemplateRendered, vitrifyConfig } =
+      // @ts-expect-error missing types
+      await environment.runner.import(entryUrl))
+    // console.log(module)
+    // ;({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl))
     app = fastify({
       logger: {
+        transport: {
+          target: '@fastify/one-line-logger'
+        },
         level: process.env.DEBUG
           ? 'debug'
           : process.env.PINO_LOG_LEVEL || 'info'
@@ -191,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
@@ -79,7 +86,10 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
         const entryUrl = fileURLToPath(
           new URL('ssr/entry-server.ts', frameworkDir)
         )
-        const render = (await vite!.ssrLoadModule(entryUrl)).render
+        const environment = vite.environments.ssr
+        // @ts-expect-error missing type
+        const { render } = await environment.runner.import(entryUrl)
+        // const render = (await vite!.ssrLoadModule(entryUrl)).render
         let manifest
         // TODO: https://github.com/vitejs/vite/issues/2282
         try {
@@ -89,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
@@ -124,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
@@ -165,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({
@@ -202,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 })
     }
   }
 
@@ -226,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') {
@@ -251,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,11 +22,15 @@ export const createApp = ({
   baseUrl?: string
   fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
   onRendered?: OnRenderedHook[]
+  onTemplateRendered?: OnTemplateRenderedHook[]
   vitrifyDir?: URL
   mode: string
 }) => {
   const app = fastify({
     logger: {
+      transport: {
+        target: '@fastify/one-line-logger'
+      },
       level: process.env.DEBUG ? 'debug' : process.env.PINO_LOG_LEVEL || 'info'
     }
   })
@@ -32,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
+}