vitrify 0.2.5 → 0.5.0

package/src/node/bin/build.ts

@@ -1,58 +1,11 @@
 #!/usr/bin/node --experimental-specifier-resolution=node
 import { baseConfig } from '../index.js'
-// import { promises as fs } from 'fs'
-// import { routesToPaths } from '../helpers/routes.js'
 import { build as viteBuild } from 'vite'
-// import { SsrFunction } from '../vitrify-config.js'
-
-// export const prerender = async ({
-//   outDir,
-//   templatePath,
-//   manifestPath,
-//   entryServerPath,
-//   injectSsrContext
-// }: {
-//   outDir: string
-//   templatePath: string
-//   manifestPath: string
-//   entryServerPath: string
-//   injectSsrContext: SsrFunction
-// }) => {
-//   let template
-//   let manifest
-//   const promises = []
-//   template = (await fs.readFile(templatePath)).toString()
-//   manifest = await fs.readFile(manifestPath)
-//   let { render, getRoutes } = await import(entryServerPath)
-//   const routes = await getRoutes()
-//   const paths = routesToPaths(routes).filter(
-//     (i) => !i.includes(':') && !i.includes('*')
-//   )
-//   for (let url of paths) {
-//     const filename =
-//       (url.endsWith('/') ? 'index' : url.replace(/^\//g, '')) + '.html'
-//     console.log(`Generating ${filename}`)
-//     const ssrContext = {
-//       req: { headers: {}, url },
-//       res: {}
-//     }
-//     const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-
-//     let html = template
-//       .replace(`<!--preload-links-->`, preloadLinks)
-//       .replace(`<!--app-html-->`, appHtml)
-
-//     html = injectSsrContext(html, ssrContext)
-
-//     promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))
-//   }
-//   return Promise.all(promises)
-// }
 
 export async function build(opts: {
-  ssr?: 'client' | 'server' | 'ssg'
+  ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   base?: string
-  outDir?: string
+  outDir: string
   appDir?: URL
   publicDir?: URL
 }) {
@@ -61,7 +14,8 @@ export async function build(opts: {
     mode: 'production',
     ssr: opts?.ssr,
     appDir: opts.appDir,
-    publicDir: opts.publicDir
+    publicDir: opts.publicDir,
+    base: opts.base
   })
 
   config.build = {
@@ -71,16 +25,16 @@ export async function build(opts: {
     emptyOutDir: !!opts.outDir
   }
 
-  if (opts.base) {
-    config.define = {
-      ...config.define,
-      __BASE_URL__: `'${opts.base}'`
-    }
-  }
+  // if (opts.base) {
+  //   config.define = {
+  //     ...config.define,
+  //     __BASE_URL__: `'${opts.base}'`
+  //   }
+  // }
 
   return viteBuild({
     configFile: false,
-    base: opts.base,
+    // base: opts.base,
     // logLevel: 'silent',
     ...config
   })

package/src/node/bin/cli.ts

@@ -2,7 +2,13 @@
 import cac from 'cac'
 import { getAppDir, parsePath } from '../app-urls.js'
 import { printHttpServerUrls } from '../helpers/logger.js'
-import type { ViteDevServer } from 'vite'
+import type {
+  ConfigEnv,
+  ResolvedConfig,
+  UserConfig,
+  UserConfigExport,
+  ViteDevServer
+} from 'vite'
 import type { Server } from 'net'
 
 const cli = cac('vitrify')
@@ -17,7 +23,7 @@ cli
   .action(async (options) => {
     const { build } = await import('./build.js')
     let appDir: URL
-    let prerender, ssrFunctions
+    let prerender, onRenderedHooks
     if (options.appDir) {
       if (options.appDir.slice(-1) !== '/') options.appDir += '/'
       appDir = new URL(`file://${options.appDir}`)
@@ -42,7 +48,14 @@ cli
       case 'csr':
         await build({
           ...args,
-          outDir: new URL('spa/', baseOutDir).pathname
+          outDir: new URL('csr/', baseOutDir).pathname
+        })
+        break
+      case 'fastify':
+        await build({
+          ssr: 'fastify',
+          ...args,
+          outDir: new URL('server/', baseOutDir).pathname
         })
         break
       case 'ssr':
@@ -68,7 +81,7 @@ cli
           ...args,
           outDir: new URL('ssr/server/', baseOutDir).pathname
         })
-        ;({ prerender, ssrFunctions } = await import(
+        ;({ prerender, onRenderedHooks } = await import(
           new URL('ssr/server/prerender.mjs', baseOutDir).pathname
         ))
         prerender({
@@ -78,7 +91,7 @@ cli
             .pathname,
           entryServerPath: new URL('ssr/server/entry-server.mjs', baseOutDir)
             .pathname,
-          ssrFunctions
+          onRenderedHooks
         })
         break
       default:
@@ -96,26 +109,41 @@ cli
     { default: '127.0.0.1' }
   )
   .option('--appDir [appDir]', 'Application directory')
+  .option('--app [app]', 'Fastify app instance path')
   .option('--publicDir [publicDir]', 'Public directory')
   .action(async (options) => {
     let server: Server
-    let vite: ViteDevServer
+    let config: ResolvedConfig
     if (options.host === true) {
       options.host = '0.0.0.0'
     }
     const { createServer } = await import('./dev.js')
     const cwd = (await import('../app-urls.js')).getCwd()
+    let app
+    const appPath = parsePath(options.app, cwd)?.pathname
+    if (appPath) {
+      app = await import(appPath)
+    }
+
     switch (options.mode) {
       case 'ssr':
-        ;({ server, vite } = await createServer({
-          mode: 'ssr',
+        ;({ server, config } = await createServer({
+          ssr: 'ssr',
+          host: options.host,
+          appDir: parsePath(options.appDir, cwd),
+          publicDir: parsePath(options.publicDir, cwd)
+        }))
+        break
+      case 'fastify':
+        ;({ server, config } = await createServer({
+          ssr: 'fastify',
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)
         }))
         break
       default:
-        ;({ server, vite } = await createServer({
+        ;({ server, config } = await createServer({
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)
@@ -123,7 +151,7 @@ cli
         break
     }
     console.log('Dev server running at:')
-    printHttpServerUrls(server, vite.config)
+    printHttpServerUrls(server, config)
   })
 
 cli.command('test').action(async (options) => {

package/src/node/bin/dev.ts

@@ -1,56 +1,73 @@
-import type { ViteDevServer, LogLevel } from 'vite'
+import type { LogLevel, InlineConfig } from 'vite'
+import { ViteDevServer, mergeConfig } from 'vite'
 import { searchForWorkspaceRoot } from 'vite'
 import { baseConfig } from '../index.js'
 import type { Server } from 'net'
 import type { FastifyInstance } from 'fastify/types/instance'
 import fastify from 'fastify'
-import { readFileSync } from 'fs'
+import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
+import type { ServerOptions } from 'https'
 
-export async function createServer({
+export async function createVitrifyDevServer({
   port = 3000,
   logLevel = 'info',
-  mode = 'csr',
+  // mode = 'csr',
+  ssr,
   framework = 'vue',
   host,
   appDir,
-  publicDir
+  publicDir,
+  base
 }: {
   port?: number
   logLevel?: LogLevel
-  mode?: 'csr' | 'ssr'
+  // mode?: 'csr' | 'ssr' | 'fastify'
+  ssr?: 'ssr' | 'fastify'
   framework?: 'vue'
   host?: string
   appDir?: URL
   publicDir?: URL
+  base?: string
 }) {
-  const { getAppDir, getCliDir, getCwd } = await import('../app-urls.js')
-  const cwd = getCwd()
-  const cliDir = getCliDir()
-  if (!appDir) appDir = getAppDir()
-  const { fastifySsrPlugin } = await import(
-    `../${framework}/fastify-ssr-plugin.js`
+  const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import(
+    '../app-urls.js'
   )
 
-  /**
-   * @type {import('vite').ViteDevServer}
-   */
-  const config = await baseConfig({
-    ssr: mode === 'ssr' ? 'server' : undefined,
+  const cliDir = getCliDir()
+
+  if (!appDir) appDir = getAppDir()
+  let config: InlineConfig = {}
+  let ssrMode: 'server' | 'fastify' | undefined
+  if (ssr === 'ssr') ssrMode = 'server'
+  if (ssr === 'fastify') ssrMode = 'fastify'
+  config = await baseConfig({
+    framework,
+    ssr: ssrMode,
     command: 'dev',
     mode: 'development',
     appDir,
-    publicDir
+    publicDir,
+    base
   })
+
   config.logLevel = logLevel
+
+  console.log(searchForWorkspaceRoot(appDir.pathname))
   config.server = {
+    https: config.server?.https,
+    hmr: {
+      protocol: config.server?.https ? 'wss' : 'ws'
+    },
     port,
-    middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    middlewareMode: ssr ? 'ssr' : false,
     fs: {
+      strict: false, // https://github.com/vitejs/vite/issues/8175
       allow: [
         searchForWorkspaceRoot(process.cwd()),
         searchForWorkspaceRoot(appDir.pathname),
-        searchForWorkspaceRoot(cliDir.pathname)
-        // appDir.pathname,
+        searchForWorkspaceRoot(cliDir.pathname),
+        appDir.pathname
       ]
     },
     watch: {
@@ -61,78 +78,87 @@ export async function createServer({
     },
     host
   }
-  const vite = await (
+  const vitrifyDevServer = await (
     await import('vite')
   ).createServer({
     configFile: false,
     ...config
   })
-  const { productName = 'Product name' } = JSON.parse(
-    readFileSync(new URL('package.json', appDir).pathname, {
-      encoding: 'utf-8'
-    })
+
+  return vitrifyDevServer
+}
+
+export async function createServer({
+  port = 3000,
+  logLevel = 'info',
+  // mode = 'csr',
+  ssr,
+  framework = 'vue',
+  host,
+  appDir,
+  publicDir
+}: {
+  port?: number
+  logLevel?: LogLevel
+  // mode?: 'csr' | 'ssr' | 'fastify'
+  ssr?: 'ssr' | 'fastify'
+  framework?: 'vue'
+  host?: string
+  appDir?: URL
+  publicDir?: URL
+}) {
+  const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import(
+    '../app-urls.js'
   )
 
-  let app: ViteDevServer | FastifyInstance
-  let server: Server
-  if (mode === 'ssr') {
-    console.log('SSR mode')
-    app = fastify()
-    await app.register(fastifySsrPlugin, {
-      appDir,
-      cliDir,
-      vite,
-      productName
-    })
-    // await app.register(middie)
-    // app.use(vite.middlewares)
+  appDir = appDir || getAppDir()
+  const cliDir = getCliDir()
+
+  const vite = await createVitrifyDevServer({
+    port,
+    logLevel,
+    ssr,
+    framework,
+    host,
+    appDir,
+    publicDir
+  })
 
-    // app.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', cliDir)).toString()
+  let setup
+  let server: Server
 
-    //     // template = await vite.transformIndexHtml(url, template)
-    //     const entryUrl = new URL('ssr/entry-server.ts', cliDir).pathname
-    //     render = (await vite.ssrLoadModule(entryUrl)).render
-    //     let manifest
-    //     // TODO: https://github.com/vitejs/vite/issues/2282
-    //     try {
-    //       manifest = {}
-    //     } catch (e) {
-    //       manifest = {}
-    //     }
+  console.log(`Development mode: ${ssr ? ssr : 'csr'}`)
+  if (ssr) {
+    const entryUrl =
+      ssr === 'fastify'
+        ? new URL('src/vite/fastify/entry.ts', cliDir).pathname
+        : new URL(`src/vite/${framework}/ssr/entry-server.ts`, cliDir).pathname
 
-    //     const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
-    //     const html = template
-    //       .replace(`<!--preload-links-->`, preloadLinks)
-    //       .replace(`<!--app-html-->`, appHtml)
-    //       .replace('<!--product-name-->', productName)
+    ;({ setup } = await vite.ssrLoadModule(entryUrl))
 
-    //     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)
-    //     vite && vite.ssrFixStacktrace(e)
-    //     res.code(500)
-    //     res.send(e.stack)
-    //   }
-    // })
-    await app.listen(port || 3000, host)
+    const app = fastify({
+      logger: true,
+      https: vite.config.server.https as ServerOptions
+    })
+    if (process.env) process.env.MODE = 'development'
+    if (setup) {
+      await setup({
+        fastify: app
+      })
+    }
+    if (ssr === 'ssr') {
+      await app.register(fastifySsrPlugin, {
+        appDir,
+        mode: 'development'
+      })
+    }
+    await app.listen({
+      port: Number(port || 3000),
+      host
+    })
     server = app.server
   } else {
     server = (await vite.listen()).httpServer as Server
   }
-  return { server, vite }
+  return { server, config: vite.config }
 }

package/src/node/bin/test.ts

@@ -15,9 +15,6 @@ export async function test(opts: { appDir: URL }) {
 
       globals: true,
       environment: 'happy-dom'
-      // include: [
-      //   `${opts.appDir.pathname}**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}`
-      // ]
     },
     config
   )

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

@@ -0,0 +1,72 @@
+import type {
+  FastifyPluginCallback,
+  FastifyRequest,
+  FastifyReply
+} from 'fastify'
+import fastifyStatic from '@fastify/static'
+import type { OnRenderedHook } from '../../vitrify-config.js'
+import type { ViteDevServer } from 'vite'
+
+export interface FastifySsrOptions {
+  baseUrl?: string
+  provide?: (
+    req: FastifyRequest,
+    res: FastifyReply
+  ) => Promise<Record<string, unknown>>
+  vitrifyDir?: URL
+  vite?: ViteDevServer
+  // frameworkDir?: URL
+  appDir?: URL
+  publicDir?: URL
+  productName?: string
+  onRendered?: OnRenderedHook[]
+  mode?: string
+}
+
+const fastifyCsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
+  fastify,
+  options,
+  done
+) => {
+  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') {
+    options.appDir = options.appDir || new URL('../..', import.meta.url)
+
+    const { createVitrifyDevServer } = await import('vitrify/dev')
+    const vite = await createVitrifyDevServer({
+      appDir: options.appDir,
+      framework: 'vue',
+      base: options.baseUrl
+    })
+
+    console.log('Dev mode')
+    if (!('use' in fastify)) {
+      const middie = (await import('@fastify/middie')).default
+      await fastify.register(middie)
+    }
+    fastify.use(vite.middlewares)
+  } else {
+    options.appDir = options.appDir || new URL('../../..', import.meta.url)
+    fastify.register(fastifyStatic, {
+      root: new URL('./dist/csr', options.appDir).pathname,
+      wildcard: false,
+      index: false,
+      prefix: options.baseUrl
+    })
+  }
+  done()
+}
+
+export { fastifyCsrPlugin }
+export type FastifyCsrPlugin = typeof fastifyCsrPlugin