vitrify 0.4.0 → 0.5.2

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

@@ -3,11 +3,12 @@ import type {
   FastifyRequest,
   FastifyReply
 } from 'fastify'
-import fastifyStatic from '@fastify/static'
+import { fastifyStatic } from '@fastify/static'
 import { readFileSync } from 'fs'
 import type { OnRenderedHook } from '../../vitrify-config.js'
 import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js'
 import type { ViteDevServer } from 'vite'
+
 export interface FastifySsrOptions {
   baseUrl?: string
   provide?: (
@@ -30,72 +31,86 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
   done
 ) => {
   options.vitrifyDir =
-    options.vitrifyDir || new URL('../../..', import.meta.url)
-  const frameworkDir = new URL('vite/vue/', options.vitrifyDir)
+    options.vitrifyDir || (await import('vitrify')).vitrifyDir
+  const frameworkDir = new URL('src/vite/vue/', options.vitrifyDir)
   options.baseUrl = options.baseUrl || '/'
+  options.mode = options.mode || process.env.MODE || import.meta.env.MODE
+  options.appDir = options.appDir || new URL('../../..', import.meta.url)
+
   if (
     options.baseUrl.charAt(options.baseUrl.length - 1) !== '/' ||
     options.baseUrl.charAt(0) !== '/'
   )
     throw new Error('baseUrl should start and end with a /')
   if (options.mode === 'development') {
-    if (!options.vitrifyDir)
-      throw new Error('Option vitrifyDir cannot be undefined')
+    // if (!options.vitrifyDir)
+    //   throw new Error('Option vitrifyDir cannot be undefined')
     // if (!options.vite) throw new Error('Option vite cannot be undefined')
     // const { resolve } = await import('import-meta-resolve')
     // const cliDir = new URL('../', await resolve('vitrify', import.meta.url))
     options.appDir = options.appDir || new URL('../../..', import.meta.url)
 
-    const { createServer, searchForWorkspaceRoot } = await import('vite')
-    const { baseConfig } = await import('vitrify')
-    const cliDir = options.vitrifyDir
-    const config = await baseConfig({
-      ssr: 'server',
-      command: 'dev',
-      mode: 'development',
+    const { createVitrifyDevServer } = await import('vitrify/dev')
+    const vite = await createVitrifyDevServer({
       appDir: options.appDir,
-      publicDir: options.publicDir || new URL('public', options.appDir)
-    })
-
-    config.server = {
-      middlewareMode: true,
-      fs: {
-        allow: [
-          searchForWorkspaceRoot(process.cwd()),
-          searchForWorkspaceRoot(options.appDir.pathname),
-          searchForWorkspaceRoot(cliDir.pathname)
-          // appDir.pathname,
-        ]
-      },
-      watch: {
-        // During tests we edit the files too fast and sometimes chokidar
-        // misses change events, so enforce polling for consistency
-        usePolling: true,
-        interval: 100
-      }
-    }
-    const vite = await createServer({
-      configFile: false,
-      ...config
+      ssr: 'ssr',
+      framework: 'vue',
+      base: options.baseUrl
     })
+    // const { createServer, searchForWorkspaceRoot } = await import('vite')
+    // const { baseConfig } = await import('vitrify')
+    // const cliDir = options.vitrifyDir
+    // const config = await baseConfig({
+    //   ssr: 'server',
+    //   command: 'dev',
+    //   mode: 'development',
+    //   appDir: options.appDir,
+    //   publicDir: options.publicDir || new URL('public', options.appDir)
+    // })
+
+    // config.server = {
+    //   middlewareMode: true,
+    //   fs: {
+    //     allow: [
+    //       searchForWorkspaceRoot(process.cwd()),
+    //       searchForWorkspaceRoot(options.appDir.pathname),
+    //       searchForWorkspaceRoot(cliDir.pathname)
+    //       // appDir.pathname,
+    //     ]
+    //   },
+    //   watch: {
+    //     // During tests we edit the files too fast and sometimes chokidar
+    //     // misses change events, so enforce polling for consistency
+    //     usePolling: true,
+    //     interval: 100
+    //   }
+    // }
+    // const vite = await createServer({
+    //   configFile: false,
+    //   ...config
+    // })
 
     console.log('Dev mode')
-    const middie = (await import('@fastify/middie')).default
-    await fastify.register(middie)
+    if (!('use' in fastify)) {
+      const middie = (await import('@fastify/middie')).default
+      await fastify.register(middie)
+    }
     fastify.use(vite.middlewares)
 
     fastify.get(`${options.baseUrl}*`, async (req, res) => {
       try {
-        const url = req.raw.url
+        const url = req.raw.url?.replace(options.baseUrl!, '/')
         const ssrContext = {
           req,
           res
         }
 
-        const template = readFileSync(
+        let template = readFileSync(
           new URL('index.html', frameworkDir)
         ).toString()
 
+        template = await vite.transformIndexHtml(url!, template)
+
         const entryUrl = new URL('ssr/entry-server.ts', frameworkDir).pathname
         const render = (await vite!.ssrLoadModule(entryUrl)).render
         let manifest
@@ -111,7 +126,9 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         // if (options.vite?.config.vitrify!.globalCss)
         //   cssModules.push(...options.vite?.config.vitrify.globalCss)
         const matchedModules = componentsModules(cssModules, vite!)
-        const css = collectCss(matchedModules)
+        const css = collectCss({
+          mods: matchedModules
+        })
 
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
         const html = template

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

@@ -3,6 +3,7 @@ import fastify from 'fastify'
 import type { ViteDevServer } from 'vite'
 import { getCliDir, getCliViteDir } from '../../app-urls.js'
 import type { OnRenderedHook, OnSetupFile } from '../../vitrify-config.js'
+import type { FastifyCsrPlugin } from './fastify-csr-plugin.js'
 import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
 export const createApp = ({
@@ -10,7 +11,7 @@ export const createApp = ({
   appDir,
   baseUrl,
   onRendered,
-  fastifySsrPlugin,
+  fastifyPlugin,
   vitrifyDir,
   mode
 }: {
@@ -18,7 +19,7 @@ export const createApp = ({
   appDir: URL
   baseUrl?: string
   onRendered?: OnRenderedHook[]
-  fastifySsrPlugin: FastifySsrPlugin
+  fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
   vitrifyDir?: URL
   mode: string
 }) => {
@@ -26,7 +27,7 @@ export const createApp = ({
     logger: true
   })
 
-  app.register(fastifySsrPlugin, {
+  app.register(fastifyPlugin, {
     baseUrl,
     appDir,
     onRendered,

package/src/node/helpers/collect-css-ssr.ts

@@ -16,11 +16,15 @@ export const componentsModules = (
   return matchedModules
 }
 
-export const collectCss = (
-  mods: Set<ModuleNode>,
+export const collectCss = ({
+  mods,
   styles = new Map<string, string>(),
   checkedComponents = new Set()
-) => {
+}: {
+  mods: Set<ModuleNode>
+  styles?: Map<string, string>
+  checkedComponents?: Set<unknown>
+}) => {
   for (const mod of mods) {
     if (
       (mod.file?.endsWith('.scss') ||
@@ -32,7 +36,11 @@ export const collectCss = (
     }
     if (mod.importedModules.size > 0 && !checkedComponents.has(mod.id)) {
       checkedComponents.add(mod.id)
-      collectCss(mod.importedModules, styles, checkedComponents)
+      collectCss({
+        mods: mod.importedModules,
+        styles,
+        checkedComponents
+      })
     }
   }
   let result = ''

package/src/node/index.ts

@@ -1,5 +1,5 @@
 import vuePlugin from '@vitejs/plugin-vue'
-import type { InlineConfig, UserConfig } from 'vite'
+import type { Alias, InlineConfig, UserConfig } from 'vite'
 import { resolveConfig } from 'vite'
 import { mergeConfig } from 'vite'
 import { build } from 'esbuild'
@@ -9,6 +9,7 @@ import { pathToFileURL } from 'url'
 import { readFileSync } from 'fs'
 import builtinModules from 'builtin-modules'
 import { resolve } from 'import-meta-resolve'
+import { visualizer } from 'rollup-plugin-visualizer'
 import type {
   StaticImports,
   BootFunction,
@@ -21,33 +22,16 @@ import type {
 import type { VitrifyContext } from './bin/run.js'
 import type { VitrifyPlugin } from './plugins/index.js'
 import { getPkgJsonDir } from './app-urls.js'
-import type { RollupOptions } from 'rollup'
+import type { ManualChunksOption, RollupOptions } from 'rollup'
 
-const serverModules = [
-  // 'fs',
-  // 'path',
-  // 'url',
-  // 'module',
-  // 'crypto',
-  // 'node:fs',
+const internalServerModules = [
   'util',
-  'node:url',
-  'node:util',
-  'node:fs',
   'vitrify',
+  'vitrify/dev',
   'vite',
   'fastify',
-  'middie',
-  'knex',
-  'bcrypt',
-  'objection',
-  '@fastify/formbody',
   '@fastify/static',
-  '@fastify/cors',
-  '@fastify/cookie',
-  'mercurius',
-  'jose',
-  'oidc-provider'
+  'node'
 ]
 
 const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
@@ -55,7 +39,24 @@ const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
     import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
 }
 
-const manualChunks = ['prerender', 'fastify-ssr-plugin', 'server']
+const manualChunkNames = [
+  'prerender',
+  'fastify-ssr-plugin',
+  'fastify-csr-plugin',
+  'server'
+]
+const manualChunks: ManualChunksOption = (id: string) => {
+  if (id.includes('vitrify/src/vite/')) {
+    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 (id.includes('node_modules')) {
+    return 'vendor'
+  }
+}
 
 export const VIRTUAL_MODULES = [
   'virtual:vitrify-hooks',
@@ -125,18 +126,22 @@ export const baseConfig = async ({
   ssr,
   appDir,
   publicDir,
+  base = '/',
   command = 'build',
   mode = 'production',
   framework = 'vue',
-  pwa = false
+  pwa = false,
+  debug = false
 }: {
   ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   appDir?: URL
   publicDir?: URL
+  base?: string
   command?: 'build' | 'dev' | 'test'
   mode?: 'production' | 'development'
   framework?: 'vue'
   pwa?: boolean
+  debug?: boolean
 }): Promise<InlineConfig> => {
   const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } =
     await import('./app-urls.js')
@@ -172,7 +177,7 @@ export const baseConfig = async ({
       )
       fs.writeFileSync(configPath + '.js', bundledConfig.code)
       vitrifyConfig = (await import(configPath + '.js')).default
-      // fs.unlinkSync(configPath + '.js')
+      fs.unlinkSync(configPath + '.js')
     } else {
       vitrifyConfig = (
         await import(new URL('vitrify.config.js', appDir).pathname)
@@ -195,6 +200,7 @@ export const baseConfig = async ({
         new URL(await resolve(val, appDir!.href))
       )
   })()
+
   // await (async () => {
   //   for (const val of cliPackages)
   //     packageUrls[val] = getPkgJsonDir(
@@ -241,6 +247,13 @@ export const baseConfig = async ({
   let staticImports: StaticImports
   let sassVariables: Record<string, string>
   let additionalData: string[]
+  let serverModules: string[] = internalServerModules
+
+  if (vitrifyConfig.vitrify?.ssr?.serverModules)
+    serverModules = [
+      ...serverModules,
+      ...vitrifyConfig.vitrify.ssr.serverModules
+    ]
 
   const plugins: UserConfig['plugins'] = [
     vuePlugin({
@@ -409,9 +422,11 @@ export const baseConfig = async ({
         }
       }
     })
+
+    if (debug) plugins.push(visualizer())
   }
 
-  const alias = [
+  const alias: Alias[] = [
     { find: 'src', replacement: srcDir.pathname },
     { find: 'app', replacement: appDir.pathname },
     { find: 'cwd', replacement: cwd.pathname },
@@ -425,17 +440,24 @@ export const baseConfig = async ({
     // { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
     // { find: 'vitrify', replacement: cliDir.pathname }
   ]
+  if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
+    alias.push(...vitrifyConfig.vitrify.dev.alias)
+
   if (command === 'test')
     alias.push({
       find: 'vitest',
       replacement: new URL(await resolve('vitest', cliDir!.href)).pathname
     })
 
-  let rollupOptions: RollupOptions
-  let noExternal: RegExp[] | string[] = []
+  let rollupOptions: RollupOptions = {}
+  let noExternal: RegExp[] | string[] = [
+    new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+  ]
   const external = [...builtinModules, ...serverModules]
+
   if (ssr === 'server') {
     rollupOptions = {
+      ...rollupOptions,
       input: [
         new URL('ssr/entry-server.ts', frameworkDir).pathname,
         new URL('ssr/prerender.ts', frameworkDir).pathname,
@@ -446,15 +468,16 @@ export const baseConfig = async ({
         minifyInternalExports: false,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
-        // format: 'es',
-        manualChunks: (id) => {
-          if (id.includes('vitrify/src/vite/')) {
-            const name = id.split('/').at(-1)?.split('.').at(0)
-            if (name && manualChunks.includes(name)) return name
-          } else if (id.includes('node_modules')) {
-            return 'vendor'
-          }
-        }
+        format: 'es',
+        manualChunks
+        // manualChunks: (id) => {
+        //   if (id.includes('vitrify/src/vite/')) {
+        //     const name = id.split('/').at(-1)?.split('.').at(0)
+        //     if (name && manualChunks.includes(name)) return name
+        //   } else if (id.includes('node_modules')) {
+        //     return 'vendor'
+        //   }
+        // }
       }
     }
     // Create a SSR bundle
@@ -464,21 +487,23 @@ export const baseConfig = async ({
     ]
   } else if (ssr === 'fastify') {
     rollupOptions = {
+      ...rollupOptions,
       input: [new URL('server.ts', fastifyDir).pathname],
       external,
       output: {
         minifyInternalExports: false,
         entryFileNames: '[name].mjs',
         chunkFileNames: '[name].mjs',
-        // format: 'es',
-        manualChunks: (id) => {
-          if (id.includes('vitrify/src/vite/')) {
-            const name = id.split('/').at(-1)?.split('.').at(0)
-            if (name && manualChunks.includes(name)) return name
-          } else if (id.includes('node_modules')) {
-            return 'vendor'
-          }
-        }
+        format: 'es',
+        manualChunks
+        // manualChunks: (id) => {
+        //   if (id.includes('vitrify/src/vite/')) {
+        //     const name = id.split('/').at(-1)?.split('.').at(0)
+        //     if (name && manualChunks.includes(name)) return name
+        //   } else if (id.includes('node_modules')) {
+        //     return 'vendor'
+        //   }
+        // }
       }
     }
     // Create a SSR bundle
@@ -487,16 +512,26 @@ export const baseConfig = async ({
     ]
   } else {
     rollupOptions = {
-      // input: [new URL('index.html', frameworkDir).pathname],
-      // output: {
-      //   format: 'es'
-      // }
+      ...rollupOptions,
+      // input: [
+      //   new URL('index.html', frameworkDir).pathname
+      //   // new URL('csr/server.ts', frameworkDir).pathname
+      // ],
+      external,
+      output: {
+        minifyInternalExports: false,
+        entryFileNames: '[name].mjs',
+        chunkFileNames: '[name].mjs',
+        format: 'es',
+        manualChunks
+      }
     }
   }
 
   const config = {
     root: ssr === 'fastify' ? appDir.pathname : frameworkDir.pathname,
     publicDir: publicDir.pathname,
+    base,
     envDir: appDir.pathname,
     vitrify: {
       productName,
@@ -513,11 +548,7 @@ export const baseConfig = async ({
       exclude: ['vue', ...serverModules, ...builtinModules]
     },
     resolve: {
-      // Dedupe uses require which breaks ESM SSR builds
-      // dedupe: [
-      //   'vue',
-      //   'vue-router'
-      // ],
+      dedupe: ['vue', 'vue-router'],
       alias
     },
     build: {
@@ -559,11 +590,13 @@ export const baseConfig = async ({
       noExternal
     },
     define: {
-      __BASE_URL__: `'/'`
+      __BASE_URL__: `'${base}'`
     }
   } as VitrifyConfig
 
   return mergeConfig(config, vitrifyConfig)
 }
 
+export const vitrifyDir = new URL('..', import.meta.url)
+
 export type { VitrifyConfig, VitrifyPlugin, VitrifyContext, BootFunction }

package/src/node/plugins/quasar.ts

@@ -13,6 +13,7 @@ import type {
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
 import type { VitrifyPlugin } from './index.js'
 import { getPkgJsonDir } from '../app-urls.js'
+
 import { resolve } from 'import-meta-resolve'
 
 export interface QuasarConf {
@@ -85,6 +86,29 @@ export const QuasarPlugin: VitrifyPlugin = async ({
     Components({
       resolvers: [QuasarResolver()]
     }),
+    {
+      name: 'vite-plugin-quasar-transform',
+      enforce: 'pre',
+      transform: (code, id, options) => {
+        const { ssr } = options || {}
+        code = code
+          .replaceAll('__QUASAR_SSR__', ssr ? ssr.toString() : 'false')
+          .replaceAll(
+            '__QUASAR_SSR_SERVER__',
+            ssr ? 'import.meta.env.SSR' : 'false'
+          )
+          .replaceAll(
+            '__QUASAR_SSR_CLIENT__',
+            ssr ? '!import.meta.env.SSR' : 'false'
+          )
+          .replaceAll(
+            '__QUASAR_SSR_PWA__',
+            ssr && pwa ? '!import.meta.env.SSR' : 'false'
+          )
+
+        return code
+      }
+    },
     {
       name: 'vite-plugin-quasar-setup',
       enforce: 'pre',
@@ -225,10 +249,6 @@ export const QuasarPlugin: VitrifyPlugin = async ({
                 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'])
@@ -238,11 +258,14 @@ export const QuasarPlugin: VitrifyPlugin = async ({
           },
           define: {
             __DEV__: process.env.NODE_ENV !== 'production' || true,
-            __QUASAR_VERSION__: `'${version}'`,
-            __QUASAR_SSR__: !!ssr,
-            __QUASAR_SSR_SERVER__: ssr === 'server',
-            __QUASAR_SSR_CLIENT__: ssr === 'client',
-            __QUASAR_SSR_PWA__: ssr === 'client' && pwa
+            __QUASAR_VERSION__: `'${version}'`
+            // __QUASAR_SSR__: !!ssr,
+            // // __QUASAR_SSR_SERVER__: ssr === 'server',
+            // __QUASAR_SSR_SERVER__: `import.meta.env.SSR`,
+            // // __QUASAR_SSR_CLIENT__: ssr === 'client',
+            // __QUASAR_SSR_CLIENT__: `!import.meta.env.SSR`,
+            // // __QUASAR_SSR_PWA__: ssr === 'client' && pwa
+            // __QUASAR_SSR_PWA__: pwa ? `!import.meta.env.SSR` : false
           },
           ssr: {
             noExternal: ['quasar']
@@ -256,7 +279,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

@@ -1,5 +1,4 @@
-import type { FastifyInstance } from 'fastify'
-import type { UserConfig } from 'vite'
+import type { Alias, UserConfig } from 'vite'
 import type { QuasarConf } from './plugins/quasar.js'
 import type { ComponentInternalInstance } from '@vue/runtime-core'
 
@@ -87,6 +86,18 @@ export interface VitrifyConfig extends UserConfig {
       cwd?: URL
       packages?: Record<string, URL>
     }
+    /**
+     * SSR specific configuration
+     */
+    ssr?: {
+      serverModules?: string[]
+    }
+    /**
+     * Development only configuration
+     */
+    dev?: {
+      alias?: Alias[]
+    }
   }
   quasar?: QuasarConf
 }

package/src/vite/fastify/server.ts

@@ -1,7 +1,9 @@
 import Fastify from 'fastify'
 import { setup } from './entry'
 
-const fastify = Fastify()
+const fastify = Fastify({
+  logger: true
+})
 await setup({ fastify })
 
 fastify.listen({

package/src/vite/vue/csr/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 { fastifyCsrPlugin } from './fastify-csr-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,
+    fastifyPlugin: fastifyCsrPlugin,
+    vitrifyDir,
+    mode: import.meta.env.MODE
+  })
+}

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

@@ -0,0 +1,3 @@
+import { fastifyCsrPlugin } from '../../../node/frameworks/vue/fastify-csr-plugin.js'
+
+export { fastifyCsrPlugin }

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

@@ -0,0 +1,8 @@
+import { setupApp } from './app.js'
+
+const app = await setupApp()
+
+app.listen({
+  port: Number(process.env.PORT || 3000),
+  host: process.env.HOST || '127.0.0.1'
+})

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

@@ -18,7 +18,7 @@ export const setupApp = async () => {
     appDir,
     baseUrl,
     onRendered,
-    fastifySsrPlugin,
+    fastifyPlugin: fastifySsrPlugin,
     vitrifyDir,
     mode: import.meta.env.MODE
   })