@incremark/core 0.3.1 → 0.3.3

package/README.en.md

@@ -129,11 +129,76 @@ Get completed blocks.
 
 Get current buffer content.
 
-## BlockTransformer
+## Framework Integration
+
+For daily use, it's recommended to use the framework packages which have built-in incremental parsing and typewriter effect support:
+
+```vue
+<!-- Vue -->
+<script setup>
+import { ref } from 'vue'
+import { IncremarkContent } from '@incremark/vue'
+
+const content = ref('')
+const isFinished = ref(false)
+
+async function simulateStream() {
+  content.value = ''
+  isFinished.value = false
+
+  const text = '# Hello\n\nThis is **Incremark**!'
+  for (const chunk of text.match(/[\s\S]{1,5}/g) || []) {
+    content.value += chunk  // Incremental append
+    await new Promise(r => setTimeout(r, 50))
+  }
+  isFinished.value = true
+}
+</script>
+
+<template>
+  <IncremarkContent
+    :content="content"
+    :is-finished="isFinished"
+    :incremark-options="{ typewriter: { enabled: true } }"
+  />
+</template>
+```
+
+```tsx
+// React
+import { useState } from 'react'
+import { IncremarkContent } from '@incremark/react'
+
+function App() {
+  const [content, setContent] = useState('')
+  const [isFinished, setIsFinished] = useState(false)
+
+  async function simulateStream() {
+    setContent('')
+    setIsFinished(false)
+
+    const text = '# Hello\n\nThis is **Incremark**!'
+    const chunks = text.match(/[\s\S]{1,5}/g) || []
+    for (const chunk of chunks) {
+      setContent(prev => prev + chunk)  // Incremental append
+      await new Promise(r => setTimeout(r, 50))
+    }
+    setIsFinished(true)
+  }
+
+  return (
+    <IncremarkContent
+      content={content}
+      isFinished={isFinished}
+      incremarkOptions={{ typewriter: { enabled: true } } }
+    />
+  )
+}
+```
 
-Typewriter effect controller, serves as middleware between parser and renderer.
+## Advanced: BlockTransformer
 
-### Basic Usage
+`BlockTransformer` is the typewriter effect controller, serving as middleware between parser and renderer. Only use this when you need custom rendering logic.
 
 ```ts
 import { createBlockTransformer, defaultPlugins } from '@incremark/core'

package/README.md

@@ -87,11 +87,76 @@ console.log(update.completed) // 已完成的块
 
 获取完整 AST。
 
-## BlockTransformer
+## 与框架集成
+
+对于日常使用，建议直接使用框架集成包，它们已内置增量解析和打字机效果支持：
+
+```vue
+<!-- Vue -->
+<script setup>
+import { ref } from 'vue'
+import { IncremarkContent } from '@incremark/vue'
 
-打字机效果控制器，作为解析器和渲染器之间的中间层。
+const content = ref('')
+const isFinished = ref(false)
 
-### 基本用法
+async function simulateStream() {
+  content.value = ''
+  isFinished.value = false
+
+  const text = '# Hello\n\nThis is **Incremark**!'
+  for (const chunk of text.match(/[\s\S]{1,5}/g) || []) {
+    content.value += chunk  // 增量追加
+    await new Promise(r => setTimeout(r, 50))
+  }
+  isFinished.value = true
+}
+</script>
+
+<template>
+  <IncremarkContent
+    :content="content"
+    :is-finished="isFinished"
+    :incremark-options="{ typewriter: { enabled: true } }"
+  />
+</template>
+```
+
+```tsx
+// React
+import { useState } from 'react'
+import { IncremarkContent } from '@incremark/react'
+
+function App() {
+  const [content, setContent] = useState('')
+  const [isFinished, setIsFinished] = useState(false)
+
+  async function simulateStream() {
+    setContent('')
+    setIsFinished(false)
+
+    const text = '# Hello\n\nThis is **Incremark**!'
+    const chunks = text.match(/[\s\S]{1,5}/g) || []
+    for (const chunk of chunks) {
+      setContent(prev => prev + chunk)  // 增量追加
+      await new Promise(r => setTimeout(r, 50))
+    }
+    setIsFinished(true)
+  }
+
+  return (
+    <IncremarkContent
+      content={content}
+      isFinished={isFinished}
+      incremarkOptions={{ typewriter: { enabled: true } } }
+    />
+  )
+}
+```
+
+## 高级用法：BlockTransformer
+
+`BlockTransformer` 是打字机效果控制器，作为解析器和渲染器之间的中间层。仅在需要自定义渲染逻辑时使用。
 
 ```ts
 import { createBlockTransformer, defaultPlugins } from '@incremark/core'
@@ -181,11 +246,6 @@ interface DisplayBlock {
 }
 ```
 
-## 与框架集成
-
-- Vue: [@incremark/vue](../vue)
-- React: [@incremark/react](../react)
-
 ## License
 
 MIT

package/dist/{MarkedAstBuildter-DDP1An5M.d.ts → MarkedAstBuildter-B2QhLKKy.d.ts}

@@ -1,6 +1,6 @@
 import { Root, RootContent } from 'mdast';
 import { C as ContainerConfig, H as HtmlTreeExtensionOptions, B as BlockStatus, P as ParsedBlock } from './index-CWuosVAK.js';
-import { I as IAstBuilder, E as EngineParserOptions } from './types-N1b99kYB.js';
+import { I as IAstBuilder, E as EngineParserOptions } from './types-B7GTGJc2.js';
 
 /**
  * Marked AST 构建器（极速模式）
@@ -62,7 +62,7 @@ declare class MarkedAstBuilder implements IAstBuilder {
     /**
      * 将 AST 节点转换为 ParsedBlock
      */
-    nodesToBlocks(nodes: RootContent[], startOffset: number, rawText: string, status: BlockStatus, generateBlockId: () => string): ParsedBlock[];
+    nodesToBlocks(nodes: RootContent[], startOffset: number, rawText: string, status: BlockStatus, generateBlockId: (startOffset: number) => string): ParsedBlock[];
     /**
      * 更新配置选项
      * @param options 部分配置选项

package/dist/engines/marked/index.d.ts

@@ -1,7 +1,7 @@
-import { M as MarkedAstBuilder } from '../../MarkedAstBuildter-DDP1An5M.js';
-export { A as AstBuilder } from '../../MarkedAstBuildter-DDP1An5M.js';
-import { E as EngineParserOptions } from '../../types-N1b99kYB.js';
-export { I as IAstBuilder, b as IncremarkPlugin, M as MarkedEngineExtension } from '../../types-N1b99kYB.js';
+import { M as MarkedAstBuilder } from '../../MarkedAstBuildter-B2QhLKKy.js';
+export { A as AstBuilder } from '../../MarkedAstBuildter-B2QhLKKy.js';
+import { E as EngineParserOptions } from '../../types-B7GTGJc2.js';
+export { I as IAstBuilder, b as IncremarkPlugin, M as MarkedEngineExtension } from '../../types-B7GTGJc2.js';
 import 'mdast';
 import '../../index-CWuosVAK.js';
 import 'micromark-util-types';

package/dist/engines/marked/index.js

@@ -1563,7 +1563,7 @@ var MarkedAstBuilder = class {
       const absoluteStart = startOffset + relativeStart;
       const absoluteEnd = startOffset + relativeEnd;
       blocks.push({
-        id: generateBlockId(),
+        id: generateBlockId(absoluteStart),
         status,
         node,
         startOffset: absoluteStart,