vitrify 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,86 @@
+# Vitrify
+
+> Pre-configured Vite CLI for your framework
+
+- Use a simple configuration file to configure and integrate required Vite plugins into your project.
+- Client-Side Rendering (CSR) and Server-Side Rendering (SSR) builds and development servers.
+
+## Features
+
+- Uses [Fastify](https://github.com/fastify/fastify-vite) for the development server and SSR production server.
+  - Generates a Fastify plugin to serve your server-side rendered application.
+- A [`run`](./src/node/bin/run.ts) command which injects context such as application paths into the script which you want to run.
+- A [`test`](./src/node/bin/test.ts) command which runs a pre-configured [Vitest](https://github.com/vitest-dev/vitest) instance.
+- An [extra plugin layer](./src/node/plugins/index.ts) which provides some extra context such as the SSR mode (client or server) and PWA mode. Used for UI frameworks which render differently based on these settings.
+
+## Commands
+
+### build
+
+```
+Usage:
+  $ vitrify build
+
+Options:
+  -m, --mode [mode]            Build mode (default: csr)
+  --base [base]                Base public path
+  --outDir [outDir]            Output directory
+  --appDir [appDir]            App directory
+  --publicDir [publicDir]      Public directory
+  --productName [productName]  Product name
+  -h, --help                   Display this message
+```
+
+### dev
+
+```
+Usage:
+  $ vitrify dev
+
+Options:
+  -m, --mode [mode]        Development server mode (default: csr)
+  --host [host]            Specify which IP addresses the server should listen on (default: 127.0.0.1)
+  --appDir [appDir]        Application directory
+  --publicDir [publicDir]  Public directory
+  -h, --help               Display this message
+```
+
+### test
+
+```
+Usage:
+  $ vitrify test
+
+Options:
+  -h, --help  Display this message
+```
+
+### run
+
+```
+Usage:
+  $ vitrify run <file>
+
+Options:
+  -h, --help  Display this message
+```
+
+## Structure
+
+```mermaid
+  graph TD;
+    node/bin/cli.ts-->node/bin/build.ts;
+    node/bin/cli.ts-->node/bin/dev.ts;
+    node/bin/cli.ts-->node/bin/test.ts;
+    node/bin/cli.ts-->node/bin/run.ts;
+    node/bin/build.ts-->node/index.ts{Load baseConfig};
+    node/bin/dev.ts-->node/index.ts{Load baseConfig};
+    node/index.ts-->vitrify.config.js{Load vitrify.config.js};
+    vitrify.config.js-->node/plugins{Load plugins};
+    node/plugins-->framework{Load framework entrypoints from vite/...};
+    framework-->merge{Merge vitrify.config.js with Vitrify configuration};
+    merge-->build{Build the application};
+    merge-->dev{Spin up dev server};
+    node/bin/test.ts-->test{Run a pre-configured Vitest instance};
+    node/bin/run.ts-->run{Inject context into script and run script};
+```

package/dist/app-urls.js

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

package/dist/bin/build.js

@@ -0,0 +1,73 @@
+#!/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) {
+    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/dist/bin/cli.js

@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+import cac from 'cac';
+import { appDir as defaultAppDir, parsePath } from '../app-urls.js';
+import { printHttpServerUrls } from '../helpers/logger.js';
+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 prerender;
+    let appDir;
+    if (options.appDir) {
+        if (options.appDir.slice(-1) !== '/')
+            options.appDir += '/';
+        appDir = new URL(`file://${options.appDir}`);
+    }
+    else {
+        appDir = defaultAppDir;
+    }
+    const baseOutDir = parsePath(options.outDir) || new URL('dist/', appDir);
+    const args = {
+        base: options.base,
+        appDir,
+        publicDir: parsePath(options.publicDir)
+    };
+    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 = (await import(new URL('ssr/server/prerender.js', appDir).pathname)).prerender;
+            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
+            });
+            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;
+    let vite;
+    if (options.host === true) {
+        options.host = '0.0.0.0';
+    }
+    const { createServer } = await import('./dev.js');
+    switch (options.mode) {
+        case 'ssr':
+            ;
+            ({ server, vite } = await createServer({
+                mode: 'ssr',
+                host: options.host,
+                appDir: parsePath(options.appDir),
+                publicDir: parsePath(options.publicDir)
+            }));
+            break;
+        default:
+            ;
+            ({ server, vite } = await createServer({
+                host: options.host,
+                appDir: parsePath(options.appDir),
+                publicDir: parsePath(options.publicDir)
+            }));
+            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;
+    if (options.appDir) {
+        if (options.appDir.slice(-1) !== '/')
+            options.appDir += '/';
+        appDir = new URL(`file://${options.appDir}`);
+    }
+    else {
+        appDir = defaultAppDir;
+    }
+    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/dist/bin/dev.js

@@ -0,0 +1,106 @@
+import { searchForWorkspaceRoot } from 'vite';
+import { baseConfig } from '../index.js';
+import fastify from 'fastify';
+import { readFileSync } from 'fs';
+export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr', framework = 'vue', host, appDir, publicDir }) {
+    const { appDir: tempAppDir, cliDir } = await import('../app-urls.js');
+    const cwd = appDir || tempAppDir;
+    if (!appDir)
+        appDir = tempAppDir;
+    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(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;
+    let 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;
+    }
+    return { server, vite };
+}

package/dist/bin/run.js

@@ -0,0 +1,26 @@
+import { projectURLs } from '../app-urls.js';
+import { promises as fs } from 'fs';
+import readline from 'readline';
+const pkg = JSON.parse((await fs.readFile(projectURLs.cli('package.json'), 'utf-8')).toString());
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+export async function run(filePath) {
+    const { run } = await import(filePath);
+    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/dist/helpers/logger.js

@@ -0,0 +1,108 @@
+// 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 os from 'os';
+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) {
+    console.log(msg ? ` ${greenBanner} ${msg}` : '');
+};
+export const warn = function (msg, pill) {
+    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, pill) {
+    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) => bgGreen.black('', msg, '');
+export const infoPill = (msg) => inverse('', msg, '');
+export const errorPill = (msg) => bgRed.white('', msg, '');
+export const warningPill = (msg) => bgYellow.black('', msg, '');
+export const success = function (msg, title = 'SUCCESS') {
+    console.log(` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`);
+};
+export const getSuccess = function (msg, title) {
+    return ` ${greenBanner} ${successPill(title)} ${green(dot + ' ' + msg)}`;
+};
+export const info = function (msg, title = 'INFO') {
+    console.log(` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`);
+};
+export const getInfo = function (msg, title) {
+    return ` ${greenBanner} ${infoPill(title)} ${green(dot)} ${msg}`;
+};
+export const error = function (msg, title = 'ERROR') {
+    console.log(` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`);
+};
+export const getError = function (msg, title = 'ERROR') {
+    return ` ${redBanner} ${errorPill(title)} ${red(dot + ' ' + msg)}`;
+};
+export const warning = function (msg, title = 'WARNING') {
+    console.log(` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`);
+};
+export const getWarning = function (msg, title = 'WARNING') {
+    return ` ${yellowBanner} ${warningPill(title)} ${yellow(dot + ' ' + msg)}`;
+};
+export function printHttpServerUrls(server, config) {
+    const address = server.address();
+    const isAddressInfo = (x) => 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, protocol, port, base, info) {
+    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/dist/helpers/routes.js

@@ -0,0 +1,24 @@
+export const routesToPaths = (routes) => {
+    if (!routes)
+        return ['/'];
+    const paths = new Set();
+    const getPaths = (routes, 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/dist/helpers/utils.js

@@ -0,0 +1,24 @@
+export function resolveHostname(optionsHost) {
+    let host;
+    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 };
+}