vitrify 0.2.4 → 0.4.0

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}`)
@@ -45,6 +51,13 @@ cli
           outDir: new URL('spa/', baseOutDir).pathname
         })
         break
+      case 'fastify':
+        await build({
+          ssr: 'fastify',
+          ...args,
+          outDir: new URL('server/', baseOutDir).pathname
+        })
+        break
       case 'ssr':
         await build({
           ssr: 'client',
@@ -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({
+        ;({ server, config } = await createServer({
           mode: 'ssr',
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)
         }))
         break
+      case 'fastify':
+        ;({ server, config } = await createServer({
+          mode: '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,12 +1,13 @@
-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'
 
-export async function createServer({
+export async function createVitrifyDevServer({
   port = 3000,
   logLevel = 'info',
   mode = 'csr',
@@ -17,38 +18,44 @@ export async function createServer({
 }: {
   port?: number
   logLevel?: LogLevel
-  mode?: 'csr' | 'ssr'
+  mode?: 'csr' | 'ssr' | 'fastify'
   framework?: 'vue'
   host?: string
   appDir?: URL
   publicDir?: URL
 }) {
-  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 (mode === 'ssr') ssrMode = 'server'
+  if (mode === 'fastify') ssrMode = 'fastify'
+  config = await baseConfig({
+    framework,
+    ssr: ssrMode,
     command: 'dev',
     mode: 'development',
     appDir,
     publicDir
   })
+
   config.logLevel = logLevel
   config.server = {
+    https: config.server?.https,
     port,
-    middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    middlewareMode: mode !== 'csr' ? 'ssr' : false,
     fs: {
       allow: [
         searchForWorkspaceRoot(process.cwd()),
-        searchForWorkspaceRoot(appDir.pathname),
+        ...(Array.isArray(appDir)
+          ? appDir.map((dir) => searchForWorkspaceRoot(dir.pathname))
+          : [searchForWorkspaceRoot(appDir.pathname)]),
         searchForWorkspaceRoot(cliDir.pathname)
         // appDir.pathname,
       ]
@@ -61,78 +68,85 @@ 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',
+  framework = 'vue',
+  host,
+  appDir,
+  publicDir
+}: {
+  port?: number
+  logLevel?: LogLevel
+  mode?: 'csr' | '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)
+  const cliDir = getCliDir()
 
-    // 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()
+  const vite = await createVitrifyDevServer({
+    port,
+    logLevel,
+    mode,
+    framework,
+    host,
+    appDir,
+    publicDir
+  })
+  let entryUrl: string
 
-    //     // 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 = {}
-    //     }
+  let setup
+  let server: Server
+
+  console.log(`Development mode: ${mode}`)
+  if (['ssr', 'fastify'].includes(mode)) {
+    const entryUrl =
+      mode === '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)
-    //   }
+    const app = fastify({
+      https:
+        typeof vite.config.server.https === 'object'
+          ? vite.config.server.https
+          : {}
+    })
+    if (setup) {
+      await setup({
+        fastify: app
+      })
+    }
+    // await app.register(fastifySsrPlugin, {
+    //   appDir,
+    //   vitrifyDir: new URL('../..', import.meta.url),
+    //   mode: 'development'
     // })
-    await app.listen(port || 3000, host)
+    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-ssr-plugin.ts

@@ -3,23 +3,25 @@ import type {
   FastifyRequest,
   FastifyReply
 } from 'fastify'
-import fastifyStatic from 'fastify-static'
+import fastifyStatic from '@fastify/static'
 import { readFileSync } from 'fs'
-// import { injectSsrContext } from '../helpers/ssr.js'
+import type { OnRenderedHook } from '../../vitrify-config.js'
+import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js'
 import type { ViteDevServer } from 'vite'
-import type { SsrFunction } from '../../vitrify-config.js'
-
 export interface FastifySsrOptions {
   baseUrl?: string
   provide?: (
     req: FastifyRequest,
     res: FastifyReply
   ) => Promise<Record<string, unknown>>
+  vitrifyDir?: URL
   vite?: ViteDevServer
-  cliDir?: URL
+  // frameworkDir?: URL
   appDir?: URL
+  publicDir?: URL
   productName?: string
-  ssrFunctions?: SsrFunction[]
+  onRendered?: OnRenderedHook[]
+  mode?: string
 }
 
 const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
@@ -27,29 +29,75 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
   options,
   done
 ) => {
-  if (import.meta.env.MODE === 'development') {
-    if (!options.vite) throw new Error('Option vite cannot be undefined')
-    const middie = (await import('middie')).default
+  options.vitrifyDir =
+    options.vitrifyDir || new URL('../../..', import.meta.url)
+  const frameworkDir = new URL('vite/vue/', options.vitrifyDir)
+  options.baseUrl = options.baseUrl || '/'
+  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.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',
+      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)
-    fastify.use(options.vite.middlewares)
+    fastify.use(vite.middlewares)
 
-    fastify.get('*', async (req, res) => {
+    fastify.get(`${options.baseUrl}*`, async (req, res) => {
       try {
-        // const url = req.originalUrl
         const url = req.raw.url
         const ssrContext = {
           req,
           res
         }
-        // always read fresh template in dev
-        // template = readFileSync(resolve('index.html'), 'utf-8')
+
         const template = readFileSync(
-          new URL('index.html', options.cliDir)
+          new URL('index.html', frameworkDir)
         ).toString()
 
-        // template = await vite.transformIndexHtml(url, template)
-        const entryUrl = new URL('ssr/entry-server.ts', options.cliDir).pathname
-        const render = (await options.vite!.ssrLoadModule(entryUrl)).render
+        const entryUrl = new URL('ssr/entry-server.ts', frameworkDir).pathname
+        const render = (await vite!.ssrLoadModule(entryUrl)).render
         let manifest
         // TODO: https://github.com/vitejs/vite/issues/2282
         try {
@@ -58,11 +106,19 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
           manifest = {}
         }
 
+        const cssModules = [entryUrl]
+        // // @ts-ignore
+        // if (options.vite?.config.vitrify!.globalCss)
+        //   cssModules.push(...options.vite?.config.vitrify.globalCss)
+        const matchedModules = componentsModules(cssModules, vite!)
+        const css = collectCss(matchedModules)
+
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
         const html = template
           .replace(`<!--preload-links-->`, preloadLinks)
           .replace(`<!--app-html-->`, appHtml)
           .replace('<!--product-name-->', options.productName || 'Product name')
+          .replace('<!--dev-ssr-css-->', css)
 
         res.code(200)
         res.type('text/html')
@@ -70,13 +126,13 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         // res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
       } catch (e: any) {
         console.error(e.stack)
-        options.vite && options.vite.ssrFixStacktrace(e)
+        vite && vite.ssrFixStacktrace(e)
         res.code(500)
         res.send(e.stack)
       }
     })
   } else {
-    options.baseUrl = options.baseUrl || '/'
+    options.appDir = options.appDir || new URL('../../..', import.meta.url)
     fastify.register(fastifyStatic, {
       root: new URL('./dist/ssr/client', options.appDir).pathname,
       wildcard: false,
@@ -85,7 +141,7 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
     })
 
     fastify.get(`${options.baseUrl}*`, async (req, res) => {
-      const url = req.raw.url
+      const url = req.raw.url?.replace(options.baseUrl!, '/')
       const provide = options.provide ? await options.provide(req, res) : {}
       const ssrContext: Record<string, any> = {
         req,
@@ -93,9 +149,6 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         provide
       }
 
-      // template = readFileSync(new URL('../client/index.html', import.meta.url).pathname).toString()
-      // manifest = JSON.parse(readFileSync(new URL('../client/ssr-manifest.json', import.meta.url)).toString())
-      // render = (await import(new URL('./entry-server.mjs', import.meta.url).pathname)).render
       const template = readFileSync(
         new URL('./dist/ssr/client/index.html', options.appDir).pathname
       ).toString()
@@ -119,8 +172,8 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
 
-      if (options.ssrFunctions?.length) {
-        for (const ssrFunction of options.ssrFunctions) {
+      if (options.onRendered?.length) {
+        for (const ssrFunction of options.onRendered) {
           html = ssrFunction(html, ssrContext)
         }
       }
@@ -135,3 +188,4 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
 }
 
 export { fastifySsrPlugin }
+export type FastifySsrPlugin = typeof fastifySsrPlugin

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

@@ -1,19 +1,19 @@
 import { promises as fs } from 'fs'
 import { routesToPaths } from '../../helpers/routes.js'
-import type { SsrFunction } from '../../vitrify-config.js'
+import type { OnRenderedHook } from '../../vitrify-config.js'
 
 export const prerender = async ({
   outDir,
   templatePath,
   manifestPath,
   entryServerPath,
-  ssrFunctions
+  onRenderedHooks
 }: {
   outDir: string
   templatePath: string
   manifestPath: string
   entryServerPath: string
-  ssrFunctions: SsrFunction[]
+  onRenderedHooks: OnRenderedHook[]
 }) => {
   const promises = []
   const template = (await fs.readFile(templatePath)).toString()
@@ -37,8 +37,8 @@ export const prerender = async ({
       .replace(`<!--preload-links-->`, preloadLinks)
       .replace(`<!--app-html-->`, appHtml)
 
-    if (ssrFunctions?.length) {
-      for (const ssrFunction of ssrFunctions) {
+    if (onRenderedHooks?.length) {
+      for (const ssrFunction of onRenderedHooks) {
         html = ssrFunction(html, ssrContext)
       }
     }

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

@@ -1,20 +1,26 @@
 import type { FastifyInstance } from 'fastify'
 import fastify from 'fastify'
-import type { SsrFunction } from '../../vitrify-config.js'
-// import { setup } from 'virtual:fastify-setup'
-import { fastifySsrPlugin } from './fastify-ssr-plugin.js'
-// import { getPkgJsonDir } from '../app-urls.js'
+import type { ViteDevServer } from 'vite'
+import { getCliDir, getCliViteDir } from '../../app-urls.js'
+import type { OnRenderedHook, OnSetupFile } from '../../vitrify-config.js'
+import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
 export const createApp = ({
-  setup,
+  onSetup,
   appDir,
   baseUrl,
-  ssrFunctions
+  onRendered,
+  fastifySsrPlugin,
+  vitrifyDir,
+  mode
 }: {
-  setup: (fastify: FastifyInstance) => any
+  onSetup: OnSetupFile[]
   appDir: URL
   baseUrl?: string
-  ssrFunctions?: SsrFunction[]
+  onRendered?: OnRenderedHook[]
+  fastifySsrPlugin: FastifySsrPlugin
+  vitrifyDir?: URL
+  mode: string
 }) => {
   const app = fastify({
     logger: true
@@ -23,16 +29,16 @@ export const createApp = ({
   app.register(fastifySsrPlugin, {
     baseUrl,
     appDir,
-    ssrFunctions
+    onRendered,
+    vitrifyDir,
+    mode
   })
 
-  setup(app)
+  // if (onSetup?.length) {
+  //   for (const setup of onSetup) {
+  //     setup(app)
+  //   }
+  // }
 
   return app
 }
-
-// const app = createApp({
-//   setup
-// })
-
-// app.listen(process.env.PORT || 3000, process.env.HOST || '127.0.0.1')