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

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/ShikiMagicMove.vue

@@ -1,22 +1,28 @@
 <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 { makeId, updateCodeHighlightRange } from '../logic/utils'
 
 import 'shiki-magic-move/style.css'
 
 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,24 +32,68 @@ 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"
+      :step="stepIndex"
       :options="{ globalScale: scale }"
     />
   </div>

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)!

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/internals/PrintContainer.vue

@@ -12,14 +12,14 @@ const props = defineProps<{
 }>()
 
 const width = computed(() => props.width)
-const height = computed(() => props.width / slideAspect)
+const height = computed(() => props.width / slideAspect.value)
 
 const screenAspect = computed(() => width.value / height.value)
 
 const scale = computed(() => {
-  if (screenAspect.value < slideAspect)
-    return width.value / slideWidth
-  return (height.value * slideAspect) / slideWidth
+  if (screenAspect.value < slideAspect.value)
+    return width.value / slideWidth.value
+  return (height.value * slideAspect.value) / slideWidth.value
 })
 
 // In print mode, the routes will never change. So we don't need reactivity here.

package/internals/PrintSlideClick.vue

@@ -17,8 +17,8 @@ const { nav } = defineProps<{
 const route = computed(() => nav.currentSlideRoute.value)
 
 const style = computed(() => ({
-  height: `${slideHeight}px`,
-  width: `${slideWidth}px`,
+  height: `${slideHeight.value}px`,
+  width: `${slideWidth.value}px`,
 }))
 
 const DrawingPreview = shallowRef<any>()

package/internals/SlideContainer.vue

@@ -25,7 +25,7 @@ const root = ref<HTMLDivElement>()
 const element = useElementSize(root)
 
 const width = computed(() => props.width ? props.width : element.width.value)
-const height = computed(() => props.width ? props.width / slideAspect : element.height.value)
+const height = computed(() => props.width ? props.width / slideAspect.value : element.height.value)
 
 if (props.width) {
   watchEffect(() => {
@@ -41,14 +41,14 @@ const screenAspect = computed(() => width.value / height.value)
 const scale = computed(() => {
   if (props.scale && !isPrintMode.value)
     return props.scale
-  if (screenAspect.value < slideAspect)
-    return width.value / slideWidth
-  return height.value * slideAspect / slideWidth
+  if (screenAspect.value < slideAspect.value)
+    return width.value / slideWidth.value
+  return height.value * slideAspect.value / slideWidth.value
 })
 
 const style = computed(() => ({
-  'height': `${slideHeight}px`,
-  'width': `${slideWidth}px`,
+  'height': `${slideHeight.value}px`,
+  'width': `${slideWidth.value}px`,
   'transform': `translate(-50%, -50%) scale(${scale.value})`,
   '--slidev-slide-scale': scale.value,
 }))

package/logic/nav.ts

@@ -67,5 +67,5 @@ watch(
       await goLast()
     }
   },
-  { flush: 'post', immediate: true },
+  { flush: 'pre', immediate: true },
 )

package/logic/utils.ts

@@ -1,5 +1,7 @@
+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())
@@ -48,3 +50,25 @@ export function normalizeAtProp(at: string | number = '+1'): [isRelative: boolea
     n,
   ]
 }
+
+export function updateCodeHighlightRange(
+  rangeStr: string,
+  linesCount: number,
+  startLine: number,
+  getTokenOfLine: (line: number) => Element[],
+) {
+  const highlights: number[] = parseRangeString(linesCount + startLine - 1, rangeStr)
+  for (let line = 0; line < linesCount; line++) {
+    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('slidev-code-highlighted', isHighlighted)
+      token.classList.toggle('slidev-code-dishonored', !isHighlighted)
+
+      // for backward compatibility
+      token.classList.toggle('highlighted', isHighlighted)
+      token.classList.toggle('dishonored', !isHighlighted)
+    }
+  }
+}

package/modules/context.ts

@@ -1,12 +1,13 @@
 import type { App } from 'vue'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, shallowRef } from 'vue'
 import type { ComputedRef } from '@vue/reactivity'
 import type { configs } from '../env'
 import * as nav from '../logic/nav'
 import { isDark } from '../logic/dark'
-import { injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 import type { SlidevContextNav } from '../composables/useNav'
+import { useFixedClicks } from '../composables/useClicks'
 
 export interface SlidevContext {
   nav: SlidevContextNav
@@ -21,6 +22,7 @@ export function createSlidevContext() {
       app.provide(injectionRenderContext, ref('none'))
       app.provide(injectionSlidevContext, context)
       app.provide(injectionCurrentPage, computed(() => context.nav.currentSlideNo))
+      app.provide(injectionClicksContext, shallowRef(useFixedClicks()))
 
       // allows controls from postMessages
       if (__DEV__) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.21",
+  "version": "0.48.0-beta.22",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -27,14 +27,14 @@
   },
   "dependencies": {
     "@antfu/utils": "^0.7.7",
-    "@iconify-json/carbon": "^1.1.30",
+    "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/ph": "^1.1.11",
     "@iconify-json/svg-spinners": "^1.1.2",
     "@shikijs/monaco": "^1.1.7",
     "@shikijs/vitepress-twoslash": "^1.1.7",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.4",
-    "@unhead/vue": "^1.8.10",
+    "@unhead/vue": "^1.8.11",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.9.0",
     "@vueuse/math": "^10.9.0",
@@ -52,13 +52,13 @@
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "shiki": "^1.1.7",
-    "shiki-magic-move": "^0.1.0",
+    "shiki-magic-move": "^0.3.0",
     "typescript": "^5.3.3",
     "unocss": "^0.58.5",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.21",
-    "@slidev/parser": "0.48.0-beta.21"
+    "@slidev/parser": "0.48.0-beta.22",
+    "@slidev/types": "0.48.0-beta.22"
   },
   "devDependencies": {
     "vite": "^5.1.4"

package/state/index.ts

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

package/styles/code.css

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