feat: allow to persist drawings

packages/client/internals/Presenter.vue

@@ -50,6 +50,7 @@ const nextSlide = computed(() => {
   }
 })
 
+// sync presenter cusor
 onMounted(() => {
   const slidesContainer = main.value!.querySelector('#slide-content')!
   const mouse = reactive(useMouse())

packages/parser/src/config.ts

@@ -23,6 +23,7 @@ export function resolveConfig(headmatter: any, themeMeta: SlidevThemeMeta = {})
     selectable: false,
     themeConfig: {},
     fonts: {} as ResolvedFontOptions,
+    persistDrawings: false,
   }
   const config: SlidevConfig = {
     ...defaultConfig,

packages/slidev/node/drawings.ts

@@ -0,0 +1,30 @@
+import { dirname, resolve } from 'path'
+import fs from 'fs-extra'
+import { ResolvedSlidevOptions } from './options'
+
+function resolveDrawingsPath(options: ResolvedSlidevOptions): string | undefined {
+  if (options.data.config.persistDrawings === false)
+    return undefined
+
+  return options.data.config.persistDrawings === true
+    ? resolve(dirname(options.entry), '.slidev/drawings.json')
+    : options.data.config.persistDrawings
+}
+
+export async function loadDrawings(options: ResolvedSlidevOptions) {
+  const path = resolveDrawingsPath(options)
+
+  if (path && fs.existsSync(path))
+    return await fs.readJson(path)
+  else
+    return {}
+}
+
+export async function writeDarwings(options: ResolvedSlidevOptions, drawing: any) {
+  const path = resolveDrawingsPath(options)
+  if (!path)
+    return
+
+  await fs.ensureDir(dirname(path))
+  return await fs.writeJSON(path, drawing, { spaces: 2 })
+}

packages/slidev/node/plugins/preset.ts

@@ -6,6 +6,7 @@ import ViteComponents from 'vite-plugin-components'
 import RemoteAssets, { DefaultRules } from 'vite-plugin-remote-assets'
 import { notNullish } from '@antfu/utils'
 import { ResolvedSlidevOptions, SlidevPluginOptions, SlidevServerOptions } from '../options'
+import { loadDrawings, writeDarwings } from '../drawings'
 import { createConfigPlugin } from './extendConfig'
 import { createSlidesLoader } from './loaders'
 import { createMonacoTypesLoader } from './monacoTransform'
@@ -72,6 +73,8 @@ export async function ViteSlidevPlugin(
 
   const MarkdownPlugin = await createMarkdownPlugin(options, pluginOptions)
 
+  const drawingData = await loadDrawings(options)
+
   return [
     await createWindiCSSPlugin(options, pluginOptions),
     MarkdownPlugin,
@@ -126,9 +129,16 @@ export async function ViteSlidevPlugin(
           page: 0,
           clicks: 0,
         },
-        drauu: {},
+        drauu: drawingData,
+      },
+      onChanged(name, data) {
+        if (!options.data.config.persistDrawings)
+          return
+        if (name === 'drauu')
+          writeDarwings(options, data)
       },
     }),
+
     createConfigPlugin(options),
     createClientSetupPlugin(options),
     createMonacoTypesLoader(),

packages/slidev/node/plugins/serverRef.ts

@@ -8,6 +8,7 @@ export interface ServerRefOptions<T extends Record<string, unknown>> {
   dataMap?: T
   debounceMs?: number
   debug?: boolean
+  clientVue?: string
   onChanged?: <K extends keyof T>(name: K, data: T[K], timestamp: number, isPatch?: boolean) => void
 }
 
@@ -18,6 +19,7 @@ export function VitePluginServerRef(options: ServerRefOptions<any> = {}): Plugin
     dataMap = {},
     debounceMs = 10,
     debug = true,
+    clientVue = 'vue',
   } = options
 
   return {
@@ -60,7 +62,7 @@ export function VitePluginServerRef(options: ServerRefOptions<any> = {}): Plugin
         return
       const name = id.slice(PREFIX.length)
       return `
-import { ref, watch } from "vue"
+import { ref, watch } from "${clientVue}"
 
 const data = ref(${JSON.stringify(dataMap[name] ?? null)})
 

packages/types/src/config.ts

@@ -100,6 +100,14 @@ export interface SlidevConfig {
    * @default {}
    */
   fonts: ResolvedFontOptions
+
+  /**
+   * Persist the drawings to disk
+   * Passing string to specify the path (default to `.slidev/drawings.json`)
+   *
+   * @default false
+   */
+  persistDrawings: boolean | string
 }
 
 export type FontOptions = {