@incremark/react 0.0.1 → 0.0.4

package/README.en.md

@@ -0,0 +1,149 @@
+# @incremark/react
+
+React 18+ integration for Incremark.
+
+**[🇨🇳 中文](./README.md)** | 🇺🇸 English
+
+## Features
+
+- 📦 **Out of the Box** - Provides `useIncremark` hook and `<Incremark>` component
+- 🎨 **Customizable** - Support for custom render components
+- ⚡ **High Performance** - Leverages React's reconciliation mechanism
+- 🔧 **DevTools** - Built-in developer tools
+
+## Installation
+
+```bash
+pnpm add @incremark/core @incremark/react
+```
+
+## Quick Start
+
+**1. Import Styles**
+
+```tsx
+import '@incremark/react/styles.css'
+```
+
+**2. Use in Your Component**
+
+```tsx
+import { useIncremark, Incremark } from '@incremark/react'
+import '@incremark/react/styles.css'
+
+function App() {
+  const { blocks, append, finalize, reset } = useIncremark({ gfm: true })
+
+  async function handleStream(stream: ReadableStream) {
+    reset()
+    const reader = stream.getReader()
+    const decoder = new TextDecoder()
+    
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      append(decoder.decode(value))
+    }
+    
+    finalize()
+  }
+
+  return (
+    <>
+      <button onClick={() => handleStream(stream)}>Start</button>
+      <Incremark blocks={blocks} />
+    </>
+  )
+}
+```
+
+## API
+
+### useIncremark(options)
+
+Core hook.
+
+**Returns:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `markdown` | `string` | Complete Markdown |
+| `blocks` | `Block[]` | All blocks |
+| `completedBlocks` | `Block[]` | Completed blocks |
+| `pendingBlocks` | `Block[]` | Pending blocks |
+| `append` | `Function` | Append content |
+| `finalize` | `Function` | Complete parsing |
+| `reset` | `Function` | Reset state |
+| `render` | `Function` | Render once (reset + append + finalize) |
+
+### useDevTools(incremark)
+
+Enable DevTools.
+
+```tsx
+const incremark = useIncremark()
+useDevTools(incremark)
+```
+
+### \<Incremark\>
+
+Render component.
+
+```tsx
+<Incremark 
+  blocks={blocks}
+  components={{ heading: MyHeading }}
+/>
+```
+
+## Custom Components
+
+```tsx
+import { useIncremark, Incremark } from '@incremark/react'
+import MyCode from './MyCode'
+
+function App() {
+  const { blocks } = useIncremark()
+  
+  return (
+    <Incremark 
+      blocks={blocks} 
+      components={{ code: MyCode }}
+    />
+  )
+}
+```
+
+## Integration with React Query
+
+```tsx
+import { useQuery } from '@tanstack/react-query'
+import { useIncremark, Incremark } from '@incremark/react'
+
+function StreamingContent() {
+  const { blocks, append, finalize, reset } = useIncremark()
+  
+  const { refetch } = useQuery({
+    queryKey: ['chat'],
+    queryFn: async () => {
+      reset()
+      // ... streaming handling
+      finalize()
+      return null
+    },
+    enabled: false
+  })
+
+  return (
+    <>
+      <button onClick={() => refetch()}>Start</button>
+      <Incremark blocks={blocks} />
+    </>
+  )
+}
+```
+
+## License
+
+MIT
+

package/README.md

@@ -2,6 +2,8 @@
 
 Incremark 的 React 18+ 集成库。
 
+🇨🇳 中文 | **[🇺🇸 English](./README.en.md)**
+
 ## 特性
 
 - 📦 **开箱即用** - 提供 `useIncremark` hook 和 `<Incremark>` 组件
@@ -17,8 +19,17 @@ pnpm add @incremark/core @incremark/react
 
 ## 快速开始
 
+**1. 引入样式**
+
+```tsx
+import '@incremark/react/styles.css'
+```
+
+**2. 在组件中使用**
+
 ```tsx
 import { useIncremark, Incremark } from '@incremark/react'
+import '@incremark/react/styles.css'
 
 function App() {
   const { blocks, append, finalize, reset } = useIncremark({ gfm: true })
@@ -63,6 +74,7 @@ function App() {
 | `append` | `Function` | 追加内容 |
 | `finalize` | `Function` | 完成解析 |
 | `reset` | `Function` | 重置状态 |
+| `render` | `Function` | 一次性渲染（reset + append + finalize） |
 
 ### useDevTools(incremark)
 

package/dist/index.d.ts

@@ -51,6 +51,8 @@ declare function useIncremark(options?: UseIncremarkOptions): {
     abort: () => IncrementalUpdate;
     /** 重置解析器 */
     reset: () => void;
+    /** 一次性渲染（reset + append + finalize） */
+    render: (content: string) => IncrementalUpdate;
     /** 解析器实例 */
     parser: IncremarkParser;
 };

package/dist/index.js

@@ -66,6 +66,17 @@ function useIncremark(options = {}) {
     setMarkdown("");
     setIsLoading(false);
   }, [parser]);
+  const render = useCallback(
+    (content) => {
+      const update = parser.render(content);
+      setMarkdown(parser.getBuffer());
+      setCompletedBlocks(parser.getCompletedBlocks());
+      setPendingBlocks([]);
+      setIsLoading(false);
+      return update;
+    },
+    [parser]
+  );
   return {
     /** 已收集的完整 Markdown 字符串 */
     markdown,
@@ -87,6 +98,8 @@ function useIncremark(options = {}) {
     abort,
     /** 重置解析器 */
     reset,
+    /** 一次性渲染（reset + append + finalize） */
+    render,
     /** 解析器实例 */
     parser
   };

package/dist/styles.css

@@ -0,0 +1,191 @@
+/* Incremark React 样式 */
+
+/* 主容器 */
+.incremark {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: #333;
+}
+
+/* 块状态显示 */
+.incremark-block.pending {
+  border-left: 3px solid #a855f7;
+  padding-left: 12px;
+  opacity: 0.8;
+}
+
+/* 标题 */
+.incremark-heading {
+  margin: 0.5em 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.incremark-heading h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 0.3em;
+}
+
+.incremark-heading h2 {
+  font-size: 1.5em;
+}
+
+.incremark-heading h3 {
+  font-size: 1.25em;
+}
+
+.incremark-heading h4 {
+  font-size: 1em;
+}
+
+.incremark-heading h5 {
+  font-size: 0.875em;
+}
+
+.incremark-heading h6 {
+  font-size: 0.85em;
+  color: #666;
+}
+
+/* 段落 */
+.incremark-paragraph {
+  margin: 0.75em 0;
+  line-height: 1.6;
+}
+
+/* 行内代码 */
+.incremark-inline-code {
+  padding: 0.2em 0.4em;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
+  font-family: 'Fira Code', 'SF Mono', Consolas, monospace;
+  font-size: 0.9em;
+}
+
+/* 代码块 */
+.incremark-code {
+  margin: 1em 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #24292e;
+}
+
+.incremark-code .code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: #1f2428;
+  border-bottom: 1px solid #30363d;
+  font-size: 12px;
+}
+
+.incremark-code .language {
+  color: #8b949e;
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+.incremark-code pre {
+  margin: 0;
+  padding: 16px;
+  overflow-x: auto;
+  background: transparent;
+}
+
+.incremark-code code {
+  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #c9d1d9;
+}
+
+/* 列表 */
+.incremark-list {
+  margin: 0.75em 0;
+  padding-left: 2em;
+}
+
+.incremark-list li {
+  margin: 0.25em 0;
+  line-height: 1.6;
+}
+
+/* 引用块 */
+.incremark-blockquote {
+  margin: 1em 0;
+  padding: 0.5em 1em;
+  border-left: 4px solid #3b82f6;
+  background: #f0f7ff;
+  border-radius: 0 4px 4px 0;
+}
+
+.incremark-blockquote p {
+  margin: 0.5em 0;
+}
+
+.incremark-blockquote p:first-child {
+  margin-top: 0;
+}
+
+.incremark-blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+/* 表格 */
+.incremark-table-wrapper {
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.incremark-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.incremark-table th,
+.incremark-table td {
+  border: 1px solid #ddd;
+  padding: 10px 14px;
+}
+
+.incremark-table th {
+  background: #f8f9fa;
+  font-weight: 600;
+}
+
+.incremark-table tr:nth-child(even) {
+  background: #fafafa;
+}
+
+.incremark-table tr:hover {
+  background: #f0f0f0;
+}
+
+/* 分隔线 */
+.incremark-hr {
+  margin: 2em 0;
+  border: none;
+  border-top: 2px solid #e5e5e5;
+}
+
+/* 未知类型 */
+.incremark-unknown {
+  margin: 0.5em 0;
+  padding: 10px;
+  background: #fff3cd;
+  border: 1px solid #ffc107;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.incremark-unknown pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 11px;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "license": "MIT",
   "description": "Incremark React integration - Incremental Markdown parser for AI streaming",
   "type": "module",
@@ -11,17 +11,18 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "@incremark/core": "0.0.1"
+    "@incremark/core": "0.0.4"
   },
   "dependencies": {
-    "@incremark/devtools": "0.0.1"
+    "@incremark/devtools": "0.0.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -29,8 +30,14 @@
     "tsup": "^8.0.0",
     "typescript": "^5.3.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kingshuaishuai/incremark.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://incremark-docs.vercel.app/",
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && cp src/styles.css dist/styles.css",
     "dev": "tsup --watch"
   }
 }