vitrify 0.1.0 → 0.2.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,36 @@
+// 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 getAppDir = () => getPkgJsonDir(new URL(`file://${process.cwd()}/`));
+export const getCliDir = () => getPkgJsonDir(new URL('./', import.meta.url));
+export const getCliViteDir = (cliDir) => new URL('src/vite/', cliDir);
+export const getSrcDir = (appDir) => 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, basePath) => {
+    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, cliDir) => {
+    const srcDir = getSrcDir(appDir);
+    return {
+        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,139 @@
+#!/usr/bin/env node
+import cac from 'cac';
+import { getAppDir, 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 appDir;
+    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: 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;
+    let vite;
+    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;
+    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/dist/bin/dev.js

@@ -0,0 +1,108 @@
+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 { 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;
+    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,29 @@
+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 async function run(filePath) {
+    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/dist/frameworks/vue/fastify-ssr-plugin.js

@@ -0,0 +1,91 @@
+import fastifyStatic from 'fastify-static';
+import { readFileSync } from 'fs';
+const fastifySsrPlugin = 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) {
+                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 = {
+                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/dist/frameworks/vue/prerender.js

@@ -0,0 +1,29 @@
+import { promises as fs } from 'fs';
+import { routesToPaths } from '../../helpers/routes.js';
+export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, ssrFunctions }) => {
+    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/dist/frameworks/vue/server.js

@@ -0,0 +1,20 @@
+import fastify from 'fastify';
+// 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 }) => {
+    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')