fix(monaco): type inference

Author: antfu

packages/client/builtin/Monaco.vue

@@ -41,7 +41,7 @@ const props = defineProps({
 })
 
 const id = nanoid()
-const code = ref(decode(props.code))
+const code = ref(decode(props.code).trimEnd())
 const height = computed(() => props.height === 'auto' ? `${code.value.split(/\r?\n/g).length * 18 + 20}px` : props.height)
 const isReady = ref(false)
 

packages/client/iframes/monaco/index.ts

@@ -1,8 +1,10 @@
+import '/@slidev/styles'
+import './index.css'
+
 import type * as monaco from 'monaco-editor'
 import { formatCode } from '../../setup/prettier'
 import setupMonaco from '../../setup/monaco'
-import '/@slidev/styles'
-import './index.css'
+import '/@slidev/monaco-types'
 
 const props = {
   id: Math.random().toString(),

packages/parser/src/core.ts

@@ -1,5 +1,5 @@
 import YAML from 'js-yaml'
-import { isObject, objectPick, range, uniq } from '@antfu/utils'
+import { isObject, isTruthy, objectPick, range, uniq } from '@antfu/utils'
 import { SlideInfo, SlidevConfig, SlidevMarkdown } from '@slidev/types'
 
 export function stringify(data: SlidevMarkdown) {
@@ -185,3 +185,22 @@ export function parseRangeString(total: number, rangeStr?: string) {
 
   return uniq(pages).filter(i => i <= total).sort((a, b) => a - b)
 }
+
+// types auto discovery for TypeScript monaco
+export function scanMonacoModules(md: string) {
+  const typeModules = new Set<string>()
+
+  md.replace(/^```(\w+?)\s*{monaco([\w:,-]*)}[\s\n]*([\s\S]+?)^```/mg, (full, lang = 'ts', options: string, code: string) => {
+    options = options || ''
+    lang = lang.trim()
+    if (lang === 'ts' || lang === 'typescript') {
+      Array.from(code.matchAll(/\s+from\s+(["'])([\/\w@-]+)\1/g))
+        .map(i => i[2])
+        .filter(isTruthy)
+        .map(i => typeModules.add(i))
+    }
+    return ''
+  })
+
+  return Array.from(typeModules)
+}

packages/slidev/node/plugins/loaders.ts

@@ -201,6 +201,10 @@ export function createSlidesLoader(
         if (id === '/@slidev/styles')
           return generateUserStyles()
 
+        // styles
+        if (id === '/@slidev/monaco-types')
+          return generateMonacoTypes()
+
         // configs
         if (id === '/@slidev/configs')
           return generateConfigs()
@@ -315,6 +319,10 @@ export function createSlidesLoader(
     return imports.join('\n')
   }
 
+  async function generateMonacoTypes() {
+    return `void 0; ${parser.scanMonacoModules(data.raw).map(i => `import('/@slidev-monaco-types/${i}')`).join('\n')}`
+  }
+
   async function generateLayouts() {
     const imports: string[] = []
     const layouts = objectMap(

packages/slidev/node/plugins/markdown.ts

@@ -1,11 +1,11 @@
 import Markdown from 'vite-plugin-md'
-// @ts-expect-error
-import mila from 'markdown-it-link-attributes'
 import { Plugin } from 'vite'
 import type { ShikiOptions } from '@slidev/types'
 import type MarkdownIt from 'markdown-it'
 import base64 from 'js-base64'
-import { isTruthy, slash } from '@antfu/utils'
+import { slash } from '@antfu/utils'
+// @ts-expect-error
+import mila from 'markdown-it-link-attributes'
 // @ts-expect-error
 import Katex from 'markdown-it-katex'
 import { ResolvedSlidevOptions, SlidevPluginOptions } from '../options'
@@ -82,26 +82,14 @@ export async function createMarkdownPlugin(
 }
 
 export function transformMarkdownMonaco(md: string) {
-  const typeModules = new Set<string>()
-
   // transform monaco
   md = md.replace(/^```(\w+?)\s*{monaco([\w:,-]*)}[\s\n]*([\s\S]+?)^```/mg, (full, lang = 'ts', options: string, code: string) => {
     options = options || ''
     lang = lang.trim()
-    if (lang === 'ts' || lang === 'typescript') {
-      Array.from(code.matchAll(/\s+from\s+(["'])([\/\w@-]+)\1/g))
-        .map(i => i[2])
-        .filter(isTruthy)
-        .map(i => typeModules.add(i))
-    }
     const encoded = base64.encode(code, true)
     return `<Monaco :code="'${encoded}'" lang="${lang}" :readonly="${options.includes('readonly')}" />`
   })
 
-  // types auto discovery for TypeScript monaco
-  if (typeModules.size)
-    md += `\n<script setup>\n${Array.from(typeModules).map(i => `import('/@slidev-monaco-types/${i}')`).join('\n')}\n</script>\n`
-
   return md
 }