vitrify 0.2.5 → 0.5.0

package/dist/index.js

@@ -1,23 +1,118 @@
 import vuePlugin from '@vitejs/plugin-vue';
 import { mergeConfig } from 'vite';
+import { build } from 'esbuild';
+import fs from 'fs';
+import path from 'path';
+import { pathToFileURL } from 'url';
 import { readFileSync } from 'fs';
 import builtinModules from 'builtin-modules';
 import { resolve } from 'import-meta-resolve';
 import { getPkgJsonDir } from './app-urls.js';
-const serverModules = ['fastify', 'middie'];
+const internalServerModules = [
+    // 'fs',
+    // 'path',
+    // 'url',
+    // 'module',
+    // 'crypto',
+    // 'node:fs',
+    'util',
+    'node:url',
+    'node:util',
+    'node:fs',
+    'node:process',
+    'vitrify',
+    'vitrify/dev',
+    // 'import-meta-resolve',
+    'vite',
+    'fastify',
+    '@fastify',
+    'node'
+    // 'middie',
+    // 'knex',
+    // 'bcrypt',
+    // 'objection',
+    // '@fastify/formbody',
+    // '@fastify/static',
+    // '@fastify/cors',
+    // '@fastify/cookie',
+    // 'mercurius',
+    // 'jose',
+    // 'oidc-provider',
+    // 'node-fetch'
+];
 const configPluginMap = {
     quasar: () => import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
 };
-const manualChunks = ['prerender', 'fastify-ssr-plugin', 'server'];
+const manualChunkNames = [
+    'prerender',
+    'fastify-ssr-plugin',
+    'fastify-csr-plugin',
+    'server'
+];
+const manualChunks = (id) => {
+    if (id.includes('vitrify/src/vite/')) {
+        const name = id.split('/').at(-1)?.split('.').at(0);
+        if (name && manualChunkNames.includes(name))
+            return name;
+    }
+    else if (id.includes('node_modules')) {
+        return 'vendor';
+    }
+};
 export const VIRTUAL_MODULES = [
-    'virtual:fastify-setup',
-    'virtual:boot-functions',
-    'virtual:ssr-functions',
-    'virtual:on-mounted-hooks',
+    'virtual:vitrify-hooks',
     'virtual:global-css',
     'virtual:static-imports'
 ];
-export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mode = 'production', framework = 'vue', pwa = false }) => {
+async function bundleConfigFile(fileName, isESM = false) {
+    const result = await build({
+        absWorkingDir: process.cwd(),
+        entryPoints: [fileName],
+        outfile: 'out.js',
+        write: false,
+        platform: 'node',
+        bundle: true,
+        format: 'esm',
+        sourcemap: 'inline',
+        metafile: true,
+        plugins: [
+            {
+                name: 'externalize-deps',
+                setup(build) {
+                    build.onResolve({ filter: /.*/ }, (args) => {
+                        const id = args.path;
+                        if (id[0] !== '.' && !path.isAbsolute(id)) {
+                            return {
+                                external: true
+                            };
+                        }
+                    });
+                }
+            },
+            {
+                name: 'replace-import-meta',
+                setup(build) {
+                    build.onLoad({ filter: /\.[jt]s$/ }, async (args) => {
+                        const contents = await fs.promises.readFile(args.path, 'utf8');
+                        return {
+                            loader: args.path.endsWith('.ts') ? 'ts' : 'js',
+                            contents: contents
+                                .replace(/\bimport\.meta\.url\b/g, JSON.stringify(pathToFileURL(args.path).href))
+                                .replace(/\b__dirname\b/g, JSON.stringify(path.dirname(args.path)))
+                                .replace(/\b__filename\b/g, JSON.stringify(args.path))
+                        };
+                    });
+                }
+            }
+        ]
+    });
+    const { text } = result.outputFiles[0];
+    return {
+        code: text,
+        dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
+    };
+}
+export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command = 'build', mode = 'production', framework = 'vue', pwa = false }) => {
     const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } = await import('./app-urls.js');
     if (!appDir) {
         appDir = getAppDir();
@@ -26,37 +121,8 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
     const cwd = getCwd();
     const cliDir = getCliDir();
     const cliViteDir = getCliViteDir(cliDir);
-    // const {
-    //   appDir: tempAppDir,
-    //   cliDir,
-    //   cliViteDir,
-    //   srcDir
-    // } = await import('./app-urls.js')
-    // const cwd = appDir || tempAppDir
     const frameworkDir = new URL(`${framework}/`, cliViteDir);
-    // const localPackages = ['vue', 'vue-router', 'quasar']
-    const localPackages = ['vue', 'vue-router'];
-    const cliPackages = ['vitest'];
-    const packageUrls = {};
-    await (async () => {
-        for (const val of localPackages)
-            packageUrls[val] = getPkgJsonDir(new URL(await resolve(val, appDir.href)));
-    })();
-    await (async () => {
-        for (const val of cliPackages)
-            packageUrls[val] = getPkgJsonDir(new URL(await resolve(val, cliDir.href)));
-    })();
-    // if (appDir) {
-    //   srcDir = new URL('src/', appDir);
-    //   quasarDir = new URL(await resolve('quasar/', appDir.href));
-    //   ({ appDir: cwd, cliDir } = await import('./app-urls.js'))
-    // } else {
-    //   ({ appDir, cliDir, srcDir, quasarDir } = await import('./app-urls.js'))
-    //   cwd = appDir
-    // }
-    // vueDir = new URL('./', await resolve('vue', appDir.href));
-    // vueRouterDir = new URL('../', await resolve('vue-router', appDir.href));
-    // vitestDir = new URL('../', await resolve('vitest', cliDir.href));
+    const fastifyDir = new URL('fastify/', cliViteDir);
     if (!publicDir)
         publicDir = new URL('public/', appDir);
     /**
@@ -64,19 +130,46 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
      */
     let vitrifyConfig;
     try {
-        vitrifyConfig = (await import(new URL('vitrify.config.js', appDir).pathname)).default;
+        if (fs.existsSync(new URL('vitrify.config.ts', appDir).pathname)) {
+            const configPath = new URL('vitrify.config.ts', appDir).pathname;
+            const bundledConfig = await bundleConfigFile(new URL('vitrify.config.ts', appDir).pathname);
+            fs.writeFileSync(configPath + '.js', bundledConfig.code);
+            vitrifyConfig = (await import(configPath + '.js')).default;
+            fs.unlinkSync(configPath + '.js');
+        }
+        else {
+            vitrifyConfig = (await import(new URL('vitrify.config.js', appDir).pathname)).default;
+        }
         if (typeof vitrifyConfig === 'function')
-            vitrifyConfig = vitrifyConfig({ mode, command });
+            vitrifyConfig = await vitrifyConfig({ mode, command });
     }
     catch (e) {
-        console.error(e);
-        console.log('No vitrify.config.js file found, using defaults');
+        console.log('No vitrify.config.(ts|js) file found, using defaults');
         vitrifyConfig = {};
     }
-    let { productName = 'Product name' } = JSON.parse(readFileSync(new URL('package.json', appDir).pathname, {
-        encoding: 'utf-8'
-    }));
-    const fastifySetup = vitrifyConfig.vitrify?.fastify?.setup || ((fastify) => { });
+    const localPackages = ['vue', 'vue-router'];
+    const cliPackages = [];
+    const packageUrls = vitrifyConfig.vitrify?.urls?.packages || {};
+    await (async () => {
+        for (const val of localPackages)
+            packageUrls[val] = getPkgJsonDir(new URL(await resolve(val, appDir.href)));
+    })();
+    // await (async () => {
+    //   for (const val of cliPackages)
+    //     packageUrls[val] = getPkgJsonDir(
+    //       new URL(await resolve(val, cliDir!.href))
+    //     )
+    // })()
+    let productName = 'Product name';
+    try {
+        ;
+        ({ productName } = JSON.parse(readFileSync(new URL('package.json', appDir).pathname, {
+            encoding: 'utf-8'
+        })));
+    }
+    catch (e) {
+        console.error('package.json not found');
+    }
     const ssrTransformCustomDir = () => {
         return {
             props: [],
@@ -93,15 +186,23 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
             }));
         }
     }
-    let bootFunctions;
-    let ssrFunctions;
+    let onBootHooks;
+    let onRenderedHooks;
     let onMountedHooks;
+    let onSetupFiles;
     let globalCss;
     let staticImports;
     let sassVariables;
     let additionalData;
+    let serverModules = internalServerModules;
+    if (vitrifyConfig.vitrify?.ssr?.serverModules)
+        serverModules = [
+            ...serverModules,
+            ...vitrifyConfig.vitrify.ssr.serverModules
+        ];
     const plugins = [
         vuePlugin({
+            compiler: await import('vue/compiler-sfc'),
             template: {
                 ssr: !!ssr,
                 compilerOptions: {
@@ -122,18 +223,14 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
             }
         }),
         ...frameworkPlugins,
-        // await QuasarPlugin({
-        //   ssr: ssr,
-        //   pwa: pwa
-        //   // quasarDir: packageUrls.quasar
-        // }),
         {
             name: 'vitrify-setup',
             enforce: 'post',
             config: async (config, env) => {
-                bootFunctions = config.vitrify?.bootFunctions || [];
-                ssrFunctions = config.vitrify?.ssrFunctions || [];
+                onBootHooks = config.vitrify?.hooks?.onBoot || [];
+                onRenderedHooks = config.vitrify?.hooks?.onRendered || [];
                 onMountedHooks = config.vitrify?.hooks?.onMounted || [];
+                onSetupFiles = config?.vitrify?.hooks?.onSetup || [];
                 globalCss = config.vitrify?.globalCss || [];
                 staticImports = config.vitrify?.staticImports || {};
                 sassVariables = config.vitrify?.sass?.variables || {};
@@ -160,30 +257,43 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
             },
             resolveId(id) {
                 if (VIRTUAL_MODULES.includes(id))
-                    return id;
+                    return { id, moduleSideEffects: false };
                 return;
             },
-            load(id) {
-                if (id === 'virtual:fastify-setup') {
-                    return `export const setup = ${String(fastifySetup)}`;
+            transform: (code, id) => {
+                if (id.endsWith('main.ts') && id.includes('vitrify')) {
+                    code =
+                        `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code;
                 }
-                else if (id === 'virtual:boot-functions') {
-                    return `export default [${bootFunctions
+                return code;
+            },
+            load(id) {
+                if (id === 'virtual:vitrify-hooks') {
+                    return `export const onBoot = [${onBootHooks
                         .map((fn) => `${String(fn)}`)
-                        .join(', ')}]`;
-                }
-                else if (id === 'virtual:ssr-functions') {
-                    return `export default [${ssrFunctions
+                        .join(', ')}]
+            export const onMounted = [${onMountedHooks
                         .map((fn) => `${String(fn)}`)
-                        .join(', ')}]`;
-                }
-                else if (id === 'virtual:on-mounted-hooks') {
-                    return `export default [${onMountedHooks
+                        .join(', ')}]
+            export const onRendered = [${onRenderedHooks
                         .map((fn) => `${String(fn)}`)
-                        .join(', ')}]`;
-                }
-                else if (id === 'virtual:global-css') {
-                    return `${globalCss.map((css) => `import '${css}'`).join('\n')}`;
+                        .join(', ')}]
+            export const onSetup = []
+            ${onSetupFiles
+                        .map((url, index) => `import ${url.pathname
+                        .replaceAll('/', '')
+                        .replaceAll('.', '')} from '${url.pathname}'; onSetup.push(${url.pathname
+                        .replaceAll('/', '')
+                        .replaceAll('.', '')})`)
+                        .join('\n')}`;
+                    // export const onSetup = [${onSetupHooks
+                    //   .map((fn) => `${String(fn)}`)
+                    //   .join(', ')}]`
+                    /**
+                     * CSS imports in virtual files do not seem to work. Using transform() instead
+                     */
+                    // } else if (id === 'virtual:global-css') {
+                    //   return `${globalCss.map((css) => `import '${css}'`).join('\n')}`
                 }
                 else if (id === 'virtual:static-imports') {
                     return `${Object.entries(staticImports)
@@ -218,6 +328,9 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                         case 'client':
                             entry = new URL('ssr/entry-client.ts', frameworkDir).pathname;
                             break;
+                        case 'fastify':
+                            entry = new URL('entry.ts', fastifyDir).pathname;
+                            break;
                         default:
                             entry = new URL('csr/entry.ts', frameworkDir).pathname;
                     }
@@ -251,25 +364,105 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         { find: 'cwd', replacement: cwd.pathname },
         { find: 'boot', replacement: new URL('boot/', srcDir).pathname },
         { find: 'assets', replacement: new URL('assets/', srcDir).pathname },
-        // ...Object.entries(packageUrls).map(([key, value]) => ({
-        //   find: key, replacement: value.pathname
-        // })),
-        { find: 'vue', replacement: packageUrls['vue'].pathname },
-        { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
-        { find: 'vitrify', replacement: cliDir.pathname }
+        ...Object.entries(packageUrls).map(([key, value]) => ({
+            find: key,
+            replacement: value.pathname
+        }))
+        // { find: 'vue', replacement: packageUrls['vue'].pathname },
+        // { find: 'vue-router', replacement: packageUrls['vue-router'].pathname },
+        // { find: 'vitrify', replacement: cliDir.pathname }
     ];
+    if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
+        alias.push(...vitrifyConfig.vitrify.dev.alias);
     if (command === 'test')
         alias.push({
             find: 'vitest',
-            replacement: packageUrls.vitest.pathname
+            replacement: new URL(await resolve('vitest', cliDir.href)).pathname
         });
+    let rollupOptions = {};
+    let noExternal = [
+        new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+    ];
+    const external = [...builtinModules, ...serverModules];
+    if (ssr === 'server') {
+        rollupOptions = {
+            input: [
+                new URL('ssr/entry-server.ts', frameworkDir).pathname,
+                new URL('ssr/prerender.ts', frameworkDir).pathname,
+                new URL('ssr/server.ts', frameworkDir).pathname
+            ],
+            external,
+            output: {
+                minifyInternalExports: false,
+                entryFileNames: '[name].mjs',
+                chunkFileNames: '[name].mjs',
+                format: 'es',
+                manualChunks
+                // manualChunks: (id) => {
+                //   if (id.includes('vitrify/src/vite/')) {
+                //     const name = id.split('/').at(-1)?.split('.').at(0)
+                //     if (name && manualChunks.includes(name)) return name
+                //   } else if (id.includes('node_modules')) {
+                //     return 'vendor'
+                //   }
+                // }
+            }
+        };
+        // Create a SSR bundle
+        noExternal = [
+            new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+            // new RegExp(`^(?!.*(${[...builtinModules, ...serverModules].join('|')}))`)
+        ];
+    }
+    else if (ssr === 'fastify') {
+        rollupOptions = {
+            input: [new URL('server.ts', fastifyDir).pathname],
+            external,
+            output: {
+                minifyInternalExports: false,
+                entryFileNames: '[name].mjs',
+                chunkFileNames: '[name].mjs',
+                format: 'es',
+                manualChunks
+                // manualChunks: (id) => {
+                //   if (id.includes('vitrify/src/vite/')) {
+                //     const name = id.split('/').at(-1)?.split('.').at(0)
+                //     if (name && manualChunks.includes(name)) return name
+                //   } else if (id.includes('node_modules')) {
+                //     return 'vendor'
+                //   }
+                // }
+            }
+        };
+        // Create a SSR bundle
+        noExternal = [
+            new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+        ];
+    }
+    else {
+        rollupOptions = {
+            input: [
+                new URL('index.html', frameworkDir).pathname
+                // new URL('csr/server.ts', frameworkDir).pathname
+            ],
+            external,
+            output: {
+                minifyInternalExports: false,
+                entryFileNames: '[name].mjs',
+                chunkFileNames: '[name].mjs',
+                format: 'es',
+                manualChunks
+            }
+        };
+    }
     const config = {
-        root: frameworkDir.pathname,
+        root: ssr === 'fastify' ? appDir.pathname : frameworkDir.pathname,
         publicDir: publicDir.pathname,
+        base,
+        envDir: appDir.pathname,
         vitrify: {
             productName,
             urls: {
-                // @ts-ignore
                 app: appDir,
                 cli: cliDir,
                 src: srcDir,
@@ -279,67 +472,54 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         },
         plugins,
         optimizeDeps: {
-            exclude: ['vue']
+            exclude: ['vue', ...serverModules, ...builtinModules]
         },
         resolve: {
-            // Dedupe uses require which breaks ESM SSR builds
-            // dedupe: [
-            //   'vue',
-            //   'vue-router'
-            // ],
+            dedupe: ['vue', 'vue-router'],
             alias
         },
         build: {
-            target: ssr === 'server' ? 'esnext' : 'modules',
-            ssr: ssr === 'server' ? true : false,
+            target: ssr === 'server' || ssr === 'fastify' ? 'esnext' : 'modules',
+            ssr: ssr === 'server' || ssr === 'fastify' ? true : false,
             ssrManifest: ssr === 'client' || ssr === 'ssg',
-            rollupOptions: ssr === 'server'
-                ? {
-                    input: [
-                        new URL('ssr/entry-server.ts', frameworkDir).pathname,
-                        new URL('ssr/prerender.ts', frameworkDir).pathname,
-                        new URL('ssr/server.ts', frameworkDir).pathname
-                    ],
-                    output: {
-                        minifyInternalExports: false,
-                        entryFileNames: '[name].mjs',
-                        chunkFileNames: '[name].mjs',
-                        format: 'es',
-                        manualChunks: (id) => {
-                            if (id.includes('vitrify/src/vite/')) {
-                                const name = id.split('/').at(-1)?.split('.').at(0);
-                                console.log(name);
-                                if (manualChunks.includes(id))
-                                    return name;
-                            }
-                            else if (id.includes('node_modules')) {
-                                return 'vendor';
-                            }
-                        }
-                    }
-                }
-                : {
-                    output: {
-                        format: 'es'
-                    }
-                }
+            rollupOptions
+            // ssr === 'server'
+            //   ? {
+            //       input: [
+            //         new URL('ssr/entry-server.ts', frameworkDir).pathname,
+            //         new URL('ssr/prerender.ts', frameworkDir).pathname,
+            //         new URL('ssr/server.ts', frameworkDir).pathname
+            //       ],
+            //       output: {
+            //         minifyInternalExports: false,
+            //         entryFileNames: '[name].mjs',
+            //         chunkFileNames: '[name].mjs',
+            //         format: 'es',
+            //         manualChunks: (id) => {
+            //           if (id.includes('vitrify/src/vite/')) {
+            //             const name = id.split('/').at(-1)?.split('.').at(0)
+            //             if (name && manualChunks.includes(name)) return name
+            //           } else if (id.includes('node_modules')) {
+            //             return 'vendor'
+            //           }
+            //         }
+            //       }
+            //     }
+            //   : {
+            //       output: {
+            //         format: 'es'
+            //       }
+            //     }
         },
-        // css: {
-        //   preprocessorOptions: {
-        //     sass: {
-        //       additionalData: sass ? [...sass].join('\n') : undefined
-        //     }
-        //   }
-        // },
         ssr: {
             // Create a SSR bundle
-            noExternal: [
-                new RegExp(`^(?!.*(${[...builtinModules, ...serverModules].join('|')}))`)
-            ]
+            external,
+            noExternal
         },
         define: {
-            __BASE_URL__: `'/'`
+            __BASE_URL__: `'${base}'`
         }
     };
     return mergeConfig(config, vitrifyConfig);
 };
+export const vitrifyDir = new URL('..', import.meta.url);