@slidev/client 0.49.10 → 0.49.11

package/builtin/ShikiMagicMove.vue

@@ -2,8 +2,9 @@
 import { ShikiMagicMovePrecompiled } from 'shiki-magic-move/vue'
 import type { KeyedTokensInfo } from 'shiki-magic-move/types'
 import type { PropType } from 'vue'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import lz from 'lz-string'
+import { sleep } from '@antfu/utils'
 import { useSlideContext } from '../context'
 import { makeId, updateCodeHighlightRange } from '../logic/utils'
 import { useNav } from '../composables/useNav'
@@ -72,9 +73,12 @@ onMounted(() => {
         }
         currentClickSum += current.length || 1
       }
-      stepIndex.value = step
 
-      setTimeout(() => {
+      nextTick(async () => {
+        stepIndex.value = step
+
+        await sleep(0)
+
         const pre = container.value?.querySelector('.shiki') as HTMLElement
         if (!pre)
           return

package/composables/useDrawings.ts

@@ -2,7 +2,7 @@ import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
 import { createDrauu } from 'drauu'
 import { createSharedComposable, toReactive, useLocalStorage } from '@vueuse/core'
-import { drawingState, onPatch, patch } from '../state/drawings'
+import { drawingState, onPatchDrawingState, patchDrawingState } from '../state/drawings'
 import { configs } from '../env'
 import { isInputting } from '../state'
 import { useNav } from './useNav'
@@ -67,7 +67,7 @@ export const useDrawings = createSharedComposable(() => {
   function clearDrauu() {
     drauu.clear()
     if (syncUp.value)
-      patch(currentSlideNo.value, '')
+      patchDrawingState(currentSlideNo.value, '')
   }
 
   function updateState() {
@@ -93,11 +93,11 @@ export const useDrawings = createSharedComposable(() => {
       const dump = drauu.dump()
       const key = currentSlideNo.value
       if ((drawingState[key] || '') !== dump && syncUp.value)
-        patch(key, drauu.dump())
+        patchDrawingState(key, drauu.dump())
     }
   })
 
-  onPatch((state) => {
+  onPatchDrawingState((state) => {
     disableDump = true
     if (state[currentSlideNo.value] != null)
       drauu.load(state[currentSlideNo.value] || '')

package/composables/useWakeLock.ts

@@ -0,0 +1,13 @@
+import { useWakeLock as useVueUseWakeLock } from '@vueuse/core'
+import { watchEffect } from 'vue'
+import { wakeLockEnabled } from '../state'
+
+export function useWakeLock() {
+  const { request, release } = useVueUseWakeLock()
+
+  watchEffect((onCleanup) => {
+    if (wakeLockEnabled.value)
+      request('screen')
+    onCleanup(release)
+  })
+}

package/constants.ts

@@ -80,4 +80,5 @@ export const HEADMATTER_FIELDS = [
   'htmlAttrs',
   'mdc',
   'contextMenu',
+  'wakeLock',
 ]

package/internals/SelectList.vue

@@ -5,7 +5,7 @@ import type { SelectionItem } from './types'
 
 const props = defineProps({
   modelValue: {
-    type: [Object, String, Number] as PropType<any>,
+    type: [Object, String, Number, Boolean] as PropType<any>,
   },
   title: {
     type: String,
@@ -43,7 +43,7 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 
 <style lang="postcss" scoped>
 .select-list {
-  @apply py-2;
+  @apply my-2;
 }
 
 .item {
@@ -55,6 +55,6 @@ const value = useVModel(props, 'modelValue', emit, { passive: true })
 }
 
 .title {
-  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1;
+  @apply text-xs uppercase opacity-50 tracking-widest px-7 py-1 select-none text-nowrap;
 }
 </style>

package/internals/Settings.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { slideScale } from '../state'
+import { useWakeLock } from '@vueuse/core'
+import { slideScale, wakeLockEnabled } from '../state'
 import SelectList from './SelectList.vue'
 import type { SelectionItem } from './types'
 
-const items: SelectionItem<number>[] = [
+const scaleItems: SelectionItem<number>[] = [
   {
     display: 'Fit',
     value: 0,
@@ -13,10 +14,24 @@ const items: SelectionItem<number>[] = [
     value: 1,
   },
 ]
+
+const { isSupported } = useWakeLock()
+
+const wakeLockItems: SelectionItem<boolean>[] = [
+  {
+    display: 'Enabled',
+    value: true,
+  },
+  {
+    display: 'Disabled',
+    value: false,
+  },
+]
 </script>
 
 <template>
   <div class="text-sm select-none">
-    <SelectList v-model="slideScale" title="Scale" :items="items" />
+    <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
+    <SelectList v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems" />
   </div>
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@slidev/client",
   "type": "module",
-  "version": "0.49.10",
+  "version": "0.49.11",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -59,8 +59,8 @@
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
     "yaml": "^2.4.2",
-    "@slidev/parser": "0.49.10",
-    "@slidev/types": "0.49.10"
+    "@slidev/parser": "0.49.11",
+    "@slidev/types": "0.49.11"
   },
   "devDependencies": {
     "vite": "^5.2.12"

package/pages/play.vue

@@ -10,6 +10,7 @@ import SlidesShow from '../internals/SlidesShow.vue'
 import PrintStyle from '../internals/PrintStyle.vue'
 import { onContextMenu } from '../logic/contextMenu'
 import { useNav } from '../composables/useNav'
+import { useWakeLock } from '../composables/useWakeLock'
 import { useDrawings } from '../composables/useDrawings'
 import PresenterMouse from '../internals/PresenterMouse.vue'
 
@@ -32,6 +33,8 @@ function onClick(e: MouseEvent) {
 
 useSwipeControls(root)
 registerShortcuts()
+if (__SLIDEV_FEATURE_WAKE_LOCK__)
+  useWakeLock()
 
 const persistNav = computed(() => isScreenVertical.value || showEditor.value)
 

package/pages/presenter.vue

@@ -24,11 +24,14 @@ import ClicksSlider from '../internals/ClicksSlider.vue'
 import ContextMenu from '../internals/ContextMenu.vue'
 import { useNav } from '../composables/useNav'
 import { useDrawings } from '../composables/useDrawings'
+import { useWakeLock } from '../composables/useWakeLock'
 
 const main = ref<HTMLDivElement>()
 
 registerShortcuts()
 useSwipeControls(main)
+if (__SLIDEV_FEATURE_WAKE_LOCK__)
+  useWakeLock()
 
 const {
   clicksContext,

package/state/drawings.ts

@@ -3,5 +3,9 @@ import { createSyncState } from './syncState'
 
 export type DrawingsState = Record<number, string | undefined>
 
-const { init, onPatch, patch, state } = createSyncState<DrawingsState>(serverDrawingState, {}, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
-export { init as initDrawingState, onPatch, patch, state as drawingState }
+export const {
+  init: initDrawingState,
+  onPatch: onPatchDrawingState,
+  patch: patchDrawingState,
+  state: drawingState,
+} = createSyncState<DrawingsState>(serverDrawingState, serverDrawingState, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)

package/state/index.ts

@@ -25,6 +25,7 @@ export const isOnFocus = computed(() => ['BUTTON', 'A'].includes(activeElement.v
 export const currentCamera = useLocalStorage<string>('slidev-camera', 'default', { listenToStorageChanges: false })
 export const currentMic = useLocalStorage<string>('slidev-mic', 'default', { listenToStorageChanges: false })
 export const slideScale = useLocalStorage<number>('slidev-scale', 0)
+export const wakeLockEnabled = useLocalStorage('slidev-wake-lock', true)
 
 export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', true, { listenToStorageChanges: false })
 export const showEditor = useLocalStorage('slidev-show-editor', false, { listenToStorageChanges: false })