vitrify 0.20.0 → 0.22.0

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -9,6 +9,7 @@ import {
 } from '../../helpers/utils.js'
 import type { ViteDevServer } from 'vite'
 import type { OnRenderedHook } from '../../vitrify-config.js'
+import { getAppDir } from '../../app-urls.js'
 
 type ProvideFn = (
   req: FastifyRequest,
@@ -78,7 +79,10 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
         const entryUrl = fileURLToPath(
           new URL('ssr/entry-server.ts', frameworkDir)
         )
-        const render = (await vite!.ssrLoadModule(entryUrl)).render
+        const environment = vite.environments.ssr
+        // @ts-expect-error missing type
+        const { render } = await environment.runner.import(entryUrl)
+        // const render = (await vite!.ssrLoadModule(entryUrl)).render
         let manifest
         // TODO: https://github.com/vitejs/vite/issues/2282
         try {
@@ -123,31 +127,9 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
       const url = req.raw.url?.replace(options.baseUrl!, '/')
       const provide = options.provide ? await options.provide(req, res) : {}
 
-      const template = readFileSync(
-        fileURLToPath(new URL('./dist/ssr/client/index.html', options.appDir))
-      ).toString()
-      const manifest = JSON.parse(
-        readFileSync(
-          new URL('./dist/ssr/client/.vite/ssr-manifest.json', options.appDir)
-        ).toString()
-      )
-      const render = (
-        await import(
-          fileURLToPath(
-            new URL('./dist/ssr/server/entry-server.mjs', options.appDir)
-          )
-        )
-      ).render
-      const onRendered = (
-        await import(
-          fileURLToPath(
-            new URL(
-              './dist/ssr/server/virtual_vitrify-hooks.mjs',
-              options.appDir
-            )
-          )
-        )
-      ).onRendered
+      const { template, manifest, render, onRendered } = await loadSSRAssets({
+        distDir: new URL('./dist/', options.appDir)
+      })
 
       const html = await renderHtml({
         request: req,
@@ -232,5 +214,60 @@ const renderHtml = async (options: {
   return html
 }
 
-export { fastifySsrPlugin, renderHtml }
+const loadSSRAssets = async (
+  {
+    mode,
+    distDir
+  }: {
+    mode?: 'ssr' | 'ssg'
+    distDir?: URL
+  } = {
+    mode: 'ssr'
+  }
+) => {
+  const appDir = getAppDir(new URL(import.meta.url))
+  const baseOutDir = distDir || new URL('dist/', appDir)
+
+  let templatePath, manifestPath, entryServerPath
+  const onRenderedPath = fileURLToPath(
+    new URL('ssr/server/virtual_vitrify-hooks.mjs', baseOutDir)
+  )
+  if (mode === 'ssg') {
+    templatePath = fileURLToPath(new URL('static/index.html', baseOutDir))
+    manifestPath = fileURLToPath(
+      new URL('static/.vite/ssr-manifest.json', baseOutDir)
+    )
+    entryServerPath = fileURLToPath(
+      new URL('ssr/server/entry-server.mjs', baseOutDir)
+    )
+  } else {
+    templatePath = fileURLToPath(new URL('ssr/client/index.html', baseOutDir))
+    manifestPath = fileURLToPath(
+      new URL('ssr/client/.vite/ssr-manifest.json', baseOutDir)
+    )
+    entryServerPath = fileURLToPath(
+      new URL('ssr/server/entry-server.mjs', baseOutDir)
+    )
+  }
+  try {
+    const template = readFileSync(templatePath).toString()
+    const manifest = JSON.parse(readFileSync(manifestPath).toString())
+    const entryServer = await import(entryServerPath)
+    const { render, getRoutes } = entryServer
+    const onRendered = (await import(onRenderedPath)).onRendered
+
+    return {
+      template,
+      manifest,
+      render,
+      getRoutes,
+      onRendered
+    }
+  } catch (e) {
+    console.error(e)
+    throw new Error('Unable to load SSR asset files')
+  }
+}
+
+export { fastifySsrPlugin, renderHtml, loadSSRAssets }
 export type FastifySsrPlugin = typeof fastifySsrPlugin

package/src/node/frameworks/vue/prerender.ts

@@ -2,25 +2,24 @@ import { existsSync, promises as fs, mkdirSync } from 'fs'
 import type { OnRenderedHook } from 'src/node/vitrify-config.js'
 import { routesToPaths } from '../../helpers/routes.js'
 import { renderHtml } from './fastify-ssr-plugin.js'
+import { type RouteRecordRaw } from 'vue-router'
 
 export const prerender = async ({
   outDir,
-  templatePath,
-  manifestPath,
-  entryServerPath,
+  template,
+  manifest,
+  render,
+  routes,
   onRendered
 }: {
   outDir: string
-  templatePath: string
-  manifestPath: string
-  entryServerPath: string
+  template: string
+  manifest: Record<string, unknown>
+  render: unknown
+  routes: RouteRecordRaw[]
   onRendered: OnRenderedHook[]
 }) => {
   const promises = []
-  const template = (await fs.readFile(templatePath)).toString()
-  const manifest = JSON.parse((await fs.readFile(manifestPath)).toString())
-  const { render, getRoutes } = await import(entryServerPath)
-  const routes = await getRoutes()
   const paths = routesToPaths(routes).filter(
     (i) => !i.includes(':') && !i.includes('*')
   )

package/src/node/frameworks/vue/server.ts

@@ -23,6 +23,9 @@ export const createApp = ({
 }) => {
   const app = fastify({
     logger: {
+      transport: {
+        target: '@fastify/one-line-logger'
+      },
       level: process.env.DEBUG ? 'debug' : process.env.PINO_LOG_LEVEL || 'info'
     }
   })

package/src/node/index.ts

@@ -1,5 +1,10 @@
 import vuePlugin from '@vitejs/plugin-vue'
-import type { Alias, InlineConfig, UserConfig as ViteUserConfig } from 'vite'
+import type {
+  Alias,
+  InlineConfig,
+  Plugin,
+  UserConfig as ViteUserConfig
+} from 'vite'
 import { findDepPkgJsonPath } from 'vitefu'
 import { mergeConfig } from 'vite'
 import { build } from 'esbuild'
@@ -29,10 +34,10 @@ import type { VitrifyPlugin } from './plugins/index.js'
 import { resolve } from './app-urls.js'
 import type { ManualChunksOption, RollupOptions } from 'rollup'
 import { addOrReplaceTitle, appendToBody } from './helpers/utils.js'
-import type { ComponentResolver } from 'unplugin-vue-components'
 import Components from 'unplugin-vue-components/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import UnoCSS from 'unocss/vite'
+import { searchForWorkspaceRoot } from 'vite'
 
 const internalServerModules = [
   'util',
@@ -50,21 +55,6 @@ const internalServerModules = [
   'abort-controller'
 ]
 
-const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
-  quasar: () =>
-    import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
-}
-
-const configResolverMap: Record<
-  string,
-  () => Promise<ComponentResolver | ComponentResolver[]>
-> = {
-  quasar: () =>
-    import('unplugin-vue-components/resolvers').then((module) =>
-      module.QuasarResolver()
-    )
-}
-
 const manualChunkNames = [
   'prerender',
   'fastify-ssr-plugin',
@@ -74,13 +64,16 @@ const manualChunkNames = [
 
 const moduleChunks = {
   vue: ['vue', '@vue', 'vue-router'],
-  quasar: ['quasar', '@quasar']
+  quasar: ['quasar'],
+  atQuasar: ['@quasar']
 }
 const manualChunksFn = (manualChunkList?: string[]): ManualChunksOption => {
   return (id: string) => {
     const matchedModule = Object.entries(moduleChunks).find(
       ([chunkName, moduleNames]) =>
-        moduleNames.some((moduleName) => id.includes(moduleName + '/'))
+        moduleNames.some((moduleName) =>
+          new RegExp(`\/${moduleName}\/`).test(id)
+        )
     )
     if (id.includes('vitrify/src/')) {
       const name = id.split('/').at(-1)?.split('.').at(0)
@@ -100,31 +93,6 @@ const manualChunksFn = (manualChunkList?: string[]): ManualChunksOption => {
   }
 }
 
-// const manualChunks: ManualChunksOption = (
-//   id: string,
-//   manualChunkList?: string[]
-// ) => {
-//   const matchedModule = Object.entries(moduleChunks).find(
-//     ([chunkName, moduleNames]) =>
-//       moduleNames.some((moduleName) => id.includes(moduleName + '/'))
-//   )
-//   if (id.includes('vitrify/src/')) {
-//     const name = id.split('/').at(-1)?.split('.').at(0)
-//     if (name && manualChunkNames.includes(name)) return name
-//   } else if (
-//     VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))
-//   ) {
-//     return VIRTUAL_MODULES.find((name) => id.includes(name))
-//   } else if (manualChunkList?.some((file) => id.includes(file))) {
-//     return manualChunkList.find((file) => id.includes(file))
-//   } else if (id.includes('node_modules')) {
-//     if (matchedModule) {
-//       return matchedModule[0]
-//     }
-//     return 'vendor'
-//   }
-// }
-
 export const VIRTUAL_MODULES = [
   'virtual:vitrify-hooks',
   'virtual:static-imports',
@@ -238,7 +206,6 @@ export const baseConfig = async ({
       fs.writeFileSync(configPath + '.js', bundledConfig.code)
 
       rawVitrifyConfig = (await import('file://' + configPath + '.js')).default
-      // vitrifyConfig = (await import(configPath + '.js')).default
       fs.unlinkSync(configPath + '.js')
     } else {
       rawVitrifyConfig = (
@@ -255,9 +222,11 @@ export const baseConfig = async ({
     throw e
   }
 
-  const localPackages = ['vue', 'vue-router', '@vue/server-renderer']
-  // const localPackages: string[] = []
-  const cliPackages = []
+  const localPackages = []
+  if (framework === 'vue')
+    localPackages.push('vue', 'vue-router', '@vue/server-renderer')
+
+  const cliPackages: string[] = []
   const packageUrls: Record<string, URL> =
     vitrifyConfig.vitrify?.urls?.packages || {}
   await (async () => {
@@ -266,14 +235,6 @@ export const baseConfig = async ({
       if (pkgDir) packageUrls![val] = new URL(`file://${pkgDir}`)
     }
   })()
-
-  // await (async () => {
-  //   for (const val of cliPackages)
-  //     packageUrls[val] = getPkgJsonDir(
-  //       new URL(await resolve(val, cliDir!.href))
-  //     )
-  // })()
-
   if (!productName) {
     try {
       ;({ productName } = JSON.parse(
@@ -291,20 +252,28 @@ export const baseConfig = async ({
 
   const isPwa = !!vitrifyConfig.vitrify?.pwa || false
 
-  const frameworkPlugins = []
-  const resolvers = []
-  for (const framework of Object.keys(configPluginMap)) {
-    if (Object.keys(vitrifyConfig).includes(framework)) {
-      const plugin = await configPluginMap[framework]()
-      const resolver = await configResolverMap[framework]()
-
-      frameworkPlugins.push(
-        await plugin({
-          ssr,
-          pwa: isPwa
-        })
-      )
-      resolvers.push(resolver)
+  const frameworkPlugins: Plugin[] = []
+  if (framework === 'vue') {
+    frameworkPlugins.push(vuePlugin())
+  }
+
+  const vitrifyPlugins: Plugin[] = []
+  if (vitrifyConfig.vitrify?.plugins) {
+    for (const vitrifyPluginConfig of vitrifyConfig.vitrify.plugins) {
+      const vitrifyPlugin = await vitrifyPluginConfig.plugin({
+        ssr,
+        pwa: isPwa,
+        options: vitrifyPluginConfig.options
+      })
+      if ('plugin' in vitrifyPlugin) {
+        vitrifyPlugins.push(vitrifyPlugin.plugin)
+      } else if ('plugins' in vitrifyPlugin) {
+        vitrifyPlugins.push(...vitrifyPlugin.plugins)
+      }
+
+      if (vitrifyPlugin.config) {
+        vitrifyConfig = mergeConfig(vitrifyConfig, vitrifyPlugin.config)
+      }
     }
   }
 
@@ -375,14 +344,13 @@ export const baseConfig = async ({
               /<style lang="sass">(.*?)<\/style>/,
               '<style lang="sass">' + sass + '</style>'
             )
-          // code = code.replace(/<\/style>/, sass + '</style>')
         }
 
         return code
       }
     },
-    vuePlugin(),
     ...frameworkPlugins,
+    ...vitrifyPlugins,
     {
       name: 'vitrify-setup',
       enforce: 'post',
@@ -442,10 +410,6 @@ export const baseConfig = async ({
                 return `import ${varName} from '${
                   new URL(url, appDir).pathname
                 }'; onSetup.push(${varName})`
-
-                // return `import ${varName} from '${fileURLToPath(
-                //   url
-                // )}'; onSetup.push(${varName})`
               })
               .join('\n')}`
         } else if (id === 'virtual:static-imports') {
@@ -462,11 +426,7 @@ export const baseConfig = async ({
             ),
             ...globalSass.map((sass) => `@import '${sass}'`)
           ].join('\n')
-        }
-        // else if (id === 'vitrify.css') {
-        //   return `${globalCss.map((css) => `@import '${css}'`).join('\n')}`
-        // }
-        else if (id === 'virtual:vitrify-config') {
+        } else if (id === 'virtual:vitrify-config') {
           return `export default ${JSON.stringify(vitrifyConfig)}`
         }
         return null
@@ -496,14 +456,14 @@ export const baseConfig = async ({
       }
     },
     Components({
+      ...vitrifyConfig.vitrify?.unpluginVueComponents,
       exclude: [
         new RegExp(
           `[\\/]node_modules[\\/].*[\\/]!(${serverModules.join('|')})`
         ),
         /[\\/]\.git[\\/]/,
         /[\\/]\.nuxt[\\/]/
-      ],
-      resolvers
+      ]
     }),
     UnoCSS({
       ...vitrifyConfig.vitrify?.unocss,
@@ -556,32 +516,13 @@ export const baseConfig = async ({
           } else {
             entryScript = `<script type="module" src="${entry}"></script>`
           }
-          // html = html.replace('<!--entry-script-->', entryScript)
           html = appendToBody(entryScript, html)
           if (productName) html = addOrReplaceTitle(productName, html)
-          // html = html.replace('<!--product-name-->', productName)
           return html
         }
       }
     })
 
-    // plugins.unshift({
-    //   name: 'product-name',
-    //   enforce: 'post',
-    //   config: (config: VitrifyConfig, env) => {
-    //     if (config.vitrify?.productName)
-    //       productName = config.vitrify?.productName
-    //     return
-    //   },
-    //   transformIndexHtml: {
-    //     enforce: 'post',
-    //     transform: (html) => {
-    //       html = html.replace('<!--product-name-->', productName)
-    //       return html
-    //     }
-    //   }
-    // })
-
     if (debug) plugins.push(visualizer())
   }
 
@@ -596,19 +537,40 @@ export const baseConfig = async ({
   ]
 
   const vuePkgAliases: Alias[] = []
-  for (const pkg of vueInternalPkgs) {
-    const specifier = pkg.split('/').at(-1)
-    const pkgJsonPath = await findDepPkgJsonPath(pkg, fileURLToPath(appDir!))
-    if (pkgJsonPath)
-      vuePkgAliases.push({
-        find: pkg,
-        replacement: fileURLToPath(
-          new URL(
-            `./dist/${specifier}.esm-bundler.js`,
-            `file://${pkgJsonPath}` || ''
+  if (packageUrls['vue']) {
+    for (const pkg of vueInternalPkgs) {
+      const specifier = pkg.split('/').at(-1)
+      const pkgJsonPath = await findDepPkgJsonPath(pkg, fileURLToPath(appDir!))
+      if (pkgJsonPath)
+        vuePkgAliases.push({
+          find: pkg,
+          replacement: fileURLToPath(
+            new URL(
+              `./dist/${specifier}.esm-bundler.js`,
+              `file://${pkgJsonPath}` || ''
+            )
           )
-        )
-      })
+        })
+
+      vuePkgAliases.push(
+        {
+          find: new RegExp('^vue$'),
+          replacement: fileURLToPath(
+            new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue'])
+          )
+        },
+        {
+          find: new RegExp('^vue-router$'),
+          replacement: fileURLToPath(
+            new URL(
+              './dist/vue-router.esm-bundler.js',
+              packageUrls['vue-router']
+            )
+          )
+        },
+        ...vuePkgAliases
+      )
+    }
   }
 
   const alias: Alias[] = [
@@ -616,21 +578,11 @@ export const baseConfig = async ({
     { find: 'app', replacement: fileURLToPath(appDir) },
     { find: 'cwd', replacement: fileURLToPath(cwd) },
     { find: 'boot', replacement: fileURLToPath(new URL('boot/', srcDir)) },
-    { find: 'assets', replacement: fileURLToPath(new URL('assets/', srcDir)) },
-    {
-      find: new RegExp('^vue$'),
-      replacement: fileURLToPath(
-        new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue'])
-      )
-    },
-    {
-      find: new RegExp('^vue-router$'),
-      replacement: fileURLToPath(
-        new URL('./dist/vue-router.esm-bundler.js', packageUrls['vue-router'])
-      )
-    },
-    ...vuePkgAliases
+    { find: 'assets', replacement: fileURLToPath(new URL('assets/', srcDir)) }
   ]
+
+  if (framework === 'vue') alias.push(...vuePkgAliases)
+
   if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
     alias.push(...vitrifyConfig.vitrify.dev.alias)
 
@@ -701,6 +653,7 @@ export const baseConfig = async ({
 
   const config = {
     root: fileURLToPath(appDir),
+    appType: ssr ? 'custom' : 'spa',
     publicDir: fileURLToPath(publicDir),
     base,
     envDir: fileURLToPath(appDir),
@@ -737,6 +690,28 @@ export const baseConfig = async ({
       __HOST__: `'localhost'`,
       __BASE_URL__: `'${base}'`,
       __IS_PWA__: `${isPwa}`
+    },
+    // environments: {
+    // },
+    server: {
+      https: vitrifyConfig.server?.https,
+      // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+      middlewareMode: ssr ? true : false,
+      fs: {
+        strict: false, // https://github.com/vitejs/vite/issues/8175
+        allow: [
+          searchForWorkspaceRoot(process.cwd()),
+          searchForWorkspaceRoot(fileURLToPath(appDir)),
+          searchForWorkspaceRoot(fileURLToPath(cliDir)),
+          fileURLToPath(appDir)
+        ]
+      },
+      watch: {
+        // During tests we edit the files too fast and sometimes chokidar
+        // misses change events, so enforce polling for consistency
+        usePolling: true,
+        interval: 100
+      }
     }
   } as VitrifyConfig
 

package/src/node/plugins/index.ts

@@ -1,12 +1,28 @@
 import type { Plugin } from 'vite'
+import { VitrifyConfig } from '../vitrify-config.js'
 
-export type VitrifyPlugin = ({
+type VitrifyPluginReturnType =
+  | {
+      plugin: Plugin
+      config?: Partial<VitrifyConfig>
+    }
+  | {
+      plugins: Plugin[]
+      config?: Partial<VitrifyConfig>
+    }
+
+export type VitrifyPlugin<Options> = ({
   ssr,
+  pwa,
   mode,
-  command
+  command,
+  options
 }: {
   ssr?: 'server' | 'client' | 'ssg' | 'fastify' | false
   pwa?: boolean
   mode?: 'production' | 'development'
   command?: 'build' | 'dev' | 'test'
-}) => Promise<Plugin | Plugin[]> | Plugin | Plugin[]
+  options: Options
+}) => Promise<VitrifyPluginReturnType> | VitrifyPluginReturnType
+
+export * from './quasar/index.js'