vitrify 0.2.0 → 0.2.3

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

@@ -0,0 +1,137 @@
+import type {
+  FastifyPluginCallback,
+  FastifyRequest,
+  FastifyReply
+} from 'fastify'
+import fastifyStatic from 'fastify-static'
+import { readFileSync } from 'fs'
+// import { injectSsrContext } from '../helpers/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>>
+  vite?: ViteDevServer
+  cliDir?: URL
+  appDir?: URL
+  productName?: string
+  ssrFunctions?: SsrFunction[]
+}
+
+const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
+  fastify,
+  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)
+
+    fastify.get('*', 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)
+        ).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
+        let manifest
+        // TODO: https://github.com/vitejs/vite/issues/2282
+        try {
+          manifest = {}
+        } catch (e) {
+          manifest = {}
+        }
+
+        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')
+
+        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)
+        options.vite && options.vite.ssrFixStacktrace(e)
+        res.code(500)
+        res.send(e.stack)
+      }
+    })
+  } else {
+    options.baseUrl = options.baseUrl || '/'
+    fastify.register(fastifyStatic, {
+      root: new URL('./dist/ssr/client', options.appDir).pathname,
+      wildcard: false,
+      index: false,
+      prefix: options.baseUrl
+    })
+
+    fastify.get(`${options.baseUrl}*`, async (req, res) => {
+      const url = req.raw.url
+      const provide = options.provide ? await options.provide(req, res) : {}
+      const ssrContext: Record<string, any> = {
+        req,
+        res,
+        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()
+      const manifest = JSON.parse(
+        readFileSync(
+          new URL('./dist/ssr/client/ssr-manifest.json', options.appDir)
+        ).toString()
+      )
+      const render = (
+        await import(
+          new URL('./dist/ssr/server/entry-server.mjs', options.appDir).pathname
+        )
+      ).render
+
+      const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
+
+      if (!ssrContext.initialState) ssrContext.initialState = {}
+      ssrContext.initialState.provide = provide
+
+      let html = template
+        .replace(`<!--preload-links-->`, preloadLinks)
+        .replace(`<!--app-html-->`, appHtml)
+
+      if (options.ssrFunctions?.length) {
+        for (const ssrFunction of options.ssrFunctions) {
+          html = ssrFunction(html, ssrContext)
+        }
+      }
+
+      res.code(200)
+      res.type('text/html')
+      res.send(html)
+    })
+  }
+
+  done()
+}
+
+export { fastifySsrPlugin }

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

@@ -0,0 +1,49 @@
+import { promises as fs } from 'fs'
+import { routesToPaths } from '../../helpers/routes.js'
+import type { SsrFunction } from '../../vitrify-config.js'
+
+export const prerender = async ({
+  outDir,
+  templatePath,
+  manifestPath,
+  entryServerPath,
+  ssrFunctions
+}: {
+  outDir: string
+  templatePath: string
+  manifestPath: string
+  entryServerPath: string
+  ssrFunctions: SsrFunction[]
+}) => {
+  const promises = []
+  const template = (await fs.readFile(templatePath)).toString()
+  const manifest = await fs.readFile(manifestPath)
+  const { render, getRoutes } = await import(entryServerPath)
+  const routes = await getRoutes()
+  const paths = routesToPaths(routes).filter(
+    (i) => !i.includes(':') && !i.includes('*')
+  )
+  for (const 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)
+
+    if (ssrFunctions?.length) {
+      for (const ssrFunction of ssrFunctions) {
+        html = ssrFunction(html, ssrContext)
+      }
+    }
+
+    promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))
+  }
+  return Promise.all(promises)
+}

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

@@ -0,0 +1,38 @@
+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'
+
+export const createApp = ({
+  setup,
+  appDir,
+  baseUrl,
+  ssrFunctions
+}: {
+  setup: (fastify: FastifyInstance) => any
+  appDir: URL
+  baseUrl?: string
+  ssrFunctions?: SsrFunction[]
+}) => {
+  const app = fastify({
+    logger: true
+  })
+
+  app.register(fastifySsrPlugin, {
+    baseUrl,
+    appDir,
+    ssrFunctions
+  })
+
+  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/logger.ts

@@ -0,0 +1,142 @@
+// 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
+): void {
+  const address = server.address()
+  const isAddressInfo = (x: any): x is AddressInfo => x?.address
+  if (isAddressInfo(address)) {
+    const hostname = resolveHostname(config.server.host)
+    const protocol = config.server.https ? 'https' : 'http'
+    printServerUrls(
+      hostname,
+      protocol,
+      address.port,
+      config.base,
+      config.logger.info
+    )
+  }
+}
+
+function printServerUrls(
+  hostname: Hostname,
+  protocol: string,
+  port: number,
+  base: string,
+  info: Logger['info']
+): void {
+  if (hostname.host === '127.0.0.1') {
+    const url = `${protocol}://${hostname.name}:${chalk.bold(port)}${base}`
+    info(`  > Local: ${chalk.cyan(url)}`)
+    if (hostname.name !== '127.0.0.1') {
+      info(`  > Network: ${chalk.dim('use `--host` to expose')}`)
+    }
+  } else {
+    Object.values(os.networkInterfaces())
+      .flatMap((nInterface) => nInterface ?? [])
+      .filter((detail) => detail && detail.address && detail.family === 'IPv4')
+      .map((detail) => {
+        const type = detail.address.includes('127.0.0.1')
+          ? 'Local:   '
+          : 'Network: '
+        const host = detail.address.replace('127.0.0.1', hostname.name)
+        const url = `${protocol}://${host}:${chalk.bold(port)}${base}`
+        return `  > ${type} ${chalk.cyan(url)}`
+      })
+      .forEach((msg) => info(msg))
+  }
+}

package/src/node/helpers/routes.ts

@@ -0,0 +1,29 @@
+// https://github.com/antfu/vite-ssg/blob/462722203dade87365a519d847fcd881ee16a7f4/src/node/utils.ts#L13
+import type { RouteRecordRaw } from 'vue-router'
+
+export const routesToPaths = (routes?: RouteRecordRaw[]) => {
+  if (!routes) return ['/']
+
+  const paths: Set<string> = new Set()
+
+  const getPaths = (routes: RouteRecordRaw[], prefix = '') => {
+    // remove trailing slash
+    prefix = prefix.replace(/\/$/g, '')
+    for (const route of routes) {
+      let path = route.path
+      // check for leading slash
+      if (route.path) {
+        path =
+          prefix && !route.path.startsWith('/')
+            ? `${prefix}/${route.path}`
+            : route.path
+
+        paths.add(path)
+      }
+      if (Array.isArray(route.children)) getPaths(route.children, path)
+    }
+  }
+
+  getPaths(routes)
+  return [...paths]
+}

package/src/node/helpers/ssr.ts.bak

@@ -0,0 +1,52 @@
+export const injectSsrContext = (html: string, ssrContext: Record<string, any>) => html.replace(
+  /(<html[^>]*)(>)/i,
+  (found, start, end) => {
+    let matches
+
+    matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i)
+    if (matches) {
+      start = start.replace(matches[0], '')
+    }
+
+    matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i)
+    if (matches) {
+      start = start.replace(matches[0], '')
+    }
+
+    return `${start} ${ssrContext._meta.htmlAttrs || ''} ${end}`
+  }
+)
+  .replace(
+    /(<head[^>]*)(>)/i,
+    (_, start, end) => `${start}${end}${ssrContext._meta.headTags || ''}`
+  )
+  .replace(
+    /(<\/head>)/i,
+    (_, tag) => `${ssrContext._meta.resourceStyles || ''}${ssrContext._meta.endingHeadTags || ''}${tag}`
+  )
+  .replace(
+    /(<body[^>]*)(>)/i,
+    (found, start, end) => {
+      let classes = ssrContext._meta.bodyClasses || ''
+
+      const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i)
+
+      if (matches) {
+        if (matches[1].length > 0) {
+          classes += ` ${matches[1]}`
+        }
+        start = start.replace(matches[0], '')
+      }
+
+      return `${start} class="${classes.trim()}" ${ssrContext._meta.bodyAttrs || ''}${end}${ssrContext._meta.bodyTags || ''}`
+    }
+  )
+  .replace(`<!--initial-state-->`, `<script>
+  window.__INITIAL_STATE__ = ${JSON.stringify(ssrContext.initialState)}
+</script>
+`)
+
+export const injectInitialState = (html: string, ssrContext: Record<string, any>) =>
+  html.replace(`<!--initial-state-->`, `<script>
+  window.__INITIAL_STATE__ = ${JSON.stringify(ssrContext.initialState)}
+  </script>`)

package/src/node/helpers/utils.ts

@@ -0,0 +1,37 @@
+// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/logger.ts
+export interface Hostname {
+  // undefined sets the default behaviour of server.listen
+  host: string | undefined
+  // resolve to localhost when possible
+  name: string
+}
+
+export function resolveHostname(
+  optionsHost: string | boolean | undefined
+): Hostname {
+  let host: string | undefined
+  if (
+    optionsHost === undefined ||
+    optionsHost === false ||
+    optionsHost === 'localhost'
+  ) {
+    // Use a secure default
+    host = '127.0.0.1'
+  } else if (optionsHost === true) {
+    // If passed --host in the CLI without arguments
+    host = undefined // undefined typically means 0.0.0.0 or :: (listen on all IPs)
+  } else {
+    host = optionsHost
+  }
+
+  // Set host name to localhost when possible, unless the user explicitly asked for '127.0.0.1'
+  const name =
+    (optionsHost !== '127.0.0.1' && host === '127.0.0.1') ||
+    host === '0.0.0.0' ||
+    host === '::' ||
+    host === undefined
+      ? 'localhost'
+      : host
+
+  return { host, name }
+}