vitrify 0.2.1 → 0.2.4

package/dist/index.js

@@ -308,6 +308,9 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                             if (id.includes('fastify-ssr-plugin')) {
                                 return 'fastify-ssr-plugin';
                             }
+                            else if (id.includes('prerender')) {
+                                return 'prerender';
+                            }
                             else if (id.includes('node_modules')) {
                                 return 'vendor';
                             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -71,6 +71,7 @@
     "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"
   },
@@ -83,7 +84,6 @@
     "quasar": "^2.6.6",
     "rollup": "^2.70.1",
     "typescript": "^4.6.3",
-    "unplugin-vue-components": "^0.19.3",
     "vite": "^2.9.5",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14"
@@ -103,8 +103,7 @@
   },
   "files": [
     "dist",
-    "src/node/frameworks",
-    "src/vite",
+    "src",
     "!dist/**/*.test.js",
     "!dist/**/test.js"
   ]

package/src/node/app-urls.ts

@@ -0,0 +1,38 @@
+// import { resolve } from 'import-meta-resolve'
+import { existsSync } from 'fs'
+
+export const getPkgJsonDir = (dir: URL): URL => {
+  const pkgJsonPath = new URL('package.json', dir)
+  if (existsSync(pkgJsonPath.pathname)) {
+    return new URL('./', pkgJsonPath)
+  }
+  return getPkgJsonDir(new URL('..', dir))
+}
+export const getAppDir = () =>
+  getPkgJsonDir(new URL(`file://${process.cwd()}/`))
+export const getCliDir = () => getPkgJsonDir(new URL('./', import.meta.url))
+export const getCliViteDir = (cliDir: URL) => new URL('src/vite/', cliDir)
+export const getSrcDir = (appDir: URL) => new URL('src/', appDir)
+export const getCwd = () => new URL(`file://${process.cwd()}/`)
+// export const quasarDir = getPkgJsonDir(new URL('./', await resolve('quasar', appDir.href)))
+
+export const parsePath = (path: string, basePath: URL) => {
+  if (path) {
+    if (path.slice(-1) !== '/') path += '/'
+    if (path.startsWith('.')) {
+      return new URL(path, basePath)
+    } else if (path) {
+      return new URL(`file://${path}`)
+    }
+  }
+  return
+}
+
+export const getProjectURLs = (appDir: URL, cliDir: URL) => {
+  const srcDir = getSrcDir(appDir)
+  return {
+    src: (path: string) => new URL(path, srcDir),
+    app: (path: string) => new URL(path, appDir),
+    cli: (path: string) => new URL(path, cliDir)
+  }
+}

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