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

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({
@@ -87,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' })
       }
     }
   })

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

@@ -1,22 +1,26 @@
 <script setup lang="ts">
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
-import { onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import lz from 'lz-string'
 import { useSlideContext } from '../context'
-import { makeId } from '../logic/utils'
-
-import 'shiki-magic-move/style.css'
+import { makeId, updateCodeHighlightRange } from '../logic/utils'
 
 const props = defineProps<{
-  stepsLz: string
   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 index = ref(0)
+
+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)
@@ -26,25 +30,74 @@ onMounted(() => {
   if (!clicks || clicks.disabled)
     return
 
-  const { start, end, delta } = clicks.resolve(props.at || '+1', steps.length - 1)
+  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 })
 
-  watchEffect(() => {
-    if (clicks.disabled)
-      index.value = steps.length - 1
-    else
-      index.value = Math.min(Math.max(0, clicks.current - start + 1), steps.length - 1)
-  })
+  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 class="slidev-code-wrapper slidev-code-magic-move">
+  <div ref="container" class="slidev-code-wrapper slidev-code-magic-move relative">
     <ShikiMagicMovePrecompiled
       class="slidev-code relative shiki overflow-visible"
       :steps="steps"
-      :step="index"
-      :options="{ globalScale: scale }"
+      :step="stepIndex"
+      :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

@@ -1,6 +1,5 @@
-import { ref, shallowRef, toRef } from 'vue'
+import { ref, toRef } from 'vue'
 import { injectLocal, objectOmit, provideLocal } from '@vueuse/core'
-import { useFixedClicks } from './composables/useClicks'
 import {
   FRONTMATTER_FIELDS,
   HEADMATTER_FIELDS,
@@ -13,15 +12,13 @@ import {
   injectionSlidevContext,
 } from './constants'
 
-const clicksContextFallback = shallowRef(useFixedClicks())
-
 /**
  * Get the current slide context, should be called inside the setup function of a component inside slide
  */
 export function useSlideContext() {
   const $slidev = injectLocal(injectionSlidevContext)!
   const $nav = toRef($slidev, 'nav')
-  const $clicksContext = injectLocal(injectionClicksContext, clicksContextFallback)!.value
+  const $clicksContext = injectLocal(injectionClicksContext)!.value
   const $clicks = toRef($clicksContext, 'current')
   const $page = injectLocal(injectionCurrentPage)!
   const $renderContext = injectLocal(injectionRenderContext)!
@@ -42,6 +39,8 @@ export function useSlideContext() {
   }
 }
 
+export type SlideContext = ReturnType<typeof useSlideContext>
+
 export function provideFrontmatter(frontmatter: Record<string, any>) {
   provideLocal(injectionFrontmatter, frontmatter)
 

package/env.ts

@@ -1,15 +1,15 @@
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { objectMap } from '@antfu/utils'
 import configs from '#slidev/configs'
 
 export { configs }
 
-export const slideAspect = configs.aspectRatio ?? (16 / 9)
-export const slideWidth = configs.canvasWidth ?? 980
+export const slideAspect = ref(configs.aspectRatio ?? (16 / 9))
+export const slideWidth = ref(configs.canvasWidth ?? 980)
 
 // To honor the aspect ratio more as possible, we need to approximate the height to the next integer.
 // Doing this, we will prevent on print, to create an additional empty white page after each page.
-export const slideHeight = Math.ceil(slideWidth / slideAspect)
+export const slideHeight = computed(() => Math.ceil(slideWidth.value / slideAspect.value))
 
 export const themeVars = computed(() => {
   return objectMap(configs.themeConfig || {}, (k, v) => [`--slidev-theme-${k}`, v])

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>