vitrify 0.22.0 → 0.23.0

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

@@ -1,8 +1,8 @@
-import type { Plugin } from 'vite'
 import { fileURLToPath } from 'url'
 import type {
   OnBootHook,
   OnMountedHook,
+  OnTemplateRenderedHook,
   VitrifyConfig
 } from '../../vitrify-config.js'
 import type { VitrifyPlugin } from '../index.js'
@@ -31,10 +31,10 @@ export interface QuasarPluginOptions {
   disableSass?: boolean
 }
 
-export const injectSsrContext = (
-  html: string,
-  ssrContext: Record<string, any>
-) =>
+export const injectSsrContext: OnTemplateRenderedHook = ({
+  html,
+  ssrContext
+}) =>
   html
     .replace(/(<html[^>]*)(>)/i, (found, start, end) => {
       let matches
@@ -49,21 +49,21 @@ export const injectSsrContext = (
         start = start.replace(matches[0], '')
       }
 
-      return `${start} ${ssrContext._meta.htmlAttrs || ''} ${end}`
+      return `${start} ${ssrContext?._meta.htmlAttrs || ''} ${end}`
     })
     .replace(
       /(<head[^>]*)(>)/i,
-      (_, start, end) => `${start}${end}${ssrContext._meta.headTags || ''}`
+      (_, start, end) => `${start}${end}${ssrContext?._meta.headTags || ''}`
     )
     .replace(
       /(<\/head>)/i,
       (_, tag) =>
-        `${ssrContext._meta.resourceStyles || ''}${
-          ssrContext._meta.endingHeadTags || ''
+        `${ssrContext?._meta.resourceStyles || ''}${
+          ssrContext?._meta.endingHeadTags || ''
         }${tag}`
     )
     .replace(/(<body[^>]*)(>)/i, (found, start, end) => {
-      let classes = ssrContext._meta.bodyClasses || ''
+      let classes = ssrContext?._meta.bodyClasses || ''
 
       const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i)
 
@@ -75,8 +75,8 @@ export const injectSsrContext = (
       }
 
       return `${start} class="${classes.trim()}" ${
-        ssrContext._meta.bodyAttrs || ''
-      }${end}${ssrContext._meta.bodyTags || ''}`
+        ssrContext?._meta.bodyAttrs || ''
+      }${end}${ssrContext?._meta.bodyTags || ''}`
     })
 
 export const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions> = async ({
@@ -204,7 +204,7 @@ export const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions> = async ({
               hooks: {
                 onBoot: onBootHooks,
                 onMounted: onMountedHooks,
-                onRendered: [injectSsrContext]
+                onTemplateRendered: [injectSsrContext]
               },
               sass: quasarConf.disableSass
                 ? undefined
@@ -316,5 +316,3 @@ export const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions> = async ({
     }
   }
 }
-
-export default QuasarPlugin

package/src/node/vitrify-config.ts

@@ -1,48 +1,125 @@
 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'
+import type { Pinia } from 'pinia'
+import type { _UseQueryEntryNodeValueSerialized } from '@pinia/colada/index.js'
 
-export type BootFunction = ({
+export type SSRContext = {
+  // Quasar requires req and res on SSRContext instead of request and reply
+  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
+  // Quasar internals
+  _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,
-  ssrContext,
-  staticImports
+  router,
+  ctx,
+  initialState,
+  ssrContext
 }: {
-  app: any
-  ssrContext: Record<string, unknown>
-  staticImports: Record<string, any>
+  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 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?: {
@@ -76,6 +153,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/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'

package/src/vite/vue/main.ts

@@ -1,14 +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, onAppCreated } 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'
-interface ssrContext {
-  provide?: Record<string, unknown>
-  [key: string]: unknown
+import { parse } from 'devalue'
+import type { SSRContext } from '../../node/vitrify-config'
+import type { Pinia } from 'pinia'
+
+declare global {
+  interface Window {
+    __INITIAL_STATE__: any
+  }
 }
 
 function capitalizeFirstLetter(string: string) {
@@ -17,18 +21,58 @@ function capitalizeFirstLetter(string: string) {
 
 export async function createApp(
   ssr?: 'client' | 'server',
-  ssrContext?: ssrContext
+  ssrContext?: SSRContext
 ) {
-  let app
+  let initialState: Record<string, any> | null = null
+
+  if (!import.meta.env.SSR && window?.__INITIAL_STATE__) {
+    initialState = window.__INITIAL_STATE__
+
+    for (const key in initialState) {
+      if (key === 'provide' || key === 'piniaColada') {
+        initialState[key] = JSON.parse(initialState[key])
+      } else {
+        initialState[key] = parse(initialState[key], {
+          PiniaColada_TreeMapNode: (data) => data
+        })
+      }
+    }
+  }
+
+  // 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
+  const ctx: {
+    pinia?: Pinia
+    [key: string]: unknown
+  } = {}
 
   if (ssr) {
     app = createSSRApp(RootComponent)
   } else {
     app = createVueApp(RootComponent)
   }
+
   const router = createRouter()
   app.use(router)
 
+  for (const fn of onAppCreated) {
+    await fn({ app, router, ctx, initialState, ssrContext })
+  }
+
   // Workaround to fix hydration errors when serving html files directly
   router.beforeEach((to, from, next) => {
     if (to.path.endsWith('.html')) {
@@ -38,20 +82,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)

package/src/vite/vue/ssr/app.ts

@@ -1,6 +1,6 @@
 import { createApp } from '../../../node/frameworks/vue/server.js'
 import { getAppDir } from '../../../node/app-urls.js'
-import { onSetup, onRendered } from 'virtual:vitrify-hooks'
+import { onSetup, onRendered, onTemplateRendered } from 'virtual:vitrify-hooks'
 import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
 
 const getString = (str?: string) => str
@@ -14,9 +14,10 @@ export const setupApp = async () => {
     baseUrl,
     fastifyPlugin: fastifySsrPlugin,
     onRendered,
+    onTemplateRendered,
     mode: import.meta.env.MODE
   })
 }
 
 export { default as vitrifyConfig } from 'virtual:vitrify-config'
-export { onRendered }
+export { onRendered, onTemplateRendered }

package/src/vite/vue/ssr/entry-server.ts

@@ -1,28 +1,10 @@
-import { type FastifyReply, type FastifyRequest } from 'fastify'
 import { createApp } from '../main.js'
-import { renderToString as renderToStringVue } from 'vue/server-renderer'
-
-const initializeApp = async (
-  url: string,
-  ssrContext: Record<string, unknown>
-) => {
-  const onRenderedList: (() => unknown)[] = []
-  Object.assign(ssrContext, {
-    _modules: new Set(),
-    _meta: {},
-    onRendered: (fn: () => unknown) => {
-      onRenderedList.push(fn)
-    }
-  })
+import type { Render, SSRContext } from '../../../node/vitrify-config.js'
 
+const initializeApp = async (url: string, ssrContext: SSRContext) => {
   const { app, router, routes } = await createApp('server', ssrContext)
 
   router.push({ path: url })
-  ssrContext.initialState = {}
-
-  onRenderedList.forEach((fn) => {
-    fn()
-  })
 
   await router.isReady()
 
@@ -33,36 +15,35 @@ export const getRoutes = async () =>
   (
     await initializeApp('/', {
       req: { headers: {}, url: '/' },
-      res: {}
+      res: {},
+      provide: {},
+      initialState: {},
+      onTemplateRenderedInternal: [],
+      _modules: new Set(),
+      _meta: {},
+      __qMetaList: [],
+      onRenderedList: [],
+      onRendered: (fn: () => unknown) => {
+        return
+      }
     })
   ).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)
 
-  const ctx: {
-    modules?: Map<unknown, unknown>
-    transports?: Record<string, unknown>
-    __qMetaList: unknown[]
-  } = {
-    __qMetaList: []
-  }
-  const html = await renderToString(app, ctx)
+  const html = await renderToString(app, ssrContext)
 
-  const preloadLinks = renderPreloadLinks(ctx.modules!, manifest)
+  const preloadLinks = renderPreloadLinks(ssrContext.modules!, manifest)
 
-  return [html, preloadLinks]
+  return { html, preloadLinks, app }
 }
 
 function renderPreloadLinks(

package/src/vite/vue/ssr/prerender.ts

@@ -1,4 +1,4 @@
 import { prerender } from '../../../node/frameworks/vue/prerender.js'
-import { onRendered } from 'virtual:vitrify-hooks'
+import { onTemplateRendered } from 'virtual:vitrify-hooks'
 
-export { prerender, onRendered }
+export { prerender, onTemplateRendered }