vitrify 0.21.0 → 0.22.0

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.21.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,6 +49,7 @@
   "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",

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'

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -79,7 +79,10 @@ const fastifySsrPlugin: FastifyPluginAsync<FastifySsrOptions> = async (
         const entryUrl = fileURLToPath(
           new URL('ssr/entry-server.ts', frameworkDir)
         )
-        const render = (await vite!.ssrLoadModule(entryUrl)).render
+        const environment = vite.environments.ssr
+        // @ts-expect-error missing type
+        const { render } = await environment.runner.import(entryUrl)
+        // const render = (await vite!.ssrLoadModule(entryUrl)).render
         let manifest
         // TODO: https://github.com/vitejs/vite/issues/2282
         try {

package/src/node/frameworks/vue/server.ts

@@ -23,6 +23,9 @@ export const createApp = ({
 }) => {
   const app = fastify({
     logger: {
+      transport: {
+        target: '@fastify/one-line-logger'
+      },
       level: process.env.DEBUG ? 'debug' : process.env.PINO_LOG_LEVEL || 'info'
     }
   })

package/src/node/index.ts

@@ -1,5 +1,10 @@
 import vuePlugin from '@vitejs/plugin-vue'
-import type { Alias, InlineConfig, UserConfig as ViteUserConfig } from 'vite'
+import type {
+  Alias,
+  InlineConfig,
+  Plugin,
+  UserConfig as ViteUserConfig
+} from 'vite'
 import { findDepPkgJsonPath } from 'vitefu'
 import { mergeConfig } from 'vite'
 import { build } from 'esbuild'
@@ -29,10 +34,10 @@ import type { VitrifyPlugin } from './plugins/index.js'
 import { resolve } from './app-urls.js'
 import type { ManualChunksOption, RollupOptions } from 'rollup'
 import { addOrReplaceTitle, appendToBody } from './helpers/utils.js'
-import type { ComponentResolver } from 'unplugin-vue-components'
 import Components from 'unplugin-vue-components/vite'
 import { VitePWA } from 'vite-plugin-pwa'
 import UnoCSS from 'unocss/vite'
+import { searchForWorkspaceRoot } from 'vite'
 
 const internalServerModules = [
   'util',
@@ -50,21 +55,6 @@ const internalServerModules = [
   'abort-controller'
 ]
 
-const configPluginMap: Record<string, () => Promise<VitrifyPlugin>> = {
-  quasar: () =>
-    import('./plugins/quasar.js').then((module) => module.QuasarPlugin)
-}
-
-const configResolverMap: Record<
-  string,
-  () => Promise<ComponentResolver | ComponentResolver[]>
-> = {
-  quasar: () =>
-    import('unplugin-vue-components/resolvers').then((module) =>
-      module.QuasarResolver()
-    )
-}
-
 const manualChunkNames = [
   'prerender',
   'fastify-ssr-plugin',
@@ -103,31 +93,6 @@ const manualChunksFn = (manualChunkList?: string[]): ManualChunksOption => {
   }
 }
 
-// const manualChunks: ManualChunksOption = (
-//   id: string,
-//   manualChunkList?: string[]
-// ) => {
-//   const matchedModule = Object.entries(moduleChunks).find(
-//     ([chunkName, moduleNames]) =>
-//       moduleNames.some((moduleName) => id.includes(moduleName + '/'))
-//   )
-//   if (id.includes('vitrify/src/')) {
-//     const name = id.split('/').at(-1)?.split('.').at(0)
-//     if (name && manualChunkNames.includes(name)) return name
-//   } else if (
-//     VIRTUAL_MODULES.some((virtualModule) => id.includes(virtualModule))
-//   ) {
-//     return VIRTUAL_MODULES.find((name) => id.includes(name))
-//   } else if (manualChunkList?.some((file) => id.includes(file))) {
-//     return manualChunkList.find((file) => id.includes(file))
-//   } else if (id.includes('node_modules')) {
-//     if (matchedModule) {
-//       return matchedModule[0]
-//     }
-//     return 'vendor'
-//   }
-// }
-
 export const VIRTUAL_MODULES = [
   'virtual:vitrify-hooks',
   'virtual:static-imports',
@@ -241,7 +206,6 @@ export const baseConfig = async ({
       fs.writeFileSync(configPath + '.js', bundledConfig.code)
 
       rawVitrifyConfig = (await import('file://' + configPath + '.js')).default
-      // vitrifyConfig = (await import(configPath + '.js')).default
       fs.unlinkSync(configPath + '.js')
     } else {
       rawVitrifyConfig = (
@@ -258,9 +222,11 @@ export const baseConfig = async ({
     throw e
   }
 
-  const localPackages = ['vue', 'vue-router', '@vue/server-renderer']
-  // const localPackages: string[] = []
-  const cliPackages = []
+  const localPackages = []
+  if (framework === 'vue')
+    localPackages.push('vue', 'vue-router', '@vue/server-renderer')
+
+  const cliPackages: string[] = []
   const packageUrls: Record<string, URL> =
     vitrifyConfig.vitrify?.urls?.packages || {}
   await (async () => {
@@ -269,14 +235,6 @@ export const baseConfig = async ({
       if (pkgDir) packageUrls![val] = new URL(`file://${pkgDir}`)
     }
   })()
-
-  // await (async () => {
-  //   for (const val of cliPackages)
-  //     packageUrls[val] = getPkgJsonDir(
-  //       new URL(await resolve(val, cliDir!.href))
-  //     )
-  // })()
-
   if (!productName) {
     try {
       ;({ productName } = JSON.parse(
@@ -294,20 +252,28 @@ export const baseConfig = async ({
 
   const isPwa = !!vitrifyConfig.vitrify?.pwa || false
 
-  const frameworkPlugins = []
-  const resolvers = []
-  for (const framework of Object.keys(configPluginMap)) {
-    if (Object.keys(vitrifyConfig).includes(framework)) {
-      const plugin = await configPluginMap[framework]()
-      const resolver = await configResolverMap[framework]()
-
-      frameworkPlugins.push(
-        await plugin({
-          ssr,
-          pwa: isPwa
-        })
-      )
-      resolvers.push(resolver)
+  const frameworkPlugins: Plugin[] = []
+  if (framework === 'vue') {
+    frameworkPlugins.push(vuePlugin())
+  }
+
+  const vitrifyPlugins: Plugin[] = []
+  if (vitrifyConfig.vitrify?.plugins) {
+    for (const vitrifyPluginConfig of vitrifyConfig.vitrify.plugins) {
+      const vitrifyPlugin = await vitrifyPluginConfig.plugin({
+        ssr,
+        pwa: isPwa,
+        options: vitrifyPluginConfig.options
+      })
+      if ('plugin' in vitrifyPlugin) {
+        vitrifyPlugins.push(vitrifyPlugin.plugin)
+      } else if ('plugins' in vitrifyPlugin) {
+        vitrifyPlugins.push(...vitrifyPlugin.plugins)
+      }
+
+      if (vitrifyPlugin.config) {
+        vitrifyConfig = mergeConfig(vitrifyConfig, vitrifyPlugin.config)
+      }
     }
   }
 
@@ -378,14 +344,13 @@ export const baseConfig = async ({
               /<style lang="sass">(.*?)<\/style>/,
               '<style lang="sass">' + sass + '</style>'
             )
-          // code = code.replace(/<\/style>/, sass + '</style>')
         }
 
         return code
       }
     },
-    vuePlugin(),
     ...frameworkPlugins,
+    ...vitrifyPlugins,
     {
       name: 'vitrify-setup',
       enforce: 'post',
@@ -445,10 +410,6 @@ export const baseConfig = async ({
                 return `import ${varName} from '${
                   new URL(url, appDir).pathname
                 }'; onSetup.push(${varName})`
-
-                // return `import ${varName} from '${fileURLToPath(
-                //   url
-                // )}'; onSetup.push(${varName})`
               })
               .join('\n')}`
         } else if (id === 'virtual:static-imports') {
@@ -465,11 +426,7 @@ export const baseConfig = async ({
             ),
             ...globalSass.map((sass) => `@import '${sass}'`)
           ].join('\n')
-        }
-        // else if (id === 'vitrify.css') {
-        //   return `${globalCss.map((css) => `@import '${css}'`).join('\n')}`
-        // }
-        else if (id === 'virtual:vitrify-config') {
+        } else if (id === 'virtual:vitrify-config') {
           return `export default ${JSON.stringify(vitrifyConfig)}`
         }
         return null
@@ -499,14 +456,14 @@ export const baseConfig = async ({
       }
     },
     Components({
+      ...vitrifyConfig.vitrify?.unpluginVueComponents,
       exclude: [
         new RegExp(
           `[\\/]node_modules[\\/].*[\\/]!(${serverModules.join('|')})`
         ),
         /[\\/]\.git[\\/]/,
         /[\\/]\.nuxt[\\/]/
-      ],
-      resolvers
+      ]
     }),
     UnoCSS({
       ...vitrifyConfig.vitrify?.unocss,
@@ -559,32 +516,13 @@ export const baseConfig = async ({
           } else {
             entryScript = `<script type="module" src="${entry}"></script>`
           }
-          // html = html.replace('<!--entry-script-->', entryScript)
           html = appendToBody(entryScript, html)
           if (productName) html = addOrReplaceTitle(productName, html)
-          // html = html.replace('<!--product-name-->', productName)
           return html
         }
       }
     })
 
-    // plugins.unshift({
-    //   name: 'product-name',
-    //   enforce: 'post',
-    //   config: (config: VitrifyConfig, env) => {
-    //     if (config.vitrify?.productName)
-    //       productName = config.vitrify?.productName
-    //     return
-    //   },
-    //   transformIndexHtml: {
-    //     enforce: 'post',
-    //     transform: (html) => {
-    //       html = html.replace('<!--product-name-->', productName)
-    //       return html
-    //     }
-    //   }
-    // })
-
     if (debug) plugins.push(visualizer())
   }
 
@@ -599,19 +537,40 @@ export const baseConfig = async ({
   ]
 
   const vuePkgAliases: Alias[] = []
-  for (const pkg of vueInternalPkgs) {
-    const specifier = pkg.split('/').at(-1)
-    const pkgJsonPath = await findDepPkgJsonPath(pkg, fileURLToPath(appDir!))
-    if (pkgJsonPath)
-      vuePkgAliases.push({
-        find: pkg,
-        replacement: fileURLToPath(
-          new URL(
-            `./dist/${specifier}.esm-bundler.js`,
-            `file://${pkgJsonPath}` || ''
+  if (packageUrls['vue']) {
+    for (const pkg of vueInternalPkgs) {
+      const specifier = pkg.split('/').at(-1)
+      const pkgJsonPath = await findDepPkgJsonPath(pkg, fileURLToPath(appDir!))
+      if (pkgJsonPath)
+        vuePkgAliases.push({
+          find: pkg,
+          replacement: fileURLToPath(
+            new URL(
+              `./dist/${specifier}.esm-bundler.js`,
+              `file://${pkgJsonPath}` || ''
+            )
           )
-        )
-      })
+        })
+
+      vuePkgAliases.push(
+        {
+          find: new RegExp('^vue$'),
+          replacement: fileURLToPath(
+            new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue'])
+          )
+        },
+        {
+          find: new RegExp('^vue-router$'),
+          replacement: fileURLToPath(
+            new URL(
+              './dist/vue-router.esm-bundler.js',
+              packageUrls['vue-router']
+            )
+          )
+        },
+        ...vuePkgAliases
+      )
+    }
   }
 
   const alias: Alias[] = [
@@ -619,21 +578,11 @@ export const baseConfig = async ({
     { find: 'app', replacement: fileURLToPath(appDir) },
     { find: 'cwd', replacement: fileURLToPath(cwd) },
     { find: 'boot', replacement: fileURLToPath(new URL('boot/', srcDir)) },
-    { find: 'assets', replacement: fileURLToPath(new URL('assets/', srcDir)) },
-    {
-      find: new RegExp('^vue$'),
-      replacement: fileURLToPath(
-        new URL('./dist/vue.runtime.esm-bundler.js', packageUrls['vue'])
-      )
-    },
-    {
-      find: new RegExp('^vue-router$'),
-      replacement: fileURLToPath(
-        new URL('./dist/vue-router.esm-bundler.js', packageUrls['vue-router'])
-      )
-    },
-    ...vuePkgAliases
+    { find: 'assets', replacement: fileURLToPath(new URL('assets/', srcDir)) }
   ]
+
+  if (framework === 'vue') alias.push(...vuePkgAliases)
+
   if (mode === 'development' && vitrifyConfig.vitrify?.dev?.alias)
     alias.push(...vitrifyConfig.vitrify.dev.alias)
 
@@ -704,6 +653,7 @@ export const baseConfig = async ({
 
   const config = {
     root: fileURLToPath(appDir),
+    appType: ssr ? 'custom' : 'spa',
     publicDir: fileURLToPath(publicDir),
     base,
     envDir: fileURLToPath(appDir),
@@ -740,6 +690,28 @@ export const baseConfig = async ({
       __HOST__: `'localhost'`,
       __BASE_URL__: `'${base}'`,
       __IS_PWA__: `${isPwa}`
+    },
+    // environments: {
+    // },
+    server: {
+      https: vitrifyConfig.server?.https,
+      // 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
+      }
     }
   } as VitrifyConfig
 

package/src/node/plugins/index.ts

@@ -1,12 +1,28 @@
 import type { Plugin } from 'vite'
+import { VitrifyConfig } from '../vitrify-config.js'
 
-export type VitrifyPlugin = ({
+type VitrifyPluginReturnType =
+  | {
+      plugin: Plugin
+      config?: Partial<VitrifyConfig>
+    }
+  | {
+      plugins: Plugin[]
+      config?: Partial<VitrifyConfig>
+    }
+
+export type VitrifyPlugin<Options> = ({
   ssr,
+  pwa,
   mode,
-  command
+  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'