fix(comark): surface parse failures instead of rendering an empty document

packages/comark-angular/src/components/markdown.component.ts

@@ -111,9 +111,11 @@ export class Markdown implements OnChanges {
     }
     source = source.trim()
 
-    this.serializedParse(source, { streaming: this.streaming }).then((result) => {
-      this.document = result
-      this.cdr.markForCheck()
-    })
+    this.serializedParse(source, { streaming: this.streaming })
+      .then((result) => {
+        this.document = result
+        this.cdr.markForCheck()
+      })
+      .catch((error: unknown) => console.error('[comark] failed to parse markdown', error))
   }
 }

packages/comark-svelte/src/components/Markdown.svelte

@@ -65,12 +65,17 @@ This is an alert component
     // `parse` directly mutates `plugins` which creates an infinite effect loop
     // so we copy it before passing it in so it gets a regular JS array and we get to still
     // track dependencies from an external perspective
-    parseMarkdown(content, { ...options, ...(unwrap ? { unwrap } : {}), plugins: [...plugins] }).then((result) => {
-      if (currentVersion > appliedVersion) {
-        appliedVersion = currentVersion
-        parsed = result
-      }
-    })
+    parseMarkdown(content, { ...options, ...(unwrap ? { unwrap } : {}), plugins: [...plugins] })
+      .then((result) => {
+        if (currentVersion > appliedVersion) {
+          appliedVersion = currentVersion
+          parsed = result
+        }
+      })
+      .catch((error) => {
+        if (currentVersion > appliedVersion) appliedVersion = currentVersion
+        console.error('[comark] failed to parse markdown', error)
+      })
   })
 </script>
 

packages/comark-svelte/test/streaming.svelte.test.ts

@@ -1,6 +1,7 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { render } from 'vitest-browser-svelte'
 import { parseMarkdown } from 'comark'
+import type { ComarkPlugin } from 'comark'
 import Markdown from '../src/components/Markdown.svelte'
 import MarkdownDocument from '../src/components/MarkdownDocument.svelte'
 import Alert from './test-components/Alert.svelte'
@@ -186,3 +187,29 @@ describe('streaming with MarkdownDocument', () => {
     await expect.element(screen.getByText('Second')).toBeInTheDocument()
   })
 })
+
+describe('parse failures', () => {
+  it('ignores a stale parse when a newer one rejects', async () => {
+    let release!: () => void
+    const gate = new Promise<void>((resolve) => (release = resolve))
+    const slow: ComarkPlugin = { name: 'slow', post: () => gate }
+    const failing: ComarkPlugin = {
+      name: 'failing',
+      post() {
+        throw new Error('plugin exploded')
+      },
+    }
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    const screen = await render(Markdown, { value: 'Good' })
+    await expect.element(screen.getByText('Good')).toBeInTheDocument()
+
+    await screen.rerender({ value: 'Stale', plugins: [slow] })
+    await screen.rerender({ value: 'Newer', plugins: [failing] })
+    release()
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    expect(screen.container.textContent).toContain('Good')
+    expect(screen.container.textContent).not.toContain('Stale')
+  })
+})

packages/comark-vue/src/components/Markdown.ts

@@ -237,7 +237,9 @@ export const Markdown: MarkdownComponent = defineComponent({
       () => [markdown.value, props.streaming] as const,
       () => {
         if (isMarkdownDocument(props.value)) return
-        parse(markdown.value, { streaming: props.streaming }).then((result) => (parsed.value = result))
+        parse(markdown.value, { streaming: props.streaming })
+          .then((result) => (parsed.value = result))
+          .catch((error) => console.error('[comark] failed to parse markdown', error))
       }
     )
 

packages/comark-vue/test/parse-error.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { createSSRApp, h, onErrorCaptured } from 'vue'
+import { renderToString } from '@vue/server-renderer'
+import type { ComarkPlugin } from 'comark'
+import { Markdown } from '../src/components/Markdown.ts'
+
+describe('Markdown parse errors', () => {
+  it('surfaces an initial parse failure instead of rendering an empty document', async () => {
+    const failing: ComarkPlugin = {
+      name: 'failing',
+      post() {
+        throw new Error('plugin exploded')
+      },
+    }
+
+    const captured: unknown[] = []
+    const app = createSSRApp({
+      setup() {
+        onErrorCaptured((error) => {
+          captured.push(error)
+          return false
+        })
+        return () => h(Markdown, { value: '# Hello', plugins: [failing] })
+      },
+    })
+
+    const html = await renderToString(app as any)
+
+    expect(captured).toHaveLength(1)
+    expect((captured[0] as Error).message).toBe('plugin exploded')
+    expect(html).not.toContain('comark-content')
+  })
+})

packages/comark/src/utils/helpers.ts

@@ -3,14 +3,17 @@ import type { ComarkPlugin, ComarkPluginFactory } from '../types.ts'
 /**
  * Returns a function that invokes `fn` **strictly one at a time**: each call waits until the
  * previous invocation has settled (resolved or rejected) before starting the next.
+ *
+ * A rejection is handed to the caller that triggered it, and the queue keeps accepting calls.
  */
 export function createSerializedTask<TArgs extends unknown[], TResult>(
   fn: (...args: TArgs) => Promise<TResult>
 ): (...args: TArgs) => Promise<TResult> {
-  let chain: Promise<TResult> = Promise.resolve(null as TResult)
+  let chain: Promise<unknown> = Promise.resolve()
   return (...args: TArgs) => {
-    chain = chain.then(() => fn(...args)).catch(() => null as TResult)
-    return chain
+    const result = chain.then(() => fn(...args))
+    chain = result.catch(() => undefined)
+    return result
   }
 }
 

packages/comark/test/serialized-task.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { createSerializedTask } from '../src/utils/helpers.ts'
+
+describe('createSerializedTask', () => {
+  it('rejects the caller instead of resolving null', async () => {
+    const task = createSerializedTask(async () => {
+      throw new Error('boom')
+    })
+
+    await expect(task()).rejects.toThrow('boom')
+  })
+
+  it('keeps running after a rejection', async () => {
+    let calls = 0
+    const task = createSerializedTask(async () => {
+      calls++
+      if (calls === 1) throw new Error('boom')
+      return calls
+    })
+
+    await expect(task()).rejects.toThrow('boom')
+    await expect(task()).resolves.toBe(2)
+  })
+})

test/bundle.test.ts

@@ -60,14 +60,14 @@ describe('package bundle size', { timeout: 60_000 }, () => {
 
     expect(report).toMatchInlineSnapshot(`
       {
-        "@comark/angular": "56.2k (72 files)",
+        "@comark/angular": "56.3k (72 files)",
         "@comark/ansi": "37.3k (98 files)",
         "@comark/html": "16.5k (58 files)",
         "@comark/nuxt": "11.8k (58 files)",
         "@comark/react": "37.7k (76 files)",
-        "@comark/svelte": "44.9k (84 files)",
-        "@comark/vue": "56.0k (80 files)",
-        "comark": "368k (158 files)",
+        "@comark/svelte": "45.1k (84 files)",
+        "@comark/vue": "56.1k (80 files)",
+        "comark": "369k (158 files)",
       }
     `)
   })