vitrify 0.4.0 → 0.5.0

package/README.md

@@ -3,12 +3,12 @@
 > Pre-configured Vite CLI for your framework
 
 - Use a simple configuration file to configure and integrate required Vite plugins into your project.
-- Client-Side Rendering (CSR) and Server-Side Rendering (SSR) builds and development servers.
+- Client-Side Rendering (CSR), Server-Side Rendering (SSR) and Fastify server build and development modes.
 
 ## Features
 
 - Uses [Fastify](https://github.com/fastify/fastify-vite) for the development server and SSR production server.
-  - Generates a Fastify plugin to serve your server-side rendered application.
+- Generates a Fastify plugin to serve your server-side rendered application.
 - A [`run`](./src/node/bin/run.ts) command which injects context such as application paths into the script which you want to run.
 - A [`test`](./src/node/bin/test.ts) command which runs a pre-configured [Vitest](https://github.com/vitest-dev/vitest) instance.
 - An [extra plugin layer](./src/node/plugins/index.ts) which provides some extra context such as the SSR mode (client or server) and PWA mode. Used for UI frameworks which render differently based on these settings.

package/dist/bin/build.js

@@ -7,7 +7,8 @@ export async function build(opts) {
         mode: 'production',
         ssr: opts?.ssr,
         appDir: opts.appDir,
-        publicDir: opts.publicDir
+        publicDir: opts.publicDir,
+        base: opts.base
     });
     config.build = {
         ...config.build,
@@ -15,15 +16,15 @@ export async function build(opts) {
         outDir: opts.outDir,
         emptyOutDir: !!opts.outDir
     };
-    if (opts.base) {
-        config.define = {
-            ...config.define,
-            __BASE_URL__: `'${opts.base}'`
-        };
-    }
+    // if (opts.base) {
+    //   config.define = {
+    //     ...config.define,
+    //     __BASE_URL__: `'${opts.base}'`
+    //   }
+    // }
     return viteBuild({
         configFile: false,
-        base: opts.base,
+        // base: opts.base,
         // logLevel: 'silent',
         ...config
     });

package/dist/bin/cli.js

@@ -33,7 +33,7 @@ cli
         case 'csr':
             await build({
                 ...args,
-                outDir: new URL('spa/', baseOutDir).pathname
+                outDir: new URL('csr/', baseOutDir).pathname
             });
             break;
         case 'fastify':
@@ -106,7 +106,7 @@ cli
         case 'ssr':
             ;
             ({ server, config } = await createServer({
-                mode: 'ssr',
+                ssr: 'ssr',
                 host: options.host,
                 appDir: parsePath(options.appDir, cwd),
                 publicDir: parsePath(options.publicDir, cwd)
@@ -115,7 +115,7 @@ cli
         case 'fastify':
             ;
             ({ server, config } = await createServer({
-                mode: 'fastify',
+                ssr: 'fastify',
                 host: options.host,
                 appDir: parsePath(options.appDir, cwd),
                 publicDir: parsePath(options.publicDir, cwd)

package/dist/bin/dev.js

@@ -1,16 +1,19 @@
 import { searchForWorkspaceRoot } from 'vite';
 import { baseConfig } from '../index.js';
 import fastify from 'fastify';
-export async function createVitrifyDevServer({ port = 3000, logLevel = 'info', mode = 'csr', framework = 'vue', host, appDir, publicDir }) {
+import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js';
+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 = {};
     let ssrMode;
-    if (mode === 'ssr')
+    if (ssr === 'ssr')
         ssrMode = 'server';
-    if (mode === 'fastify')
+    if (ssr === 'fastify')
         ssrMode = 'fastify';
     config = await baseConfig({
         framework,
@@ -18,22 +21,26 @@ export async function createVitrifyDevServer({ port = 3000, logLevel = 'info', m
         command: 'dev',
         mode: 'development',
         appDir,
-        publicDir
+        publicDir,
+        base
     });
     config.logLevel = logLevel;
+    console.log(searchForWorkspaceRoot(appDir.pathname));
     config.server = {
         https: config.server?.https,
+        hmr: {
+            protocol: config.server?.https ? 'wss' : 'ws'
+        },
         port,
         // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
-        middlewareMode: mode !== 'csr' ? 'ssr' : false,
+        middlewareMode: ssr ? 'ssr' : false,
         fs: {
+            strict: false,
             allow: [
                 searchForWorkspaceRoot(process.cwd()),
-                ...(Array.isArray(appDir)
-                    ? appDir.map((dir) => searchForWorkspaceRoot(dir.pathname))
-                    : [searchForWorkspaceRoot(appDir.pathname)]),
-                searchForWorkspaceRoot(cliDir.pathname)
-                // appDir.pathname,
+                searchForWorkspaceRoot(appDir.pathname),
+                searchForWorkspaceRoot(cliDir.pathname),
+                appDir.pathname
             ]
         },
         watch: {
@@ -50,42 +57,46 @@ export async function createVitrifyDevServer({ port = 3000, logLevel = 'info', m
     });
     return vitrifyDevServer;
 }
-export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr', framework = 'vue', host, appDir, publicDir }) {
+export async function createServer({ port = 3000, logLevel = 'info', 
+// mode = 'csr',
+ssr, framework = 'vue', host, appDir, publicDir }) {
     const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import('../app-urls.js');
+    appDir = appDir || getAppDir();
     const cliDir = getCliDir();
     const vite = await createVitrifyDevServer({
         port,
         logLevel,
-        mode,
+        ssr,
         framework,
         host,
         appDir,
         publicDir
     });
-    let entryUrl;
     let setup;
     let server;
-    console.log(`Development mode: ${mode}`);
-    if (['ssr', 'fastify'].includes(mode)) {
-        const entryUrl = mode === 'fastify'
+    console.log(`Development mode: ${ssr ? ssr : 'csr'}`);
+    if (ssr) {
+        const entryUrl = ssr === '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
-                : {}
+            logger: true,
+            https: vite.config.server.https
         });
+        if (process.env)
+            process.env.MODE = 'development';
         if (setup) {
             await setup({
                 fastify: app
             });
         }
-        // await app.register(fastifySsrPlugin, {
-        //   appDir,
-        //   vitrifyDir: new URL('../..', import.meta.url),
-        //   mode: 'development'
-        // })
+        if (ssr === 'ssr') {
+            await app.register(fastifySsrPlugin, {
+                appDir,
+                mode: 'development'
+            });
+        }
         await app.listen({
             port: Number(port || 3000),
             host

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

@@ -0,0 +1,38 @@
+import fastifyStatic from '@fastify/static';
+const fastifyCsrPlugin = async (fastify, options, done) => {
+    options.vitrifyDir =
+        options.vitrifyDir || (await import('vitrify')).vitrifyDir;
+    const frameworkDir = new URL('src/vite/vue/', options.vitrifyDir);
+    options.baseUrl = options.baseUrl || '/';
+    options.mode = options.mode || process.env.MODE || import.meta.env.MODE;
+    options.appDir = options.appDir || new URL('../../..', import.meta.url);
+    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') {
+        options.appDir = options.appDir || new URL('../..', import.meta.url);
+        const { createVitrifyDevServer } = await import('vitrify/dev');
+        const vite = await createVitrifyDevServer({
+            appDir: options.appDir,
+            framework: 'vue',
+            base: options.baseUrl
+        });
+        console.log('Dev mode');
+        if (!('use' in fastify)) {
+            const middie = (await import('@fastify/middie')).default;
+            await fastify.register(middie);
+        }
+        fastify.use(vite.middlewares);
+    }
+    else {
+        options.appDir = options.appDir || new URL('../../..', import.meta.url);
+        fastify.register(fastifyStatic, {
+            root: new URL('./dist/csr', options.appDir).pathname,
+            wildcard: false,
+            index: false,
+            prefix: options.baseUrl
+        });
+    }
+    done();
+};
+export { fastifyCsrPlugin };

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

@@ -3,62 +3,74 @@ import { readFileSync } from 'fs';
 import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js';
 const fastifySsrPlugin = async (fastify, options, done) => {
     options.vitrifyDir =
-        options.vitrifyDir || new URL('../../..', import.meta.url);
-    const frameworkDir = new URL('vite/vue/', options.vitrifyDir);
+        options.vitrifyDir || (await import('vitrify')).vitrifyDir;
+    const frameworkDir = new URL('src/vite/vue/', options.vitrifyDir);
     options.baseUrl = options.baseUrl || '/';
+    options.mode = options.mode || process.env.MODE || import.meta.env.MODE;
+    options.appDir = options.appDir || new URL('../../..', import.meta.url);
     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.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',
+        const { createVitrifyDevServer } = await import('vitrify/dev');
+        const vite = await createVitrifyDevServer({
             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
+            ssr: 'ssr',
+            framework: 'vue',
+            base: options.baseUrl
         });
+        // 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);
+        if (!('use' in fastify)) {
+            const middie = (await import('@fastify/middie')).default;
+            await fastify.register(middie);
+        }
         fastify.use(vite.middlewares);
         fastify.get(`${options.baseUrl}*`, async (req, res) => {
             try {
-                const url = req.raw.url;
+                const url = req.raw.url?.replace(options.baseUrl, '/');
                 const ssrContext = {
                     req,
                     res
                 };
-                const template = readFileSync(new URL('index.html', frameworkDir)).toString();
+                let template = readFileSync(new URL('index.html', frameworkDir)).toString();
+                template = await vite.transformIndexHtml(url, template);
                 const entryUrl = new URL('ssr/entry-server.ts', frameworkDir).pathname;
                 const render = (await vite.ssrLoadModule(entryUrl)).render;
                 let manifest;
@@ -74,7 +86,9 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                 // if (options.vite?.config.vitrify!.globalCss)
                 //   cssModules.push(...options.vite?.config.vitrify.globalCss)
                 const matchedModules = componentsModules(cssModules, vite);
-                const css = collectCss(matchedModules);
+                const css = collectCss({
+                    mods: matchedModules
+                });
                 const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
                 const html = template
                     .replace(`<!--preload-links-->`, preloadLinks)

package/dist/frameworks/vue/server.js

@@ -1,9 +1,9 @@
 import fastify from 'fastify';
-export const createApp = ({ onSetup, appDir, baseUrl, onRendered, fastifySsrPlugin, vitrifyDir, mode }) => {
+export const createApp = ({ onSetup, appDir, baseUrl, onRendered, fastifyPlugin, vitrifyDir, mode }) => {
     const app = fastify({
         logger: true
     });
-    app.register(fastifySsrPlugin, {
+    app.register(fastifyPlugin, {
         baseUrl,
         appDir,
         onRendered,

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

@@ -9,7 +9,7 @@ export const componentsModules = (components, vite) => {
     });
     return matchedModules;
 };
-export const collectCss = (mods, styles = new Map(), checkedComponents = new Set()) => {
+export const collectCss = ({ mods, styles = new Map(), checkedComponents = new Set() }) => {
     for (const mod of mods) {
         if ((mod.file?.endsWith('.scss') ||
             mod.file?.endsWith('.css') ||
@@ -19,7 +19,11 @@ export const collectCss = (mods, styles = new Map(), checkedComponents = new Set
         }
         if (mod.importedModules.size > 0 && !checkedComponents.has(mod.id)) {
             checkedComponents.add(mod.id);
-            collectCss(mod.importedModules, styles, checkedComponents);
+            collectCss({
+                mods: mod.importedModules,
+                styles,
+                checkedComponents
+            });
         }
     }
     let result = '';

package/dist/index.js

@@ -8,7 +8,7 @@ import { readFileSync } from 'fs';
 import builtinModules from 'builtin-modules';
 import { resolve } from 'import-meta-resolve';
 import { getPkgJsonDir } from './app-urls.js';
-const serverModules = [
+const internalServerModules = [
     // 'fs',
     // 'path',
     // 'url',
@@ -19,25 +19,46 @@ const serverModules = [
     'node:url',
     'node:util',
     'node:fs',
+    'node:process',
     'vitrify',
+    'vitrify/dev',
+    // 'import-meta-resolve',
     'vite',
     'fastify',
-    'middie',
-    'knex',
-    'bcrypt',
-    'objection',
-    '@fastify/formbody',
-    '@fastify/static',
-    '@fastify/cors',
-    '@fastify/cookie',
-    'mercurius',
-    'jose',
-    'oidc-provider'
+    '@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:vitrify-hooks',
     'virtual:global-css',
@@ -91,7 +112,7 @@ async function bundleConfigFile(fileName, isESM = false) {
         dependencies: result.metafile ? Object.keys(result.metafile.inputs) : []
     };
 }
-export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mode = 'production', framework = 'vue', pwa = false }) => {
+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();
@@ -114,7 +135,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
             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')
+            fs.unlinkSync(configPath + '.js');
         }
         else {
             vitrifyConfig = (await import(new URL('vitrify.config.js', appDir).pathname)).default;
@@ -173,6 +194,12 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
     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'),
@@ -345,13 +372,17 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         // { 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: new URL(await resolve('vitest', cliDir.href)).pathname
         });
-    let rollupOptions;
-    let noExternal = [];
+    let rollupOptions = {};
+    let noExternal = [
+        new RegExp(`^(?!(${[...builtinModules, ...serverModules].join('|')}))`)
+    ];
     const external = [...builtinModules, ...serverModules];
     if (ssr === 'server') {
         rollupOptions = {
@@ -365,17 +396,16 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 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';
-                    }
-                }
+                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
@@ -392,17 +422,16 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 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';
-                    }
-                }
+                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
@@ -412,15 +441,24 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
     }
     else {
         rollupOptions = {
-        // input: [new URL('index.html', frameworkDir).pathname],
-        // output: {
-        //   format: 'es'
-        // }
+            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: ssr === 'fastify' ? appDir.pathname : frameworkDir.pathname,
         publicDir: publicDir.pathname,
+        base,
         envDir: appDir.pathname,
         vitrify: {
             productName,
@@ -437,11 +475,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
             exclude: ['vue', ...serverModules, ...builtinModules]
         },
         resolve: {
-            // Dedupe uses require which breaks ESM SSR builds
-            // dedupe: [
-            //   'vue',
-            //   'vue-router'
-            // ],
+            dedupe: ['vue', 'vue-router'],
             alias
         },
         build: {
@@ -483,8 +517,9 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
             noExternal
         },
         define: {
-            __BASE_URL__: `'/'`
+            __BASE_URL__: `'${base}'`
         }
     };
     return mergeConfig(config, vitrifyConfig);
 };
+export const vitrifyDir = new URL('..', import.meta.url);

package/dist/plugins/quasar.js

@@ -37,6 +37,19 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
         Components({
             resolvers: [QuasarResolver()]
         }),
+        {
+            name: 'vite-plugin-quasar-transform',
+            enforce: 'pre',
+            transform: (code, id, options) => {
+                const { ssr } = options || {};
+                code = code
+                    .replaceAll('__QUASAR_SSR__', ssr ? ssr.toString() : 'false')
+                    .replaceAll('__QUASAR_SSR_SERVER__', 'import.meta.env.SSR')
+                    .replaceAll('__QUASAR_SSR_CLIENT__', '!import.meta.env.SSR')
+                    .replaceAll('__QUASAR_SSR_PWA__', pwa ? '!import.meta.env.SSR' : 'false');
+                return code;
+            }
+        },
         {
             name: 'vite-plugin-quasar-setup',
             enforce: 'pre',
@@ -154,11 +167,14 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                     },
                     define: {
                         __DEV__: process.env.NODE_ENV !== 'production' || true,
-                        __QUASAR_VERSION__: `'${version}'`,
-                        __QUASAR_SSR__: !!ssr,
-                        __QUASAR_SSR_SERVER__: ssr === 'server',
-                        __QUASAR_SSR_CLIENT__: ssr === 'client',
-                        __QUASAR_SSR_PWA__: ssr === 'client' && pwa
+                        __QUASAR_VERSION__: `'${version}'`
+                        // __QUASAR_SSR__: !!ssr,
+                        // // __QUASAR_SSR_SERVER__: ssr === 'server',
+                        // __QUASAR_SSR_SERVER__: `import.meta.env.SSR`,
+                        // // __QUASAR_SSR_CLIENT__: ssr === 'client',
+                        // __QUASAR_SSR_CLIENT__: `!import.meta.env.SSR`,
+                        // // __QUASAR_SSR_PWA__: ssr === 'client' && pwa
+                        // __QUASAR_SSR_PWA__: pwa ? `!import.meta.env.SSR` : false
                     },
                     ssr: {
                         noExternal: ['quasar']