vitrify 0.4.0 → 0.5.2

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__', ssr ? 'import.meta.env.SSR' : 'false')
+                    .replaceAll('__QUASAR_SSR_CLIENT__', ssr ? '!import.meta.env.SSR' : 'false')
+                    .replaceAll('__QUASAR_SSR_PWA__', ssr && pwa ? '!import.meta.env.SSR' : 'false');
+                return code;
+            }
+        },
         {
             name: 'vite-plugin-quasar-setup',
             enforce: 'pre',
@@ -141,10 +154,6 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                                 replacement: new URL('src/index.all.js', urls?.packages?.quasar)
                                     .pathname
                             },
-                            // {
-                            //   find: 'quasar',
-                            //   replacement: new URL('src/index.all.js', urls?.packages?.quasar).pathname
-                            // },
                             {
                                 find: `@quasar/extras`,
                                 replacement: new URL('.', urls?.packages?.['@quasar/extras'])
@@ -154,11 +163,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']
@@ -172,7 +184,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
             config: async (config, env) => ({
                 resolve: {
                     alias: [
-                    // { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
+                        { find: new RegExp('^quasar$'), replacement: 'virtual:quasar' }
                     ]
                 }
             }),

package/dist/types/bin/build.d.ts

@@ -5,4 +5,5 @@ export declare function build(opts: {
     outDir: string;
     appDir?: URL;
     publicDir?: URL;
+    debug?: boolean;
 }): Promise<import("rollup").RollupOutput | import("rollup").RollupOutput[] | import("rollup").RollupWatcher>;

package/dist/types/bin/dev.d.ts

@@ -2,19 +2,20 @@
 import type { LogLevel, InlineConfig } from 'vite';
 import { ViteDevServer } from 'vite';
 import type { Server } from 'net';
-export declare function createVitrifyDevServer({ port, logLevel, mode, framework, host, appDir, publicDir }: {
+export declare function createVitrifyDevServer({ port, logLevel, ssr, framework, host, appDir, publicDir, base }: {
     port?: number;
     logLevel?: LogLevel;
-    mode?: 'csr' | 'ssr' | 'fastify';
+    ssr?: 'ssr' | 'fastify';
     framework?: 'vue';
     host?: string;
     appDir?: URL;
     publicDir?: URL;
+    base?: string;
 }): Promise<ViteDevServer>;
-export declare function createServer({ port, logLevel, mode, framework, host, appDir, publicDir }: {
+export declare function createServer({ port, logLevel, ssr, framework, host, appDir, publicDir }: {
     port?: number;
     logLevel?: LogLevel;
-    mode?: 'csr' | 'ssr' | 'fastify';
+    ssr?: 'ssr' | 'fastify';
     framework?: 'vue';
     host?: string;
     appDir?: URL;
@@ -41,11 +42,13 @@ export declare function createServer({ port, logLevel, mode, framework, host, ap
         server: import("vite").ResolvedServerOptions;
         build: Required<import("vite").BuildOptions>;
         preview: import("vite").ResolvedPreviewOptions;
+        ssr: import("vite").ResolvedSSROptions | undefined;
         assetsInclude: (file: string) => boolean;
         logger: import("vite").Logger;
         createResolver: (options?: Partial<import("vite").InternalResolveOptions> | undefined) => import("vite").ResolveFn;
         optimizeDeps: import("vite").DepOptimizationOptions;
         worker: import("vite").ResolveWorkerOptions;
-        spa: boolean;
+        appType: import("vite").AppType;
+        experimental: import("vite").ResolvedExperimentalOptions;
     }>;
 }>;

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

@@ -0,0 +1,17 @@
+import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
+import type { OnRenderedHook } from '../../vitrify-config.js';
+import type { ViteDevServer } from 'vite';
+export interface FastifySsrOptions {
+    baseUrl?: string;
+    provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown>>;
+    vitrifyDir?: URL;
+    vite?: ViteDevServer;
+    appDir?: URL;
+    publicDir?: URL;
+    productName?: string;
+    onRendered?: OnRenderedHook[];
+    mode?: string;
+}
+declare const fastifyCsrPlugin: FastifyPluginCallback<FastifySsrOptions>;
+export { fastifyCsrPlugin };
+export declare type FastifyCsrPlugin = typeof fastifyCsrPlugin;

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

@@ -1,13 +1,14 @@
 /// <reference types="node" />
 import type { FastifyInstance } from 'fastify';
 import type { OnRenderedHook, OnSetupFile } from '../../vitrify-config.js';
+import type { FastifyCsrPlugin } from './fastify-csr-plugin.js';
 import type { FastifySsrPlugin } from './fastify-ssr-plugin.js';
-export declare const createApp: ({ onSetup, appDir, baseUrl, onRendered, fastifySsrPlugin, vitrifyDir, mode }: {
+export declare const createApp: ({ onSetup, appDir, baseUrl, onRendered, fastifyPlugin, vitrifyDir, mode }: {
     onSetup: OnSetupFile[];
     appDir: URL;
     baseUrl?: string | undefined;
     onRendered?: OnRenderedHook[] | undefined;
-    fastifySsrPlugin: FastifySsrPlugin;
+    fastifyPlugin: FastifySsrPlugin | FastifyCsrPlugin;
     vitrifyDir?: URL | undefined;
     mode: string;
 }) => FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, pino.Logger, import("fastify").FastifyTypeProviderDefault> & PromiseLike<FastifyInstance<import("http").Server, import("http").IncomingMessage, import("http").ServerResponse, pino.Logger, import("fastify").FastifyTypeProviderDefault>>;

package/dist/types/helpers/collect-css-ssr.d.ts

@@ -3,7 +3,11 @@ import type { ViteDevServer, ModuleNode } from 'vite';
  * Collect SSR CSS for Vite
  */
 export declare const componentsModules: (components: string[], vite: ViteDevServer) => Set<ModuleNode>;
-export declare const collectCss: (mods: Set<ModuleNode>, styles?: Map<string, string>, checkedComponents?: Set<unknown>) => string;
+export declare const collectCss: ({ mods, styles, checkedComponents }: {
+    mods: Set<ModuleNode>;
+    styles?: Map<string, string> | undefined;
+    checkedComponents?: Set<unknown> | undefined;
+}) => string;
 /**
  * Client listener to detect updated modules through HMR, and remove the initial styled attached to the head
  */

package/dist/types/index.d.ts

@@ -3,13 +3,16 @@ import type { BootFunction, VitrifyConfig } from './vitrify-config.js';
 import type { VitrifyContext } from './bin/run.js';
 import type { VitrifyPlugin } from './plugins/index.js';
 export declare const VIRTUAL_MODULES: string[];
-export declare const baseConfig: ({ ssr, appDir, publicDir, command, mode, framework, pwa }: {
+export declare const baseConfig: ({ ssr, appDir, publicDir, base, command, mode, framework, pwa, debug }: {
     ssr?: "server" | "client" | "ssg" | "fastify" | undefined;
     appDir?: URL | undefined;
     publicDir?: URL | undefined;
+    base?: string | undefined;
     command?: "build" | "dev" | "test" | undefined;
     mode?: "production" | "development" | undefined;
     framework?: "vue" | undefined;
     pwa?: boolean | undefined;
+    debug?: boolean | undefined;
 }) => Promise<InlineConfig>;
+export declare const vitrifyDir: URL;
 export type { VitrifyConfig, VitrifyPlugin, VitrifyContext, BootFunction };

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

@@ -1,4 +1,4 @@
-import type { UserConfig } from 'vite';
+import type { Alias, UserConfig } from 'vite';
 import type { QuasarConf } from './plugins/quasar.js';
 import type { ComponentInternalInstance } from '@vue/runtime-core';
 export declare type BootFunction = ({ app, ssrContext, staticImports }: {
@@ -65,6 +65,18 @@ export interface VitrifyConfig extends UserConfig {
             cwd?: URL;
             packages?: Record<string, URL>;
         };
+        /**
+         * SSR specific configuration
+         */
+        ssr?: {
+            serverModules?: string[];
+        };
+        /**
+         * Development only configuration
+         */
+        dev?: {
+            alias?: Alias[];
+        };
     };
     quasar?: QuasarConf;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -68,10 +68,11 @@
     "magic-string": "^0.26.2",
     "merge-deep": "^3.0.3",
     "readline": "^1.3.0",
+    "rollup-plugin-visualizer": "^5.6.0",
     "sass": "1.52.3",
     "ts-node": "^10.8.1",
     "unplugin-vue-components": "^0.19.6",
-    "vite": "^3.0.0-alpha.9",
+    "vite": "^3.0.0-beta.0",
     "vitest": "^0.14.1"
   },
   "devDependencies": {
@@ -81,11 +82,11 @@
     "@types/node": "^17.0.41",
     "@types/ws": "^8.5.3",
     "@vue/runtime-core": "^3.2.37",
-    "import-meta-resolve": "^2.0.2",
+    "import-meta-resolve": "^2.0.3",
     "quasar": "^2.7.1",
     "rollup": "^2.75.6",
     "typescript": "^4.7.3",
-    "vite": "^3.0.0-alpha.9",
+    "vite": "^3.0.0-alpha.11",
     "vue": "^3.2.37",
     "vue-router": "^4.0.15"
   },
@@ -93,6 +94,7 @@
     "@fastify/static": "^6.4.0",
     "fastify": "^4.0.0",
     "fastify-plugin": "^3.0.1",
+    "import-meta-resolve": "^2.0.3",
     "quasar": "^2.7.1",
     "vue": "^3.2.37",
     "vue-router": "^4.0.15"

package/src/node/bin/build.ts

@@ -8,13 +8,16 @@ export async function build(opts: {
   outDir: string
   appDir?: URL
   publicDir?: URL
+  debug?: boolean
 }) {
   const config = await baseConfig({
     command: 'build',
     mode: 'production',
     ssr: opts?.ssr,
     appDir: opts.appDir,
-    publicDir: opts.publicDir
+    publicDir: opts.publicDir,
+    base: opts.base,
+    debug: opts.debug
   })
 
   config.build = {
@@ -24,16 +27,16 @@ export async function build(opts: {
     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/src/node/bin/cli.ts

@@ -20,6 +20,7 @@ cli
   .option('--appDir [appDir]', 'App directory')
   .option('--publicDir [publicDir]', 'Public directory')
   .option('--productName [productName]', 'Product name')
+  .option('--debug', 'Debug build')
   .action(async (options) => {
     const { build } = await import('./build.js')
     let appDir: URL
@@ -38,17 +39,19 @@ cli
       base: string
       appDir?: URL
       publicDir?: URL
+      debug?: boolean
     } = {
       base: options.base,
       appDir,
-      publicDir: parsePath(options.publicDir, appDir)
+      publicDir: parsePath(options.publicDir, appDir),
+      debug: options.debug
     }
 
     switch (options.mode) {
       case 'csr':
         await build({
           ...args,
-          outDir: new URL('spa/', baseOutDir).pathname
+          outDir: new URL('csr/', baseOutDir).pathname
         })
         break
       case 'fastify':
@@ -128,7 +131,7 @@ cli
     switch (options.mode) {
       case 'ssr':
         ;({ server, config } = await createServer({
-          mode: 'ssr',
+          ssr: 'ssr',
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)
@@ -136,7 +139,7 @@ cli
         break
       case 'fastify':
         ;({ server, config } = await createServer({
-          mode: 'fastify',
+          ssr: 'fastify',
           host: options.host,
           appDir: parsePath(options.appDir, cwd),
           publicDir: parsePath(options.publicDir, cwd)

package/src/node/bin/dev.ts

@@ -6,23 +6,28 @@ import type { Server } from 'net'
 import type { FastifyInstance } from 'fastify/types/instance'
 import fastify from 'fastify'
 import { fastifySsrPlugin } from '../frameworks/vue/fastify-ssr-plugin.js'
+import type { ServerOptions } from 'https'
 
 export async function createVitrifyDevServer({
   port = 3000,
   logLevel = 'info',
-  mode = 'csr',
+  // mode = 'csr',
+  ssr,
   framework = 'vue',
   host,
   appDir,
-  publicDir
+  publicDir,
+  base
 }: {
   port?: number
   logLevel?: LogLevel
-  mode?: 'csr' | 'ssr' | 'fastify'
+  // mode?: 'csr' | 'ssr' | 'fastify'
+  ssr?: 'ssr' | 'fastify'
   framework?: 'vue'
   host?: string
   appDir?: URL
   publicDir?: URL
+  base?: string
 }) {
   const { getAppDir, getCliDir, getCliViteDir, getCwd } = await import(
     '../app-urls.js'
@@ -33,31 +38,37 @@ export async function createVitrifyDevServer({
   if (!appDir) appDir = getAppDir()
   let config: InlineConfig = {}
   let ssrMode: 'server' | 'fastify' | undefined
-  if (mode === 'ssr') ssrMode = 'server'
-  if (mode === 'fastify') ssrMode = 'fastify'
+  if (ssr === 'ssr') ssrMode = 'server'
+  if (ssr === 'fastify') ssrMode = 'fastify'
   config = await baseConfig({
     framework,
     ssr: ssrMode,
     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: 24678
+    },
     port,
     // middlewareMode: mode === 'ssr' ? 'ssr' : undefined,
-    middlewareMode: mode !== 'csr' ? 'ssr' : false,
+    middlewareMode: ssr ? 'ssr' : false,
     fs: {
+      strict: false, // https://github.com/vitejs/vite/issues/8175
       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: {
@@ -81,7 +92,8 @@ export async function createVitrifyDevServer({
 export async function createServer({
   port = 3000,
   logLevel = 'info',
-  mode = 'csr',
+  // mode = 'csr',
+  ssr,
   framework = 'vue',
   host,
   appDir,
@@ -89,7 +101,8 @@ export async function createServer({
 }: {
   port?: number
   logLevel?: LogLevel
-  mode?: 'csr' | 'ssr' | 'fastify'
+  // mode?: 'csr' | 'ssr' | 'fastify'
+  ssr?: 'ssr' | 'fastify'
   framework?: 'vue'
   host?: string
   appDir?: URL
@@ -99,47 +112,47 @@ export async function createServer({
     '../app-urls.js'
   )
 
+  appDir = appDir || getAppDir()
   const cliDir = getCliDir()
 
   const vite = await createVitrifyDevServer({
     port,
     logLevel,
-    mode,
+    ssr,
     framework,
     host,
     appDir,
     publicDir
   })
-  let entryUrl: string
 
   let setup
   let server: Server
 
-  console.log(`Development mode: ${mode}`)
-  if (['ssr', 'fastify'].includes(mode)) {
+  console.log(`Development mode: ${ssr ? ssr : 'csr'}`)
+  if (ssr) {
     const entryUrl =
-      mode === 'fastify'
+      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 as ServerOptions
     })
+    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/src/node/frameworks/vue/fastify-csr-plugin.ts

@@ -0,0 +1,72 @@
+import type {
+  FastifyPluginCallback,
+  FastifyRequest,
+  FastifyReply
+} from 'fastify'
+import { fastifyStatic } from '@fastify/static'
+import type { OnRenderedHook } from '../../vitrify-config.js'
+import type { ViteDevServer } from 'vite'
+
+export interface FastifySsrOptions {
+  baseUrl?: string
+  provide?: (
+    req: FastifyRequest,
+    res: FastifyReply
+  ) => Promise<Record<string, unknown>>
+  vitrifyDir?: URL
+  vite?: ViteDevServer
+  // frameworkDir?: URL
+  appDir?: URL
+  publicDir?: URL
+  productName?: string
+  onRendered?: OnRenderedHook[]
+  mode?: string
+}
+
+const fastifyCsrPlugin: FastifyPluginCallback<FastifySsrOptions> = 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 }
+export type FastifyCsrPlugin = typeof fastifyCsrPlugin