@slidev/client 52.18.0 → 52.19.0

package/builtin/CodeBlockWrapper.vue

@@ -51,8 +51,9 @@ const props = defineProps({
     default: '',
   },
 })
+const { $frontmatter, $clicksContext: clicks } = useSlideContext()
+const isCodeCopy = computed(() => $frontmatter?.codeCopy ?? configs.codeCopy)
 
-const { $clicksContext: clicks } = useSlideContext()
 const el = ref<HTMLDivElement>()
 const id = makeId()
 
@@ -152,7 +153,7 @@ const isBlockTitleShow = computed(() => {
     </div>
     <slot />
     <button
-      v-if="configs.codeCopy"
+      v-if="isCodeCopy"
       class="slidev-code-copy absolute right-0 transition opacity-0 group-hover:opacity-20 hover:!opacity-100"
       :class="isBlockTitleShow ? 'top-10' : 'top-0'"
       :title="copied ? 'Copied' : 'Copy'" @click="copyCode()"

package/builtin/Monaco.vue

@@ -20,6 +20,7 @@ import lz from 'lz-string'
 import { computed, defineAsyncComponent, nextTick, onMounted, ref } from 'vue'
 import { useNav } from '../composables/useNav'
 import { useSlideContext } from '../context'
+import { configs } from '../env'
 import { makeId } from '../logic/utils'
 
 const props = withDefaults(
@@ -28,6 +29,7 @@ const props = withDefaults(
     diffLz?: string
     lang?: string
     readonly?: boolean
+    lines?: boolean
     lineNumbers?: 'on' | 'off' | 'relative' | 'interval'
     height?: number | string // Posible values: 'initial', 'auto', '100%', '200px', etc.
     editorOptions?: monaco.editor.IEditorOptions
@@ -44,7 +46,7 @@ const props = withDefaults(
     codeLz: '',
     lang: 'typescript',
     readonly: false,
-    lineNumbers: 'off',
+    lines: configs.lineNumbers,
     height: 'initial',
     ata: true,
     runnable: false,
@@ -58,6 +60,7 @@ const CodeRunner = defineAsyncComponent(() => import('../internals/CodeRunner.vu
 const code = ref(lz.decompressFromBase64(props.codeLz).trimEnd())
 const diff = props.diffLz && ref(lz.decompressFromBase64(props.diffLz).trimEnd())
 const isWritable = computed(() => props.writable && !props.readonly && __DEV__)
+const lineNumbers = props.lineNumbers ?? (props.lines ? 'on' : 'off')
 
 const langMap: Record<string, string> = {
   ts: 'typescript',
@@ -106,7 +109,7 @@ onMounted(async () => {
   const commonOptions = {
     automaticLayout: true,
     readOnly: props.readonly,
-    lineNumbers: props.lineNumbers,
+    lineNumbers,
     minimap: { enabled: false },
     overviewRulerBorder: false,
     overviewRulerLanes: 0,

package/builtin/ShikiMagicMove.vue

@@ -41,7 +41,7 @@ const props = defineProps({
 })
 
 const steps = JSON.parse(lz.decompressFromBase64(props.stepsLz)) as KeyedTokensInfo[]
-const { $clicksContext: clicks, $scale: scale, $zoom: zoom } = useSlideContext()
+const { $clicksContext: clicks, $scale: scale, $zoom: zoom, $frontmatter } = useSlideContext()
 const { isPrintMode } = useNav()
 const id = makeId()
 
@@ -51,10 +51,11 @@ const isFirstTick = ref(true)
 const container = ref<HTMLElement>()
 
 const showCopyButton = computed(() => {
-  if (!configs.codeCopy)
+  const codeCopy = $frontmatter?.codeCopy ?? configs.codeCopy
+  if (!codeCopy)
     return false
 
-  const magicCopy = configs.magicMoveCopy
+  const magicCopy = $frontmatter?.magicMoveCopy ?? configs.magicMoveCopy
   if (!magicCopy)
     return false
 

package/composables/useNav.test.ts

@@ -1,17 +1,36 @@
 import type { ClicksContext, SlideRoute } from '@slidev/types'
+import type { SlidevContextNav } from './useNav'
+import { renderToString } from '@vue/server-renderer'
+import { provideLocal } from '@vueuse/core'
 import { describe, expect, it, vi } from 'vitest'
-import { computed, ref } from 'vue'
-import { useNavBase } from './useNav'
+import { computed, createSSRApp, defineComponent, h, reactive, ref } from 'vue'
+import { injectionSlidevContext } from '../constants'
+import { useNav, useNavBase } from './useNav'
 
 vi.mock('#slidev/slides', async () => {
   const { ref } = await import('vue')
-  return { slides: ref([]) }
+  return {
+    slides: ref([
+      {
+        no: 1,
+        meta: {
+          slide: { frontmatter: { title: 'First' } },
+        },
+      },
+      {
+        no: 2,
+        meta: {
+          slide: { frontmatter: { title: 'Second' } },
+        },
+      },
+    ]),
+  }
 })
 
 vi.mock('../env', async () => {
   const { ref } = await import('vue')
   return {
-    configs: {},
+    configs: { remote: false },
     slideAspect: ref(16 / 9),
   }
 })
@@ -21,6 +40,24 @@ vi.mock('../state', async () => {
   return { hmrSkipTransition: ref(false) }
 })
 
+vi.mock('vue-router', async () => {
+  const { reactive, ref } = await import('vue')
+  const route = reactive({
+    name: 'export',
+    params: { no: '1' },
+    query: {},
+  })
+  const router = {
+    currentRoute: ref(route),
+    push: vi.fn(),
+    replace: vi.fn(),
+  }
+  return {
+    useRoute: () => route,
+    useRouter: () => router,
+  }
+})
+
 function route(no: number, frontmatter: Record<string, any>): SlideRoute {
   return {
     no,
@@ -53,4 +90,51 @@ describe('useNavBase', () => {
       section: 'body',
     })
   })
+
+  it('uses the slide-local navigation context while rendering exported slides', async () => {
+    vi.stubGlobal('location', { search: '' })
+    let observedNav: SlidevContextNav | undefined
+    const localNav = {
+      currentSlideNo: computed(() => 2),
+      currentPage: computed(() => 2),
+      currentSlideRoute: computed(() => route(2, { title: 'Second' })),
+      tocTree: computed(() => [
+        { no: 1, active: false },
+        { no: 2, active: true },
+      ]),
+    } as unknown as SlidevContextNav
+
+    const Child = defineComponent({
+      setup() {
+        observedNav = useNav()
+        return () => h('span')
+      },
+    })
+    const App = defineComponent({
+      setup() {
+        provideLocal(injectionSlidevContext, reactive({
+          nav: localNav,
+          configs: {},
+          themeConfigs: {},
+        }) as any)
+        return () => h(Child)
+      },
+    })
+
+    await renderToString(createSSRApp(App))
+
+    expect(observedNav?.currentSlideNo.value).toBe(2)
+    expect(observedNav?.currentSlideRoute.value.meta.slide.frontmatter.title).toBe('Second')
+    expect(observedNav?.tocTree.value[1].active).toBe(true)
+  })
+
+  it('falls back to the shared nav when there is no injection context', () => {
+    // Directive hooks such as `v-motion`'s and `v-mark`'s `mounted` call
+    // `useNav()` while no component instance is current. There is no
+    // slide-local context to read there, so the shared nav is the answer.
+    vi.stubGlobal('location', { search: '' })
+
+    expect(() => useNav()).not.toThrow()
+    expect(useNav().currentSlideNo.value).toBe(1)
+  })
 })

package/composables/useNav.ts

@@ -3,11 +3,11 @@ import type { ComputedRef, Ref, TransitionGroupProps, WritableComputedRef } from
 import type { RouteLocationNormalized, Router } from 'vue-router'
 import { clamp } from '@antfu/utils'
 import { parseRangeString } from '@slidev/parser/utils'
-import { createSharedComposable } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import { createSharedComposable, injectLocal } from '@vueuse/core'
+import { computed, hasInjectionContext, ref, toRaw, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { slides } from '#slidev/slides'
-import { CLICKS_MAX } from '../constants'
+import { CLICKS_MAX, injectionSlidevContext } from '../constants'
 import { configs } from '../env'
 import { useRouteQuery } from '../logic/route'
 import { getSlide, getSlidePath } from '../logic/slides'
@@ -365,7 +365,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   }
 })
 
-export const useNav = createSharedComposable((): SlidevContextNavFull => {
+const useSharedNav = createSharedComposable((): SlidevContextNavFull => {
   const state = useNavState()
   const router = useRouter()
 
@@ -401,3 +401,22 @@ export const useNav = createSharedComposable((): SlidevContextNavFull => {
     ...state,
   }
 })
+
+export function useNav(): SlidevContextNavFull {
+  const nav = useSharedNav()
+  // `useNav()` is also called outside of `setup()`, most notably from the
+  // `mounted`/`created` hooks of the `v-motion` and `v-mark` directives.
+  // `injectLocal` throws there, and there is no slide-local context to read
+  // anyway, so fall back to the shared nav.
+  const context = hasInjectionContext()
+    ? injectLocal(injectionSlidevContext, undefined)
+    : undefined
+  if (!context)
+    return nav
+
+  const localNav = toRaw(context).nav as unknown as SlidevContextNav
+  return {
+    ...nav,
+    ...localNav,
+  }
+}

package/internals/Goto.vue

@@ -111,7 +111,7 @@ watch(activeElement, () => {
     ref="container"
     class="fixed right-5 transition-all"
     w-90 max-w-90 min-w-90
-    :class="showGotoDialog ? 'top-5' : '-top-20'"
+    :class="showGotoDialog ? 'top-5' : '-top-20 op0 pointer-events-none'"
   >
     <div
       class="bg-main transform"

package/internals/TitleIcon.vue

@@ -82,5 +82,5 @@ function matchIcon(title: string) {
 </script>
 
 <template>
-  <div v-if="matchIcon(title)" :class="`${matchIcon(title)} w-3.5 h-3.5 relative`" />
+  <div v-if="matchIcon(title)" class="w-3.5 h-3.5 relative" :class="matchIcon(title)" />
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "52.18.0",
+  "version": "52.19.0",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -30,45 +30,45 @@
   "dependencies": {
     "@antfu/utils": "^9.3.0",
     "@fix-webm-duration/fix": "^1.0.1",
-    "@iconify-json/carbon": "^1.2.24",
+    "@iconify-json/carbon": "^1.2.25",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.4",
-    "@shikijs/engine-javascript": "^4.3.1",
-    "@shikijs/magic-move": "^4.3.1",
-    "@shikijs/monaco": "^4.3.1",
-    "@shikijs/vitepress-twoslash": "^4.3.1",
+    "@shikijs/engine-javascript": "^4.4.1",
+    "@shikijs/magic-move": "^4.4.1",
+    "@shikijs/monaco": "^4.4.1",
+    "@shikijs/vitepress-twoslash": "^4.4.1",
     "@slidev/rough-notation": "^0.1.0",
     "@typescript/ata": "^0.9.8",
-    "@unhead/vue": "^3.1.7",
+    "@unhead/vue": "^3.2.3",
     "@unocss/extractor-mdc": "^66.7.5",
     "@unocss/preset-mini": "^66.7.5",
     "@unocss/reset": "^66.7.5",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/math": "^14.3.0",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/math": "^14.4.0",
     "@vueuse/motion": "^3.0.3",
     "ansis": "^4.3.1",
     "drauu": "^1.0.0",
     "file-saver": "^2.0.5",
     "fitty": "^2.4.2",
     "floating-vue": "^5.2.2",
-    "fuse.js": "^7.4.2",
-    "katex": "^0.17.0",
+    "fuse.js": "^7.5.0",
+    "katex": "^0.18.1",
     "lz-string": "^1.5.0",
     "mermaid": "^11.16.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "nanotar": "^0.3.0",
     "pptxgenjs": "^4.0.1",
     "recordrtc": "^5.6.2",
-    "shiki": "^4.3.1",
+    "shiki": "^4.4.1",
     "typescript": "^6.0.3",
     "unocss": "^66.7.5",
-    "vue": "^3.5.39",
-    "vue-router": "^5.1.0",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0",
     "yaml": "^2.9.0",
-    "@slidev/parser": "52.18.0",
-    "@slidev/types": "52.18.0"
+    "@slidev/parser": "52.19.0",
+    "@slidev/types": "52.19.0"
   },
   "devDependencies": {
-    "vite": "^8.1.3"
+    "vite": "^8.2.0"
   }
 }

package/setup/monaco.ts

@@ -3,18 +3,18 @@ import { createSingletonPromise } from '@antfu/utils'
 import { shikiToMonaco } from '@shikijs/monaco'
 import { setupTypeAcquisition } from '@typescript/ata'
 import * as monaco from 'monaco-editor'
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import EditorWorker from 'monaco-editor/editor/editor.worker?worker'
 // @ts-expect-error missing types
-import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
+import { StandaloneServices } from 'monaco-editor/editor/standalone/browser/standaloneServices'
 
-import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import CssWorker from 'monaco-editor/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/language/html/html.worker?worker'
+import JsonWorker from 'monaco-editor/language/json/json.worker?worker'
+import TsWorker from 'monaco-editor/language/typescript/ts.worker?worker'
 // @ts-expect-error missing types
-import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
+import { ContextViewService } from 'monaco-editor/platform/contextview/browser/contextViewService'
 // @ts-expect-error missing types
-import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
+import { SyncDescriptor } from 'monaco-editor/platform/instantiation/common/descriptors'
 import ts from 'typescript'
 import { watchEffect } from 'vue'