feat: preserve comments in frontmatter

packages/client/composables/useDragElements.ts

@@ -52,7 +52,7 @@ export function useDragElementsUpdater(no: number) {
         return
       frontmatter.dragPos[id] = posStr
       newPatch = {
-        frontmatter,
+        dragPos: frontmatter.dragPos,
       }
     }
     else {

packages/client/package.json

@@ -48,7 +48,6 @@
     "file-saver": "^2.0.5",
     "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
-    "js-yaml": "^4.1.0",
     "katex": "^0.16.10",
     "lz-string": "^1.5.0",
     "mermaid": "^10.9.0",
@@ -61,7 +60,8 @@
     "unocss": "^0.59.0",
     "vue": "^3.4.21",
     "vue-demi": "^0.14.7",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "yaml": "^2.4.1"
   },
   "devDependencies": {
     "vite": "^5.2.8"

packages/parser/package.json

@@ -45,6 +45,6 @@
   },
   "dependencies": {
     "@slidev/types": "workspace:*",
-    "js-yaml": "^4.1.0"
+    "yaml": "^2.4.1"
   }
 }

packages/parser/src/core.ts

@@ -1,5 +1,5 @@
-import YAML from 'js-yaml'
-import { ensurePrefix, isObject, objectMap } from '@antfu/utils'
+import YAML from 'yaml'
+import { ensurePrefix, objectMap } from '@antfu/utils'
 import type { FrontmatterStyle, SlidevFeatureFlags, SlidevMarkdown, SlidevPreparserExtension, SourceSlideInfo } from '@slidev/types'
 
 export function stringify(data: SlidevMarkdown) {
@@ -15,10 +15,10 @@ export function stringifySlide(data: SourceSlideInfo, idx = 0) {
 export function prettifySlide(data: SourceSlideInfo) {
   const trimed = data.content.trim()
   data.content = trimed ? `\n${data.content.trim()}\n` : ''
-  data.raw = data.frontmatterRaw
+  data.raw = data.frontmatterDoc?.contents
     ? data.frontmatterStyle === 'yaml'
-      ? `\`\`\`yaml\n${data.frontmatterRaw.trim()}\n\`\`\`\n${data.content}`
-      : `---\n${data.frontmatterRaw.trim()}\n---\n${data.content}`
+      ? `\`\`\`yaml\n${data.frontmatterDoc.toString().trim()}\n\`\`\`\n${data.content}`
+      : `---\n${data.frontmatterDoc.toString().trim()}\n---\n${data.content}`
     : data.content
   if (data.note)
     data.raw += `\n<!--\n${data.note.trim()}\n-->\n`
@@ -30,39 +30,33 @@ export function prettify(data: SlidevMarkdown) {
   return data
 }
 
-function safeParseYAML(str: string) {
-  const res = YAML.load(str)
-  return isObject(res) ? res : {}
-}
-
 function matter(code: string) {
   let type: FrontmatterStyle | undefined
   let raw: string | undefined
 
-  const data: any = {}
-
   let content = code
     .replace(/^---.*\r?\n([\s\S]*?)---/, (_, f) => {
       type = 'frontmatter'
       raw = f
-      Object.assign(data, safeParseYAML(f))
       return ''
     })
 
   if (type !== 'frontmatter') {
     content = content
-      .replace(/^\s*```ya?ml([\s\S]*?)```/, (_, d) => {
+      .replace(/^\s*```ya?ml([\s\S]*?)```/, (_, f) => {
         type = 'yaml'
-        raw = d
-        Object.assign(data, safeParseYAML(d))
+        raw = f
         return ''
       })
   }
 
+  const doc = YAML.parseDocument(raw || '')
+
   return {
     type,
     raw,
-    data,
+    doc,
+    data: doc.toJSON(),
     content,
   }
 }
@@ -111,6 +105,7 @@ export function parseSlide(raw: string): Omit<SourceSlideInfo, 'filepath' | 'ind
     content,
     frontmatter,
     frontmatterStyle: matterResult.type,
+    frontmatterDoc: matterResult.doc,
     frontmatterRaw: matterResult.raw,
     note,
   }

packages/parser/src/fs.ts

@@ -1,6 +1,6 @@
 import { promises as fs } from 'node:fs'
 import { dirname, resolve } from 'node:path'
-import YAML from 'js-yaml'
+import YAML from 'yaml'
 import { slash } from '@antfu/utils'
 import type { PreparserExtensionLoader, SlideInfo, SlidevData, SlidevMarkdown, SlidevPreparserExtension, SourceSlideInfo } from '@slidev/types'
 import { detectFeatures, parse, parseRangeString, stringify } from './core'
@@ -35,7 +35,7 @@ export async function load(userRoot: string, filepath: string, content?: string,
         hEnd++
       hm = lines.slice(1, hEnd).join('\n')
     }
-    const o = YAML.load(hm) as Record<string, unknown> ?? {}
+    const o = YAML.parse(hm) as Record<string, unknown> ?? {}
     extensions = await preparserExtensionLoader(o, filepath, mode)
   }
 

packages/slidev/node/utils.ts

@@ -1,5 +1,6 @@
 import type { Token } from 'markdown-it'
-import type { ResolvedFontOptions } from '@slidev/types'
+import type { ResolvedFontOptions, SlideInfo } from '@slidev/types'
+import YAML from 'yaml'
 
 export function stringifyMarkdownTokens(tokens: Token[]) {
   return tokens.map(token => token.children
@@ -21,3 +22,31 @@ export function generateGoogleFontsUrl(options: ResolvedFontOptions) {
 
   return `https://fonts.googleapis.com/css2?${fonts}&display=swap`
 }
+
+export function updateDragPos(slide: SlideInfo, dragPos: Record<string, string>) {
+  const source = slide.source
+  slide.frontmatter.dragPos = source.frontmatter.dragPos = dragPos
+  let doc = source.frontmatterDoc
+  if (!doc) {
+    source.frontmatterStyle = 'frontmatter'
+    source.frontmatterDoc = doc = new YAML.Document({})
+  }
+  const valueNode = doc.createNode(dragPos)
+  let found = false
+  YAML.visit(doc.contents, {
+    Pair(_key, node, path) {
+      if (path.length === 1 && YAML.isScalar(node.key) && node.key.value === 'dragPos') {
+        node.value = valueNode
+        found = true
+        return YAML.visit.BREAK
+      }
+    },
+  })
+  if (!found) {
+    if (!YAML.isMap(doc.contents))
+      doc.contents = doc.createNode({})
+    doc.contents.add(
+      doc.createPair('dragPos', valueNode),
+    )
+  }
+}

packages/slidev/node/vite/loaders.ts

@@ -4,7 +4,6 @@ import { isString, isTruthy, notNullish, range } from '@antfu/utils'
 import fg from 'fast-glob'
 import fs from 'fs-extra'
 import Markdown from 'markdown-it'
-import YAML from 'js-yaml'
 import { bold, gray, red, yellow } from 'kolorist'
 
 // @ts-expect-error missing types
@@ -14,7 +13,7 @@ import * as parser from '@slidev/parser/fs'
 import equal from 'fast-deep-equal'
 
 import type { LoadResult } from 'rollup'
-import { stringifyMarkdownTokens } from '../utils'
+import { stringifyMarkdownTokens, updateDragPos } from '../utils'
 import { toAtFS } from '../resolver'
 import { templates } from '../virtual'
 import type { VirtualModuleTempalteContext } from '../virtual/types'
@@ -168,10 +167,8 @@ export function createSlidesLoader(
               slide.content = slide.source.content = body.content
             if (body.note)
               slide.note = slide.source.note = body.note
-            if (body.frontmatter) {
-              Object.assign(slide.frontmatter, body.frontmatter)
-              slide.source.frontmatterRaw = YAML.dump(slide.frontmatter)
-            }
+            if (body.dragPos)
+              updateDragPos(slide, body.dragPos)
 
             parser.prettifySlide(slide.source)
             const fileContent = await parser.save(data.markdownFiles[slide.source.filepath])
@@ -183,7 +180,7 @@ export function createSlidesLoader(
               server?.moduleGraph.invalidateModule(
                 server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${no}.md`)!,
               )
-              if (body.frontmatter) {
+              if (body.dragPos) {
                 server?.moduleGraph.invalidateModule(
                   server.moduleGraph.getModuleById(`${VIRTUAL_SLIDE_PREFIX}${no}.frontmatter`)!,
                 )

packages/types/src/types.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef } from 'vue'
 import type { RouteComponent, RouteMeta } from 'vue-router'
+import type YAML from 'yaml'
 import type { SlidevConfig } from './config'
 
 export type FrontmatterStyle = 'frontmatter' | 'yaml'
@@ -28,6 +29,7 @@ export interface SourceSlideInfo extends SlideInfoBase {
   end: number
   raw: string
   frontmatterRaw?: string
+  frontmatterDoc?: YAML.Document
   frontmatterStyle?: FrontmatterStyle
 }
 
@@ -44,8 +46,9 @@ export interface SlideInfo extends SlideInfoBase {
 /**
  * Editable fields for a slide
  */
-export type SlidePatch = Partial<Pick<SlideInfoBase, 'content' | 'note' | 'frontmatter'>> & {
+export type SlidePatch = Partial<Pick<SlideInfoBase, 'content' | 'note'>> & {
   skipHmr?: boolean
+  dragPos?: Record<string, string>
 }
 
 /**