vitrify 0.3.0 → 0.4.0

package/dist/app-urls.js

@@ -14,7 +14,7 @@ export const getSrcDir = (appDir) => new URL('src/', appDir);
 export const getCwd = () => new URL(`file://${process.cwd()}/`);
 export const parsePath = (path, basePath) => {
     if (path) {
-        if (path.slice(-1) !== '/')
+        if (!path.includes('.') && path.slice(-1) !== '/')
             path += '/';
         if (path.startsWith('.')) {
             return new URL(path, basePath);

package/dist/bin/cli.js

@@ -36,6 +36,13 @@ cli
                 outDir: new URL('spa/', baseOutDir).pathname
             });
             break;
+        case 'fastify':
+            await build({
+                ssr: 'fastify',
+                ...args,
+                outDir: new URL('server/', baseOutDir).pathname
+            });
+            break;
         case 'ssr':
             await build({
                 ssr: 'client',
@@ -80,28 +87,43 @@ cli
     .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('--app [app]', 'Fastify app instance path')
     .option('--publicDir [publicDir]', 'Public directory')
     .action(async (options) => {
     let server;
-    let vite;
+    let config;
     if (options.host === true) {
         options.host = '0.0.0.0';
     }
     const { createServer } = await import('./dev.js');
     const cwd = (await import('../app-urls.js')).getCwd();
+    let app;
+    const appPath = parsePath(options.app, cwd)?.pathname;
+    if (appPath) {
+        app = await import(appPath);
+    }
     switch (options.mode) {
         case 'ssr':
             ;
-            ({ server, vite } = await createServer({
+            ({ server, config } = await createServer({
                 mode: 'ssr',
                 host: options.host,
                 appDir: parsePath(options.appDir, cwd),
                 publicDir: parsePath(options.publicDir, cwd)
             }));
             break;
+        case 'fastify':
+            ;
+            ({ server, config } = await createServer({
+                mode: 'fastify',
+                host: options.host,
+                appDir: parsePath(options.appDir, cwd),
+                publicDir: parsePath(options.publicDir, cwd)
+            }));
+            break;
         default:
             ;
-            ({ server, vite } = await createServer({
+            ({ server, config } = await createServer({
                 host: options.host,
                 appDir: parsePath(options.appDir, cwd),
                 publicDir: parsePath(options.publicDir, cwd)
@@ -109,7 +131,7 @@ cli
             break;
     }
     console.log('Dev server running at:');
-    printHttpServerUrls(server, vite.config);
+    printHttpServerUrls(server, config);
 });
 cli.command('test').action(async (options) => {
     const { test } = await import('./test.js');

package/dist/bin/dev.js

@@ -1,19 +1,20 @@
 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();
+export async function createVitrifyDevServer({ port = 3000, logLevel = 'info', mode = 'csr', framework = 'vue', host, appDir, publicDir }) {
+    const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import('../app-urls.js');
     const cliDir = getCliDir();
     if (!appDir)
         appDir = getAppDir();
-    const { fastifySsrPlugin } = await import(`../frameworks/${framework}/fastify-ssr-plugin.js`);
-    /**
-     * @type {import('vite').ViteDevServer}
-     */
-    const config = await baseConfig({
-        ssr: mode === 'ssr' ? 'server' : undefined,
+    let config = {};
+    let ssrMode;
+    if (mode === 'ssr')
+        ssrMode = 'server';
+    if (mode === 'fastify')
+        ssrMode = 'fastify';
+    config = await baseConfig({
+        framework,
+        ssr: ssrMode,
         command: 'dev',
         mode: 'development',
         appDir,
@@ -21,12 +22,16 @@ export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr
     });
     config.logLevel = logLevel;
     config.server = {
+        https: config.server?.https,
         port,
-        middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+        // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+        middlewareMode: mode !== 'csr' ? 'ssr' : false,
         fs: {
             allow: [
                 searchForWorkspaceRoot(process.cwd()),
-                searchForWorkspaceRoot(appDir.pathname),
+                ...(Array.isArray(appDir)
+                    ? appDir.map((dir) => searchForWorkspaceRoot(dir.pathname))
+                    : [searchForWorkspaceRoot(appDir.pathname)]),
                 searchForWorkspaceRoot(cliDir.pathname)
                 // appDir.pathname,
             ]
@@ -39,29 +44,56 @@ export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr
         },
         host
     };
-    const vite = await (await import('vite')).createServer({
+    const vitrifyDevServer = 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;
+    return vitrifyDevServer;
+}
+export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr', framework = 'vue', host, appDir, publicDir }) {
+    const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import('../app-urls.js');
+    const cliDir = getCliDir();
+    const vite = await createVitrifyDevServer({
+        port,
+        logLevel,
+        mode,
+        framework,
+        host,
+        appDir,
+        publicDir
+    });
+    let entryUrl;
+    let setup;
     let server;
-    if (mode === 'ssr') {
-        console.log('SSR mode');
-        app = fastify();
-        await app.register(fastifySsrPlugin, {
-            appDir,
-            cliDir,
-            vite,
-            productName
+    console.log(`Development mode: ${mode}`);
+    if (['ssr', 'fastify'].includes(mode)) {
+        const entryUrl = mode === 'fastify'
+            ? new URL('src/vite/fastify/entry.ts', cliDir).pathname
+            : new URL(`src/vite/${framework}/ssr/entry-server.ts`, cliDir).pathname;
+        ({ setup } = await vite.ssrLoadModule(entryUrl));
+        const app = fastify({
+            https: typeof vite.config.server.https === 'object'
+                ? vite.config.server.https
+                : {}
+        });
+        if (setup) {
+            await setup({
+                fastify: app
+            });
+        }
+        // await app.register(fastifySsrPlugin, {
+        //   appDir,
+        //   vitrifyDir: new URL('../..', import.meta.url),
+        //   mode: 'development'
+        // })
+        await app.listen({
+            port: Number(port || 3000),
+            host
         });
-        await app.listen(port || 3000, host);
         server = app.server;
     }
     else {
         server = (await vite.listen()).httpServer;
     }
-    return { server, vite };
+    return { server, config: vite.config };
 }

package/dist/frameworks/vue/fastify-ssr-plugin.js

@@ -1,22 +1,66 @@
-import fastifyStatic from 'fastify-static';
+import fastifyStatic from '@fastify/static';
 import { readFileSync } from 'fs';
+import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js';
 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;
+    options.vitrifyDir =
+        options.vitrifyDir || new URL('../../..', import.meta.url);
+    const frameworkDir = new URL('vite/vue/', options.vitrifyDir);
+    options.baseUrl = options.baseUrl || '/';
+    if (options.baseUrl.charAt(options.baseUrl.length - 1) !== '/' ||
+        options.baseUrl.charAt(0) !== '/')
+        throw new Error('baseUrl should start and end with a /');
+    if (options.mode === 'development') {
+        if (!options.vitrifyDir)
+            throw new Error('Option vitrifyDir cannot be undefined');
+        // if (!options.vite) throw new Error('Option vite cannot be undefined')
+        // const { resolve } = await import('import-meta-resolve')
+        // const cliDir = new URL('../', await resolve('vitrify', import.meta.url))
+        options.appDir = options.appDir || new URL('../../..', import.meta.url);
+        const { createServer, searchForWorkspaceRoot } = await import('vite');
+        const { baseConfig } = await import('vitrify');
+        const cliDir = options.vitrifyDir;
+        const config = await baseConfig({
+            ssr: 'server',
+            command: 'dev',
+            mode: 'development',
+            appDir: options.appDir,
+            publicDir: options.publicDir || new URL('public', options.appDir)
+        });
+        config.server = {
+            middlewareMode: true,
+            fs: {
+                allow: [
+                    searchForWorkspaceRoot(process.cwd()),
+                    searchForWorkspaceRoot(options.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
+            }
+        };
+        const vite = await createServer({
+            configFile: false,
+            ...config
+        });
+        console.log('Dev mode');
+        const middie = (await import('@fastify/middie')).default;
         await fastify.register(middie);
-        fastify.use(options.vite.middlewares);
-        fastify.get('*', async (req, res) => {
+        fastify.use(vite.middlewares);
+        fastify.get(`${options.baseUrl}*`, async (req, res) => {
             try {
                 const url = req.raw.url;
                 const ssrContext = {
                     req,
                     res
                 };
-                const template = readFileSync(new URL('index.html', options.cliDir)).toString();
-                const entryUrl = new URL('ssr/entry-server.ts', options.cliDir).pathname;
-                const render = (await options.vite.ssrLoadModule(entryUrl)).render;
+                const template = readFileSync(new URL('index.html', frameworkDir)).toString();
+                const entryUrl = new URL('ssr/entry-server.ts', frameworkDir).pathname;
+                const render = (await vite.ssrLoadModule(entryUrl)).render;
                 let manifest;
                 // TODO: https://github.com/vitejs/vite/issues/2282
                 try {
@@ -25,11 +69,18 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                 catch (e) {
                     manifest = {};
                 }
+                const cssModules = [entryUrl];
+                // // @ts-ignore
+                // if (options.vite?.config.vitrify!.globalCss)
+                //   cssModules.push(...options.vite?.config.vitrify.globalCss)
+                const matchedModules = componentsModules(cssModules, vite);
+                const css = collectCss(matchedModules);
                 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');
+                    .replace('<!--product-name-->', options.productName || 'Product name')
+                    .replace('<!--dev-ssr-css-->', css);
                 res.code(200);
                 res.type('text/html');
                 res.send(html);
@@ -37,14 +88,14 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             }
             catch (e) {
                 console.error(e.stack);
-                options.vite && options.vite.ssrFixStacktrace(e);
+                vite && vite.ssrFixStacktrace(e);
                 res.code(500);
                 res.send(e.stack);
             }
         });
     }
     else {
-        options.baseUrl = options.baseUrl || '/';
+        options.appDir = options.appDir || new URL('../../..', import.meta.url);
         fastify.register(fastifyStatic, {
             root: new URL('./dist/ssr/client', options.appDir).pathname,
             wildcard: false,
@@ -52,7 +103,7 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             prefix: options.baseUrl
         });
         fastify.get(`${options.baseUrl}*`, async (req, res) => {
-            const url = req.raw.url;
+            const url = req.raw.url?.replace(options.baseUrl, '/');
             const provide = options.provide ? await options.provide(req, res) : {};
             const ssrContext = {
                 req,
@@ -69,8 +120,8 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             let html = template
                 .replace(`<!--preload-links-->`, preloadLinks)
                 .replace(`<!--app-html-->`, appHtml);
-            if (options.onRenderedHooks?.length) {
-                for (const ssrFunction of options.onRenderedHooks) {
+            if (options.onRendered?.length) {
+                for (const ssrFunction of options.onRendered) {
                     html = ssrFunction(html, ssrContext);
                 }
             }

package/dist/frameworks/vue/server.js

@@ -1,14 +1,19 @@
 import fastify from 'fastify';
-import { fastifySsrPlugin } from './fastify-ssr-plugin.js';
-export const createApp = ({ setup, appDir, baseUrl, onRenderedHooks }) => {
+export const createApp = ({ onSetup, appDir, baseUrl, onRendered, fastifySsrPlugin, vitrifyDir, mode }) => {
     const app = fastify({
         logger: true
     });
     app.register(fastifySsrPlugin, {
         baseUrl,
         appDir,
-        onRenderedHooks
+        onRendered,
+        vitrifyDir,
+        mode
     });
-    setup(app);
+    // if (onSetup?.length) {
+    //   for (const setup of onSetup) {
+    //     setup(app)
+    //   }
+    // }
     return app;
 };

package/dist/helpers/collect-css-ssr.js

@@ -0,0 +1,57 @@
+/**
+ * Collect SSR CSS for Vite
+ */
+export const componentsModules = (components, vite) => {
+    const matchedModules = new Set();
+    components.forEach((component) => {
+        const modules = vite.moduleGraph.getModulesByFile(component);
+        modules?.forEach((mod) => matchedModules.add(mod));
+    });
+    return matchedModules;
+};
+export const collectCss = (mods, styles = new Map(), checkedComponents = new Set()) => {
+    for (const mod of mods) {
+        if ((mod.file?.endsWith('.scss') ||
+            mod.file?.endsWith('.css') ||
+            mod.id?.includes('vue&type=style')) &&
+            mod.ssrModule) {
+            styles.set(mod.url, mod.ssrModule.default);
+        }
+        if (mod.importedModules.size > 0 && !checkedComponents.has(mod.id)) {
+            checkedComponents.add(mod.id);
+            collectCss(mod.importedModules, styles, checkedComponents);
+        }
+    }
+    let result = '';
+    styles.forEach((content, id) => {
+        const styleTag = `<style type="text/css" vite-module-id="${hashCode(id)}">${content}</style>`;
+        result = result.concat(styleTag);
+    });
+    return result;
+};
+/**
+ * Client listener to detect updated modules through HMR, and remove the initial styled attached to the head
+ */
+export const removeCssHotReloaded = () => {
+    if (import.meta.hot) {
+        import.meta.hot.on('vite:beforeUpdate', (module) => {
+            module.updates.forEach((update) => {
+                const moduleStyle = document.querySelector(`[vite-module-id="${hashCode(update.acceptedPath)}"]`);
+                if (moduleStyle) {
+                    moduleStyle.remove();
+                }
+            });
+        });
+    }
+};
+const hashCode = (moduleId) => {
+    let hash = 0, i, chr;
+    if (moduleId.length === 0)
+        return hash;
+    for (i = 0; i < moduleId.length; i++) {
+        chr = moduleId.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    return hash;
+};