markstream-vue 1.0.9-beta.0 → 1.0.9-beta.2

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 (8) hide show
  1. package/README.md +23 -3
  2. package/README.zh-CN.md +24 -4
  3. package/dist/CodeBlockNode.js +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.px.css +1 -1
  6. package/dist/index.tailwind.css +1 -1
  7. package/dist/tailwind.js +0 -0
  8. package/package.json +15 -3
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  `markstream-vue` is a Vue 3 / Nuxt / VitePress streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, long AI responses, Mermaid, KaTeX, and streaming code blocks.
4
4
 
5
- Markstream is the renderer family for Vue, React, Svelte, Angular, and Vue 2. Use sibling packages for non-Vue frameworks; use `markstream-vue` when your Vue/Nuxt/VitePress UI needs stable partial Markdown states, mobile WebView rendering, safe component rendering, and progressive heavy blocks.
5
+ Markstream is the renderer family for Vue, React, Octane, Svelte, Angular, and Vue 2. Use sibling packages for non-Vue frameworks; use `markstream-vue` when your Vue/Nuxt/VitePress UI needs stable partial Markdown states, mobile WebView rendering, safe component rendering, and progressive heavy blocks.
6
6
 
7
7
  [![中文版](https://img.shields.io/badge/docs-中文文档-blue)](README.zh-CN.md)
8
8
  [![Docs](https://img.shields.io/badge/docs-vitepress-blue)](https://markstream.simonhe.me/)
@@ -68,6 +68,7 @@ Start with the [framework overview](https://markstream.simonhe.me/frameworks) if
68
68
  | --- | --- | --- | --- |
69
69
  | `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) |
70
70
  | `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) |
71
+ | `markstream-octane` | Octane | `pnpm add markstream-octane octane` | [Package guide](./packages/markstream-octane/README.md) · [Local playground](./playground-octane) |
71
72
  | `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) |
72
73
  | `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) |
73
74
  | `markstream-vue2` | Vue 2.6 / 2.7 | `pnpm add markstream-vue2` | [Vue 2 landing](https://markstream.simonhe.me/frameworks/vue2) · [Quick start](https://markstream.simonhe.me/guide/vue2-quick-start) |
@@ -78,6 +79,7 @@ Start with the [framework overview](https://markstream.simonhe.me/frameworks) if
78
79
 
79
80
  - **Vue 3 / Nuxt / VitePress** → `markstream-vue`
80
81
  - **React / Next.js / Remix** → `markstream-react`
82
+ - **Octane** → `markstream-octane`
81
83
  - **Svelte 5** → `markstream-svelte`
82
84
  - **Angular standalone** → `markstream-angular`
83
85
  - **Vue 2.6 / 2.7** → `markstream-vue2`
@@ -88,7 +90,7 @@ Start with the [framework overview](https://markstream.simonhe.me/frameworks) if
88
90
 
89
91
  `markstream-vue` has a stable 1.x API contract. The current npm package may still use beta tags while the 1.0 release gate and cross-framework package family are finalized. The stable surface includes `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.
90
92
 
91
- 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.
93
+ Cross-framework renderers (`markstream-react`, `markstream-octane`, `markstream-svelte`, `markstream-angular`, `markstream-vue2`) are available and actively developed. Check each package page for API maturity, framework support, and known limitations.
92
94
 
93
95
  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).
94
96
 
@@ -125,7 +127,7 @@ For the full release contract and Go / No-Go checklist, see [1.0 Release Readine
125
127
  - Purpose-built for **streaming Markdown** (AI/chat/SSE), designed to minimize flicker and keep memory predictable.
126
128
  - **Two render modes**: virtual window for long docs, incremental batching for “typing” effects.
127
129
  - **Progressive diagrams** (Mermaid) and **streaming code blocks** (Monaco/Shiki) that keep up with diffs.
128
- - Works with **raw Markdown strings or pre-parsed nodes**, with custom framework components in Vue, React, Svelte, and Angular.
130
+ - Works with **raw Markdown strings or pre-parsed nodes**, with custom framework components in Vue, React, Octane, Svelte, and Angular.
129
131
  - TypeScript-first, ship-ready defaults — import CSS and render.
130
132
 
131
133
  ## Choose Your Path
@@ -145,6 +147,7 @@ For the full release contract and Go / No-Go checklist, see [1.0 Release Readine
145
147
  | --- | --- |
146
148
  | Vue 3 | https://markstream-vue.simonhe.me/ |
147
149
  | React | https://markstream-react.pages.dev/ |
150
+ | Octane | `pnpm play:octane` |
148
151
  | Svelte | https://markstream-svelte.pages.dev/ |
149
152
  | Angular | https://markstream-angular.pages.dev/ |
150
153
  | Nuxt | https://markstream-nuxt.pages.dev/ |
@@ -235,6 +238,23 @@ export function Message({ content, isDone }: { content: string, isDone: boolean
235
238
 
236
239
  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).
237
240
 
241
+ ### Octane
242
+
243
+ ```bash
244
+ pnpm add markstream-octane octane
245
+ ```
246
+
247
+ ```tsrx
248
+ import { NodeRenderer } from 'markstream-octane'
249
+ import 'markstream-octane/index.css'
250
+
251
+ export function Message(props: { content: string, isDone: boolean }) {
252
+ return <NodeRenderer content={props.content} final={props.isDone} />
253
+ }
254
+ ```
255
+
256
+ Add `octane/compiler/vite` to Vite and configure `.tsrx` as shown in the [package guide](./packages/markstream-octane/README.md). The package ships precompiled client and server entries; application source still uses the normal Octane compiler.
257
+
238
258
  ### Svelte 5
239
259
 
240
260
  ```bash
package/README.zh-CN.md CHANGED
@@ -1,10 +1,10 @@
1
1
  # Markstream
2
2
 
3
- > 面向 AI 应用的多框架流式 Markdown 渲染器家族 — 支持 Vue、React、Svelte、Angular、Nuxt 和 Next.js。
3
+ > 面向 AI 应用的多框架流式 Markdown 渲染器家族 — 支持 Vue、React、Octane、Svelte、Angular、Nuxt 和 Next.js。
4
4
 
5
5
  Markstream 专为在用户眼前持续变化的 Markdown 场景而构建：LLM token 流、SSE/WebSocket 输出、AI 聊天消息、未闭合 Markdown 中间态、长文档、渐进式 Mermaid 图表、KaTeX 数学公式、流式代码块以及安全的组件化渲染。
6
6
 
7
- Vue 3、Nuxt 和 VitePress 项目优先使用 `markstream-vue`；React、Svelte、Angular、Vue 2 项目使用对应 sibling package。普通 AI 聊天可以直接传不断累积的 `content` 字符串，只有外层已经负责解析、batch 或 worker AST 时才需要 `nodes` 路径。
7
+ Vue 3、Nuxt 和 VitePress 项目优先使用 `markstream-vue`；React、Octane、Svelte、Angular、Vue 2 项目使用对应 sibling package。普通 AI 聊天可以直接传不断累积的 `content` 字符串，只有外层已经负责解析、batch 或 worker AST 时才需要 `nodes` 路径。
8
8
 
9
9
  [![English](https://img.shields.io/badge/docs-English-blue)](README.md)
10
10
  [![Docs](https://img.shields.io/badge/docs-中文文档-blue)](https://markstream.simonhe.me/zh/guide)
@@ -40,6 +40,7 @@ Vue 包：
40
40
  | --- | --- | --- | --- |
41
41
  | `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) |
42
42
  | `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) |
43
+ | `markstream-octane` | Octane | `pnpm add markstream-octane octane` | [包使用指南](./packages/markstream-octane/README.md) · [本地 Playground](./playground-octane) |
43
44
  | `markstream-svelte` | Svelte 5 | `pnpm add markstream-svelte svelte@^5` | [Svelte 指南](https://markstream.simonhe.me/zh/frameworks/svelte) |
44
45
  | `markstream-angular` | Angular standalone | `pnpm add markstream-angular` | [Angular 指南](https://markstream.simonhe.me/zh/frameworks/angular) |
45
46
  | `markstream-vue2` | Vue 2.6 / 2.7 | `pnpm add markstream-vue2` | [Vue 2 指南](https://markstream.simonhe.me/zh/frameworks/vue2) · [快速开始](https://markstream.simonhe.me/zh/guide/vue2-quick-start) |
@@ -50,6 +51,7 @@ Vue 包：
50
51
 
51
52
  - **Vue 3 / Nuxt / VitePress** → `markstream-vue`
52
53
  - **React / Next.js / Remix** → `markstream-react`
54
+ - **Octane** → `markstream-octane`
53
55
  - **Svelte 5** → `markstream-svelte`
54
56
  - **Angular standalone** → `markstream-angular`
55
57
  - **Vue 2.6 / 2.7** → `markstream-vue2`
@@ -60,7 +62,7 @@ Vue 包：
60
62
 
61
63
  `markstream-vue` 已进入稳定的 1.x API 契约；当前 npm 包仍可能带 beta tag，用于发布门禁和跨框架家族同步。稳定面包括：`MarkdownRender`、流式内容渲染、预解析节点渲染、安全 HTML 策略、可选 Mermaid / KaTeX / Monaco / D2 / Infographic 集成、虚拟滚动协调、CSS 导出、worker client 子路径以及 Vite / Nuxt / VitePress 的 SSR 导入。
62
64
 
63
- 跨框架渲染器（`markstream-react`、`markstream-svelte`、`markstream-angular`、`markstream-vue2`）已可用并积极开发中。请查看各包文档了解 API 成熟度、框架支持和已知限制。
65
+ 跨框架渲染器（`markstream-react`、`markstream-octane`、`markstream-svelte`、`markstream-angular`、`markstream-vue2`）已可用并积极开发中。请查看各包文档了解 API 成熟度、框架支持和已知限制。
64
66
 
65
67
  - [速览](#速览)
66
68
  - [按场景选择入口](#按场景选择入口)
@@ -93,7 +95,7 @@ Vue 包：
93
95
  - 为 **流式 Markdown**（AI/聊天/SSE）打造，目标是减少闪烁并保持内存可预期。
94
96
  - **双渲染模式**：长文档虚拟化窗口，或“打字机”式增量批次。
95
97
  - **渐进式图表**（Mermaid）与 **流式代码块**（Monaco/Shiki），跟上 diff/增量输出。
96
- - 同时支持 **Markdown 字符串或预解析节点**，可在 Vue、React、Svelte 和 Angular 中嵌入 **自定义框架组件**。
98
+ - 同时支持 **Markdown 字符串或预解析节点**，可在 Vue、React、Octane、Svelte 和 Angular 中嵌入 **自定义框架组件**。
97
99
  - TypeScript 优先，开箱默认即可上线（导入 CSS 即用）。
98
100
 
99
101
  ## 按场景选择入口
@@ -113,6 +115,7 @@ Vue 包：
113
115
  | --- | --- |
114
116
  | Vue 3 | https://markstream-vue.simonhe.me/ |
115
117
  | React | https://markstream-react.pages.dev/ |
118
+ | Octane | `pnpm play:octane` |
116
119
  | Svelte | https://markstream-svelte.pages.dev/ |
117
120
  | Angular | https://markstream-angular.pages.dev/ |
118
121
  | Nuxt | https://markstream-nuxt.pages.dev/ |
@@ -211,6 +214,23 @@ export function Message({ content, isDone }: { content: string, isDone: boolean
211
214
 
212
215
  Next.js 的实时 SSE/WebSocket 区域用 root `markstream-react` 放在 `'use client'` 组件里；SSR-first 或 server-only Markdown 看 [Next.js 指南](https://markstream.simonhe.me/zh/frameworks/next)。
213
216
 
217
+ ### Octane
218
+
219
+ ```bash
220
+ pnpm add markstream-octane octane
221
+ ```
222
+
223
+ ```tsrx
224
+ import { NodeRenderer } from 'markstream-octane'
225
+ import 'markstream-octane/index.css'
226
+
227
+ export function Message(props: { content: string, isDone: boolean }) {
228
+ return <NodeRenderer content={props.content} final={props.isDone} />
229
+ }
230
+ ```
231
+
232
+ 请按[包使用指南](./packages/markstream-octane/README.md)在 Vite 中启用 `octane/compiler/vite` 并配置 `.tsrx`。发布包已经包含编译后的 client/server 入口，应用源码仍按正常 Octane 流程编译。
233
+
214
234
  ### Svelte 5
215
235
 
216
236
  ```bash