perf(react): reuse incremental parsing in streams

[onmax]

What

Keep a serialized parser in React streaming components so each update reuses completed blocks. Reset it when parser settings change and parse the full source when streaming ends. Keep defined components' options and plugins stable across renders.

Why

React currently parses the entire source on each update, as discussed in #135. Also clear stale frontmatter when a stream switches documents. Use a full parse for heading tails and reference definitions to preserve IDs and links.

Related #396.

	Description	GitHub
Before	React parses the completed prefix again on append.	Source
After	React parses only the open tail and parses the full source when streaming ends.	Source

Parser timings for the shared React/Svelte call pattern, using the published PR code:

Stream	Final size	Before	After
100 paragraph updates	6.7 kB	172 ms	26 ms
300 paragraph updates	20.3 kB	752 ms	84 ms
600 paragraph updates	40.7 kB	2,467 ms	224 ms
300 heading + paragraph updates	25.0 kB	947 ms	808 ms

[coldtea-pr-lens]

◈ PR Lens

🟢 +1 new · 🟠 ~7 changed · 🔴 -0 removed · 1 flow · 12 files · commit 1a793ab

Architecture

8 components touched across 3 lanes.

Open full size

Inside the changed components — 2 views

Component view — React Streaming & Component Factory

Modules inside @⁠comark/react managing parser serialization, option memoization, and browser test execution.

Component view — Core Incremental Parsing & Token Processing

Core engine modules handling full-document reparsing for headings/references and omission of reference tokens.

Data flow

React Streaming Incremental Parse Pipeline

Open full size

Drill down

UI Framework Adapters — 5 components

🟡 CHANGED React 19 Renderer

React markdown component package updated with serialized streaming parsing, WeakMap options memoization, and Playwright browser tests.

• packages/comark-react/package.json:55-60
• packages/comark-react/src/index.ts:59-86
• packages/comark-react/src/components/Markdown.tsx:105-153
• packages/comark-react/src/components/MarkdownClient.tsx:1-85
• packages/comark-react/README.md:61-67
• docs/content/3.rendering/5.react.md:635-645

🟡 CHANGED MarkdownClient Queue

Serializes incremental parsing through a promise queue on createMarkdownParser to prevent race conditions during rapid streaming.

• packages/comark-react/src/components/MarkdownClient.tsx:1-85

🟡 CHANGED Component Factory ＆ Cache

defineMarkdownComponent memoizes merged parser options and plugin arrays using WeakMaps to retain stable references across renders.

• packages/comark-react/src/index.ts:59-86

🟡 CHANGED Markdown Component

Top-level async component forwarding unwrapped options and streaming flags to MarkdownClient or rendering static documents.

• packages/comark-react/src/components/Markdown.tsx:105-153

🟢 NEW React Browser Test Suite

Playwright browser test suite verifying client-side streaming block reuse, serialized plugin execution, and error boundaries.

• packages/comark-react/test/streaming.browser.test.tsx:1-188
• packages/comark-react/vitest.config.ts:1-21

Core Engine — 3 components

🟡 CHANGED Core Parser

Coordinates document parsing, bypassing incremental node slicing when reference links or headings demand full-document resolution.

• packages/comark/src/parse.ts:124-205
• packages/comark/test/streaming.test.ts:1-230

🟡 CHANGED Token-to-AST Processor

Converts token stream to Comark AST, skipping reference link definition tokens so they are omitted from output nodes.

• packages/comark/src/internal/parse/token-processor.ts:299-305

🟡 CHANGED Bundle Size Suite

Monitors package distribution bundle sizes, updated for @comark/react parser changes.

• test/bundle.test.ts:64-70

View

• Architecture lens
• Data flow lens
• Expand every detail
• Show unchanged neighbours

Tip

Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."

🪧 More tips

• Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.
• The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
• Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
• GitHub will not let you zoom an image in a comment. The link under each diagram opens it full size on a page of its own, where you can.
• The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
• Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
• PR Lens is free for open source. A star on the repository is what keeps it going.
• Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.
• The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

---

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Come say hi on Discord

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

[vercel]

@onmax is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Documentation previews

Previews are disabled for pull requests from forks.
A maintainer can add the preview:enabled label to enable them.

[pkg-pr-new]

Open in StackBlitz

comark

npm i https://pkg.pr.new/comark@397

@comark/angular

npm i https://pkg.pr.new/@comark/angular@397

@comark/ansi

npm i https://pkg.pr.new/@comark/ansi@397

@comark/html

npm i https://pkg.pr.new/@comark/html@397

@comark/nuxt

npm i https://pkg.pr.new/@comark/nuxt@397

@comark/react

npm i https://pkg.pr.new/@comark/react@397

@comark/svelte

npm i https://pkg.pr.new/@comark/svelte@397

@comark/vue

npm i https://pkg.pr.new/@comark/vue@397

commit: 1a793ab