vitrify 0.20.0 → 0.22.0

package/dist/app-urls.js

@@ -17,7 +17,7 @@ export const getPkgJsonDir = (dir) => {
     }
     return getPkgJsonDir(new URL('..', dir));
 };
-export const getAppDir = () => getPkgJsonDir(new URL(`file://${process.cwd()}/`));
+export const getAppDir = (dir) => getPkgJsonDir(dir ?? 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);

package/dist/bin/cli.js

@@ -5,6 +5,7 @@ import { getAppDir, parsePath } from '../app-urls.js';
 import { printHttpServerUrls, exitLogs } from '../helpers/logger.js';
 import { build as esbuild } from 'esbuild';
 import { readdir } from 'fs/promises';
+import { loadSSRAssets } from '../frameworks/vue/fastify-ssr-plugin.js';
 const cli = cac('vitrify');
 cli
     .command('build')
@@ -73,12 +74,18 @@ cli
                 ...args,
                 outDir: fileURLToPath(new URL('ssr/server/', baseOutDir))
             });
-            ({ prerender, onRendered } = await import(new URL('ssr/server/prerender.mjs', baseOutDir).pathname));
+            ({ prerender } = await import(new URL('ssr/server/prerender.mjs', baseOutDir).pathname));
+            const { template, manifest, render, getRoutes, onRendered } = await loadSSRAssets({
+                mode: 'ssg',
+                distDir: baseOutDir
+            });
+            const routes = await getRoutes();
             prerender({
                 outDir: fileURLToPath(new URL('static/', baseOutDir)),
-                templatePath: fileURLToPath(new URL('static/index.html', baseOutDir)),
-                manifestPath: fileURLToPath(new URL('static/.vite/ssr-manifest.json', baseOutDir)),
-                entryServerPath: new URL('ssr/server/entry-server.mjs', baseOutDir),
+                template,
+                manifest,
+                render,
+                routes,
                 onRendered
             });
             break;

package/dist/bin/dev.js

@@ -1,4 +1,3 @@
-import { searchForWorkspaceRoot } from 'vite';
 import { baseConfig } from '../index.js';
 import fastify from 'fastify';
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js';
@@ -15,7 +14,6 @@ export async function createVitrifyDevServer({ port = 3000, logLevel = 'info',
 // mode = 'csr',
 ssr, framework = 'vue', host, appDir, publicDir, base }) {
     const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import('../app-urls.js');
-    const cliDir = getCliDir();
     if (!appDir)
         appDir = getAppDir();
     let config = {};
@@ -33,46 +31,27 @@ ssr, framework = 'vue', host, appDir, publicDir, base }) {
         publicDir,
         base
     });
-    config.logLevel = logLevel;
-    config.define = {
-        ...config.define,
-        __HOST__: `'${host}'`
-    };
     const wsPort = await getFirstOpenPort(24678);
     if (config.server?.https) {
         exitLogs.push(`[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`);
     }
-    config.server = {
-        https: config.server?.https,
-        hmr: {
-            protocol: config.server?.https ? 'wss' : 'ws',
-            port: wsPort
-        },
-        port,
-        // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
-        middlewareMode: ssr ? true : false,
-        fs: {
-            strict: false, // https://github.com/vitejs/vite/issues/8175
-            allow: [
-                searchForWorkspaceRoot(process.cwd()),
-                searchForWorkspaceRoot(fileURLToPath(appDir)),
-                searchForWorkspaceRoot(fileURLToPath(cliDir)),
-                fileURLToPath(appDir)
-            ]
-        },
-        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
-    };
-    if (ssr)
-        config.appType = 'custom';
     const vitrifyDevServer = await (await import('vite')).createServer({
         configFile: false,
-        ...config
+        ...config,
+        logLevel,
+        define: {
+            ...config.define,
+            __HOST__: `'${host}'`
+        },
+        server: {
+            ...config.server,
+            host,
+            port,
+            hmr: {
+                protocol: config.server?.https ? 'wss' : 'ws',
+                port: wsPort
+            }
+        }
     });
     return vitrifyDevServer;
 }
@@ -103,9 +82,17 @@ ssr, framework = 'vue', host, appDir, publicDir, vite }) {
         const entryUrl = ssr === 'fastify'
             ? fileURLToPath(new URL('src/vite/fastify/entry.ts', cliDir))
             : fileURLToPath(new URL(`src/vite/${framework}/ssr/app.ts`, cliDir));
-        ({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl));
+        const environment = vite.environments.ssr;
+        ({ setup, onRendered, vitrifyConfig } =
+            // @ts-expect-error missing types
+            await environment.runner.import(entryUrl));
+        // console.log(module)
+        // ;({ setup, onRendered, vitrifyConfig } = await vite.ssrLoadModule(entryUrl))
         app = fastify({
             logger: {
+                transport: {
+                    target: '@fastify/one-line-logger'
+                },
                 level: process.env.DEBUG
                     ? 'debug'
                     : process.env.PINO_LOG_LEVEL || 'info'

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

@@ -2,6 +2,7 @@ import fastifyStatic from '@fastify/static';
 import { readFileSync } from 'fs';
 import { fileURLToPath } from 'url';
 import { addOrReplaceAppDiv, appendToBody, appendToHead } from '../../helpers/utils.js';
+import { getAppDir } from '../../app-urls.js';
 const fastifySsrPlugin = async (fastify, options) => {
     options.baseUrl = options.baseUrl || '/';
     options.mode = options.mode || process.env.MODE || import.meta.env.MODE;
@@ -35,7 +36,10 @@ const fastifySsrPlugin = async (fastify, options) => {
                 let template = readFileSync(new URL('index.html', frameworkDir)).toString();
                 template = await vite.transformIndexHtml(url, template);
                 const entryUrl = fileURLToPath(new URL('ssr/entry-server.ts', frameworkDir));
-                const render = (await vite.ssrLoadModule(entryUrl)).render;
+                const environment = vite.environments.ssr;
+                // @ts-expect-error missing type
+                const { render } = await environment.runner.import(entryUrl);
+                // const render = (await vite!.ssrLoadModule(entryUrl)).render
                 let manifest;
                 // TODO: https://github.com/vitejs/vite/issues/2282
                 try {
@@ -80,10 +84,9 @@ const fastifySsrPlugin = async (fastify, options) => {
         fastify.get(`${options.baseUrl}*`, async (req, res) => {
             const url = req.raw.url?.replace(options.baseUrl, '/');
             const provide = options.provide ? await options.provide(req, res) : {};
-            const template = readFileSync(fileURLToPath(new URL('./dist/ssr/client/index.html', options.appDir))).toString();
-            const manifest = JSON.parse(readFileSync(new URL('./dist/ssr/client/.vite/ssr-manifest.json', options.appDir)).toString());
-            const render = (await import(fileURLToPath(new URL('./dist/ssr/server/entry-server.mjs', options.appDir)))).render;
-            const onRendered = (await import(fileURLToPath(new URL('./dist/ssr/server/virtual_vitrify-hooks.mjs', options.appDir)))).onRendered;
+            const { template, manifest, render, onRendered } = await loadSSRAssets({
+                distDir: new URL('./dist/', options.appDir)
+            });
             const html = await renderHtml({
                 request: req,
                 reply: res,
@@ -131,4 +134,40 @@ const renderHtml = async (options) => {
     }
     return html;
 };
-export { fastifySsrPlugin, renderHtml };
+const loadSSRAssets = async ({ mode, distDir } = {
+    mode: 'ssr'
+}) => {
+    const appDir = getAppDir(new URL(import.meta.url));
+    const baseOutDir = distDir || new URL('dist/', appDir);
+    let templatePath, manifestPath, entryServerPath;
+    const onRenderedPath = fileURLToPath(new URL('ssr/server/virtual_vitrify-hooks.mjs', baseOutDir));
+    if (mode === 'ssg') {
+        templatePath = fileURLToPath(new URL('static/index.html', baseOutDir));
+        manifestPath = fileURLToPath(new URL('static/.vite/ssr-manifest.json', baseOutDir));
+        entryServerPath = fileURLToPath(new URL('ssr/server/entry-server.mjs', baseOutDir));
+    }
+    else {
+        templatePath = fileURLToPath(new URL('ssr/client/index.html', baseOutDir));
+        manifestPath = fileURLToPath(new URL('ssr/client/.vite/ssr-manifest.json', baseOutDir));
+        entryServerPath = fileURLToPath(new URL('ssr/server/entry-server.mjs', baseOutDir));
+    }
+    try {
+        const template = readFileSync(templatePath).toString();
+        const manifest = JSON.parse(readFileSync(manifestPath).toString());
+        const entryServer = await import(entryServerPath);
+        const { render, getRoutes } = entryServer;
+        const onRendered = (await import(onRenderedPath)).onRendered;
+        return {
+            template,
+            manifest,
+            render,
+            getRoutes,
+            onRendered
+        };
+    }
+    catch (e) {
+        console.error(e);
+        throw new Error('Unable to load SSR asset files');
+    }
+};
+export { fastifySsrPlugin, renderHtml, loadSSRAssets };

package/dist/frameworks/vue/prerender.js

@@ -1,12 +1,8 @@
 import { existsSync, promises as fs, mkdirSync } from 'fs';
 import { routesToPaths } from '../../helpers/routes.js';
 import { renderHtml } from './fastify-ssr-plugin.js';
-export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, onRendered }) => {
+export const prerender = async ({ outDir, template, manifest, render, routes, onRendered }) => {
     const promises = [];
-    const template = (await fs.readFile(templatePath)).toString();
-    const manifest = JSON.parse((await fs.readFile(manifestPath)).toString());
-    const { render, getRoutes } = await import(entryServerPath);
-    const routes = await getRoutes();
     const paths = routesToPaths(routes).filter((i) => !i.includes(':') && !i.includes('*'));
     const beasties = new (await import('beasties')).default({
         path: outDir,

package/dist/frameworks/vue/server.js

@@ -2,6 +2,9 @@ import fastify from 'fastify';
 export const createApp = ({ onSetup, appDir, baseUrl, fastifyPlugin, onRendered, vitrifyDir, mode }) => {
     const app = fastify({
         logger: {
+            transport: {
+                target: '@fastify/one-line-logger'
+            },
             level: process.env.DEBUG ? 'debug' : process.env.PINO_LOG_LEVEL || 'info'
         }
     });

package/dist/index.js

@@ -14,6 +14,7 @@ import { addOrReplaceTitle, appendToBody } from './helpers/utils.js';
 import Components from 'unplugin-vue-components/vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import UnoCSS from 'unocss/vite';
+import { searchForWorkspaceRoot } from 'vite';
 const internalServerModules = [
     'util',
     'vitrify',
@@ -29,12 +30,6 @@ const internalServerModules = [
     'ws',
     'abort-controller'
 ];
-const configPluginMap = {
-    quasar: () => import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
-};
-const configResolverMap = {
-    quasar: () => import('unplugin-vue-components/resolvers').then((module) => module.QuasarResolver())
-};
 const manualChunkNames = [
     'prerender',
     'fastify-ssr-plugin',
@@ -43,11 +38,12 @@ const manualChunkNames = [
 ];
 const moduleChunks = {
     vue: ['vue', '@vue', 'vue-router'],
-    quasar: ['quasar', '@quasar']
+    quasar: ['quasar'],
+    atQuasar: ['@quasar']
 };
 const manualChunksFn = (manualChunkList) => {
     return (id) => {
-        const matchedModule = Object.entries(moduleChunks).find(([chunkName, moduleNames]) => moduleNames.some((moduleName) => id.includes(moduleName + '/')));
+        const matchedModule = Object.entries(moduleChunks).find(([chunkName, moduleNames]) => moduleNames.some((moduleName) => new RegExp(`\/${moduleName}\/`).test(id)));
         if (id.includes('vitrify/src/')) {
             const name = id.split('/').at(-1)?.split('.').at(0);
             if (name && manualChunkNames.includes(name))
@@ -67,30 +63,6 @@ const manualChunksFn = (manualChunkList) => {
         }
     };
 };
-// const manualChunks: ManualChunksOption = (
-//   id: string,
-//   manualChunkList?: string[]
-// ) => {
-//   const matchedModule = Object.entries(moduleChunks).find(
-//     ([chunkName, moduleNames]) =>
-//       moduleNames.some((moduleName) => id.includes(moduleName + '/'))
-//   )
-//   if (id.includes('vitrify/src/')) {
-//     const name = id.split('/').at(-1)?.split('.').at(0)
-//     if (name && manualChunkNames.includes(name)) return name
-//   } else if (
-//     VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))
-//   ) {
-//     return VIRTUAL_MODULES.find((name) => id.includes(name))
-//   } else if (manualChunkList?.some((file) => id.includes(file))) {
-//     return manualChunkList.find((file) => id.includes(file))
-//   } else if (id.includes('node_modules')) {
-//     if (matchedModule) {
-//       return matchedModule[0]
-//     }
-//     return 'vendor'
-//   }
-// }
 export const VIRTUAL_MODULES = [
     'virtual:vitrify-hooks',
     'virtual:static-imports',
@@ -167,7 +139,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             const bundledConfig = await bundleConfigFile(fileURLToPath(new URL('vitrify.config.ts', appDir)));
             fs.writeFileSync(configPath + '.js', bundledConfig.code);
             rawVitrifyConfig = (await import('file://' + configPath + '.js')).default;
-            // vitrifyConfig = (await import(configPath + '.js')).default
             fs.unlinkSync(configPath + '.js');
         }
         else {
@@ -184,8 +155,9 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
         console.log('No valid vitrify.config.(ts|js) file found.');
         throw e;
     }
-    const localPackages = ['vue', 'vue-router', '@vue/server-renderer'];
-    // const localPackages: string[] = []
+    const localPackages = [];
+    if (framework === 'vue')
+        localPackages.push('vue', 'vue-router', '@vue/server-renderer');
     const cliPackages = [];
     const packageUrls = vitrifyConfig.vitrify?.urls?.packages || {};
     await (async () => {
@@ -195,12 +167,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                 packageUrls[val] = new URL(`file://${pkgDir}`);
         }
     })();
-    // await (async () => {
-    //   for (const val of cliPackages)
-    //     packageUrls[val] = getPkgJsonDir(
-    //       new URL(await resolve(val, cliDir!.href))
-    //     )
-    // })()
     if (!productName) {
         try {
             ;
@@ -219,16 +185,26 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     }
     const isPwa = !!vitrifyConfig.vitrify?.pwa || false;
     const frameworkPlugins = [];
-    const resolvers = [];
-    for (const framework of Object.keys(configPluginMap)) {
-        if (Object.keys(vitrifyConfig).includes(framework)) {
-            const plugin = await configPluginMap[framework]();
-            const resolver = await configResolverMap[framework]();
-            frameworkPlugins.push(await plugin({
+    if (framework === 'vue') {
+        frameworkPlugins.push(vuePlugin());
+    }
+    const vitrifyPlugins = [];
+    if (vitrifyConfig.vitrify?.plugins) {
+        for (const vitrifyPluginConfig of vitrifyConfig.vitrify.plugins) {
+            const vitrifyPlugin = await vitrifyPluginConfig.plugin({
                 ssr,
-                pwa: isPwa
-            }));
-            resolvers.push(resolver);
+                pwa: isPwa,
+                options: vitrifyPluginConfig.options
+            });
+            if ('plugin' in vitrifyPlugin) {
+                vitrifyPlugins.push(vitrifyPlugin.plugin);
+            }
+            else if ('plugins' in vitrifyPlugin) {
+                vitrifyPlugins.push(...vitrifyPlugin.plugins);
+            }
+            if (vitrifyPlugin.config) {
+                vitrifyConfig = mergeConfig(vitrifyConfig, vitrifyPlugin.config);
+            }
         }
     }
     let onBootHooks;
@@ -282,13 +258,12 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                     code = code
                         .replace(/<style>(.*?)<\/style>/, '<style>' + css + '</style>')
                         .replace(/<style lang="sass">(.*?)<\/style>/, '<style lang="sass">' + sass + '</style>');
-                    // code = code.replace(/<\/style>/, sass + '</style>')
                 }
                 return code;
             }
         },
-        vuePlugin(),
         ...frameworkPlugins,
+        ...vitrifyPlugins,
         {
             name: 'vitrify-setup',
             enforce: 'post',
@@ -347,9 +322,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                             .replaceAll('_', '')
                             .replaceAll('+', '');
                         return `import ${varName} from '${new URL(url, appDir).pathname}'; onSetup.push(${varName})`;
-                        // return `import ${varName} from '${fileURLToPath(
-                        //   url
-                        // )}'; onSetup.push(${varName})`
                     })
                         .join('\n')}`;
                 }
@@ -367,9 +339,6 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                         ...globalSass.map((sass) => `@import '${sass}'`)
                     ].join('\n');
                 }
-                // else if (id === 'vitrify.css') {
-                //   return `${globalCss.map((css) => `@import '${css}'`).join('\n')}`
-                // }
                 else if (id === 'virtual:vitrify-config') {
                     return `export default ${JSON.stringify(vitrifyConfig)}`;
                 }
@@ -394,12 +363,12 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             }
         },
         Components({
+            ...vitrifyConfig.vitrify?.unpluginVueComponents,
             exclude: [
                 new RegExp(`[\\/]node_modules[\\/].*[\\/]!(${serverModules.join('|')})`),
                 /[\\/]\.git[\\/]/,
                 /[\\/]\.nuxt[\\/]/
-            ],
-            resolvers
+            ]
         }),
         UnoCSS({
             ...vitrifyConfig.vitrify?.unocss,
@@ -447,31 +416,13 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                     else {
                         entryScript = `<script type="module" src="${entry}"></script>`;
                     }
-                    // html = html.replace('<!--entry-script-->', entryScript)
                     html = appendToBody(entryScript, html);
                     if (productName)
                         html = addOrReplaceTitle(productName, html);
-                    // html = html.replace('<!--product-name-->', productName)
                     return html;
                 }
             }
         });
-        // plugins.unshift({
-        //   name: 'product-name',
-        //   enforce: 'post',
-        //   config: (config: VitrifyConfig, env) => {
-        //     if (config.vitrify?.productName)
-        //       productName = config.vitrify?.productName
-        //     return
-        //   },
-        //   transformIndexHtml: {
-        //     enforce: 'post',
-        //     transform: (html) => {
-        //       html = html.replace('<!--product-name-->', productName)
-        //       return html
-        //     }
-        //   }
-        // })
         if (debug)
             plugins.push(visualizer());
     }
@@ -485,31 +436,33 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
         '@vue/server-renderer'
     ];
     const vuePkgAliases = [];
-    for (const pkg of vueInternalPkgs) {
-        const specifier = pkg.split('/').at(-1);
-        const pkgJsonPath = await findDepPkgJsonPath(pkg, fileURLToPath(appDir));
-        if (pkgJsonPath)
+    if (packageUrls['vue']) {
+        for (const pkg of vueInternalPkgs) {
+            const specifier = pkg.split('/').at(-1);
+            const pkgJsonPath = await findDepPkgJsonPath(pkg, fileURLToPath(appDir));
+            if (pkgJsonPath)
+                vuePkgAliases.push({
+                    find: pkg,
+                    replacement: fileURLToPath(new URL(`./dist/${specifier}.esm-bundler.js`, `file://${pkgJsonPath}` || ''))
+                });
             vuePkgAliases.push({
-                find: pkg,
-                replacement: fileURLToPath(new URL(`./dist/${specifier}.esm-bundler.js`, `file://${pkgJsonPath}` || ''))
-            });
+                find: new RegExp('^vue$'),
+                replacement: fileURLToPath(new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue']))
+            }, {
+                find: new RegExp('^vue-router$'),
+                replacement: fileURLToPath(new URL('./dist/vue-router.esm-bundler.js', packageUrls['vue-router']))
+            }, ...vuePkgAliases);
+        }
     }
     const alias = [
         { find: 'src', replacement: fileURLToPath(srcDir) },
         { find: 'app', replacement: fileURLToPath(appDir) },
         { find: 'cwd', replacement: fileURLToPath(cwd) },
         { find: 'boot', replacement: fileURLToPath(new URL('boot/', srcDir)) },
-        { find: 'assets', replacement: fileURLToPath(new URL('assets/', srcDir)) },
-        {
-            find: new RegExp('^vue$'),
-            replacement: fileURLToPath(new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue']))
-        },
-        {
-            find: new RegExp('^vue-router$'),
-            replacement: fileURLToPath(new URL('./dist/vue-router.esm-bundler.js', packageUrls['vue-router']))
-        },
-        ...vuePkgAliases
+        { find: 'assets', replacement: fileURLToPath(new URL('assets/', srcDir)) }
     ];
+    if (framework === 'vue')
+        alias.push(...vuePkgAliases);
     if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
         alias.push(...vitrifyConfig.vitrify.dev.alias);
     if (command === 'test')
@@ -578,6 +531,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
     }
     const config = {
         root: fileURLToPath(appDir),
+        appType: ssr ? 'custom' : 'spa',
         publicDir: fileURLToPath(publicDir),
         base,
         envDir: fileURLToPath(appDir),
@@ -614,6 +568,28 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             __HOST__: `'localhost'`,
             __BASE_URL__: `'${base}'`,
             __IS_PWA__: `${isPwa}`
+        },
+        // environments: {
+        // },
+        server: {
+            https: vitrifyConfig.server?.https,
+            // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
+            middlewareMode: ssr ? true : false,
+            fs: {
+                strict: false, // https://github.com/vitejs/vite/issues/8175
+                allow: [
+                    searchForWorkspaceRoot(process.cwd()),
+                    searchForWorkspaceRoot(fileURLToPath(appDir)),
+                    searchForWorkspaceRoot(fileURLToPath(cliDir)),
+                    fileURLToPath(appDir)
+                ]
+            },
+            watch: {
+                // During tests we edit the files too fast and sometimes chokidar
+                // misses change events, so enforce polling for consistency
+                usePolling: true,
+                interval: 100
+            }
         }
     };
     return mergeConfig(config, vitrifyConfig);

package/dist/plugins/index.js

@@ -1 +1 @@
-export {};
+export * from './quasar/index.js';