vitrify 0.20.0 → 0.22.0

package/dist/plugins/quasar/index.js

@@ -0,0 +1,227 @@
+import { fileURLToPath } from 'url';
+import { findDepPkgJsonPath } from 'vitefu';
+import { QuasarResolver } from 'unplugin-vue-components/resolvers';
+export const injectSsrContext = (html, ssrContext) => html
+    .replace(/(<html[^>]*)(>)/i, (found, start, end) => {
+    let matches;
+    matches = found.match(/\sdir\s*=\s*['"]([^'"]*)['"]/i);
+    if (matches) {
+        start = start.replace(matches[0], '');
+    }
+    matches = found.match(/\slang\s*=\s*['"]([^'"]*)['"]/i);
+    if (matches) {
+        start = start.replace(matches[0], '');
+    }
+    return `${start} ${ssrContext._meta.htmlAttrs || ''} ${end}`;
+})
+    .replace(/(<head[^>]*)(>)/i, (_, start, end) => `${start}${end}${ssrContext._meta.headTags || ''}`)
+    .replace(/(<\/head>)/i, (_, tag) => `${ssrContext._meta.resourceStyles || ''}${ssrContext._meta.endingHeadTags || ''}${tag}`)
+    .replace(/(<body[^>]*)(>)/i, (found, start, end) => {
+    let classes = ssrContext._meta.bodyClasses || '';
+    const matches = found.match(/\sclass\s*=\s*['"]([^'"]*)['"]/i);
+    if (matches) {
+        if (matches[1].length > 0) {
+            classes += ` ${matches[1]}`;
+        }
+        start = start.replace(matches[0], '');
+    }
+    return `${start} class="${classes.trim()}" ${ssrContext._meta.bodyAttrs || ''}${end}${ssrContext._meta.bodyTags || ''}`;
+});
+export const QuasarPlugin = async ({ ssr = false, pwa = false, options }) => {
+    let plugins = [];
+    const quasarConf = options;
+    return {
+        plugins: [
+            {
+                name: 'vite-plugin-quasar-transform',
+                enforce: 'pre',
+                transform: (code, id, options) => {
+                    code = code
+                        .replaceAll('__QUASAR_SSR__', ssr ? 'true' : 'false')
+                        .replaceAll('__QUASAR_SSR_SERVER__', ssr ? '(import.meta.env.SSR === true)' : 'false')
+                        .replaceAll('__QUASAR_SSR_CLIENT__', ssr ? '(import.meta.env.SSR === false)' : 'false')
+                        .replaceAll('__QUASAR_SSR_PWA__', ssr && pwa ? '(import.meta.env.SSR === false)' : 'false');
+                    return code;
+                }
+            },
+            {
+                name: 'vite-plugin-quasar-setup',
+                enforce: 'pre',
+                config: async (config, env) => {
+                    const { vitrify: { urls } = {} } = config;
+                    // if (quasar) quasarConf = quasar
+                    if (!quasarConf.framework.lang && config.vitrify?.lang)
+                        quasarConf.framework.lang = config.vitrify.lang;
+                    const globalCss = quasarConf?.extras?.map((extra) => `@quasar/extras/${extra}/${extra}.css`);
+                    const localPackages = ['@quasar/extras', 'quasar'];
+                    // const localPackages: string[] = []
+                    await (async () => {
+                        for (const val of localPackages) {
+                            const pkgDir = await findDepPkgJsonPath(val, fileURLToPath(config.vitrify.urls.app));
+                            if (pkgDir)
+                                urls.packages[val] = new URL(`file://${pkgDir}`);
+                        }
+                    })();
+                    const onMountedHooks = [
+                        async (instance) => {
+                            const { proxy: { $q } } = instance;
+                            if ($q.onSSRHydrated !== void 0)
+                                $q.onSSRHydrated();
+                        }
+                    ];
+                    const onBootHooks = [
+                        async ({ app, ssrContext, staticImports }) => {
+                            // @ts-expect-error undefined
+                            const quasarPlugins = await import('virtual:quasar-plugins');
+                            // @ts-expect-error undefined
+                            const directives = await import('virtual:quasar-directives');
+                            // @ts-expect-error undefined
+                            const { default: lang } = await import('virtual:quasar-lang');
+                            const { default: iconSet } = await import(
+                            // @ts-expect-error undefined
+                            'virtual:quasar-iconSet');
+                            const { default: iconMapFn } = await import(
+                            // @ts-expect-error undefined
+                            'virtual:quasar-iconMapFn');
+                            app.use(staticImports?.Quasar, {
+                                plugins: quasarPlugins,
+                                directives,
+                                lang,
+                                iconSet,
+                                config: {
+                                    iconMapFn
+                                }
+                            }, ssrContext);
+                        }
+                    ];
+                    /**
+                     * Importing package.json is problematic
+                     */
+                    const version = '?';
+                    /**
+                     * All components should have been auto-imported
+                     */
+                    if (quasarConf?.framework?.plugins) {
+                        if (!quasarConf.framework)
+                            quasarConf.framework = {};
+                        quasarConf.framework.plugins = [
+                            ...new Set(quasarConf.framework.plugins)
+                        ];
+                        plugins = quasarConf?.framework.plugins;
+                    }
+                    return {
+                        vitrify: {
+                            urls,
+                            globalCss,
+                            staticImports: {
+                                quasar: ['Quasar']
+                            },
+                            hooks: {
+                                onBoot: onBootHooks,
+                                onMounted: onMountedHooks,
+                                onRendered: [injectSsrContext]
+                            },
+                            sass: quasarConf.disableSass
+                                ? undefined
+                                : {
+                                    global: ['quasar/src/css/index.sass']
+                                }
+                        },
+                        resolve: {
+                            alias: [
+                                {
+                                    find: 'quasar/src/',
+                                    replacement: fileURLToPath(new URL('./src/', config.vitrify.urls.packages.quasar))
+                                }
+                            ]
+                        },
+                        optimizeDeps: {
+                            exclude: ['quasar']
+                        },
+                        define: {
+                            __DEV__: process.env.NODE_ENV !== 'production' || true,
+                            __QUASAR_VERSION__: `'${version}'`
+                        },
+                        ssr: {
+                            noExternal: ['quasar']
+                        }
+                    };
+                }
+            },
+            {
+                name: 'quasar-virtual-modules',
+                enforce: 'pre',
+                config: async (config, env) => ({
+                    resolve: {
+                        alias: [
+                            {
+                                find: new RegExp('^quasar$'),
+                                replacement: 'virtual:quasar'
+                            }
+                            // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
+                        ]
+                    }
+                }),
+                resolveId(id) {
+                    switch (id) {
+                        case 'virtual:quasar-plugins':
+                            return 'virtual:quasar-plugins';
+                        case 'virtual:quasar-directives':
+                            return 'virtual:quasar-directives';
+                        case 'virtual:quasar-lang':
+                            return 'virtual:quasar-lang';
+                        case 'virtual:quasar-iconSet':
+                            return 'virtual:quasar-iconSet';
+                        case 'virtual:quasar-iconMapFn':
+                            return 'virtual:quasar-iconMapFn';
+                        case 'virtual:quasar':
+                            return { id: 'virtual:quasar', moduleSideEffects: false };
+                        default:
+                            return;
+                    }
+                },
+                load(id) {
+                    if (id === 'virtual:quasar-plugins') {
+                        return `export { ${plugins.join(',')} } from 'quasar'`;
+                    }
+                    else if (id === 'virtual:quasar-directives') {
+                        return `export * from 'quasar/src/directives.js'`;
+                    }
+                    else if (id === 'virtual:quasar-lang') {
+                        return `import lang from 'quasar/lang/${quasarConf?.framework?.lang || 'en-US'}';
+          export default lang`;
+                    }
+                    else if (id === 'virtual:quasar-iconSet') {
+                        return `${typeof quasarConf.framework.iconSet === 'string'
+                            ? `import iconSet from 'quasar/icon-set/${quasarConf?.framework.iconSet || 'material-icons'}';
+          export default iconSet`
+                            : `export default ${quasarConf.framework.iconSet
+                                ? JSON.stringify(quasarConf.framework.iconSet)
+                                : null}`}`;
+                    }
+                    else if (id === 'virtual:quasar-iconMapFn') {
+                        return `export default ${quasarConf?.framework.iconMapFn?.toString() ?? null}`;
+                    }
+                    else if (id === 'virtual:quasar') {
+                        return `export * from 'quasar/src/plugins.js';
+          export * from 'quasar/src/components.js';
+          export * from 'quasar/src/composables.js';
+          export * from 'quasar/src/directives.js';
+          export * from 'quasar/src/utils.js';
+          export * from 'quasar/src/composables.js';
+          export { default as Quasar } from 'quasar/src/install-quasar.js'`;
+                    }
+                    return null;
+                }
+            }
+        ],
+        config: {
+            vitrify: {
+                unpluginVueComponents: {
+                    resolvers: [QuasarResolver()]
+                }
+            }
+        }
+    };
+};
+export default QuasarPlugin;

package/dist/types/app-urls.d.ts

@@ -1,6 +1,6 @@
 export declare const resolve: (packageName: string, base: URL, counter?: number) => URL;
 export declare const getPkgJsonDir: (dir: URL) => URL;
-export declare const getAppDir: () => URL;
+export declare const getAppDir: (dir?: URL) => URL;
 export declare const getCliDir: () => URL;
 export declare const getCliViteDir: (cliDir: URL) => URL;
 export declare const getSrcDir: (appDir: URL) => URL;

package/dist/types/frameworks/vue/fastify-ssr-plugin.d.ts

@@ -29,5 +29,15 @@ declare const renderHtml: (options: {
     manifest: Record<string, unknown>;
     render: any;
 }) => Promise<string>;
-export { fastifySsrPlugin, renderHtml };
+declare const loadSSRAssets: ({ mode, distDir }?: {
+    mode?: "ssr" | "ssg";
+    distDir?: URL;
+}) => Promise<{
+    template: string;
+    manifest: any;
+    render: any;
+    getRoutes: any;
+    onRendered: any;
+}>;
+export { fastifySsrPlugin, renderHtml, loadSSRAssets };
 export type FastifySsrPlugin = typeof fastifySsrPlugin;

package/dist/types/frameworks/vue/prerender.d.ts

@@ -1,8 +1,10 @@
 import type { OnRenderedHook } from 'src/node/vitrify-config.js';
-export declare const prerender: ({ outDir, templatePath, manifestPath, entryServerPath, onRendered }: {
+import { type RouteRecordRaw } from 'vue-router';
+export declare const prerender: ({ outDir, template, manifest, render, routes, onRendered }: {
     outDir: string;
-    templatePath: string;
-    manifestPath: string;
-    entryServerPath: string;
+    template: string;
+    manifest: Record<string, unknown>;
+    render: unknown;
+    routes: RouteRecordRaw[];
     onRendered: OnRenderedHook[];
 }) => Promise<void[]>;

package/dist/types/plugins/index.d.ts

@@ -1,7 +1,17 @@
 import type { Plugin } from 'vite';
-export type VitrifyPlugin = ({ ssr, mode, command }: {
+import { VitrifyConfig } from '../vitrify-config.js';
+type VitrifyPluginReturnType = {
+    plugin: Plugin;
+    config?: Partial<VitrifyConfig>;
+} | {
+    plugins: Plugin[];
+    config?: Partial<VitrifyConfig>;
+};
+export type VitrifyPlugin<Options> = ({ ssr, pwa, mode, command, options }: {
     ssr?: 'server' | 'client' | 'ssg' | 'fastify' | false;
     pwa?: boolean;
     mode?: 'production' | 'development';
     command?: 'build' | 'dev' | 'test';
-}) => Promise<Plugin | Plugin[]> | Plugin | Plugin[];
+    options: Options;
+}) => Promise<VitrifyPluginReturnType> | VitrifyPluginReturnType;
+export * from './quasar/index.js';

package/dist/types/plugins/{quasar.d.ts → quasar/index.d.ts}

@@ -1,6 +1,6 @@
-import type { VitrifyPlugin } from './index.js';
+import type { VitrifyPlugin } from '../index.js';
 import { type QuasarFonts, type QuasarComponents, type QuasarDirectives, type QuasarIconSets, type QuasarPlugins, type GlobalQuasarIconMapFn, type QuasarIconSet } from 'quasar';
-export interface QuasarConf {
+export interface QuasarPluginOptions {
     framework: {
         components?: (keyof QuasarComponents)[];
         directives?: (keyof QuasarDirectives)[];
@@ -13,5 +13,5 @@ export interface QuasarConf {
     disableSass?: boolean;
 }
 export declare const injectSsrContext: (html: string, ssrContext: Record<string, any>) => string;
-export declare const QuasarPlugin: VitrifyPlugin;
+export declare const QuasarPlugin: VitrifyPlugin<QuasarPluginOptions>;
 export default QuasarPlugin;

package/dist/types/vitrify-config.d.ts

@@ -1,9 +1,10 @@
 import type { Alias, UserConfig as ViteUserConfig, ViteDevServer } from 'vite';
-import type { QuasarConf } from './plugins/quasar.js';
 import type { ComponentInternalInstance } from '@vue/runtime-core';
 import type { FastifyInstance, FastifyServerOptions } from 'fastify';
 import type { VitePWAOptions } from 'vite-plugin-pwa';
+import type { Options as unpluginVueComponentsOptions } from 'unplugin-vue-components';
 import type { UserConfig as UnoCSSUserConfig } from '@unocss/core';
+import { VitrifyPlugin } from './plugins/index.js';
 export type BootFunction = ({ app, ssrContext, staticImports }: {
     app: any;
     ssrContext: Record<string, unknown>;
@@ -25,6 +26,10 @@ export type OnSetupFile = URL;
 export interface VitrifyConfig extends ViteUserConfig {
     vitrify?: {
         lang?: string;
+        /**
+         * Vitrify plugins
+         */
+        plugins?: VitrifyPluginConfig[];
         /**
          * Global CSS imports
          */
@@ -97,8 +102,11 @@ export interface VitrifyConfig extends ViteUserConfig {
          * UnoCSS Configuration
          */
         unocss?: UnoCSSUserConfig;
+        /**
+         * unplugin-vue-components configuration
+         */
+        unpluginVueComponents?: unpluginVueComponentsOptions;
     };
-    quasar?: QuasarConf;
 }
 export type VitrifyCommands = 'build' | 'dev' | 'test';
 export type VitrifyModes = 'production' | 'development';
@@ -108,4 +116,9 @@ export type VitrifyConfigAsync = ({ mode, command }: {
     mode: VitrifyModes;
     command: VitrifyCommands;
 }) => Promise<VitrifyConfig>;
+type VitrifyPluginConfig = {
+    plugin: VitrifyPlugin<any>;
+    options: any;
+};
 export declare const defineConfig: (config: VitrifyConfig) => VitrifyConfig;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",
@@ -30,9 +30,9 @@
     "./client": {
       "types": "./client.d.ts"
     },
-    "./unocss/quasar/styles": {
-      "types": "./dist/types/plugins/quasar/unocss/styles/index.d.ts",
-      "import": "./dist/plugins/quasar/unocss/styles/index.js"
+    "./plugins": {
+      "types": "./dist/types/plugins/index.d.ts",
+      "import": "./dist/plugins/index.js"
     }
   },
   "engines": {
@@ -49,10 +49,11 @@
   "homepage": "https://github.com/simsustech/vitrify/tree/main/#readme",
   "dependencies": {
     "@fastify/middie": "^9.0.3",
+    "@fastify/one-line-logger": "^2.0.2",
     "@fastify/static": "^8.1.1",
     "@unocss/core": "^66.0.0",
     "@unocss/preset-uno": "^66.0.0",
-    "@unocss/preset-web-fonts": "66.1.0-beta.10",
+    "@unocss/preset-web-fonts": "66.1.0-beta.13",
     "@unocss/preset-wind": "^66.0.0",
     "@vitejs/plugin-vue": "^5.2.3",
     "ajv": "^8.17.1",
@@ -60,23 +61,23 @@
     "cac": "^6.7.14",
     "chalk": "^5.4.1",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.25.2",
-    "fastify": "^5.2.2",
-    "glob": "^11.0.1",
-    "happy-dom": "^17.4.4",
+    "esbuild": "^0.25.3",
+    "fastify": "^5.3.2",
+    "glob": "^11.0.2",
+    "happy-dom": "^17.4.6",
     "is-port-reachable": "^4.0.0",
     "magic-string": "^0.30.17",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
     "rollup-plugin-visualizer": "^5.14.0",
-    "sass": "1.86.3",
+    "sass": "1.87.0",
     "ts-node": "^10.9.2",
     "unocss": "^66.0.0",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^6.2.5",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.4",
     "vite-plugin-pwa": "^1.0.0",
     "vitefu": "^1.0.6",
-    "vitest": "^3.1.1",
+    "vitest": "^3.1.2",
     "workbox-window": "^7.3.0"
   },
   "devDependencies": {
@@ -87,25 +88,25 @@
     "@types/connect": "^3.4.38",
     "@types/glob": "^8.1.0",
     "@types/merge-deep": "^3.0.3",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.15.3",
     "@types/ws": "^8.18.1",
     "@unocss/preset-icons": "^66.0.0",
     "@vue/runtime-core": "^3.5.13",
-    "beasties": "^0.3.2",
+    "beasties": "^0.3.3",
     "css": "^3.0.0",
     "css-to-tailwind-translator": "^1.2.8",
     "quasar": "^2.18.1",
-    "rollup": "^4.39.0",
+    "rollup": "^4.40.1",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.1"
   },
   "peerDependencies": {
     "@fastify/static": "^8.1.1",
-    "fastify": "^5.2.2",
+    "fastify": "^5.3.2",
     "quasar": "^2.18.1",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.1"
   },
   "publishConfig": {
     "access": "public",

package/src/node/app-urls.ts

@@ -19,8 +19,8 @@ export const getPkgJsonDir = (dir: URL): URL => {
   }
   return getPkgJsonDir(new URL('..', dir))
 }
-export const getAppDir = () =>
-  getPkgJsonDir(new URL(`file://${process.cwd()}/`))
+export const getAppDir = (dir?: URL) =>
+  getPkgJsonDir(dir ?? new URL(`file://${process.cwd()}/`))
 export const getCliDir = () => getPkgJsonDir(new URL('./', import.meta.url))
 export const getCliViteDir = (cliDir: URL) => new URL('src/vite/', cliDir)
 export const getSrcDir = (appDir: URL) => new URL('src/', appDir)

package/src/node/bin/cli.ts

@@ -8,6 +8,7 @@ import type { ResolvedConfig, ViteDevServer } from 'vite'
 import type { Server } from 'net'
 import type { FastifyInstance } from 'fastify'
 import { readdir } from 'fs/promises'
+import { loadSSRAssets } from '../frameworks/vue/fastify-ssr-plugin.js'
 
 const cli = cac('vitrify')
 cli
@@ -85,17 +86,23 @@ cli
           ...args,
           outDir: fileURLToPath(new URL('ssr/server/', baseOutDir))
         })
-        ;({ prerender, onRendered } = await import(
+        ;({ 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/src/node/bin/dev.ts

@@ -49,8 +49,6 @@ export async function createVitrifyDevServer({
     '../app-urls.js'
   )
 
-  const cliDir = getCliDir()
-
   if (!appDir) appDir = getAppDir()
   let config: InlineConfig = {}
   let ssrMode: 'server' | 'fastify' | undefined
@@ -66,52 +64,32 @@ export async function createVitrifyDevServer({
     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
@@ -170,9 +148,17 @@ export async function createServer({
         ? 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'