feat: handle loader error (#1718)

Author: kermanx

packages/parser/fs.d.ts

@@ -13,24 +13,21 @@
   "bugs": "https://github.com/slidevjs/slidev/issues",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
     },
     "./core": {
-      "types": "./dist/core.d.ts",
-      "import": "./dist/core.mjs",
-      "require": "./dist/core.js"
+      "types": "./dist/core.d.mts",
+      "import": "./dist/core.mjs"
     },
     "./fs": {
-      "types": "./fs.d.ts",
-      "import": "./dist/fs.mjs",
-      "require": "./dist/fs.js"
+      "types": "./dist/fs.d.mts",
+      "import": "./dist/fs.mjs"
     }
   },
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/index.d.mts",
   "files": [
     "*.d.ts",
     "dist"

packages/parser/package.json

@@ -1,4 +1,4 @@
-import { promises as fs } from 'node:fs'
+import fs from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import YAML from 'yaml'
 import { slash } from '@antfu/utils'
@@ -20,7 +20,7 @@ export function injectPreparserExtensionLoader(fn: PreparserExtensionLoader) {
 export type LoadedSlidevData = Omit<SlidevData, 'config' | 'themeMeta'>
 
 export async function load(userRoot: string, filepath: string, content?: string, mode?: string): Promise<LoadedSlidevData> {
-  const markdown = content ?? await fs.readFile(filepath, 'utf-8')
+  const markdown = content ?? fs.readFileSync(filepath, 'utf-8')
 
   let extensions: SlidevPreparserExtension[] | undefined
   if (preparserExtensionLoader) {
@@ -45,23 +45,33 @@ export async function load(userRoot: string, filepath: string, content?: string,
   async function loadMarkdown(path: string, range?: string, frontmatterOverride?: Record<string, unknown>, importers?: SourceSlideInfo[]) {
     let md = markdownFiles[path]
     if (!md) {
-      const raw = await fs.readFile(path, 'utf-8')
+      const raw = fs.readFileSync(path, 'utf-8')
       md = await parse(raw, path, extensions)
       markdownFiles[path] = md
     }
 
     const directImporter = importers?.at(-1)
     for (const index of parseRangeString(md.slides.length, range)) {
       const subSlide = md.slides[index - 1]
-      await loadSlide(subSlide, frontmatterOverride, importers)
+      try {
+        await loadSlide(md, subSlide, frontmatterOverride, importers)
+      }
+      catch (e) {
+        md.errors ??= []
+        md.errors.push({
+          row: subSlide.start,
+          message: `Error when loading slide: ${e}`,
+        })
+        continue
+      }
       if (directImporter)
         (directImporter.imports ??= []).push(subSlide)
     }
 
     return md
   }
 
-  async function loadSlide(slide: SourceSlideInfo, frontmatterOverride?: Record<string, unknown>, importChain?: SourceSlideInfo[]) {
+  async function loadSlide(md: SlidevMarkdown, slide: SourceSlideInfo, frontmatterOverride?: Record<string, unknown>, importChain?: SourceSlideInfo[]) {
     if (slide.frontmatter.disabled || slide.frontmatter.hide)
       return
     if (slide.frontmatter.src) {
@@ -78,7 +88,16 @@ export async function load(userRoot: string, filepath: string, content?: string,
       }
       delete frontmatterOverride.src
 
-      await loadMarkdown(path, rangeRaw, frontmatterOverride, importChain ? [...importChain, slide] : [slide])
+      if (!fs.existsSync(path)) {
+        md.errors ??= []
+        md.errors.push({
+          row: slide.start,
+          message: `Imported markdown file not found: ${path}`,
+        })
+      }
+      else {
+        await loadMarkdown(path, rangeRaw, frontmatterOverride, importChain ? [...importChain, slide] : [slide])
+      }
     }
     else {
       slides.push({
@@ -112,6 +131,6 @@ export async function load(userRoot: string, filepath: string, content?: string,
 
 export async function save(markdown: SlidevMarkdown) {
   const fileContent = stringify(markdown)
-  await fs.writeFile(markdown.filepath, fileContent, 'utf-8')
+  fs.writeFileSync(markdown.filepath, fileContent, 'utf-8')
   return fileContent
 }

packages/parser/src/fs.ts

@@ -97,6 +97,7 @@ export interface SlidevMarkdown {
    * All slides in this markdown file
    */
   slides: SourceSlideInfo[]
+  errors?: { row: number, message: string }[]
 }
 
 export interface SlidevData {

packages/types/src/types.ts

@@ -1,4 +1,4 @@
-import { clamp } from '@antfu/utils'
+import { clamp, ensurePrefix } from '@antfu/utils'
 import type { SourceSlideInfo } from '@slidev/types'
 import { computed, watch } from '@vue/runtime-core'
 import type { DecorationOptions } from 'vscode'
@@ -29,6 +29,9 @@ const frontmatterContentDecoration = window.createTextEditorDecorationType({
   backgroundColor: '#8881',
 })
 const frontmatterEndDecoration = window.createTextEditorDecorationType(dividerCommonOptions)
+const errorDecoration = window.createTextEditorDecorationType({
+  isWholeLine: true,
+})
 
 function mergeSlideNumbers(slides: { index: number }[]): string {
   const indexes = slides.map(s => s.index + 1)
@@ -56,6 +59,7 @@ export const useAnnotations = createSingletonComposable(() => {
         editor.setDecorations(firstLineDecoration, [])
         editor.setDecorations(dividerDecoration, [])
         editor.setDecorations(frontmatterContentDecoration, [])
+        editor.setDecorations(errorDecoration, [])
         return
       }
 
@@ -83,7 +87,6 @@ export const useAnnotations = createSingletonComposable(() => {
       const dividerRanges: DecorationOptions[] = []
       const frontmatterContentRanges: DecorationOptions[] = []
       const frontmatterEndRanges: DecorationOptions[] = []
-
       for (const slide of md.slides) {
         const lineNo = slide.frontmatterStyle === 'frontmatter' ? slide.start : slide.start - 1
         const line = doc.lineAt(clamp(lineNo, 0, doc.lineCount))
@@ -121,11 +124,25 @@ export const useAnnotations = createSingletonComposable(() => {
           }
         }
       }
-
       editor.setDecorations(firstLineDecoration, firstLineRanges)
       editor.setDecorations(dividerDecoration, dividerRanges)
       editor.setDecorations(frontmatterContentDecoration, frontmatterContentRanges)
       editor.setDecorations(frontmatterEndDecoration, frontmatterEndRanges)
+
+      const errors: DecorationOptions[] = []
+      for (const error of md.errors ?? []) {
+        errors.push({
+          range: new Range(error.row, 0, error.row, 0),
+          renderOptions: {
+            after: {
+              contentText: ensurePrefix(error.message, ' '),
+              color: new ThemeColor('editorError.foreground'),
+              backgroundColor: new ThemeColor('editorError.background'),
+            },
+          },
+        })
+      }
+      editor.setDecorations(errorDecoration, errors)
     },
     { immediate: true },
   )

packages/vscode/src/views/annotations.ts

@@ -117,7 +117,7 @@ export const useSlidesTree = createSingletonComposable(() => {
         const sourcesInEntry = elements.map(element => element.slide).filter(s => s.filepath === data.entry.filepath)
         dataTransfer.set(slideMineType, new DataTransferItem(sourcesInEntry))
       },
-      handleDrop(target, dataTransfer) {
+      async handleDrop(target, dataTransfer) {
         const slides: SourceSlideInfo[] = dataTransfer.get(slideMineType)?.value
         if (!slides || !target)
           return
@@ -133,7 +133,7 @@ export const useSlidesTree = createSingletonComposable(() => {
           ...slides,
           ...oldSlides.slice(targetIndex + 1),
         ].filter(Boolean) as SourceSlideInfo[]
-        slidevSave(data.entry)
+        await slidevSave(data.entry)
       },
     },
     showCollapseAll: true,