feat: support async output in code runner (#1685)

Author: kermanx

packages/client/internals/CodeRunner.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { debounce, toArray } from '@antfu/utils'
 import { useVModel } from '@vueuse/core'
-import type { CodeRunnerOutput, RawAtValue } from '@slidev/types'
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch, watchSyncEffect } from 'vue'
+import type { CodeRunnerOutputs, RawAtValue } from '@slidev/types'
+import { computed, onMounted, onUnmounted, ref, shallowRef, toValue, watch, watchSyncEffect } from 'vue'
 import { useSlideContext } from '../context'
 import setupCodeRunners from '../setup/code-runners'
 import { useNav } from '../composables/useNav'
@@ -31,7 +31,7 @@ const disabled = computed(() => !['slide', 'presenter'].includes($renderContext.
 
 const autorun = isPrintMode.value ? 'once' : props.autorun
 const isRunning = ref(autorun)
-const outputs = shallowRef<CodeRunnerOutput[]>()
+const outputs = shallowRef<CodeRunnerOutputs>()
 const runCount = ref(0)
 const highlightFn = ref<(code: string, lang: string) => string>()
 
@@ -64,7 +64,7 @@ const triggerRun = debounce(200, async () => {
     isRunning.value = true
   }, 500)
 
-  outputs.value = toArray(await run(code.value, props.lang, props.runnerOptions ?? {}))
+  outputs.value = await run(code.value, props.lang, props.runnerOptions ?? {})
   runCount.value += 1
   isRunning.value = false
 
@@ -90,11 +90,11 @@ else if (autorun)
     <div v-else-if="isRunning" class="text-sm text-center opacity-50">
       Running...
     </div>
-    <div v-else-if="!outputs?.length" class="text-sm text-center opacity-50">
+    <div v-else-if="!outputs" class="text-sm text-center opacity-50">
       Click the play button to run the code
     </div>
     <div v-else :key="`run-${runCount}`" class="slidev-runner-output">
-      <template v-for="output, _idx1 of outputs" :key="_idx1">
+      <template v-for="output, _idx1 of toArray(toValue(outputs))" :key="_idx1">
         <div v-if="'html' in output" v-html="output.html" />
         <div v-else-if="'error' in output" class="text-red-500">
           {{ output.error }}

packages/client/setup/code-runners.ts

@@ -2,6 +2,7 @@ import { createSingletonPromise } from '@antfu/utils'
 import type { CodeRunner, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs } from '@slidev/types'
 import type { CodeToHastOptions } from 'shiki'
 import type ts from 'typescript'
+import { ref } from 'vue'
 import { isDark } from '../logic/dark'
 import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
@@ -62,32 +63,32 @@ export default createSingletonPromise(async () => {
 })
 
 // Ported from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/sidebar/runtime.ts
-async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
-  const allLogs: CodeRunnerOutput[] = []
-
-  const replace = {} as any
-  const logger = function (...objs: any[]) {
-    allLogs.push(objs.map(printObject))
-  }
-  replace.info = replace.log = replace.debug = replace.warn = replace.error = logger
-  replace.clear = () => allLogs.length = 0
-  const vmConsole = Object.assign({}, console, replace)
+function runJavaScript(code: string): CodeRunnerOutputs {
+  const result = ref<CodeRunnerOutput[]>([])
+
+  const onError = (error: any) => result.value.push({ error: String(error) })
+  const logger = (...objs: any[]) => result.value.push(objs.map(printObject))
+  const vmConsole = Object.assign({}, console)
+  vmConsole.info = vmConsole.log = vmConsole.debug = vmConsole.warn = vmConsole.error = logger
+  vmConsole.clear = () => result.value.length = 0
   try {
-    const safeJS = `return async (console, __slidev_import) => {
-      ${sanitizeJS(code)}
+    const safeJS = `return async (console, __slidev_import, __slidev_on_error) => {
+      try {
+        ${sanitizeJS(code)}
+      } catch (e) {
+        __slidev_on_error(e)
+      }
     }`
     // eslint-disable-next-line no-new-func
-    await (new Function(safeJS)())(vmConsole, (specifier: string) => {
+    ;(new Function(safeJS)())(vmConsole, (specifier: string) => {
       const mod = deps[specifier]
       if (!mod)
         throw new Error(`Module not found: ${specifier}.\nAvailable modules: ${Object.keys(deps).join(', ')}. Please refer to https://sli.dev/custom/config-code-runners#additional-runner-dependencies`)
       return mod
-    })
+    }, onError)
   }
   catch (error) {
-    return {
-      error: String(error),
-    }
+    onError(error)
   }
 
   function printObject(arg: any): CodeRunnerOutputText {
@@ -162,7 +163,7 @@ async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
     return code
   }
 
-  return allLogs
+  return result
 }
 
 let tsModule: typeof import('typescript') | undefined
@@ -183,7 +184,7 @@ export async function runTypeScript(code: string) {
   const importRegex = /import\s*\((.+)\)/g
   code = code.replace(importRegex, (_full, specifier) => `__slidev_import(${specifier})`)
 
-  return await runJavaScript(code)
+  return runJavaScript(code)
 }
 
 /**

packages/types/src/code-runner.ts

@@ -1,5 +1,6 @@
 import type { CodeToHastOptions } from 'shiki'
 import type { Arrayable, Awaitable } from '@antfu/utils'
+import type { MaybeRefOrGetter } from 'vue'
 
 export interface CodeRunnerContext {
   /**
@@ -58,7 +59,7 @@ export type CodeRunnerOutputTextArray = CodeRunnerOutputText[]
 
 export type CodeRunnerOutput = CodeRunnerOutputHtml | CodeRunnerOutputError | CodeRunnerOutputText | CodeRunnerOutputTextArray | CodeRunnerOutputDom
 
-export type CodeRunnerOutputs = Arrayable<CodeRunnerOutput>
+export type CodeRunnerOutputs = MaybeRefOrGetter<Arrayable<CodeRunnerOutput>>
 
 export type CodeRunner = (code: string, ctx: CodeRunnerContext) => Awaitable<CodeRunnerOutputs>