feat: ability to configure internal plugins

close #256, close #254, close #262, close #234

packages/slidev/node/build.ts

@@ -2,20 +2,21 @@
 import { resolve, join } from 'path'
 import http from 'http'
 import fs from 'fs-extra'
-import { build as viteBuild, InlineConfig, mergeConfig, ResolvedConfig } from 'vite'
+import { build as viteBuild, InlineConfig, mergeConfig, ResolvedConfig, resolveConfig } 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 { ResolvedSlidevOptions, SlidevPluginOptions } from './options'
+import { ResolvedSlidevOptions } from './options'
 
 export async function build(
   options: ResolvedSlidevOptions,
-  pluginOptions: SlidevPluginOptions = {},
   viteConfig: InlineConfig = {},
 ) {
   const indexPath = resolve(options.userRoot, 'index.html')
+  const rawConfig = await resolveConfig({}, 'build')
+  const pluginOptions = rawConfig.slidev || {}
 
   let originalIndexHTML: string | undefined
   if (fs.existsSync(indexPath))

packages/slidev/node/cli.ts

@@ -95,6 +95,16 @@ cli.command(
       port = userPort || await findFreePort(3030)
       server = (await createServer(
         options,
+        {
+          server: {
+            port,
+            strictPort: true,
+            open,
+            host: remote ? '0.0.0.0' : 'localhost',
+            force,
+          },
+          logLevel: log as LogLevel,
+        },
         {
           onDataReload(newData, data) {
             if (!theme && resolveThemeName(newData.config.theme) !== resolveThemeName(data.config.theme)) {
@@ -107,16 +117,6 @@ cli.command(
             }
           },
         },
-        {
-          server: {
-            port,
-            strictPort: true,
-            open,
-            host: remote ? '0.0.0.0' : 'localhost',
-            force,
-          },
-          logLevel: log as LogLevel,
-        },
       ))
 
       await server.listen()
@@ -194,7 +194,7 @@ cli.command(
       options.data.config.download = download
 
     printInfo(options)
-    await build(options, {}, {
+    await build(options, {
       base,
       build: {
         watch: watch ? {} : undefined,
@@ -320,7 +320,6 @@ cli.command(
     const options = await resolveOptions({ entry, theme }, 'build')
     const server = await createServer(
       options,
-      {},
       {
         server: { port },
         logLevel: 'error',

packages/slidev/node/declare.ts

@@ -0,0 +1,13 @@
+import { SlidevPluginOptions } from './options'
+
+// extend vite.config.ts
+declare module 'vite' {
+  interface UserConfig {
+    /**
+     * Custom internal plugin options for Slidev (advanced)
+     *
+     * @see https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/options.ts#L50
+     */
+    slidev?: SlidevPluginOptions
+  }
+}

packages/slidev/node/index.ts

@@ -1,3 +1,4 @@
+import './declare'
 export * from './server'
 export * from './plugins/preset'
 export * from './options'

packages/slidev/node/options.ts

@@ -54,6 +54,9 @@ export interface SlidevPluginOptions extends SlidevEntryOptions {
   windicss?: ArgumentsType<typeof WindiCSS>[0]
   icons?: ArgumentsType<typeof ViteIcons>[0]
   remoteAssets?: ArgumentsType<typeof RemoteAssets>[0]
+}
+
+export interface SlidevServerOptions {
   onDataReload?: (newData: SlidevMarkdown, data: SlidevMarkdown) => void
 }
 

packages/slidev/node/plugins/loaders.ts

@@ -12,7 +12,7 @@ import * as parser from '@slidev/parser/fs'
 import equal from 'fast-deep-equal'
 
 import type { Connect } from 'vite'
-import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
+import { ResolvedSlidevOptions, SlidevPluginOptions, SlidevServerOptions } from '../options'
 import { resolveImportPath, stringifyMarkdownTokens, toAtFS } from '../utils'
 
 const regexId = /^\/\@slidev\/slide\/(\d+)\.(md|json)(?:\?import)?$/
@@ -68,6 +68,7 @@ function prepareSlideInfo(data: SlideInfo): SlideInfoExtended {
 export function createSlidesLoader(
   { data, entry, clientRoot, themeRoots, userRoot, roots }: ResolvedSlidevOptions,
   pluginOptions: SlidevPluginOptions,
+  serverOptions: SlidevServerOptions,
   VuePlugin: Plugin,
   MarkdownPlugin: Plugin,
 ): Plugin[] {
@@ -168,7 +169,7 @@ export function createSlidesLoader(
           hmrPages.add(i)
         }
 
-        pluginOptions.onDataReload?.(newData, data)
+        serverOptions.onDataReload?.(newData, data)
         Object.assign(data, newData)
 
         const vueModules = (

packages/slidev/node/plugins/markdown.ts

@@ -52,7 +52,9 @@ export async function createMarkdownPlugin(
       html: true,
       xhtmlOut: true,
       linkify: true,
+      ...mdOptions?.markdownItOptions,
     },
+    ...mdOptions,
     markdownItSetup(md) {
       md.use(mila, {
         attrs: {
@@ -66,6 +68,8 @@ export async function createMarkdownPlugin(
       md.use(Katex, KatexOptions)
 
       setups.forEach(i => i(md))
+
+      mdOptions?.markdownItSetup?.(md)
     },
     transforms: {
       before(code, id) {
@@ -85,7 +89,6 @@ export async function createMarkdownPlugin(
         return code
       },
     },
-    ...mdOptions,
   })
 }
 

packages/slidev/node/plugins/preset.ts

@@ -5,7 +5,7 @@ import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import RemoteAssets, { DefaultRules } from 'vite-plugin-remote-assets'
 import { notNullish } from '@antfu/utils'
-import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
+import { ResolvedSlidevOptions, SlidevPluginOptions, SlidevServerOptions } from '../options'
 import { createConfigPlugin } from './config'
 import { createSlidesLoader } from './loaders'
 import { createMonacoTypesLoader } from './monaco'
@@ -40,6 +40,7 @@ const customElements = new Set([
 export async function ViteSlidevPlugin(
   options: ResolvedSlidevOptions,
   pluginOptions: SlidevPluginOptions,
+  serverOptions: SlidevServerOptions = {},
 ): Promise<Plugin[]> {
   const {
     vue: vueOptions = {},
@@ -64,6 +65,7 @@ export async function ViteSlidevPlugin(
           return customElements.has(tag)
         },
       },
+      ...vueOptions?.template,
     },
     ...vueOptions,
   })
@@ -75,7 +77,7 @@ export async function ViteSlidevPlugin(
     MarkdownPlugin,
     VuePlugin,
 
-    createSlidesLoader(options, pluginOptions, VuePlugin, MarkdownPlugin),
+    createSlidesLoader(options, pluginOptions, serverOptions, VuePlugin, MarkdownPlugin),
 
     ViteComponents({
       extensions: ['vue', 'md', 'ts'],

packages/slidev/node/server.ts

@@ -1,18 +1,21 @@
-import { createServer as createViteServer, InlineConfig, mergeConfig } from 'vite'
-import { ResolvedSlidevOptions, SlidevPluginOptions } from './options'
+import { createServer as createViteServer, InlineConfig, mergeConfig, resolveConfig } from 'vite'
+import { ResolvedSlidevOptions, SlidevServerOptions } from './options'
 import { ViteSlidevPlugin } from './plugins/preset'
 
 export async function createServer(
   options: ResolvedSlidevOptions,
-  pluginConfig: SlidevPluginOptions = {},
   viteConfig: InlineConfig = {},
+  serverOptions: SlidevServerOptions = {},
 ) {
+  const rawConfig = await resolveConfig({}, 'serve')
+  const pluginOptions = rawConfig.slidev || {}
+
   const server = await createViteServer(
     mergeConfig(
       viteConfig,
       <InlineConfig>({
         plugins: [
-          await ViteSlidevPlugin(options, pluginConfig),
+          await ViteSlidevPlugin(options, pluginOptions, serverOptions),
         ],
       }),
     ),