@slidev/client 0.49.29 → 0.50.0-beta.1

package/setup/root.ts

@@ -1,17 +1,17 @@
-import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
+import setups from '#slidev/setups/root'
 import { useHead } from '@unhead/vue'
+import { computed, getCurrentInstance, reactive, ref, shallowRef, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { createFixedClicks } from '../composables/useClicks'
+import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
+import { useNav } from '../composables/useNav'
+import { injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext, TRUST_ORIGINS } from '../constants'
 import { configs, slidesTitle } from '../env'
-import { initSharedState, onPatch, patch } from '../state/shared'
-import { initDrawingState } from '../state/drawings'
-import { TRUST_ORIGINS, injectionClicksContext, injectionCurrentPage, injectionRenderContext, injectionSlidevContext } from '../constants'
 import { skipTransition } from '../logic/hmr'
-import { makeId } from '../logic/utils'
 import { getSlidePath } from '../logic/slides'
-import { createFixedClicks } from '../composables/useClicks'
-import { useNav } from '../composables/useNav'
-import { useEmbeddedControl } from '../composables/useEmbeddedCtrl'
-import setups from '#slidev/setups/root'
+import { makeId } from '../logic/utils'
+import { initDrawingState } from '../state/drawings'
+import { initSharedState, onPatch, patch } from '../state/shared'
 
 export default function setupRoot() {
   const app = getCurrentInstance()!.appContext.app

package/setup/shortcuts.ts

@@ -1,12 +1,12 @@
-import { and, not, or } from '@vueuse/math'
 import type { NavOperations, ShortcutOptions } from '@slidev/types'
-import { downloadPDF } from '../utils'
+import setups from '#slidev/setups/shortcuts'
+import { and, not, or } from '@vueuse/math'
+import { useDrawings } from '../composables/useDrawings'
+import { useNav } from '../composables/useNav'
 import { toggleDark } from '../logic/dark'
 import { activeDragElement, magicKeys, showGotoDialog, showOverview, toggleOverview } from '../state'
-import { useNav } from '../composables/useNav'
-import { useDrawings } from '../composables/useDrawings'
+import { downloadPDF } from '../utils'
 import { currentOverviewPage, downOverviewPage, nextOverviewPage, prevOverviewPage, upOverviewPage } from './../logic/overview'
-import setups from '#slidev/setups/shortcuts'
 
 export default function setupShortcuts() {
   const { go, goFirst, goLast, next, nextSlide, prev, prevSlide } = useNav()

package/state/drawings.ts

@@ -6,6 +6,7 @@ export type DrawingsState = Record<number, string | undefined>
 export const {
   init: initDrawingState,
   onPatch: onPatchDrawingState,
+  onUpdate: onDrawingUpdate,
   patch: patchDrawingState,
   state: drawingState,
 } = createSyncState<DrawingsState>(serverDrawingState, serverDrawingState, __SLIDEV_FEATURE_DRAWINGS_PERSIST__)

package/state/index.ts

@@ -1,7 +1,7 @@
+import type { DragElementState } from '../composables/useDragElements'
 import { breakpointsTailwind, isClient, useActiveElement, useBreakpoints, useFullscreen, useLocalStorage, useMagicKeys, useToggle, useWindowSize } from '@vueuse/core'
 import { computed, ref, shallowRef } from 'vue'
 import { slideAspect } from '../env'
-import type { DragElementState } from '../composables/useDragElements'
 
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)

package/state/shared.ts

@@ -22,7 +22,7 @@ export interface SharedState {
   }
 }
 
-const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState, {
+const { init, onPatch, onUpdate, patch, state } = createSyncState<SharedState>(serverState, {
   page: 1,
   clicks: 0,
   clicksTotal: 0,
@@ -34,6 +34,7 @@ const { init, onPatch, patch, state } = createSyncState<SharedState>(serverState
 export {
   init as initSharedState,
   onPatch,
+  onUpdate as onSharedUpdate,
   patch,
   state as sharedState,
 }

package/state/snapshot.ts

@@ -0,0 +1,13 @@
+import serverSnapshotState from 'server-reactive:snapshots?diff'
+import { createSyncState } from './syncState'
+
+export type SnapshotState = Record<number, {
+  revision: string
+  image: string
+}>
+
+export const snapshotState = createSyncState<SnapshotState>(
+  serverSnapshotState,
+  serverSnapshotState,
+  true,
+)

package/state/syncState.ts

@@ -1,4 +1,72 @@
-import { reactive, toRaw, watch } from 'vue'
+import { reactive, ref, toRaw, watch } from 'vue'
+
+export type SyncWrite<State extends object> = (state: State, updating?: boolean) => void
+
+export interface Sync {
+  enabled?: boolean
+  init: <State extends object>(channelKey: string, onUpdate: (data: Partial<State>) => void, state: State, persist?: boolean) => SyncWrite<State> | undefined
+}
+
+interface BuiltinSync extends Sync {
+  channels: BroadcastChannel[]
+  disable: () => void
+  listener?: (event: StorageEvent) => void
+}
+
+const builtinSync: BuiltinSync = {
+  channels: [],
+  enabled: true,
+  init<State extends object>(channelKey: string, onUpdate: (data: Partial<State>) => void, state: State, persist = false) {
+    let stateChannel: BroadcastChannel
+    if (!__SLIDEV_HAS_SERVER__ && !persist) {
+      stateChannel = new BroadcastChannel(channelKey)
+      stateChannel.addEventListener('message', (event: MessageEvent<Partial<State>>) => onUpdate(event.data))
+      this.channels.push(stateChannel)
+    }
+    else if (!__SLIDEV_HAS_SERVER__ && persist) {
+      this.listener = function (event: StorageEvent) {
+        if (event && event.key === channelKey && event.newValue)
+          onUpdate(JSON.parse(event.newValue) as Partial<State>)
+      }
+      window.addEventListener('storage', this.listener)
+      const serializedState = window.localStorage.getItem(channelKey)
+      if (serializedState)
+        onUpdate(JSON.parse(serializedState) as Partial<State>)
+    }
+    return (state: State, updating = false) => {
+      if (this.enabled) {
+        if (!persist && stateChannel && !updating)
+          stateChannel.postMessage(toRaw(state))
+        if (persist && !updating)
+          window.localStorage.setItem(channelKey, JSON.stringify(state))
+      }
+    }
+  },
+  disable() {
+    this.enabled = false
+    this.channels.forEach(channel => channel.close())
+    if (this.listener) {
+      window.removeEventListener('storage', this.listener)
+    }
+  },
+}
+const syncInterfaces: Sync[] = reactive([builtinSync])
+const channels: Map<string, { onUpdate: (data: Partial<object>) => void, persist?: boolean, state: object }> = new Map()
+const syncWrites = ref<Record<string, SyncWrite<object>[]>>({})
+
+export function disableBuiltinSync() {
+  builtinSync.disable()
+}
+
+export function addSyncMethod(sync: Sync) {
+  syncInterfaces.push(sync)
+  for (const [channelKey, { onUpdate, persist, state }] of channels.entries()) {
+    const write = sync.init(channelKey, onUpdate, state, persist)
+    if (write) {
+      syncWrites.value[channelKey].push(write)
+    }
+  }
+}
 
 export function createSyncState<State extends object>(serverState: State, defaultState: State, persist = false) {
   const onPatchCallbacks: ((state: State) => void)[] = []
@@ -36,35 +104,19 @@ export function createSyncState<State extends object>(serverState: State, defaul
   }
 
   function init(channelKey: string) {
-    let stateChannel: BroadcastChannel
-    if (!__SLIDEV_HAS_SERVER__ && !persist) {
-      stateChannel = new BroadcastChannel(channelKey)
-      stateChannel.addEventListener('message', (event: MessageEvent<Partial<State>>) => onUpdate(event.data))
-    }
-    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>)
-      })
-    }
+    channels.set(channelKey, { onUpdate, persist, state })
+    syncWrites.value[channelKey] = syncInterfaces
+      .map(sync => sync.init<State>(channelKey, onUpdate, state, persist))
+      .filter((x): x is SyncWrite<object> => Boolean(x))
 
     function onStateChanged() {
-      if (!persist && stateChannel && !updating)
-        stateChannel.postMessage(toRaw(state))
-      else if (persist && !updating)
-        window.localStorage.setItem(channelKey, JSON.stringify(state))
+      syncWrites.value[channelKey].forEach(write => write?.(toRaw(state), updating))
       if (!patching)
         onPatchCallbacks.forEach((fn: (state: State) => void) => fn(state))
     }
 
-    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>)
-    }
+    watch(state, onStateChanged, { deep: true })
   }
 
-  return { init, onPatch, patch, state }
+  return { init, onPatch, onUpdate, patch, state }
 }

package/styles/index.css

@@ -23,6 +23,7 @@ html {
   cursor: pointer;
   @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
+  @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
   @apply md:p-2;
 }
 

package/uno.config.ts

@@ -1,3 +1,5 @@
+import extractorMdc from '@unocss/extractor-mdc'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 import {
   defineConfig,
   presetAttributify,
@@ -6,8 +8,6 @@ import {
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import { variantMatcher } from '@unocss/preset-mini/utils'
-import extractorMdc from '@unocss/extractor-mdc'
 
 export default defineConfig({
   safelist: [