@slidev/client 0.30.2 → 0.31.2

package/builtin/Arrow.vue

@@ -11,8 +11,6 @@ Simple Arrow
 <script setup lang="ts">
 import { customAlphabet } from 'nanoid'
 
-const nanoid = customAlphabet('abcedfghijklmn', 10)
-
 defineProps<{
   x1: number | string
   y1: number | string
@@ -22,6 +20,8 @@ defineProps<{
   color?: string
 }>()
 
+const nanoid = customAlphabet('abcedfghijklmn', 10)
+
 const id = nanoid()
 </script>
 

package/builtin/AutoFitText.vue

@@ -18,9 +18,6 @@ or
 import { useElementSize, useVModel } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-const emit = defineEmits<{
-  (e: any): void
-}>()
 const props = defineProps({
   modelValue: {
     default: '',
@@ -33,6 +30,9 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits<{
+  (e: any): void
+}>()
 const container = ref<HTMLDivElement>()
 const inner = ref<HTMLDivElement>()
 const size = ref(100)
@@ -45,7 +45,7 @@ const innerSize = useElementSize(inner)
 const wrapLen = ref(0)
 const wrap = ref('nowrap')
 
-watch([container, value, containerSize.width, innerSize.width], async() => {
+watch([container, value, containerSize.width, innerSize.width], async () => {
   if (!container.value || innerSize.width.value <= 0)
     return
   const ratio = containerSize.width.value / innerSize.width.value

package/builtin/Link.vue

@@ -10,6 +10,8 @@ Usage:
 <script setup lang="ts">
 import { isPrintMode } from '../logic/nav'
 
+/* eslint-disable vue/no-v-text-v-html-on-component */
+
 defineProps<{
   to: number | string
   title?: string
@@ -21,6 +23,6 @@ defineProps<{
   <RouterLink v-else-if="!isPrintMode && !title" :to="to" @click="$event.target.blur()">
     <slot />
   </RouterLink>
-  <a v-else-if="isPrintMode && title" :href="'#' + to" v-html="title" />
-  <a v-else :href="'#' + to"><slot /></a>
+  <a v-else-if="isPrintMode && title" :href="`#${to}`" v-html="title" />
+  <a v-else :href="`#${to}`"><slot /></a>
 </template>

package/builtin/PlantUml.vue

@@ -11,7 +11,6 @@ Alice -> Bob : Hello!
 ```
 -->
 <script setup lang="ts">
-
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -21,9 +20,8 @@ const props = defineProps<{
 }>()
 
 const uri = computed(() => `${props.server}/svg/${props.code}`)
-
 </script>
 
 <template>
-  <img alt="PlantUML diagram" :src="uri" :style="{scale}">
+  <img alt="PlantUML diagram" :src="uri" :style="{ scale }">
 </template>

package/builtin/Toc.vue

@@ -12,8 +12,6 @@ import { computed, inject } from 'vue'
 import type { TocItem } from '../logic/nav'
 import { injectionSlidevContext } from '../constants'
 
-const $slidev = inject(injectionSlidevContext)
-
 const props = withDefaults(
   defineProps<{
     columns?: string | number
@@ -31,6 +29,8 @@ const props = withDefaults(
   },
 )
 
+const $slidev = inject(injectionSlidevContext)
+
 function filterTreeDepth(tree: TocItem[], level = 1): TocItem[] {
   if (level > Number(props.maxDepth)) {
     return []

package/builtin/TocList.vue

@@ -30,11 +30,20 @@ const classes = computed(() => {
 
 <template>
   <ol v-if="list && list.length > 0" :class="classes">
-    <li v-for="item in list" :key="item.path" :class="['slidev-toc-item', {'slidev-toc-item-active': item.active}, {'slidev-toc-item-parent-active': item.activeParent}]">
+    <li
+      v-for="item in list"
+      :key="item.path" class="slidev-toc-item"
+      :class="[{ 'slidev-toc-item-active': item.active }, { 'slidev-toc-item-parent-active': item.activeParent }]"
+    >
       <Link :to="item.path">
         <Titles :no="item.path" />
       </Link>
-      <TocList v-if="item.children.length > 0" :level="level + 1" :list="item.children" :list-class="listClass" />
+      <TocList
+        v-if="item.children.length > 0"
+        :level="level + 1"
+        :list="item.children"
+        :list-class="listClass"
+      />
     </li>
   </ol>
 </template>

package/builtin/Tweet.vue

@@ -21,10 +21,11 @@ const tweet = ref<HTMLElement | null>()
 
 const vm = getCurrentInstance()!
 const loaded = ref(false)
+const tweetNotFound = ref(false)
 
 async function create() {
   // @ts-expect-error global
-  await window.twttr.widgets.createTweet(
+  const element = await window.twttr.widgets.createTweet(
     props.id.toString(),
     tweet.value,
     {
@@ -33,6 +34,8 @@ async function create() {
     },
   )
   loaded.value = true
+  if (element === undefined)
+    tweetNotFound.value = true
 }
 
 // @ts-expect-error global
@@ -55,10 +58,11 @@ else {
 
 <template>
   <Transform :scale="scale || 1">
-    <div ref="tweet" class="tweet" data-waitfor="iframe">
-      <div v-if="!loaded" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
+    <div ref="tweet" class="tweet" :data-waitfor="tweetNotFound ? '' : 'iframe'">
+      <div v-if="!loaded || tweetNotFound" class="w-30 h-30 my-10px bg-gray-400 bg-opacity-10 rounded-lg flex opacity-50">
         <div class="m-auto animate-pulse text-4xl">
           <carbon:logo-twitter />
+          <span v-if="tweetNotFound">Could not load tweet with id="{{ props.id }}"</span>
         </div>
       </div>
     </div>

package/composables/useNavClicks.ts

@@ -11,7 +11,7 @@ export function useNavClicks(
   // force update collected elements when the route is fully resolved
   const routeForceRefresh = ref(0)
   nextTick(() => {
-    router.afterEach(async() => {
+    router.afterEach(async () => {
       await nextTick()
       routeForceRefresh.value += 1
     })

package/env.ts

@@ -3,23 +3,8 @@ import { computed } from 'vue'
 import { objectMap } from '@antfu/utils'
 // @ts-expect-error missing types
 import _configs from '/@slidev/configs'
-import _serverState from 'server-reactive:nav'
-import _serverDrawingState from 'server-reactive:drawings?diff'
-import type { ServerReactive } from 'vite-plugin-vue-server-ref'
 
-export interface ServerState {
-  page: number
-  clicks: number
-  cursor?: {
-    x: number
-    y: number
-  }
-}
-
-export const serverState = _serverState as ServerReactive<ServerState>
-export const serverDrawingState = _serverDrawingState as ServerReactive<Record<number, string | undefined>>
 export const configs = _configs as SlidevConfig
-
 export const slideAspect = configs.aspectRatio ?? (16 / 9)
 export const slideWidth = configs.canvasWidth ?? 980
 export const slideHeight = Math.round(slideWidth / slideAspect)

package/internals/Controls.vue

@@ -8,7 +8,7 @@ import Goto from './Goto.vue'
 
 const WebCamera = shallowRef<any>()
 const RecordingDialog = shallowRef<any>()
-if (__DEV__) {
+if (__SLIDEV_FEATURE_RECORD__) {
   import('./WebCamera.vue').then(v => WebCamera.value = v.default)
   import('./RecordingDialog.vue').then(v => RecordingDialog.value = v.default)
 }
@@ -17,9 +17,7 @@ if (__DEV__) {
 <template>
   <SlidesOverview v-model="showOverview" />
   <Goto />
-  <template v-if="__DEV__">
-    <WebCamera v-if="WebCamera" />
-    <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />
-  </template>
+  <WebCamera v-if="WebCamera" />
+  <RecordingDialog v-if="RecordingDialog" v-model="showRecordingDialog" />
   <InfoDialog v-if="configs.info" v-model="showInfoDialog" />
 </template>

package/internals/DrawingControls.vue

@@ -31,21 +31,21 @@ function setBrushColor(color: typeof brush.color) {
     :initial-x="10"
     :initial-y="10"
   >
-    <button class="icon-btn" :class="{ shallow: drawingMode != 'stylus' }" @click="setDrawingMode('stylus')">
+    <button class="icon-btn" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
       <carbon:pen />
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode != 'line' }" @click="setDrawingMode('line')">
+    <button class="icon-btn" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
       <svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
         <path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
       </svg>
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode != 'arrow' }" @click="setDrawingMode('arrow')">
+    <button class="icon-btn" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
       <carbon:arrow-up-right />
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode != 'ellipse' }" @click="setDrawingMode('ellipse')">
+    <button class="icon-btn" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
       <carbon:radio-button />
     </button>
-    <button class="icon-btn" :class="{ shallow: drawingMode != 'rectangle' }" @click="setDrawingMode('rectangle')">
+    <button class="icon-btn" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
       <carbon:checkbox />
     </button>
     <!-- TODO: not sure why it's not working! -->
@@ -65,7 +65,7 @@ function setBrushColor(color: typeof brush.color) {
       <div
         class="w-6 h-6 transition-all transform border border-gray-400/50"
         :class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded-md'"
-        :style="drawingEnabled? { background: color } : { borderColor: color }"
+        :style="drawingEnabled ? { background: color } : { borderColor: color }"
       />
     </button>
 

package/internals/Editor.vue

@@ -127,13 +127,13 @@ throttledWatch(
 <template>
   <div
     class="fixed h-full top-0 bottom-0 w-10px bg-gray-400 select-none opacity-0 hover:opacity-10 z-100"
-    :class="{'!opacity-30': handlerDown}"
-    :style="{right: `${editorWidth - 5}px`, cursor: 'col-resize'}"
+    :class="{ '!opacity-30': handlerDown }"
+    :style="{ right: `${editorWidth - 5}px`, cursor: 'col-resize' }"
     @pointerdown="onHandlerDown"
   />
   <div
     class="shadow bg-main p-4 grid grid-rows-[max-content,1fr] h-full overflow-hidden border-l border-gray-400 border-opacity-20"
-    :style="{width: `${editorWidth}px`}"
+    :style="{ width: `${editorWidth}px` }"
   >
     <div class="flex pb-2 text-xl -mt-1">
       <div class="mr-4 rounded flex">

package/internals/Goto.vue

@@ -1,16 +1,29 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
-import { go, total } from '../logic/nav'
+import { go, rawRoutes, total } from '../logic/nav'
 import { showGotoDialog } from '../state'
 
 const input = ref<HTMLInputElement>()
 const text = ref('')
-const num = computed(() => +text.value)
-const valid = computed(() => !isNaN(num.value) && num.value > 0 && num.value <= total.value)
+
+const valid = computed(() => {
+  if (text.value.startsWith('/')) {
+    return !!rawRoutes.find(r => r.path === text.value.substring(1))
+  }
+  else {
+    const num = +text.value
+    return !isNaN(num) && num > 0 && num <= total.value
+  }
+})
 
 function goTo() {
-  if (valid.value)
-    go(num.value)
+  if (valid.value) {
+    if (text.value.startsWith('/'))
+      go(text.value.substring(1))
+
+    else
+      go(+text.value)
+  }
   close()
 }
 
@@ -18,7 +31,7 @@ function close() {
   showGotoDialog.value = false
 }
 
-watch(showGotoDialog, async(show) => {
+watch(showGotoDialog, async (show) => {
   if (show) {
     await nextTick()
     text.value = ''
@@ -31,8 +44,8 @@ watch(showGotoDialog, async(show) => {
 
 // remove the g character coming from the key that triggered showGotoDialog (e.g. in Firefox)
 watch(text, (t) => {
-  if (t.match(/^[^0-9]/))
-    text.value = text.value.substr(1)
+  if (t.match(/^[^0-9/]/))
+    text.value = text.value.substring(1)
 })
 </script>
 

package/internals/InfoDialog.vue

@@ -4,13 +4,13 @@ import { computed } from 'vue'
 import { configs } from '../env'
 import Modal from './Modal.vue'
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const props = defineProps({
   modelValue: {
     default: false,
   },
 })
 
+const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const value = useVModel(props, 'modelValue', emit)
 const hasInfo = computed(() => typeof configs.info === 'string')
 </script>

package/internals/MenuButton.vue

@@ -2,9 +2,6 @@
 import { onClickOutside, useVModel } from '@vueuse/core'
 import { ref } from 'vue'
 
-const emit = defineEmits<{
-  (e: any): void
-}>()
 const props = defineProps({
   modelValue: {
     default: false,
@@ -14,6 +11,9 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits<{
+  (e: any): void
+}>()
 const value = useVModel(props, 'modelValue', emit, { passive: true })
 const el = ref<HTMLDivElement>()
 

package/internals/Modal.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 
-const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const props = defineProps({
   modelValue: {
     default: false,
@@ -11,6 +10,7 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits<{ (name: 'modelValue', v: boolean): void }>()
 const value = useVModel(props, 'modelValue', emit)
 
 function onClick() {

package/internals/NavControls.vue

@@ -35,7 +35,7 @@ const barStyle = computed(() => props.persist
 )
 
 const RecordingControls = shallowRef<any>()
-if (__DEV__)
+if (__SLIDEV_FEATURE_RECORD__)
   import('./RecordingControls.vue').then(v => RecordingControls.value = v.default)
 
 const DrawingControls = shallowRef<any>()
@@ -79,7 +79,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
 
       <VerticalDivider />
 
-      <template v-if="__DEV__ && !isEmbedded">
+      <template v-if="!isEmbedded">
         <template v-if="!isPresenter && !md && RecordingControls">
           <RecordingControls />
           <VerticalDivider />
@@ -108,7 +108,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
         <VerticalDivider />
       </template>
 
-      <template v-if="__DEV__ && !isEmbedded">
+      <template v-if="!isEmbedded">
         <RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
           <carbon:presentation-file />
         </RouterLink>
@@ -116,7 +116,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <carbon:user-speaker />
         </RouterLink>
 
-        <button v-if="!isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
+        <button v-if="__DEV__ && !isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
           <carbon:text-annotation-toggle />
         </button>
       </template>

package/internals/Play.vue

@@ -43,7 +43,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
   <div id="page-root" ref="root" class="grid grid-cols-[1fr,max-content]" :style="themeVars">
     <SlideContainer
       class="w-full h-full"
-      :style="{ background: 'var(--slidev-slide-container-background, black)'}"
+      :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="isPrintMode ? windowSize.width.value : undefined"
       :scale="slideScale"
       @pointerdown="onClick"
@@ -56,7 +56,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
           :class="[
             persistNav ? 'opacity-100 right-0' : 'opacity-0 p-2',
-            isDrawing ? 'pointer-events-none': ''
+            isDrawing ? 'pointer-events-none' : '',
           ]"
         >
           <NavControls class="m-auto" :persist="persistNav" />

package/internals/Presenter.vue

@@ -4,7 +4,8 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
 import { showOverview, showPresenterCursor } from '../state'
-import { configs, serverState, themeVars } from '../env'
+import { configs, themeVars } from '../env'
+import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
 import { getSlideClass } from '../utils'
 import { useTimer } from '../logic/utils'
@@ -72,7 +73,7 @@ onMounted(() => {
       return { x, y }
     },
     (pos) => {
-      serverState.cursor = pos
+      sharedState.cursor = pos
     },
   )
 })

package/internals/PresenterMouse.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { serverState } from '../env'
+import { sharedState } from '../state/shared'
 </script>
 
 <template>
   <div
-    v-if="serverState.cursor"
+    v-if="sharedState.cursor"
     class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none text-xl"
   >
     <ph:cursor-fill
       class="absolute"
-      :style="{ left: `${serverState.cursor.x}%`, top: `${serverState.cursor.y}%` }"
+      :style="{ left: `${sharedState.cursor.x}%`, top: `${sharedState.cursor.y}%` }"
     />
   </div>
 </template>

package/internals/Print.vue

@@ -30,7 +30,7 @@ watchEffect(() => {
   <div id="page-root" class="grid grid-cols-[1fr,max-content]" :style="themeVars">
     <PrintContainer
       class="w-full h-full"
-      :style="{ background: 'var(--slidev-slide-container-background, black)'}"
+      :style="{ background: 'var(--slidev-slide-container-background, black)' }"
       :width="windowSize.width.value"
     />
   </div>

package/internals/PrintSlideClick.vue

@@ -35,6 +35,7 @@ if (__SLIDEV_FEATURE_DRAWINGS__ || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
 
 const clicks = computed(() => props.clicks)
 const navClicks = useNavClicks(clicks, props.nav.currentRoute, props.nav.currentPage)
+const id = computed(() => `${props.route.path.toString().padStart(3, '0')}-${(clicks.value + 1).toString().padStart(2, '0')}`)
 
 provide(injectionSlidevContext, reactive({
   nav: { ...props.nav, ...navClicks },
@@ -44,7 +45,7 @@ provide(injectionSlidevContext, reactive({
 </script>
 
 <template>
-  <div :id="route.path" class="slide-container" :style="style">
+  <div :id="id" class="slide-container" :style="style">
     <GlobalBottom />
 
     <SlideWrapper
@@ -56,9 +57,9 @@ provide(injectionSlidevContext, reactive({
     />
     <template
       v-if="
-        (__SLIDEV_FEATURE_DRAWINGS__ ||
-          __SLIDEV_FEATURE_DRAWINGS_PERSIST__) &&
-          DrawingPreview
+        (__SLIDEV_FEATURE_DRAWINGS__
+          || __SLIDEV_FEATURE_DRAWINGS_PERSIST__)
+          && DrawingPreview
       "
     >
       <DrawingPreview :page="+route.path" />

package/internals/RecordingControls.vue

@@ -24,7 +24,7 @@ function toggleRecording() {
   <button
     v-if="currentCamera !== 'none'"
     class="icon-btn <md:hidden"
-    :class="{'text-green-500': Boolean(showAvatar && streamCamera)}"
+    :class="{ 'text-green-500': Boolean(showAvatar && streamCamera) }"
     title="Show camera view"
     @click="toggleAvatar"
   >
@@ -33,7 +33,7 @@ function toggleRecording() {
 
   <button
     class="icon-btn"
-    :class="{'text-red-500': recording}"
+    :class="{ 'text-red-500': recording }"
     title="Recording"
     @click="toggleRecording"
   >

package/internals/RecordingDialog.vue

@@ -5,15 +5,15 @@ import { getFilename, mimeType, recordCamera, recorder, recordingName } from '..
 import Modal from './Modal.vue'
 import DevicesList from './DevicesList.vue'
 
-const emit = defineEmits<{
-  (e: any): void
-}>()
 const props = defineProps({
   modelValue: {
     default: false,
   },
 })
 
+const emit = defineEmits<{
+  (e: any): void
+}>()
 const value = useVModel(props, 'modelValue', emit)
 
 const { startRecording } = recorder

package/internals/SelectList.vue

@@ -3,9 +3,6 @@ import { useVModel } from '@vueuse/core'
 import type { PropType } from 'vue'
 import type { SelectionItem } from './types'
 
-const emit = defineEmits<{
-  (e: any): void
-}>()
 const props = defineProps({
   modelValue: {
     type: [Object, String, Number] as PropType<any>,
@@ -18,6 +15,9 @@ const props = defineProps({
   },
 })
 
+const emit = defineEmits<{
+  (e: any): void
+}>()
 const value = useVModel(props, 'modelValue', emit, { passive: true })
 </script>
 

package/internals/SlidesOverview.vue

@@ -8,9 +8,9 @@ import SlideContainer from './SlideContainer.vue'
 import SlideWrapper from './SlideWrapper'
 import DrawingPreview from './DrawingPreview.vue'
 
-const emit = defineEmits([])
 const props = defineProps<{ modelValue: boolean }>()
 
+const emit = defineEmits([])
 const value = useVModel(props, 'modelValue', emit)
 
 function close() {

package/logic/drawings.ts

@@ -1,8 +1,9 @@
-import { computed, markRaw, nextTick, reactive, ref, watch, watchEffect } from 'vue'
+import { computed, markRaw, nextTick, reactive, ref, watch } from 'vue'
 import type { Brush, Options as DrauuOptions, DrawingMode } from 'drauu'
 import { createDrauu } from 'drauu'
 import { toReactive, useStorage } from '@vueuse/core'
-import { configs, serverDrawingState as drawingState } from '../env'
+import { drawingState, onPatch, patch } from '../state/drawings'
+import { configs } from '../env'
 import { currentPage, isPresenter } from './nav'
 
 export const brushColors = [
@@ -29,7 +30,9 @@ export const brush = toReactive(useStorage<Brush>('slidev-drawing-brush', {
 }))
 
 const _mode = ref<DrawingMode | 'arrow'>('stylus')
+const syncUp = computed(() => configs.drawings.syncAll || isPresenter.value)
 let disableDump = false
+
 export const drawingMode = computed({
   get() {
     return _mode.value
@@ -56,7 +59,8 @@ export const drauu = markRaw(createDrauu(drauuOptions))
 
 export function clearDrauu() {
   drauu.clear()
-  drawingState.$patch({ [currentPage.value]: '' })
+  if (syncUp.value)
+    patch(currentPage.value, '')
 }
 
 export function updateState() {
@@ -80,24 +84,18 @@ drauu.on('changed', () => {
   if (!disableDump) {
     const dump = drauu.dump()
     const key = currentPage.value
-    if ((drawingState[key] || '') !== dump) {
-      if (__DEV__)
-        drawingState.$patch({ [key]: drauu.dump() })
-      else
-        drawingState[key] = drauu.dump()
-    }
+    if ((drawingState[key] || '') !== dump && syncUp.value)
+      patch(key, drauu.dump())
   }
 })
 
-if (__DEV__) {
-  drawingState.$onPatch((patch) => {
-    disableDump = true
-    if (patch[currentPage.value] != null)
-      drauu.load(patch[currentPage.value] || '')
-    disableDump = false
-    updateState()
-  })
-}
+onPatch((state) => {
+  disableDump = true
+  if (state[currentPage.value] != null)
+    drauu.load(state[currentPage.value] || '')
+  disableDump = false
+  updateState()
+})
 
 nextTick(() => {
   watch(currentPage, () => {
@@ -105,10 +103,6 @@ nextTick(() => {
       return
     loadCanvas()
   }, { immediate: true })
-
-  watchEffect(() => {
-    drawingState.$syncUp = configs.drawings.syncAll || isPresenter.value
-  })
 })
 
 drauu.on('start', () => isDrawing.value = true)

package/logic/nav.ts

@@ -23,7 +23,7 @@ export { rawRoutes, router }
 // force update collected elements when the route is fully resolved
 const routeForceRefresh = ref(0)
 nextTick(() => {
-  router.afterEach(async() => {
+  router.afterEach(async () => {
     await nextTick()
     routeForceRefresh.value += 1
   })
@@ -113,7 +113,7 @@ export async function prevSlide(lastClicks = true) {
     router.replace({ query: { ...route.value.query, clicks: clicksTotal.value } })
 }
 
-export function go(page: number, clicks?: number) {
+export function go(page: number | string, clicks?: number) {
   return router.push({ path: getPath(page), query: { ...route.value.query, clicks } })
 }
 

package/logic/note.ts

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import { computed, ref, unref } from 'vue'
 import type { SlideInfo, SlideInfoExtended } from '@slidev/types'
 
-export interface UseSlideInfo{
+export interface UseSlideInfo {
   info: Ref<SlideInfoExtended | undefined>
   update: (data: Partial<SlideInfo>) => Promise<SlideInfoExtended | void>
 }
@@ -13,7 +13,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
   if (id == null) {
     return {
       info: ref() as Ref<SlideInfoExtended | undefined>,
-      update: async() => {},
+      update: async () => {},
     }
   }
   const url = `/@slidev/slide/${id}.json`
@@ -21,7 +21,7 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
 
   execute()
 
-  const update = async(data: Partial<SlideInfo>) => {
+  const update = async (data: Partial<SlideInfo>) => {
     return await fetch(
       url,
       {
@@ -35,10 +35,12 @@ export function useSlideInfo(id: number | undefined): UseSlideInfo {
     ).then(r => r.json())
   }
 
-  import.meta.hot?.on('slidev-update', (payload) => {
-    if (payload.id === id)
-      info.value = payload.data
-  })
+  if (__DEV__) {
+    import.meta.hot?.on('slidev-update', (payload) => {
+      if (payload.id === id)
+        info.value = payload.data
+    })
+  }
 
   return {
     info,
@@ -58,7 +60,7 @@ export function useDynamicSlideInfo(id: MaybeRef<number | undefined>) {
 
   return {
     info: computed(() => get(unref(id)).info.value),
-    update: async(data: Partial<SlideInfo>, newId?: number) => {
+    update: async (data: Partial<SlideInfo>, newId?: number) => {
       const info = get(newId ?? unref(id))
       const newData = await info.update(data)
       if (newData)

package/logic/recording.ts

@@ -110,18 +110,18 @@ export function useRecording() {
         video: currentCamera.value === 'none' || recordCamera.value !== true
           ? false
           : {
-            deviceId: currentCamera.value,
-          },
+              deviceId: currentCamera.value,
+            },
         audio: currentMic.value === 'none'
           ? false
           : {
-            deviceId: currentMic.value,
-          },
+              deviceId: currentMic.value,
+            },
       })
     }
   }
 
-  watch(currentCamera, async(v) => {
+  watch(currentCamera, async (v) => {
     if (v === 'none') {
       closeStream(streamCamera)
     }

package/modules/context.ts

@@ -8,7 +8,7 @@ import { isDark } from '../logic/dark'
 import { injectionSlidevContext } from '../constants'
 import { useContext } from '../composables/useContext'
 
-export type SlidevContextNavKey = 'route' | 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute'| 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide'
+export type SlidevContextNavKey = 'route' | 'path' | 'total' | 'currentPage' | 'currentPath' | 'currentRoute' | 'currentSlideId' | 'currentLayout' | 'nextRoute' | 'rawTree' | 'treeWithActiveStatuses' | 'tree' | 'downloadPDF' | 'next' | 'nextSlide' | 'openInEditor' | 'prev' | 'prevSlide'
 export type SlidevContextNavClicksKey = 'clicks' | 'clicksElements' | 'clicksTotal' | 'hasNext' | 'hasPrev'
 
 export type SlidevContextNav = Pick<typeof nav, SlidevContextNavKey>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.30.2",
+  "version": "0.31.2",
   "description": "Presentation slides for developers",
   "homepage": "https://sli.dev",
   "bugs": "https://github.com/slidevjs/slidev/issues",
@@ -13,32 +13,31 @@
   "funding": "https://github.com/sponsors/antfu",
   "dependencies": {
     "@antfu/utils": "^0.5.1",
-    "@slidev/parser": "0.30.2",
-    "@slidev/types": "0.30.2",
-    "@vueuse/core": "^8.2.5",
-    "@vueuse/head": "^0.7.5",
+    "@slidev/parser": "0.31.2",
+    "@slidev/types": "0.31.2",
+    "@vueuse/core": "^8.4.2",
+    "@vueuse/head": "^0.7.6",
     "@vueuse/motion": "^2.0.0-beta.18",
-    "codemirror": "^5.65.2",
+    "codemirror": "^5.65.3",
     "defu": "^6.0.0",
     "drauu": "^0.3.0",
     "file-saver": "^2.0.5",
     "js-base64": "^3.7.2",
     "js-yaml": "^4.1.0",
     "katex": "^0.15.3",
-    "mermaid": "^9.0.0",
+    "mermaid": "^9.0.1",
     "monaco-editor": "^0.33.0",
-    "nanoid": "^3.3.2",
+    "nanoid": "^3.3.4",
     "prettier": "^2.6.2",
     "recordrtc": "^5.6.2",
     "resolve": "^1.22.0",
     "vite-plugin-windicss": "^1.8.4",
-    "vue": "^3.2.32",
-    "vue-router": "^4.0.14",
-    "vue-starport": "^0.2.4",
+    "vue": "^3.2.33",
+    "vue-router": "^4.0.15",
+    "vue-starport": "^0.2.10",
     "windicss": "^3.5.1"
   },
   "engines": {
     "node": ">=14.0.0"
-  },
-  "readme": "# @slidev/client\n\n[![NPM version](https://img.shields.io/npm/v/@slidev/client?color=3AB9D4&label=)](https://www.npmjs.com/package/@slidev/client)\n\nClient code for [Slidev](https://sli.dev). Shipped with [`@slidev/cli`](https://www.npmjs.com/package/@slidev/cli).\n\n## License\n\nMIT License © 2021 [Anthony Fu](https://github.com/antfu)\n\n"
+  }
 }

package/routes.ts

@@ -19,22 +19,17 @@ export const routes: RouteRecordRaw[] = [
   { name: 'print', path: '/print', component: Print },
   { path: '', redirect: { path: '/1' } },
   { path: '/:pathMatch(.*)', redirect: { path: '/1' } },
+  {
+    name: 'presenter',
+    path: '/presenter/:no',
+    component: () => import('./internals/Presenter.vue'),
+  },
+  {
+    path: '/presenter',
+    redirect: { path: '/presenter/1' },
+  },
 ]
 
-if (import.meta.env.DEV) {
-  routes.push(
-    {
-      name: 'presenter',
-      path: '/presenter/:no',
-      component: () => import('./internals/Presenter.vue'),
-    },
-    {
-      path: '/presenter',
-      redirect: { path: '/presenter/1' },
-    },
-  )
-}
-
 export const router = createRouter({
   history: __SLIDEV_HASH_ROUTE__ ? createWebHashHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),
   routes,

package/setup/monaco.ts

@@ -4,7 +4,7 @@ import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
 /* __imports__ */
 
-const setup = createSingletonPromise(async() => {
+const setup = createSingletonPromise(async () => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     ...monaco.languages.typescript.typescriptDefaults.getCompilerOptions(),
     noUnusedLocals: false,
@@ -16,7 +16,7 @@ const setup = createSingletonPromise(async() => {
 
   await Promise.all([
     // load workers
-    (async() => {
+    (async () => {
       const [
         { default: EditorWorker },
         { default: JsonWorker },

package/setup/root.ts

@@ -1,9 +1,11 @@
 /* __imports__ */
-import { useHead } from '@vueuse/head'
 import { watch } from 'vue'
+import { useHead } from '@vueuse/head'
+import { configs } from '../env'
+import { initSharedState, onPatch, patch } from '../state/shared'
+import { initDrawingState } from '../state/drawings'
 import { clicks, currentPage, getPath, isPresenter } from '../logic/nav'
 import { router } from '../routes'
-import { configs, serverState } from '../env'
 
 export default function setupRoot() {
   // @ts-expect-error injected in runtime
@@ -12,36 +14,30 @@ export default function setupRoot() {
 
   /* __injections__ */
 
-  useHead({
-    title: configs.titleTemplate.replace('%s', configs.title || 'Slidev'),
-  })
+  const title = configs.titleTemplate.replace('%s', configs.title || 'Slidev')
+  useHead({ title })
+  initSharedState(`${title} - shared`)
+  initDrawingState(`${title} - drawings`)
+
+  // update shared state
+  function updateSharedState() {
+    if (isPresenter.value) {
+      patch('page', +currentPage.value)
+      patch('clicks', clicks.value)
+    }
+  }
+  router.afterEach(updateSharedState)
+  watch(clicks, updateSharedState)
 
-  function onServerStateChanged() {
-    if (isPresenter.value)
-      return
-    if (+serverState.page !== +currentPage.value || clicks.value !== serverState.clicks) {
+  onPatch((state) => {
+    if (+state.page !== +currentPage.value || clicks.value !== state.clicks) {
       router.replace({
-        path: getPath(serverState.page),
+        path: getPath(state.page),
         query: {
           ...router.currentRoute.value.query,
-          clicks: serverState.clicks || 0,
+          clicks: state.clicks || 0,
         },
       })
     }
-  }
-  function updateServerState() {
-    if (isPresenter.value) {
-      serverState.page = +currentPage.value
-      serverState.clicks = clicks.value
-    }
-  }
-
-  // upload state to server
-  router.afterEach(updateServerState)
-  watch(clicks, updateServerState)
-
-  // sync with server state
-  router.isReady().then(() => {
-    watch(serverState, onServerStateChanged, { deep: true })
   })
 }

package/state/drawings.ts

@@ -0,0 +1,7 @@
+import serverDrawingState from 'server-reactive:drawings?diff'
+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 }

package/state/shared.ts

@@ -0,0 +1,17 @@
+import serverState from 'server-reactive:nav'
+import { createSyncState } from './syncState'
+
+export interface SharedState {
+  page: number
+  clicks: number
+  cursor?: {
+    x: number
+    y: number
+  }
+}
+
+const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState, {
+  page: 1,
+  clicks: 0,
+})
+export { init as initSharedState, onPatch, patch, state as sharedState }

package/state/syncState.ts

@@ -0,0 +1,67 @@
+import { reactive, toRaw, watch } from 'vue'
+
+export function createSyncState<State extends object>(serverState: State, defaultState: State, persist = false) {
+  const onPatchCallbacks: ((state: State) => void)[] = []
+  let patching = false
+  let updating = false
+  let patchingTimeout: NodeJS.Timeout
+  let updatingTimeout: NodeJS.Timeout
+
+  const state = __DEV__
+    ? reactive<State>(serverState) as State
+    : reactive<State>(defaultState) as State
+
+  function onPatch(fn: (state: State) => void) {
+    onPatchCallbacks.push(fn)
+  }
+
+  function patch<K extends keyof State>(key: K, value: State[K]) {
+    clearTimeout(patchingTimeout)
+    patching = true
+    state[key] = value
+    patchingTimeout = setTimeout(() => patching = false, 0)
+  }
+
+  function onUpdate(patch: Partial<State>) {
+    if (!patching) {
+      clearTimeout(updatingTimeout)
+      updating = true
+      Object.entries(patch).forEach(([key, value]) => {
+        state[key as keyof State] = value as State[keyof State]
+      })
+      updatingTimeout = setTimeout(() => updating = false, 0)
+    }
+  }
+
+  function init(channelKey: string) {
+    let stateChannel: BroadcastChannel
+    if (!__DEV__ && !persist) {
+      stateChannel = new BroadcastChannel(channelKey)
+      stateChannel.addEventListener('message', (event: MessageEvent<Partial<State>>) => onUpdate(event.data))
+    }
+    else if (!__DEV__ && persist) {
+      window.addEventListener('storage', (event) => {
+        if (event && event.key === channelKey && event.newValue)
+          onUpdate(JSON.parse(event.newValue) as Partial<State>)
+      })
+    }
+
+    function onDrawingStateChanged() {
+      if (!persist && stateChannel && !updating)
+        stateChannel.postMessage(toRaw(state))
+      else if (persist && !updating)
+        window.localStorage.setItem(channelKey, JSON.stringify(state))
+      if (!patching)
+        onPatchCallbacks.forEach((fn: (state: State) => void) => fn(state))
+    }
+
+    watch(state, onDrawingStateChanged, { deep: true })
+    if (!__DEV__ && persist) {
+      const serialzedState = window.localStorage.getItem(channelKey)
+      if (serialzedState)
+        onUpdate(JSON.parse(serialzedState) as Partial<State>)
+    }
+  }
+
+  return { init, onPatch, patch, state }
+}