pd-markdown 2.0.4-0 → 2.0.4-1
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.
- package/README.md +36 -0
- package/package.json +7 -5
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
- 📋 **Frontmatter** - 支持 YAML frontmatter 解析
|
|
11
11
|
- ⚛️ **React 组件** - 提供开箱即用的 React 渲染组件
|
|
12
12
|
- 🎨 **可定制** - 支持自定义组件覆盖（Heading, Code, Table 等）
|
|
13
|
+
- 🚀 **RSC & SSG 友好** - 完美支持 React Server Components，零水和 (Zero Hydration) 成本
|
|
13
14
|
- 🔗 **自动锚点** - 标题自动生成 slug 锚点
|
|
14
15
|
- 📦 **Tree-shakable** - 基于 ESM 设计，支持按需加载，最小化打包体积
|
|
15
16
|
- 🛠️ **现代兼容性** - 完美支持 Subpath Exports，确保在 Next.js、Vite 等现代开发环境下无缝解析
|
|
@@ -54,8 +55,36 @@ This is a **markdown** document.
|
|
|
54
55
|
}
|
|
55
56
|
```
|
|
56
57
|
|
|
58
|
+
### 在 Next.js Server Components (RSC) 中使用
|
|
59
|
+
|
|
60
|
+
`pd-markdown` 深度优化了服务端渲染场景。`MarkdownRenderer` 是一个 **Shared Component**，可以直接在服务端运行，生成纯 HTML，浏览器端**零 JS 负担**。
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
// app/page.tsx (Next.js Server Component)
|
|
64
|
+
import { getMarkdownAst } from './lib/markdown'
|
|
65
|
+
import { MarkdownRenderer } from 'pd-markdown/web'
|
|
66
|
+
|
|
67
|
+
export default async function Page() {
|
|
68
|
+
// 1. 服务端解析 Markdown 为 AST
|
|
69
|
+
const ast = await getMarkdownAst(content)
|
|
70
|
+
|
|
71
|
+
// 2. 服务端直接渲染为静态 HTML
|
|
72
|
+
return (
|
|
73
|
+
<main>
|
|
74
|
+
<MarkdownRenderer ast={ast} />
|
|
75
|
+
</main>
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
> [!TIP]
|
|
81
|
+
> 这种模式完美支持 **SSG (静态站点生成)**，搜索引擎优化 (SEO) 友好且交互响应极快。
|
|
82
|
+
|
|
57
83
|
### 流式渲染 (AI 场景)
|
|
58
84
|
|
|
85
|
+
> [!NOTE]
|
|
86
|
+
> 流式渲染组件 (`StreamMarkdownRenderer`) 需要在客户端运行，已内置 `'use client'` 指令。
|
|
87
|
+
|
|
59
88
|
```tsx
|
|
60
89
|
import { StreamMarkdownRenderer, useStreamMarkdown } from 'pd-markdown/web'
|
|
61
90
|
|
|
@@ -164,6 +193,13 @@ import { traverseAst, findNodes, slugify } from 'pd-markdown/utils'
|
|
|
164
193
|
const headings = findNodes(ast, 'heading')
|
|
165
194
|
```
|
|
166
195
|
|
|
196
|
+
## 示例 (Demos)
|
|
197
|
+
|
|
198
|
+
你可以参考 `examples` 目录下的项目：
|
|
199
|
+
|
|
200
|
+
- **[web-demo](./examples/web-demo)**: 基础的 Vite/React 客户端渲染示例。
|
|
201
|
+
- **[nextjs-demo](./examples/nextjs-demo)**: 基于 Next.js 15 App Router 的 **Server Components (RSC)** 与 **SSG** 最佳实践示例。
|
|
202
|
+
|
|
167
203
|
## 开发
|
|
168
204
|
|
|
169
205
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pd-markdown",
|
|
3
|
-
"version": "2.0.4-
|
|
3
|
+
"version": "2.0.4-1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./packages/web/dist/index.cjs",
|
|
6
6
|
"module": "./packages/web/dist/index.mjs",
|
|
@@ -69,8 +69,8 @@
|
|
|
69
69
|
"unist-util-visit": "^5.0.0",
|
|
70
70
|
"yaml": "^2.7.0",
|
|
71
71
|
"pd-markdown-parser": "0.1.0",
|
|
72
|
-
"pd-markdown-
|
|
73
|
-
"pd-markdown-
|
|
72
|
+
"pd-markdown-web": "0.1.0",
|
|
73
|
+
"pd-markdown-utils": "0.1.0"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
76
|
"@rollup/plugin-commonjs": "^28.0.2",
|
|
@@ -101,11 +101,13 @@
|
|
|
101
101
|
},
|
|
102
102
|
"sideEffects": false,
|
|
103
103
|
"scripts": {
|
|
104
|
-
"build": "pnpm -r run build",
|
|
104
|
+
"build": "pnpm -r --filter \"./packages/*\" run build",
|
|
105
|
+
"build:examples": "pnpm -r --filter \"./examples/*\" run build",
|
|
106
|
+
"build:all": "pnpm -r run build",
|
|
105
107
|
"test": "vitest run",
|
|
106
108
|
"test:watch": "vitest",
|
|
107
109
|
"test:coverage": "vitest run --coverage",
|
|
108
110
|
"typecheck": "tsc --noEmit",
|
|
109
|
-
"clean": "pnpm -r run clean"
|
|
111
|
+
"clean": "pnpm -r --filter \"./packages/*\" run clean"
|
|
110
112
|
}
|
|
111
113
|
}
|