vitrify 0.2.5 → 0.5.0

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

@@ -3,11 +3,11 @@ 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
@@ -15,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
-  ssrFunctions?: SsrFunction[]
+  onRendered?: OnRenderedHook[]
+  mode?: string
 }
 
 const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
@@ -27,29 +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)
 
-    fastify.get('*', async (req, res) => {
+  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
+    // })
+
+    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.originalUrl
-        const url = req.raw.url
+        const url = req.raw.url?.replace(options.baseUrl!, '/')
         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)
+
+        let template = readFileSync(
+          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
+        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 {
@@ -58,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')
@@ -70,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,
@@ -85,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,
@@ -93,9 +166,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 +189,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 +205,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,38 +1,45 @@
 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 { FastifyCsrPlugin } from './fastify-csr-plugin.js'
+import type { FastifySsrPlugin } from './fastify-ssr-plugin.js'
 
 export const createApp = ({
-  setup,
+  onSetup,
   appDir,
   baseUrl,
-  ssrFunctions
+  onRendered,
+  fastifyPlugin,
+  vitrifyDir,
+  mode
 }: {
-  setup: (fastify: FastifyInstance) => any
+  onSetup: OnSetupFile[]
   appDir: URL
   baseUrl?: string
-  ssrFunctions?: SsrFunction[]
+  onRendered?: OnRenderedHook[]
+  fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin
+  vitrifyDir?: URL
+  mode: string
 }) => {
   const app = fastify({
     logger: true
   })
 
-  app.register(fastifySsrPlugin, {
+  app.register(fastifyPlugin, {
     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')

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
+}

package/src/node/helpers/logger.ts

@@ -1,98 +1,11 @@
 // https://github.com/quasarframework/quasar/blob/dev/app/lib/helpers/logger.js
 import chalk from 'chalk'
-const { bgGreen, green, inverse, bgRed, red, bgYellow, yellow } = chalk
-import readline from 'readline'
 import type { AddressInfo, Server } from 'net'
 import type { ResolvedConfig, Logger } from 'vite'
 import os from 'os'
 import type { Hostname } from '../helpers/utils.js'
 import { resolveHostname } from '../helpers/utils.js'
 
-/**
- * Main approach - App CLI related
- */
-
-const dot = '•'
-const banner = 'App ' + dot
-const greenBanner = green(banner)
-const redBanner = red(banner)
-const yellowBanner = yellow(banner)
-
-export const clearConsole = process.stdout.isTTY
-  ? () => {
-      // Fill screen with blank lines. Then move to 0 (beginning of visible part) and clear it
-      const blank = '\n'.repeat(process.stdout.rows)
-      console.log(blank)
-      readline.cursorTo(process.stdout, 0, 0)
-      readline.clearScreenDown(process.stdout)
-    }
-  : () => {}
-
-export const log = function (msg?: string) {
-  console.log(msg ? ` ${greenBanner} ${msg}` : '')
-}
-
-export const warn = function (msg?: string, pill?: string) {
-  if (msg !== void 0) {
-    const pillBanner = pill !== void 0 ? bgYellow.black('', pill, '') + ' ' : ''
-
-    console.warn(` ${yellowBanner} ⚠️  ${pillBanner}${msg}`)
-  } else {
-    console.warn()
-  }
-}
-
-export const fatal = function (msg?: string, pill?: string) {
-  if (msg !== void 0) {
-    const pillBanner = pill !== void 0 ? errorPill(pill) + ' ' : ''
-
-    console.error(`\n ${redBanner} ⚠️  ${pillBanner}${msg}\n`)
-  } else {
-    console.error()
-  }
-
-  process.exit(1)
-}
-
-/**
- * Extended approach - Compilation status & pills
- */
-
-export const successPill = (msg?: string) => bgGreen.black('', msg, '')
-export const infoPill = (msg?: string) => inverse('', msg, '')
-export const errorPill = (msg?: string) => bgRed.white('', msg, '')
-export const warningPill = (msg?: string) => bgYellow.black('', msg, '')
-
-export const success = function (msg?: string, title = 'SUCCESS') {
-  console.log(` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`)
-}
-export const getSuccess = function (msg?: string, title?: string) {
-  return ` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`
-}
-
-export const info = function (msg?: string, title = 'INFO') {
-  console.log(` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`)
-}
-export const getInfo = function (msg?: string, title?: string) {
-  return ` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`
-}
-
-export const error = function (msg?: string, title = 'ERROR') {
-  console.log(` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`)
-}
-export const getError = function (msg?: string, title = 'ERROR') {
-  return ` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`
-}
-
-export const warning = function (msg?: string, title = 'WARNING') {
-  console.log(
-    ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
-  )
-}
-export const getWarning = function (msg?: string, title = 'WARNING') {
-  return ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`
-}
-
 export function printHttpServerUrls(
   server: Server,
   config: ResolvedConfig