@slidev/client 0.49.28 → 0.50.0-beta.1

package/setup/monaco.ts

@@ -1,9 +1,9 @@
-import { createSingletonPromise } from '@antfu/utils'
 import type { MonacoSetupReturn } from '@slidev/types'
-import * as monaco from 'monaco-editor'
-import { watchEffect } from 'vue'
+import configs from '#slidev/configs'
+import setups from '#slidev/setups/monaco'
+import { createSingletonPromise } from '@antfu/utils'
 import { setupTypeAcquisition } from '@typescript/ata'
-import ts from 'typescript'
+import * as monaco from 'monaco-editor'
 
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
 import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
@@ -11,18 +11,18 @@ 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 ts from 'typescript'
+
+import { watchEffect } from 'vue'
+
 // @ts-expect-error missing types
 import { ContextViewService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextViewService'
 
 // @ts-expect-error missing types
 import { SyncDescriptor } from 'monaco-editor/esm/vs/platform/instantiation/common/descriptors'
-
 // @ts-expect-error missing types
 import { StandaloneServices } from 'monaco-editor/esm/vs/editor/standalone/browser/standaloneServices'
-
 import { isDark } from '../logic/dark'
-import configs from '#slidev/configs'
-import setups from '#slidev/setups/monaco'
 
 window.MonacoEnvironment = {
   getWorker(_, label) {
@@ -92,7 +92,7 @@ const setup = createSingletonPromise(async () => {
   monaco.languages.register({ id: 'typescript' })
   monaco.languages.register({ id: 'javascript' })
 
-  const { shiki, themes, shikiToMonaco } = await import('#slidev/shiki')
+  const { shiki, languages, themes, shikiToMonaco } = await import('#slidev/shiki')
   const highlighter = await shiki
 
   const editorOptions: MonacoSetupReturn['editorOptions'] & object = {}
@@ -113,6 +113,10 @@ const setup = createSingletonPromise(async () => {
         : themes.light || 'vitesse-light')
     })
   }
+  // Register all languages, otherwise Monaco will not highlight them
+  for (const lang of languages) {
+    monaco.languages.register({ id: lang })
+  }
 
   return {
     monaco,

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,16 +1,13 @@
-import { fileURLToPath } from 'node:url'
-import { readFileSync } from 'node:fs'
+import extractorMdc from '@unocss/extractor-mdc'
+import { variantMatcher } from '@unocss/preset-mini/utils'
 import {
   defineConfig,
   presetAttributify,
-  presetIcons,
   presetTypography,
   presetUno,
   transformerDirectives,
   transformerVariantGroup,
 } from 'unocss'
-import { variantMatcher } from '@unocss/preset-mini/utils'
-import extractorMdc from '@unocss/extractor-mdc'
 
 export default defineConfig({
   safelist: [
@@ -41,18 +38,8 @@ export default defineConfig({
   presets: [
     presetUno(),
     presetAttributify(),
-    presetIcons({
-      collectionsNodeResolvePath: fileURLToPath(import.meta.url),
-      collections: {
-        slidev: {
-          logo: async () => {
-            const content = readFileSync(fileURLToPath(new URL('assets/logo.svg', import.meta.url)), 'utf-8')
-            return content
-          },
-        },
-      },
-    }),
     presetTypography(),
+    /* Preset Icons is added in ../node/setups/unocss.ts */
   ],
   transformers: [
     transformerDirectives({ enforce: 'pre' }),