vitrify 0.1.0 → 0.2.1

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 };
+}

package/dist/index.js

@@ -0,0 +1,341 @@
+import vuePlugin from '@vitejs/plugin-vue';
+import { mergeConfig } from 'vite';
+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 configPluginMap = {
+    quasar: () => import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
+};
+export const VIRTUAL_MODULES = [
+    'virtual:fastify-setup',
+    'virtual:boot-functions',
+    'virtual:ssr-functions',
+    'virtual:on-mounted-hooks',
+    'virtual:global-css',
+    'virtual:static-imports'
+];
+export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mode = 'production', framework = 'vue', pwa = false }) => {
+    const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } = await import('./app-urls.js');
+    if (!appDir) {
+        appDir = getAppDir();
+    }
+    const srcDir = getSrcDir(appDir);
+    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));
+    if (!publicDir)
+        publicDir = new URL('public/', appDir);
+    /**
+     * TODO:Perform some manual check if command is run inside a Quasar Project
+     */
+    let vitrifyConfig;
+    try {
+        vitrifyConfig = (await import(new URL('vitrify.config.js', appDir).pathname)).default;
+        if (typeof vitrifyConfig === 'function')
+            vitrifyConfig = vitrifyConfig({ mode, command });
+    }
+    catch (e) {
+        console.error(e);
+        console.log('No vitrify.config.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 ssrTransformCustomDir = () => {
+        return {
+            props: [],
+            needRuntime: true
+        };
+    };
+    const frameworkPlugins = [];
+    for (const framework of Object.keys(configPluginMap)) {
+        if (Object.keys(vitrifyConfig).includes(framework)) {
+            const plugin = await configPluginMap[framework]();
+            frameworkPlugins.push(await plugin({
+                ssr,
+                pwa
+            }));
+        }
+    }
+    let bootFunctions;
+    let ssrFunctions;
+    let onMountedHooks;
+    let globalCss;
+    let staticImports;
+    let sassVariables;
+    let additionalData;
+    const plugins = [
+        vuePlugin({
+            template: {
+                ssr: !!ssr,
+                compilerOptions: {
+                    directiveTransforms: {
+                        'close-popup': ssrTransformCustomDir,
+                        intersection: ssrTransformCustomDir,
+                        ripple: ssrTransformCustomDir,
+                        mutation: ssrTransformCustomDir,
+                        morph: ssrTransformCustomDir,
+                        scroll: ssrTransformCustomDir,
+                        'scroll-fire': ssrTransformCustomDir,
+                        'touch-hold': ssrTransformCustomDir,
+                        'touch-pan': ssrTransformCustomDir,
+                        'touch-repeat': ssrTransformCustomDir,
+                        'touch-swipe': ssrTransformCustomDir
+                    }
+                }
+            }
+        }),
+        ...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 || [];
+                onMountedHooks = config.vitrify?.hooks?.onMounted || [];
+                globalCss = config.vitrify?.globalCss || [];
+                staticImports = config.vitrify?.staticImports || {};
+                sassVariables = config.vitrify?.sass?.variables || {};
+                additionalData = config.vitrify?.sass?.additionalData || [];
+                return {
+                    css: {
+                        preprocessorOptions: {
+                            sass: {
+                                additionalData: [
+                                    ...Object.entries(sassVariables).map(([key, value]) => `${key}: ${value}`),
+                                    ...additionalData
+                                    // config.css?.preprocessorOptions?.sass.additionalData
+                                ].join('\n')
+                            }
+                        }
+                    }
+                };
+            },
+            configResolved: (config) => {
+                if (process.env.DEBUG) {
+                    console.log(config.css?.preprocessorOptions?.sass.additionalData);
+                    console.log(config.optimizeDeps);
+                }
+            },
+            resolveId(id) {
+                if (VIRTUAL_MODULES.includes(id))
+                    return id;
+                return;
+            },
+            load(id) {
+                if (id === 'virtual:fastify-setup') {
+                    return `export const setup = ${String(fastifySetup)}`;
+                }
+                else if (id === 'virtual:boot-functions') {
+                    return `export default [${bootFunctions
+                        .map((fn) => `${String(fn)}`)
+                        .join(', ')}]`;
+                }
+                else if (id === 'virtual:ssr-functions') {
+                    return `export default [${ssrFunctions
+                        .map((fn) => `${String(fn)}`)
+                        .join(', ')}]`;
+                }
+                else if (id === 'virtual:on-mounted-hooks') {
+                    return `export default [${onMountedHooks
+                        .map((fn) => `${String(fn)}`)
+                        .join(', ')}]`;
+                }
+                else if (id === 'virtual:global-css') {
+                    return `${globalCss.map((css) => `import '${css}'`).join('\n')}`;
+                }
+                else if (id === 'virtual:static-imports') {
+                    return `${Object.entries(staticImports)
+                        .map(([key, value]) => `export { ${value.join(',')} } from '${key}';`)
+                        .join('\n')}`;
+                }
+                return null;
+            }
+        }
+    ];
+    if (command !== 'test') {
+        plugins.unshift({
+            name: 'html-transform',
+            enforce: 'pre',
+            transform: (code, id) => {
+                if (id.endsWith('App.vue')) {
+                    code =
+                        code +
+                            `<style lang="sass">
+// do not remove, required for additionalData import
+</style>`;
+                }
+                return code;
+            },
+            transformIndexHtml: {
+                enforce: 'pre',
+                transform: (html) => {
+                    let entry;
+                    switch (ssr) {
+                        case 'ssg':
+                        case 'server':
+                        case 'client':
+                            entry = new URL('ssr/entry-client.ts', frameworkDir).pathname;
+                            break;
+                        default:
+                            entry = new URL('csr/entry.ts', frameworkDir).pathname;
+                    }
+                    const entryScript = `<script type="module" src="${entry}"></script>`;
+                    html = html
+                        .replace('<!--entry-script-->', entryScript)
+                        .replace('<!--product-name-->', productName);
+                    return html;
+                }
+            }
+        });
+        plugins.unshift({
+            name: 'product-name',
+            enforce: 'post',
+            config: (config, env) => {
+                if (config.vitrify?.productName)
+                    productName = config.vitrify?.productName;
+            },
+            transformIndexHtml: {
+                enforce: 'post',
+                transform: (html) => {
+                    html = html.replace('<!--product-name-->', productName);
+                    return html;
+                }
+            }
+        });
+    }
+    const alias = [
+        { find: 'src', replacement: srcDir.pathname },
+        { find: 'app', replacement: appDir.pathname },
+        { 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 }
+    ];
+    if (command === 'test')
+        alias.push({
+            find: 'vitest',
+            replacement: packageUrls.vitest.pathname
+        });
+    const config = {
+        root: frameworkDir.pathname,
+        publicDir: publicDir.pathname,
+        vitrify: {
+            productName,
+            urls: {
+                // @ts-ignore
+                app: appDir,
+                cli: cliDir,
+                src: srcDir,
+                cwd,
+                packages: packageUrls
+            }
+        },
+        plugins,
+        optimizeDeps: {
+            exclude: ['vue']
+        },
+        resolve: {
+            // Dedupe uses require which breaks ESM SSR builds
+            // dedupe: [
+            //   'vue',
+            //   'vue-router'
+            // ],
+            alias
+        },
+        build: {
+            target: ssr === 'server' ? 'esnext' : 'modules',
+            ssr: ssr === 'server' ? 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('fastify-ssr-plugin')) {
+                                return 'fastify-ssr-plugin';
+                            }
+                            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('|')}))`)
+            ]
+        },
+        define: {
+            __BASE_URL__: `'/'`
+        }
+    };
+    return mergeConfig(config, vitrifyConfig);
+};

package/dist/plugins/index.js

@@ -0,0 +1 @@
+export {};