feat: setup for windi and shiki

packages/slidev/node/cli.ts

@@ -12,7 +12,7 @@ import { SlidevConfig } from '@slidev/types'
 import isInstalledGlobally from 'is-installed-globally'
 import { version } from '../package.json'
 import { createServer } from './server'
-import { getThemeRoots, isRelative, ResolvedSlidevOptions, resolveOptions } from './options'
+import { getThemeRoots, isPath, ResolvedSlidevOptions, resolveOptions } from './options'
 import { resolveThemeName } from './themes'
 
 const CONFIG_RESTART_FIELDS: (keyof SlidevConfig)[] = [
@@ -199,7 +199,7 @@ cli.command(
             console.error('Can not eject theme "none"')
             process.exit(1)
           }
-          if (isRelative(theme)) {
+          if (isPath(theme)) {
             console.error('Theme is already ejected')
             process.exit(1)
           }

packages/slidev/node/options.ts

@@ -65,16 +65,16 @@ export function getCLIRoot() {
   return resolve(__dirname, '..')
 }
 
-export function isRelative(name: string) {
-  return /^\.\.?[\/\\]/.test(name)
+export function isPath(name: string) {
+  return name.startsWith('/') || /^\.\.?[\/\\]/.test(name)
 }
 
 export function getThemeRoots(name: string, entry: string) {
   if (!name)
     return []
 
   // TODO: handle theme inherit
-  if (isRelative(name)) {
+  if (isPath(name)) {
     return [
       resolve(dirname(entry), name),
     ]

packages/slidev/node/plugins/jiti.ts

@@ -0,0 +1,3 @@
+import _jiti from 'jiti'
+
+export const jiti = _jiti(__filename)

packages/slidev/node/plugins/markdown.ts

@@ -7,11 +7,12 @@ import mila from 'markdown-it-link-attributes'
 import type { KatexOptions } from 'katex'
 import type MarkdownIt from 'markdown-it'
 import type { ShikiOptions } from '@slidev/types'
+import * as Shiki from 'shiki'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
 import Katex from './markdown-it-katex'
 import { loadSetups } from './setupNode'
 import Prism from './markdown-it-prism'
-import Shiki, { resolveShikiOptions } from './markdown-it-shiki'
+import MarkdownItShiki, { resolveShikiOptions } from './markdown-it-shiki'
 
 const DEFAULT_SHIKI_OPTIONS: ShikiOptions = {
   theme: {
@@ -29,10 +30,10 @@ export async function createMarkdownPlugin(
 
   if (config.highlighter === 'shiki') {
     const { getHighlighter } = await import('shiki')
-    const shikiOptions: ShikiOptions = await loadSetups(roots, 'shiki.ts', {}, DEFAULT_SHIKI_OPTIONS, false)
+    const shikiOptions: ShikiOptions = await loadSetups(roots, 'shiki.ts', Shiki, DEFAULT_SHIKI_OPTIONS, false)
     const { langs, themes } = resolveShikiOptions(shikiOptions)
     shikiOptions.highlighter = await getHighlighter({ themes, langs })
-    setups.push(md => md.use(Shiki, shikiOptions))
+    setups.push(md => md.use(MarkdownItShiki, shikiOptions))
   }
   else {
     setups.push(md => md.use(Prism))

packages/slidev/node/plugins/preset.ts

@@ -71,7 +71,7 @@ export async function ViteSlidevPlugin(
   const MarkdownPlugin = await createMarkdownPlugin(options, pluginOptions)
 
   return [
-    createWindiCSSPlugin(options, pluginOptions),
+    await createWindiCSSPlugin(options, pluginOptions),
     MarkdownPlugin,
     VuePlugin,
 

packages/slidev/node/plugins/setupNode.ts

@@ -1,9 +1,20 @@
 import { resolve } from 'path'
 import { existsSync } from 'fs-extra'
-import { deepMerge } from '@antfu/utils'
-import _jiti from 'jiti'
+import { isObject } from '@antfu/utils'
+import { jiti } from './jiti'
 
-const jiti = _jiti(__filename)
+function deepMerge(a: any, b: any, rootPath = '') {
+  a = { ...a }
+  Object.keys(b).forEach((key) => {
+    if (isObject(a[key]))
+      a[key] = deepMerge(a[key], b[key], rootPath ? `${rootPath}.${key}` : key)
+    else if (Array.isArray(a[key]))
+      a[key] = [...a[key], ...b[key]]
+    else
+      a[key] = b[key]
+  })
+  return a
+}
 
 export async function loadSetups<T, R extends object>(roots: string[], name: string, arg: T, initial: R, merge = true): Promise<R> {
   let returns = initial

packages/slidev/node/plugins/windicss.ts

@@ -1,23 +1,35 @@
 import { resolve, dirname } from 'path'
+import { existsSync } from 'fs'
 import { slash } from '@antfu/utils'
-import WindiCSS, { defaultConfigureFiles } from 'vite-plugin-windicss'
+import WindiCSS, { defaultConfigureFiles, WindiCssOptions } from 'vite-plugin-windicss'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '..'
 import { resolveImportPath } from '../utils'
+import { jiti } from './jiti'
+import { loadSetups } from './setupNode'
 
-export function createWindiCSSPlugin(
-  { themeRoots, clientRoot, userRoot }: ResolvedSlidevOptions,
+export async function createWindiCSSPlugin(
+  { themeRoots, clientRoot, userRoot, roots }: ResolvedSlidevOptions,
   { windicss: windiOptions }: SlidevPluginOptions,
 ) {
+  const configFiles = [
+    ...defaultConfigureFiles,
+    ...themeRoots.map(i => `${i}/windi.config.ts`),
+    resolve(clientRoot, 'windi.config.ts'),
+  ]
+
+  const configFile = configFiles.find(i => existsSync(i))!
+  let config = jiti(configFile) as WindiCssOptions
+  if (config.default)
+    config = config.default
+
+  config = await loadSetups(roots, 'windicss.ts', {}, config, true)
+
   return WindiCSS(
     {
-      configFiles: [
-        ...defaultConfigureFiles,
-        ...themeRoots.map(i => `${i}/windi.config.ts`),
-        resolve(clientRoot, 'windi.config.ts'),
-      ],
+      configFiles: [configFile],
+      config,
       onOptionsResolved(config) {
         config.scanOptions.include.push(`!${slash(resolve(userRoot, 'node_modules'))}`)
-
         config.scanOptions.exclude.push(dirname(resolveImportPath('monaco-editor/package.json', true)))
         config.scanOptions.exclude.push(dirname(resolveImportPath('katex/package.json', true)))
       },

packages/slidev/node/themes.ts

@@ -3,7 +3,7 @@ import { parseNi, run } from '@antfu/ni'
 import isInstalledGlobally from 'is-installed-globally'
 import { underline } from 'kolorist'
 import { resolveImportPath } from './utils'
-import { isRelative } from './options'
+import { isPath } from './options'
 
 const officialThemes: Record<string, string> = {
   'none': '',
@@ -23,7 +23,7 @@ export function resolveThemeName(name: string) {
     return ''
   if (name.startsWith('@slidev/theme-') || name.startsWith('slidev-theme-'))
     return name
-  if (isRelative(name))
+  if (isPath(name))
     return name
 
   // search for local packages first
@@ -43,7 +43,7 @@ export async function promptForThemeInstallation(name: string) {
   if (!name)
     return name
 
-  if (isRelative(name) || packageExists(name))
+  if (isPath(name) || packageExists(name))
     return name
 
   const { confirm } = await prompts({

packages/types/src/setups.ts

@@ -1,10 +1,12 @@
 import type { Awaitable } from '@antfu/utils'
 import type { IThemeRegistration, ILanguageRegistration, Highlighter as ShikiHighlighter } from 'shiki'
+import type * as Shiki from 'shiki'
 import type * as monaco from 'monaco-editor'
 import type { App } from 'vue'
 import type { Router } from 'vue-router'
 import type mermaid from 'mermaid'
 import type { KatexOptions } from 'katex'
+import type { WindiCssOptions } from 'vite-plugin-windicss'
 
 export interface AppContext {
   app: App
@@ -25,8 +27,9 @@ export interface ShikiOptions {
 export type MermaidOptions = (typeof mermaid.initialize) extends (a: infer A) => any ? A : never
 
 // node side
-export type ShikiSetup = () => Awaitable<ShikiOptions | undefined>
+export type ShikiSetup = (shiki: typeof Shiki) => Awaitable<ShikiOptions | undefined>
 export type KatexSetup = () => Awaitable<Partial<KatexOptions> | undefined>
+export type WindiSetup = () => Awaitable<Partial<WindiCssOptions> | undefined>
 
 // client side
 export type MonacoSetup = (m: typeof monaco) => Awaitable<void>
@@ -37,6 +40,10 @@ export function defineShikiSetup(fn: ShikiSetup) {
   return fn
 }
 
+export function defineWindiSetup(fn: WindiSetup) {
+  return fn
+}
+
 export function defineMonacoSetup(fn: MonacoSetup) {
   return fn
 }