vitrify 0.1.1 → 0.2.2

package/src/node/bin/build.ts

@@ -0,0 +1,87 @@
+#!/usr/bin/node --experimental-specifier-resolution=node
+import { baseConfig } from '../index.js'
+// import { promises as fs } from 'fs'
+// import { routesToPaths } from '../helpers/routes.js'
+import { build as viteBuild } from 'vite'
+// import { SsrFunction } from '../vitrify-config.js'
+
+// export const prerender = async ({
+//   outDir,
+//   templatePath,
+//   manifestPath,
+//   entryServerPath,
+//   injectSsrContext
+// }: {
+//   outDir: string
+//   templatePath: string
+//   manifestPath: string
+//   entryServerPath: string
+//   injectSsrContext: SsrFunction
+// }) => {
+//   let template
+//   let manifest
+//   const promises = []
+//   template = (await fs.readFile(templatePath)).toString()
+//   manifest = await fs.readFile(manifestPath)
+//   let { render, getRoutes } = await import(entryServerPath)
+//   const routes = await getRoutes()
+//   const paths = routesToPaths(routes).filter(
+//     (i) => !i.includes(':') && !i.includes('*')
+//   )
+//   for (let 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)
+
+//     html = injectSsrContext(html, ssrContext)
+
+//     promises.push(fs.writeFile(outDir + filename, html, 'utf-8'))
+//   }
+//   return Promise.all(promises)
+// }
+
+export async function build(opts: {
+  ssr?: 'client' | 'server' | 'ssg'
+  base?: string
+  outDir?: string
+  appDir?: URL
+  publicDir?: URL
+}) {
+  const config = await baseConfig({
+    command: 'build',
+    mode: 'production',
+    ssr: opts?.ssr,
+    appDir: opts.appDir,
+    publicDir: opts.publicDir
+  })
+
+  config.build = {
+    ...config.build,
+    minify: false,
+    outDir: opts.outDir,
+    emptyOutDir: !!opts.outDir
+  }
+
+  if (opts.base) {
+    config.define = {
+      ...config.define,
+      __BASE_URL__: `'${opts.base}'`
+    }
+  }
+
+  return viteBuild({
+    configFile: false,
+    base: opts.base,
+    // logLevel: 'silent',
+    ...config
+  })
+}

package/src/node/bin/cli.ts

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+import cac from 'cac'
+import { getAppDir, parsePath } from '../app-urls.js'
+import { printHttpServerUrls } from '../helpers/logger.js'
+import type { ViteDevServer } from 'vite'
+import type { Server } from 'net'
+
+const cli = cac('vitrify')
+cli
+  .command('build')
+  .option('-m, --mode [mode]', 'Build mode', { default: 'csr' })
+  .option('--base [base]', 'Base public path')
+  .option('--outDir [outDir]', 'Output directory')
+  .option('--appDir [appDir]', 'App directory')
+  .option('--publicDir [publicDir]', 'Public directory')
+  .option('--productName [productName]', 'Product name')
+  .action(async (options) => {
+    const { build } = await import('./build.js')
+    let appDir: URL
+    let prerender, ssrFunctions
+    if (options.appDir) {
+      if (options.appDir.slice(-1) !== '/') options.appDir += '/'
+      appDir = new URL(`file://${options.appDir}`)
+    } else {
+      appDir = getAppDir()
+    }
+
+    const baseOutDir =
+      parsePath(options.outDir, appDir) || new URL('dist/', appDir)
+
+    const args: {
+      base: string
+      appDir?: URL
+      publicDir?: URL
+    } = {
+      base: options.base,
+      appDir,
+      publicDir: parsePath(options.publicDir, appDir)
+    }
+
+    switch (options.mode) {
+      case 'csr':
+        await build({
+          ...args,
+          outDir: new URL('spa/', baseOutDir).pathname
+        })
+        break
+      case 'ssr':
+        await build({
+          ssr: 'client',
+          ...args,
+          outDir: new URL('ssr/client/', baseOutDir).pathname
+        })
+        await build({
+          ssr: 'server',
+          ...args,
+          outDir: new URL('ssr/server/', baseOutDir).pathname
+        })
+        break
+      case 'ssg':
+        await build({
+          ssr: 'client',
+          ...args,
+          outDir: new URL('static/', baseOutDir).pathname
+        })
+        await build({
+          ssr: 'server',
+          ...args,
+          outDir: new URL('ssr/server/', baseOutDir).pathname
+        })
+        ;({ prerender, ssrFunctions } = await import(
+          new URL('ssr/server/prerender.mjs', baseOutDir).pathname
+        ))
+        prerender({
+          outDir: new URL('static/', baseOutDir).pathname,
+          templatePath: new URL('static/index.html', baseOutDir).pathname,
+          manifestPath: new URL('static/ssr-manifest.json', baseOutDir)
+            .pathname,
+          entryServerPath: new URL('ssr/server/entry-server.mjs', baseOutDir)
+            .pathname,
+          ssrFunctions
+        })
+        break
+      default:
+        console.log('Invalid build mode')
+        break
+    }
+  })
+
+cli
+  .command('dev')
+  .option('-m, --mode [mode]', 'Development server mode', { default: 'csr' })
+  .option(
+    '--host [host]',
+    'Specify which IP addresses the server should listen on',
+    { default: '127.0.0.1' }
+  )
+  .option('--appDir [appDir]', 'Application directory')
+  .option('--publicDir [publicDir]', 'Public directory')
+  .action(async (options) => {
+    let server: Server
+    let vite: ViteDevServer
+    if (options.host === true) {
+      options.host = '0.0.0.0'
+    }
+    const { createServer } = await import('./dev.js')
+    const cwd = (await import('../app-urls.js')).getCwd()
+    switch (options.mode) {
+      case 'ssr':
+        ;({ server, vite } = await createServer({
+          mode: 'ssr',
+          host: options.host,
+          appDir: parsePath(options.appDir, cwd),
+          publicDir: parsePath(options.publicDir, cwd)
+        }))
+        break
+      default:
+        ;({ server, vite } = await createServer({
+          host: options.host,
+          appDir: parsePath(options.appDir, cwd),
+          publicDir: parsePath(options.publicDir, cwd)
+        }))
+        break
+    }
+    console.log('Dev server running at:')
+    printHttpServerUrls(server, vite.config)
+  })
+
+cli.command('test').action(async (options) => {
+  const { test } = await import('./test.js')
+
+  let appDir: URL
+  if (options.appDir) {
+    if (options.appDir.slice(-1) !== '/') options.appDir += '/'
+    appDir = new URL(`file://${options.appDir}`)
+  } else {
+    appDir = getAppDir()
+  }
+  await test({
+    appDir
+  })
+})
+
+cli.command('run <file>').action(async (file, options) => {
+  const { run } = await import('./run.js')
+  const filePath = new URL(file, `file://${process.cwd()}/`)
+  await run(filePath.pathname)
+})
+
+// Default
+cli.command('').action((command, options) => {
+  cli.outputHelp()
+})
+
+cli.help()
+
+cli.parse()

package/src/node/bin/dev.ts

@@ -0,0 +1,138 @@
+import type { ViteDevServer, LogLevel } 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'
+
+export async function createServer({
+  port = 3000,
+  logLevel = 'info',
+  mode = 'csr',
+  framework = 'vue',
+  host,
+  appDir,
+  publicDir
+}: {
+  port?: number
+  logLevel?: LogLevel
+  mode?: 'csr' | 'ssr'
+  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`
+  )
+
+  /**
+   * @type {import('vite').ViteDevServer}
+   */
+  const config = await baseConfig({
+    ssr: mode === 'ssr' ? 'server' : undefined,
+    command: 'dev',
+    mode: 'development',
+    appDir,
+    publicDir
+  })
+  config.logLevel = logLevel
+  config.server = {
+    port,
+    middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+    fs: {
+      allow: [
+        searchForWorkspaceRoot(process.cwd()),
+        searchForWorkspaceRoot(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
+    },
+    host
+  }
+  const vite = await (
+    await import('vite')
+  ).createServer({
+    configFile: false,
+    ...config
+  })
+  const { productName = 'Product name' } = JSON.parse(
+    readFileSync(new URL('package.json', appDir).pathname, {
+      encoding: 'utf-8'
+    })
+  )
+
+  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)
+
+    // 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()
+
+    //     // 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 = {}
+    //     }
+
+    //     const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
+    //     const html = template
+    //       .replace(`<!--preload-links-->`, preloadLinks)
+    //       .replace(`<!--app-html-->`, appHtml)
+    //       .replace('<!--product-name-->', productName)
+
+    //     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)
+    //   }
+    // })
+    await app.listen(port || 3000, host)
+    server = app.server
+  } else {
+    server = (await vite.listen()).httpServer as Server
+  }
+  return { server, vite }
+}

package/src/node/bin/run.ts

@@ -0,0 +1,47 @@
+import { promises as fs } from 'fs'
+import readline from 'readline'
+import { getAppDir, getCliDir, getProjectURLs } from '../app-urls.js'
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+})
+
+export interface VitrifyContext {
+  vitrify: {
+    version: string
+  }
+  projectURLs: ReturnType<typeof getProjectURLs>
+}
+
+export async function run(filePath: string) {
+  const { run } = await import(filePath)
+  const appDir = getAppDir()
+  const cliDir = getCliDir()
+  const projectURLs = getProjectURLs(appDir, cliDir)
+  const pkg = JSON.parse(
+    (await fs.readFile(projectURLs.cli('package.json'), 'utf-8')).toString()
+  )
+
+  if (!run)
+    throw new Error(
+      `${filePath} does not have an export named run. Aborting...`
+    )
+
+  rl.question(
+    `
+The script ${filePath}
+will now be executed by vitrify.
+Make sure you trust the content of this script before proceeding.
+Press enter to proceed or CTRL+C to abort.`,
+    async (answer) => {
+      await run({
+        vitrify: {
+          version: pkg.version
+        },
+        resolve: projectURLs
+      })
+      rl.close()
+    }
+  )
+}

package/src/node/bin/test.ts

@@ -0,0 +1,24 @@
+import { startVitest } from 'vitest/node'
+import { baseConfig } from '../index.js'
+export async function test(opts: { appDir: URL }) {
+  const config = await baseConfig({
+    appDir: opts.appDir,
+    command: 'test',
+    mode: 'development'
+  })
+
+  await startVitest(
+    [],
+    {
+      root: opts.appDir.pathname,
+      dir: opts.appDir.pathname,
+
+      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

@@ -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')