@slidev/client 0.48.0-beta.9 → 0.48.1

package/App.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { watchEffect } from 'vue'
+import { themeVars } from './env'
 import setupRoot from './setup/root'
 
 setupRoot()
+
+watchEffect(() => {
+  for (const [key, value] of Object.entries(themeVars.value))
+    document.body.style.setProperty(key, value.toString())
+})
 </script>
 
 <template>

package/builtin/Arrow.vue

@@ -9,7 +9,7 @@ Simple Arrow
 -->
 
 <script setup lang="ts">
-import { customAlphabet } from 'nanoid'
+import { makeId } from '../logic/utils'
 
 defineProps<{
   x1: number | string
@@ -20,9 +20,7 @@ defineProps<{
   color?: string
 }>()
 
-const nanoid = customAlphabet('abcedfghijklmn', 10)
-
-const id = nanoid()
+const id = makeId()
 </script>
 
 <template>

package/builtin/CodeBlockWrapper.vue

@@ -12,13 +12,12 @@ Learn more: https://sli.dev/guide/syntax.html#line-highlighting
 -->
 
 <script setup lang="ts">
-import { parseRangeString } from '@slidev/parser/core'
 import { useClipboard } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import { configs } from '../env'
-import { makeId } from '../logic/utils'
-import { CLASS_VCLICK_HIDDEN, CLASS_VCLICK_TARGET } from '../constants'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
+import { CLASS_VCLICK_HIDDEN } from '../constants'
 import { useSlideContext } from '../context'
 
 const props = defineProps({
@@ -56,8 +55,12 @@ onUnmounted(() => {
   clicks!.unregister(id)
 })
 
+watchEffect(() => {
+  el.value?.classList.toggle('slidev-code-line-numbers', props.lines)
+})
+
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks || clicks.disabled || !props.ranges?.length)
     return
 
   const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)
@@ -83,28 +86,27 @@ onMounted(() => {
     if (hide)
       rangeStr = props.ranges[index.value + 1] ?? finallyRange.value
 
-    const isDuoTone = el.value.querySelector('.shiki-dark')
-    const targets = isDuoTone ? Array.from(el.value.querySelectorAll('.shiki')) : [el.value]
-    const startLine = props.startLine
-    for (const target of targets) {
-      const lines = Array.from(target.querySelectorAll('code > .line'))
-      const highlights: number[] = parseRangeString(lines.length + startLine - 1, rangeStr)
-      lines.forEach((line, idx) => {
-        const highlighted = highlights.includes(idx + startLine)
-        line.classList.toggle(CLASS_VCLICK_TARGET, true)
-        line.classList.toggle('highlighted', highlighted)
-        line.classList.toggle('dishonored', !highlighted)
-      })
-      if (props.maxHeight) {
-        const highlightedEls = Array.from(target.querySelectorAll('.line.highlighted')) as HTMLElement[]
-        const height = highlightedEls.reduce((acc, el) => el.offsetHeight + acc, 0)
-        if (height > el.value.offsetHeight) {
-          highlightedEls[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
-        }
-        else if (highlightedEls.length > 0) {
-          const middleEl = highlightedEls[Math.round((highlightedEls.length - 1) / 2)]
-          middleEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
-        }
+    const pre = el.value.querySelector('.shiki')!
+    const lines = Array.from(pre.querySelectorAll('code > .line'))
+    const linesCount = lines.length
+
+    updateCodeHighlightRange(
+      rangeStr,
+      linesCount,
+      props.startLine,
+      no => [lines[no]],
+    )
+
+    // Scroll to the highlighted line if `maxHeight` is set
+    if (props.maxHeight) {
+      const highlightedEls = Array.from(pre.querySelectorAll('.line.highlighted')) as HTMLElement[]
+      const height = highlightedEls.reduce((acc, el) => el.offsetHeight + acc, 0)
+      if (height > el.value.offsetHeight) {
+        highlightedEls[0].scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+      else if (highlightedEls.length > 0) {
+        const middleEl = highlightedEls[Math.round((highlightedEls.length - 1) / 2)]
+        middleEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
       }
     }
   })
@@ -121,9 +123,12 @@ function copyCode() {
 
 <template>
   <div
-    ref="el" class="slidev-code-wrapper relative group" :class="{
+    ref="el"
+    class="slidev-code-wrapper relative group"
+    :class="{
       'slidev-code-line-numbers': props.lines,
-    }" :style="{
+    }"
+    :style="{
       'max-height': props.maxHeight,
       'overflow-y': props.maxHeight ? 'scroll' : undefined,
       '--start': props.startLine,

package/builtin/KaTexBlockWrapper.vue

@@ -55,7 +55,7 @@ onUnmounted(() => {
 })
 
 onMounted(() => {
-  if (!clicks || clicks.disabled)
+  if (!clicks || clicks.disabled || !props.ranges?.length)
     return
 
   const { start, end, delta } = clicks.resolve(props.at, props.ranges.length - 1)

package/builtin/Link.vue

@@ -8,12 +8,14 @@ Usage:
 <Link :to="5" title="Go to slide 5" />
 -->
 <script setup lang="ts">
-import { isPrintMode } from '../logic/nav'
+import { useNav } from '../composables/useNav'
 
 defineProps<{
   to: number | string
   title?: string
 }>()
+
+const { isPrintMode } = useNav()
 </script>
 
 <template>

package/builtin/Mermaid.vue

@@ -19,7 +19,7 @@ import ShadowRoot from '../internals/ShadowRoot.vue'
 import { isDark } from '../logic/dark'
 
 const props = defineProps<{
-  code: string
+  codeLz: string
   scale?: number
   theme?: string
 }>()
@@ -37,7 +37,7 @@ watchEffect(async (onCleanup) => {
   error.value = null
   try {
     const svg = await renderMermaid(
-      props.code || '',
+      props.codeLz || '',
       {
         theme: props.theme || (isDark.value ? 'dark' : undefined),
         ...vm!.attrs,
@@ -48,6 +48,7 @@ watchEffect(async (onCleanup) => {
   }
   catch (e) {
     error.value = `${e}`
+    console.warn(e)
   }
 })
 
@@ -76,6 +77,6 @@ watchEffect(() => {
 </script>
 
 <template>
-  <pre v-if="error" border="1 red rounded" class="pa-3">{{ error }}</pre>
+  <pre v-if="error" border="1 red rounded" class="pa-3 text-wrap">{{ error }}</pre>
   <ShadowRoot v-else class="mermaid" :inner-html="html" @shadow="el = $event" />
 </template>

package/builtin/Monaco.vue

@@ -12,122 +12,195 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { useEventListener } from '@vueuse/core'
-import { decode } from 'js-base64'
-import { nanoid } from 'nanoid'
+import { debounce } from '@antfu/utils'
+import lz from 'lz-string'
 import type * as monaco from 'monaco-editor'
-import { isDark } from '../logic/dark'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { makeId } from '../logic/utils'
+import CodeRunner from '../internals/CodeRunner.vue'
 
 const props = withDefaults(defineProps<{
-  code: string
-  diff?: string
+  codeLz: string
+  diffLz?: string
   lang?: string
   readonly?: boolean
   lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
-  height?: number | string
+  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>
 }>(), {
-  code: '',
+  codeLz: '',
   lang: 'typescript',
   readonly: false,
   lineNumbers: 'off',
-  height: 'auto',
+  height: 'initial',
+  ata: true,
+  runnable: false,
+  autorun: true,
+  highlightOutput: true,
 })
 
-const id = nanoid()
-const code = ref(decode(props.code).trimEnd())
-const diff = ref(props.diff ? decode(props.diff).trimEnd() : null)
-const lineHeight = +(getComputedStyle(document.body).getPropertyValue('--slidev-code-line-height') || '18').replace('px', '') || 18
-const editorHeight = ref(0)
-const calculatedHeight = computed(() => code.value.split(/\r?\n/g).length * lineHeight)
-const height = computed(() => {
-  return props.height === 'auto' ? `${Math.max(calculatedHeight.value, editorHeight.value) + 20}px` : props.height
-})
+const code = ref(lz.decompressFromBase64(props.codeLz).trimEnd())
+const diff = props.diffLz && ref(lz.decompressFromBase64(props.diffLz).trimEnd())
 
-const iframe = ref<HTMLIFrameElement>()
-
-const cssVars = [
-  '--slidev-code-font-size',
-  '--slidev-code-font-family',
-  '--slidev-code-background',
-  '--slidev-code-line-height',
-  '--slidev-code-padding',
-  '--slidev-code-margin',
-  '--slidev-code-radius',
-]
-
-function getStyleObject(el: Element) {
-  const object: Record<string, string> = {}
-  const style = getComputedStyle(el)
-  for (const v of cssVars)
-    object[v] = style.getPropertyValue(v)
-  return object
+const langMap: Record<string, string> = {
+  ts: 'typescript',
+  js: 'javascript',
+}
+const lang = langMap[props.lang] ?? props.lang
+const extMap: Record<string, string> = {
+  typescript: 'mts',
+  javascript: 'mjs',
+  ts: 'mts',
+  js: 'mjs',
 }
+const ext = extMap[props.lang] ?? props.lang
 
-onMounted(() => {
-  const frame = iframe.value!
-  frame.setAttribute('sandbox', [
-    'allow-forms',
-    'allow-modals',
-    'allow-pointer-lock',
-    'allow-popups',
-    'allow-same-origin',
-    'allow-scripts',
-    'allow-top-navigation-by-user-activation',
-  ].join(' '))
-
-  let src = __DEV__
-    ? `${location.origin}${__SLIDEV_CLIENT_ROOT__}/`
-    : import.meta.env.BASE_URL
-  src += `iframes/monaco/index.html?id=${id}&lineNumbers=${props.lineNumbers}&lang=${props.lang}`
-  if (diff.value)
-    src += '&diff=1'
-  frame.src = src
-
-  frame.style.backgroundColor = 'transparent'
+const outer = ref<HTMLDivElement>()
+const container = ref<HTMLDivElement>()
+
+const contentHeight = ref(0)
+const initialHeight = ref<number>()
+const height = computed(() => {
+  if (props.height === 'auto')
+    return `${contentHeight.value}px`
+  if (props.height === 'initial')
+    return `${initialHeight.value}px`
+  return props.height
 })
 
-function post(payload: any) {
-  iframe.value?.contentWindow?.postMessage(
-    JSON.stringify({
-      type: 'slidev-monaco',
-      data: payload,
-      id,
-    }),
-    location.origin,
-  )
-}
+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.value, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
+  model.onDidChangeContent(() => code.value = model.getValue())
+  const commonOptions = {
+    automaticLayout: true,
+    readOnly: props.readonly,
+    lineNumbers: props.lineNumbers,
+    minimap: { enabled: false },
+    overviewRulerBorder: false,
+    overviewRulerLanes: 0,
+    padding: { top: 10, bottom: 10 },
+    lineNumbersMinChars: 3,
+    bracketPairColorization: { enabled: false },
+    tabSize: 2,
+    fontSize: 11.5,
+    fontFamily: 'var(--slidev-code-font-family)',
+    scrollBeyondLastLine: false,
+    ...props.editorOptions,
+  } satisfies monaco.editor.IStandaloneEditorConstructionOptions & monaco.editor.IDiffEditorConstructionOptions
 
-useEventListener(window, 'message', ({ data: payload }) => {
-  if (payload.id !== id)
-    return
-  if (payload.type === 'slidev-monaco-loaded') {
-    if (iframe.value) {
-      post({
-        code: code.value,
-        diff: diff.value,
-        lang: props.lang,
-        readonly: props.readonly,
-        lineNumbers: props.lineNumbers,
-        editorOptions: props.editorOptions,
-        dark: isDark.value,
-        style: Object.entries(getStyleObject(iframe.value)).map(([k, v]) => `${k}: ${v};`).join(''),
-      })
+  let editableEditor: monaco.editor.IStandaloneCodeEditor
+  if (diff) {
+    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,
+    })
+    editor.setModel({
+      original: model,
+      modified: diffModel,
+    })
+    const originalEditor = editor.getOriginalEditor()
+    const modifiedEditor = editor.getModifiedEditor()
+    const onContentSizeChange = () => {
+      const newHeight = Math.max(originalEditor.getContentHeight(), modifiedEditor.getContentHeight()) + 4
+      initialHeight.value ??= newHeight
+      contentHeight.value = newHeight
+      nextTick(() => editor.layout())
     }
-    return
+    originalEditor.onDidContentSizeChange(onContentSizeChange)
+    modifiedEditor.onDidContentSizeChange(onContentSizeChange)
+    editableEditor = modifiedEditor
   }
-  if (payload.type !== 'slidev-monaco')
-    return
-  if (payload.data?.height)
-    editorHeight.value = payload.data?.height
-  if (payload?.data?.code && code.value !== payload.data.code)
-    code.value = payload.data.code
-  if (payload?.data?.diff && diff.value !== payload.data.diff)
-    diff.value = payload.data.diff
+  else {
+    const editor = monaco.editor.create(container.value!, {
+      model,
+      lineDecorationsWidth: 0,
+      ...commonOptions,
+    })
+    editor.onDidContentSizeChange((e) => {
+      const newHeight = e.contentHeight + 4
+      initialHeight.value ??= newHeight
+      contentHeight.value = newHeight
+      nextTick(() => editableEditor.layout())
+    })
+    editableEditor = editor
+  }
+  if (props.ata) {
+    ata(editableEditor.getValue())
+    editableEditor.onDidChangeModelContent(debounce(1000, () => {
+      ata(editableEditor.getValue())
+    }))
+  }
+  const originalLayoutContentWidget = editableEditor.layoutContentWidget.bind(editableEditor)
+  editableEditor.layoutContentWidget = (widget: any) => {
+    originalLayoutContentWidget(widget)
+    const id = widget.getId()
+    if (id === 'editor.contrib.resizableContentHoverWidget') {
+      widget._resizableNode.domNode.style.transform = widget._positionPreference === 1
+        ? /* ABOVE */ `translateY(calc(100% * (var(--slidev-slide-scale) - 1)))`
+        : /* BELOW */ `` // reset
+    }
+  }
+  nextTick(() => monaco.editor.remeasureFonts())
 })
 </script>
 
 <template>
-  <iframe ref="iframe" class="text-base w-full rounded" :style="{ height }" />
+  <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

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
+import type { KeyedTokensInfo } from 'shiki-magic-move/types'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import lz from 'lz-string'
+import { useSlideContext } from '../context'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
+
+const props = defineProps<{
+  at?: string | number
+  stepsLz: string
+  stepRanges: string[][]
+}>()
+
+const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
+const { $clicksContext: clicks, $scale: scale } = useSlideContext()
+const id = makeId()
+
+const stepIndex = ref(0)
+const container = ref<HTMLElement>()
+
+// Normalized the ranges, to at least have one range
+const ranges = computed(() => props.stepRanges.map(i => i.length ? i : ['all']))
+
+onUnmounted(() => {
+  clicks!.unregister(id)
+})
+
+onMounted(() => {
+  if (!clicks || clicks.disabled)
+    return
+
+  if (ranges.value.length !== steps.length)
+    throw new Error('[slidev] The length of stepRanges does not match the length of steps, this is an internal error.')
+
+  const clickCounts = ranges.value.map(s => s.length).reduce((a, b) => a + b, 0)
+  const { start, end, delta } = clicks.resolve(props.at ?? '+1', clickCounts - 1)
+  clicks.register(id, { max: end, delta })
+
+  watch(
+    () => clicks.current,
+    () => {
+      // Calculate the step and rangeStr based on the current click count
+      const clickCount = clicks.current - start
+      let step = steps.length - 1
+      let _currentClickSum = 0
+      let rangeStr = 'all'
+      for (let i = 0; i < ranges.value.length; i++) {
+        const current = ranges.value[i]
+        if (clickCount < _currentClickSum + current.length - 1) {
+          step = i
+          rangeStr = current[clickCount - _currentClickSum + 1]
+          break
+        }
+        _currentClickSum += current.length || 1
+      }
+      stepIndex.value = step
+
+      const pre = container.value?.querySelector('.shiki') as HTMLElement
+      if (!pre)
+        return
+
+      const children = (Array.from(pre.children) as HTMLElement[])
+        .slice(1) // Remove the first anchor
+        .filter(i => !i.className.includes('shiki-magic-move-leave')) // Filter the leaving elements
+
+      // Group to lines between `<br>`
+      const lines = children.reduce((acc, el) => {
+        if (el.tagName === 'BR')
+          acc.push([])
+        else
+          acc[acc.length - 1].push(el)
+        return acc
+      }, [[]] as HTMLElement[][])
+
+      // Update highlight range
+      updateCodeHighlightRange(
+        rangeStr,
+        lines.length,
+        1,
+        no => lines[no],
+      )
+    },
+    { immediate: true },
+  )
+})
+</script>
+
+<template>
+  <div ref="container" class="slidev-code-wrapper slidev-code-magic-move relative">
+    <ShikiMagicMovePrecompiled
+      class="slidev-code relative shiki overflow-visible"
+      :steps="steps"
+      :step="stepIndex"
+      :options="{
+        globalScale: scale,
+        // TODO: make this configurable later
+        duration: 800,
+        stagger: 1,
+      }"
+    />
+  </div>
+</template>

package/builtin/SlidevVideo.vue

@@ -22,7 +22,7 @@ const ended = ref(false)
 const matchRoute = computed(() => {
   if (!video.value || currentContext?.value !== 'slide')
     return false
-  return route === $slidev?.nav.currentRoute
+  return route && route.no === $slidev?.nav.currentSlideNo
 })
 
 const matchClick = computed(() => {

package/builtin/Toc.vue

@@ -74,7 +74,7 @@ function filterOnlySiblings(tree: TocItem[]): TocItem[] {
 }
 
 const toc = computed(() => {
-  const tree = $slidev?.nav.tree
+  const tree = $slidev?.nav.tocTree
   if (!tree)
     return []
   let tocTree = filterTreeDepth(tree)

package/builtin/TocList.vue

@@ -10,7 +10,7 @@ Usage:
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
 import type { TocItem } from '@slidev/types'
-import Titles from '/@slidev/titles.md'
+import TitleRenderer from '#slidev/title-renderer'
 
 const props = withDefaults(defineProps<{
   level: number
@@ -48,7 +48,7 @@ const styles = computed(() => {
       :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
     >
       <Link :to="item.path">
-        <Titles :no="item.path" />
+        <TitleRenderer :no="item.no" />
       </Link>
       <TocList
         v-if="item.children.length > 0"
@@ -65,7 +65,8 @@ const styles = computed(() => {
 .slidev-layout .slidev-toc-item p {
   margin: 0;
 }
-.slidev-layout .slidev-toc-item div, .slidev-layout .slidev-toc-item div p {
+.slidev-layout .slidev-toc-item div,
+.slidev-layout .slidev-toc-item div p {
   display: initial;
 }
 </style>

package/builtin/Tweet.vue

@@ -7,9 +7,8 @@ Usage:
 -->
 
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { isDark } from '../logic/dark'
-import { useTweetScript } from '../composables/useTweetScript'
 
 const props = defineProps<{
   id: string | number
@@ -20,11 +19,17 @@ const props = defineProps<{
 
 const tweet = ref<HTMLElement | null>()
 
-const vm = getCurrentInstance()!
 const loaded = ref(false)
 const tweetNotFound = ref(false)
 
-async function create() {
+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(),
@@ -40,11 +45,9 @@ async function create() {
     tweetNotFound.value = true
 }
 
-// @ts-expect-error global
-if (window?.twttr?.widgets)
-  onMounted(create)
-else
-  useTweetScript(vm, create)
+onMounted(() => {
+  create()
+})
 </script>
 
 <template>