@slidev/client 0.40.11 → 0.40.13

package/builtin/CodeBlockWrapper.vue

@@ -81,7 +81,7 @@ onMounted(() => {
         line.classList.toggle('dishonored', !highlighted)
       })
       if (props.maxHeight) {
-        const highlightedEls = Array.from(target.querySelectorAll('.line.highlighted'))
+        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' })

package/builtin/Mermaid.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
 }>()
 
 const vm = getCurrentInstance()
-const el = ref<HTMLDivElement>()
+const el = ref<ShadowRoot>()
 const html = ref('')
 
 watchEffect(async (onCleanup) => {

package/builtin/TocList.vue

@@ -10,7 +10,6 @@ Usage:
 import { computed } from 'vue'
 import { toArray } from '@antfu/utils'
 import type { TocItem } from '@slidev/types'
-// @ts-expect-error virtual module
 import Titles from '/@slidev/titles.md'
 
 const props = withDefaults(defineProps<{

package/builtin/VClicks.ts

@@ -82,7 +82,7 @@ export default defineComponent({
         const directive = idx % this.every === 0 ? click : after
         let vNode
         let childCount = 0
-        if (depth < this.depth && Array.isArray(i.children)) {
+        if (depth < +this.depth && Array.isArray(i.children)) {
           const [vNodes, total] = mapSubList(i.children, depth)
           vNode = h(i, {}, [vNodes])
           childCount = total

package/internals/SlidesOverview.vue

@@ -83,7 +83,8 @@ watchEffect(() => {
             class="pointer-events-none"
           >
             <SlideWrapper
-              :is="route?.component"
+              :is="route.component"
+              v-if="route?.component"
               :clicks-disabled="true"
               :class="getSlideClass(route)"
               :route="route"

package/internals/WebCamera.vue

@@ -8,7 +8,7 @@ const size = useLocalStorage('slidev-webcam-size', Math.round(Math.min(window.in
 const position = useLocalStorage('slidev-webcam-pos', {
   x: window.innerWidth - size.value - 30,
   y: window.innerHeight - size.value - 30,
-}, undefined, { deep: true })
+}, { deep: true })
 
 const frame = ref<HTMLDivElement | undefined>()
 const handler = ref<HTMLDivElement | undefined>()

package/layouts/iframe-left.vue

@@ -17,7 +17,7 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
         :src="url"
         :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
       />
-      <div class="slidev-layout default" :class="props.class">
+      <div class="slidev-layout default" v-bind="$attrs">
         <slot />
       </div>
     </div>

package/layouts/iframe-right.vue

@@ -11,7 +11,7 @@ const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
 
 <template>
   <div class="grid grid-cols-2 w-full h-full">
-    <div class="slidev-layout default" :class="props.class">
+    <div class="slidev-layout default" v-bind="$attrs">
       <slot />
     </div>
     <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">

package/logic/nav.ts

@@ -2,7 +2,7 @@ import type { Ref, TransitionGroupProps } from 'vue'
 import type { RouteRecordRaw } from 'vue-router'
 import { computed, nextTick, ref, watch } from 'vue'
 import type { TocItem } from '@slidev/types'
-import { SwipeDirection, isString, timestamp, usePointerSwipe } from '@vueuse/core'
+import { timestamp, usePointerSwipe } from '@vueuse/core'
 import { rawRoutes, router } from '../routes'
 import { configs } from '../env'
 import { useRouteQuery } from './route'
@@ -147,13 +147,13 @@ export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
       const x = Math.abs(distanceX.value)
       const y = Math.abs(distanceY.value)
       if (x / window.innerWidth > 0.3 || x > 100) {
-        if (direction.value === SwipeDirection.LEFT)
+        if (direction.value === 'left')
           next()
         else
           prev()
       }
       else if (y / window.innerHeight > 0.4 || y > 200) {
-        if (direction.value === SwipeDirection.DOWN)
+        if (direction.value === 'down')
           prevSlide()
         else
           nextSlide()
@@ -165,7 +165,7 @@ export function useSwipeControls(root: Ref<HTMLElement | undefined>) {
 export async function downloadPDF() {
   const { saveAs } = await import('file-saver')
   saveAs(
-    isString(configs.download)
+    typeof configs.download === 'string'
       ? configs.download
       : configs.exportFilename
         ? `${configs.exportFilename}.pdf`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.40.11",
+  "version": "0.40.13",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -41,8 +41,8 @@
     "vue-router": "^4.1.6",
     "vue-starport": "^0.3.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.40.11",
-    "@slidev/types": "0.40.11"
+    "@slidev/parser": "0.40.13",
+    "@slidev/types": "0.40.13"
   },
   "devDependencies": {
     "vite": "^4.2.2"

package/setup/monaco.ts

@@ -2,6 +2,7 @@ import { getCurrentInstance, onMounted } from 'vue'
 import * as monaco from 'monaco-editor'
 import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
+
 /* __imports__ */
 
 const setup = createSingletonPromise(async () => {
@@ -31,7 +32,6 @@ const setup = createSingletonPromise(async () => {
         import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
       ])
 
-      // @ts-expect-error global config for monaca
       window.MonacoEnvironment = {
         getWorker(_: any, label: string) {
           if (label === 'json')

package/setup/root.ts

@@ -1,6 +1,6 @@
 /* __imports__ */
 import { watch } from 'vue'
-import { useHead, useHtmlAttrs } from '@vueuse/head'
+import { useHead } from '@vueuse/head'
 import { nanoid } from 'nanoid'
 import { configs } from '../env'
 import { initSharedState, onPatch, patch } from '../state/shared'
@@ -17,8 +17,10 @@ export default function setupRoot() {
   /* __injections__ */
 
   const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
-  useHead({ title })
-  useHtmlAttrs(configs.htmlAttrs)
+  useHead({
+    title,
+    htmlAttrs: configs.htmlAttrs,
+  })
   initSharedState(`${title} - shared`)
   initDrawingState(`${title} - drawings`)
 
@@ -41,6 +43,7 @@ export default function setupRoot() {
       patch('viewerPage', +currentPage.value)
       patch('viewerClicks', clicks.value)
     }
+
     patch('lastUpdate', {
       id,
       type: isPresenter.value ? 'presenter' : 'viewer',

package/state/syncState.ts

@@ -7,7 +7,7 @@ export function createSyncState<State extends object>(serverState: State, defaul
   let patchingTimeout: NodeJS.Timeout
   let updatingTimeout: NodeJS.Timeout
 
-  const state = __USE_SERVER__
+  const state = __SLIDEV_HAS_SERVER__
     ? reactive<State>(serverState) as State
     : reactive<State>(defaultState) as State
 
@@ -37,11 +37,11 @@ export function createSyncState<State extends object>(serverState: State, defaul
 
   function init(channelKey: string) {
     let stateChannel: BroadcastChannel
-    if (!__USE_SERVER__ && !persist) {
+    if (!__SLIDEV_HAS_SERVER__ && !persist) {
       stateChannel = new BroadcastChannel(channelKey)
       stateChannel.addEventListener('message', (event: MessageEvent<Partial<State>>) => onUpdate(event.data))
     }
-    else if (!__USE_SERVER__ && persist) {
+    else if (!__SLIDEV_HAS_SERVER__ && persist) {
       window.addEventListener('storage', (event) => {
         if (event && event.key === channelKey && event.newValue)
           onUpdate(JSON.parse(event.newValue) as Partial<State>)
@@ -57,8 +57,9 @@ export function createSyncState<State extends object>(serverState: State, defaul
         onPatchCallbacks.forEach((fn: (state: State) => void) => fn(state))
     }
 
-    watch(state, onStateChanged, { deep: true })
-    if (!__USE_SERVER__ && persist) {
+    watch(state, onStateChanged, { deep: true, flush: 'sync' })
+
+    if (!__SLIDEV_HAS_SERVER__ && persist) {
       const serialzedState = window.localStorage.getItem(channelKey)
       if (serialzedState)
         onUpdate(JSON.parse(serialzedState) as Partial<State>)