markstream-vue 1.0.1 → 1.0.3-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/README.md +153 -33
  2. package/README.zh-CN.md +153 -29
  3. package/dist/CodeBlockNode.js +1 -1
  4. package/dist/CodeBlockShell.vue_vue_type_style_index_0_lang.js +1 -1
  5. package/dist/Tooltip.js +1 -1
  6. package/dist/exports.js +1 -1
  7. package/dist/index.css +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/index.px.css +1 -1
  10. package/dist/index.tailwind.css +1 -1
  11. package/dist/index10.js +1 -1
  12. package/dist/index11.js +1 -1
  13. package/dist/index5.js +1 -1
  14. package/dist/index6.js +1 -1
  15. package/dist/index7.js +1 -1
  16. package/dist/index8.js +1 -1
  17. package/dist/index9.js +1 -1
  18. package/dist/tailwind.js +0 -0
  19. package/dist/workers/katexWorkerClient.js +1 -1
  20. package/dist/workers-katexWorkerClient.js +1 -1
  21. package/package.json +44 -45
package/README.md CHANGED
@@ -1,14 +1,26 @@
1
- # markstream-vue
1
+ # Markstream
2
2
 
3
- > Fast, streaming-friendly Markdown rendering for Vue 3 — progressive Mermaid, streaming diff code blocks, and real-time previews optimized for large documents.
3
+ > Streaming Markdown renderers for AI applications across Vue, React, Svelte, Angular, Nuxt, and Next.js.
4
+
5
+ Markstream is built for Markdown that changes while users are watching it: LLM token streams, SSE/WebSocket output, AI chat messages, long documents, progressive Mermaid diagrams, KaTeX math, streaming code blocks, and safe component-based rendering.
4
6
 
5
- [![NPM version](https://img.shields.io/npm/v/markstream-vue?color=a1b858&label=)](https://www.npmjs.com/package/markstream-vue)
6
7
  [![中文版](https://img.shields.io/badge/docs-中文文档-blue)](README.zh-CN.md)
7
- [![Docs](https://img.shields.io/badge/docs-vitepress-blue)](https://markstream-vue-docs.simonhe.me/)
8
+ [![Docs](https://img.shields.io/badge/docs-vitepress-blue)](https://markstream.simonhe.me/)
8
9
  [![Playground](https://img.shields.io/badge/playground-live-34c759)](https://markstream-vue.simonhe.me/)
9
10
  [![Test page](https://img.shields.io/badge/test-shareable%20repro-0A84FF)](https://markstream-vue.simonhe.me/test)
11
+
12
+ Vue package:
13
+
14
+ [![markstream-vue npm version](https://img.shields.io/npm/v/markstream-vue?color=a1b858&label=markstream-vue)](https://www.npmjs.com/package/markstream-vue)
10
15
  [![NPM downloads](https://img.shields.io/npm/dm/markstream-vue)](https://www.npmjs.com/package/markstream-vue)
11
16
  [![Bundle size](https://img.shields.io/bundlephobia/minzip/markstream-vue)](https://bundlephobia.com/package/markstream-vue)
17
+
18
+ Other packages:
19
+
20
+ [![markstream-react npm version](https://img.shields.io/npm/v/markstream-react?label=markstream-react)](https://www.npmjs.com/package/markstream-react)
21
+ [![markstream-svelte npm version](https://img.shields.io/npm/v/markstream-svelte?label=markstream-svelte)](https://www.npmjs.com/package/markstream-svelte)
22
+ [![markstream-angular npm version](https://img.shields.io/npm/v/markstream-angular?label=markstream-angular)](https://www.npmjs.com/package/markstream-angular)
23
+
12
24
  [![Release](https://img.shields.io/github/v/release/Simon-He95/markstream-vue?display_name=release&logo=github)](https://github.com/Simon-He95/markstream-vue/releases)
13
25
  [![Discussions](https://img.shields.io/github/discussions/Simon-He95/markstream-vue?logo=github)](https://github.com/Simon-He95/markstream-vue/discussions)
14
26
  [![Discord](https://img.shields.io/discord/986352439269560380?label=discord&logo=discord&logoColor=fff&color=5865F2)](https://discord.gg/vkzdkjeRCW)
@@ -17,16 +29,35 @@
17
29
  [![CI](https://github.com/Simon-He95/markstream-vue/actions/workflows/ci.yml/badge.svg)](https://github.com/Simon-He95/markstream-vue/actions/workflows/ci.yml)
18
30
  [![License](https://img.shields.io/npm/l/markstream-vue)](./license)
19
31
 
20
- Looking for other frameworks?
32
+ ## Packages
33
+
34
+ Start with the [framework overview](https://markstream.simonhe.me/frameworks/) if you are choosing between packages.
21
35
 
22
- - Vue 2.6: use [`markstream-vue2`](./packages/markstream-vue2/README.md) (a baseline port with fewer advanced features)
23
- - React: see `packages/markstream-react` at [`packages/markstream-react/README.md`](./packages/markstream-react/README.md) (first-pass port)
36
+ | Package | Framework | Install | Docs |
37
+ | --- | --- | --- | --- |
38
+ | `markstream-vue` | Vue 3 / Nuxt / VitePress | `pnpm add markstream-vue` | [Framework overview](https://markstream.simonhe.me/frameworks/) · [Vue landing](https://markstream.simonhe.me/frameworks/vue/) · [Nuxt landing](https://markstream.simonhe.me/frameworks/nuxt/) |
39
+ | `markstream-react` | React / Next.js / Remix | `pnpm add markstream-react` | [React landing](https://markstream.simonhe.me/frameworks/react/) · [Next.js landing](https://markstream.simonhe.me/frameworks/next/) |
40
+ | `markstream-svelte` | Svelte 5 | `pnpm add markstream-svelte svelte@^5` | [Svelte landing](https://markstream.simonhe.me/frameworks/svelte/) · [Quick start](https://markstream.simonhe.me/guide/svelte) |
41
+ | `markstream-angular` | Angular standalone | `pnpm add markstream-angular` | [Angular landing](https://markstream.simonhe.me/frameworks/angular/) · [Quick start](https://markstream.simonhe.me/guide/angular-quick-start) |
42
+ | `markstream-vue2` | Vue 2.6 / 2.7 | `pnpm add markstream-vue2` | [Vue 2 guide](https://markstream.simonhe.me/guide/vue2-quick-start) |
43
+ | `stream-markdown-parser` | Any JS/TS app | `pnpm add stream-markdown-parser` | [Parser guide](https://markstream.simonhe.me/guide/parser-api) |
44
+ | `markstream-core` | Framework-agnostic | `pnpm add markstream-core` | [Core package](./packages/markstream-core/README.md) |
24
45
 
25
- ## 1.0 stability scope
46
+ ### Which package should I use?
26
47
 
27
- `markstream-vue@1.0` is scoped to the Vue 3 renderer package. The stable surface is `MarkdownRender`, streaming content rendering, pre-parsed node rendering, the safe HTML policy, optional Mermaid / KaTeX / Monaco / D2 / Infographic integrations, virtual-scroll coordination, CSS exports, worker client subpaths, and SSR imports for Vite / Nuxt / VitePress.
48
+ - **Vue 3 / Nuxt / VitePress** → `markstream-vue`
49
+ - **React / Next.js / Remix** → `markstream-react`
50
+ - **Svelte 5** → `markstream-svelte`
51
+ - **Angular standalone** → `markstream-angular`
52
+ - **Vue 2.6 / 2.7** → `markstream-vue2`
53
+ - **Framework-agnostic parsing only** → `stream-markdown-parser`
54
+ - **Streaming controller utilities** → `markstream-core`
28
55
 
29
- Experimental surfaces are the cross-framework adapters, repository skills/prompts, low-level worker entrypoints beyond documented clients, and internal performance/debug props such as `indexKey`, `renderAsFragment`, `debugPerformance`, batch budget internals, and height-estimation experiments.
56
+ ## Stability
57
+
58
+ `markstream-vue@1.0` is the most mature renderer with a stable surface: `MarkdownRender`, streaming content rendering, pre-parsed node rendering, the safe HTML policy, optional Mermaid / KaTeX / Monaco / D2 / Infographic integrations, virtual-scroll coordination, CSS exports, worker client subpaths, and SSR imports for Vite / Nuxt / VitePress.
59
+
60
+ Cross-framework renderers (`markstream-react`, `markstream-svelte`, `markstream-angular`, `markstream-vue2`) are available and actively developed. Check each package page for API maturity, framework support, and known limitations.
30
61
 
31
62
  For the full release contract and Go / No-Go checklist, see [1.0 Release Readiness](./docs/guide/release-1-0.md). For reproducible performance evidence, run `pnpm benchmark:1.0` and use the generated [1.0 Benchmark Report](./docs/guide/benchmark-1-0.md).
32
63
 
@@ -36,7 +67,7 @@ For the full release contract and Go / No-Go checklist, see [1.0 Release Readine
36
67
  - [Choose Your Path](#choose-your-path)
37
68
  - [Try It Now](#-try-it-now)
38
69
  - [Community & support](#-community--support)
39
- - [Quick Start](#-quick-start)
70
+ - [Quick Starts](#-quick-starts)
40
71
  - [Common commands](#-common-commands)
41
72
  - [Streaming in 30 seconds](#-streaming-in-30-seconds)
42
73
  - [Performance presets](#-performance-presets)
@@ -55,39 +86,50 @@ For the full release contract and Go / No-Go checklist, see [1.0 Release Readine
55
86
  - [Star History](#star-history)
56
87
  - [License](#license)
57
88
 
58
- > 📖 Detailed docs, API, and advanced usage: https://markstream-vue-docs.simonhe.me/guide/
89
+ > 📖 Framework overview, docs, API, and advanced usage: https://markstream.simonhe.me/frameworks/
59
90
 
60
91
  ## TL;DR Highlights
61
92
 
62
- - Purpose-built for **streaming Markdown** (AI/chat/SSE) with zero flicker and predictable memory.
93
+ - Purpose-built for **streaming Markdown** (AI/chat/SSE), designed to minimize flicker and keep memory predictable.
63
94
  - **Two render modes**: virtual window for long docs, incremental batching for “typing” effects.
64
95
  - **Progressive diagrams** (Mermaid) and **streaming code blocks** (Monaco/Shiki) that keep up with diffs.
65
- - Works with **raw Markdown strings or pre-parsed nodes**, supports **custom Vue components** inline.
96
+ - Works with **raw Markdown strings or pre-parsed nodes**, with custom framework components in Vue, React, Svelte, and Angular.
66
97
  - TypeScript-first, ship-ready defaults — import CSS and render.
67
98
 
68
99
  ## Choose Your Path
69
100
 
70
101
  | If you want to... | Start here | Then go to |
71
102
  | --- | --- | --- |
72
- | get the first render on screen | [Quick Start](#-quick-start) | [Installation guide](https://markstream-vue-docs.simonhe.me/guide/installation) |
73
- | integrate it into a docs site or VitePress theme | [Docs Site & VitePress](https://markstream-vue-docs.simonhe.me/guide/vitepress-docs-integration) | [Custom Tags & Advanced Components](https://markstream-vue-docs.simonhe.me/guide/custom-components) |
74
- | build an AI chat UI or SSE stream | [AI Chat & Streaming](https://markstream-vue-docs.simonhe.me/guide/ai-chat-streaming) | [Performance](https://markstream-vue-docs.simonhe.me/guide/performance) |
75
- | replace one built-in renderer | [Override Built-in Components](https://markstream-vue-docs.simonhe.me/guide/component-overrides) | [Renderer & Node Components](https://markstream-vue-docs.simonhe.me/guide/components) |
76
- | add trusted tags such as `thinking` | [Custom Tags & Advanced Components](https://markstream-vue-docs.simonhe.me/guide/custom-components) | [API Reference](https://markstream-vue-docs.simonhe.me/guide/api) |
77
- | debug a broken integration but do not know why yet | [Troubleshooting by Symptom](https://markstream-vue-docs.simonhe.me/guide/troubleshooting-path) | [Troubleshooting](https://markstream-vue-docs.simonhe.me/guide/troubleshooting) |
103
+ | get the first render on screen | [Framework overview](https://markstream.simonhe.me/frameworks/) | [Quick Starts](#-quick-starts) |
104
+ | integrate it into a docs site or VitePress theme | [Docs Site & VitePress](https://markstream.simonhe.me/guide/vitepress-docs-integration) | [Custom Tags & Advanced Components](https://markstream.simonhe.me/guide/custom-components) |
105
+ | build an AI chat UI or SSE stream | [AI Chat & Streaming](https://markstream.simonhe.me/guide/ai-chat-streaming) | [Performance](https://markstream.simonhe.me/guide/performance) |
106
+ | replace one built-in renderer | [Override Built-in Components](https://markstream.simonhe.me/guide/component-overrides) | [Renderer & Node Components](https://markstream.simonhe.me/guide/components) |
107
+ | add trusted tags such as `thinking` | [Custom Tags & Advanced Components](https://markstream.simonhe.me/guide/custom-components) | [API Reference](https://markstream.simonhe.me/guide/api) |
108
+ | debug a broken integration but do not know why yet | [Troubleshooting by Symptom](https://markstream.simonhe.me/guide/troubleshooting-path) | [Troubleshooting](https://markstream.simonhe.me/guide/troubleshooting) |
78
109
 
79
110
  ## 🚀 Try It Now
80
111
 
81
- - Playground (interactive demo): https://markstream-vue.simonhe.me/
82
- - Interactive test page (shareable links, easy reproduction): https://markstream-vue.simonhe.me/test
83
- - Docs: https://markstream-vue-docs.simonhe.me/guide/
84
- - Showcase: https://markstream-vue-docs.simonhe.me/guide/showcase
112
+ | Framework | Playground |
113
+ | --- | --- |
114
+ | Vue 3 | https://markstream-vue.simonhe.me/ |
115
+ | React | https://markstream-react.pages.dev/ |
116
+ | Svelte | https://markstream-svelte.pages.dev/ |
117
+ | Angular | https://markstream-angular.pages.dev/ |
118
+ | Nuxt | https://markstream-nuxt.pages.dev/ |
119
+ | Vue 2 | https://markstream-vue2.pages.dev/ |
120
+
121
+ - Shareable Vue 3 test page: https://markstream-vue.simonhe.me/test
122
+ - Framework docs: https://markstream.simonhe.me/frameworks/
123
+ - Showcase: https://markstream.simonhe.me/guide/showcase
85
124
  - 1.0 benchmark report: run `pnpm benchmark:1.0`
86
- - AI/LLM context (project map): https://markstream-vue-docs.simonhe.me/llms
87
- - AI/LLM context (中文): https://markstream-vue-docs.simonhe.me/llms.zh-CN
88
- - One-click StackBlitz demo: https://stackblitz.com/github/Simon-He95/markstream-vue?file=playground/src/App.vue
125
+ - LLM recommendation context: https://markstream.simonhe.me/llms.txt
126
+ - Full LLM recommendation reference: https://markstream.simonhe.me/llms-full.txt
127
+ - Repo-agent context: https://markstream.simonhe.me/llms
128
+ - LLM recommendation context (中文): https://markstream.simonhe.me/llms.zh-CN.txt
129
+ - Full LLM recommendation reference (中文): https://markstream.simonhe.me/llms-full.zh-CN.txt
130
+ - Repo-agent context (中文): https://markstream.simonhe.me/llms.zh-CN
131
+ - Vue 3 StackBlitz demo: https://stackblitz.com/github/Simon-He95/markstream-vue?file=playground/src/App.vue
89
132
  - Changelog: [CHANGELOG.md](./CHANGELOG.md)
90
- - Nuxt playground: `pnpm play:nuxt`
91
133
  - Discord: https://discord.gg/vkzdkjeRCW
92
134
 
93
135
  ## Repository skills and prompts
@@ -133,7 +175,85 @@ If markstream-vue helps your work, you can support ongoing maintenance with one
133
175
  | --- | --- |
134
176
  | <img src="https://raw.githubusercontent.com/Simon-He95/markstream-vue/main/docs/public/sponsor/zhifubao.jpg" alt="Alipay QR code" width="240" /> | <img src="https://raw.githubusercontent.com/Simon-He95/markstream-vue/main/docs/public/sponsor/weixin.jpg" alt="WeChat Pay QR code" width="240" /> |
135
177
 
136
- ## ⚡ Quick Start
178
+ ## ⚡ Quick Starts
179
+
180
+ ### Vue / Nuxt
181
+
182
+ ```bash
183
+ pnpm add markstream-vue
184
+ ```
185
+
186
+ ```vue
187
+ <script setup>
188
+ import MarkdownRender from 'markstream-vue'
189
+ import 'markstream-vue/index.css'
190
+ </script>
191
+
192
+ <template>
193
+ <MarkdownRender :content="content" />
194
+ </template>
195
+ ```
196
+
197
+ ### React / Next.js
198
+
199
+ ```bash
200
+ pnpm add markstream-react
201
+ ```
202
+
203
+ ```tsx
204
+ import MarkdownRender from 'markstream-react'
205
+ import 'markstream-react/index.css'
206
+
207
+ export function Message({ content, isDone }: { content: string, isDone: boolean }) {
208
+ return <MarkdownRender content={content} final={isDone} fade={false} />
209
+ }
210
+ ```
211
+
212
+ For live SSE/WebSocket surfaces in Next.js, use root `markstream-react` inside a `'use client'` component. For SSR-first or server-only Markdown, start from the [Next.js guide](https://markstream.simonhe.me/frameworks/next/).
213
+
214
+ ### Svelte 5
215
+
216
+ ```bash
217
+ pnpm add markstream-svelte svelte@^5
218
+ ```
219
+
220
+ ```svelte
221
+ <script lang="ts">
222
+ import MarkdownRender from 'markstream-svelte'
223
+ import 'markstream-svelte/index.css'
224
+
225
+ let { content = '# Hello from markstream-svelte' }: { content?: string } = $props()
226
+ </script>
227
+
228
+ <MarkdownRender {content} />
229
+ ```
230
+
231
+ ### Angular
232
+
233
+ ```bash
234
+ pnpm add markstream-angular
235
+ ```
236
+
237
+ ```ts
238
+ import { Component, signal } from '@angular/core'
239
+ import { bootstrapApplication } from '@angular/platform-browser'
240
+ import { MarkstreamAngularComponent } from 'markstream-angular'
241
+ import 'markstream-angular/index.css'
242
+
243
+ @Component({
244
+ selector: 'app-root',
245
+ standalone: true,
246
+ imports: [MarkstreamAngularComponent],
247
+ template: '<markstream-angular [content]="content()" [final]="true" />',
248
+ })
249
+ class AppComponent {
250
+ readonly content = signal('# Hello from markstream-angular')
251
+ }
252
+
253
+ bootstrapApplication(AppComponent)
254
+ ```
255
+
256
+ ## Vue / Nuxt detailed quick start
137
257
 
138
258
  ```bash
139
259
  pnpm add markstream-vue
@@ -487,7 +607,7 @@ Build something with markstream-vue? Open a PR to add it here (include a link +
487
607
 
488
608
  - **FlowNote** — streaming Markdown note app demo (SSE + virtual window) — https://markstream-vue.simonhe.me/
489
609
  - **Diagnostic Studio** — shareable repro links, render-mode switching, diff/thinking/stress samples, annotations, PDF export — https://markstream-vue.simonhe.me/test
490
- - **1.0 Showcase guide** — launch-ready demo matrix for chat, long docs, code review, diagrams, custom components, and safe HTML — https://markstream-vue-docs.simonhe.me/guide/showcase
610
+ - **1.0 Showcase guide** — launch-ready demo matrix for chat, long docs, code review, diagrams, custom components, and safe HTML — https://markstream.simonhe.me/guide/showcase
491
611
 
492
612
  ## 📺 Introduction Video
493
613
 
@@ -503,11 +623,11 @@ Watch on Bilibili: [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9
503
623
  - 🌊 Streaming-first: native support for incomplete or frequently updated tokenized Markdown
504
624
  - 🧠 Monaco streaming updates: high-performance Monaco integration for smooth incremental updates of large code blocks
505
625
  - 🪄 Progressive Mermaid: charts render instantly when syntax is available, and improve with later updates
506
- - 🧩 Custom components: embed custom Vue components in Markdown content
626
+ - 🧩 Custom components: embed framework components in Markdown content
507
627
  - 📝 Full Markdown support: tables, formulas, emoji, checkboxes, code blocks, etc.
508
628
  - 🔄 Real-time updates: supports incremental content without breaking formatting
509
629
  - 📦 TypeScript-first: complete type definitions and IntelliSense
510
- - 🔌 Zero config: works out of the box in Vue 3 projects
630
+ - 🔌 Package defaults: works out of the box in the supported framework entry points
511
631
  - 🎨 Flexible code block rendering: choose Monaco editor (`CodeBlockNode`) or lightweight Shiki highlighting (`MarkdownCodeBlockNode`)
512
632
  - 🧰 Parser toolkit: [`stream-markdown-parser`](./packages/markdown-parser) now documents how to reuse the parser in workers/SSE streams and feed `<MarkdownRender :nodes>` directly, plus APIs for registering global plugins and custom math helpers.
513
633
 
@@ -533,7 +653,7 @@ Watch on Bilibili: [Open in Bilibili](https://www.bilibili.com/video/BV17Z4qzpE9
533
653
  ## Troubleshooting & Common Issues
534
654
 
535
655
  Troubleshooting has moved into the docs:
536
- https://markstream-vue-docs.simonhe.me/guide/troubleshooting
656
+ https://markstream.simonhe.me/guide/troubleshooting
537
657
 
538
658
  If you can't find a solution there, open a GitHub issue:
539
659
  https://github.com/Simon-He95/markstream-vue/issues
package/README.zh-CN.md CHANGED
@@ -1,14 +1,26 @@
1
- # markstream-vue
1
+ # Markstream
2
2
 
3
- > 针对 Vue 3 的高性能、流式友好型 Markdown 渲染组件 — 支持渐进式 Mermaid、流式 diff 代码块以及为大文档优化的实时预览。
3
+ > 面向 AI 应用的多框架流式 Markdown 渲染器家族 — 支持 Vue、React、Svelte、Angular、Nuxt 和 Next.js。
4
+
5
+ Markstream 专为在用户眼前持续变化的 Markdown 场景而构建：LLM token 流、SSE/WebSocket 输出、AI 聊天消息、长文档、渐进式 Mermaid 图表、KaTeX 数学公式、流式代码块以及安全的组件化渲染。
4
6
 
5
- [![NPM version](https://img.shields.io/npm/v/markstream-vue?color=a1b858&label=)](https://www.npmjs.com/package/markstream-vue)
6
7
  [![English](https://img.shields.io/badge/docs-English-blue)](README.md)
7
- [![Docs](https://img.shields.io/badge/docs-中文文档-blue)](https://markstream-vue-docs.simonhe.me/zh/guide/)
8
+ [![Docs](https://img.shields.io/badge/docs-中文文档-blue)](https://markstream.simonhe.me/zh/guide/)
8
9
  [![Playground](https://img.shields.io/badge/playground-在线体验-34c759)](https://markstream-vue.simonhe.me/)
9
10
  [![Test page](https://img.shields.io/badge/test-可分享复现-0A84FF)](https://markstream-vue.simonhe.me/test)
11
+
12
+ Vue 包：
13
+
14
+ [![markstream-vue npm version](https://img.shields.io/npm/v/markstream-vue?color=a1b858&label=markstream-vue)](https://www.npmjs.com/package/markstream-vue)
10
15
  [![NPM downloads](https://img.shields.io/npm/dm/markstream-vue)](https://www.npmjs.com/package/markstream-vue)
11
16
  [![Bundle size](https://img.shields.io/bundlephobia/minzip/markstream-vue)](https://bundlephobia.com/package/markstream-vue)
17
+
18
+ 其它框架包：
19
+
20
+ [![markstream-react npm version](https://img.shields.io/npm/v/markstream-react?label=markstream-react)](https://www.npmjs.com/package/markstream-react)
21
+ [![markstream-svelte npm version](https://img.shields.io/npm/v/markstream-svelte?label=markstream-svelte)](https://www.npmjs.com/package/markstream-svelte)
22
+ [![markstream-angular npm version](https://img.shields.io/npm/v/markstream-angular?label=markstream-angular)](https://www.npmjs.com/package/markstream-angular)
23
+
12
24
  [![Release](https://img.shields.io/github/v/release/Simon-He95/markstream-vue?display_name=release&logo=github)](https://github.com/Simon-He95/markstream-vue/releases)
13
25
  [![Discussions](https://img.shields.io/github/discussions/Simon-He95/markstream-vue?logo=github)](https://github.com/Simon-He95/markstream-vue/discussions)
14
26
  [![Discord](https://img.shields.io/discord/986352439269560380?label=discord&logo=discord&logoColor=fff&color=5865F2)](https://discord.gg/vkzdkjeRCW)
@@ -17,12 +29,35 @@
17
29
  [![CI](https://github.com/Simon-He95/markstream-vue/actions/workflows/ci.yml/badge.svg)](https://github.com/Simon-He95/markstream-vue/actions/workflows/ci.yml)
18
30
  [![License](https://img.shields.io/npm/l/markstream-vue)](./license)
19
31
 
20
- 需要其他框架/版本？
32
+ ## 包矩阵
33
+
34
+ 如果你还在选择框架包，先看 [框架总览](https://markstream.simonhe.me/zh/frameworks/)。
21
35
 
22
- - Vue 2.6：请使用 [`markstream-vue2`](./packages/markstream-vue2/README.md)（基础移植版，功能更精简）
23
- - React：请参考 `packages/markstream-react` 的说明 [`packages/markstream-react/README.md`](./packages/markstream-react/README.md)（初步移植版）
36
+ | 包 | 框架 | 安装 | 文档 |
37
+ | --- | --- | --- | --- |
38
+ | `markstream-vue` | Vue 3 / Nuxt / VitePress | `pnpm add markstream-vue` | [框架总览](https://markstream.simonhe.me/zh/frameworks/) · [Vue 指南](https://markstream.simonhe.me/zh/frameworks/vue/) · [Nuxt 指南](https://markstream.simonhe.me/zh/frameworks/nuxt/) |
39
+ | `markstream-react` | React / Next.js / Remix | `pnpm add markstream-react` | [React 指南](https://markstream.simonhe.me/zh/frameworks/react/) · [Next.js 指南](https://markstream.simonhe.me/zh/frameworks/next/) |
40
+ | `markstream-svelte` | Svelte 5 | `pnpm add markstream-svelte svelte@^5` | [Svelte 指南](https://markstream.simonhe.me/zh/frameworks/svelte/) |
41
+ | `markstream-angular` | Angular standalone | `pnpm add markstream-angular` | [Angular 指南](https://markstream.simonhe.me/zh/frameworks/angular/) |
42
+ | `markstream-vue2` | Vue 2.6 / 2.7 | `pnpm add markstream-vue2` | [Vue 2 指南](https://markstream.simonhe.me/zh/guide/vue2-quick-start) |
43
+ | `stream-markdown-parser` | 任意 JS/TS 应用 | `pnpm add stream-markdown-parser` | [解析器指南](https://markstream.simonhe.me/zh/guide/parser-api) |
44
+ | `markstream-core` | 框架无关 | `pnpm add markstream-core` | [Core 包](./packages/markstream-core/README.md) |
24
45
 
25
- ## 目录
46
+ ### 我该用哪个包？
47
+
48
+ - **Vue 3 / Nuxt / VitePress** → `markstream-vue`
49
+ - **React / Next.js / Remix** → `markstream-react`
50
+ - **Svelte 5** → `markstream-svelte`
51
+ - **Angular standalone** → `markstream-angular`
52
+ - **Vue 2.6 / 2.7** → `markstream-vue2`
53
+ - **仅需框架无关的解析** → `stream-markdown-parser`
54
+ - **流式控制器工具** → `markstream-core`
55
+
56
+ ## 稳定性
57
+
58
+ `markstream-vue@1.0` 是最成熟的渲染器，稳定面包括：`MarkdownRender`、流式内容渲染、预解析节点渲染、安全 HTML 策略、可选 Mermaid / KaTeX / Monaco / D2 / Infographic 集成、虚拟滚动协调、CSS 导出、worker client 子路径以及 Vite / Nuxt / VitePress 的 SSR 导入。
59
+
60
+ 跨框架渲染器（`markstream-react`、`markstream-svelte`、`markstream-angular`、`markstream-vue2`）已可用并积极开发中。请查看各包文档了解 API 成熟度、框架支持和已知限制。
26
61
 
27
62
  - [速览](#速览)
28
63
  - [按场景选择入口](#按场景选择入口)
@@ -47,40 +82,51 @@
47
82
  - [Star 历史](#star-历史)
48
83
  - [许可](#许可)
49
84
 
50
- > 📖 所有详细文档、API、示例和高级用法已迁移至 VitePress 中文文档站点：
51
- > https://markstream-vue-docs.simonhe.me/zh/guide/
85
+ > 📖 框架总览、详细文档、API、示例和高级用法：
86
+ > https://markstream.simonhe.me/frameworks/
52
87
 
53
88
  ## 速览
54
89
 
55
- - 为 **流式 Markdown**（AI/聊天/SSE）打造，避免闪烁，内存可预期。
90
+ - 为 **流式 Markdown**（AI/聊天/SSE）打造，目标是减少闪烁并保持内存可预期。
56
91
  - **双渲染模式**：长文档虚拟化窗口，或“打字机”式增量批次。
57
92
  - **渐进式图表**（Mermaid）与 **流式代码块**（Monaco/Shiki），跟上 diff/增量输出。
58
- - 同时支持 **Markdown 字符串或预解析节点**，可在 Markdown 中嵌入 **自定义 Vue 组件**。
93
+ - 同时支持 **Markdown 字符串或预解析节点**，可在 Vue、React、Svelte 和 Angular 中嵌入 **自定义框架组件**。
59
94
  - TypeScript 优先，开箱默认即可上线（导入 CSS 即用）。
60
95
 
61
96
  ## 按场景选择入口
62
97
 
63
98
  | 如果你现在想做的是... | 先看这里 | 然后看 |
64
99
  | --- | --- | --- |
65
- | 先把第一段渲染跑起来 | [快速上手](#-快速上手) | [安装指南](https://markstream-vue-docs.simonhe.me/zh/guide/installation) |
66
- | 接到文档站或 VitePress 主题里 | [文档站与 VitePress 集成](https://markstream-vue-docs.simonhe.me/zh/guide/vitepress-docs-integration) | [自定义标签与高级组件](https://markstream-vue-docs.simonhe.me/zh/guide/custom-components) |
67
- | 做 AI 聊天界面或 SSE 流式输出 | [AI 聊天与流式输出](https://markstream-vue-docs.simonhe.me/zh/guide/ai-chat-streaming) | [性能](https://markstream-vue-docs.simonhe.me/zh/guide/performance) |
68
- | 替换一个内置节点渲染器 | [覆盖内置组件](https://markstream-vue-docs.simonhe.me/zh/guide/component-overrides) | [渲染器与节点组件](https://markstream-vue-docs.simonhe.me/zh/guide/components) |
69
- | 增加 `thinking` 这类可信标签 | [自定义标签与高级组件](https://markstream-vue-docs.simonhe.me/zh/guide/custom-components) | [API 参考](https://markstream-vue-docs.simonhe.me/zh/guide/api) |
70
- | 接入坏了但还不知道原因 | [按症状排查](https://markstream-vue-docs.simonhe.me/zh/guide/troubleshooting-path) | [排查问题](https://markstream-vue-docs.simonhe.me/zh/guide/troubleshooting) |
100
+ | 先把第一段渲染跑起来 | [框架总览](https://markstream.simonhe.me/zh/frameworks/) | [快速上手](#-快速上手) |
101
+ | 接到文档站或 VitePress 主题里 | [文档站与 VitePress 集成](https://markstream.simonhe.me/zh/guide/vitepress-docs-integration) | [自定义标签与高级组件](https://markstream.simonhe.me/zh/guide/custom-components) |
102
+ | 做 AI 聊天界面或 SSE 流式输出 | [AI 聊天与流式输出](https://markstream.simonhe.me/zh/guide/ai-chat-streaming) | [性能](https://markstream.simonhe.me/zh/guide/performance) |
103
+ | 替换一个内置节点渲染器 | [覆盖内置组件](https://markstream.simonhe.me/zh/guide/component-overrides) | [渲染器与节点组件](https://markstream.simonhe.me/zh/guide/components) |
104
+ | 增加 `thinking` 这类可信标签 | [自定义标签与高级组件](https://markstream.simonhe.me/zh/guide/custom-components) | [API 参考](https://markstream.simonhe.me/zh/guide/api) |
105
+ | 接入坏了但还不知道原因 | [按症状排查](https://markstream.simonhe.me/zh/guide/troubleshooting-path) | [排查问题](https://markstream.simonhe.me/zh/guide/troubleshooting) |
71
106
 
72
107
  ## 🚀 立即试用
73
108
 
74
- - Playground（交互演示）： https://markstream-vue.simonhe.me/
75
- - 交互测试页（可分享链接，便于复现）： https://markstream-vue.simonhe.me/test
76
- - 文档： https://markstream-vue-docs.simonhe.me/zh/guide/
77
- - Showcase： https://markstream-vue-docs.simonhe.me/zh/guide/showcase
109
+ | 框架 | Playground |
110
+ | --- | --- |
111
+ | Vue 3 | https://markstream-vue.simonhe.me/ |
112
+ | React | https://markstream-react.pages.dev/ |
113
+ | Svelte | https://markstream-svelte.pages.dev/ |
114
+ | Angular | https://markstream-angular.pages.dev/ |
115
+ | Nuxt | https://markstream-nuxt.pages.dev/ |
116
+ | Vue 2 | https://markstream-vue2.pages.dev/ |
117
+
118
+ - Vue 3 交互测试页（可分享链接，便于复现）： https://markstream-vue.simonhe.me/test
119
+ - 中文框架文档： https://markstream.simonhe.me/zh/frameworks/
120
+ - Showcase： https://markstream.simonhe.me/zh/guide/showcase
78
121
  - 1.0 benchmark 报告：`pnpm benchmark:1.0`
79
- - AI/LLM 项目索引（中文）： https://markstream-vue-docs.simonhe.me/llms.zh-CN
80
- - AI/LLM 项目索引（英文）： https://markstream-vue-docs.simonhe.me/llms
81
- - 一键 StackBlitz 体验： https://stackblitz.com/github/Simon-He95/markstream-vue?file=playground/src/App.vue
122
+ - LLM 推荐上下文（中文）： https://markstream.simonhe.me/llms.zh-CN.txt
123
+ - 完整 LLM 推荐参考（中文）： https://markstream.simonhe.me/llms-full.zh-CN.txt
124
+ - 仓库 agent 上下文（中文）： https://markstream.simonhe.me/llms.zh-CN
125
+ - LLM 推荐上下文（英文）： https://markstream.simonhe.me/llms.txt
126
+ - 完整 LLM 推荐参考（英文）： https://markstream.simonhe.me/llms-full.txt
127
+ - 仓库 agent 上下文（英文）： https://markstream.simonhe.me/llms
128
+ - Vue 3 StackBlitz 体验： https://stackblitz.com/github/Simon-He95/markstream-vue?file=playground/src/App.vue
82
129
  - 更新日志： [CHANGELOG.md](./CHANGELOG.md)
83
- - Nuxt playground：`pnpm play:nuxt`
84
130
  - Discord： https://discord.gg/vkzdkjeRCW
85
131
 
86
132
  ## 仓库内的 skills 和 prompts
@@ -128,6 +174,84 @@ npx skills add git@github.com:Simon-He95/markstream-vue.git
128
174
 
129
175
  ## ⚡ 快速上手
130
176
 
177
+ ### Vue / Nuxt
178
+
179
+ ```bash
180
+ pnpm add markstream-vue
181
+ ```
182
+
183
+ ```vue
184
+ <script setup>
185
+ import MarkdownRender from 'markstream-vue'
186
+ import 'markstream-vue/index.css'
187
+ </script>
188
+
189
+ <template>
190
+ <MarkdownRender :content="content" />
191
+ </template>
192
+ ```
193
+
194
+ ### React / Next.js
195
+
196
+ ```bash
197
+ pnpm add markstream-react
198
+ ```
199
+
200
+ ```tsx
201
+ import MarkdownRender from 'markstream-react'
202
+ import 'markstream-react/index.css'
203
+
204
+ export function Message({ content, isDone }: { content: string, isDone: boolean }) {
205
+ return <MarkdownRender content={content} final={isDone} fade={false} />
206
+ }
207
+ ```
208
+
209
+ Next.js 的实时 SSE/WebSocket 区域用 root `markstream-react` 放在 `'use client'` 组件里；SSR-first 或 server-only Markdown 看 [Next.js 指南](https://markstream.simonhe.me/zh/frameworks/next/)。
210
+
211
+ ### Svelte 5
212
+
213
+ ```bash
214
+ pnpm add markstream-svelte svelte@^5
215
+ ```
216
+
217
+ ```svelte
218
+ <script lang="ts">
219
+ import MarkdownRender from 'markstream-svelte'
220
+ import 'markstream-svelte/index.css'
221
+
222
+ let { content = '# Hello from markstream-svelte' }: { content?: string } = $props()
223
+ </script>
224
+
225
+ <MarkdownRender {content} />
226
+ ```
227
+
228
+ ### Angular
229
+
230
+ ```bash
231
+ pnpm add markstream-angular
232
+ ```
233
+
234
+ ```ts
235
+ import { Component, signal } from '@angular/core'
236
+ import { bootstrapApplication } from '@angular/platform-browser'
237
+ import { MarkstreamAngularComponent } from 'markstream-angular'
238
+ import 'markstream-angular/index.css'
239
+
240
+ @Component({
241
+ selector: 'app-root',
242
+ standalone: true,
243
+ imports: [MarkstreamAngularComponent],
244
+ template: '<markstream-angular [content]="content()" [final]="true" />',
245
+ })
246
+ class AppComponent {
247
+ readonly content = signal('# Hello from markstream-angular')
248
+ }
249
+
250
+ bootstrapApplication(AppComponent)
251
+ ```
252
+
253
+ ## Vue / Nuxt 详细快速上手
254
+
131
255
  ```bash
132
256
  pnpm add markstream-vue
133
257
  # npm install markstream-vue
@@ -487,11 +611,11 @@ setCustomComponents('docs', {
487
611
  - 🌊 流式优先：原生支持不完整或频繁更新的 token 化 Markdown 内容
488
612
  - 🧠 Monaco 流式更新：高性能的 Monaco 集成，支持大代码块的平滑增量更新
489
613
  - 🪄 渐进式 Mermaid：图表在语法可用时即时渲染，并在后续更新中完善
490
- - 🧩 自定义组件：允许在 Markdown 内容中嵌入自定义 Vue 组件
614
+ - 🧩 自定义组件：允许在 Markdown 内容中嵌入对应框架组件
491
615
  - 📝 完整 Markdown 支持：表格、公式、Emoji、复选框、代码块等
492
616
  - 🔄 实时更新：支持增量内容而不破坏格式
493
617
  - 📦 TypeScript 优先：提供完善的类型定义与智能提示
494
- - 🔌 零配置：开箱即可在 Vue 3 项目中使用
618
+ - 🔌 默认配置：各框架入口开箱即可接入
495
619
  - 🎨 灵活的代码块渲染：可选 Monaco 编辑器 (`CodeBlockNode`) 或轻量的 Shiki 高亮 (`MarkdownCodeBlockNode`)
496
620
  - 🧰 解析工具集：[`stream-markdown-parser`](./packages/markdown-parser) 文档现已覆盖如何在 Worker/SSE 流中复用解析器、直接向 `<MarkdownRender :nodes>` 输送 AST、以及注册全局插件/数学辅助函数的方式。
497
621
 
@@ -517,7 +641,7 @@ setCustomComponents('docs', {
517
641
  ## 故障排查 & 常见问题
518
642
 
519
643
  详细故障排查与常见问题已迁移至文档站点：
520
- https://markstream-vue-docs.simonhe.me/zh/guide/troubleshooting
644
+ https://markstream.simonhe.me/zh/guide/troubleshooting
521
645
 
522
646
  如需更多帮助，请到 GitHub Issues 创建问题：
523
647
  https://github.com/Simon-He95/markstream-vue/issues