feat: add runnable monaco editor (#219) (#1273)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Author: kermanx

demo/starter/slides.md

@@ -562,6 +562,10 @@ hide: false
 
 # Monaco Editor
 
+Slidev provides built-in Moanco Editor support.
+
+Add `{monaco}` to the code block to turn it into an editor:
+
 ```ts {monaco}
 import { ref } from 'vue'
 import hello from './external'
@@ -570,6 +574,18 @@ const code = ref('const a = 1')
 hello()
 ```
 
+Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
+
+```ts {monaco-run}
+function fibonacci(n: number): number {
+  return n <= 1
+    ? n
+    : fibonacci(n - 1) + fibonacci(n - 2) // you know, this is NOT the best way to do it :P
+}
+
+console.log(Array.from({ length: 10 }, (_, i) => fibonacci(i + 1)))
+```
+
 ---
 layout: center
 class: text-center

demo/starter/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 
 export default defineConfig({
-  plugins: [
-  ],
+  plugins: [],
 })

demo/vue-runner/package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "slidev build",
+    "dev": "nodemon -w '../../packages/slidev/dist/*.mjs' --exec \"slidev ./slides.md --open=false --log=info --inspect\"",
+    "export": "slidev export",
+    "export-notes": "slidev export-notes"
+  },
+  "devDependencies": {
+    "@slidev/cli": "workspace:*",
+    "@slidev/theme-default": "^0.25.0",
+    "@slidev/theme-seriph": "^0.25.0",
+    "@vue/compiler-sfc": "^3.4.21",
+    "nodemon": "^3.1.0",
+    "vue": "^3.4.21"
+  }
+}

demo/vue-runner/setup/code-runners.ts

@@ -0,0 +1,38 @@
+/* eslint-disable no-new-func */
+import { defineCodeRunnersSetup } from '@slidev/types'
+
+export default defineCodeRunnersSetup(() => {
+  return {
+    // Support Vue SFC
+    async vue(code) {
+      const Vue = await import('vue')
+      const { parse, compileScript } = await import('@vue/compiler-sfc')
+
+      // Compile the script, note this demo does not handle Vue styles
+      const sfc = parse(code)
+      let scripts = compileScript(sfc.descriptor, {
+        id: sfc.descriptor.filename,
+        genDefaultAs: '__Component',
+        inlineTemplate: true,
+      }).content
+
+      // Replace Vue imports to object destructuring
+      // Only for simple demo, it doesn't work with imports from other packages
+      scripts = scripts.replace(/import ({[^}]+}) from ['"]vue['"]/g, (_, imports) => `const ${imports.replace(/\sas\s/g, ':')} = Vue`)
+      scripts += '\nreturn __Component'
+
+      // Create function to evaluate the script and get the component
+      // Note this is not sandboxed, it's NOT secure.
+      const component = new Function(`return (Vue) => {${scripts}}`)()(Vue)
+
+      // Mount the component
+      const app = Vue.createApp(component)
+      const el = document.createElement('div')
+      app.mount(el)
+
+      return {
+        element: el,
+      }
+    },
+  }
+})

demo/vue-runner/setup/shiki.ts

@@ -0,0 +1,17 @@
+import { defineShikiSetup } from '@slidev/types'
+
+export default defineShikiSetup(() => {
+  return {
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+    // Explicitly Vue for Monaco Highlighting
+    langs: [
+      'ts',
+      'js',
+      'vue',
+      'html',
+    ],
+  }
+})

demo/vue-runner/slides.md

@@ -0,0 +1,36 @@
+---
+layout: default
+---
+
+# Simple Vue SFC Runner
+
+<!-- eslint-skip -->
+
+```vue {monaco-run}
+<script setup>
+import { computed, ref } from 'vue'
+const counter = ref(1)
+const doubled = computed(() => counter.value * 2)
+function inc() { counter.value++ }
+</script>
+
+<template>
+  <div class="select-none text-lg flex gap-4 items-center">
+    <span class="text-gray text-lg">
+      <span class="text-orange">{{ counter }}</span>
+      * 2 =
+      <span class="text-green">{{ doubled }}</span>
+    </span>
+    <button class="border border-main p2 rounded" @click="inc">+1</button>
+    <button class="border border-main p2 rounded" @click="counter -= 1">-1</button>
+  </div>
+</template>
+```
+
+---
+
+This is a demo to prove the extensibility of Slidev Code Runners.
+
+Refer to `./setup/monaco-runner.ts` for the implementation.
+
+Note that there is a lot of edge cases that this demo is not handling. Extra work is needed to make it production ready.

docs/.vitepress/config.ts

@@ -145,6 +145,10 @@ const Customizations: (DefaultTheme.NavItemWithLink | DefaultTheme.NavItemChildr
     text: 'Configure Shortcuts',
     link: '/custom/config-shortcuts',
   },
+  {
+    text: 'Configure Code Runners',
+    link: '/custom/config-code-runners',
+  },
   {
     text: 'Vue Global Context',
     link: '/custom/vue-context',

docs/custom/config-code-runners.md

@@ -0,0 +1,31 @@
+# Configure Code Runners
+
+<Environment type="client" />
+
+Define code runners for custom languages in your Monaco Editor.
+
+By default, JavaScript, TypeScript runners are supported built-in. They runs in the browser with **without** sandbox environment. If you want to more advanced integrations, you might want to provide your own code runners that sends the code to a remote server, runs in a Web Worker, or anything, up to you.
+
+Create `./setup/code-runners.ts` with the following content:
+
+```ts
+import { defineCodeRunnersSetup } from '@slidev/types'
+
+export default defineCodeRunnersSetup(() => {
+  return {
+    async python(code, ctx) {
+      // Somehow execute the code and return the result
+      const result = await executePythonCodeRemotely(code)
+      return {
+        text: result
+      }
+    },
+    html(code, ctx) {
+      return {
+        html: sanitizeHtml(code)
+      }
+    },
+    // or other languages, key is the language id
+  }
+})
+```

docs/custom/config-monaco.md

@@ -108,3 +108,7 @@ Since v0.48.0, the Monaco editor is enabled by default and only be bundled when
 monaco: false # can also be `dev` or `build` tp conditionally enable it
 ---
 ```
+
+## Configure Code Runners
+
+To configure how the Monaco Runner runs the code, or to add support for custom languages, please reference to [Configure Code Runners](/custom/config-code-runners).

docs/custom/index.md

@@ -42,7 +42,7 @@ highlighter: shiki
 # show line numbers in code blocks
 lineNumbers: false
 # enable monaco editor, can be boolean, 'dev' or 'build'
-monaco: dev
+monaco: true
 # Where to load monaco types from, can be 'cdn', 'local' or 'none'
 monacoTypesSource: local
 # explicitly specify extra local packages to import the types for