feat: extend vite config from themes and addons (#621)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/slidev/node/build.ts

@@ -3,12 +3,12 @@ import { join, resolve } from 'path'
 import http from 'http'
 import fs from 'fs-extra'
 import type { InlineConfig, ResolvedConfig } from 'vite'
-import { mergeConfig, resolveConfig, build as viteBuild } from 'vite'
+import { resolveConfig, build as viteBuild } from 'vite'
 import connect from 'connect'
 import sirv from 'sirv'
 import { blue, yellow } from 'kolorist'
 import { ViteSlidevPlugin } from './plugins/preset'
-import { getIndexHtml } from './common'
+import { getIndexHtml, mergeViteConfigs } from './common'
 import type { ResolvedSlidevOptions } from './options'
 
 export async function build(
@@ -27,7 +27,8 @@ export async function build(
   let config: ResolvedConfig = undefined!
 
   try {
-    const inlineConfig = mergeConfig(
+    const inlineConfig = await mergeViteConfigs(
+      options,
       viteConfig,
       <InlineConfig>({
         root: options.userRoot,
@@ -44,6 +45,7 @@ export async function build(
           chunkSizeWarningLimit: 2000,
         },
       }),
+      'build',
     )
 
     await viteBuild(inlineConfig)
@@ -56,27 +58,31 @@ export async function build(
         console.log(blue('  building for Monaco...\n'))
 
         await viteBuild(
-          mergeConfig(inlineConfig,
-        <InlineConfig>({
-          root: join(options.clientRoot, 'iframes/monaco'),
-          base: `${config.base}iframes/monaco/`,
-          build: {
-            outDir: resolve(config.build.outDir, 'iframes/monaco'),
-            // fix for monaco workers
-            // https://github.com/vitejs/vite/issues/1927#issuecomment-805803918
-            rollupOptions: {
-              output: {
-                manualChunks: {
-                  jsonWorker: ['monaco-editor/esm/vs/language/json/json.worker'],
-                  cssWorker: ['monaco-editor/esm/vs/language/css/css.worker'],
-                  htmlWorker: ['monaco-editor/esm/vs/language/html/html.worker'],
-                  tsWorker: ['monaco-editor/esm/vs/language/typescript/ts.worker'],
-                  editorWorker: ['monaco-editor/esm/vs/editor/editor.worker'],
+          await mergeViteConfigs(
+            options,
+            inlineConfig,
+            <InlineConfig>({
+              root: join(options.clientRoot, 'iframes/monaco'),
+              base: `${config.base}iframes/monaco/`,
+              build: {
+                outDir: resolve(config.build.outDir, 'iframes/monaco'),
+                // fix for monaco workers
+                // https://github.com/vitejs/vite/issues/1927#issuecomment-805803918
+                rollupOptions: {
+                  output: {
+                    manualChunks: {
+                      jsonWorker: ['monaco-editor/esm/vs/language/json/json.worker'],
+                      cssWorker: ['monaco-editor/esm/vs/language/css/css.worker'],
+                      htmlWorker: ['monaco-editor/esm/vs/language/html/html.worker'],
+                      tsWorker: ['monaco-editor/esm/vs/language/typescript/ts.worker'],
+                      editorWorker: ['monaco-editor/esm/vs/editor/editor.worker'],
+                    },
+                  },
                 },
               },
-            },
-          },
-        })),
+            }),
+            'build',
+          ),
         )
       }
     }
@@ -115,13 +121,14 @@ export async function build(
     server.listen(port)
     await exportSlides({
       port,
+      slides: options.data.slides,
       total: options.data.slides.length,
       format: 'pdf',
       output: join(outDir, outFilename),
       base: config.base,
       dark: options.data.config.colorSchema === 'dark',
-      width: 1920,
-      height: Math.round(1920 / options.data.config.aspectRatio),
+      width: options.data.config.canvasWidth,
+      height: Math.round(options.data.config.canvasWidth / options.data.config.aspectRatio),
       routerMode: options.data.config.routerMode,
     })
     server.close()

packages/slidev/node/common.ts

@@ -1,6 +1,8 @@
 import { existsSync, promises as fs } from 'fs'
 import { join } from 'path'
 import { uniq } from '@antfu/utils'
+import { loadConfigFromFile, mergeConfig } from 'vite'
+import type { ConfigEnv, InlineConfig } from 'vite'
 import type { ResolvedSlidevOptions } from './options'
 import { generateGoogleFontsUrl, toAtFS } from './utils'
 
@@ -40,3 +42,26 @@ export async function getIndexHtml({ clientRoot, themeRoots, data, userRoot }: R
 
   return main
 }
+
+export async function mergeViteConfigs({ addonRoots, themeRoots }: ResolvedSlidevOptions, viteConfig: InlineConfig, config: InlineConfig, command: 'serve' | 'build') {
+  const configEnv: ConfigEnv = {
+    mode: 'development',
+    command,
+  }
+
+  const files = uniq([
+    ...themeRoots,
+    ...addonRoots,
+  ]).map(i => join(i, 'vite.config.ts'))
+
+  for await (const file of files) {
+    if (!existsSync(file))
+      continue
+    const viteConfig = await loadConfigFromFile(configEnv, file)
+    if (!viteConfig?.config)
+      continue
+    config = mergeConfig(config, viteConfig.config)
+  }
+
+  return mergeConfig(viteConfig, config)
+}

packages/slidev/node/plugins/loaders.ts

@@ -428,7 +428,7 @@ defineProps<{ no: number | string }>()`)
     ])
 
     for (const root of roots) {
-      const layoutPaths = await fg('layouts/*.{vue,ts}', {
+      const layoutPaths = await fg('layouts/**/*.{vue,ts}', {
         cwd: root,
         absolute: true,
       })

packages/slidev/node/plugins/windicss.ts

@@ -47,12 +47,12 @@ export async function createWindiCSSPlugin(
       },
       onOptionsResolved(config) {
         themeRoots.forEach((i) => {
-          config.scanOptions.include.push(`${i}/components/*.{vue,ts}`)
-          config.scanOptions.include.push(`${i}/layouts/*.{vue,ts}`)
+          config.scanOptions.include.push(`${i}/components/**/*.{vue,ts}`)
+          config.scanOptions.include.push(`${i}/layouts/**/*.{vue,ts}`)
         })
         addonRoots.forEach((i) => {
-          config.scanOptions.include.push(`${i}/components/*.{vue,ts}`)
-          config.scanOptions.include.push(`${i}/layouts/*.{vue,ts}`)
+          config.scanOptions.include.push(`${i}/components/**/*.{vue,ts}`)
+          config.scanOptions.include.push(`${i}/layouts/**/*.{vue,ts}`)
         })
         config.scanOptions.include.push(`!${slash(resolve(userRoot, 'node_modules'))}`)
         config.scanOptions.exclude.push(dirname(resolveImportPath('monaco-editor/package.json', true)))

packages/slidev/node/server.ts

@@ -1,6 +1,7 @@
 import { join } from 'path'
 import type { InlineConfig } from 'vite'
-import { createServer as createViteServer, mergeConfig, resolveConfig } from 'vite'
+import { createServer as createViteServer, resolveConfig } from 'vite'
+import { mergeViteConfigs } from './common'
 import type { ResolvedSlidevOptions, SlidevServerOptions } from './options'
 import { ViteSlidevPlugin } from './plugins/preset'
 
@@ -16,7 +17,8 @@ export async function createServer(
   process.env.EDITOR = process.env.EDITOR || 'code'
 
   const server = await createViteServer(
-    mergeConfig(
+    await mergeViteConfigs(
+      options,
       viteConfig,
       <InlineConfig>({
         optimizeDeps: {
@@ -28,6 +30,7 @@ export async function createServer(
           await ViteSlidevPlugin(options, pluginOptions, serverOptions),
         ],
       }),
+      'serve',
     ),
   )