vitrify 0.2.4 → 0.4.0

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,17 +113,15 @@ 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
             const directives = await import('quasar/src/directives.js')
 
             app.use(
-              staticImports.Quasar,
+              staticImports?.Quasar,
               {
                 plugins: quasarPlugins,
                 directives
@@ -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,22 +220,20 @@ 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
+                find: new RegExp('^quasar$'),
+                replacement: new URL('src/index.all.js', urls?.packages?.quasar)
+                  .pathname
               },
+              // {
+              //   find: 'quasar',
+              //   replacement: new URL('src/index.all.js', urls?.packages?.quasar).pathname
+              // },
               {
                 find: `@quasar/extras`,
                 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 +244,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']
           }
@@ -353,7 +256,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
       config: async (config, env) => ({
         resolve: {
           alias: [
-            { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
+            // { find: new RegExp('^quasar$'), replacement: 'virtual: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,30 +29,42 @@ 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,
+//   staticImports?: Record<string, any>
+// ) => any
+export type OnSetupFile = URL
 export interface VitrifyConfig extends UserConfig {
   vitrify?: {
     /**
      * 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?: OnSetupFile[]
       /**
        * 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 +73,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/fastify/entry.ts

@@ -0,0 +1,11 @@
+import type { FastifyInstance } from 'fastify'
+import { onSetup } from 'virtual:vitrify-hooks'
+
+export const setup = async ({ fastify }: { fastify: FastifyInstance }) => {
+  if (onSetup?.length) {
+    for (const setup of onSetup) {
+      await setup(fastify)
+    }
+  }
+  return fastify
+}

package/src/vite/fastify/server.ts

@@ -0,0 +1,10 @@
+import Fastify from 'fastify'
+import { setup } from './entry'
+
+const fastify = Fastify()
+await setup({ fastify })
+
+fastify.listen({
+  port: Number(process.env.PORT || 3000),
+  host: process.env.HOST || '127.0.0.1'
+})

package/src/vite/vue/index.html

@@ -10,6 +10,7 @@
   <body>
     <!-- Do not add whitespace or newlines to #app, this will cause hydration errors -->
     <div id="app"><!--app-html--></div>
+    <!--dev-ssr-css-->
     <!--entry-script-->
     <!--initial-state-->
   </body>

package/src/vite/vue/main.ts

@@ -4,18 +4,11 @@ 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'
 
 interface ssrContext {
@@ -34,13 +27,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 +53,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 +66,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/app.ts

@@ -0,0 +1,25 @@
+import { createApp } from '../../../node/frameworks/vue/server.js'
+import { getAppDir } from '../../../node/app-urls.js'
+// import { setup } from 'virtual:fastify-setup'
+import { onRendered, onSetup } from 'virtual:vitrify-hooks'
+import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
+import type { ViteDevServer } from 'vite'
+import * as imr from 'import-meta-resolve'
+const { resolve } = imr
+// const appDir = getPkgJsonDir(import.meta.url)
+const getString = (str?: string) => str
+let baseUrl = getString(__BASE_URL__)
+const appDir = getAppDir()
+
+export const setupApp = async () => {
+  const vitrifyDir = new URL('../', await resolve('vitrify', import.meta.url))
+  return createApp({
+    onSetup,
+    appDir,
+    baseUrl,
+    onRendered,
+    fastifySsrPlugin,
+    vitrifyDir,
+    mode: import.meta.env.MODE
+  })
+}

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

@@ -1,9 +1,21 @@
 import { createApp } from '../main.js'
-import { renderToString } from '@vue/server-renderer'
+import { renderToString } from 'vue/server-renderer'
+import type { FastifyInstance } from 'fastify'
 // import * as ApolloSSR from '@vue/apollo-ssr'
 // import { ApolloClients } from '@vue/apollo-composable'
 // import serialize from 'serialize-javascript'
 
+import { onSetup } from 'virtual:vitrify-hooks'
+
+export const setup = async ({ fastify }: { fastify: FastifyInstance }) => {
+  if (onSetup?.length) {
+    for (const setup of onSetup) {
+      await setup(fastify)
+    }
+  }
+  return fastify
+}
+
 const initializeApp = async (url, ssrContext) => {
   const onRenderedList = []
   Object.assign(ssrContext, {

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,18 +1,27 @@
-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 { createApp } from '../../../node/frameworks/vue/server.js'
+// import { getAppDir } from '../../../node/app-urls.js'
+// import { setup } from 'virtual:fastify-setup'
+// import { onRendered, onSetup } from 'virtual:vitrify-hooks'
+// import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
+import { setupApp } from './app.js'
+// import * as staticImports from 'virtual:static-imports'
 // const appDir = getPkgJsonDir(import.meta.url)
-const getString = (str?: string) => str
-let baseUrl = getString(__BASE_URL__)
-const appDir = getAppDir()
+// const getString = (str?: string) => str
+// let baseUrl = getString(__BASE_URL__)
+// const appDir = getAppDir()
 
-const app = createApp({
-  setup,
-  appDir,
-  baseUrl,
-  ssrFunctions
-})
+// const app = createApp({
+//   onSetup,
+//   appDir,
+//   baseUrl,
+//   onRendered,
+//   fastifySsrPlugin,
+//   mode: import.meta.env.MODE
+// })
 
-app.listen(process.env.PORT || 3000, process.env.HOST || '127.0.0.1')
+const app = await setupApp()
+
+app.listen({
+  port: Number(process.env.PORT || 3000),
+  host: process.env.HOST || '127.0.0.1'
+})

package/src/node/helpers/ssr.ts.bak

@@ -1,52 +0,0 @@
-export const injectSsrContext = (html: string, ssrContext: Record<string, any>) => 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 || ''}`
-    }
-  )
-  .replace(`<!--initial-state-->`, `<script>
-  window.__INITIAL_STATE__ = ${JSON.stringify(ssrContext.initialState)}
-</script>
-`)
-
-export const injectInitialState = (html: string, ssrContext: Record<string, any>) =>
-  html.replace(`<!--initial-state-->`, `<script>
-  window.__INITIAL_STATE__ = ${JSON.stringify(ssrContext.initialState)}
-  </script>`)