vitrify 0.2.0 → 0.2.3

package/dist/bin/cli.js

@@ -13,8 +13,8 @@ cli
     .option('--productName [productName]', 'Product name')
     .action(async (options) => {
     const { build } = await import('./build.js');
-    let prerender;
     let appDir;
+    let prerender, ssrFunctions;
     if (options.appDir) {
         if (options.appDir.slice(-1) !== '/')
             options.appDir += '/';
@@ -59,14 +59,15 @@ cli
                 ...args,
                 outDir: new URL('ssr/server/', baseOutDir).pathname
             });
-            prerender = (await import(new URL('ssr/server/prerender.js', appDir).pathname)).prerender;
+            ({ 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
+                    .pathname,
+                ssrFunctions
             });
             break;
         default:

package/dist/{vue → frameworks/vue}/prerender.js

@@ -1,5 +1,5 @@
 import { promises as fs } from 'fs';
-import { routesToPaths } from '../helpers/routes.js';
+import { routesToPaths } from '../../helpers/routes.js';
 export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }) => {
     const promises = [];
     const template = (await fs.readFile(templatePath)).toString();

package/dist/index.js

@@ -197,10 +197,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         plugins.unshift({
             name: 'html-transform',
             enforce: 'pre',
-            config: (config, env) => {
-                if (config.vitrify?.productName)
-                    productName = config.vitrify?.productName;
-            },
             transform: (code, id) => {
                 if (id.endsWith('App.vue')) {
                     code =
@@ -232,6 +228,21 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 }
             }
         });
+        plugins.unshift({
+            name: 'product-name',
+            enforce: 'post',
+            config: (config, env) => {
+                if (config.vitrify?.productName)
+                    productName = config.vitrify?.productName;
+            },
+            transformIndexHtml: {
+                enforce: 'post',
+                transform: (html) => {
+                    html = html.replace('<!--product-name-->', productName);
+                    return html;
+                }
+            }
+        });
     }
     const alias = [
         { find: 'src', replacement: srcDir.pathname },
@@ -285,6 +296,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 ? {
                     input: [
                         new URL('ssr/entry-server.ts', frameworkDir).pathname,
+                        new URL('ssr/prerender.ts', frameworkDir).pathname,
                         new URL('ssr/server.ts', frameworkDir).pathname
                     ],
                     output: {
@@ -296,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/dist/plugins/quasar.js

@@ -289,7 +289,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
           export * from 'quasar/src/composables.js';
           export * from 'quasar/src/directives.js';
           export * from 'quasar/src/utils.js';
-          export { default as Quasar } from 'quasar/src/vue-plugin.js'`;
+          export { default as Quasar } from 'quasar/src/install-quasar.js'`;
                 }
                 return null;
             }

package/dist/types/{vue → frameworks/vue}/fastify-ssr-plugin.d.ts

@@ -1,6 +1,6 @@
 import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
 import type { ViteDevServer } from 'vite';
-import type { SsrFunction } from '../vitrify-config.js';
+import type { SsrFunction } from '../../vitrify-config.js';
 export interface FastifySsrOptions {
     baseUrl?: string;
     provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>;

package/dist/types/{vue → frameworks/vue}/prerender.d.ts

@@ -1,4 +1,4 @@
-import type { SsrFunction } from '../vitrify-config.js';
+import type { SsrFunction } from '../../vitrify-config.js';
 export declare const prerender: ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }: {
     outDir: string;
     templatePath: string;

package/dist/types/{vue → frameworks/vue}/server.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import type { FastifyInstance } from 'fastify';
-import type { SsrFunction } from '../vitrify-config.js';
+import type { SsrFunction } from '../../vitrify-config.js';
 export declare const createApp: ({ setup, appDir, baseUrl, ssrFunctions }: {
     setup: (fastify: FastifyInstance) => any;
     appDir: URL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -103,8 +103,7 @@
   },
   "files": [
     "dist",
-    "src/node/helpers/ssr.ts",
-    "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
+  )
+}