react-native-nitro-markdown 0.4.3 → 0.5.1

package/src/markdown-stream.tsx

@@ -1,6 +1,54 @@
-import { useState, useEffect, useRef, startTransition, type FC } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  startTransition,
+  type FC,
+} from "react";
+import type { MarkdownNode } from "./headless";
 import { Markdown, type MarkdownProps } from "./markdown";
 import type { MarkdownSession } from "./specs/MarkdownSession.nitro";
+import { getNextStreamAst, parseMarkdownAst } from "./utils/incremental-ast";
+
+const normalizeOffset = (value: number): number | null => {
+  if (!Number.isFinite(value)) return null;
+  if (value <= 0) return 0;
+  return Math.floor(value);
+};
+
+const resolveStreamText = ({
+  forceFullSync,
+  pendingFrom,
+  pendingTo,
+  previousText,
+  session,
+}: {
+  forceFullSync: boolean;
+  pendingFrom: number | null;
+  pendingTo: number | null;
+  previousText: string;
+  session: MarkdownSession;
+}): string => {
+  if (forceFullSync || pendingFrom === null || pendingTo === null) {
+    return session.getAllText();
+  }
+
+  if (pendingTo < pendingFrom) {
+    return session.getAllText();
+  }
+
+  if (pendingFrom === previousText.length) {
+    const appendedChunk = session.getTextRange(pendingFrom, pendingTo);
+    return `${previousText}${appendedChunk}`;
+  }
+
+  if (pendingFrom === 0) {
+    return session.getTextRange(0, pendingTo);
+  }
+
+  return session.getAllText();
+};
 
 export type MarkdownStreamProps = {
   /**
@@ -23,7 +71,12 @@ export type MarkdownStreamProps = {
    * Useful when you want to prioritize user interactions over stream renders.
    */
   useTransitionUpdates?: boolean;
-} & Omit<MarkdownProps, "children">;
+  /**
+   * Enable incremental AST updates for append-only streams.
+   * Automatically falls back to full parse when updates are not safely mergeable.
+   */
+  incrementalParsing?: boolean;
+} & Omit<MarkdownProps, "children" | "sourceAst">;
 
 /**
  * A component that renders streaming Markdown from a MarkdownSession.
@@ -34,20 +87,55 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
   updateIntervalMs = 50,
   updateStrategy = "interval",
   useTransitionUpdates = false,
+  incrementalParsing = true,
+  options,
+  plugins,
   ...props
 }) => {
-  const [text, setText] = useState(() => session.getAllText());
+  const parseText = useCallback(
+    (text: string): MarkdownNode => parseMarkdownAst(text, options),
+    [options],
+  );
+  const createEmptyAst = (): MarkdownNode => ({
+    type: "document",
+    children: [],
+  });
+  const initialText = session.getAllText();
+  const hasBeforeParsePlugins =
+    plugins?.some((plugin) => typeof plugin.beforeParse === "function") ??
+    false;
+  const [renderState, setRenderState] = useState(() => ({
+    text: initialText,
+    ast: hasBeforeParsePlugins ? createEmptyAst() : parseText(initialText),
+  }));
+  const renderStateRef = useRef(renderState);
   const pendingUpdateRef = useRef(false);
+  const pendingFromRef = useRef<number | null>(null);
+  const pendingToRef = useRef<number | null>(null);
+  const forceFullSyncRef = useRef(false);
   const updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rafRef = useRef<number | null>(null);
-  const lastEmittedRef = useRef(text);
+  const allowIncremental = incrementalParsing && !hasBeforeParsePlugins;
+
+  useEffect(() => {
+    renderStateRef.current = renderState;
+  }, [renderState]);
 
   useEffect(() => {
-    // Ensure initial state is synced
     const initialText = session.getAllText();
-    setText(initialText);
-    lastEmittedRef.current = initialText;
+    const initialState = {
+      text: initialText,
+      ast: hasBeforeParsePlugins ? createEmptyAst() : parseText(initialText),
+    };
+    pendingUpdateRef.current = false;
+    pendingFromRef.current = null;
+    pendingToRef.current = null;
+    forceFullSyncRef.current = false;
+    renderStateRef.current = initialState;
+    setRenderState(initialState);
+  }, [hasBeforeParsePlugins, parseText, session]);
 
+  useEffect(() => {
     const flushUpdate = () => {
       updateTimerRef.current = null;
       if (rafRef.current !== null) {
@@ -57,16 +145,44 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
       if (!pendingUpdateRef.current) return;
       pendingUpdateRef.current = false;
 
-      const latest = session.getAllText();
-      if (latest === lastEmittedRef.current) return;
-      lastEmittedRef.current = latest;
+      const previousState = renderStateRef.current;
+      const pendingFrom = pendingFromRef.current;
+      const pendingTo = pendingToRef.current;
+      const forceFullSync = forceFullSyncRef.current;
+      pendingFromRef.current = null;
+      pendingToRef.current = null;
+      forceFullSyncRef.current = false;
+
+      const latest = resolveStreamText({
+        forceFullSync,
+        pendingFrom,
+        pendingTo,
+        previousText: previousState.text,
+        session,
+      });
+      if (latest === previousState.text) return;
+
+      const nextAst = hasBeforeParsePlugins
+        ? previousState.ast
+        : getNextStreamAst({
+            allowIncremental,
+            nextText: latest,
+            options,
+            previousAst: previousState.ast,
+            previousText: previousState.text,
+          });
+      const nextState = {
+        text: latest,
+        ast: nextAst,
+      };
+      renderStateRef.current = nextState;
 
       if (useTransitionUpdates) {
         startTransition(() => {
-          setText(latest);
+          setRenderState(nextState);
         });
       } else {
-        setText(latest);
+        setRenderState(nextState);
       }
     };
 
@@ -83,7 +199,22 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
       }
     };
 
-    const unsubscribe = session.addListener(() => {
+    const unsubscribe = session.addListener((from, to) => {
+      const nextFrom = normalizeOffset(from);
+      const nextTo = normalizeOffset(to);
+
+      if (nextFrom === null || nextTo === null || nextTo < nextFrom) {
+        forceFullSyncRef.current = true;
+      } else {
+        const currentFrom = pendingFromRef.current;
+        const currentTo = pendingToRef.current;
+
+        pendingFromRef.current =
+          currentFrom === null ? nextFrom : Math.min(currentFrom, nextFrom);
+        pendingToRef.current =
+          currentTo === null ? nextTo : Math.max(currentTo, nextTo);
+      }
+
       pendingUpdateRef.current = true;
       scheduleFlush();
     });
@@ -99,7 +230,24 @@ export const MarkdownStream: FC<MarkdownStreamProps> = ({
         rafRef.current = null;
       }
     };
-  }, [session, updateIntervalMs, updateStrategy, useTransitionUpdates]);
+  }, [
+    allowIncremental,
+    hasBeforeParsePlugins,
+    options,
+    session,
+    updateIntervalMs,
+    updateStrategy,
+    useTransitionUpdates,
+  ]);
 
-  return <Markdown {...props}>{text}</Markdown>;
+  return (
+    <Markdown
+      {...props}
+      options={options}
+      plugins={plugins}
+      sourceAst={hasBeforeParsePlugins ? undefined : renderState.ast}
+    >
+      {renderState.text}
+    </Markdown>
+  );
 };