vitrify 0.21.0 → 0.23.0

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'
@@ -12,7 +17,6 @@ import { visualizer } from 'rollup-plugin-visualizer'
 import { fileURLToPath } from 'url'
 import type {
   StaticImports,
-  BootFunction,
   OnMountedHook,
   VitrifyConfig,
   VitrifyConfigAsync,
@@ -22,17 +26,19 @@ import type {
   VitrifySSRModes,
   OnRenderedHook,
   OnBootHook,
-  OnSetupFile
+  OnSetupFile,
+  onAppCreatedHook,
+  OnTemplateRenderedHook
 } from './vitrify-config.js'
 import type { VitrifyContext } from './bin/run.js'
 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 +56,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',
@@ -73,7 +64,7 @@ const manualChunkNames = [
 ]
 
 const moduleChunks = {
-  vue: ['vue', '@vue', 'vue-router'],
+  vue: ['vue', '@vue', 'vue-router', 'pinia', '@pinia/colada', '@vue/devtools'],
   quasar: ['quasar'],
   atQuasar: ['@quasar']
 }
@@ -103,31 +94,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 +207,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 +223,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 +236,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,26 +253,36 @@ 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)
+      }
     }
   }
 
   let onBootHooks: OnBootHook[]
   let onRenderedHooks: OnRenderedHook[]
+  let onTemplateRenderedHooks: OnTemplateRenderedHook[]
   let onMountedHooks: OnMountedHook[]
+  let onAppCreatedHooks: onAppCreatedHook[]
   let onSetupFiles: OnSetupFile[]
   let globalCss: string[] = []
   let staticImports: StaticImports
@@ -378,21 +347,23 @@ 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',
       config: (config: VitrifyConfig, env) => {
         onBootHooks = config.vitrify?.hooks?.onBoot || []
         onRenderedHooks = config.vitrify?.hooks?.onRendered || []
+        onTemplateRenderedHooks =
+          config.vitrify?.hooks?.onTemplateRendered || []
         onMountedHooks = config.vitrify?.hooks?.onMounted || []
+        onAppCreatedHooks = config.vitrify?.hooks?.onAppCreated || []
         onSetupFiles = config?.vitrify?.hooks?.onSetup || []
         globalCss = config.vitrify?.globalCss || []
         staticImports = config.vitrify?.staticImports || {}
@@ -430,6 +401,12 @@ export const baseConfig = async ({
             export const onRendered = [${onRenderedHooks
               .map((fn) => `${String(fn)}`)
               .join(', ')}]
+            export const onTemplateRendered = [${onTemplateRenderedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
+            export const onAppCreated = [${onAppCreatedHooks
+              .map((fn) => `${String(fn)}`)
+              .join(', ')}]
             export const onSetup = []
             ${onSetupFiles
               .map((url, index) => {
@@ -445,10 +422,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 +438,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 +468,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 +528,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 +549,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 +590,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 +665,7 @@ export const baseConfig = async ({
 
   const config = {
     root: fileURLToPath(appDir),
+    appType: ssr ? 'custom' : 'spa',
     publicDir: fileURLToPath(publicDir),
     base,
     envDir: fileURLToPath(appDir),
@@ -740,6 +702,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
 
@@ -754,5 +738,5 @@ export type {
   VitrifyConfigAsync,
   VitrifyPlugin,
   VitrifyContext,
-  BootFunction
+  OnBootHook
 }

package/src/node/plugins/index.ts

@@ -1,12 +1,29 @@
 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'
+export * from './pinia/index.js'

package/src/node/plugins/pinia/index.ts

@@ -0,0 +1,96 @@
+import type { onAppCreatedHook, OnRenderedHook } from '../../vitrify-config.js'
+import type { VitrifyPlugin } from '../index.js'
+
+export type PiniaPluginOptions = {
+  // Initialize Pinia Colada
+  colada?: boolean
+}
+
+const piniaonAppCreated: onAppCreatedHook = async ({
+  app,
+  ctx,
+  initialState,
+  ssrContext
+}) => {
+  const { createPinia } = await import('pinia')
+  const pinia = createPinia()
+  ctx.pinia = pinia
+  app.use(pinia)
+
+  // SSR Client
+  if (initialState?.pinia) pinia.state.value = initialState.pinia
+  // SSR Server
+  if (ssrContext) ssrContext.pinia = pinia
+}
+
+const piniaOnRenderedHook: OnRenderedHook = ({ app, ssrContext }) => {
+  // SSR Server
+  if (ssrContext?.initialState && ssrContext.pinia) {
+    ssrContext.initialState.pinia = ssrContext.pinia.state.value
+  }
+}
+
+const piniaColadaonAppCreated: onAppCreatedHook = async ({
+  app,
+  ctx,
+  initialState
+}) => {
+  if (ctx?.pinia) {
+    const { PiniaColada, useQueryCache, hydrateQueryCache } = await import(
+      '@pinia/colada'
+    )
+
+    app.use(PiniaColada)
+
+    // SSR Client
+    if (initialState?.piniaColada) {
+      hydrateQueryCache(useQueryCache(ctx.pinia), initialState.piniaColada)
+    }
+  }
+}
+
+const piniaColadaOnRenderedHook: OnRenderedHook = async ({
+  app,
+  ssrContext
+}) => {
+  // SSR Server
+  if (ssrContext?.initialState && ssrContext.pinia) {
+    const { useQueryCache, serializeQueryCache } = await import('@pinia/colada')
+
+    // Delete to prevent Non-POJO error
+    if (ssrContext.initialState.pinia?._pc_query) {
+      delete ssrContext.initialState.pinia._pc_query
+    }
+    ssrContext.initialState.piniaColada = serializeQueryCache(
+      useQueryCache(ssrContext.pinia)
+    )
+  }
+}
+
+export const PiniaPlugin: VitrifyPlugin<PiniaPluginOptions> = async ({
+  ssr = false,
+  pwa = false,
+  options = {}
+}) => {
+  const onAppCreated = [piniaonAppCreated]
+  const onRendered = [piniaOnRenderedHook]
+  if (options.colada) {
+    onAppCreated.push(piniaColadaonAppCreated)
+    onRendered.push(piniaColadaOnRenderedHook)
+  }
+
+  return {
+    plugins: [],
+    config: {
+      vitrify: {
+        ssr: {
+          serverModules: ['@pinia/colada']
+        },
+        hooks: {
+          onAppCreated,
+          onRendered
+        }
+      }
+    }
+  }
+}