feat: allow adding Vite plugins dependent on slides data (#2112)

Co-authored-by: Anthony Fu <[email protected]>

Author: jgosmann

docs/custom/config-vite.md

@@ -65,3 +65,19 @@ export default defineConfig({
 
 Please pass the Vue options to the `slidev.vue` field as described above
 :::
+
+## Add Custom Plugins based on Slide data
+
+Usually you can add Vite plugins into your `vite.config.ts` (see above).
+However, if you want to add plugins based on the slide data, you need to add a `./setup/vite-plugins.ts` with the following content:
+
+```ts twoslash
+import { defineVitePluginSetup } from '@slidev/types'
+
+export default defineVitePluginSetup((options) => {
+  return [
+    // Your plugins here
+    // Slide data is available as options.data.slides
+  ]
+})
+```

packages/slidev/node/vite/index.ts

@@ -16,6 +16,7 @@ import { createRemoteAssetsPlugin } from './remoteAssets'
 import { createServerRefPlugin } from './serverRef'
 import { createStaticCopyPlugin } from './staticCopy'
 import { createUnocssPlugin } from './unocss'
+import { createUserVitePlugins } from './userPlugins'
 import { createVuePlugin } from './vue'
 
 export function ViteSlidevPlugin(
@@ -41,5 +42,6 @@ export function ViteSlidevPlugin(
     createUnocssPlugin(options, pluginOptions),
     createStaticCopyPlugin(options, pluginOptions),
     createInspectPlugin(options, pluginOptions),
+    createUserVitePlugins(options),
   ])
 }

packages/slidev/node/vite/userPlugins.ts

@@ -0,0 +1,17 @@
+import type { ResolvedSlidevOptions, VitePluginsSetup } from '@slidev/types'
+import type { Plugin as VitePlugin } from 'vite'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { loadModule } from '../utils'
+
+export async function createUserVitePlugins(options: ResolvedSlidevOptions): Promise<VitePlugin[]> {
+  const createPluginTasks = options.roots.map(async (root) => {
+    const modulePath = path.join(root, 'setup', 'vite-plugins.ts')
+    if (existsSync(modulePath)) {
+      const module = await loadModule(modulePath) as { default: VitePluginsSetup }
+      return module.default(options)
+    }
+    return []
+  })
+  return (await Promise.all(createPluginTasks)).flatMap(p => p)
+}

packages/types/src/setups.ts

@@ -4,10 +4,12 @@ import type { MermaidConfig } from 'mermaid'
 import type * as monaco from 'monaco-editor'
 import type { BuiltinLanguage, BuiltinTheme, CodeOptionsMeta, CodeOptionsThemes, CodeToHastOptionsCommon, Highlighter, LanguageInput } from 'shiki'
 import type { VitePluginConfig as UnoCssConfig } from 'unocss/vite'
+import type { Plugin as VitePlugin } from 'vite'
 import type { App, ComputedRef, Ref } from 'vue'
 import type { Router, RouteRecordRaw } from 'vue-router'
 import type { CodeRunnerProviders } from './code-runner'
 import type { ContextMenuItem } from './context-menu'
+import type { ResolvedSlidevOptions } from './options'
 import type { MarkdownTransformer } from './transform'
 import type { SlidevPreparserExtension } from './types'
 
@@ -79,6 +81,7 @@ export type PreparserSetup = (context: {
   headmatter: Record<string, unknown>
   mode?: string
 }) => Awaitable<SlidevPreparserExtension[]>
+export type VitePluginsSetup = (options: ResolvedSlidevOptions) => Awaitable<VitePlugin[]>
 
 // client side
 export type MonacoSetup = (m: typeof monaco) => Awaitable<MonacoSetupReturn | void>
@@ -105,5 +108,6 @@ export const defineKatexSetup = defineSetup<KatexSetup>
 export const defineShortcutsSetup = defineSetup<ShortcutsSetup>
 export const defineTransformersSetup = defineSetup<TransformersSetup>
 export const definePreparserSetup = defineSetup<PreparserSetup>
+export const defineVitePluginsSetup = defineSetup<VitePluginsSetup>
 export const defineCodeRunnersSetup = defineSetup<CodeRunnersSetup>
 export const defineContextMenuSetup = defineSetup<ContextMenuSetup>