feat: persist drawings as svg

packages/client/package.json

@@ -19,14 +19,14 @@
     "@vueuse/head": "^0.6.0",
     "@vueuse/motion": "^1.5.6",
     "codemirror": "^5.62.2",
-    "drauu": "^0.1.0-beta.2",
+    "drauu": "^0.1.0-beta.3",
     "file-saver": "^2.0.5",
     "js-base64": "^3.6.1",
     "js-yaml": "^4.1.0",
     "katex": "^0.13.13",
     "mermaid": "8.5.0",
     "monaco-editor": "^0.26.1",
-    "nanoid": "^3.1.23",
+    "nanoid": "^3.1.24",
     "prettier": "^2.3.2",
     "recordrtc": "^5.6.2",
     "resolve": "^1.20.0",

packages/slidev/node/drawings.ts

@@ -1,30 +1,60 @@
-import { dirname, resolve } from 'path'
+import { dirname, resolve, join } from 'path'
+import { basename } from 'path/posix'
 import fs from 'fs-extra'
+import fg from 'fast-glob'
 import { ResolvedSlidevOptions } from './options'
 
-function resolveDrawingsPath(options: ResolvedSlidevOptions): string | undefined {
+function resolveDrawingsDir(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')
+    ? resolve(dirname(options.entry), '.slidev/drawings')
     : 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
+  const dir = resolveDrawingsDir(options)
+  if (!dir || !fs.existsSync(dir))
     return {}
+
+  const files = await fg('*.svg', {
+    onlyFiles: true,
+    cwd: dir,
+    absolute: true,
+  })
+
+  const obj: Record<string, string> = {}
+  Promise.all(files.map(async(path) => {
+    const num = +basename(path, '.svg')
+    if (Number.isNaN(num))
+      return
+    const content = await fs.readFile(path, 'utf8')
+    const lines = content.split(/\n/g)
+    obj[num.toString()] = lines.slice(1, -1).join('\n')
+  }))
+
+  return obj
 }
 
-export async function writeDarwings(options: ResolvedSlidevOptions, drawing: any) {
-  const path = resolveDrawingsPath(options)
-  if (!path)
+export async function writeDarwings(options: ResolvedSlidevOptions, drawing: Record<string, string>) {
+  const dir = resolveDrawingsDir(options)
+  if (!dir)
     return
 
-  await fs.ensureDir(dirname(path))
-  return await fs.writeJSON(path, drawing, { spaces: 2 })
+  const width = options.data.config.canvasWidth
+  const height = Math.round(width / options.data.config.aspectRatio)
+  const SVG_HEAD = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`
+
+  await fs.ensureDir(dir)
+
+  return Promise.all(
+    Object.entries(drawing).map(async([key, value]) => {
+      if (!value)
+        return
+
+      const svg = `${SVG_HEAD}\n${value}\n</svg>`
+      await fs.writeFile(join(dir, `${key}.svg`), svg, 'utf-8')
+    }),
+  )
 }

packages/slidev/node/plugins/preset.ts

@@ -132,11 +132,11 @@ export async function ViteSlidevPlugin(
         },
         drawings: drawingData,
       },
-      onChanged(key, data) {
+      onChanged(key, data, patch) {
         if (!options.data.config.persistDrawings)
           return
         if (key === 'drawings')
-          writeDarwings(options, data)
+          writeDarwings(options, patch ?? data)
       },
     }),
 

packages/slidev/package.json

@@ -68,7 +68,7 @@
     "markdown-it-footnote": "^3.0.3",
     "markdown-it-link-attributes": "^3.0.0",
     "monaco-editor": "^0.26.1",
-    "nanoid": "^3.1.23",
+    "nanoid": "^3.1.24",
     "open": "^8.2.1",
     "pdf-lib": "^1.16.0",
     "prismjs": "^1.24.1",
@@ -82,7 +82,7 @@
     "vite-plugin-icons": "^0.6.5",
     "vite-plugin-md": "^0.10.0",
     "vite-plugin-remote-assets": "^0.2.2",
-    "vite-plugin-vue-server-ref": "^0.2.1",
+    "vite-plugin-vue-server-ref": "^0.2.2",
     "vite-plugin-windicss": "^1.2.7",
     "vue": "^3.2.2",
     "windicss": "^3.1.7",