refactor: more robust setup injection

demo/vue-runner/setup/shiki.ts

@@ -1,12 +1,8 @@
+import type { ShikiSetupReturn } from '@slidev/types'
 import { defineShikiSetup } from '@slidev/types'
 
-export default defineShikiSetup(() => {
+export default defineShikiSetup((): ShikiSetupReturn => {
   return {
-    themes: {
-      dark: 'vitesse-dark',
-      light: 'vitesse-light',
-    },
-    // Explicitly Vue for Monaco Highlighting
     langs: [
       'ts',
       'js',

packages/client/internals/SideEditor.vue

@@ -2,7 +2,7 @@
 import { throttledWatch, useEventListener } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
-import { useCodeMirror } from '../setup/codemirror'
+import { useCodeMirror } from '../modules/codemirror'
 import { currentSlideNo, openInEditor } from '../logic/nav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import IconButton from './IconButton.vue'
@@ -219,3 +219,4 @@ throttledWatch(
   @apply px-3 py-2 h-full overflow-hidden bg-transparent font-mono text-sm z-0;
 }
 </style>
+../modules/codemirror

packages/client/setup/code-runners.ts

@@ -1,8 +1,8 @@
-/* __imports__ */
 import { createSingletonPromise } from '@antfu/utils'
-import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs, CodeRunnerProviders } from '@slidev/types'
+import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
 import { isDark } from '../logic/dark'
+import setups from '#slidev/setups/code-runners'
 
 export default createSingletonPromise(async () => {
   const runners: Record<string, CodeRunner> = {
@@ -48,15 +48,10 @@ export default createSingletonPromise(async () => {
     }
   }
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = runners
-  // eslint-disable-next-line prefer-const
-  let injection_return: CodeRunnerProviders = {}
-
-  /* __async_injections__ */
-
-  Object.assign(runners, injection_return)
+  for (const setup of setups) {
+    const result = await setup(runners)
+    Object.assign(runners, result)
+  }
 
   return {
     highlight,

packages/client/setup/main.ts

@@ -1,10 +1,9 @@
-/* __imports__ */
-
 import type { AppContext } from '@slidev/types'
 import { MotionPlugin } from '@vueuse/motion'
 import TwoSlashFloatingVue from '@shikijs/vitepress-twoslash/client'
+import setups from '#slidev/setups/main'
 
-export default function setupMain(context: AppContext) {
+export default async function setupMain(context: AppContext) {
   function setMaxHeight() {
     // disable the mobile navbar scroll
     // see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -16,9 +15,6 @@ export default function setupMain(context: AppContext) {
   context.app.use(MotionPlugin)
   context.app.use(TwoSlashFloatingVue as any)
 
-  // @ts-expect-error inject in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = context
-
-  /* __injections__ */
+  for (const setup of setups)
+    await setup(context)
 }

packages/client/setup/mermaid.ts

@@ -1,15 +1,14 @@
-/* __imports__ */
-
 import type { MermaidOptions } from '@slidev/types'
 import { defineMermaidSetup } from '@slidev/types'
+import setups from '#slidev/setups/mermaid'
 
 export default defineMermaidSetup(() => {
-  // eslint-disable-next-line prefer-const
-  let injection_return: MermaidOptions = {
+  const setupReturn: MermaidOptions = {
     theme: 'default',
   }
 
-  /* __injections__ */
+  for (const setup of setups)
+    Object.assign(setupReturn, setup())
 
-  return injection_return
+  return setupReturn
 })

packages/client/setup/monaco.ts

@@ -22,8 +22,8 @@ import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/brows
 
 import { isDark } from '../logic/dark'
 import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
 
-/* __imports__ */
 window.MonacoEnvironment = {
   getWorker(_, label) {
     if (label === 'json')
@@ -98,13 +98,11 @@ const setup = createSingletonPromise(async () => {
   const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
   const highlighter = await shiki
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = monaco
-  // eslint-disable-next-line prefer-const
-  let injection_return: MonacoSetupReturn = {}
-
-  /* __async_injections__ */
+  const setupReturn: MonacoSetupReturn = {}
+  for (const setup of setups) {
+    const result = await setup(monaco)
+    Object.assign(setupReturn, result)
+  }
 
   // Use Shiki to highlight Monaco
   shikiToMonaco(highlighter, monaco)
@@ -122,7 +120,7 @@ const setup = createSingletonPromise(async () => {
   return {
     monaco,
     ata,
-    ...injection_return,
+    ...setupReturn,
   }
 })
 

packages/client/setup/root.ts

@@ -1,4 +1,3 @@
-/* __imports__ */
 import { watch } from 'vue'
 import { useHead } from '@unhead/vue'
 import { configs } from '../env'
@@ -9,13 +8,11 @@ import { router } from '../routes'
 import { TRUST_ORIGINS } from '../constants'
 import { skipTransition } from '../composables/hmr'
 import { makeId } from '../logic/utils'
+import setups from '#slidev/setups/root'
 
 export default function setupRoot() {
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg = undefined
-
-  /* __injections__ */
+  for (const setup of setups)
+    setup()
 
   const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
   useHead({

packages/client/setup/shortcuts.ts

@@ -1,4 +1,3 @@
-/* __imports__ */
 import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
 import { downloadPDF } from '../utils'
@@ -7,13 +6,12 @@ import { toggleDark } from '../logic/dark'
 import { magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
 import { drawingEnabled } from '../logic/drawings'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
+import setups from '#slidev/setups/shortcuts'
 
 export default function setupShortcuts() {
   const { escape, space, shift, left, right, up, down, enter, d, g, o, '`': backtick } = magicKeys
 
-  // @ts-expect-error injected in runtime
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const injection_arg: NavOperations = {
+  const context: NavOperations = {
     next,
     prev,
     nextSlide,
@@ -29,8 +27,7 @@ export default function setupShortcuts() {
     showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
   }
 
-  // eslint-disable-next-line prefer-const
-  let injection_return: ShortcutOptions[] = [
+  let shortcuts: ShortcutOptions[] = [
     { name: 'next_space', key: and(space, not(shift)), fn: next, autoRepeat: true },
     { name: 'prev_space', key: and(space, shift), fn: prev, autoRepeat: true },
     { name: 'next_right', key: and(right, not(shift), not(showOverview)), fn: next, autoRepeat: true },
@@ -59,11 +56,14 @@ export default function setupShortcuts() {
     },
   ]
 
-  const baseShortcutNames = new Set(injection_return.map(s => s.name))
+  const baseShortcutNames = new Set(shortcuts.map(s => s.name))
 
-  /* __chained_injections__ */
+  for (const setup of setups) {
+    const result = setup(context, shortcuts)
+    shortcuts = shortcuts.concat(result)
+  }
 
-  const remainingBaseShortcutNames = injection_return.filter(s => s.name && baseShortcutNames.has(s.name))
+  const remainingBaseShortcutNames = shortcuts.filter(s => s.name && baseShortcutNames.has(s.name))
   if (remainingBaseShortcutNames.length === 0) {
     const message = [
       '========== WARNING ==========',
@@ -77,5 +77,5 @@ export default function setupShortcuts() {
     console.warn(message)
   }
 
-  return injection_return
+  return shortcuts
 }

packages/create-theme/template/setup/shiki.ts

@@ -1,6 +1,7 @@
+import type { ShikiSetupReturn } from '@slidev/types'
 import { defineShikiSetup } from '@slidev/types'
 
-export default defineShikiSetup(() => {
+export default defineShikiSetup((): ShikiSetupReturn => {
   return {
     themes: {
       dark: 'vitesse-dark',

packages/slidev/node/plugins/loaders.ts

@@ -92,7 +92,7 @@ function withRenderedNote(data: SlideInfo): SlideInfo {
 }
 
 export function createSlidesLoader(
-  { data, clientRoot, roots, remote, mode, userRoot }: ResolvedSlidevOptions,
+  { data, clientRoot, roots, remote, mode, userRoot, themeRoots, addonRoots }: ResolvedSlidevOptions,
   pluginOptions: SlidevPluginOptions,
   serverOptions: SlidevServerOptions,
 ): Plugin[] {
@@ -288,6 +288,13 @@ export function createSlidesLoader(
         if (id === '/@slidev/shiki')
           return generteShikiBundle()
 
+        // setups
+        const setupModules = ['shiki', 'code-runners', 'monaco', 'mermaid', 'main', 'root', 'shortcuts']
+        for (const name of setupModules) {
+          if (id === `/@slidev/setups/${name}`)
+            return generateSetupArray(name)
+        }
+
         // title
         if (id === '/@slidev/titles.md') {
           return {
@@ -825,6 +832,31 @@ export default {
 `
   }
 
+  async function generateSetupArray(name: string) {
+    const setups = uniq([
+      ...themeRoots,
+      ...addonRoots,
+      userRoot,
+    ])
+      .flatMap((i) => {
+        const path = join(i, 'setup', name)
+        return ['.ts', '.mts', '.js', '.mjs'].map(ext => path + ext)
+      })
+      .filter(i => fs.existsSync(i))
+
+    const imports: string[] = []
+
+    setups.forEach((path, idx) => {
+      imports.push(`import __n${idx} from '${toAtFS(path)}'`)
+    })
+
+    imports.push(
+      `export default [${setups.map((_, idx) => `__n${idx}`).join(',')}]`,
+    )
+
+    return imports.join('\n')
+  }
+
   async function generteShikiBundle() {
     const options = await loadShikiSetups(clientRoot, roots)
     const langs = await resolveLangs(options.langs || ['javascript', 'typescript', 'html', 'css'])

packages/slidev/node/plugins/preset.ts

@@ -14,7 +14,7 @@ import type { ResolvedSlidevOptions, SlidevPluginOptions, SlidevServerOptions }
 import { loadDrawings, writeDrawings } from '../drawings'
 import { createConfigPlugin } from './extendConfig'
 import { createSlidesLoader } from './loaders'
-import { createClientSetupPlugin } from './setupClient'
+
 import { createMarkdownPlugin } from './markdown'
 import { createFixPlugins } from './patchTransform'
 import { createMonacoTypesLoader } from './monacoTypes'
@@ -169,7 +169,6 @@ export async function ViteSlidevPlugin(
     }),
 
     createConfigPlugin(options),
-    createClientSetupPlugin(options),
     createMonacoTypesLoader(options),
     createFixPlugins(options),
 

packages/types/client.d.ts

@@ -55,6 +55,48 @@ declare module '#slidev/shiki' {
   export const shiki: Promise<ShikiHighlighterCore>
 }
 
+declare module '#slidev/setups/monaco' {
+  import type { MonacoSetup } from '@slidev/types'
+
+  const setups: MonacoSetup[]
+  export default setups
+}
+
+declare module '#slidev/setups/code-runners' {
+  import type { CodeRunnersSetup } from '@slidev/types'
+
+  const setups: CodeRunnersSetup[]
+  export default setups
+}
+
+declare module '#slidev/setups/mermaid' {
+  import type { MermaidSetup } from '@slidev/types'
+
+  const setups: MermaidSetup[]
+  export default setups
+}
+
+declare module '#slidev/setups/main' {
+  import type { AppSetup } from '@slidev/types'
+
+  const setups: AppSetup[]
+  export default setups
+}
+
+declare module '#slidev/setups/root' {
+  import type { RootSetup } from '@slidev/types'
+
+  const setups: RootSetup[]
+  export default setups
+}
+
+declare module '#slidev/setups/shortcuts' {
+  import type { ShortcutsSetup } from '@slidev/types'
+
+  const setups: ShortcutsSetup[]
+  export default setups
+}
+
 declare module '#slidev/styles' {
   // side-effects only
 }