@slidev/client 52.17.2 → 52.18.1

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/composables/useNav.test.ts

@@ -0,0 +1,130 @@
+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, 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([
+      {
+        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: { remote: false },
+    slideAspect: ref(16 / 9),
+  }
+})
+
+vi.mock('../state', async () => {
+  const { ref } = await import('vue')
+  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,
+    meta: {
+      slide: { frontmatter },
+    },
+  } as unknown as SlideRoute
+}
+
+describe('useNavBase', () => {
+  it('exposes reactive frontmatter for the current slide', () => {
+    const currentRoute = ref(route(1, { title: 'Intro', section: 'start' }))
+    const nav = useNavBase(
+      computed(() => currentRoute.value),
+      computed(() => ({ current: 0, clicksStart: 0, total: 0 }) as ClicksContext),
+      ref(0),
+      ref(false),
+      ref(false),
+    )
+
+    expect(nav.currentFrontmatter.value).toEqual({
+      title: 'Intro',
+      section: 'start',
+    })
+
+    currentRoute.value = route(2, { title: 'Details', section: 'body' })
+
+    expect(nav.currentFrontmatter.value).toEqual({
+      title: 'Details',
+      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)
+  })
+})

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, 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'
@@ -26,6 +26,7 @@ export interface SlidevContextNav {
   currentSlideRoute: ComputedRef<SlideRoute>
   currentTransition: ComputedRef<TransitionGroupProps | undefined>
   currentLayout: ComputedRef<string>
+  currentFrontmatter: ComputedRef<Record<string, any>>
 
   nextRoute: ComputedRef<SlideRoute>
   prevRoute: ComputedRef<SlideRoute>
@@ -105,6 +106,7 @@ export function useNavBase(
   const currentPath = computed(() => getSlidePath(currentSlideRoute.value, isPresenter.value))
   const currentSlideNo = computed(() => currentSlideRoute.value.no)
   const currentLayout = computed(() => currentSlideRoute.value.meta?.layout || (currentSlideNo.value === 1 ? 'cover' : 'default'))
+  const currentFrontmatter = computed(() => currentSlideRoute.value.meta.slide.frontmatter)
 
   const clicks = computed(() => clicksContext.value.current)
   const clicksStart = computed(() => clicksContext.value.clicksStart)
@@ -223,6 +225,7 @@ export function useNavBase(
     currentPage: currentSlideNo,
     currentSlideRoute,
     currentLayout,
+    currentFrontmatter,
     currentTransition,
     clicksDirection,
     nextRoute,
@@ -362,7 +365,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
   }
 })
 
-export const useNav = createSharedComposable((): SlidevContextNavFull => {
+const useSharedNav = createSharedComposable((): SlidevContextNavFull => {
   const state = useNavState()
   const router = useRouter()
 
@@ -398,3 +401,16 @@ export const useNav = createSharedComposable((): SlidevContextNavFull => {
     ...state,
   }
 })
+
+export function useNav(): SlidevContextNavFull {
+  const nav = useSharedNav()
+  const context = injectLocal(injectionSlidevContext, undefined)
+  if (!context)
+    return nav
+
+  const localNav = toRaw(context).nav as unknown as SlidevContextNav
+  return {
+    ...nav,
+    ...localNav,
+  }
+}

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.17.2",
+  "version": "52.18.1",
   "description": "Presentation slides for developers",
   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -39,36 +39,36 @@
     "@shikijs/vitepress-twoslash": "^4.3.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",
     "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.17.2",
-    "@slidev/types": "52.17.2"
+    "@slidev/parser": "52.18.1",
+    "@slidev/types": "52.18.1"
   },
   "devDependencies": {
-    "vite": "^8.1.3"
+    "vite": "^8.1.5"
   }
 }

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'
 

package/shim.d.ts

@@ -1,4 +1,18 @@
-/// <reference types="vite-plugin-pwa/client" />
+// `vite-plugin-pwa` is an optional peer dependency (only needed when the `pwa`
+// option is enabled), so declare the subset of `virtual:pwa-register` we use
+// inline instead of `/// <reference types="vite-plugin-pwa/client" />`. When
+// PWA is off, the CLI serves a no-op stub for this module.
+declare module 'virtual:pwa-register' {
+  export interface RegisterSWOptions {
+    immediate?: boolean
+    onNeedRefresh?: () => void
+    onOfflineReady?: () => void
+    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void
+    onRegisterError?: (error: any) => void
+  }
+
+  export function registerSW(options?: RegisterSWOptions): (reloadPage?: boolean) => Promise<void>
+}
 
 declare module '*.md' {
   // with unplugin-vue-markdown, markdowns can be treat as Vue components