@slidev/client 0.48.0-beta.22 → 0.48.0-beta.24

package/builtin/Monaco.vue

@@ -12,11 +12,12 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import type * as monaco from 'monaco-editor'
-import { computed, nextTick, onMounted, ref } from 'vue'
 import { debounce } from '@antfu/utils'
 import lz from 'lz-string'
+import type * as monaco from 'monaco-editor'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { makeId } from '../logic/utils'
+import CodeRunner from '../internals/CodeRunner.vue'
 
 const props = withDefaults(defineProps<{
   codeLz: string
@@ -27,6 +28,11 @@ const props = withDefaults(defineProps<{
   height?: number | string // Posible values: 'initial', 'auto', '100%', '200px', etc.
   editorOptions?: monaco.editor.IEditorOptions
   ata?: boolean
+  runnable?: boolean
+  autorun?: boolean | 'once'
+  outputHeight?: string
+  highlightOutput?: boolean
+  runnerOptions?: Record<string, unknown>
 }>(), {
   codeLz: '',
   lang: 'typescript',
@@ -34,10 +40,13 @@ const props = withDefaults(defineProps<{
   lineNumbers: 'off',
   height: 'initial',
   ata: true,
+  runnable: false,
+  autorun: true,
+  highlightOutput: true,
 })
 
-const code = lz.decompressFromBase64(props.codeLz).trimEnd()
-const diff = props.diffLz && lz.decompressFromBase64(props.diffLz).trimEnd()
+const code = ref(lz.decompressFromBase64(props.codeLz).trimEnd())
+const diff = props.diffLz && ref(lz.decompressFromBase64(props.diffLz).trimEnd())
 
 const langMap: Record<string, string> = {
   ts: 'typescript',
@@ -69,7 +78,8 @@ 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 model = monaco.editor.createModel(code.value, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+  model.onDidChangeContent(() => code.value = model.getValue())
   const commonOptions = {
     automaticLayout: true,
     readOnly: props.readonly,
@@ -89,7 +99,8 @@ onMounted(async () => {
 
   let editableEditor: monaco.editor.IStandaloneCodeEditor
   if (diff) {
-    const diffModel = monaco.editor.createModel(diff, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+    const diffModel = monaco.editor.createModel(diff.value, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+    diffModel.onDidChangeContent(() => code.value = model.getValue())
     const editor = monaco.editor.createDiffEditor(container.value!, {
       renderOverviewRuler: false,
       ...commonOptions,
@@ -140,11 +151,56 @@ onMounted(async () => {
         : /* BELOW */ `` // reset
     }
   }
+  nextTick(() => monaco.editor.remeasureFonts())
 })
 </script>
 
 <template>
-  <div ref="outer" class="slidev-monaco-container" :style="{ height }">
-    <div ref="container" class="absolute inset-0.5" />
+  <div class="relative slidev-monaco-container">
+    <div ref="outer" class="relative slidev-monaco-container-inner" :style="{ height }">
+      <div ref="container" class="absolute inset-0.5" />
+    </div>
+    <CodeRunner
+      v-if="props.runnable"
+      v-model="code"
+      :lang="lang"
+      :autorun="props.autorun"
+      :height="props.outputHeight"
+      :highlight-output="props.highlightOutput"
+      :runner-options="props.runnerOptions"
+    />
   </div>
 </template>
+
+<style>
+div[widgetid='messageoverlay'] {
+  transform: translateY(calc(100% * (var(--slidev-slide-scale) - 1)));
+}
+
+.slidev-monaco-container {
+  position: relative;
+  margin: var(--slidev-code-margin);
+  line-height: var(--slidev-code-line-height);
+  border-radius: var(--slidev-code-radius);
+  background: var(--slidev-code-background);
+}
+
+.slidev-monaco-container-inner {
+  padding: var(--slidev-code-padding);
+}
+
+.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;
+}
+</style>

package/builtin/ShikiMagicMove.vue

@@ -6,8 +6,6 @@ import lz from 'lz-string'
 import { useSlideContext } from '../context'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
 
-import 'shiki-magic-move/style.css'
-
 const props = defineProps<{
   at?: string | number
   stepsLz: string
@@ -94,7 +92,12 @@ onMounted(() => {
       class="slidev-code relative shiki overflow-visible"
       :steps="steps"
       :step="stepIndex"
-      :options="{ globalScale: scale }"
+      :options="{
+        globalScale: scale,
+        // TODO: make this configurable later
+        duration: 800,
+        stagger: 1,
+      }"
     />
   </div>
 </template>

package/builtin/Tweet.vue

@@ -22,7 +22,14 @@ const tweet = ref<HTMLElement | null>()
 const loaded = ref(false)
 const tweetNotFound = ref(false)
 
-onMounted(async () => {
+async function create(retries = 10) {
+  // @ts-expect-error global
+  if (!window.twttr?.widgets?.createTweet) {
+    if (retries <= 0)
+      return console.error('Failed to load Twitter widget after 10 retries.')
+    setTimeout(() => create(retries - 1), 1000)
+    return
+  }
   // @ts-expect-error global
   const element = await window.twttr.widgets.createTweet(
     props.id.toString(),
@@ -36,6 +43,10 @@ onMounted(async () => {
   loaded.value = true
   if (element === undefined)
     tweetNotFound.value = true
+}
+
+onMounted(() => {
+  create()
 })
 </script>
 

package/composables/useClicks.ts

@@ -23,6 +23,7 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
     },
     relativeOffsets,
     map,
+    onMounted() {},
     resolve(at, size = 1) {
       const [isRelative, value] = normalizeAtProp(at)
       if (isRelative) {
@@ -57,8 +58,7 @@ function useClicksContextBase(current: Ref<number>, clicksOverrides?: number): C
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksOverrides
-        ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
+      return clicksOverrides ?? Math.max(0, ...[...map.values()].map(v => v.max || 0))
     },
   }
 }
@@ -68,6 +68,7 @@ const queryClicksRaw = useRouteQuery('clicks', '0')
 export function usePrimaryClicks(route: SlideRoute): ClicksContext {
   if (route?.meta?.__clicksContext)
     return route.meta.__clicksContext
+
   const thisNo = route.no
   const current = computed({
     get() {
@@ -92,6 +93,13 @@ export function usePrimaryClicks(route: SlideRoute): ClicksContext {
     current,
     route?.meta?.clicks,
   )
+
+  // On slide mounted, make sure the query is not greater than the total
+  context.onMounted = () => {
+    if (queryClicksRaw.value)
+      queryClicksRaw.value = Math.min(queryClicksRaw.value, context.total)
+  }
+
   if (route?.meta)
     route.meta.__clicksContext = context
   return context

package/composables/useNav.ts

@@ -3,7 +3,8 @@ import type { ComputedRef, Ref, TransitionGroupProps } from 'vue'
 import { computed, ref, watch } from 'vue'
 import type { Router } from 'vue-router'
 import { getCurrentTransition } from '../logic/transition'
-import { getSlidePath } from '../logic/slides'
+import { getSlide, getSlidePath } from '../logic/slides'
+import { CLICKS_MAX } from '../constants'
 import { useTocTree } from './useTocTree'
 import { skipTransition } from './hmr'
 import { slides } from '#slidev/slides'
@@ -121,12 +122,12 @@ export function useNavBase(
   async function prevSlide(lastClicks = true) {
     clicksDirection.value = -1
     const next = Math.max(1, currentSlideNo.value - 1)
-    await go(next)
-    if (lastClicks && clicksTotal.value) {
-      router?.replace({
-        query: { ...router.currentRoute.value.query, clicks: clicksTotal.value },
-      })
-    }
+    await go(
+      next,
+      lastClicks
+        ? getSlide(next)?.meta.__clicksContext?.total ?? CLICKS_MAX
+        : undefined,
+    )
   }
 
   function goFirst() {
@@ -141,7 +142,10 @@ export function useNavBase(
     skipTransition.value = false
     await router?.push({
       path: getSlidePath(page),
-      query: { ...router.currentRoute.value.query, clicks },
+      query: {
+        ...router.currentRoute.value.query,
+        clicks: clicks || undefined,
+      },
     })
   }
 

package/{logic/note.ts → composables/useSlideInfo.ts}

@@ -9,14 +9,14 @@ export interface UseSlideInfo {
   update: (data: SlidePatch) => Promise<SlideInfo | void>
 }
 
-export function useSlideInfo(id: number | undefined): UseSlideInfo {
-  if (id == null) {
+export function useSlideInfo(no: number): UseSlideInfo {
+  if (no == null) {
     return {
       info: ref() as Ref<SlideInfo | undefined>,
       update: async () => {},
     }
   }
-  const url = `/@slidev/slide/${id}.json`
+  const url = `/@slidev/slide/${no}.json`
   const { data: info, execute } = useFetch(url).json().get()
 
   execute()
@@ -37,11 +37,11 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   if (__DEV__) {
     import.meta.hot?.on('slidev:update-slide', (payload) => {
-      if (payload.id === id)
+      if (payload.no === no)
         info.value = payload.data
     })
     import.meta.hot?.on('slidev:update-note', (payload) => {
-      if (payload.id === id && info.value.note?.trim() !== payload.note?.trim())
+      if (payload.no === no && info.value.note?.trim() !== payload.note?.trim())
         info.value = { ...info.value, ...payload }
     })
   }
@@ -52,20 +52,17 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   }
 }
 
-const map: Record<string, UseSlideInfo> = {}
+const map: Record<number, UseSlideInfo> = {}
 
-export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
-  function get(id: number | undefined) {
-    const i = `${id}`
-    if (!map[i])
-      map[i] = useSlideInfo(id)
-    return map[i]
+export function useDynamicSlideInfo(no: MaybeRef<number>) {
+  function get(no: number) {
+    return map[no] ??= useSlideInfo(no)
   }
 
   return {
-    info: computed(() => get(unref(id)).info.value),
+    info: computed(() => get(unref(no)).info.value),
     update: async (data: SlidePatch, newId?: number) => {
-      const info = get(newId ?? unref(id))
+      const info = get(newId ?? unref(no))
       const newData = await info.update(data)
       if (newData)
         info.info.value = newData

package/composables/useViewTransition.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { getSlide } from '../logic/nav'
 
 export function useViewTransition() {
   const router = useRouter()
@@ -11,13 +12,15 @@ export function useViewTransition() {
   const supportViewTransition = typeof document !== 'undefined' && 'startViewTransition' in document
 
   router.beforeResolve((to, from) => {
-    const fromNo = from.meta.slide?.no
-    const toNo = to.meta.slide?.no
+    const fromMeta = getSlide(from.params.no as string)?.meta
+    const toMeta = getSlide(to.params.no as string)?.meta
+    const fromNo = fromMeta?.slide?.no
+    const toNo = toMeta?.slide?.no
     if (
       !(
         fromNo !== undefined && toNo !== undefined && (
-          (from.meta.transition === 'view-transition' && fromNo < toNo)
-          || (to.meta.transition === 'view-transition' && toNo < fromNo)
+          (fromMeta?.transition === 'view-transition' && fromNo < toNo)
+          || (toMeta?.transition === 'view-transition' && toNo < fromNo)
         )
       )
     ) {

package/context.ts

@@ -39,6 +39,8 @@ export function useSlideContext() {
   }
 }
 
+export type SlideContext = ReturnType<typeof useSlideContext>
+
 export function provideFrontmatter(frontmatter: Record<string, any>) {
   provideLocal(injectionFrontmatter, frontmatter)
 

package/index.html

@@ -8,6 +8,7 @@
 <body>
   <div id="app"></div>
   <script type="module" src="__ENTRY__"></script>
+  <div id="mermaid-rendering-container"></div>
   <!-- body -->
 </body>
 </html>

package/internals/CodeRunner.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { debounce, toArray } from '@antfu/utils'
+import { useVModel } from '@vueuse/core'
+import type { CodeRunnerOutput } from '@slidev/types'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { isPrintMode } from '../logic/nav'
+import { useSlideContext } from '../context'
+import setupCodeRunners from '../setup/code-runners'
+import IconButton from './IconButton.vue'
+import DomElement from './DomElement.vue'
+
+const props = defineProps<{
+  modelValue: string
+  lang: string
+  autorun: boolean | 'once'
+  height?: string
+  highlightOutput: boolean
+  runnerOptions?: Record<string, unknown>
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+const code = useVModel(props, 'modelValue', emit)
+
+const { $renderContext } = useSlideContext()
+const disabled = computed(() => !['slide', 'presenter'].includes($renderContext.value))
+
+const autorun = isPrintMode.value ? 'once' : props.autorun
+const isRunning = ref(autorun)
+const outputs = shallowRef<CodeRunnerOutput[]>()
+const runCount = ref(0)
+const highlightFn = ref<(code: string, lang: string) => string>()
+
+const triggerRun = debounce(200, async () => {
+  if (disabled.value)
+    return
+
+  const { highlight, run } = await setupCodeRunners()
+  highlightFn.value = highlight
+
+  const setAsRunning = setTimeout(() => {
+    isRunning.value = true
+  }, 500)
+
+  outputs.value = toArray(await run(code.value, props.lang, props.runnerOptions ?? {}))
+  runCount.value += 1
+  isRunning.value = false
+
+  clearTimeout(setAsRunning)
+})
+
+if (autorun === 'once')
+  triggerRun()
+else if (autorun)
+  watch(code, triggerRun, { immediate: true })
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col rounded-b border-t border-main"
+    :style="{ height: props.height }"
+    data-waitfor=".slidev-runner-output"
+  >
+    <div v-if="disabled" class="text-sm text-center opacity-50">
+      Code is disabled in the "{{ $renderContext }}" mode
+    </div>
+    <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">
+      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">
+        <div v-if="'html' in output" v-html="output.html" />
+        <div v-else-if="'error' in output" class="text-red-500">
+          {{ output.error }}
+        </div>
+        <DomElement v-else-if="'element' in output" :element="output.element" />
+        <div v-else class="output-line">
+          <template
+            v-for="item, idx2 in toArray(output)"
+            :key="idx2"
+          >
+            <span
+              v-if="item.highlightLang && highlightFn"
+              class="highlighted"
+              v-html="highlightFn(item.text, item.highlightLang)"
+            />
+            <span v-else :class="item.class">{{ item.text }}</span>
+            <span v-if="idx2 < toArray(output).length - 1" class="separator">,</span>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+  <div v-if="code.trim()" class="absolute right-1 top-1 max-h-full flex gap-1">
+    <IconButton class="w-8 h-8 max-h-full flex justify-center items-center" title="Run code" @click="triggerRun">
+      <carbon:play />
+    </IconButton>
+  </div>
+</template>
+
+<style lang="postcss">
+.slidev-runner-output {
+  @apply px-5 py-3 flex-grow text-xs leading-[.8rem] font-$slidev-code-font-family select-text;
+}
+
+.slidev-runner-output .log-type {
+  @apply font-bold op-70;
+
+  &.DBG {
+    @apply text-gray-500;
+  }
+
+  &.LOG {
+    @apply text-blue-500;
+  }
+
+  &.WRN {
+    @apply text-orange-500;
+  }
+
+  &.ERR {
+    @apply text-red-500;
+  }
+}
+
+.slidev-runner-output .output-line {
+  @apply flex my-1 w-full;
+}
+
+.slidev-runner-output .separator {
+  @apply op-40 mr-1;
+}
+
+.slidev-runner-output .highlighted > pre {
+  @apply inline text-wrap !bg-transparent;
+}
+</style>

package/internals/DomElement.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  element: HTMLElement
+}>()
+
+const container = ref<HTMLElement>()
+
+watchEffect(() => {
+  if (container.value)
+    container.value.appendChild(props.element)
+})
+</script>
+
+<template>
+  <div ref="container" />
+</template>

package/internals/IconButton.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <component :is="as || 'button'" class="slidev-icon-btn" :title="title" v-bind="$attrs">
+  <component :is="as || 'button'" class="slidev-icon-btn" :title="title">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />

package/internals/NoteEditable.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { nextTick, ref, watch, watchEffect } from 'vue'
+import { nextTick, ref, toRef, watch, watchEffect } from 'vue'
 import { ignorableWatch, onClickOutside, useVModel } from '@vueuse/core'
 import type { ClicksContext } from '@slidev/types'
-import { useDynamicSlideInfo } from '../logic/note'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps({
   no: {
     type: Number,
+    required: true,
   },
   class: {
     default: '',
@@ -38,7 +39,7 @@ const emit = defineEmits<{
 
 const editing = useVModel(props, 'editing', emit, { passive: true })
 
-const { info, update } = useDynamicSlideInfo(props.no)
+const { info, update } = useDynamicSlideInfo(toRef(props, 'no'))
 
 const note = ref('')
 let timer: any

package/internals/NoteStatic.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { ClicksContext } from '@slidev/types'
-import { useSlideInfo } from '../logic/note'
+import { useSlideInfo } from '../composables/useSlideInfo'
 import NoteDisplay from './NoteDisplay.vue'
 
 const props = defineProps<{
-  no?: number
+  no: number
   class?: string
   clicksContext?: ClicksContext
 }>()

package/internals/PrintSlideClick.vue

@@ -5,7 +5,7 @@ import { injectionSlidevContext } from '../constants'
 import { configs, slideHeight, slideWidth } from '../env'
 import { getSlideClass } from '../utils'
 import type { SlidevContextNav } from '../composables/useNav'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 
 import GlobalTop from '#slidev/global-components/top'
 import GlobalBottom from '#slidev/global-components/bottom'

package/internals/QuickOverview.vue

@@ -8,7 +8,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import { getSlideClass } from '../utils'
 import { CLICKS_MAX } from '../constants'
 import SlideContainer from './SlideContainer.vue'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import DrawingPreview from './DrawingPreview.vue'
 import IconButton from './IconButton.vue'
 
@@ -167,6 +167,7 @@ watchEffect(() => {
       <carbon:close />
     </IconButton>
     <IconButton
+      v-if="__DEV__"
       as="a"
       title="Slides Overview"
       target="_blank"

package/internals/SideEditor.vue

@@ -4,7 +4,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useCodeMirror } from '../setup/codemirror'
 import { currentSlideNo, openInEditor } from '../logic/nav'
-import { useDynamicSlideInfo } from '../logic/note'
+import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import IconButton from './IconButton.vue'
 
 const props = defineProps<{

package/internals/SlideLoading.vue

@@ -10,7 +10,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-full w-full flex items-center justify-center gap-2">
+  <div class="h-full w-full flex items-center justify-center gap-2 slidev-slide-loading">
     <template v-if="timeout">
       <div class="i-svg-spinners-90-ring-with-bg text-xl" />
       <div>Loading slide...</div>

package/internals/SlideWrapper.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, defineComponent, h, onMounted, 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'
+
+const props = defineProps({
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+    required: true,
+  },
+  renderContext: {
+    type: String as PropType<RenderContext>,
+    default: 'slide',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  is: {
+    type: Function as PropType<() => any>,
+    required: true,
+  },
+  route: {
+    type: Object as PropType<SlideRoute>,
+    required: true,
+  },
+})
+
+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: async () => {
+    const component = await props.is()
+    return defineComponent({
+      setup(_, { attrs }) {
+        onMounted(() => {
+          props.clicksContext.onMounted()
+        })
+        return () => h(component.default, attrs)
+      },
+    })
+  },
+  delay: 300,
+  loadingComponent: SlideLoading,
+})
+</script>
+
+<template>
+  <component
+    :is="SlideComponent"
+    :style="style"
+    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+  />
+</template>
+
+<style scoped>
+.disable-view-transition:deep(*) {
+  view-transition-name: none !important;
+}
+</style>

package/internals/SlidesShow.vue

@@ -5,7 +5,7 @@ import { getSlideClass } from '../utils'
 import { useViewTransition } from '../composables/useViewTransition'
 import { skipTransition } from '../composables/hmr'
 import { usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from './SlideWrapper'
+import SlideWrapper from './SlideWrapper.vue'
 import PresenterMouse from './PresenterMouse.vue'
 
 import GlobalTop from '#slidev/global-components/top'

package/logic/route.ts

@@ -19,7 +19,12 @@ export function useRouteQuery<T extends string | string[]>(
     },
     set(v) {
       nextTick(() => {
-        router[unref(mode) as 'replace' | 'push']({ query: { ...router.currentRoute.value.query, [name]: v } })
+        router[unref(mode) as 'replace' | 'push']({
+          query: {
+            ...router.currentRoute.value.query,
+            [name]: `${v}` === defaultValue ? undefined : v,
+          },
+        })
       })
     },
   })

package/logic/utils.ts

@@ -1,7 +1,6 @@
 import { parseRangeString } from '@slidev/parser/core'
 import { useTimestamp } from '@vueuse/core'
 import { computed, ref } from 'vue'
-import { CLASS_VCLICK_TARGET } from '../constants'
 
 export function useTimer() {
   const tsStart = ref(Date.now())
@@ -26,7 +25,7 @@ export function useTimer() {
 
 export function makeId(length = 5) {
   const result = []
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
   const charactersLength = characters.length
   for (let i = 0; i < length; i++)
     result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
@@ -62,7 +61,7 @@ export function updateCodeHighlightRange(
     const tokens = getTokenOfLine(line)
     const isHighlighted = highlights.includes(line + startLine)
     for (const token of tokens) {
-      token.classList.toggle(CLASS_VCLICK_TARGET, true)
+      // token.classList.toggle(CLASS_VCLICK_TARGET, true)
       token.classList.toggle('slidev-code-highlighted', isHighlighted)
       token.classList.toggle('slidev-code-dishonored', !isHighlighted)
 

package/main.ts

@@ -10,6 +10,7 @@ import { createVMarkDirective } from './modules/v-mark'
 import { createSlidevContext } from './modules/context'
 
 import '#slidev/styles'
+import 'shiki-magic-move/style.css'
 
 const app = createApp(App)
 app.use(router)

package/modules/mermaid.ts

@@ -8,8 +8,10 @@ mermaid.startOnLoad = false
 mermaid.initialize({ startOnLoad: false })
 
 const cache = new Map<string, string>()
+let containerElement: Element | undefined
 
 export async function renderMermaid(lzEncoded: string, options: any) {
+  containerElement ??= document.getElementById('mermaid-rendering-container')!
   const key = lzEncoded + JSON.stringify(options)
   const _cache = cache.get(key)
   if (_cache)
@@ -22,7 +24,7 @@ export async function renderMermaid(lzEncoded: string, options: any) {
   })
   const code = lz.decompressFromBase64(lzEncoded)
   const id = makeId()
-  const { svg } = await mermaid.render(id, code)
+  const { svg } = await mermaid.render(id, code, containerElement)
   cache.set(key, svg)
   return svg
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.22",
+  "version": "0.48.0-beta.24",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -47,20 +47,21 @@
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
     "lz-string": "^1.5.0",
-    "mermaid": "^10.8.0",
+    "mermaid": "^10.9.0",
     "monaco-editor": "^0.46.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "shiki": "^1.1.7",
-    "shiki-magic-move": "^0.3.0",
-    "typescript": "^5.3.3",
+    "shiki-magic-move": "^0.3.4",
+    "typescript": "^5.4.2",
     "unocss": "^0.58.5",
     "vue": "^3.4.21",
+    "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/parser": "0.48.0-beta.22",
-    "@slidev/types": "0.48.0-beta.22"
+    "@slidev/parser": "0.48.0-beta.24",
+    "@slidev/types": "0.48.0-beta.24"
   },
   "devDependencies": {
-    "vite": "^5.1.4"
+    "vite": "^5.1.5"
   }
 }

package/pages/overview.vue

@@ -8,7 +8,7 @@ import { useFixedClicks } from '../composables/useClicks'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlideClass } from '../utils'
 import SlideContainer from '../internals/SlideContainer.vue'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import DrawingPreview from '../internals/DrawingPreview.vue'
 import IconButton from '../internals/IconButton.vue'
 import NoteEditable from '../internals/NoteEditable.vue'
@@ -139,6 +139,7 @@ onMounted(() => {
         :key="route.no"
         :ref="el => blocks.set(idx, el as any)"
         class="relative border-t border-main of-hidden flex gap-4 min-h-50 group"
+        :class="idx === 0 ? 'pt5' : ''"
       >
         <div class="select-none w-13 text-right my4 flex flex-col gap-1 items-end">
           <div class="text-3xl op20 mb2">
@@ -192,19 +193,19 @@ onMounted(() => {
           <IconButton
             title="Edit Note"
             class="rounded-full w-9 h-9 text-sm"
-            :class="edittingNote === idx ? 'important:op0' : ''"
-            @click="edittingNote = idx"
+            :class="edittingNote === route.no ? 'important:op0' : ''"
+            @click="edittingNote = route.no"
           >
             <carbon:pen />
           </IconButton>
         </div>
         <NoteEditable
-          :no="idx"
+          :no="route.no"
           class="max-w-250 w-250 text-lg rounded p3"
           :auto-height="true"
-          :editing="edittingNote === idx"
+          :editing="edittingNote === route.no"
           :clicks-context="getClicksContext(route)"
-          @dblclick="edittingNote !== idx ? edittingNote = idx : null"
+          @dblclick="edittingNote !== route.no ? edittingNote = route.no : null"
           @update:editing="edittingNote = null"
           @marker-click="(e, clicks) => onMarkerClick(e, clicks, route)"
         />

package/pages/presenter.vue

@@ -12,7 +12,7 @@ import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
 import { isDrawing } from '../logic/drawings'
 import { useFixedClicks, usePrimaryClicks } from '../composables/useClicks'
-import SlideWrapper from '../internals/SlideWrapper'
+import SlideWrapper from '../internals/SlideWrapper.vue'
 import SlideContainer from '../internals/SlideContainer.vue'
 import NavControls from '../internals/NavControls.vue'
 import QuickOverview from '../internals/QuickOverview.vue'

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/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;
-}