@slidev/client 0.48.0-beta.21 → 0.48.0-beta.23

package/setup/code-runners.ts

@@ -0,0 +1,169 @@
+/* __imports__ */
+import { createSingletonPromise } from '@antfu/utils'
+import type { CodeRunner, CodeRunnerContext, CodeRunnerOutput, CodeRunnerOutputText, CodeRunnerOutputs, CodeRunnerProviders } from '@slidev/types'
+import type { CodeToHastOptions } from 'shiki'
+import { isDark } from '../logic/dark'
+
+export default createSingletonPromise(async () => {
+  const runners: Record<string, CodeRunner> = {
+    javascript: runJavaScript,
+    js: runJavaScript,
+    typescript: runTypeScript,
+    ts: runTypeScript,
+  }
+
+  const { shiki, themes } = await import('#slidev/shiki')
+  const highlighter = await shiki
+  const highlight = (code: string, lang: string, options: Partial<CodeToHastOptions> = {}) => highlighter.codeToHtml(code, {
+    lang,
+    theme: typeof themes === 'string'
+      ? themes
+      : isDark.value
+        ? themes.dark || 'vitesse-dark'
+        : themes.light || 'vitesse-light',
+    ...options,
+  })
+
+  const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
+    try {
+      const runner = runners[lang]
+      if (!runner)
+        throw new Error(`Runner for language "${lang}" not found`)
+      return await runner(
+        code,
+        {
+          options,
+          highlight,
+          run: async (code, lang) => {
+            return await run(code, lang, options)
+          },
+        },
+      )
+    }
+    catch (e) {
+      console.error(e)
+      return {
+        error: `${e}`,
+      }
+    }
+  }
+
+  // @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)
+
+  return {
+    highlight,
+    run,
+  }
+})
+
+// Ported from https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/sidebar/runtime.ts
+export 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)
+  try {
+    const safeJS = `return async (console) => {${sanitizeJS(code)}}`
+    // eslint-disable-next-line no-new-func
+    await (new Function(safeJS)())(vmConsole)
+  }
+  catch (error) {
+    return {
+      error: `ERROR: ${error}`,
+    }
+  }
+
+  function printObject(arg: any): CodeRunnerOutputText {
+    if (typeof arg === 'string') {
+      return {
+        text: arg,
+      }
+    }
+    return {
+      text: objectToText(arg),
+      highlightLang: 'javascript',
+    }
+  }
+
+  function objectToText(arg: any): string {
+    let textRep = ''
+    if (arg instanceof Error) {
+      textRep = `Error: ${JSON.stringify(arg.message)}`
+    }
+    else if (arg === null || arg === undefined || typeof arg === 'symbol') {
+      textRep = String(arg)
+    }
+    else if (Array.isArray(arg)) {
+      textRep = `[${arg.map(objectToText).join(', ')}]`
+    }
+    else if (arg instanceof Set) {
+      const setIter = [...arg]
+      textRep = `Set (${arg.size}) {${setIter.map(objectToText).join(', ')}}`
+    }
+    else if (arg instanceof Map) {
+      const mapIter = [...arg.entries()]
+      textRep
+        = `Map (${arg.size}) {${mapIter
+          .map(([k, v]) => `${objectToText(k)} => ${objectToText(v)}`)
+          .join(', ')
+        }}`
+    }
+    else if (arg instanceof RegExp) {
+      textRep = arg.toString()
+    }
+    else if (typeof arg === 'string') {
+      textRep = JSON.stringify(arg)
+    }
+    else if (typeof arg === 'object') {
+      const name = arg.constructor?.name ?? ''
+      // No one needs to know an obj is an obj
+      const nameWithoutObject = name && name === 'Object' ? '' : name
+      const prefix = nameWithoutObject ? `${nameWithoutObject}: ` : ''
+
+      // JSON.stringify omits any keys with a value of undefined. To get around this, we replace undefined with the text __undefined__ and then do a global replace using regex back to keyword undefined
+      textRep
+        = prefix
+        + JSON.stringify(arg, (_, value) => (value === undefined ? '__undefined__' : value), 2).replace(
+          /"__undefined__"/g,
+          'undefined',
+        )
+
+      textRep = String(textRep)
+    }
+    else {
+      textRep = String(arg)
+    }
+    return textRep
+  }
+
+  // The reflect-metadata runtime is available, so allow that to go through
+  function sanitizeJS(code: string) {
+    return code.replace(`import "reflect-metadata"`, '').replace(`require("reflect-metadata")`, '')
+  }
+
+  return allLogs
+}
+
+let tsModule: typeof import('typescript') | undefined
+
+export async function runTypeScript(code: string, context: CodeRunnerContext) {
+  const { transpile } = tsModule ??= await import('typescript')
+  code = transpile(code, {
+    module: tsModule.ModuleKind.ESNext,
+    target: tsModule.ScriptTarget.ES2022,
+  })
+  return await context.run(code, 'javascript')
+}

package/setup/monaco.ts

@@ -89,16 +89,25 @@ const setup = createSingletonPromise(async () => {
     })
     : () => { }
 
-  // monaco.languages.register({ id: 'vue' })
+  monaco.languages.register({ id: 'vue' })
+  monaco.languages.register({ id: 'html' })
+  monaco.languages.register({ id: 'css' })
   monaco.languages.register({ id: 'typescript' })
   monaco.languages.register({ id: 'javascript' })
 
   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__ */
+
   // Use Shiki to highlight Monaco
   shikiToMonaco(highlighter, monaco)
-
   if (typeof themes === 'string') {
     monaco.editor.setTheme(themes)
   }
@@ -110,14 +119,6 @@ const setup = createSingletonPromise(async () => {
     })
   }
 
-  // @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__ */
-
   return {
     monaco,
     ata,

package/shim-vue.d.ts

@@ -1,15 +1,11 @@
 declare module 'vue' {
-  import type { UnwrapNestedRefs } from 'vue'
-  import type { SlidevContext } from './modules/context'
-
-  interface ComponentCustomProperties {
-    $slidev: UnwrapNestedRefs<SlidevContext>
+  type SlideContext = import('./context').SlideContext
+  interface ComponentCustomProperties extends SlideContext {
   }
 }
 
 declare module 'vue-router' {
   import type { TransitionGroupProps } from 'vue'
-  import type { ClicksContext, SlideInfo } from '@slidev/types'
 
   interface RouteMeta {
     // inherited from frontmatter
@@ -21,7 +17,7 @@ declare module 'vue-router' {
     preload?: boolean
 
     // slide info
-    slide?: Omit<SlideInfo, 'source'> & {
+    slide?: Omit<import('@slidev/types').SlideInfo, 'source'> & {
       noteHTML: string
       filepath: string
       start: number
@@ -30,7 +26,7 @@ declare module 'vue-router' {
     }
 
     // private fields
-    __clicksContext: null | ClicksContext
+    __clicksContext: import('@slidev/types').ClicksContext | undefined
     __preloaded?: boolean
   }
 }

package/state/index.ts

@@ -14,7 +14,7 @@ export const breakpoints = useBreakpoints({
 })
 export const windowSize = useWindowSize()
 export const magicKeys = useMagicKeys()
-export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 120)
+export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect.value > 120)
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()

package/styles/code.css

@@ -44,9 +44,9 @@ html:not(.dark) .shiki span {
   overflow: auto;
 }
 
-.slidev-code .line.highlighted {
+.slidev-code .slidev-code-highlighted {
 }
-.slidev-code .line.dishonored {
+.slidev-code .slidev-code-dishonored {
   opacity: 0.3;
   pointer-events: none;
 }

package/internals/SlideWrapper.ts

@@ -1,58 +0,0 @@
-import { computed, defineAsyncComponent, defineComponent, h, ref, toRef } from 'vue'
-import type { PropType } from 'vue'
-import { provideLocal } from '@vueuse/core'
-import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
-import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
-import SlideLoading from './SlideLoading.vue'
-
-export default defineComponent({
-  name: 'SlideWrapper',
-  props: {
-    clicksContext: {
-      type: Object as PropType<ClicksContext>,
-      required: true,
-    },
-    renderContext: {
-      type: String,
-      default: 'main',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    is: {
-      required: true,
-    },
-    route: {
-      type: Object as PropType<SlideRoute>,
-      required: true,
-    },
-  },
-  setup(props) {
-    provideLocal(injectionRoute, props.route)
-    provideLocal(injectionCurrentPage, ref(props.route.no))
-    provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
-    provideLocal(injectionActive, toRef(props, 'active'))
-    provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
-
-    const style = computed(() => {
-      const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
-      return zoom === 1
-        ? undefined
-        : {
-            width: `${100 / zoom}%`,
-            height: `${100 / zoom}%`,
-            transformOrigin: 'top left',
-            transform: `scale(${zoom})`,
-          }
-    })
-
-    const SlideComponent = defineAsyncComponent({
-      loader: (props.is as any),
-      delay: 300,
-      loadingComponent: SlideLoading,
-    })
-
-    return () => h(SlideComponent, { style: style.value })
-  },
-})

package/styles/monaco.css

@@ -1,27 +0,0 @@
-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;
-}