vitrify 0.3.0 → 0.5.1

package/src/node/index.ts

@@ -1,6 +1,11 @@
 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'
+import fs from 'fs'
+import path from 'path'
+import { pathToFileURL } from 'url'
 import { readFileSync } from 'fs'
 import builtinModules from 'builtin-modules'
 import { resolve } from 'import-meta-resolve'
@@ -11,20 +16,65 @@ import type {
   VitrifyConfig,
   OnRenderedHook,
   OnBootHook,
-  OnSetupHook
+  OnSetupFile
 } from './vitrify-config.js'
 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'
 
-const serverModules = ['fastify', 'middie']
+const internalServerModules = [
+  // 'fs',
+  // 'path',
+  // 'url',
+  // 'module',
+  // 'crypto',
+  // 'node:fs',
+  'util',
+  'node:url',
+  'node:util',
+  'node:fs',
+  'node:process',
+  'vitrify',
+  'vitrify/dev',
+  // 'import-meta-resolve',
+  'vite',
+  'fastify',
+  '@fastify',
+  'node'
+  // 'middie',
+  // 'knex',
+  // 'bcrypt',
+  // 'objection',
+  // '@fastify/formbody',
+  // '@fastify/static',
+  // '@fastify/cors',
+  // '@fastify/cookie',
+  // 'mercurius',
+  // 'jose',
+  // 'oidc-provider',
+  // 'node-fetch'
+]
 
 const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
   quasar: () =>
     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 = (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 (id.includes('node_modules')) {
+    return 'vendor'
+  }
+}
 
 export const VIRTUAL_MODULES = [
   'virtual:vitrify-hooks',
@@ -32,18 +82,78 @@ export const VIRTUAL_MODULES = [
   'virtual:static-imports'
 ]
 
+async function bundleConfigFile(
+  fileName: string,
+  isESM = false
+): Promise<{ code: string; dependencies: string[] }> {
+  const result = await build({
+    absWorkingDir: process.cwd(),
+    entryPoints: [fileName],
+    outfile: 'out.js',
+    write: false,
+    platform: 'node',
+    bundle: true,
+    format: 'esm',
+    sourcemap: 'inline',
+    metafile: true,
+    plugins: [
+      {
+        name: 'externalize-deps',
+        setup(build) {
+          build.onResolve({ filter: /.*/ }, (args) => {
+            const id = args.path
+            if (id[0] !== '.' && !path.isAbsolute(id)) {
+              return {
+                external: true
+              }
+            }
+          })
+        }
+      },
+      {
+        name: 'replace-import-meta',
+        setup(build) {
+          build.onLoad({ filter: /\.[jt]s$/ }, async (args) => {
+            const contents = await fs.promises.readFile(args.path, 'utf8')
+            return {
+              loader: args.path.endsWith('.ts') ? 'ts' : 'js',
+              contents: contents
+                .replace(
+                  /\bimport\.meta\.url\b/g,
+                  JSON.stringify(pathToFileURL(args.path).href)
+                )
+                .replace(
+                  /\b__dirname\b/g,
+                  JSON.stringify(path.dirname(args.path))
+                )
+                .replace(/\b__filename\b/g, JSON.stringify(args.path))
+            }
+          })
+        }
+      }
+    ]
+  })
+  const { text } = result.outputFiles[0]
+  return {
+    code: text,
+    dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
+  }
+}
+
 export const baseConfig = async ({
   ssr,
   appDir,
   publicDir,
+  base = '/',
   command = 'build',
   mode = 'production',
   framework = 'vue',
   pwa = false
 }: {
-  ssr?: 'client' | 'server' | 'ssg'
+  ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   appDir?: URL
   publicDir?: URL
+  base?: string
   command?: 'build' | 'dev' | 'test'
   mode?: 'production' | 'development'
   framework?: 'vue'
@@ -59,22 +169,7 @@ export const baseConfig = async ({
   const cliDir = getCliDir()
   const cliViteDir = getCliViteDir(cliDir)
   const frameworkDir = new URL(`${framework}/`, cliViteDir)
-
-  const localPackages = ['vue', 'vue-router']
-  const cliPackages = ['vitest']
-  const packageUrls: Record<string, URL> = {}
-  await (async () => {
-    for (const val of localPackages)
-      packageUrls[val] = getPkgJsonDir(
-        new URL(await resolve(val, appDir!.href))
-      )
-  })()
-  await (async () => {
-    for (const val of cliPackages)
-      packageUrls[val] = getPkgJsonDir(
-        new URL(await resolve(val, cliDir!.href))
-      )
-  })()
+  const fastifyDir = new URL('fastify/', cliViteDir)
 
   if (!publicDir) publicDir = new URL('public/', appDir)
   /**
@@ -82,24 +177,63 @@ export const baseConfig = async ({
    */
   let vitrifyConfig:
     | VitrifyConfig
-    | (({ mode, command }: { mode: string; command: string }) => VitrifyConfig)
+    | (({
+        mode,
+        command
+      }: {
+        mode: string
+        command: string
+      }) => Promise<VitrifyConfig> | VitrifyConfig)
 
   try {
-    vitrifyConfig = (
-      await import(new URL('vitrify.config.js', appDir).pathname)
-    ).default
+    if (fs.existsSync(new URL('vitrify.config.ts', appDir).pathname)) {
+      const configPath = new URL('vitrify.config.ts', appDir).pathname
+      const bundledConfig = await bundleConfigFile(
+        new URL('vitrify.config.ts', appDir).pathname
+      )
+      fs.writeFileSync(configPath + '.js', bundledConfig.code)
+      vitrifyConfig = (await import(configPath + '.js')).default
+      fs.unlinkSync(configPath + '.js')
+    } else {
+      vitrifyConfig = (
+        await import(new URL('vitrify.config.js', appDir).pathname)
+      ).default
+    }
     if (typeof vitrifyConfig === 'function')
-      vitrifyConfig = vitrifyConfig({ mode, command })
+      vitrifyConfig = await vitrifyConfig({ mode, command })
   } catch (e) {
-    console.error(e)
-    console.log('No vitrify.config.js file found, using defaults')
+    console.log('No vitrify.config.(ts|js) file found, using defaults')
     vitrifyConfig = {}
   }
-  let { productName = 'Product name' } = JSON.parse(
-    readFileSync(new URL('package.json', appDir).pathname, {
-      encoding: 'utf-8'
-    })
-  )
+
+  const localPackages = ['vue', 'vue-router']
+  const cliPackages = []
+  const packageUrls: Record<string, URL> =
+    vitrifyConfig.vitrify?.urls?.packages || {}
+  await (async () => {
+    for (const val of localPackages)
+      packageUrls[val] = getPkgJsonDir(
+        new URL(await resolve(val, appDir!.href))
+      )
+  })()
+
+  // await (async () => {
+  //   for (const val of cliPackages)
+  //     packageUrls[val] = getPkgJsonDir(
+  //       new URL(await resolve(val, cliDir!.href))
+  //     )
+  // })()
+
+  let productName = 'Product name'
+  try {
+    ;({ productName } = JSON.parse(
+      readFileSync(new URL('package.json', appDir).pathname, {
+        encoding: 'utf-8'
+      })
+    ))
+  } catch (e) {
+    console.error('package.json not found')
+  }
 
   const ssrTransformCustomDir = () => {
     return {
@@ -124,14 +258,22 @@ export const baseConfig = async ({
   let onBootHooks: OnBootHook[]
   let onRenderedHooks: OnRenderedHook[]
   let onMountedHooks: OnMountedHook[]
-  let onSetupHooks: OnSetupHook[]
+  let onSetupFiles: OnSetupFile[]
   let globalCss: string[]
   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({
+      compiler: await import('vue/compiler-sfc'),
       template: {
         ssr: !!ssr,
         compilerOptions: {
@@ -159,7 +301,7 @@ export const baseConfig = async ({
         onBootHooks = config.vitrify?.hooks?.onBoot || []
         onRenderedHooks = config.vitrify?.hooks?.onRendered || []
         onMountedHooks = config.vitrify?.hooks?.onMounted || []
-        onSetupHooks = config?.vitrify?.hooks?.onSetup || []
+        onSetupFiles = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
         sassVariables = config.vitrify?.sass?.variables || {}
@@ -188,9 +330,17 @@ export const baseConfig = async ({
         }
       },
       resolveId(id) {
-        if (VIRTUAL_MODULES.includes(id)) return id
+        if (VIRTUAL_MODULES.includes(id))
+          return { id, moduleSideEffects: false }
         return
       },
+      transform: (code, id) => {
+        if (id.endsWith('main.ts') && id.includes('vitrify')) {
+          code =
+            `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+        }
+        return code
+      },
       load(id) {
         if (id === 'virtual:vitrify-hooks') {
           return `export const onBoot = [${onBootHooks
@@ -202,11 +352,27 @@ export const baseConfig = async ({
             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')}`
+            export const onSetup = []
+            ${onSetupFiles
+              .map(
+                (url, index) =>
+                  `import ${url.pathname
+                    .replaceAll('/', '')
+                    .replaceAll('.', '')} from '${
+                    url.pathname
+                  }'; onSetup.push(${url.pathname
+                    .replaceAll('/', '')
+                    .replaceAll('.', '')})`
+              )
+              .join('\n')}`
+          // export const onSetup = [${onSetupHooks
+          //   .map((fn) => `${String(fn)}`)
+          //   .join(', ')}]`
+          /**
+           * CSS imports in virtual files do not seem to work. Using transform() instead
+           */
+          // } else if (id === 'virtual:global-css') {
+          //   return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
         } else if (id === 'virtual:static-imports') {
           return `${Object.entries(staticImports)
             .map(
@@ -242,6 +408,9 @@ export const baseConfig = async ({
             case 'client':
               entry = new URL('ssr/entry-client.ts', frameworkDir).pathname
               break
+            case 'fastify':
+              entry = new URL('entry.ts', fastifyDir).pathname
+              break
             default:
               entry = new URL('csr/entry.ts', frameworkDir).pathname
           }
@@ -271,25 +440,110 @@ export const baseConfig = async ({
     })
   }
 
-  const alias = [
+  const alias: Alias[] = [
     { find: 'src', replacement: srcDir.pathname },
     { find: 'app', replacement: appDir.pathname },
     { find: 'cwd', replacement: cwd.pathname },
     { find: 'boot', replacement: new URL('boot/', srcDir).pathname },
     { find: 'assets', replacement: new URL('assets/', srcDir).pathname },
-    { find: 'vue', replacement: packageUrls['vue'].pathname },
-    { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
-    { find: 'vitrify', replacement: cliDir.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 }
   ]
+  if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
+    alias.push(...vitrifyConfig.vitrify.dev.alias)
+
   if (command === 'test')
     alias.push({
       find: 'vitest',
-      replacement: packageUrls.vitest.pathname
+      replacement: new URL(await resolve('vitest', cliDir!.href)).pathname
     })
 
+  let rollupOptions: RollupOptions = {}
+  let noExternal: RegExp[] | string[] = [
+    new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+  ]
+  const external = [...builtinModules, ...serverModules]
+
+  if (ssr === 'server') {
+    rollupOptions = {
+      input: [
+        new URL('ssr/entry-server.ts', frameworkDir).pathname,
+        new URL('ssr/prerender.ts', frameworkDir).pathname,
+        new URL('ssr/server.ts', frameworkDir).pathname
+      ],
+      external,
+      output: {
+        minifyInternalExports: false,
+        entryFileNames: '[name].mjs',
+        chunkFileNames: '[name].mjs',
+        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
+    noExternal = [
+      new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+      // new RegExp(`^(?!.*(${[...builtinModules, ...serverModules].join('|')}))`)
+    ]
+  } else if (ssr === 'fastify') {
+    rollupOptions = {
+      input: [new URL('server.ts', fastifyDir).pathname],
+      external,
+      output: {
+        minifyInternalExports: false,
+        entryFileNames: '[name].mjs',
+        chunkFileNames: '[name].mjs',
+        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
+    noExternal = [
+      new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+    ]
+  } else {
+    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: frameworkDir.pathname,
+    root: ssr === 'fastify' ? appDir.pathname : frameworkDir.pathname,
     publicDir: publicDir.pathname,
+    base,
+    envDir: appDir.pathname,
     vitrify: {
       productName,
       urls: {
@@ -302,64 +556,58 @@ export const baseConfig = async ({
     },
     plugins,
     optimizeDeps: {
-      exclude: ['vue']
+      exclude: ['vue', ...serverModules, ...builtinModules]
     },
     resolve: {
-      // Dedupe uses require which breaks ESM SSR builds
-      // dedupe: [
-      //   'vue',
-      //   'vue-router'
-      // ],
+      dedupe: ['vue', 'vue-router'],
       alias
     },
     build: {
-      target: ssr === 'server' ? 'esnext' : 'modules',
-      ssr: ssr === 'server' ? true : false,
+      target: ssr === 'server' || ssr === 'fastify' ? 'esnext' : 'modules',
+      ssr: ssr === 'server' || ssr === 'fastify' ? true : false,
       ssrManifest: ssr === 'client' || ssr === 'ssg',
-      rollupOptions:
-        ssr === 'server'
-          ? {
-              input: [
-                new URL('ssr/entry-server.ts', frameworkDir).pathname,
-                new URL('ssr/prerender.ts', frameworkDir).pathname,
-                new URL('ssr/server.ts', frameworkDir).pathname
-              ],
-              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)
-                    console.log(name)
-                    if (manualChunks.includes(id)) return name
-                  } else if (id.includes('node_modules')) {
-                    return 'vendor'
-                  }
-                }
-              }
-            }
-          : {
-              output: {
-                format: 'es'
-              }
-            }
+      rollupOptions
+      // ssr === 'server'
+      //   ? {
+      //       input: [
+      //         new URL('ssr/entry-server.ts', frameworkDir).pathname,
+      //         new URL('ssr/prerender.ts', frameworkDir).pathname,
+      //         new URL('ssr/server.ts', frameworkDir).pathname
+      //       ],
+      //       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'
+      //           }
+      //         }
+      //       }
+      //     }
+      //   : {
+      //       output: {
+      //         format: 'es'
+      //       }
+      //     }
     },
     ssr: {
       // Create a SSR bundle
-      noExternal: [
-        new RegExp(
-          `^(?!.*(${[...builtinModules, ...serverModules].join('|')}))`
-        )
-      ]
+      external,
+      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/index.ts

@@ -5,7 +5,7 @@ export type VitrifyPlugin = ({
   mode,
   command
 }: {
-  ssr?: 'server' | 'client' | 'ssg' | false
+  ssr?: 'server' | 'client' | 'ssg' | 'fastify' | false
   pwa?: boolean
   mode?: 'production' | 'development'
   command?: 'build' | 'dev' | 'test'

package/src/node/plugins/quasar.ts

@@ -85,6 +85,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',
@@ -121,7 +144,7 @@ export const QuasarPlugin: VitrifyPlugin = async ({
             const directives = await import('quasar/src/directives.js')
 
             app.use(
-              staticImports.Quasar,
+              staticImports?.Quasar,
               {
                 plugins: quasarPlugins,
                 directives
@@ -221,9 +244,14 @@ export const QuasarPlugin: VitrifyPlugin = async ({
                 replacement: new URL('src/', urls?.packages?.quasar).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'])
@@ -233,11 +261,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']
@@ -251,7 +282,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' }
           ]
         }
       }),