feat: ViteSlidevPlugin pluginOptions argument now can be modified by themes and addons (#1210)

Author: 0phoff

packages/slidev/node/build.ts

@@ -3,7 +3,7 @@ import { join, resolve } from 'node:path'
 import http from 'node:http'
 import fs from 'fs-extra'
 import type { InlineConfig, ResolvedConfig } from 'vite'
-import { resolveConfig, build as viteBuild } from 'vite'
+import { mergeConfig, build as viteBuild } from 'vite'
 import connect from 'connect'
 import sirv from 'sirv'
 import { blue, yellow } from 'kolorist'
@@ -18,8 +18,6 @@ export async function build(
   args: BuildArgs,
 ) {
   const indexPath = resolve(options.userRoot, 'index.html')
-  const rawConfig = await resolveConfig({}, 'build', options.entry)
-  const pluginOptions = rawConfig.slidev || {}
 
   let originalIndexHTML: string | undefined
   if (fs.existsSync(indexPath))
@@ -29,13 +27,12 @@ export async function build(
   let config: ResolvedConfig = undefined!
 
   try {
-    const inlineConfig = await mergeViteConfigs(
+    let inlineConfig = await mergeViteConfigs(
       options,
       viteConfig,
       <InlineConfig>({
         root: options.userRoot,
         plugins: [
-          await ViteSlidevPlugin(options, pluginOptions),
           {
             name: 'resolve-config',
             configResolved(_config) {
@@ -50,6 +47,15 @@ export async function build(
       'build',
     )
 
+    inlineConfig = mergeConfig(
+      inlineConfig,
+      {
+        plugins: [
+          await ViteSlidevPlugin(options, inlineConfig.slidev || {}),
+        ],
+      },
+    )
+
     await viteBuild(inlineConfig)
 
     if (options.data.features.monaco) {

packages/slidev/node/common.ts

@@ -1,7 +1,7 @@
 import { existsSync, promises as fs } from 'node:fs'
 import { join } from 'node:path'
 import { uniq } from '@antfu/utils'
-import { loadConfigFromFile, mergeConfig } from 'vite'
+import { loadConfigFromFile, mergeConfig, resolveConfig } from 'vite'
 import type { ConfigEnv, InlineConfig } from 'vite'
 import type { ResolvedSlidevOptions } from './options'
 import { generateGoogleFontsUrl, toAtFS } from './utils'
@@ -44,12 +44,17 @@ export async function getIndexHtml({ clientRoot, themeRoots, addonRoots, data, u
   return main
 }
 
-export async function mergeViteConfigs({ addonRoots, themeRoots }: ResolvedSlidevOptions, viteConfig: InlineConfig, config: InlineConfig, command: 'serve' | 'build') {
+export async function mergeViteConfigs(
+  { addonRoots, themeRoots, entry }: ResolvedSlidevOptions,
+  viteConfig: InlineConfig,
+  config: InlineConfig,
+  command: 'serve' | 'build',
+) {
   const configEnv: ConfigEnv = {
     mode: 'development',
     command,
   }
-
+  // Merge theme & addon configs
   const files = uniq([
     ...themeRoots,
     ...addonRoots,
@@ -64,5 +69,12 @@ export async function mergeViteConfigs({ addonRoots, themeRoots }: ResolvedSlide
     config = mergeConfig(config, viteConfig.config)
   }
 
-  return mergeConfig(viteConfig, config)
+  // Merge viteConfig argument
+  config = mergeConfig(config, viteConfig)
+
+  // Merge local config (slidev options only)
+  const localConfig = await resolveConfig({}, command, entry)
+  config = mergeConfig(config, { slidev: localConfig.slidev || {} })
+
+  return config
 }

packages/slidev/node/server.ts

@@ -1,7 +1,7 @@
 import { join } from 'node:path'
 import process from 'node:process'
 import type { InlineConfig } from 'vite'
-import { createServer as createViteServer, resolveConfig } from 'vite'
+import { createServer as createViteServer, mergeConfig } from 'vite'
 import { mergeViteConfigs } from './common'
 import type { ResolvedSlidevOptions, SlidevServerOptions } from './options'
 import { ViteSlidevPlugin } from './plugins/preset'
@@ -11,28 +11,31 @@ export async function createServer(
   viteConfig: InlineConfig = {},
   serverOptions: SlidevServerOptions = {},
 ) {
-  const rawConfig = await resolveConfig({}, 'serve', options.entry)
-  const pluginOptions = rawConfig.slidev || {}
-
   // default open editor to code, #312
   process.env.EDITOR = process.env.EDITOR || 'code'
 
+  const config = await mergeViteConfigs(
+    options,
+    viteConfig,
+    <InlineConfig>({
+      root: options.userRoot,
+      optimizeDeps: {
+        entries: [
+          join(options.clientRoot, 'main.ts'),
+        ],
+      },
+    }),
+    'serve',
+  )
+
   const server = await createViteServer(
-    await mergeViteConfigs(
-      options,
-      viteConfig,
-      <InlineConfig>({
-        root: options.userRoot,
-        optimizeDeps: {
-          entries: [
-            join(options.clientRoot, 'main.ts'),
-          ],
-        },
+    mergeConfig(
+      config,
+      {
         plugins: [
-          await ViteSlidevPlugin(options, pluginOptions, serverOptions),
+          await ViteSlidevPlugin(options, config.slidev || {}, serverOptions),
         ],
-      }),
-      'serve',
+      },
     ),
   )