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

package/internals/CodeRunner.vue

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

package/internals/DomElement.vue

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

package/internals/IconButton.vue

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

package/internals/NoteEditable.vue

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

package/internals/NoteStatic.vue

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

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

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

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

package/internals/SideEditor.vue

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

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

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

package/internals/SlideWrapper.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, defineComponent, h, onMounted, ref, toRef } from 'vue'
+import type { PropType } from 'vue'
+import { provideLocal } from '@vueuse/core'
+import type { ClicksContext, RenderContext, SlideRoute } from '@slidev/types'
+import { injectionActive, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionRoute } from '../constants'
+import SlideLoading from './SlideLoading.vue'
+
+const props = defineProps({
+  clicksContext: {
+    type: Object as PropType<ClicksContext>,
+    required: true,
+  },
+  renderContext: {
+    type: String as PropType<RenderContext>,
+    default: 'slide',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  is: {
+    type: Function as PropType<() => any>,
+    required: true,
+  },
+  route: {
+    type: Object as PropType<SlideRoute>,
+    required: true,
+  },
+})
+
+provideLocal(injectionRoute, props.route)
+provideLocal(injectionCurrentPage, ref(props.route.no))
+provideLocal(injectionRenderContext, ref(props.renderContext as RenderContext))
+provideLocal(injectionActive, toRef(props, 'active'))
+provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
+
+const style = computed(() => {
+  const zoom = props.route.meta?.slide?.frontmatter.zoom ?? 1
+  return zoom === 1
+    ? undefined
+    : {
+        width: `${100 / zoom}%`,
+        height: `${100 / zoom}%`,
+        transformOrigin: 'top left',
+        transform: `scale(${zoom})`,
+      }
+})
+
+const SlideComponent = defineAsyncComponent({
+  loader: async () => {
+    const component = await props.is()
+    return defineComponent({
+      setup(_, { attrs }) {
+        onMounted(() => {
+          props.clicksContext.onMounted()
+        })
+        return () => h(component.default, attrs)
+      },
+    })
+  },
+  delay: 300,
+  loadingComponent: SlideLoading,
+})
+</script>
+
+<template>
+  <component
+    :is="SlideComponent"
+    :style="style"
+    :class="{ 'disable-view-transition': !['slide', 'presenter'].includes(props.renderContext) }"
+  />
+</template>
+
+<style scoped>
+.disable-view-transition:deep(*) {
+  view-transition-name: none !important;
+}
+</style>

package/internals/SlidesShow.vue

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

package/logic/nav.ts

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

package/logic/route.ts

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

package/logic/utils.ts

@@ -1,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())
@@ -24,7 +26,7 @@ export function useTimer() {
 
 export function makeId(length = 5) {
   const result = []
-  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
   const charactersLength = characters.length
   for (let i = 0; i < length; i++)
     result.push(characters.charAt(Math.floor(Math.random() * charactersLength)))
@@ -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/main.ts

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

package/modules/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/modules/mermaid.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.48.0-beta.21",
+  "version": "0.48.0-beta.23",
   "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",
@@ -47,20 +47,21 @@
     "js-yaml": "^4.1.0",
     "katex": "^0.16.9",
     "lz-string": "^1.5.0",
-    "mermaid": "^10.8.0",
+    "mermaid": "^10.9.0",
     "monaco-editor": "^0.46.0",
     "prettier": "^3.2.5",
     "recordrtc": "^5.6.2",
     "shiki": "^1.1.7",
-    "shiki-magic-move": "^0.1.0",
-    "typescript": "^5.3.3",
+    "shiki-magic-move": "^0.3.4",
+    "typescript": "^5.4.2",
     "unocss": "^0.58.5",
     "vue": "^3.4.21",
+    "vue-demi": "^0.14.7",
     "vue-router": "^4.3.0",
-    "@slidev/types": "0.48.0-beta.21",
-    "@slidev/parser": "0.48.0-beta.21"
+    "@slidev/types": "0.48.0-beta.23",
+    "@slidev/parser": "0.48.0-beta.23"
   },
   "devDependencies": {
-    "vite": "^5.1.4"
+    "vite": "^5.1.5"
   }
 }

package/pages/overview.vue

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

package/pages/presenter.vue

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