@incremark/react 0.0.1 → 0.0.3

package/README.en.md

@@ -0,0 +1,140 @@
+# @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
+
+```tsx
+import { useIncremark, Incremark } from '@incremark/react'
+
+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>` 组件
@@ -63,6 +65,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "license": "MIT",
   "description": "Incremark React integration - Incremental Markdown parser for AI streaming",
   "type": "module",
@@ -18,10 +18,10 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "@incremark/core": "0.0.1"
+    "@incremark/core": "0.0.3"
   },
   "dependencies": {
-    "@incremark/devtools": "0.0.1"
+    "@incremark/devtools": "0.0.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -29,6 +29,12 @@
     "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",
     "dev": "tsup --watch"