vitrify 0.2.5 → 0.5.0

package/src/node/index.ts

@@ -1,8 +1,12 @@
 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 { QuasarPlugin } from './plugins/quasar.js'
 import builtinModules from 'builtin-modules'
 import { resolve } from 'import-meta-resolve'
 import type {
@@ -10,43 +14,146 @@ import type {
   BootFunction,
   OnMountedHook,
   VitrifyConfig,
-  SsrFunction
+  OnRenderedHook,
+  OnBootHook,
+  OnSetupFile
 } 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'
+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:fastify-setup',
-  'virtual:boot-functions',
-  'virtual:ssr-functions',
-  'virtual:on-mounted-hooks',
+  'virtual:vitrify-hooks',
   'virtual:global-css',
   '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'
@@ -61,43 +168,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> = {}
-  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))
-      )
-  })()
-
-  // 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));
+  const fastifyDir = new URL('fastify/', cliViteDir)
 
   if (!publicDir) publicDir = new URL('public/', appDir)
   /**
@@ -105,27 +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 fastifySetup =
-    vitrifyConfig.vitrify?.fastify?.setup || ((fastify: FastifyInstance) => {})
+  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 {
@@ -147,16 +255,25 @@ export const baseConfig = async ({
     }
   }
 
-  let bootFunctions: BootFunction[]
-  let ssrFunctions: SsrFunction[]
+  let onBootHooks: OnBootHook[]
+  let onRenderedHooks: OnRenderedHook[]
   let onMountedHooks: OnMountedHook[]
+  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: {
@@ -177,18 +294,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 || []
+        onSetupFiles = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
         sassVariables = config.vitrify?.sass?.variables || {}
@@ -217,26 +330,49 @@ 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: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
+        if (id === 'virtual:vitrify-hooks') {
+          return `export const onBoot = [${onBootHooks
             .map((fn) => `${String(fn)}`)
-            .join(', ')}]`
-        } else if (id === 'virtual:on-mounted-hooks') {
-          return `export default [${onMountedHooks
-            .map((fn) => `${String(fn)}`)
-            .join(', ')}]`
-        } else if (id === 'virtual:global-css') {
-          return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
+            .join(', ')}]
+            export const onMounted = [${onMountedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
+            export const onRendered = [${onRenderedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
+            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(
@@ -272,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
           }
@@ -301,32 +440,113 @@ 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 },
-    // ...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 }
+    ...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: {
-        // @ts-ignore
         app: appDir,
         cli: cliDir,
         src: srcDir,
@@ -336,71 +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'
+      //       }
+      //     }
     },
-    // css: {
-    //   preprocessorOptions: {
-    //     sass: {
-    //       additionalData: sass ? [...sass].join('\n') : undefined
-    //     }
-    //   }
-    // },
     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'