@incremark/react 0.3.3 → 0.3.5

package/README.en.md

@@ -17,7 +17,7 @@ React 18+ integration library for Incremark, providing high-performance streamin
 ## Installation
 
 ```bash
-pnpm add @incremark/core @incremark/react
+pnpm add @incremark/react @incremark/theme
 ```
 
 ## Quick Start
@@ -27,7 +27,7 @@ pnpm add @incremark/core @incremark/react
 ```tsx
 import { useState } from 'react'
 import { IncremarkContent } from '@incremark/react'
-import '@incremark/react/styles.css'
+import '@incremark/theme/styles.css'
 
 function App() {
   const [content, setContent] = useState('')

package/README.md

@@ -15,44 +15,37 @@ Incremark 的 React 18+ 集成库。
 ## 安装
 
 ```bash
-pnpm add @incremark/core @incremark/react
+pnpm add @incremark/react @incremark/theme
 ```
 
 ## 快速开始
 
-**1. 引入样式**
-
 ```tsx
-import '@incremark/react/styles.css'
-```
-
-**2. 在组件中使用**
-
-```tsx
-import { useIncremark, Incremark } from '@incremark/react'
-import '@incremark/react/styles.css'
+import { useState } from 'react'
+import { IncremarkContent } from '@incremark/react'
+import '@incremark/theme/styles.css'
 
 function App() {
-  const { blocks, append, finalize, reset } = useIncremark({ gfm: true })
+  const [content, setContent] = useState('')
+  const [isFinished, setIsFinished] = useState(false)
 
   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))
+      setContent(prev => prev + decoder.decode(value))
     }
-    
-    finalize()
+
+    setIsFinished(true)
   }
 
   return (
     <>
       <button onClick={() => handleStream(stream)}>开始</button>
-      <Incremark blocks={blocks} />
+      <IncremarkContent content={content} isFinished={isFinished} />
     </>
   )
 }

package/dist/index.d.ts

@@ -3,8 +3,7 @@ export { AnimationEffect, BlockTransformer, DisplayBlock, IncrementalUpdate, Par
 import React$1, { ReactNode, ComponentType } from 'react';
 import { Definition, FootnoteDefinition, RootContent, PhrasingContent } from 'mdast';
 export { Blockquote, Code, Definition, FootnoteDefinition, HTML, Heading, Image, ImageReference, InlineCode, Link, LinkReference, List, ListItem, Root as MdastRoot, Paragraph, Parent, PhrasingContent, Table, TableCell, Text, ThematicBreak } from 'mdast';
-import * as _incremark_devtools from '@incremark/devtools';
-import { DevToolsOptions } from '@incremark/devtools';
+import { IncremarkDevTools } from '@incremark/devtools';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IncremarkLocale } from '@incremark/shared';
 export { IncremarkLocale, en, zhCN } from '@incremark/shared';
@@ -211,25 +210,6 @@ declare function useIncremark(options?: UseIncremarkOptions): {
 };
 type UseIncremarkReturn = ReturnType<typeof useIncremark>;
 
-interface UseDevToolsOptions extends DevToolsOptions {
-}
-/**
- * React DevTools 一行接入
- *
- * @example
- * ```tsx
- * import { useIncremark, useDevTools } from '@incremark/react'
- *
- * function App() {
- *   const incremark = useIncremark()
- *   useDevTools(incremark)  // 就这一行！
- *
- *   return <div>...</div>
- * }
- * ```
- */
-declare function useDevTools(incremark: UseIncremarkReturn, options?: UseDevToolsOptions): _incremark_devtools.IncremarkDevTools | null;
-
 interface UseBlockTransformerOptions extends Omit<TransformerOptions, 'onChange'> {
 }
 interface UseBlockTransformerReturn<T = unknown> {
@@ -344,6 +324,12 @@ interface IncremarkContentProps {
     incremarkOptions?: UseIncremarkOptions;
     pendingClass?: string;
     showBlockStatus?: boolean;
+    /** DevTools 实例，传入后组件会自动注册 parser */
+    devtools?: IncremarkDevTools;
+    /** DevTools 中显示的 parser ID，默认自动生成 */
+    devtoolsId?: string;
+    /** DevTools 中显示的 parser 标签，默认使用 ID */
+    devtoolsLabel?: string;
 }
 
 /**
@@ -420,6 +406,11 @@ declare const Incremark: React$1.FC<IncremarkProps>;
  *
  * // 增量更新内容
  * <IncremarkContent content={partialContent} isFinished={false} />
+ *
+ * // 使用 DevTools
+ * const devtools = createDevTools()
+ * devtools.mount()
+ * <IncremarkContent content={content} devtools={devtools} devtoolsId="msg-1" />
  * ```
  */
 declare const IncremarkContent: React$1.FC<IncremarkContentProps>;
@@ -644,4 +635,4 @@ interface ThemeProviderProps {
  */
 declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
 
-export { AutoScrollContainer, type AutoScrollContainerProps, type AutoScrollContainerRef, ConfigProvider, type DefinitionsContextValue, DefinitionsProvider, type DefinitionsProviderProps, type HtmlElementNode, Incremark, IncremarkContainerProvider, type IncremarkContainerProviderProps, IncremarkContent, type IncremarkContentProps, IncremarkFootnotes, IncremarkHtmlElement, type IncremarkHtmlElementProps, IncremarkInline, type IncremarkInlineProps, type IncremarkProps, IncremarkRenderer, type IncremarkRendererProps, ThemeProvider, type ThemeProviderProps, type TypewriterControls, type TypewriterOptions, type UseBlockTransformerOptions, type UseBlockTransformerReturn, type UseDevToolsOptions, type UseIncremarkOptions, type UseIncremarkReturn, type UseLocaleReturn, useBlockTransformer, useDefinitions, useDevTools, useIncremark, useLocale };
+export { AutoScrollContainer, type AutoScrollContainerProps, type AutoScrollContainerRef, ConfigProvider, type DefinitionsContextValue, DefinitionsProvider, type DefinitionsProviderProps, type HtmlElementNode, Incremark, IncremarkContainerProvider, type IncremarkContainerProviderProps, IncremarkContent, type IncremarkContentProps, IncremarkFootnotes, IncremarkHtmlElement, type IncremarkHtmlElementProps, IncremarkInline, type IncremarkInlineProps, type IncremarkProps, IncremarkRenderer, type IncremarkRendererProps, ThemeProvider, type ThemeProviderProps, type TypewriterControls, type TypewriterOptions, type UseBlockTransformerOptions, type UseBlockTransformerReturn, type UseIncremarkOptions, type UseIncremarkReturn, type UseLocaleReturn, useBlockTransformer, useDefinitions, useIncremark, useLocale };

package/dist/index.js

@@ -496,40 +496,8 @@ function useIncremark(options = {}) {
   };
 }
 
-// src/hooks/useDevTools.ts
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { createDevTools } from "@incremark/devtools";
-function useDevTools(incremark, options = {}) {
-  const devtoolsRef = useRef3(null);
-  const optionsRef = useRef3(options);
-  useEffect3(() => {
-    const devtools = createDevTools(optionsRef.current);
-    devtoolsRef.current = devtools;
-    incremark.parser.setOnChange((state) => {
-      const blocks = [
-        ...state.completedBlocks,
-        ...state.pendingBlocks
-      ];
-      devtools.update({
-        blocks,
-        completedBlocks: state.completedBlocks,
-        pendingBlocks: state.pendingBlocks,
-        markdown: state.markdown,
-        ast: state.ast,
-        isLoading: state.pendingBlocks.length > 0
-      });
-    });
-    devtools.mount();
-    return () => {
-      devtools.unmount();
-      incremark.parser.setOnChange(void 0);
-    };
-  }, [incremark.parser]);
-  return devtoolsRef.current;
-}
-
 // src/hooks/useBlockTransformer.ts
-import { useState as useState4, useCallback as useCallback4, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useState as useState4, useCallback as useCallback4, useRef as useRef3, useEffect as useEffect3 } from "react";
 import {
   createBlockTransformer as createBlockTransformer2
 } from "@incremark/core";
@@ -538,7 +506,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
   const [isProcessing, setIsProcessing] = useState4(false);
   const [isPaused, setIsPaused] = useState4(false);
   const [effect, setEffect] = useState4(options.effect ?? "none");
-  const transformerRef = useRef4(null);
+  const transformerRef = useRef3(null);
   if (!transformerRef.current) {
     transformerRef.current = createBlockTransformer2({
       ...options,
@@ -550,7 +518,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
     });
   }
   const transformer = transformerRef.current;
-  useEffect4(() => {
+  useEffect3(() => {
     transformer.push(sourceBlocks);
     const currentDisplaying = displayBlocks.find((b) => !b.isDisplayComplete);
     if (currentDisplaying) {
@@ -560,7 +528,7 @@ function useBlockTransformer(sourceBlocks, options = {}) {
       }
     }
   }, [sourceBlocks, transformer]);
-  useEffect4(() => {
+  useEffect3(() => {
     return () => {
       transformer.destroy();
     };
@@ -795,7 +763,7 @@ var IncremarkHtmlElement = ({ node }) => {
 };
 
 // src/components/IncremarkMath.tsx
-import { useState as useState5, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback5 } from "react";
+import { useState as useState5, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback5 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var IncremarkMath = ({
   node,
@@ -803,8 +771,8 @@ var IncremarkMath = ({
 }) => {
   const [renderedHtml, setRenderedHtml] = useState5("");
   const [isLoading, setIsLoading] = useState5(false);
-  const katexRef = useRef5(null);
-  const renderTimerRef = useRef5(null);
+  const katexRef = useRef4(null);
+  const renderTimerRef = useRef4(null);
   const isInline = node.type === "inlineMath";
   const formula = node.value;
   const doRender = useCallback5(async () => {
@@ -840,10 +808,10 @@ var IncremarkMath = ({
       doRender();
     }, renderDelay);
   }, [formula, renderDelay, doRender]);
-  useEffect5(() => {
+  useEffect4(() => {
     scheduleRender();
   }, [scheduleRender]);
-  useEffect5(() => {
+  useEffect4(() => {
     return () => {
       if (renderTimerRef.current) {
         clearTimeout(renderTimerRef.current);
@@ -1002,7 +970,7 @@ var IncremarkParagraph = ({ node }) => {
 import React9 from "react";
 
 // src/components/IncremarkCodeMermaid.tsx
-import { useState as useState6, useEffect as useEffect6, useRef as useRef6, useCallback as useCallback6 } from "react";
+import { useState as useState6, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback6 } from "react";
 import { GravityMermaid, LucideCode, LucideEye, LucideCopy, LucideCopyCheck } from "@incremark/icons";
 import { isClipboardAvailable } from "@incremark/shared";
 
@@ -1034,9 +1002,9 @@ var IncremarkCodeMermaid = ({
   const [mermaidSvg, setMermaidSvg] = useState6("");
   const [mermaidLoading, setMermaidLoading] = useState6(false);
   const [mermaidViewMode, setMermaidViewMode] = useState6("preview");
-  const mermaidRef = useRef6(null);
-  const mermaidTimerRef = useRef6(null);
-  const copyTimeoutRef = useRef6(null);
+  const mermaidRef = useRef5(null);
+  const mermaidTimerRef = useRef5(null);
+  const copyTimeoutRef = useRef5(null);
   const code = node.value;
   const toggleMermaidView = useCallback6(() => {
     setMermaidViewMode((prev) => prev === "preview" ? "source" : "preview");
@@ -1086,10 +1054,10 @@ var IncremarkCodeMermaid = ({
       doRenderMermaid();
     }, mermaidDelay);
   }, [code, mermaidDelay, doRenderMermaid]);
-  useEffect6(() => {
+  useEffect5(() => {
     scheduleRenderMermaid();
   }, [scheduleRenderMermaid]);
-  useEffect6(() => {
+  useEffect5(() => {
     return () => {
       if (mermaidTimerRef.current) {
         clearTimeout(mermaidTimerRef.current);
@@ -1136,7 +1104,7 @@ var IncremarkCodeMermaid = ({
 };
 
 // src/components/IncremarkCodeDefault.tsx
-import { useState as useState8, useEffect as useEffect8, useCallback as useCallback7, useRef as useRef8, useMemo as useMemo5 } from "react";
+import { useState as useState8, useEffect as useEffect7, useCallback as useCallback7, useRef as useRef7, useMemo as useMemo5 } from "react";
 import { LucideCopy as LucideCopy2, LucideCopyCheck as LucideCopyCheck2 } from "@incremark/icons";
 import { isClipboardAvailable as isClipboardAvailable2 } from "@incremark/shared";
 
@@ -1899,14 +1867,14 @@ function getTokenStyleObject(token) {
 }
 
 // src/components/CachedCodeRenderer.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState7, forwardRef, useImperativeHandle } from "react";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState7, forwardRef, useImperativeHandle } from "react";
 import { CodeToTokenTransformStream } from "shiki-stream";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var CachedCodeRenderer = forwardRef(
   function CachedCodeRenderer2({ code, lang, theme, highlighter, onStreamStart, onStreamEnd, onStreamError }, ref) {
     const [hasStreamError, setHasStreamError] = useState7(false);
     const [tokens, setTokens] = useState7([]);
-    const streamRef = useRef7({
+    const streamRef = useRef6({
       controller: null,
       index: 0,
       initialized: false,
@@ -1919,7 +1887,7 @@ var CachedCodeRenderer = forwardRef(
         streamRef.current.index = 0;
       }
     }));
-    useEffect7(() => {
+    useEffect6(() => {
       if (streamRef.current.initialized) return;
       streamRef.current.initialized = true;
       const textStream = new ReadableStream({
@@ -1973,7 +1941,7 @@ var CachedCodeRenderer = forwardRef(
       });
       streamRef.current.streamConsumed = true;
     }, []);
-    useEffect7(() => {
+    useEffect6(() => {
       const { controller, index } = streamRef.current;
       if (!controller || hasStreamError) return;
       if (code.length > index) {
@@ -2032,7 +2000,7 @@ var IncremarkCodeDefault = ({
   const shouldEnableHighlight = useMemo5(() => {
     return !disableHighlight && code && code.length > 0;
   }, [disableHighlight, code]);
-  useEffect8(() => {
+  useEffect7(() => {
     const loadLanguageIfNeeded = async () => {
       if (!shouldEnableHighlight) {
         return;
@@ -2063,7 +2031,7 @@ var IncremarkCodeDefault = ({
     };
     loadLanguageIfNeeded();
   }, [highlighterInfo, language, shouldEnableHighlight, initHighlighter]);
-  const copyTimeoutRef = useRef8(null);
+  const copyTimeoutRef = useRef7(null);
   const copyCode = useCallback7(async () => {
     if (!isClipboardAvailable2()) return;
     try {
@@ -2076,7 +2044,7 @@ var IncremarkCodeDefault = ({
     } catch {
     }
   }, [code]);
-  useEffect8(() => {
+  useEffect7(() => {
     return () => {
       if (copyTimeoutRef.current) {
         clearTimeout(copyTimeoutRef.current);
@@ -2497,7 +2465,8 @@ var IncremarkInternal = ({
 };
 
 // src/components/IncremarkContent.tsx
-import { useEffect as useEffect9, useRef as useRef9, useMemo as useMemo6, useCallback as useCallback8 } from "react";
+import { useEffect as useEffect8, useRef as useRef8, useMemo as useMemo6, useCallback as useCallback8 } from "react";
+import { generateParserId } from "@incremark/shared";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var IncremarkContent = (props) => {
   const {
@@ -2510,18 +2479,34 @@ var IncremarkContent = (props) => {
     isFinished = false,
     incremarkOptions,
     showBlockStatus,
-    pendingClass
+    pendingClass,
+    devtools,
+    devtoolsId,
+    devtoolsLabel
   } = props;
-  const initialOptionsRef = useRef9({
+  const initialOptionsRef = useRef8({
     gfm: true,
     htmlTree: true,
     containers: true,
     math: true,
     ...incremarkOptions
   });
-  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter, _definitionsContextValue } = useIncremark(initialOptionsRef.current);
-  const prevOptionsRef = useRef9(incremarkOptions);
-  useEffect9(() => {
+  const incremark = useIncremark(initialOptionsRef.current);
+  const { blocks, append, finalize, render, reset, updateOptions, isDisplayComplete, markdown, typewriter, _definitionsContextValue, parser } = incremark;
+  const parserIdRef = useRef8(devtoolsId || generateParserId());
+  useEffect8(() => {
+    if (devtools) {
+      devtools.register(parser, {
+        id: parserIdRef.current,
+        label: devtoolsLabel || parserIdRef.current
+      });
+      return () => {
+        devtools.unregister(parserIdRef.current);
+      };
+    }
+  }, [devtools, parser, devtoolsLabel]);
+  const prevOptionsRef = useRef8(incremarkOptions);
+  useEffect8(() => {
     const prev = prevOptionsRef.current;
     const current = incremarkOptions;
     if (prev === current) return;
@@ -2544,8 +2529,8 @@ var IncremarkContent = (props) => {
     }
   }, [incremarkOptions, updateOptions, typewriter]);
   const isStreamMode = useMemo6(() => typeof stream === "function", [stream]);
-  const prevContentRef = useRef9(void 0);
-  const isStreamingRef = useRef9(false);
+  const prevContentRef = useRef8(void 0);
+  const isStreamingRef = useRef8(false);
   const handleStreamInput = useCallback8(async () => {
     if (!stream || isStreamingRef.current) return;
     isStreamingRef.current = true;
@@ -2576,7 +2561,7 @@ var IncremarkContent = (props) => {
       render(newContent);
     }
   }, [append, render, reset]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (isStreamMode) {
       handleStreamInput();
     } else {
@@ -2584,7 +2569,7 @@ var IncremarkContent = (props) => {
     }
     prevContentRef.current = content;
   }, [content, isStreamMode, handleStreamInput, handleContentInput]);
-  useEffect9(() => {
+  useEffect8(() => {
     if (isFinished && content === markdown) {
       finalize();
     }
@@ -2606,8 +2591,8 @@ var IncremarkContent = (props) => {
 
 // src/components/AutoScrollContainer.tsx
 import {
-  useRef as useRef10,
-  useEffect as useEffect10,
+  useRef as useRef9,
+  useEffect as useEffect9,
   useCallback as useCallback9,
   useState as useState9,
   forwardRef as forwardRef2,
@@ -2623,10 +2608,10 @@ var AutoScrollContainer = forwardRef2(
     style,
     className
   }, ref) => {
-    const containerRef = useRef10(null);
+    const containerRef = useRef9(null);
     const [isUserScrolledUp, setIsUserScrolledUp] = useState9(false);
-    const lastScrollTopRef = useRef10(0);
-    const lastScrollHeightRef = useRef10(0);
+    const lastScrollTopRef = useRef9(0);
+    const lastScrollHeightRef = useRef9(0);
     const isNearBottom = useCallback9(() => {
       const container = containerRef.current;
       if (!container) return true;
@@ -2672,14 +2657,14 @@ var AutoScrollContainer = forwardRef2(
       lastScrollTopRef.current = scrollTop;
       lastScrollHeightRef.current = scrollHeight;
     }, [isNearBottom]);
-    useEffect10(() => {
+    useEffect9(() => {
       const container = containerRef.current;
       if (container) {
         lastScrollTopRef.current = container.scrollTop;
         lastScrollHeightRef.current = container.scrollHeight;
       }
     }, []);
-    useEffect10(() => {
+    useEffect9(() => {
       const container = containerRef.current;
       if (!container || !enabled) return;
       const observer = new MutationObserver(() => {
@@ -2726,7 +2711,7 @@ var AutoScrollContainer = forwardRef2(
 AutoScrollContainer.displayName = "AutoScrollContainer";
 
 // src/ThemeProvider.tsx
-import { useEffect as useEffect11, useRef as useRef11 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
 import { applyTheme } from "@incremark/theme";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var ThemeProvider = ({
@@ -2734,8 +2719,8 @@ var ThemeProvider = ({
   children,
   className = ""
 }) => {
-  const containerRef = useRef11(null);
-  useEffect11(() => {
+  const containerRef = useRef10(null);
+  useEffect10(() => {
     if (containerRef.current) {
       applyTheme(containerRef.current, theme);
     }
@@ -2800,7 +2785,6 @@ export {
   thematicBreakPlugin,
   useBlockTransformer,
   useDefinitions,
-  useDevTools,
   useIncremark,
   useLocale,
   zhCNShared as zhCN

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incremark/react",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "license": "MIT",
   "description": "High-performance streaming markdown renderer for React ecosystem.",
   "type": "module",
@@ -21,16 +21,16 @@
     "mermaid": "^10.0.0 || ^11.0.0",
     "katex": "^0.16.0",
     "react": ">=18.0.0",
-    "@incremark/core": "0.3.3"
+    "@incremark/core": "0.3.5"
   },
   "dependencies": {
     "@antfu/utils": "^9.3.0",
     "shiki": "^3.20.0",
     "shiki-stream": "^0.1.4",
-    "@incremark/devtools": "0.3.3",
-    "@incremark/icons": "0.3.3",
-    "@incremark/theme": "0.3.3",
-    "@incremark/shared": "0.3.3"
+    "@incremark/devtools": "0.3.5",
+    "@incremark/shared": "0.3.5",
+    "@incremark/icons": "0.3.5",
+    "@incremark/theme": "0.3.5"
   },
   "devDependencies": {
     "@shikijs/core": "^3.21.0",