vitrify 0.22.0 → 0.24.0

package/src/node/index.ts

@@ -17,8 +17,7 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import { fileURLToPath } from 'url'
 import type {
   StaticImports,
-  BootFunction,
-  OnMountedHook,
+  OnAppMountedHook,
   VitrifyConfig,
   VitrifyConfigAsync,
   VitrifyCommands,
@@ -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 onMountedHooks: OnMountedHook[]
+  let onTemplateRenderedHooks: OnTemplateRenderedHook[]
+  let onAppMountedHooks: OnAppMountedHook[]
+  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 || []
-        onMountedHooks = config.vitrify?.hooks?.onMounted || []
+        onTemplateRenderedHooks =
+          config.vitrify?.hooks?.onTemplateRendered || []
+        onAppMountedHooks = config.vitrify?.hooks?.onAppMounted || []
+        onAppCreatedHooks = config.vitrify?.hooks?.onAppCreated || []
         onSetupFiles = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
@@ -389,12 +395,18 @@ export const baseConfig = async ({
           return `export const onBoot = [${onBootHooks
             .map((fn) => `${String(fn)}`)
             .join(', ')}]
-            export const onMounted = [${onMountedHooks
+            export const onAppMounted = [${onAppMountedHooks
               .map((fn) => `${String(fn)}`)
               .join(', ')}]
             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) => {
@@ -676,7 +688,7 @@ export const baseConfig = async ({
       alias
     },
     build: {
-      target: ssr === 'server' || ssr === 'fastify' ? 'esnext' : 'modules',
+      target: 'esnext',
       ssr: ssr === 'server' || ssr === 'fastify' ? true : false,
       ssrManifest: ssr === 'client' || ssr === 'ssg',
       rollupOptions
@@ -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,99 @@
+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 = async ({ 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, hydrateQueryCache, useQueryCache } = await import(
+      '@pinia/colada'
+    )
+    app.use(PiniaColada)
+
+    if (initialState?.piniaColada) {
+      app.runWithContext(() =>
+        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 = app.runWithContext(() =>
+      serializeQueryCache(useQueryCache())
+    )
+  }
+}
+
+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
+        }
+      }
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
-import type { Plugin } from 'vite'
 import { fileURLToPath } from 'url'
 import type {
   OnBootHook,
-  OnMountedHook,
+  OnAppMountedHook,
+  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 ({
@@ -136,8 +136,8 @@ export const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions> = async ({
             }
           })()
 
-          const onMountedHooks: OnMountedHook[] = [
-            async (instance) => {
+          const onAppMountedHooks: OnAppMountedHook[] = [
+            async ({ instance }) => {
               const {
                 proxy: { $q }
               } = instance
@@ -203,8 +203,8 @@ export const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions> = async ({
               },
               hooks: {
                 onBoot: onBootHooks,
-                onMounted: onMountedHooks,
-                onRendered: [injectSsrContext]
+                onAppMounted: onAppMountedHooks,
+                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,127 @@
 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 = (
+
+export type OnAppMountedHook = ({
+  instance
+}: {
   instance: ComponentInternalInstance
-) => Promise<void> | void
+}) => 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?: {
@@ -67,7 +146,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
        */
@@ -76,6 +155,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,16 +8,15 @@ import {
   onMounted as onMountedVue,
   getCurrentInstance
 } from 'vue'
-import { onBoot, onMounted } from 'virtual:vitrify-hooks'
-import * as staticImports from 'virtual:static-imports'
+import { onAppMounted } from 'virtual:vitrify-hooks'
 import App from 'src/App.vue'
 // import 'vitrify.sass'
 const instance = getCurrentInstance()
 const props = defineProps()
 
 onMountedVue(async () => {
-  for (let fn of onMounted) {
-    await fn(instance, staticImports)
+  for (let fn of onAppMounted) {
+    await fn({ instance })
   }
 })
 

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(