vitrify 0.2.5 → 0.3.0

package/src/node/index.ts

@@ -2,7 +2,6 @@ import vuePlugin from '@vitejs/plugin-vue'
 import type { InlineConfig, UserConfig } from 'vite'
 import { mergeConfig } from 'vite'
 import { readFileSync } from 'fs'
-import { QuasarPlugin } from './plugins/quasar.js'
 import builtinModules from 'builtin-modules'
 import { resolve } from 'import-meta-resolve'
 import type {
@@ -10,11 +9,12 @@ import type {
   BootFunction,
   OnMountedHook,
   VitrifyConfig,
-  SsrFunction
+  OnRenderedHook,
+  OnBootHook,
+  OnSetupHook
 } from './vitrify-config.js'
 import type { VitrifyContext } from './bin/run.js'
 import type { VitrifyPlugin } from './plugins/index.js'
-import type { FastifyInstance } from 'fastify'
 import { getPkgJsonDir } from './app-urls.js'
 
 const serverModules = ['fastify', 'middie']
@@ -27,10 +27,7 @@ const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
 const manualChunks = ['prerender', 'fastify-ssr-plugin', 'server']
 
 export const VIRTUAL_MODULES = [
-  'virtual:fastify-setup',
-  'virtual:boot-functions',
-  'virtual:ssr-functions',
-  'virtual:on-mounted-hooks',
+  'virtual:vitrify-hooks',
   'virtual:global-css',
   'virtual:static-imports'
 ]
@@ -61,16 +58,8 @@ export const baseConfig = async ({
   const cwd = getCwd()
   const cliDir = getCliDir()
   const cliViteDir = getCliViteDir(cliDir)
-  // const {
-  //   appDir: tempAppDir,
-  //   cliDir,
-  //   cliViteDir,
-  //   srcDir
-  // } = await import('./app-urls.js')
-  // const cwd = appDir || tempAppDir
   const frameworkDir = new URL(`${framework}/`, cliViteDir)
 
-  // const localPackages = ['vue', 'vue-router', 'quasar']
   const localPackages = ['vue', 'vue-router']
   const cliPackages = ['vitest']
   const packageUrls: Record<string, URL> = {}
@@ -87,18 +76,6 @@ export const baseConfig = async ({
       )
   })()
 
-  // if (appDir) {
-  //   srcDir = new URL('src/', appDir);
-  //   quasarDir = new URL(await resolve('quasar/', appDir.href));
-  //   ({ appDir: cwd, cliDir } = await import('./app-urls.js'))
-  // } else {
-  //   ({ appDir, cliDir, srcDir, quasarDir } = await import('./app-urls.js'))
-  //   cwd = appDir
-  // }
-  // vueDir = new URL('./', await resolve('vue', appDir.href));
-  // vueRouterDir = new URL('../', await resolve('vue-router', appDir.href));
-  // vitestDir = new URL('../', await resolve('vitest', cliDir.href));
-
   if (!publicDir) publicDir = new URL('public/', appDir)
   /**
    * TODO:Perform some manual check if command is run inside a Quasar Project
@@ -124,9 +101,6 @@ export const baseConfig = async ({
     })
   )
 
-  const fastifySetup =
-    vitrifyConfig.vitrify?.fastify?.setup || ((fastify: FastifyInstance) => {})
-
   const ssrTransformCustomDir = () => {
     return {
       props: [],
@@ -147,9 +121,10 @@ export const baseConfig = async ({
     }
   }
 
-  let bootFunctions: BootFunction[]
-  let ssrFunctions: SsrFunction[]
+  let onBootHooks: OnBootHook[]
+  let onRenderedHooks: OnRenderedHook[]
   let onMountedHooks: OnMountedHook[]
+  let onSetupHooks: OnSetupHook[]
   let globalCss: string[]
   let staticImports: StaticImports
   let sassVariables: Record<string, string>
@@ -177,18 +152,14 @@ export const baseConfig = async ({
       }
     }),
     ...frameworkPlugins,
-    // await QuasarPlugin({
-    //   ssr: ssr,
-    //   pwa: pwa
-    //   // quasarDir: packageUrls.quasar
-    // }),
     {
       name: 'vitrify-setup',
       enforce: 'post',
       config: async (config: VitrifyConfig, env) => {
-        bootFunctions = config.vitrify?.bootFunctions || []
-        ssrFunctions = config.vitrify?.ssrFunctions || []
+        onBootHooks = config.vitrify?.hooks?.onBoot || []
+        onRenderedHooks = config.vitrify?.hooks?.onRendered || []
         onMountedHooks = config.vitrify?.hooks?.onMounted || []
+        onSetupHooks = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
         sassVariables = config.vitrify?.sass?.variables || {}
@@ -221,20 +192,19 @@ export const baseConfig = async ({
         return
       },
       load(id) {
-        if (id === 'virtual:fastify-setup') {
-          return `export const setup = ${String(fastifySetup)}`
-        } else if (id === 'virtual:boot-functions') {
-          return `export default [${bootFunctions
-            .map((fn) => `${String(fn)}`)
-            .join(', ')}]`
-        } else if (id === 'virtual:ssr-functions') {
-          return `export default [${ssrFunctions
-            .map((fn) => `${String(fn)}`)
-            .join(', ')}]`
-        } else if (id === 'virtual:on-mounted-hooks') {
-          return `export default [${onMountedHooks
+        if (id === 'virtual:vitrify-hooks') {
+          return `export const onBoot = [${onBootHooks
             .map((fn) => `${String(fn)}`)
-            .join(', ')}]`
+            .join(', ')}]
+            export const onMounted = [${onMountedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
+            export const onRendered = [${onRenderedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
+            export const onSetup = [${onSetupHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]`
         } else if (id === 'virtual:global-css') {
           return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
         } else if (id === 'virtual:static-imports') {
@@ -307,9 +277,6 @@ export const baseConfig = async ({
     { find: 'cwd', replacement: cwd.pathname },
     { find: 'boot', replacement: new URL('boot/', srcDir).pathname },
     { find: 'assets', replacement: new URL('assets/', srcDir).pathname },
-    // ...Object.entries(packageUrls).map(([key, value]) => ({
-    //   find: key, replacement: value.pathname
-    // })),
     { find: 'vue', replacement: packageUrls['vue'].pathname },
     { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
     { find: 'vitrify', replacement: cliDir.pathname }
@@ -326,7 +293,6 @@ export const baseConfig = async ({
     vitrify: {
       productName,
       urls: {
-        // @ts-ignore
         app: appDir,
         cli: cliDir,
         src: srcDir,
@@ -380,13 +346,6 @@ export const baseConfig = async ({
               }
             }
     },
-    // css: {
-    //   preprocessorOptions: {
-    //     sass: {
-    //       additionalData: sass ? [...sass].join('\n') : undefined
-    //     }
-    //   }
-    // },
     ssr: {
       // Create a SSR bundle
       noExternal: [

package/src/node/plugins/quasar.ts

@@ -4,6 +4,7 @@ import Components from 'unplugin-vue-components/vite'
 // import { prepareQuasarConf } from './quasar-conf-file.js'
 import type {
   BootFunction,
+  OnBootHook,
   OnMountedHook,
   VitrifyConfig
 } from '../vitrify-config.js'
@@ -75,43 +76,12 @@ export const injectSsrContext = (
       }${end}${ssrContext._meta.bodyTags || ''}`
     })
 
-// export interface Configuration {
-//   ssr?: 'server' | 'client' | 'ssg' | false
-// }
-
 export const QuasarPlugin: VitrifyPlugin = async ({
   ssr = false,
   pwa = false
 }): Promise<Plugin[]> => {
-  // const extraPlugins: Plugin[] = []
-  // const ctx = {
-  //   prod: process.env.MODE === 'production',
-  //   dev: process.env.MODE === 'development',
-  //   mode: {
-  //     ssr: !!ssr,
-  //     pwa: !!pwa
-  //   }
-  // }
-
-  // let bootFilePaths: Record<string, any> = {}
-  // let components: string[] = []
   let plugins: string[] = []
-  // let css: string[] = []
-  let extras: string[] = []
   return [
-    // {
-    //   name: 'legacy-support',
-    //   enforce: 'pre',
-    //   transform (code, id) {
-    //     /**
-    //      * ESM does not resolve an import to .default when there are multiple exports. The following is required to make the VuePlugin import of QCalendar work.
-    //      */
-    //     if (code.includes('app.use(VuePlugin)')) {
-    //       code = code.replace(/app\.use\(VuePlugin\)/g, `app.use(VuePlugin.install ? VuePlugin : VuePlugin.default)`)
-    //     }
-    //     return code
-    //   }
-    // },
     Components({
       resolvers: [QuasarResolver()]
     }),
@@ -143,10 +113,8 @@ export const QuasarPlugin: VitrifyPlugin = async ({
           }
         ]
 
-        const bootFunctions: BootFunction[] = [
+        const onBootHooks: OnBootHook[] = [
           async ({ app, ssrContext, staticImports }) => {
-            // @ts-ignore
-            // const quasarVuePlugin = (await import('quasar/vue-plugin')).default
             // @ts-ignore
             const quasarPlugins = await import('virtual:quasar-plugins')
             // @ts-ignore
@@ -166,14 +134,14 @@ export const QuasarPlugin: VitrifyPlugin = async ({
         return {
           vitrify: {
             urls,
-            bootFunctions,
-            ssrFunctions: [injectSsrContext],
             globalCss,
             staticImports: {
               quasar: ['Quasar']
             },
             hooks: {
-              onMounted: onMountedHooks
+              onBoot: onBootHooks,
+              onMounted: onMountedHooks,
+              onRendered: [injectSsrContext]
             },
             sass: {
               additionalData: [`@import 'quasar/src/css/index.sass'`]
@@ -185,22 +153,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
     {
       name: 'vite-plugin-quasar',
       enforce: 'post',
-      // transformIndexHtml: {
-      //   enforce: 'post',
-      //   transform: (html) => {
-      //     return html.replace(
-      //       '<!--product-name-->',
-      //       productName
-      //     )
-      //   }
-      // },
       config: async (config: VitrifyConfig, env) => {
-        // let appDir: URL
-        // let cliDir: URL
-        // let cwd: URL
-        // let quasarDir: URL
-        // let quasarConf: QuasarConf | undefined
-
         const { quasar: quasarConf, vitrify: { urls } = {} } = config
 
         const quasarPkgJsonPath = new URL(
@@ -211,33 +164,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
           readFileSync(quasarPkgJsonPath, { encoding: 'utf-8' })
         )
 
-        // if (quasarConf?.boot) {
-        //   bootFilePaths = (quasarConf.boot as (Record<string, any> | string)[])
-        //     .filter(entry => {
-        //       if (typeof entry === 'object') return (entry.server && (ssr === 'server'))
-        //       else if (entry !== '') return true
-        //     })
-        //     .map(entry => {
-        //       if (typeof entry === 'string') return entry
-        //       else if (typeof entry === 'object') return entry.path
-        //     })
-        //     .reduce((acc, entry) => {
-        //       if (entry[0] === '~') {
-        //         const split = entry.substring(1).split('/')
-        //         const name = split[0].replace(/[|&;$%@"<>()+,]/g, "");
-        //         acc[name] = {
-        //           path: new URL(`node_modules/${entry.substring(1)}`, urls?.app).pathname
-        //         }
-        //       } else {
-        //         const name = entry.split('.')[0]
-        //         acc[name] = {
-        //           path: `src/boot/${entry}`
-        //         }
-        //       }
-        //       return acc
-        //     }, {})
-        // }
-
         /**
          * All components should have been auto-imported
          */
@@ -249,14 +175,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
           plugins = quasarConf?.framework.plugins
         }
 
-        // css = (quasarConf?.css || []).map((v => {
-        //   if (v[0] === '~') {
-        //     return v.slice(1)
-        //   }
-        //   return v
-        // })).map((v) => `@import '${v}'`)
-        extras = quasarConf?.extras || []
-
         return {
           resolve: {
             alias: [
@@ -302,11 +220,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
                 find: 'quasar/src',
                 replacement: new URL('src/', urls?.packages?.quasar).pathname
               },
-              // ...extras.map(extra => ({
-              //   find: `@quasar/extras/${extra}/${extra}.css`,
-              //   replacement: new URL(`${extra}/${extra}.css`, urls?.packages?.['@quasar/extras']).pathname
-              // })
-              // ),
               {
                 find: 'quasar',
                 replacement: new URL('src/', urls?.packages?.quasar).pathname
@@ -316,8 +229,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
                 replacement: new URL('.', urls?.packages?.['@quasar/extras'])
                   .pathname
               }
-              // { find: new RegExp('^quasar$'), replacement: new URL('src/index.all.js', urls?.packages?.quasar).pathname },
-              // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' },
             ]
           },
           define: {
@@ -328,19 +239,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
             __QUASAR_SSR_CLIENT__: ssr === 'client',
             __QUASAR_SSR_PWA__: ssr === 'client' && pwa
           },
-          // css: {
-          //   preprocessorOptions: {
-          //     sass: {
-          //       additionalData: `@import 'quasar/src/css/index.sass'`
-          //       // [
-          //       //   // ...extras.map(extra => `@import "@quasar/extras/${extra}/${extra}.css"`),
-          //       //   // ...extras.map(extra => `@import ${new URL(`${extra}/${extra}.css`, urls?.packages?.['@quasar/extras']).pathname}`) || [],
-          //       //   // config.css?.preprocessorOptions?.sass?.additionalData,
-          //       //   `@import 'quasar/src/css/index.sass'`
-          //       // ].join('\n')
-          //     }
-          //   }
-          // },
           ssr: {
             noExternal: ['quasar']
           }

package/src/node/vitrify-config.ts

@@ -12,6 +12,15 @@ export type BootFunction = ({
   ssrContext: Record<string, unknown>
   staticImports: Record<string, any>
 }) => Promise<void> | void
+export type OnBootHook = ({
+  app,
+  ssrContext,
+  staticImports
+}: {
+  app: any
+  ssrContext: Record<string, unknown>
+  staticImports: Record<string, any>
+}) => Promise<void> | void
 export type OnMountedHook = (
   instance: ComponentInternalInstance
 ) => Promise<void> | void
@@ -20,6 +29,11 @@ export type SsrFunction = (
   html: string,
   ssrContext: Record<string, any>
 ) => string
+export type OnRenderedHook = (
+  html: string,
+  ssrContext: Record<string, any>
+) => string
+export type OnSetupHook = (fastify: FastifyInstance) => any
 
 export interface VitrifyConfig extends UserConfig {
   vitrify?: {
@@ -27,23 +41,27 @@ export interface VitrifyConfig extends UserConfig {
      * Global CSS imports
      */
     globalCss?: string[]
-    /**
-     * Functions which run after initializing the app
-     */
-    bootFunctions?: BootFunction[]
-    /**
-     * Functions which run on the server after rendering the app
-     */
-    ssrFunctions?: SsrFunction[]
     /**
      * Static imports in the app: packageName: [imports]
      */
     staticImports?: StaticImports
     hooks?: {
+      /**
+       * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.
+       */
+      onSetup?: OnSetupHook[]
       /**
        * Functions which run in the onMounted hook of the app
        */
-      onMounted: OnMountedHook[]
+      onMounted?: OnMountedHook[]
+      /**
+       * Functions which run after initializing the app
+       */
+      onBoot?: OnBootHook[]
+      /**
+       * Functions which run after rendering the app (SSR)
+       */
+      onRendered?: OnRenderedHook[]
     }
     /**
      * Global SASS variables
@@ -52,12 +70,6 @@ export interface VitrifyConfig extends UserConfig {
       variables?: Record<string, string>
       additionalData?: string[]
     }
-    fastify?: {
-      /**
-       * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.
-       */
-      setup: (fastify: FastifyInstance) => any
-    }
     /**
      * Product name of the application. Will be used for the HTML title tag
      */

package/src/vite/vue/main.ts

@@ -4,16 +4,10 @@ import {
   createSSRApp,
   createApp as createVueApp,
   h,
-  onMounted,
+  onMounted as onMountedVue,
   getCurrentInstance
 } from 'vue'
-// import { Quasar, useQuasar } from 'quasar'
-// import quasarPlugins from 'virtual:quasar-plugins'
-// import bootFunctions from 'virtual:quasar-boot'
-import bootFunctions from 'virtual:boot-functions'
-import onMountedHooks from 'virtual:on-mounted-hooks'
-// import 'virtual:quasar-extras'
-// import * as directives from 'quasar/directives'
+import { onBoot, onMounted } from 'virtual:vitrify-hooks'
 import routes from 'src/router/routes'
 import 'virtual:global-css'
 import * as staticImports from 'virtual:static-imports'
@@ -34,13 +28,10 @@ export async function createApp(
     setup(props) {
       const instance = getCurrentInstance()
 
-      onMounted(async () => {
-        for (let fn of onMountedHooks) {
+      onMountedVue(async () => {
+        for (let fn of onMounted) {
           await fn(instance, staticImports)
         }
-        // onAppMounted()
-        // const { proxy: { $q } } = getCurrentInstance()
-        // $q.onSSRHydrated !== void 0 && $q.onSSRHydrated()
       })
 
       return () => h(App, props)
@@ -63,11 +54,6 @@ export async function createApp(
     next()
   })
 
-  // app.use(Quasar, {
-  //   plugins: quasarPlugins,
-  //   directives
-  // }, ssrContext)
-
   let provide: Record<string, unknown> = {}
   if (import.meta.env.SSR) {
     if (ssrContext?.provide) {
@@ -81,7 +67,7 @@ export async function createApp(
     app.provide(key, provide[key])
   }
 
-  for (let fn of bootFunctions) {
+  for (let fn of onBoot) {
     await fn({ app, ssrContext, staticImports })
   }
 

package/src/vite/vue/ssr/fastify-ssr-plugin.ts

@@ -1,120 +1,4 @@
 import { fastifySsrPlugin } from '../../../node/frameworks/vue/fastify-ssr-plugin.js'
-import ssrFunctions from 'virtual:ssr-functions'
+import { onRendered } from 'virtual:vitrify-hooks'
 
-export { fastifySsrPlugin, ssrFunctions }
-
-// import { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify'
-// import fastifyStatic from 'fastify-static'
-// import { readFileSync } from 'fs'
-// import { injectSsrContext } from '../../node/helpers/ssr.js'
-// import type { ViteDevServer } from 'vite'
-
-// export interface FastifySsrOptions {
-//   baseUrl?: string
-//   provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>
-//   vite?: ViteDevServer
-//   cliDir?: URL
-//   appDir?: URL
-//   productName?: string
-// }
-
-// const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (fastify, options, done) => {
-//   if (import.meta.env.MODE === 'development') {
-//     if (!options.vite) throw new Error('Option vite cannot be undefined')
-//     const middie = (await import('middie')).default
-//     await fastify.register(middie)
-//     fastify.use(options.vite.middlewares)
-
-//     fastify.get('*', async (req, res) => {
-//       try {
-//         // const url = req.originalUrl
-//         const url = req.raw.url
-//         let template
-//         let render
-//         const ssrContext = {
-//           req,
-//           res
-//         }
-//         // always read fresh template in dev
-//         // template = readFileSync(resolve('index.html'), 'utf-8')
-//         template = readFileSync(new URL('index.html', options.cliDir)).toString()
-
-//         // template = await vite.transformIndexHtml(url, template)
-//         const entryUrl = new URL('ssr/entry-server.ts', options.cliDir).pathname
-//         render = (await options.vite!.ssrLoadModule(entryUrl)).render
-//         let manifest
-//         // TODO: https://github.com/vitejs/vite/issues/2282
-//         try {
-//           manifest = {}
-//         } catch (e) {
-//           manifest = {}
-//         }
-
-//         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-//         const html = template
-//           .replace(`<!--preload-links-->`, preloadLinks)
-//           .replace(`<!--app-html-->`, appHtml)
-//           .replace('<!--product-name-->', options.productName || 'Product name')
-
-//         res.code(200)
-//         res.type('text/html')
-//         res.send(html)
-//         // res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
-//       } catch (e: any) {
-//         console.error(e.stack)
-//         options.vite && options.vite.ssrFixStacktrace(e)
-//         res.code(500)
-//         res.send(e.stack)
-//       }
-//     })
-//   } else {
-//     options.baseUrl = options.baseUrl || '/'
-//     fastify.register(fastifyStatic, {
-//       root: new URL('./dist/ssr/client', options.appDir).pathname,
-//       wildcard: false,
-//       index: false,
-//       prefix: options.baseUrl
-//     })
-
-//     fastify.get(`${options.baseUrl}*`, async (req, res) => {
-//       const url = req.raw.url
-//       const provide = options.provide ? await options.provide(req, res) : {}
-//       let template
-//       let render
-//       let manifest
-//       const ssrContext: Record<string, any> = {
-//         req,
-//         res,
-//         provide
-//       }
-
-//       // template = readFileSync(new URL('../client/index.html', import.meta.url).pathname).toString()
-//       // manifest = JSON.parse(readFileSync(new URL('../client/ssr-manifest.json', import.meta.url)).toString())
-//       // render = (await import(new URL('./entry-server.mjs', import.meta.url).pathname)).render
-//       template = readFileSync(new URL('./dist/ssr/client/index.html', options.appDir).pathname).toString()
-//       manifest = JSON.parse(readFileSync(new URL('./dist/ssr/client/ssr-manifest.json', options.appDir)).toString())
-//       render = (await import(new URL('./dist/ssr/server/entry-server.mjs', options.appDir).pathname)).render
-
-//       const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-
-//       if (!ssrContext.initialState) ssrContext.initialState = {}
-//       ssrContext.initialState.provide = provide
-
-//       let html = template
-//         .replace(`<!--preload-links-->`, preloadLinks)
-//         .replace(`<!--app-html-->`, appHtml)
-//       html = injectSsrContext(html, ssrContext)
-
-//       res.code(200)
-//       res.type('text/html')
-//       res.send(html)
-//     })
-//   }
-
-//   done()
-
-// }
-
-// export {
-//   fastifySsrPlugin
-// }
+export { fastifySsrPlugin, onRendered }

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

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

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

@@ -1,7 +1,7 @@
 import { createApp } from '../../../node/frameworks/vue/server.js'
 import { getAppDir } from '../../../node/app-urls.js'
-import { setup } from 'virtual:fastify-setup'
-import ssrFunctions from 'virtual:ssr-functions'
+// import { setup } from 'virtual:fastify-setup'
+import { onRendered, setup } from 'virtual:vitrify-hooks'
 
 // const appDir = getPkgJsonDir(import.meta.url)
 const getString = (str?: string) => str
@@ -12,7 +12,7 @@ const app = createApp({
   setup,
   appDir,
   baseUrl,
-  ssrFunctions
+  onRendered
 })
 
 app.listen(process.env.PORT || 3000, process.env.HOST || '127.0.0.1')