@slidev/client 0.49.11 → 0.49.13

package/assets/logo.svg

@@ -0,0 +1,60 @@
+<svg width="115" height="115" viewBox="0 0 115 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<g filter="url(#filter0_d)">
+<rect x="14" y="14" width="90" height="90" rx="15" fill="url(#paint0_linear)"/>
+</g>
+<g filter="url(#filter1_d)">
+<rect width="90" height="90" rx="45" fill="url(#paint1_linear)"/>
+</g>
+<g filter="url(#filter2_d)">
+<path d="M56.127 63.925C54.9501 59.5327 54.3617 57.3366 54.9439 55.8199C55.4517 54.497 56.497 53.4517 57.8199 52.9439C59.3366 52.3617 61.5327 52.9501 65.925 54.127L87.7563 59.9767C92.1485 61.1536 94.3446 61.742 95.367 63.0046C96.2588 64.1058 96.6414 65.5338 96.4197 66.9334C96.1656 68.5379 94.5579 70.1456 91.3426 73.3609L75.3609 89.3426C72.1456 92.5579 70.5379 94.1656 68.9333 94.4197C67.5337 94.6414 66.1058 94.2588 65.0046 93.367C63.742 92.3446 63.1536 90.1485 61.9767 85.7563L56.127 63.925Z" fill="url(#paint2_linear)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="8" y="8" width="110" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="-6" y="-6" width="110" height="110" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="34.8833" y="32.8833" width="77.6614" height="77.6614" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dx="4" dy="4"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="14" y1="6" x2="104" y2="104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3ACBD4"/>
+<stop offset="1" stop-color="#2988B1"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="-9.5" y1="-11" x2="76.0825" y2="90" gradientUnits="userSpaceOnUse">
+<stop stop-color="#95F0CF"/>
+<stop offset="1" stop-color="#3AB9D5"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="54.6616" y1="49.3453" x2="59.8793" y2="96.3585" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEB83"/>
+<stop offset="0.0001" stop-color="#FFEB83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="0.601773" stop-color="#FFBB13"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="115" height="115" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/builtin/PoweredBySlidev.vue

@@ -0,0 +1,8 @@
+<template>
+  <span inline-flex items-center>
+    <span text-main>Powered by</span>
+    <a href="https://sli.dev" class="!border-none">
+      <img alt="Slidev logo" src="../assets/logo-title-horizontal.png" h-1.5em>
+    </a>
+  </span>
+</template>

package/composables/useClicks.ts

@@ -30,18 +30,42 @@ export function createClicksContextBase(
   clicksStart = 0,
   clicksTotalOverrides?: number,
 ): ClicksContext {
+  const isMounted = ref(false)
+  let relativeSizeMap: ClicksContext['relativeSizeMap'] = new Map()
+  let maxMap: ClicksContext['maxMap'] = new Map()
   const context: ClicksContext = {
     get current() {
-      // Here we haven't know clicksTotal yet.
       return clamp(+current.value, clicksStart, context.total)
     },
     set current(value) {
-      current.value = clamp(+value, clicksStart, context.total)
+      current.value = isMounted.value
+        ? clamp(value, clicksStart, context.total)
+        : value /* context.total is not available yet */
     },
     clicksStart,
-    relativeOffsets: new Map(),
-    maxMap: shallowReactive(new Map()),
-    onMounted() { },
+    get relativeSizeMap() {
+      if (__DEV__ && isMounted.value)
+        console.warn('[slidev] ClicksContext: Unexpected access to relativeSizeMap after mounted')
+      return relativeSizeMap
+    },
+    get maxMap() {
+      return maxMap
+    },
+    get isMounted() {
+      return isMounted.value
+    },
+    onMounted: () => {
+      isMounted.value = true
+      // Convert maxMap to reactive
+      maxMap = shallowReactive(maxMap)
+      // Make sure the query is not greater than the total
+      context.current = current.value
+    },
+    onUnmounted: () => {
+      isMounted.value = false
+      relativeSizeMap = new Map()
+      maxMap = new Map()
+    },
     calculateSince(rawAt, size = 1) {
       const at = normalizeSingleAtValue(rawAt)
       if (at == null)
@@ -109,23 +133,29 @@ export function createClicksContextBase(
     register(el, info) {
       if (!info)
         return
+      if (__DEV__ && isMounted.value)
+        console.warn('[slidev] ClicksContext: Unexpected register after mounted')
       const { delta, max } = info
-      context.relativeOffsets.set(el, delta)
-      context.maxMap.set(el, max)
+      relativeSizeMap.set(el, delta)
+      maxMap.set(el, max)
     },
     unregister(el) {
-      context.relativeOffsets.delete(el)
-      context.maxMap.delete(el)
+      relativeSizeMap.delete(el)
+      maxMap.delete(el)
     },
     get currentOffset() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return sum(...context.relativeOffsets.values())
+      return sum(...relativeSizeMap.values())
     },
     get total() {
       // eslint-disable-next-line no-unused-expressions
       routeForceRefresh.value
-      return clicksTotalOverrides ?? Math.max(0, ...context.maxMap.values())
+      return clicksTotalOverrides
+        ?? (isMounted.value
+          ? Math.max(0, ...maxMap.values())
+          : 0 /* fallback value */
+        )
     },
   }
   return context

package/composables/useNav.ts

@@ -327,19 +327,13 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
         },
         set(v) {
           if (currentSlideNo.value === thisNo)
-            queryClicksRaw.value = clamp(v, context.clicksStart, context.total).toString()
+            queryClicksRaw.value = v.toString()
         },
       }),
       route?.meta.slide?.frontmatter.clicksStart ?? 0,
       route?.meta.clicks,
     )
 
-    // On slide mounted, make sure the query is not greater than the total
-    context.onMounted = () => {
-      if (currentSlideNo.value === thisNo)
-        queryClicksRaw.value = clamp(+queryClicksRaw.value, context.clicksStart, context.total).toString()
-    }
-
     if (route?.meta)
       route.meta.__clicksContext = context
 

package/composables/useTocTree.ts

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import { getSlidePath } from '../logic/slides'
 
 function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
-  const titleLevel = route.meta?.slide?.level
+  const titleLevel = route.meta.slide.level ?? level
   if (titleLevel && titleLevel > level && tree.length > 0) {
     addToTree(tree[tree.length - 1].children, route, level + 1)
   }
@@ -13,6 +13,7 @@ function addToTree(tree: TocItem[], route: SlideRoute, level = 1) {
       no: route.no,
       children: [],
       level,
+      titleLevel,
       path: getSlidePath(route.meta.slide?.frontmatter?.routeAlias ?? route.no, false),
       hideInToc: Boolean(route.meta?.slide?.frontmatter?.hideInToc),
       title: route.meta?.slide?.title,

package/index.ts

@@ -7,6 +7,7 @@ export { useSlideContext } from './context'
 export { useNav } from './composables/useNav'
 export { useDrawings } from './composables/useDrawings'
 export { useDarkMode } from './composables/useDarkMode'
+export { useIsSlideActive, onSlideEnter, onSlideLeave } from './logic/slides'
 
 export * from './layoutHelper'
 export * from './env'

package/internals/ClicksSlider.vue

@@ -39,7 +39,7 @@ function onMousedown() {
   <div
     class="flex gap-1 items-center select-none"
     :title="`Clicks in this slide: ${length}`"
-    :class="length ? '' : 'op50'"
+    :class="length && props.clicksContext.isMounted ? '' : 'op50'"
   >
     <div class="flex gap-0.5 items-center min-w-16 font-mono mr1">
       <carbon:cursor-1 text-sm op50 />

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

package/internals/NoteDisplay.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch, watchEffect } from 'vue'
 import type { ClicksContext } from '@slidev/types'
 import { CLICKS_MAX } from '../constants'
 
@@ -29,108 +29,118 @@ const noteDisplay = ref<HTMLElement | null>(null)
 const CLASS_FADE = 'slidev-note-fade'
 const CLASS_MARKER = 'slidev-note-click-mark'
 
-function highlightNote() {
+function processNote() {
   if (!noteDisplay.value || !withClicks.value)
     return
 
   const markers = Array.from(noteDisplay.value.querySelectorAll(`.${CLASS_MARKER}`)) as HTMLElement[]
 
-  const current = +(props.clicksContext?.current ?? CLICKS_MAX)
-  const disabled = current < 0 || current >= CLICKS_MAX || !props.highlight
-
-  const nodeToIgnores = new Set<Element>()
-  function ignoreParent(node: Element) {
-    if (!node || node === noteDisplay.value)
-      return
-    nodeToIgnores.add(node)
-    if (node.parentElement)
-      ignoreParent(node.parentElement)
-  }
-
-  const markersMap = new Map<number, HTMLElement>()
-
-  // Convert all sibling text nodes to spans, so we attach classes to them
+  const markersMap = new Map<HTMLElement, number>()
+  const parentsMap = new Map<HTMLElement, [divider: HTMLElement | null, dividerClicks: number][]>()
+  let lastClicks = 0
   for (const marker of markers) {
-    const parent = marker.parentElement!
     const clicks = Number(marker.dataset!.clicks)
-    markersMap.set(clicks, marker)
-    // Ignore the parents of the marker, so the class only applies to the children
-    ignoreParent(parent)
-    Array.from(parent!.childNodes)
-      .forEach((node) => {
-        if (node.nodeType === 3) { // text node
-          const span = document.createElement('span')
-          span.textContent = node.textContent
-          parent.insertBefore(span, node)
-          node.remove()
-        }
-      })
-  }
-  const children = Array.from(noteDisplay.value.querySelectorAll('*'))
-
-  let count = 0
-
-  // Segmenting notes by clicks
-  const segments = new Map<number, Element[]>()
-  for (const child of children) {
-    if (!segments.has(count))
-      segments.set(count, [])
-    segments.get(count)!.push(child)
-    // Update count when reach marker
-    if (child.classList.contains(CLASS_MARKER))
-      count = Number((child as HTMLElement).dataset.clicks) || (count + 1)
+    markersMap.set(marker, clicks)
+
+    // Set parent clicks map
+    let n = marker
+    let p = marker.parentElement
+    while (p && n !== noteDisplay.value) {
+      if (!parentsMap.has(p))
+        parentsMap.set(p, [[null, lastClicks]])
+      parentsMap.get(p)!.push([n, clicks])
+      n = p
+      p = p.parentElement
+    }
+
+    lastClicks = clicks
   }
 
-  // Apply
-  for (const [count, els] of segments) {
-    if (disabled) {
-      els.forEach(el => el.classList.remove(CLASS_FADE))
-    }
-    else {
-      els.forEach(el => el.classList.toggle(
-        CLASS_FADE,
-        nodeToIgnores.has(el)
-          ? false
-          : count !== current,
-      ))
+  const siblingsMap = new Map<HTMLElement, number>()
+  for (const [parent, dividers] of parentsMap) {
+    let hasPrefix = false
+    let dividerIdx = 0
+    for (const sibling of Array.from(parent.childNodes)) {
+      let skip = false
+      while (sibling === dividers[dividerIdx + 1]?.[0]) {
+        skip = true
+        dividerIdx++
+      }
+      if (skip)
+        continue
+
+      // Convert sibling text nodes to spans
+      let siblingEl = sibling as HTMLElement
+      if (sibling.nodeType === 3 /* text node */) {
+        if (!sibling.textContent?.trim())
+          continue
+        siblingEl = document.createElement('span')
+        siblingEl.textContent = sibling.textContent
+        parent.insertBefore(siblingEl, sibling)
+        sibling.remove()
+      }
+
+      hasPrefix ||= dividerIdx === 0
+      siblingsMap.set(siblingEl, dividers[dividerIdx][1])
     }
+    if (!hasPrefix)
+      dividers[0][1] = -1
   }
 
-  for (const [clicks, marker] of markersMap) {
-    marker.classList.remove(CLASS_FADE)
-    marker.classList.toggle(`${CLASS_MARKER}-past`, disabled ? false : clicks < current)
-    marker.classList.toggle(`${CLASS_MARKER}-active`, disabled ? false : clicks === current)
-    marker.classList.toggle(`${CLASS_MARKER}-next`, disabled ? false : clicks === current + 1)
-    marker.classList.toggle(`${CLASS_MARKER}-future`, disabled ? false : clicks > current + 1)
-    marker.ondblclick = (e) => {
-      emit('markerDblclick', e, clicks)
-      if (e.defaultPrevented)
-        return
-      props.clicksContext!.current = clicks
-      e.stopPropagation()
-      e.stopImmediatePropagation()
-    }
-    marker.onclick = (e) => {
-      emit('markerClick', e, clicks)
+  // Apply
+  return (current: number) => {
+    const enabled = props.highlight
+    for (const [parent, clicks] of parentsMap)
+      parent.classList.toggle(CLASS_FADE, enabled && !clicks.some(([_, c]) => c === current))
+    for (const [parent, clicks] of siblingsMap)
+      parent.classList.toggle(CLASS_FADE, enabled && clicks !== current)
+    for (const [marker, clicks] of markersMap) {
+      marker.classList.remove(CLASS_FADE)
+      marker.classList.toggle(`${CLASS_MARKER}-past`, enabled && clicks < current)
+      marker.classList.toggle(`${CLASS_MARKER}-active`, enabled && clicks === current)
+      marker.classList.toggle(`${CLASS_MARKER}-next`, enabled && clicks === current + 1)
+      marker.classList.toggle(`${CLASS_MARKER}-future`, enabled && clicks > current + 1)
+      marker.ondblclick = enabled
+        ? (e) => {
+            emit('markerDblclick', e, clicks)
+            if (e.defaultPrevented)
+              return
+            props.clicksContext!.current = clicks
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+          }
+        : null
+      marker.onclick = enabled
+        ? (e) => {
+            emit('markerClick', e, clicks)
+          }
+        : null
+
+      if (!enabled && props.autoScroll && clicks === current)
+        marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
     }
-
-    if (props.autoScroll && clicks === current)
-      marker.scrollIntoView({ block: 'center', behavior: 'smooth' })
   }
 }
 
+const applyHighlight = ref<ReturnType<typeof processNote>>()
+
 watch(
-  () => [props.noteHtml, props.clicksContext?.current, props.highlight],
+  () => [props.noteHtml, props.highlight],
   () => {
     nextTick(() => {
-      highlightNote()
+      applyHighlight.value = processNote()
     })
   },
   { immediate: true },
 )
 
 onMounted(() => {
-  highlightNote()
+  processNote()
+})
+
+watchEffect(() => {
+  const current = props.clicksContext?.current ?? CLICKS_MAX
+  applyHighlight.value?.(current)
 })
 </script>
 

package/internals/ShikiEditor.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue'
+import { getHighlighter } from '#slidev/shiki'
+
+const props = defineProps<{
+  placeholder?: string
+}>()
+const content = defineModel<string>({ required: true })
+
+const textareaEl = ref<HTMLTextAreaElement | null>(null)
+
+const highlight = shallowRef<Awaited<ReturnType<typeof getHighlighter>> | null>(null)
+getHighlighter().then(h => highlight.value = h)
+</script>
+
+<template>
+  <div class="absolute left-3 right-0 inset-y-2 font-mono overflow-x-hidden overflow-y-auto cursor-text">
+    <div v-if="highlight" class="relative w-full h-max min-h-full">
+      <div class="relative w-full h-max" v-html="`${highlight(content, 'markdown')}&nbsp;`" />
+      <textarea
+        ref="textareaEl" v-model="content" :placeholder="props.placeholder"
+        class="absolute inset-0 resize-none text-transparent bg-transparent focus:outline-none caret-black dark:caret-white overflow-y-hidden"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(code),
+textarea {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 1em;
+  text-wrap: wrap;
+  word-break: break-all;
+  display: block;
+  width: 100%;
+}
+:deep(pre.shiki) {
+  background-color: transparent;
+}
+</style>

package/internals/SideEditor.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { throttledWatch, useEventListener, watchThrottled } from '@vueuse/core'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { activeElement, editorHeight, editorWidth, isEditorVertical, isInputting, showEditor, isEditorVertical as vertical } from '../state'
-import { useCodeMirror } from '../modules/codemirror'
+import { throttledWatch, useEventListener } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+import { activeElement, editorHeight, editorWidth, isInputting, showEditor, isEditorVertical as vertical } from '../state'
 import { useNav } from '../composables/useNav'
 import { useDynamicSlideInfo } from '../composables/useSlideInfo'
 import IconButton from './IconButton.vue'
+import ShikiEditor from './ShikiEditor.vue'
 
 const props = defineProps<{
   resize?: boolean
@@ -18,8 +18,6 @@ const content = ref('')
 const note = ref('')
 const dirty = ref(false)
 const frontmatter = ref<any>({})
-const contentInput = ref<HTMLTextAreaElement>()
-const noteInput = ref<HTMLTextAreaElement>()
 
 const { info, update } = useDynamicSlideInfo(currentSlideNo)
 
@@ -57,65 +55,21 @@ useEventListener('keydown', (e) => {
   }
 })
 
-onMounted(async () => {
-  const contentEditor = await useCodeMirror(
-    contentInput,
-    computed({
-      get() { return content.value },
-      set(v) {
-        if (content.value.trim() !== v.trim()) {
-          content.value = v
-          dirty.value = true
-        }
-      },
-    }),
-    {
-      mode: 'markdown',
-      lineWrapping: true,
-      // @ts-expect-error missing types
-      highlightFormatting: true,
-      fencedCodeBlockDefaultMode: 'javascript',
-    },
-  )
-
-  const noteEditor = await useCodeMirror(
-    noteInput,
-    computed({
-      get() { return note.value },
-      set(v) {
-        note.value = v
-        dirty.value = true
-      },
-    }),
-    {
-      mode: 'markdown',
-      lineWrapping: true,
-      // @ts-expect-error missing types
-      highlightFormatting: true,
-      fencedCodeBlockDefaultMode: 'javascript',
-    },
-  )
-
-  watchThrottled(
-    [tab, vertical, isEditorVertical, editorWidth, editorHeight],
-    () => {
-      nextTick(() => {
-        if (tab.value === 'content')
-          contentEditor.refresh()
-        else
-          noteEditor.refresh()
-      })
-    },
-    {
-      throttle: 100,
-      flush: 'post',
-    },
-  )
+const contentRef = computed({
+  get() { return content.value },
+  set(v) {
+    if (content.value.trim() !== v.trim())
+      dirty.value = true
+    content.value = v
+  },
+})
 
-  watch(currentSlideNo, () => {
-    contentEditor.clearHistory()
-    noteEditor.clearHistory()
-  }, { flush: 'post' })
+const noteRef = computed({
+  get() { return note.value },
+  set(v) {
+    note.value = v
+    dirty.value = true
+  },
 })
 
 const handlerDown = ref(false)
@@ -171,7 +125,7 @@ throttledWatch(
     }" @pointerdown="onHandlerDown"
   />
   <div
-    class="shadow bg-main p-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
+    class="shadow bg-main p-2 pt-4 grid grid-rows-[max-content_1fr] h-full overflow-hidden"
     :class="resize ? 'border-l border-gray-400 border-opacity-20' : ''"
     :style="resize ? {
       height: vertical ? `${editorHeight}px` : undefined,
@@ -212,19 +166,9 @@ throttledWatch(
         <carbon:close />
       </IconButton>
     </div>
-    <div class="overflow-hidden">
-      <div v-show="tab === 'content'" class="w-full h-full">
-        <textarea ref="contentInput" placeholder="Create slide content..." />
-      </div>
-      <div v-show="tab === 'note'" class="w-full h-full">
-        <textarea ref="noteInput" placeholder="Write some notes..." />
-      </div>
+    <div class="relative overflow-hidden rounded" style="background-color: var(--slidev-code-background)">
+      <ShikiEditor v-show="tab === 'content'" v-model="contentRef" placeholder="Create slide content..." />
+      <ShikiEditor v-show="tab === 'note'" v-model="noteRef" placeholder="Write some notes..." />
     </div>
   </div>
 </template>
-
-<style lang="postcss">
-.CodeMirror {
-  @apply px-3 py-2 h-full overflow-hidden bg-transparent font-mono text-sm z-0;
-}
-</style>

package/internals/SlideWrapper.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toRef } from 'vue'
+import { computed, defineAsyncComponent, defineComponent, h, ref, toRef } from 'vue'
 import type { CSSProperties, PropType } from 'vue'
 import { provideLocal } from '@vueuse/core'
 import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
@@ -51,10 +51,9 @@ const SlideComponent = computed(() => props.route && defineAsyncComponent({
   loader: async () => {
     const component = await props.route.component()
     return defineComponent({
-      setup(_, { attrs }) {
-        onMounted(() => props.clicksContext?.onMounted?.())
-        return () => h(component.default, attrs)
-      },
+      mounted: props.clicksContext?.onMounted,
+      unmounted: props.clicksContext?.onUnmounted,
+      render: () => h(component.default),
     })
   },
   delay: 300,

package/logic/slides.ts

@@ -1,4 +1,7 @@
 import type { SlideRoute } from '@slidev/types'
+import { computed, watch, watchEffect } from 'vue'
+import { useSlideContext } from '../context'
+import { useNav } from '../composables/useNav'
 import { slides } from '#slidev/slides'
 
 export { slides }
@@ -18,3 +21,19 @@ export function getSlidePath(
   const no = route.meta.slide?.frontmatter.routeAlias ?? route.no
   return presenter ? `/presenter/${no}` : `/${no}`
 }
+
+export function useIsSlideActive() {
+  const { $page } = useSlideContext()
+  const { currentSlideNo } = useNav()
+  return computed(() => $page.value === currentSlideNo.value)
+}
+
+export function onSlideEnter(cb: () => void) {
+  const isActive = useIsSlideActive()
+  watchEffect(() => isActive.value && cb())
+}
+
+export function onSlideLeave(cb: () => void) {
+  const isActive = useIsSlideActive()
+  watch(isActive, () => !isActive.value && cb())
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.11",
+  "version": "0.49.13",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -28,20 +28,19 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@antfu/utils": "^0.7.8",
-    "@iconify-json/carbon": "^1.1.34",
+    "@antfu/utils": "^0.7.10",
+    "@iconify-json/carbon": "^1.1.36",
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
-    "@shikijs/monaco": "^1.6.1",
-    "@shikijs/vitepress-twoslash": "^1.6.1",
+    "@shikijs/monaco": "^1.10.0",
+    "@shikijs/vitepress-twoslash": "^1.10.0",
     "@slidev/rough-notation": "^0.1.0",
-    "@typescript/ata": "^0.9.5",
-    "@unhead/vue": "^1.9.11",
-    "@unocss/reset": "^0.60.4",
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/math": "^10.10.0",
+    "@typescript/ata": "^0.9.6",
+    "@unhead/vue": "^1.9.14",
+    "@unocss/reset": "^0.61.0",
+    "@vueuse/core": "^10.11.0",
+    "@vueuse/math": "^10.11.0",
     "@vueuse/motion": "^2.2.3",
-    "codemirror": "^5.65.16",
     "drauu": "^0.4.0",
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
@@ -49,20 +48,20 @@
     "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.1",
-    "monaco-editor": "^0.49.0",
-    "prettier": "^3.3.0",
+    "monaco-editor": "^0.50.0",
+    "prettier": "^3.3.2",
     "recordrtc": "^5.6.2",
-    "shiki": "^1.6.1",
+    "shiki": "^1.10.0",
     "shiki-magic-move": "^0.4.2",
-    "typescript": "^5.4.5",
-    "unocss": "^0.60.4",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2",
-    "yaml": "^2.4.2",
-    "@slidev/parser": "0.49.11",
-    "@slidev/types": "0.49.11"
+    "typescript": "^5.5.2",
+    "unocss": "^0.61.0",
+    "vue": "^3.4.31",
+    "vue-router": "^4.4.0",
+    "yaml": "^2.4.5",
+    "@slidev/types": "0.49.13",
+    "@slidev/parser": "0.49.13"
   },
   "devDependencies": {
-    "vite": "^5.2.12"
+    "vite": "^5.3.2"
   }
 }

package/pages/404.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNav } from '../composables/useNav'
@@ -19,22 +19,22 @@ const guessedSlide = computed(() => {
 </script>
 
 <template>
-  <div class="grid justify-center pt-15%">
+  <div class="grid justify-center text-center pt-15% gap-5">
     <div>
-      <h1 class="text-9xl font-bold">
+      <h1 class="text-9xl font-light">
         404
       </h1>
       <p class="text-2xl">
-        Page not found<code class="op-70">:{{ currentRoute.path }}</code>
+        Page <code class="op-60">{{ currentRoute.path }}</code> not found
       </p>
-      <div class="mt-3 flex flex-col gap-2">
-        <RouterLink v-if="guessedSlide !== 1" to="/" class="page-link">
-          Go Home
-        </RouterLink>
-        <RouterLink v-if="guessedSlide" :to="`/${guessedSlide}`" class="page-link">
-          Go to Slide {{ guessedSlide }}
-        </RouterLink>
-      </div>
+    </div>
+    <div class="mt-3 flex flex-col gap-2 max-w-xs mx-auto w-full">
+      <RouterLink v-if="guessedSlide !== 1" to="/" class="page-link">
+        Go Home
+      </RouterLink>
+      <RouterLink v-if="guessedSlide" :to="`/${guessedSlide}`" class="page-link">
+        Go to Slide {{ guessedSlide }}
+      </RouterLink>
     </div>
   </div>
 </template>

package/pages/overview.vue

@@ -165,7 +165,7 @@ onMounted(() => {
             <carbon:presentation-file />
           </IconButton>
           <IconButton
-            v-if="route.meta?.slide"
+            v-if="__DEV__ && route.meta?.slide"
             class="mr--3 op0 group-hover:op80"
             title="Open in editor"
             @click="openInEditor(`${route.meta.slide.filepath}:${route.meta.slide.start}`)"

package/pages/play.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, shallowRef } from 'vue'
-import { isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
+import { useStyleTag } from '@vueuse/core'
+import { editorHeight, editorWidth, isEditorVertical, isScreenVertical, showEditor, windowSize } from '../state'
 import { useSwipeControls } from '../composables/useSwipeControls'
 import { registerShortcuts } from '../logic/shortcuts'
 import Controls from '../internals/Controls.vue'
@@ -36,6 +37,19 @@ registerShortcuts()
 if (__SLIDEV_FEATURE_WAKE_LOCK__)
   useWakeLock()
 
+useStyleTag(computed(() => `
+vite-error-overlay {
+  --width: calc(100vw - ${isEditorVertical.value ? 0 : editorWidth.value}px);
+  --height: calc(100vh - ${isEditorVertical.value ? editorHeight.value : 0}px);
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: calc(var(--width) / var(--slidev-slide-scale));
+  height: calc(var(--height) / var(--slidev-slide-scale));
+  transform-origin: top left;
+  transform: scale(var(--slidev-slide-scale));
+}`))
+
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 
 const SideEditor = shallowRef<any>()

package/pages/presenter.vue

@@ -40,7 +40,6 @@ const {
   hasNext,
   nextRoute,
   slides,
-  queryClicks,
   getPrimaryClicks,
   total,
 } = useNav()
@@ -67,10 +66,10 @@ const nextFrameClicksCtx = computed(() => {
 })
 
 watch(
-  [currentSlideRoute, queryClicks],
+  nextFrame,
   () => {
-    if (nextFrameClicksCtx.value)
-      nextFrameClicksCtx.value.current = nextFrame.value![1]
+    if (nextFrameClicksCtx.value && nextFrame.value)
+      nextFrameClicksCtx.value.current = nextFrame.value[1]
   },
   { immediate: true },
 )

package/setup/code-runners.ts

@@ -1,8 +1,8 @@
 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 { isDark } from '../logic/dark'
+import { ref } from 'vue'
 import deps from '#slidev/monaco-run-deps'
 import setups from '#slidev/setups/code-runners'
 
@@ -14,17 +14,8 @@ export default createSingletonPromise(async () => {
     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 { getHighlighter } = await import('#slidev/shiki')
+  const highlight = await getHighlighter()
 
   const run = async (code: string, lang: string, options: Record<string, unknown>): Promise<CodeRunnerOutputs> => {
     try {
@@ -62,32 +53,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 +153,7 @@ async function runJavaScript(code: string): Promise<CodeRunnerOutputs> {
     return code
   }
 
-  return allLogs
+  return result
 }
 
 let tsModule: typeof import('typescript') | undefined
@@ -183,7 +174,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)
 }
 
 /**

package/setup/main.ts

@@ -13,7 +13,6 @@ import setupRoutes from '../setup/routes'
 import setups from '#slidev/setups/main'
 
 import '#slidev/styles'
-import 'shiki-magic-move/style.css'
 
 export default async function setupMain(app: App) {
   function setMaxHeight() {

package/setup/root.ts

@@ -21,7 +21,7 @@ export default function setupRoot() {
     configs,
     themeConfigs: computed(() => configs.themeConfig),
   })
-  app.provide(injectionRenderContext, ref('none'))
+  app.provide(injectionRenderContext, ref('none' as const))
   app.provide(injectionSlidevContext, context)
   app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
   app.provide(injectionClicksContext, shallowRef(createFixedClicks()))

package/state/index.ts

@@ -19,7 +19,7 @@ export const isScreenVertical = computed(() => windowSize.height.value - windowS
 export const fullscreen = useFullscreen(isClient ? document.body : null)
 
 export const activeElement = useActiveElement()
-export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || '') || activeElement.value?.classList.contains('CodeMirror-code'))
+export const isInputting = computed(() => ['INPUT', 'TEXTAREA'].includes(activeElement.value?.tagName || ''))
 export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.value?.tagName || ''))
 
 export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })

package/styles/code.css

@@ -5,6 +5,7 @@ html.dark:root {
 /* Shiki */
 html.dark .shiki {
   color: var(--shiki-dark, inherit);
+  background: var(--shiki-dark-bg, inherit);
   --twoslash-popup-bg: var(--shiki-dark-bg, inherit);
 }
 
@@ -82,8 +83,3 @@ html:not(.dark) .shiki span {
 .katex :before {
   border-color: currentColor;
 }
-
-/* CodeMirror */
-.CodeMirror pre.CodeMirror-placeholder {
-  opacity: 0.4;
-}

package/uno.config.ts

@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'node:url'
+import { readFileSync } from 'node:fs'
 import {
   defineConfig,
   presetAttributify,
@@ -42,6 +43,14 @@ export default defineConfig({
     presetAttributify(),
     presetIcons({
       collectionsNodeResolvePath: fileURLToPath(import.meta.url),
+      collections: {
+        slidev: {
+          logo: async () => {
+            const content = readFileSync(fileURLToPath(new URL('assets/logo.svg', import.meta.url)), 'utf-8')
+            return content
+          },
+        },
+      },
     }),
     presetTypography(),
   ],

package/modules/codemirror.ts

@@ -1,56 +0,0 @@
-import type { Ref, WritableComputedRef } from 'vue'
-import { onClickOutside } from '@vueuse/core'
-import { watch } from 'vue'
-import CodeMirror from 'codemirror'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/markdown/markdown'
-import 'codemirror/mode/xml/xml'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/lib/codemirror.css'
-
-export async function useCodeMirror(
-  textarea: Ref<HTMLTextAreaElement | null | undefined>,
-  input: Ref<string> | WritableComputedRef<string>,
-  options: CodeMirror.EditorConfiguration = {},
-) {
-  const cm = CodeMirror.fromTextArea(
-    textarea.value!,
-    {
-      theme: 'vars',
-      ...options,
-    },
-  )
-
-  let skip = false
-
-  cm.on('change', () => {
-    if (skip) {
-      skip = false
-      return
-    }
-    input.value = cm.getValue()
-  })
-
-  watch(
-    input,
-    (v) => {
-      if (v !== cm.getValue()) {
-        skip = true
-        const selections = cm.listSelections()
-        cm.replaceRange(v, cm.posFromIndex(0), cm.posFromIndex(Number.POSITIVE_INFINITY))
-        cm.setSelections(selections)
-      }
-    },
-    { immediate: true },
-  )
-
-  onClickOutside(cm.getWrapperElement(), () => {
-    const el = cm.getInputField()
-    if (document.activeElement === el)
-      el.blur()
-  })
-
-  return cm
-}