vitrify 0.21.0 → 0.23.0

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

@@ -0,0 +1,318 @@
+import { fileURLToPath } from 'url'
+import type {
+  OnBootHook,
+  OnMountedHook,
+  OnTemplateRenderedHook,
+  VitrifyConfig
+} from '../../vitrify-config.js'
+import type { VitrifyPlugin } from '../index.js'
+import { findDepPkgJsonPath } from 'vitefu'
+import {
+  type QuasarFonts,
+  type QuasarComponents,
+  type QuasarDirectives,
+  type QuasarIconSets,
+  type QuasarPlugins,
+  type GlobalQuasarIconMapFn,
+  type QuasarIconSet
+} from 'quasar'
+import { QuasarResolver } from 'unplugin-vue-components/resolvers'
+
+export interface QuasarPluginOptions {
+  framework: {
+    components?: (keyof QuasarComponents)[]
+    directives?: (keyof QuasarDirectives)[]
+    plugins?: (keyof QuasarPlugins)[]
+    lang?: string
+    iconSet?: QuasarIconSets | QuasarIconSet
+    iconMapFn?: GlobalQuasarIconMapFn
+  }
+  extras?: (QuasarIconSets | QuasarFonts)[]
+  disableSass?: boolean
+}
+
+export const injectSsrContext: OnTemplateRenderedHook = ({
+  html,
+  ssrContext
+}) =>
+  html
+    .replace(/(<html[^>]*)(>)/i, (found, start, end) => {
+      let matches
+
+      matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i)
+      if (matches) {
+        start = start.replace(matches[0], '')
+      }
+
+      matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i)
+      if (matches) {
+        start = start.replace(matches[0], '')
+      }
+
+      return `${start} ${ssrContext?._meta.htmlAttrs || ''} ${end}`
+    })
+    .replace(
+      /(<head[^>]*)(>)/i,
+      (_, start, end) => `${start}${end}${ssrContext?._meta.headTags || ''}`
+    )
+    .replace(
+      /(<\/head>)/i,
+      (_, tag) =>
+        `${ssrContext?._meta.resourceStyles || ''}${
+          ssrContext?._meta.endingHeadTags || ''
+        }${tag}`
+    )
+    .replace(/(<body[^>]*)(>)/i, (found, start, end) => {
+      let classes = ssrContext?._meta.bodyClasses || ''
+
+      const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i)
+
+      if (matches) {
+        if (matches[1].length > 0) {
+          classes += ` ${matches[1]}`
+        }
+        start = start.replace(matches[0], '')
+      }
+
+      return `${start} class="${classes.trim()}" ${
+        ssrContext?._meta.bodyAttrs || ''
+      }${end}${ssrContext?._meta.bodyTags || ''}`
+    })
+
+export const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions> = async ({
+  ssr = false,
+  pwa = false,
+  options
+}) => {
+  let plugins: string[] = []
+  const quasarConf: QuasarPluginOptions = options
+  return {
+    plugins: [
+      {
+        name: 'vite-plugin-quasar-transform',
+        enforce: 'pre',
+        transform: (code, id, options) => {
+          code = code
+            .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
+            .replaceAll(
+              '__QUASAR_SSR_SERVER__',
+              ssr ? '(import.meta.env.SSR === true)' : 'false'
+            )
+            .replaceAll(
+              '__QUASAR_SSR_CLIENT__',
+              ssr ? '(import.meta.env.SSR === false)' : 'false'
+            )
+            .replaceAll(
+              '__QUASAR_SSR_PWA__',
+              ssr && pwa ? '(import.meta.env.SSR === false)' : 'false'
+            )
+
+          return code
+        }
+      },
+      {
+        name: 'vite-plugin-quasar-setup',
+        enforce: 'pre',
+        config: async (config: VitrifyConfig, env): Promise<VitrifyConfig> => {
+          const { vitrify: { urls } = {} } = config
+
+          // if (quasar) quasarConf = quasar
+          if (!quasarConf.framework.lang && config.vitrify?.lang)
+            quasarConf.framework.lang = config.vitrify.lang
+
+          const globalCss = quasarConf?.extras?.map(
+            (extra) => `@quasar/extras/${extra}/${extra}.css`
+          )
+
+          const localPackages = ['@quasar/extras', 'quasar']
+          // const localPackages: string[] = []
+          await (async () => {
+            for (const val of localPackages) {
+              const pkgDir = await findDepPkgJsonPath(
+                val,
+                fileURLToPath(config.vitrify!.urls!.app!)
+              )
+              if (pkgDir) urls!.packages![val] = new URL(`file://${pkgDir}`)
+            }
+          })()
+
+          const onMountedHooks: OnMountedHook[] = [
+            async (instance) => {
+              const {
+                proxy: { $q }
+              } = instance
+              if ($q.onSSRHydrated !== void 0) $q.onSSRHydrated()
+            }
+          ]
+
+          const onBootHooks: OnBootHook[] = [
+            async ({ app, ssrContext, staticImports }) => {
+              // @ts-expect-error undefined
+              const quasarPlugins = await import('virtual:quasar-plugins')
+              // @ts-expect-error undefined
+              const directives = await import('virtual:quasar-directives')
+              // @ts-expect-error undefined
+              const { default: lang } = await import('virtual:quasar-lang')
+              const { default: iconSet } = await import(
+                // @ts-expect-error undefined
+                'virtual:quasar-iconSet'
+              )
+              const { default: iconMapFn } = await import(
+                // @ts-expect-error undefined
+                'virtual:quasar-iconMapFn'
+              )
+
+              app.use(
+                staticImports?.Quasar,
+                {
+                  plugins: quasarPlugins,
+                  directives,
+                  lang,
+                  iconSet,
+                  config: {
+                    iconMapFn
+                  }
+                },
+                ssrContext
+              )
+            }
+          ]
+
+          /**
+           * Importing package.json is problematic
+           */
+          const version = '?'
+
+          /**
+           * All components should have been auto-imported
+           */
+          if (quasarConf?.framework?.plugins) {
+            if (!quasarConf.framework) quasarConf.framework = {}
+            quasarConf.framework.plugins = [
+              ...new Set(quasarConf.framework.plugins)
+            ]
+            plugins = quasarConf?.framework.plugins
+          }
+
+          return {
+            vitrify: {
+              urls,
+              globalCss,
+              staticImports: {
+                quasar: ['Quasar']
+              },
+              hooks: {
+                onBoot: onBootHooks,
+                onMounted: onMountedHooks,
+                onTemplateRendered: [injectSsrContext]
+              },
+              sass: quasarConf.disableSass
+                ? undefined
+                : {
+                    global: ['quasar/src/css/index.sass']
+                  }
+            },
+            resolve: {
+              alias: [
+                {
+                  find: 'quasar/src/',
+                  replacement: fileURLToPath(
+                    new URL('./src/', config.vitrify!.urls!.packages!.quasar)
+                  )
+                }
+              ]
+            },
+            optimizeDeps: {
+              exclude: ['quasar']
+            },
+            define: {
+              __DEV__: process.env.NODE_ENV !== 'production' || true,
+              __QUASAR_VERSION__: `'${version}'`
+            },
+            ssr: {
+              noExternal: ['quasar']
+            }
+          }
+        }
+      },
+      {
+        name: 'quasar-virtual-modules',
+        enforce: 'pre',
+        config: async (config, env) => ({
+          resolve: {
+            alias: [
+              {
+                find: new RegExp('^quasar$'),
+                replacement: 'virtual:quasar'
+              }
+              // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
+            ]
+          }
+        }),
+        resolveId(id) {
+          switch (id) {
+            case 'virtual:quasar-plugins':
+              return 'virtual:quasar-plugins'
+            case 'virtual:quasar-directives':
+              return 'virtual:quasar-directives'
+            case 'virtual:quasar-lang':
+              return 'virtual:quasar-lang'
+            case 'virtual:quasar-iconSet':
+              return 'virtual:quasar-iconSet'
+            case 'virtual:quasar-iconMapFn':
+              return 'virtual:quasar-iconMapFn'
+            case 'virtual:quasar':
+              return { id: 'virtual:quasar', moduleSideEffects: false }
+            default:
+              return
+          }
+        },
+        load(id) {
+          if (id === 'virtual:quasar-plugins') {
+            return `export { ${plugins.join(',')} } from 'quasar'`
+          } else if (id === 'virtual:quasar-directives') {
+            return `export * from 'quasar/src/directives.js'`
+          } else if (id === 'virtual:quasar-lang') {
+            return `import lang from 'quasar/lang/${
+              quasarConf?.framework?.lang || 'en-US'
+            }';
+          export default lang`
+          } else if (id === 'virtual:quasar-iconSet') {
+            return `${
+              typeof quasarConf.framework.iconSet === 'string'
+                ? `import iconSet from 'quasar/icon-set/${
+                    quasarConf?.framework.iconSet || 'material-icons'
+                  }';
+          export default iconSet`
+                : `export default ${
+                    quasarConf.framework.iconSet
+                      ? JSON.stringify(quasarConf.framework.iconSet)
+                      : null
+                  }`
+            }`
+          } else if (id === 'virtual:quasar-iconMapFn') {
+            return `export default ${
+              quasarConf?.framework.iconMapFn?.toString() ?? null
+            }`
+          } else if (id === 'virtual:quasar') {
+            return `export * from 'quasar/src/plugins.js';
+          export * from 'quasar/src/components.js';
+          export * from 'quasar/src/composables.js';
+          export * from 'quasar/src/directives.js';
+          export * from 'quasar/src/utils.js';
+          export * from 'quasar/src/composables.js';
+          export { default as Quasar } from 'quasar/src/install-quasar.js'`
+          }
+          return null
+        }
+      }
+    ],
+    config: {
+      vitrify: {
+        unpluginVueComponents: {
+          resolvers: [QuasarResolver()]
+        }
+      }
+    }
+  }
+}

package/src/node/vitrify-config.ts

@@ -1,51 +1,133 @@
 import type { Alias, UserConfig as ViteUserConfig, ViteDevServer } from 'vite'
-import type { QuasarConf } from './plugins/quasar.js'
 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 { ComponentResolver } from 'unplugin-vue-components'
+import type { Options as unpluginVueComponentsOptions } from 'unplugin-vue-components'
 import type { UserConfig as UnoCSSUserConfig } from '@unocss/core'
+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?: {
     lang?: string
+    /**
+     * Vitrify plugins
+     */
+    plugins?: VitrifyPluginConfig[]
     /**
      * Global CSS imports
      */
@@ -71,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
@@ -118,8 +208,12 @@ export interface VitrifyConfig extends ViteUserConfig {
      * UnoCSS Configuration
      */
     unocss?: UnoCSSUserConfig
+    /**
+     * unplugin-vue-components configuration
+     */
+    unpluginVueComponents?: unpluginVueComponentsOptions
   }
-  quasar?: QuasarConf
+  // quasar?: QuasarConf
 }
 
 export type VitrifyCommands = 'build' | 'dev' | 'test'
@@ -135,4 +229,9 @@ export type VitrifyConfigAsync = ({
   command: VitrifyCommands
 }) => Promise<VitrifyConfig>
 
+type VitrifyPluginConfig = {
+  plugin: VitrifyPlugin<any>
+  options: any
+}
+
 export const defineConfig = (config: VitrifyConfig) => config

package/src/vite/fastify/server.ts

@@ -3,6 +3,9 @@ import { setup, vitrifyConfig } from './entry'
 
 const fastify = Fastify({
   logger: {
+    transport: {
+      target: '@fastify/one-line-logger'
+    },
     level: process.env.DEBUG ? 'debug' : 'info'
   },
   ...vitrifyConfig.vitrify?.ssr.fastify

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 }