@slidev/client 0.48.0-beta.15 → 0.48.0-beta.17

package/builtin/CodeBlockWrapper.vue

@@ -56,8 +56,12 @@ onUnmounted(() => {
   clicks!.unregister(id)
 })
 
+watchEffect(() => {
+  el.value?.classList.toggle('slidev-code-line-numbers', props.lines)
+})
+
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks || clicks.disabled || !props.ranges?.length)
     return
 
   const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
@@ -121,9 +125,12 @@ function copyCode() {
 
 <template>
   <div
-    ref="el" class="slidev-code-wrapper relative group" :class="{
+    ref="el"
+    class="slidev-code-wrapper relative group"
+    :class="{
       'slidev-code-line-numbers': props.lines,
-    }" :style="{
+    }"
+    :style="{
       'max-height': props.maxHeight,
       'overflow-y': props.maxHeight ? 'scroll' : undefined,
       '--start': props.startLine,

package/builtin/Monaco.vue

@@ -12,11 +12,10 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useEventListener } from '@vueuse/core'
 import type * as monaco from 'monaco-editor'
-import { decompressFromBase64 } from 'lz-string'
-import { isDark } from '../logic/dark'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { debounce } from '@antfu/utils'
+import lz from 'lz-string'
 import { makeId } from '../logic/utils'
 
 const props = withDefaults(defineProps<{
@@ -25,109 +24,127 @@ const props = withDefaults(defineProps<{
   lang?: string
   readonly?: boolean
   lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
-  height?: number | string
+  height?: number | string // Posible values: 'initial', 'auto', '100%', '200px', etc.
   editorOptions?: monaco.editor.IEditorOptions
+  ata?: boolean
 }>(), {
   codeLz: '',
   lang: 'typescript',
   readonly: false,
   lineNumbers: 'off',
-  height: 'auto',
+  height: 'initial',
+  ata: true,
 })
 
-const id = makeId()
-const code = ref(decompressFromBase64(props.codeLz))
-const diff = ref(props.diffLz ? decompressFromBase64(props.diffLz) : null)
-const lineHeight = +(getComputedStyle(document.body).getPropertyValue('--slidev-code-line-height') || '18').replace('px', '') || 18
-const editorHeight = ref(0)
-const calculatedHeight = computed(() => code.value.split(/\r?\n/g).length * lineHeight)
-const height = computed(() => {
-  return props.height === 'auto' ? `${Math.max(calculatedHeight.value, editorHeight.value) + 20}px` : props.height
-})
-
-const iframe = ref<HTMLIFrameElement>()
+const code = lz.decompressFromBase64(props.codeLz).trimEnd()
+const diff = props.diffLz && lz.decompressFromBase64(props.diffLz).trimEnd()
 
-const cssVars = [
-  '--slidev-code-font-size',
-  '--slidev-code-font-family',
-  '--slidev-code-background',
-  '--slidev-code-line-height',
-  '--slidev-code-padding',
-  '--slidev-code-margin',
-  '--slidev-code-radius',
-]
-
-function getStyleObject(el: Element) {
-  const object: Record<string, string> = {}
-  const style = getComputedStyle(el)
-  for (const v of cssVars)
-    object[v] = style.getPropertyValue(v)
-  return object
+const langMap: Record<string, string> = {
+  ts: 'typescript',
+  js: 'javascript',
 }
+const lang = langMap[props.lang] ?? props.lang
+const extMap: Record<string, string> = {
+  typescript: 'mts',
+  javascript: 'mjs',
+  ts: 'mts',
+  js: 'mjs',
+}
+const ext = extMap[props.lang] ?? props.lang
 
-onMounted(() => {
-  const frame = iframe.value!
-  frame.setAttribute('sandbox', [
-    'allow-forms',
-    'allow-modals',
-    'allow-pointer-lock',
-    'allow-popups',
-    'allow-same-origin',
-    'allow-scripts',
-    'allow-top-navigation-by-user-activation',
-  ].join(' '))
-
-  let src = __DEV__
-    ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/`
-    : import.meta.env.BASE_URL
-  src += `iframes/monaco/index.html?id=${id}&lineNumbers=${props.lineNumbers}&lang=${props.lang}`
-  if (diff.value)
-    src += '&diff=1'
-  frame.src = src
+const outer = ref<HTMLDivElement>()
+const container = ref<HTMLDivElement>()
 
-  frame.style.backgroundColor = 'transparent'
+const contentHeight = ref(0)
+const initialHeight = ref<number>()
+const height = computed(() => {
+  if (props.height === 'auto')
+    return `${contentHeight.value}px`
+  if (props.height === 'initial')
+    return `${initialHeight.value}px`
+  return props.height
 })
 
-function post(payload: any) {
-  iframe.value?.contentWindow?.postMessage(
-    JSON.stringify({
-      type: 'slidev-monaco',
-      data: payload,
-      id,
-    }),
-    location.origin,
-  )
-}
+onMounted(async () => {
+  // Lazy load monaco, so it will be bundled in async chunk
+  const { default: setup } = await import('../setup/monaco')
+  const { ata, monaco } = await setup()
+  const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+  const commonOptions = {
+    automaticLayout: true,
+    readOnly: props.readonly,
+    lineNumbers: props.lineNumbers,
+    minimap: { enabled: false },
+    overviewRulerBorder: false,
+    overviewRulerLanes: 0,
+    padding: { top: 10, bottom: 10 },
+    lineNumbersMinChars: 3,
+    bracketPairColorization: { enabled: false },
+    tabSize: 2,
+    fontSize: 11.5,
+    fontFamily: 'var(--slidev-code-font-family)',
+    scrollBeyondLastLine: false,
+    ...props.editorOptions,
+  } satisfies monaco.editor.IStandaloneEditorConstructionOptions & monaco.editor.IDiffEditorConstructionOptions
 
-useEventListener(window, 'message', ({ data: payload }) => {
-  if (payload.id !== id)
-    return
-  if (payload.type === 'slidev-monaco-loaded') {
-    if (iframe.value) {
-      post({
-        code: code.value,
-        diff: diff.value,
-        lang: props.lang,
-        readonly: props.readonly,
-        lineNumbers: props.lineNumbers,
-        editorOptions: props.editorOptions,
-        dark: isDark.value,
-        style: Object.entries(getStyleObject(iframe.value)).map(([k, v]) => `${k}: ${v};`).join(''),
-      })
+  let editableEditor: monaco.editor.IStandaloneCodeEditor
+  if (diff) {
+    const diffModel = monaco.editor.createModel(diff, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+    const editor = monaco.editor.createDiffEditor(container.value!, {
+      renderOverviewRuler: false,
+      ...commonOptions,
+    })
+    editor.setModel({
+      original: model,
+      modified: diffModel,
+    })
+    const originalEditor = editor.getOriginalEditor()
+    const modifiedEditor = editor.getModifiedEditor()
+    const onContentSizeChange = () => {
+      const newHeight = Math.max(originalEditor.getContentHeight(), modifiedEditor.getContentHeight()) + 4
+      initialHeight.value ??= newHeight
+      contentHeight.value = newHeight
+      nextTick(() => editor.layout())
+    }
+    originalEditor.onDidContentSizeChange(onContentSizeChange)
+    modifiedEditor.onDidContentSizeChange(onContentSizeChange)
+    editableEditor = modifiedEditor
+  }
+  else {
+    const editor = monaco.editor.create(container.value!, {
+      model,
+      lineDecorationsWidth: 0,
+      ...commonOptions,
+    })
+    editor.onDidContentSizeChange((e) => {
+      const newHeight = e.contentHeight + 4
+      initialHeight.value ??= newHeight
+      contentHeight.value = newHeight
+      nextTick(() => editableEditor.layout())
+    })
+    editableEditor = editor
+  }
+  if (props.ata) {
+    ata(editableEditor.getValue())
+    editableEditor.onDidChangeModelContent(debounce(1000, () => {
+      ata(editableEditor.getValue())
+    }))
+  }
+  const originalLayoutContentWidget = editableEditor.layoutContentWidget.bind(editableEditor)
+  editableEditor.layoutContentWidget = (widget: any) => {
+    originalLayoutContentWidget(widget)
+    const id = widget.getId()
+    if (id === 'editor.contrib.resizableContentHoverWidget') {
+      widget._resizableNode.domNode.style.transform = widget._positionPreference === 1
+        ? /* ABOVE */ `translateY(calc(100% * (var(--slidev-slide-scale) - 1)))`
+        : /* BELOW */ `` // reset
     }
-    return
   }
-  if (payload.type !== 'slidev-monaco')
-    return
-  if (payload.data?.height)
-    editorHeight.value = payload.data?.height
-  if (payload?.data?.code && code.value !== payload.data.code)
-    code.value = payload.data.code
-  if (payload?.data?.diff && diff.value !== payload.data.diff)
-    diff.value = payload.data.diff
 })
 </script>
 
 <template>
-  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }" />
+  <div ref="outer" class="slidev-monaco-container" :style="{ height }">
+    <div ref="container" class="absolute inset-0.5" />
+  </div>
 </template>

package/builtin/ShikiMagicMove.vue

@@ -2,7 +2,7 @@
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
-import { decompressFromBase64 } from 'lz-string'
+import lz from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId } from '../logic/utils'
 
@@ -13,7 +13,7 @@ const props = defineProps<{
   at?: string | number
 }>()
 
-const steps = JSON.parse(decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
+const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
 const { $clicksContext: clicks, $scale: scale } = useSlideContext()
 const id = makeId()
 const index = ref(0)

package/builtin/Tweet.vue

@@ -7,9 +7,8 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
-import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -20,11 +19,10 @@ const props = defineProps<{
 
 const tweet = ref<HTMLElement | null>()
 
-const vm = getCurrentInstance()!
 const loaded = ref(false)
 const tweetNotFound = ref(false)
 
-async function create() {
+onMounted(async () => {
   // @ts-expect-error global
   const element = await window.twttr.widgets.createTweet(
     props.id.toString(),
@@ -38,13 +36,7 @@ async function create() {
   loaded.value = true
   if (element === undefined)
     tweetNotFound.value = true
-}
-
-// @ts-expect-error global
-if (window?.twttr?.widgets)
-  onMounted(create)
-else
-  useTweetScript(vm, create)
+})
 </script>
 
 <template>

package/internals/PrintContainer.vue

@@ -50,6 +50,6 @@ provideLocal(injectionSlideScale, scale)
 }
 
 .print-slide-container {
-  @apply relative overflow-hidden break-after-page;
+  @apply relative overflow-hidden break-after-page translate-0;
 }
 </style>

package/logic/nav.ts

@@ -135,16 +135,13 @@ export function go(page: number | string, clicks?: number) {
 export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
   const swipeBegin = ref(0)
   const { direction, distanceX, distanceY } = usePointerSwipe(root, {
-    onSwipeStart(e) {
-      if (e.pointerType !== 'touch')
-        return
+    pointerTypes: ['touch'],
+    onSwipeStart() {
       if (isDrawing.value)
         return
       swipeBegin.value = timestamp()
     },
-    onSwipeEnd(e) {
-      if (e.pointerType !== 'touch')
-        return
+    onSwipeEnd() {
       if (!swipeBegin.value)
         return
       if (isDrawing.value)

package/modules/mermaid.ts

@@ -1,5 +1,5 @@
 import mermaid from 'mermaid/dist/mermaid.esm.mjs'
-import { decompressFromBase64 } from 'lz-string'
+import lz from 'lz-string'
 import { clearUndefined } from '@antfu/utils'
 import setupMermaid from '../setup/mermaid'
 import { makeId } from '../logic/utils'
@@ -20,7 +20,7 @@ export async function renderMermaid(lzEncoded: string, options: any) {
     ...clearUndefined(setupMermaid() || {}),
     ...clearUndefined(options),
   })
-  const code = decompressFromBase64(lzEncoded)
+  const code = lz.decompressFromBase64(lzEncoded)
   const id = makeId()
   const { svg } = await mermaid.render(id, code)
   cache.set(key, svg)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.15",
+  "version": "0.48.0-beta.17",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -29,8 +29,10 @@
     "@antfu/utils": "^0.7.7",
     "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/ph": "^1.1.11",
+    "@shikijs/monaco": "^1.1.7",
     "@shikijs/vitepress-twoslash": "^1.1.7",
     "@slidev/rough-notation": "^0.1.0",
+    "@typescript/ata": "^0.9.4",
     "@unhead/vue": "^1.8.10",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.8.0",
@@ -46,16 +48,18 @@
     "katex": "^0.16.9",
     "lz-string": "^1.5.0",
     "mermaid": "^10.8.0",
-    "monaco-editor": "^0.37.1",
+    "monaco-editor": "^0.46.0",
+    "nanoid": "^5.0.6",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.8",
+    "shiki": "^1.1.7",
     "shiki-magic-move": "^0.1.0",
     "unocss": "^0.58.5",
     "vue": "^3.4.20",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.15",
-    "@slidev/parser": "0.48.0-beta.15"
+    "@slidev/parser": "0.48.0-beta.17",
+    "@slidev/types": "0.48.0-beta.17"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/setup/monaco.ts

@@ -1,52 +1,114 @@
-import { getCurrentInstance, onMounted } from 'vue'
-import * as monaco from 'monaco-editor'
 import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
+import * as monaco from 'monaco-editor'
+import { watchEffect } from 'vue'
+import { setupTypeAcquisition } from '@typescript/ata'
+import ts from 'typescript'
+
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+// @ts-expect-error missing types
+import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
+
+// @ts-expect-error missing types
+import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
+
+// @ts-expect-error missing types
+import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
+
+import { isDark } from '../logic/dark'
+import configs from '#slidev/configs'
 
 /* __imports__ */
+window.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'json')
+      return new JsonWorker()
+    if (label === 'css' || label === 'scss' || label === 'less')
+      return new CssWorker()
+    if (label === 'html' || label === 'handlebars' || label === 'razor')
+      return new HtmlWorker()
+    if (label === 'typescript' || label === 'javascript')
+      return new TsWorker()
+    return new EditorWorker()
+  },
+}
+
+class ContextViewService2 extends ContextViewService {
+  showContextView(...args: any) {
+    super.showContextView(...args)
+    // @ts-expect-error missing types
+    const contextView = this.contextView.view as HTMLElement
+    contextView.style.left = `calc(${contextView.style.left} / var(--slidev-slide-scale))`
+    contextView.style.top = `calc(${contextView.style.top} / var(--slidev-slide-scale))`
+    // Reset the scale to 1. Otherwise, the sub-menu will be in the wrong position.
+    contextView.style.transform = `scale(calc(1 / var(--slidev-slide-scale)))`
+    contextView.style.transformOrigin = '0 0'
+  }
+}
 
 const setup = createSingletonPromise(async () => {
-  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
-    noUnusedLocals: false,
-    noUnusedParameters: false,
-    allowUnreachableCode: true,
-    allowUnusedLabels: true,
+  // Initialize services first, otherwise we can't override them.
+  StandaloneServices.initialize({
+    contextViewService: new SyncDescriptor(ContextViewService2, [], true),
+  })
+
+  const defaults = monaco.languages.typescript.typescriptDefaults
+
+  defaults.setCompilerOptions({
+    ...defaults.getCompilerOptions(),
     strict: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.ESNext,
   })
 
-  await Promise.all([
-    // load workers
-    (async () => {
-      const [
-        { default: EditorWorker },
-        { default: JsonWorker },
-        { default: CssWorker },
-        { default: HtmlWorker },
-        { default: TsWorker },
-      ] = await Promise.all([
-        import('monaco-editor/esm/vs/editor/editor.worker?worker'),
-        import('monaco-editor/esm/vs/language/json/json.worker?worker'),
-        import('monaco-editor/esm/vs/language/css/css.worker?worker'),
-        import('monaco-editor/esm/vs/language/html/html.worker?worker'),
-        import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
-      ])
-
-      window.MonacoEnvironment = {
-        getWorker(_: any, label: string) {
-          if (label === 'json')
-            return new JsonWorker()
-          if (label === 'css' || label === 'scss' || label === 'less')
-            return new CssWorker()
-          if (label === 'html' || label === 'handlebars' || label === 'razor')
-            return new HtmlWorker()
-          if (label === 'typescript' || label === 'javascript')
-            return new TsWorker()
-          return new EditorWorker()
+  // Load types from server
+  import('#slidev/monaco-types')
+
+  const ata = configs.monacoTypesSource === 'cdn'
+    ? setupTypeAcquisition({
+      projectName: 'TypeScript Playground',
+      typescript: ts as any, // Version mismatch. No problem found so far.
+      logger: console,
+      delegate: {
+        receivedFile: (code: string, path: string) => {
+          defaults.addExtraLib(code, `file://${path}`)
+          const uri = monaco.Uri.file(path)
+          if (monaco.editor.getModel(uri) === null)
+            monaco.editor.createModel(code, 'javascript', uri)
+        },
+        progress: (downloaded: number, total: number) => {
+          // eslint-disable-next-line no-console
+          console.debug(`[Typescript ATA] ${downloaded} / ${total}`)
         },
-      }
-    })(),
-  ])
+      },
+    })
+    : () => { }
+
+  // monaco.languages.register({ id: 'vue' })
+  monaco.languages.register({ id: 'typescript' })
+  monaco.languages.register({ id: 'javascript' })
+
+  const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
+  const highlighter = await shiki
+
+  // Use Shiki to highlight Monaco
+  shikiToMonaco(highlighter, monaco)
+
+  if (typeof themes === 'string') {
+    monaco.editor.setTheme(themes)
+  }
+  else {
+    watchEffect(() => {
+      monaco.editor.setTheme(isDark.value
+        ? themes.dark || 'vitesse-dark'
+        : themes.light || 'vitesse-light')
+    })
+  }
 
   // @ts-expect-error injected in runtime
   // eslint-disable-next-line unused-imports/no-unused-vars
@@ -56,15 +118,11 @@ const setup = createSingletonPromise(async () => {
 
   /* __async_injections__ */
 
-  if (getCurrentInstance())
-    await new Promise<void>(resolve => onMounted(resolve))
-
   return {
     monaco,
+    ata,
     ...injection_return,
   }
 })
 
 export default setup
-
-setup()

package/shim.d.ts

@@ -1,5 +1,5 @@
-// with unplugin-vue-markdown, markdowns can be treat as Vue components
 declare module '*.md' {
+  // with unplugin-vue-markdown, markdowns can be treat as Vue components
   import type { ComponentOptions } from 'vue'
 
   const component: ComponentOptions

package/styles/monaco.css

@@ -0,0 +1,27 @@
+div[widgetid='messageoverlay'] {
+  transform: translateY(calc(100% * (var(--slidev-slide-scale) - 1)));
+}
+
+.slidev-monaco-container {
+  position: relative;
+  margin: var(--slidev-code-margin);
+  padding: var(--slidev-code-padding);
+  line-height: var(--slidev-code-line-height);
+  border-radius: var(--slidev-code-radius);
+  background: var(--slidev-code-background);
+}
+
+.slidev-monaco-container .monaco-editor {
+  --monaco-monospace-font: var(--slidev-code-font-family);
+  --vscode-editor-background: var(--slidev-code-background);
+  --vscode-editorGutter-background: var(--slidev-code-background);
+}
+
+/** Revert styles */
+.slidev-monaco-container .monaco-editor a {
+  border-bottom: none;
+}
+
+.slidev-monaco-container .monaco-editor a:hover {
+  border-bottom: none;
+}

package/composables/useTweetScript.ts

@@ -1,17 +0,0 @@
-import { createSharedComposable, useScriptTag } from '@vueuse/core'
-import type { ComponentInternalInstance } from 'vue'
-import { onMounted } from 'vue'
-
-export const useTweetScript = createSharedComposable(
-  (vm: ComponentInternalInstance, create: () => void) =>
-    useScriptTag(
-      'https://platform.twitter.com/widgets.js',
-      () => {
-        if (vm.isMounted)
-          create()
-        else
-          onMounted(create, vm)
-      },
-      { async: true },
-    ),
-)

package/iframes/monaco/index.css

@@ -1,28 +0,0 @@
-html,
-body,
-#container {
-  padding: 0;
-  margin: 0;
-  background: var(--slidev-code-background);
-  width: 100%;
-  height: 200%;
-}
-
-#container {
-  padding: var(--slidev-code-padding);
-  margin: var(--slidev-code-margin);
-  border-radius: var(--slidev-code-radius);
-}
-
-.monaco-editor .monaco-hover {
-  border-radius: var(--slidev-code-radius);
-  overflow: hidden;
-  border: none;
-  outline: none;
-}
-
-.monaco-editor .lines-content,
-.monaco-editor .view-line,
-.monaco-editor .view-lines {
-  user-select: none;
-}

package/iframes/monaco/index.html

@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-  <div id="container"></div>
-  <script type="module" src="./index.ts"></script>
-</body>
-</html>

package/iframes/monaco/index.ts

@@ -1,260 +0,0 @@
-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/monaco-types'
-
-const url = new URL(location.href)
-const props = {
-  id: url.searchParams.get('id'),
-  code: '',
-  diff: '',
-  lang: url.searchParams.get('lang') ?? 'typescript',
-  readonly: false,
-  lineNumbers: url.searchParams.get('lineNumbers') ?? 'off',
-  dark: false,
-  style: '',
-  editorOptions: {},
-}
-
-const styleObject = document.createElement('style')
-let originalEditor: monaco.editor.IStandaloneCodeEditor
-let modifiedEditor: monaco.editor.IStandaloneCodeEditor
-let format: () => void = () => { }
-let update: () => void = () => { }
-
-document.body.appendChild(styleObject)
-
-function lang() {
-  switch (props.lang) {
-    case 'ts':
-    case 'tsx':
-      return 'typescript'
-    case 'jsx':
-    case 'js':
-      return 'javascript'
-    default:
-      return props.lang
-  }
-}
-
-function ext() {
-  switch (lang()) {
-    case 'typescript':
-      return 'ts'
-    case 'javascript':
-      return 'js'
-    default:
-      return lang()
-  }
-}
-
-function post(data: any, type = 'slidev-monaco') {
-  if (window.parent === window)
-    return
-
-  window.parent.postMessage(
-    {
-      type,
-      id: props.id,
-      data,
-    },
-    location.origin,
-  )
-}
-
-async function start() {
-  const { monaco, theme = {}, editorOptions = {} } = await setupMonaco()
-
-  const style = getComputedStyle(document.documentElement)
-  const container = document.getElementById('container')!
-
-  const model = monaco.editor.createModel(
-    props.code,
-    lang(),
-    monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`),
-  )
-
-  if (url.searchParams.get('diff')) {
-    // Diff editor
-    const diffModel = monaco.editor.createModel(
-      props.diff,
-      lang(),
-      monaco.Uri.parse(`file:///root/${Date.now()}.${ext()}`),
-    )
-    const monacoEditor = monaco.editor.createDiffEditor(container, {
-      fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
-      fontFamily: style.getPropertyValue('--slidev-code-font-family'),
-      lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
-      lineDecorationsWidth: 0,
-      lineNumbersMinChars: 0,
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: 0,
-      automaticLayout: true,
-      readOnly: props.readonly,
-      theme: 'vitesse-dark',
-      lineNumbers: props.lineNumbers as any,
-      glyphMargin: false,
-      scrollbar: {
-        useShadows: false,
-        vertical: 'hidden',
-        horizontal: 'hidden',
-      },
-      overviewRulerLanes: 0,
-      minimap: { enabled: false },
-      enableSplitViewResizing: false,
-      renderOverviewRuler: false,
-      // renderSideBySide: false,
-      ...editorOptions,
-    })
-    monacoEditor.setModel({
-      original: model,
-      modified: diffModel,
-    })
-    originalEditor = monacoEditor.getOriginalEditor()
-    modifiedEditor = monacoEditor.getModifiedEditor()
-
-    format = async () => {
-      model.setValue((await formatCode(props.code, lang())).trim())
-      diffModel.setValue((await formatCode(props.diff, lang())).trim())
-    }
-
-    // ctrl+s to format
-    originalEditor.onKeyDown((e) => {
-      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-        e.preventDefault()
-        format()
-      }
-    })
-    modifiedEditor.onKeyDown((e) => {
-      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-        e.preventDefault()
-        format()
-      }
-    })
-
-    update = () => {
-      monaco.editor.setTheme(props.dark
-        ? (theme.dark || 'vitesse-dark')
-        : (theme.light || 'vitesse-light'))
-      styleObject.innerHTML = `:root { ${props.style} }`
-
-      if (originalEditor.getValue().toString() !== props.code) {
-        const selection = originalEditor.getSelection()
-        originalEditor.setValue(props.code)
-        if (selection)
-          originalEditor.setSelection(selection)
-      }
-      originalEditor.updateOptions(props.editorOptions)
-
-      if (modifiedEditor.getValue().toString() !== props.diff) {
-        const selection = modifiedEditor.getSelection()
-        modifiedEditor.setValue(props.diff)
-        if (selection)
-          modifiedEditor.setSelection(selection)
-      }
-      modifiedEditor.updateOptions(props.editorOptions)
-    }
-
-    diffModel.onDidChangeContent(() => {
-      onCodeChange(diffModel.getValue().toString())
-    })
-
-    function onCodeChange(diff: string) {
-      props.diff = diff
-      post({ diff })
-    }
-  }
-  else {
-    // Normal editor
-    originalEditor = monaco.editor.create(container, {
-      model,
-      tabSize: 2,
-      insertSpaces: true,
-      detectIndentation: false,
-      folding: false,
-      fontSize: +style.getPropertyValue('--slidev-code-font-size').replace(/px/g, ''),
-      fontFamily: style.getPropertyValue('--slidev-code-font-family'),
-      lineHeight: +style.getPropertyValue('--slidev-code-line-height').replace(/px/g, ''),
-      lineDecorationsWidth: 0,
-      lineNumbersMinChars: 0,
-      scrollBeyondLastLine: false,
-      scrollBeyondLastColumn: 0,
-      automaticLayout: true,
-      readOnly: props.readonly,
-      theme: 'vitesse-dark',
-      lineNumbers: props.lineNumbers as any,
-      glyphMargin: false,
-      scrollbar: {
-        useShadows: false,
-        vertical: 'hidden',
-        horizontal: 'hidden',
-      },
-      overviewRulerLanes: 0,
-      minimap: { enabled: false },
-      ...editorOptions,
-    })
-
-    format = async () => {
-      model.setValue((await formatCode(props.code, lang())).trim())
-    }
-
-    // ctrl+s to format
-    originalEditor.onKeyDown((e) => {
-      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
-        e.preventDefault()
-        format()
-      }
-    })
-
-    update = () => {
-      monaco.editor.setTheme(props.dark
-        ? (theme.dark || 'vitesse-dark')
-        : (theme.light || 'vitesse-light'))
-      styleObject.innerHTML = `:root { ${props.style} }`
-
-      if (originalEditor.getValue().toString() !== props.code) {
-        const selection = originalEditor.getSelection()
-        originalEditor.setValue(props.code)
-        if (selection)
-          originalEditor.setSelection(selection)
-      }
-      originalEditor.updateOptions(props.editorOptions)
-    }
-  }
-
-  originalEditor.onDidContentSizeChange(() => {
-    post({ height: Math.max(originalEditor.getContentHeight(), modifiedEditor?.getContentHeight() ?? 0) })
-  })
-
-  model.onDidChangeContent(() => {
-    onCodeChange(model.getValue().toString())
-  })
-
-  function onCodeChange(code: string) {
-    props.code = code
-    post({ code })
-  }
-
-  update()
-
-  post({}, 'slidev-monaco-loaded')
-}
-
-window.addEventListener('message', (payload) => {
-  if (payload.source === window)
-    return
-  if (payload.origin !== location.origin)
-    return
-  if (typeof payload.data !== 'string')
-    return
-  const { type, data, id } = JSON.parse(payload.data)
-  if (type === 'slidev-monaco' && id === props.id) {
-    Object.assign(props, data)
-    update()
-  }
-})
-
-start()