vitrify 0.3.0 → 0.5.1

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

@@ -3,10 +3,11 @@ 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
@@ -14,11 +15,14 @@ export interface FastifySsrOptions {
     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 +30,89 @@ 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
-    await fastify.register(middie)
-    fastify.use(options.vite.middlewares)
+  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') {
+    // 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 { createVitrifyDevServer } = await import('vitrify/dev')
+    const vite = await createVitrifyDevServer({
+      appDir: options.appDir,
+      ssr: 'ssr',
+      framework: 'vue',
+      base: options.baseUrl
+    })
+    // 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
+    // })
 
-    fastify.get('*', async (req, res) => {
+    console.log('Dev mode')
+    if (!('use' in fastify)) {
+      const middie = (await import('@fastify/middie')).default
+      await fastify.register(middie)
+    }
+    fastify.use(vite.middlewares)
+
+    fastify.get(`${options.baseUrl}*`, async (req, res) => {
       try {
-        const url = req.raw.url
+        const url = req.raw.url?.replace(options.baseUrl!, '/')
         const ssrContext = {
           req,
           res
         }
-        const template = readFileSync(
-          new URL('index.html', options.cliDir)
+
+        let template = readFileSync(
+          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
+        template = await vite.transformIndexHtml(url!, template)
+
+        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 +121,21 @@ 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({
+          mods: 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 +143,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 +158,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 +189,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 +205,4 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
 }
 
 export { fastifySsrPlugin }
+export type FastifySsrPlugin = typeof fastifySsrPlugin

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

@@ -1,30 +1,45 @@
 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 { FastifyCsrPlugin } from './fastify-csr-plugin.js'
+import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
 export const createApp = ({
-  setup,
+  onSetup,
   appDir,
   baseUrl,
-  onRenderedHooks
+  onRendered,
+  fastifyPlugin,
+  vitrifyDir,
+  mode
 }: {
-  setup: (fastify: FastifyInstance) => any
+  onSetup: OnSetupFile[]
   appDir: URL
   baseUrl?: string
-  onRenderedHooks?: OnRenderedHook[]
+  onRendered?: OnRenderedHook[]
+  fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
+  vitrifyDir?: URL
+  mode: string
 }) => {
   const app = fastify({
     logger: true
   })
 
-  app.register(fastifySsrPlugin, {
+  app.register(fastifyPlugin, {
     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,85 @@
+// 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,
+  styles = new Map<string, string>(),
+  checkedComponents = new Set()
+}: {
+  mods: Set<ModuleNode>
+  styles?: Map<string, string>
+  checkedComponents?: Set<unknown>
+}) => {
+  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({
+        mods: 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
+}