vitrify 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -49,53 +49,53 @@
   "homepage": "https://github.com/simsustech/vitrify/tree/main/#readme",
   "scripts": {
     "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 0"
+    "test": "vitest test/"
   },
   "dependencies": {
-    "@quasar/extras": "^1.13.5",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/compiler-sfc": "^3.2.33",
-    "@vue/server-renderer": "^3.2.33",
-    "builtin-modules": "^3.2.0",
+    "@fastify/middie": "^8.0.0",
+    "@fastify/static": "^6.4.0",
+    "@quasar/extras": "^1.14.0",
+    "@vitejs/plugin-vue": "^3.0.0-alpha.1",
+    "builtin-modules": "^3.3.0",
     "cac": "^6.7.12",
     "chalk": "^5.0.1",
     "cross-env": "^7.0.3",
-    "fastify": "^3.28.0",
-    "fastify-static": "^4.6.1",
-    "glob": "^8.0.1",
-    "happy-dom": "^2.55.0",
-    "import-meta-resolve": "^1.1.1",
+    "esbuild": "^0.14.43",
+    "fastify": "^4.0.0",
+    "glob": "^8.0.3",
+    "happy-dom": "^5.2.0",
     "local-pkg": "^0.4.1",
-    "magic-string": "^0.26.1",
+    "magic-string": "^0.26.2",
     "merge-deep": "^3.0.3",
-    "middie": "^6.0.0",
     "readline": "^1.3.0",
-    "sass": "1.50.0",
-    "unplugin-vue-components": "^0.19.3",
-    "vite": "^2.9.5",
-    "vitest": "^0.9.3"
+    "sass": "1.52.3",
+    "ts-node": "^10.8.1",
+    "unplugin-vue-components": "^0.19.6",
+    "vite": "^3.0.0-alpha.9",
+    "vitest": "^0.14.1"
   },
   "devDependencies": {
+    "@types/connect": "^3.4.35",
     "@types/glob": "^7.2.0",
     "@types/merge-deep": "^3.0.0",
-    "@types/node": "^17.0.24",
+    "@types/node": "^17.0.41",
     "@types/ws": "^8.5.3",
-    "@vue/runtime-core": "^3.2.33",
-    "quasar": "^2.6.6",
-    "rollup": "^2.70.1",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5",
-    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "@vue/runtime-core": "^3.2.37",
+    "import-meta-resolve": "^2.0.2",
+    "quasar": "^2.7.1",
+    "rollup": "^2.75.6",
+    "typescript": "^4.7.3",
+    "vite": "^3.0.0-alpha.9",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.15"
   },
   "peerDependencies": {
-    "fastify": "^3.28.0",
+    "@fastify/static": "^6.4.0",
+    "fastify": "^4.0.0",
     "fastify-plugin": "^3.0.1",
-    "fastify-sensible": "^3.1.2",
-    "fastify-static": "^4.6.1",
-    "quasar": "^2.6.6",
-    "vue": "^3.2.33",
-    "vue-router": "^4.0.14"
+    "quasar": "^2.7.1",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.15"
   },
   "publishConfig": {
     "access": "public",

package/src/node/app-urls.ts

@@ -17,7 +17,7 @@ export const getCwd = () => new URL(`file://${process.cwd()}/`)
 
 export const parsePath = (path: string, basePath: URL) => {
   if (path) {
-    if (path.slice(-1) !== '/') path += '/'
+    if (!path.includes('.') && path.slice(-1) !== '/') path += '/'
     if (path.startsWith('.')) {
       return new URL(path, basePath)
     } else if (path) {

package/src/node/bin/build.ts

@@ -3,9 +3,9 @@ import { baseConfig } from '../index.js'
 import { build as viteBuild } from 'vite'
 
 export async function build(opts: {
-  ssr?: 'client' | 'server' | 'ssg'
+  ssr?: 'client' | 'server' | 'ssg' | 'fastify'
   base?: string
-  outDir?: string
+  outDir: string
   appDir?: URL
   publicDir?: URL
 }) {

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')
@@ -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',
@@ -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(
-    `../frameworks/${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,34 +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
+  const cliDir = getCliDir()
+
+  const vite = await createVitrifyDevServer({
+    port,
+    logLevel,
+    mode,
+    framework,
+    host,
+    appDir,
+    publicDir
+  })
+  let entryUrl: string
+
+  let setup
   let server: Server
-  if (mode === 'ssr') {
-    console.log('SSR mode')
-    app = fastify()
-    await app.register(fastifySsrPlugin, {
-      appDir,
-      cliDir,
-      vite,
-      productName
-    })
 
-    await app.listen(port || 3000, host)
+  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
+
+    ;({ setup } = await vite.ssrLoadModule(entryUrl))
+
+    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: 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/frameworks/vue/fastify-ssr-plugin.ts

@@ -3,22 +3,25 @@ import type {
   FastifyRequest,
   FastifyReply
 } from 'fastify'
-import fastifyStatic from 'fastify-static'
+import fastifyStatic from '@fastify/static'
 import { readFileSync } from 'fs'
-import type { ViteDevServer } from 'vite'
 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?: (
     req: FastifyRequest,
     res: FastifyReply
   ) => Promise<Record<string, unknown>>
+  vitrifyDir?: URL
   vite?: ViteDevServer
-  cliDir?: URL
+  // frameworkDir?: URL
   appDir?: URL
+  publicDir?: URL
   productName?: string
-  onRenderedHooks?: OnRenderedHook[]
+  onRendered?: OnRenderedHook[]
+  mode?: string
 }
 
 const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
@@ -26,25 +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.raw.url
         const ssrContext = {
           req,
           res
         }
+
         const template = readFileSync(
-          new URL('index.html', options.cliDir)
+          new URL('index.html', frameworkDir)
         ).toString()
 
-        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 {
@@ -53,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')
@@ -65,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,
@@ -80,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,
@@ -111,8 +172,8 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         .replace(`<!--preload-links-->`, preloadLinks)
         .replace(`<!--app-html-->`, appHtml)
 
-      if (options.onRenderedHooks?.length) {
-        for (const ssrFunction of options.onRenderedHooks) {
+      if (options.onRendered?.length) {
+        for (const ssrFunction of options.onRendered) {
           html = ssrFunction(html, ssrContext)
         }
       }
@@ -127,3 +188,4 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
 }
 
 export { fastifySsrPlugin }
+export type FastifySsrPlugin = typeof fastifySsrPlugin

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

@@ -1,18 +1,26 @@
 import type { FastifyInstance } from 'fastify'
 import fastify from 'fastify'
-import type { OnRenderedHook } from '../../vitrify-config.js'
-import { fastifySsrPlugin } from './fastify-ssr-plugin.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,
-  onRenderedHooks
+  onRendered,
+  fastifySsrPlugin,
+  vitrifyDir,
+  mode
 }: {
-  setup: (fastify: FastifyInstance) => any
+  onSetup: OnSetupFile[]
   appDir: URL
   baseUrl?: string
-  onRenderedHooks?: OnRenderedHook[]
+  onRendered?: OnRenderedHook[]
+  fastifySsrPlugin: FastifySsrPlugin
+  vitrifyDir?: URL
+  mode: string
 }) => {
   const app = fastify({
     logger: true
@@ -21,10 +29,16 @@ export const createApp = ({
   app.register(fastifySsrPlugin, {
     baseUrl,
     appDir,
-    onRenderedHooks
+    onRendered,
+    vitrifyDir,
+    mode
   })
 
-  setup(app)
+  // if (onSetup?.length) {
+  //   for (const setup of onSetup) {
+  //     setup(app)
+  //   }
+  // }
 
   return app
 }

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

@@ -0,0 +1,77 @@
+// collect-css-ssr.ts
+import type { ViteDevServer, ModuleNode, UpdatePayload } from 'vite'
+
+/**
+ * Collect SSR CSS for Vite
+ */
+export const componentsModules = (
+  components: string[],
+  vite: ViteDevServer
+) => {
+  const matchedModules = new Set<ModuleNode>()
+  components.forEach((component) => {
+    const modules = vite.moduleGraph.getModulesByFile(component)
+    modules?.forEach((mod) => matchedModules.add(mod))
+  })
+  return matchedModules
+}
+
+export const collectCss = (
+  mods: Set<ModuleNode>,
+  styles = new Map<string, string>(),
+  checkedComponents = new Set()
+) => {
+  for (const mod of mods) {
+    if (
+      (mod.file?.endsWith('.scss') ||
+        mod.file?.endsWith('.css') ||
+        mod.id?.includes('vue&type=style')) &&
+      mod.ssrModule
+    ) {
+      styles.set(mod.url, mod.ssrModule.default)
+    }
+    if (mod.importedModules.size > 0 && !checkedComponents.has(mod.id)) {
+      checkedComponents.add(mod.id)
+      collectCss(mod.importedModules, styles, checkedComponents)
+    }
+  }
+  let result = ''
+  styles.forEach((content, id) => {
+    const styleTag = `<style type="text/css" vite-module-id="${hashCode(
+      id
+    )}">${content}</style>`
+    result = result.concat(styleTag)
+  })
+  return result
+}
+
+/**
+ * Client listener to detect updated modules through HMR, and remove the initial styled attached to the head
+ */
+export const removeCssHotReloaded = () => {
+  if (import.meta.hot) {
+    import.meta.hot.on('vite:beforeUpdate', (module: UpdatePayload) => {
+      module.updates.forEach((update) => {
+        const moduleStyle = document.querySelector(
+          `[vite-module-id="${hashCode(update.acceptedPath)}"]`
+        )
+        if (moduleStyle) {
+          moduleStyle.remove()
+        }
+      })
+    })
+  }
+}
+
+const hashCode = (moduleId: string) => {
+  let hash = 0,
+    i,
+    chr
+  if (moduleId.length === 0) return hash
+  for (i = 0; i < moduleId.length; i++) {
+    chr = moduleId.charCodeAt(i)
+    hash = (hash << 5) - hash + chr
+    hash |= 0 // Convert to 32bit integer
+  }
+  return hash
+}