@difizen/libro-rendermime 0.3.37 → 0.3.38

package/es/components/text-render.d.ts

@@ -3,8 +3,10 @@ import React from 'react';
 import './index.less';
 export declare const RawTextRender: React.FC<{
     model: BaseOutputView;
+    refreshKey?: string;
 }>;
 export declare const TextRender: React.NamedExoticComponent<{
     model: BaseOutputView;
+    refreshKey?: string | undefined;
 }>;
 //# sourceMappingURL=text-render.d.ts.map

package/es/components/text-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-render.d.ts","sourceRoot":"","sources":["../../src/components/text-render.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,cAAc,CAAC;AAWtB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAqJ7D,CAAC;AAEF,eAAO,MAAM,UAAU;WAvJuB,cAAc;EAuJT,CAAC"}
+{"version":3,"file":"text-render.d.ts","sourceRoot":"","sources":["../../src/components/text-render.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,cAAc,CAAC;AAWtB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IACnC,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CA2IA,CAAC;AAEF,eAAO,MAAM,UAAU;WA/Id,cAAc;;EA+I4B,CAAC"}

package/es/components/text-render.js

@@ -23,7 +23,8 @@ function getLastThreeAfterFirstTwo(arr) {
   return arr.slice(startIndex);
 }
 export var RawTextRender = function RawTextRender(props) {
-  var model = props.model;
+  var model = props.model,
+    refreshKey = props.refreshKey;
   var renderTextRef = useRef(null);
   var renderTextContainerRef = useRef(null);
   var defaultRenderMime = useInject(RenderMimeRegistry);
@@ -58,18 +59,11 @@ export var RawTextRender = function RawTextRender(props) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mimeType, dataContent]);
+  }, [mimeType, dataContent, refreshKey]);
   var content = null;
   if (isLargeOutputDisplay) {
-    content = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "libro-text-render",
-        ref: renderTextRef,
-        style: {
-          overflowY: 'auto',
-          maxHeight: 'unset'
-        }
-      }), model.raw['display_text'] && /*#__PURE__*/_jsxs("div", {
+    content = /*#__PURE__*/_jsx(_Fragment, {
+      children: model.raw['display_text'] && /*#__PURE__*/_jsxs("div", {
         className: "libro-text-display-action-container",
         children: [/*#__PURE__*/_jsx("span", {
           children: "\u8F93\u51FA\u5DF2\u88AB\u622A\u65AD\uFF0C\u70B9\u51FB\u53EF\u5728\u6EDA\u52A8\u5BB9\u5668\u5185"
@@ -99,18 +93,11 @@ export var RawTextRender = function RawTextRender(props) {
             children: "\u6587\u672C\u7F16\u8F91\u5668"
           }), "\u4E2D\u6253\u5F00"]
         })]
-      })]
+      })
     });
   } else {
-    content = /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "libro-text-render",
-        ref: renderTextRef,
-        style: {
-          overflowY: 'auto',
-          maxHeight: '420px'
-        }
-      }), model.raw['display_text'] && /*#__PURE__*/_jsxs("div", {
+    content = /*#__PURE__*/_jsx(_Fragment, {
+      children: model.raw['display_text'] && /*#__PURE__*/_jsxs("div", {
         className: "libro-text-display-action-container",
         children: [/*#__PURE__*/_jsx("span", {
           children: "\u5F53\u524D\u5904\u4E8E\u6EDA\u52A8\u67E5\u770B\uFF0C\u70B9\u51FB\u53EF"
@@ -122,13 +109,20 @@ export var RawTextRender = function RawTextRender(props) {
           className: "libro-text-display-action",
           children: "\u622A\u65AD\u67E5\u770B"
         })]
-      })]
+      })
     });
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: "libro-text-render-container",
     ref: renderTextContainerRef,
-    children: content
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "libro-text-render",
+      ref: renderTextRef,
+      style: {
+        overflowY: 'auto',
+        maxHeight: isLargeOutputDisplay ? 'unset' : '420px'
+      }
+    }), content]
   });
 };
 export var TextRender = /*#__PURE__*/React.memo(RawTextRender);

package/es/renderers.d.ts

@@ -1,11 +1,15 @@
 import type { IRenderHTMLOptions, IRenderImageOptions, IRenderMarkdownOptions, IRenderSVGOptions, IRenderTextOptions } from './rendermime-protocol.js';
+export declare function disposeHost(host: HTMLElement): void;
 /**
  * renderText
  * - 使用 autolinkRanges 得到全局的链接区间信息（start/end/url）。
  * - 在脱离文档的 parsed fragment（template.content）上按子节点边界切片，
- *   仅创建必要的 Text / shallow-clone element / <a> 节点。
+ * - 仅创建必要的 Text / shallow-clone element / <a> 节点。
  * - 对跨子节点的链接，使用 pendingAnchor 把分片累计到同一个 <a>，直到 range 结束。
- * - 最后一次性将构建好的 DocumentFragment 插回 pre 中，减少重排与 GC 压力。
+ * - 若检测到本次 data 是对上次 prevData 的 append，则只处理并 append 新增部分（增量路径）；
+ * - 否则视为非追加（首次渲染或变更），进行全量重建，并尽量保持用户视口位置；
+ * - 使用 rAF 批量追加以合并高频调用，避免频繁重排；
+ * - 在追加时只有用户接近底部才自动滚动，否则保持当前位置以便用户查看历史输出。
  */
 export declare function renderText(options: IRenderTextOptions): Promise<void>;
 /**

package/es/renderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAWlC;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAwIrE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAqCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuErE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CA+BnE;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAyBnF"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../src/renderers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAkElC,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,QAgB5C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAsSrE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAqCvE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuErE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,CA+BnE;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAyBnF"}

package/es/renderers.js

@@ -13,13 +13,81 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { concatMultilineString } from '@difizen/libro-common';
 import { ansiSpan, autolinkRanges, createAnchorForUrl, evalInnerHTMLScriptTags, handleDefaults, handleUrls, pieceFromNodeSlice } from "./rendermime-utils.js";
 
+// module-level state: per-host streaming render state
+
+var hostStates = new WeakMap();
+
+// Threshold in px to consider "user at bottom" (自动滚动触发阈值)
+var AUTO_SCROLL_THRESHOLD = 50;
+
+// Helper: is the user currently at (or near) the bottom of the pre container?
+function isUserAtBottom(pre) {
+  var threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AUTO_SCROLL_THRESHOLD;
+  if (pre.scrollHeight <= pre.clientHeight) {
+    return true;
+  }
+  return pre.scrollHeight - (pre.scrollTop + pre.clientHeight) <= threshold;
+}
+
+// Schedule and perform append in next animation frame (batching multiple appends)
+function scheduleAppend(host) {
+  var st = hostStates.get(host);
+  if (!st) {
+    return;
+  }
+  if (st.scheduled) {
+    return;
+  }
+  st.scheduled = true;
+
+  // capture whether to auto-scroll at the moment of scheduling
+  var pre = st.pre;
+  var shouldAutoAtSchedule = isUserAtBottom(pre);
+  st.rafId = requestAnimationFrame(function () {
+    st.scheduled = false;
+    if (!st.pendingFrag) {
+      return;
+    }
+    try {
+      pre.appendChild(st.pendingFrag);
+      if (shouldAutoAtSchedule) {
+        pre.scrollTop = pre.scrollHeight;
+      }
+    } finally {
+      st.pendingFrag = null;
+    }
+  });
+}
+
+// 清理函数：由上层在 host 不再使用时调用
+export function disposeHost(host) {
+  var st = hostStates.get(host);
+  if (!st) {
+    return;
+  }
+  // 取消未执行的 rAF
+  if (st.rafId !== null) {
+    cancelAnimationFrame(st.rafId);
+    st.rafId = null;
+  }
+  // 丢弃 pending fragment 引用（允许 GC 回收其内部节点）
+  st.pendingFrag = null;
+  // 清除其它资源（如果有 event listeners、workers 等也在这里处理）
+  // e.g. if (st.worker) st.worker.terminate();
+  // 从 WeakMap 删除（可选，WeakMap 的条目在 key 不再可达时会自动回收）
+  hostStates.delete(host);
+}
+
 /**
  * renderText
  * - 使用 autolinkRanges 得到全局的链接区间信息（start/end/url）。
  * - 在脱离文档的 parsed fragment（template.content）上按子节点边界切片，
- *   仅创建必要的 Text / shallow-clone element / <a> 节点。
+ * - 仅创建必要的 Text / shallow-clone element / <a> 节点。
  * - 对跨子节点的链接，使用 pendingAnchor 把分片累计到同一个 <a>，直到 range 结束。
- * - 最后一次性将构建好的 DocumentFragment 插回 pre 中，减少重排与 GC 压力。
+ * - 若检测到本次 data 是对上次 prevData 的 append，则只处理并 append 新增部分（增量路径）；
+ * - 否则视为非追加（首次渲染或变更），进行全量重建，并尽量保持用户视口位置；
+ * - 使用 rAF 批量追加以合并高频调用，避免频繁重排；
+ * - 在追加时只有用户接近底部才自动滚动，否则保持当前位置以便用户查看历史输出。
  */
 export function renderText(options) {
   var host = options.host,
@@ -27,40 +95,177 @@ export function renderText(options) {
     source = options.source,
     mimeType = options.mimeType;
   var data = concatMultilineString(source);
-
-  // 对文本做 ansi -> span 的转换并 sanitize（仅允许 <span>）
-  var content = sanitizer.sanitize(ansiSpan(data), {
-    allowedTags: ['span']
-  });
   if (mimeType === 'application/vnd.jupyter.stderr') {
     host.setAttribute('data-mime-type', 'application/vnd.jupyter.stderr');
   }
 
-  // 确保存在 <pre>，但不要马上把 innerHTML 写入实际文档（我们将在脱离文档的 fragment 上操作）
+  // 确保存在 <pre> 且为 host 的子元素（只在首次创建时 append）
   var pre = host.querySelector('pre');
   if (!pre) {
     pre = document.createElement('pre');
     host.appendChild(pre);
+  } else if (pre.parentElement !== host) {
+    // 如果 pre 被移动过，确保再次挂回 host（避免每次 render 都移动）
+    host.appendChild(pre);
   }
 
-  // 使用 template 元素来解析 HTML，但 template.content 尚未插入到文档中 -> 不触发重排
-  var tpl = document.createElement('template');
-  tpl.innerHTML = content;
-  var parsedFrag = tpl.content;
+  // 获取或初始化该 host 的状态
+  var st = hostStates.get(host);
+  if (!st) {
+    st = {
+      pre: pre,
+      prevData: '',
+      pendingFrag: null,
+      scheduled: false,
+      rafId: null
+    };
+    hostStates.set(host, st);
+  } else {
+    st.pre = pre;
+  }
 
-  // 全文文本（用于按字符位置计算 ranges）
-  var fullText = parsedFrag.textContent || '';
-  if (!fullText) {
-    // 若没有文本，清空并返回（保持 class）
+  // 若 data 为空，则立即清空并返回
+  if (!data) {
+    st.prevData = '';
+    st.pendingFrag = null;
+    st.scheduled = false;
     pre.innerHTML = '';
     host.classList.add('libro-text-render');
     return Promise.resolve(undefined);
   }
 
-  // 计算链接 ranges
-  var ranges = autolinkRanges(fullText);
+  // 判定是否为“追加”场景（本次 data 以 prevData 为前缀）
+  var prevData = st.prevData || '';
+  var isAppend = prevData.length > 0 && data.startsWith(prevData);
+  if (isAppend) {
+    var appendedData = data.slice(prevData.length);
+    if (appendedData.length === 0) {
+      // 无新增内容
+      return Promise.resolve(undefined);
+    }
+
+    // 对新增内容做 ansi->span 转换并 sanitize（仅允许 span）
+    var appendedContent = sanitizer.sanitize(ansiSpan(appendedData), {
+      allowedTags: ['span']
+    });
+
+    // 解析为脱离文档的 fragment（不会触发回流）
+    var tpl = document.createElement('template');
+    tpl.innerHTML = appendedContent;
+    var appendedFrag = tpl.content;
+
+    // 对 appendedFrag 的文本执行链接检测（基于 autolinkRanges）
+    // 注意：此处使用 appendedFrag.textContent（仅针对新增片段）
+    var appendedText = appendedFrag.textContent || '';
+    var _ranges = appendedText ? autolinkRanges(appendedText) : [];
+
+    // 根据 ranges 构造要追加到 DOM 的 outFrag（可包含文本/浅 cloned spans/anchor）
+    var _outFrag = document.createDocumentFragment();
+    var _pendingAnchor = null;
+    var _rangeIdx = 0;
+    var _globalOffset = 0;
+    var _childNodes = Array.from(appendedFrag.childNodes);
+    for (var ni = 0; ni < _childNodes.length; ni++) {
+      var node = _childNodes[ni];
+      var nodeText = node.textContent || '';
+      var nodeLen = nodeText.length;
+      if (nodeLen === 0) {
+        continue;
+      }
+      var localPos = 0;
+      while (localPos < nodeLen) {
+        var absPos = _globalOffset + localPos;
+        // 将 rangeIdx 推到第一个可能与当前绝对位置相关的 range 上
+        while (_rangeIdx < _ranges.length && _ranges[_rangeIdx].end <= absPos) {
+          _rangeIdx++;
+        }
+        var curRange = _rangeIdx < _ranges.length ? _ranges[_rangeIdx] : null;
+        if (_pendingAnchor) {
+          // 当前有未完成的 anchor（链接跨节点）：尽量消费本节点的部分
+          var take = Math.min(nodeLen - localPos, (curRange ? curRange.end : absPos) - absPos);
+          var piece = pieceFromNodeSlice(node, localPos, localPos + take);
+          _pendingAnchor.appendChild(piece);
+          localPos += take;
+
+          // 若到达当前 range 的结尾，则把 pendingAnchor 闭合并追加
+          if (curRange && _globalOffset + localPos >= curRange.end) {
+            _outFrag.appendChild(_pendingAnchor);
+            _pendingAnchor = null;
+            _rangeIdx++;
+          }
+          continue;
+        }
+
+        // 若没有 pendingAnchor，判断当前片段是否是普通文本或链接起始处
+        if (!curRange || curRange.start >= _globalOffset + nodeLen) {
+          // 本节点剩余部分没有链接，全部作为普通片段
+          var _piece = pieceFromNodeSlice(node, localPos, nodeLen);
+          _outFrag.appendChild(_piece);
+          localPos = nodeLen;
+        } else if (curRange.start > absPos) {
+          // 链接在当前节点后面一段位置开始：先把中间普通文本片段追加
+          var until = Math.min(nodeLen, curRange.start - _globalOffset);
+          var _piece2 = pieceFromNodeSlice(node, localPos, until);
+          _outFrag.appendChild(_piece2);
+          localPos = until;
+        } else {
+          // 当前绝对位置位于链接范围内：创建 anchor 并消费该链接在当前节点的部分
+          _pendingAnchor = createAnchorForUrl(curRange.url);
+          var _take = Math.min(nodeLen - localPos, curRange.end - absPos);
+          var _piece3 = pieceFromNodeSlice(node, localPos, localPos + _take);
+          _pendingAnchor.appendChild(_piece3);
+          localPos += _take;
+
+          // 若链接在此节点内结束，立即关闭并追加
+          if (_globalOffset + localPos >= curRange.end) {
+            _outFrag.appendChild(_pendingAnchor);
+            _pendingAnchor = null;
+            _rangeIdx++;
+          }
+        }
+      } // end while localPos
+
+      _globalOffset += nodeLen;
+    } // end for nodes
+
+    if (_pendingAnchor) {
+      _outFrag.appendChild(_pendingAnchor);
+      _pendingAnchor = null;
+    }
+
+    // 将 outFrag 合并到 host 状态的 pendingFrag 中，以便批量追加
+    if (!st.pendingFrag) {
+      st.pendingFrag = document.createDocumentFragment();
+    }
+    Array.from(_outFrag.childNodes).forEach(function (n) {
+      return st.pendingFrag.appendChild(n);
+    });
+
+    // 更新 prevData 为最新的整个 data（提交此次 append）
+    st.prevData = data;
+
+    // 安排 rAF 批量追加（若已安排则无副作用）
+    scheduleAppend(host);
+    host.classList.add('libro-text-render');
+    return Promise.resolve(undefined);
+  }
+
+  // ---------- 非追加（首次渲染或全量替换）路径 ----------
+  // 记录替换前的滚动信息，以便替换后尽量保持视图位置
+  var prevScrollTop = pre.scrollTop;
+  var prevScrollHeight = pre.scrollHeight;
+
+  // 对整个 data 做 ansi->span 转换并 sanitize（脱离文档）
+  var content = sanitizer.sanitize(ansiSpan(data), {
+    allowedTags: ['span']
+  });
+  var tplFull = document.createElement('template');
+  tplFull.innerHTML = content;
+  var parsedFrag = tplFull.content;
 
-  // 准备输出 fragment（最终将一次性 append 到 pre）
+  // 基于全文进行链接检测并构造 outFrag（逻辑与增量路径一致）
+  var fullText = parsedFrag.textContent || '';
+  var ranges = fullText ? autolinkRanges(fullText) : [];
   var outFrag = document.createDocumentFragment();
 
   // pendingAnchor 用于处理链接跨多个原始子节点的情形：
@@ -73,33 +278,33 @@ export function renderText(options) {
   // 遍历 parsedFrag 的顶层子节点（这些通常是由 sanitizer/ansiSpan 产生的 span/text 节点）
   var globalOffset = 0;
   var childNodes = Array.from(parsedFrag.childNodes);
-  for (var ni = 0; ni < childNodes.length; ni++) {
-    var node = childNodes[ni];
-    var nodeText = node.textContent || '';
-    var nodeLen = nodeText.length;
-    if (nodeLen === 0) {
+  for (var _ni = 0; _ni < childNodes.length; _ni++) {
+    var _node = childNodes[_ni];
+    var _nodeText = _node.textContent || '';
+    var _nodeLen = _nodeText.length;
+    if (_nodeLen === 0) {
       // 空节点直接跳过（同时 pendingAnchor 不受影响）
       continue;
     }
-    var localPos = 0; // 当前在该节点内的偏移
-    while (localPos < nodeLen) {
-      var absPos = globalOffset + localPos;
+    var _localPos = 0; // 当前在该节点内的偏移
+    while (_localPos < _nodeLen) {
+      var _absPos = globalOffset + _localPos;
       // 跳过已经结束在当前位置之前的 ranges（将 rangeIdx 推到第一个可能相关的 range）
-      while (rangeIdx < ranges.length && ranges[rangeIdx].end <= absPos) {
+      while (rangeIdx < ranges.length && ranges[rangeIdx].end <= _absPos) {
         rangeIdx++;
       }
-      var curRange = rangeIdx < ranges.length ? ranges[rangeIdx] : null;
+      var _curRange = rangeIdx < ranges.length ? ranges[rangeIdx] : null;
 
       // 如果当前有正在构建的 pendingAnchor（链接已经开始但尚未结束）
       if (pendingAnchor) {
         // 计算本次可以从该节点中“消费”的长度（尽量多取，直到链接结束或节点结束）
-        var take = Math.min(nodeLen - localPos, (curRange ? curRange.end : absPos) - absPos);
-        var piece = pieceFromNodeSlice(node, localPos, localPos + take);
-        pendingAnchor.appendChild(piece);
-        localPos += take;
+        var _take2 = Math.min(_nodeLen - _localPos, (_curRange ? _curRange.end : _absPos) - _absPos);
+        var _piece4 = pieceFromNodeSlice(_node, _localPos, _localPos + _take2);
+        pendingAnchor.appendChild(_piece4);
+        _localPos += _take2;
 
         // 若到达了当前 range 的结束位置，则关闭 pendingAnchor
-        if (curRange && globalOffset + localPos >= curRange.end) {
+        if (_curRange && globalOffset + _localPos >= _curRange.end) {
           outFrag.appendChild(pendingAnchor);
           pendingAnchor = null;
           rangeIdx++; // 当前 range 完成，推进到下一个
@@ -109,28 +314,28 @@ export function renderText(options) {
       }
 
       // 没有 pendingAnchor：决定当前段是普通文本还是链接起点
-      if (!curRange || curRange.start >= globalOffset + nodeLen) {
+      if (!_curRange || _curRange.start >= globalOffset + _nodeLen) {
         // 当前剩余的节点内容中，没有链接开始 -> 全部作为普通片段
-        var _piece = pieceFromNodeSlice(node, localPos, nodeLen);
-        outFrag.appendChild(_piece);
-        localPos = nodeLen;
-      } else if (curRange.start > absPos) {
+        var _piece5 = pieceFromNodeSlice(_node, _localPos, _nodeLen);
+        outFrag.appendChild(_piece5);
+        _localPos = _nodeLen;
+      } else if (_curRange.start > _absPos) {
         // 有链接，但还没到链接起点：把从 localPos 到链接起点之前的文本作为普通片段
-        var until = Math.min(nodeLen, curRange.start - globalOffset);
-        var _piece2 = pieceFromNodeSlice(node, localPos, until);
-        outFrag.appendChild(_piece2);
-        localPos = until;
+        var _until = Math.min(_nodeLen, _curRange.start - globalOffset);
+        var _piece6 = pieceFromNodeSlice(_node, _localPos, _until);
+        outFrag.appendChild(_piece6);
+        _localPos = _until;
       } else {
         // 当前绝对位置处于链接范围之内（curRange.start <= absPos < curRange.end）
         // 新建一个 anchor 并把该节点中属于该链接的部分 append 到 anchor
-        pendingAnchor = createAnchorForUrl(curRange.url);
-        var _take = Math.min(nodeLen - localPos, curRange.end - absPos);
-        var _piece3 = pieceFromNodeSlice(node, localPos, localPos + _take);
-        pendingAnchor.appendChild(_piece3);
-        localPos += _take;
+        pendingAnchor = createAnchorForUrl(_curRange.url);
+        var _take3 = Math.min(_nodeLen - _localPos, _curRange.end - _absPos);
+        var _piece7 = pieceFromNodeSlice(_node, _localPos, _localPos + _take3);
+        pendingAnchor.appendChild(_piece7);
+        _localPos += _take3;
 
         // 如果这个 range 在当前节点内就结束，则立即关闭 pendingAnchor
-        if (globalOffset + localPos >= curRange.end) {
+        if (globalOffset + _localPos >= _curRange.end) {
           outFrag.appendChild(pendingAnchor);
           pendingAnchor = null;
           rangeIdx++;
@@ -138,7 +343,7 @@ export function renderText(options) {
         // 否则 pendingAnchor 会在后续节点继续被填充
       }
     }
-    globalOffset += nodeLen;
+    globalOffset += _nodeLen;
   }
 
   // 如果循环结束后仍有 pendingAnchor（理论上不应发生，但以防万一），追加它
@@ -147,9 +352,22 @@ export function renderText(options) {
     pendingAnchor = null;
   }
 
-  // 一次性替换 pre 的内容：先清空再 append（减少中间重排）
-  pre.innerHTML = '';
-  pre.appendChild(outFrag);
+  // 在下一帧中执行 DOM 替换以避免同步布局抖动
+  requestAnimationFrame(function () {
+    pre.innerHTML = '';
+    pre.appendChild(outFrag);
+
+    // 若用户在底部则滚到底，否则按高度差修正 scrollTop 保持视图不变
+    if (isUserAtBottom(pre)) {
+      pre.scrollTop = pre.scrollHeight;
+    } else {
+      var newScrollHeight = pre.scrollHeight;
+      pre.scrollTop = Math.max(0, prevScrollTop + (newScrollHeight - prevScrollHeight));
+    }
+  });
+
+  // 更新 prevData（记录当前已渲染的原始字符串）
+  st.prevData = data;
   host.classList.add('libro-text-render');
   return Promise.resolve(undefined);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-rendermime",
-  "version": "0.3.37",
+  "version": "0.3.38",
   "description": "",
   "keywords": [
     "libro",
@@ -32,9 +32,9 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-common": "^0.3.37",
-    "@difizen/libro-core": "^0.3.37",
-    "@difizen/libro-markdown": "^0.3.37",
+    "@difizen/libro-common": "^0.3.38",
+    "@difizen/libro-core": "^0.3.38",
+    "@difizen/libro-markdown": "^0.3.38",
     "@difizen/mana-app": "latest",
     "lodash.escape": "^4.0.1"
   },

package/src/components/text-render.tsx

@@ -15,10 +15,11 @@ function getLastThreeAfterFirstTwo(arr: string[]): string[] {
   return arr.slice(startIndex);
 }
 
-export const RawTextRender: React.FC<{ model: BaseOutputView }> = (props: {
+export const RawTextRender: React.FC<{
   model: BaseOutputView;
-}) => {
-  const { model } = props;
+  refreshKey?: string;
+}> = (props: { model: BaseOutputView; refreshKey?: string }) => {
+  const { model, refreshKey } = props;
   const renderTextRef = useRef<HTMLDivElement>(null);
   const renderTextContainerRef = useRef<HTMLDivElement>(null);
   const defaultRenderMime = useInject<IRenderMimeRegistry>(RenderMimeRegistry);
@@ -74,21 +75,13 @@ export const RawTextRender: React.FC<{ model: BaseOutputView }> = (props: {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mimeType, dataContent]);
+  }, [mimeType, dataContent, refreshKey]);
 
   let content = null;
 
   if (isLargeOutputDisplay) {
     content = (
       <>
-        <div
-          className="libro-text-render"
-          ref={renderTextRef}
-          style={{
-            overflowY: 'auto',
-            maxHeight: 'unset',
-          }}
-        />
         {model.raw['display_text'] && (
           <div className="libro-text-display-action-container">
             <span>输出已被截断，点击可在滚动容器内</span>
@@ -133,14 +126,6 @@ export const RawTextRender: React.FC<{ model: BaseOutputView }> = (props: {
   } else {
     content = (
       <>
-        <div
-          className="libro-text-render"
-          ref={renderTextRef}
-          style={{
-            overflowY: 'auto',
-            maxHeight: '420px',
-          }}
-        />
         {model.raw['display_text'] && (
           <div className="libro-text-display-action-container">
             <span>当前处于滚动查看，点击可</span>
@@ -161,6 +146,14 @@ export const RawTextRender: React.FC<{ model: BaseOutputView }> = (props: {
 
   return (
     <div className="libro-text-render-container" ref={renderTextContainerRef}>
+      <div
+        className="libro-text-render"
+        ref={renderTextRef}
+        style={{
+          overflowY: 'auto',
+          maxHeight: isLargeOutputDisplay ? 'unset' : '420px',
+        }}
+      />
       {content}
     </div>
   );

package/src/renderers.ts

@@ -17,52 +17,273 @@ import {
   pieceFromNodeSlice,
 } from './rendermime-utils.js';
 
+// module-level state: per-host streaming render state
+type HostState = {
+  pre: HTMLPreElement;
+  prevData: string; // previously rendered raw data (concatMultilineString result)
+  pendingFrag: DocumentFragment | null;
+  scheduled: boolean;
+  rafId: number | null; // 保存 requestAnimationFrame 返回值，便于取消
+};
+
+const hostStates = new WeakMap<HTMLElement, HostState>();
+
+// Threshold in px to consider "user at bottom" (自动滚动触发阈值)
+const AUTO_SCROLL_THRESHOLD = 50;
+
+// Helper: is the user currently at (or near) the bottom of the pre container?
+function isUserAtBottom(pre: HTMLElement, threshold = AUTO_SCROLL_THRESHOLD): boolean {
+  if (pre.scrollHeight <= pre.clientHeight) {
+    return true;
+  }
+  return pre.scrollHeight - (pre.scrollTop + pre.clientHeight) <= threshold;
+}
+
+// Schedule and perform append in next animation frame (batching multiple appends)
+function scheduleAppend(host: HTMLElement) {
+  const st = hostStates.get(host);
+  if (!st) {
+    return;
+  }
+  if (st.scheduled) {
+    return;
+  }
+  st.scheduled = true;
+
+  // capture whether to auto-scroll at the moment of scheduling
+  const pre = st.pre;
+  const shouldAutoAtSchedule = isUserAtBottom(pre);
+
+  st.rafId = requestAnimationFrame(() => {
+    st.scheduled = false;
+    if (!st.pendingFrag) {
+      return;
+    }
+
+    try {
+      pre.appendChild(st.pendingFrag);
+      if (shouldAutoAtSchedule) {
+        pre.scrollTop = pre.scrollHeight;
+      }
+    } finally {
+      st.pendingFrag = null;
+    }
+  });
+}
+
+// 清理函数：由上层在 host 不再使用时调用
+export function disposeHost(host: HTMLElement) {
+  const st = hostStates.get(host);
+  if (!st) {
+    return;
+  }
+  // 取消未执行的 rAF
+  if (st.rafId !== null) {
+    cancelAnimationFrame(st.rafId);
+    st.rafId = null;
+  }
+  // 丢弃 pending fragment 引用（允许 GC 回收其内部节点）
+  st.pendingFrag = null;
+  // 清除其它资源（如果有 event listeners、workers 等也在这里处理）
+  // e.g. if (st.worker) st.worker.terminate();
+  // 从 WeakMap 删除（可选，WeakMap 的条目在 key 不再可达时会自动回收）
+  hostStates.delete(host);
+}
+
 /**
  * renderText
  * - 使用 autolinkRanges 得到全局的链接区间信息（start/end/url）。
  * - 在脱离文档的 parsed fragment（template.content）上按子节点边界切片，
- *   仅创建必要的 Text / shallow-clone element / <a> 节点。
+ * - 仅创建必要的 Text / shallow-clone element / <a> 节点。
  * - 对跨子节点的链接，使用 pendingAnchor 把分片累计到同一个 <a>，直到 range 结束。
- * - 最后一次性将构建好的 DocumentFragment 插回 pre 中，减少重排与 GC 压力。
+ * - 若检测到本次 data 是对上次 prevData 的 append，则只处理并 append 新增部分（增量路径）；
+ * - 否则视为非追加（首次渲染或变更），进行全量重建，并尽量保持用户视口位置；
+ * - 使用 rAF 批量追加以合并高频调用，避免频繁重排；
+ * - 在追加时只有用户接近底部才自动滚动，否则保持当前位置以便用户查看历史输出。
  */
 export function renderText(options: IRenderTextOptions): Promise<void> {
   const { host, sanitizer, source, mimeType } = options;
   const data = concatMultilineString(source);
 
-  // 对文本做 ansi -> span 的转换并 sanitize（仅允许 <span>）
-  const content = sanitizer.sanitize(ansiSpan(data), {
-    allowedTags: ['span'],
-  });
-
   if (mimeType === 'application/vnd.jupyter.stderr') {
     host.setAttribute('data-mime-type', 'application/vnd.jupyter.stderr');
   }
 
-  // 确保存在 <pre>，但不要马上把 innerHTML 写入实际文档（我们将在脱离文档的 fragment 上操作）
+  // 确保存在 <pre> 且为 host 的子元素（只在首次创建时 append）
   let pre = host.querySelector('pre');
   if (!pre) {
     pre = document.createElement('pre');
     host.appendChild(pre);
+  } else if (pre.parentElement !== host) {
+    // 如果 pre 被移动过，确保再次挂回 host（避免每次 render 都移动）
+    host.appendChild(pre);
   }
 
-  // 使用 template 元素来解析 HTML，但 template.content 尚未插入到文档中 -> 不触发重排
-  const tpl = document.createElement('template');
-  tpl.innerHTML = content;
-  const parsedFrag = tpl.content;
+  // 获取或初始化该 host 的状态
+  let st = hostStates.get(host);
+
+  if (!st) {
+    st = {
+      pre,
+      prevData: '',
+      pendingFrag: null,
+      scheduled: false,
+      rafId: null,
+    };
+    hostStates.set(host, st);
+  } else {
+    st.pre = pre;
+  }
 
-  // 全文文本（用于按字符位置计算 ranges）
-  const fullText = parsedFrag.textContent || '';
-  if (!fullText) {
-    // 若没有文本，清空并返回（保持 class）
+  // 若 data 为空，则立即清空并返回
+  if (!data) {
+    st.prevData = '';
+    st.pendingFrag = null;
+    st.scheduled = false;
     pre.innerHTML = '';
     host.classList.add('libro-text-render');
     return Promise.resolve(undefined);
   }
 
-  // 计算链接 ranges
-  const ranges = autolinkRanges(fullText);
+  // 判定是否为“追加”场景（本次 data 以 prevData 为前缀）
+  const prevData = st.prevData || '';
+  const isAppend = prevData.length > 0 && data.startsWith(prevData);
+
+  if (isAppend) {
+    const appendedData = data.slice(prevData.length);
+    if (appendedData.length === 0) {
+      // 无新增内容
+      return Promise.resolve(undefined);
+    }
+
+    // 对新增内容做 ansi->span 转换并 sanitize（仅允许 span）
+    const appendedContent = sanitizer.sanitize(ansiSpan(appendedData), {
+      allowedTags: ['span'],
+    });
+
+    // 解析为脱离文档的 fragment（不会触发回流）
+    const tpl = document.createElement('template');
+    tpl.innerHTML = appendedContent;
+    const appendedFrag = tpl.content;
+
+    // 对 appendedFrag 的文本执行链接检测（基于 autolinkRanges）
+    // 注意：此处使用 appendedFrag.textContent（仅针对新增片段）
+    const appendedText = appendedFrag.textContent || '';
+    const ranges = appendedText ? autolinkRanges(appendedText) : [];
+
+    // 根据 ranges 构造要追加到 DOM 的 outFrag（可包含文本/浅 cloned spans/anchor）
+    const outFrag = document.createDocumentFragment();
+    let pendingAnchor: HTMLAnchorElement | null = null;
+    let rangeIdx = 0;
+    let globalOffset = 0;
+    const childNodes = Array.from(appendedFrag.childNodes) as Node[];
+
+    for (let ni = 0; ni < childNodes.length; ni++) {
+      const node = childNodes[ni];
+      const nodeText = node.textContent || '';
+      const nodeLen = nodeText.length;
+      if (nodeLen === 0) {
+        continue;
+      }
+
+      let localPos = 0;
+      while (localPos < nodeLen) {
+        const absPos = globalOffset + localPos;
+        // 将 rangeIdx 推到第一个可能与当前绝对位置相关的 range 上
+        while (rangeIdx < ranges.length && ranges[rangeIdx].end <= absPos) {
+          rangeIdx++;
+        }
+        const curRange = rangeIdx < ranges.length ? ranges[rangeIdx] : null;
+
+        if (pendingAnchor) {
+          // 当前有未完成的 anchor（链接跨节点）：尽量消费本节点的部分
+          const take = Math.min(
+            nodeLen - localPos,
+            (curRange ? curRange.end : absPos) - absPos,
+          );
+          const piece = pieceFromNodeSlice(node, localPos, localPos + take);
+          pendingAnchor.appendChild(piece);
+          localPos += take;
+
+          // 若到达当前 range 的结尾，则把 pendingAnchor 闭合并追加
+          if (curRange && globalOffset + localPos >= curRange.end) {
+            outFrag.appendChild(pendingAnchor);
+            pendingAnchor = null;
+            rangeIdx++;
+          }
+          continue;
+        }
+
+        // 若没有 pendingAnchor，判断当前片段是否是普通文本或链接起始处
+        if (!curRange || curRange.start >= globalOffset + nodeLen) {
+          // 本节点剩余部分没有链接，全部作为普通片段
+          const piece = pieceFromNodeSlice(node, localPos, nodeLen);
+          outFrag.appendChild(piece);
+          localPos = nodeLen;
+        } else if (curRange.start > absPos) {
+          // 链接在当前节点后面一段位置开始：先把中间普通文本片段追加
+          const until = Math.min(nodeLen, curRange.start - globalOffset);
+          const piece = pieceFromNodeSlice(node, localPos, until);
+          outFrag.appendChild(piece);
+          localPos = until;
+        } else {
+          // 当前绝对位置位于链接范围内：创建 anchor 并消费该链接在当前节点的部分
+          pendingAnchor = createAnchorForUrl(curRange.url);
+          const take = Math.min(nodeLen - localPos, curRange.end - absPos);
+          const piece = pieceFromNodeSlice(node, localPos, localPos + take);
+          pendingAnchor.appendChild(piece);
+          localPos += take;
+
+          // 若链接在此节点内结束，立即关闭并追加
+          if (globalOffset + localPos >= curRange.end) {
+            outFrag.appendChild(pendingAnchor);
+            pendingAnchor = null;
+            rangeIdx++;
+          }
+        }
+      } // end while localPos
+
+      globalOffset += nodeLen;
+    } // end for nodes
+
+    if (pendingAnchor) {
+      outFrag.appendChild(pendingAnchor);
+      pendingAnchor = null;
+    }
+
+    // 将 outFrag 合并到 host 状态的 pendingFrag 中，以便批量追加
+    if (!st.pendingFrag) {
+      st.pendingFrag = document.createDocumentFragment();
+    }
+    Array.from(outFrag.childNodes).forEach((n) => st!.pendingFrag!.appendChild(n));
+
+    // 更新 prevData 为最新的整个 data（提交此次 append）
+    st.prevData = data;
+
+    // 安排 rAF 批量追加（若已安排则无副作用）
+    scheduleAppend(host);
+
+    host.classList.add('libro-text-render');
+    return Promise.resolve(undefined);
+  }
+
+  // ---------- 非追加（首次渲染或全量替换）路径 ----------
+  // 记录替换前的滚动信息，以便替换后尽量保持视图位置
+  const prevScrollTop = pre.scrollTop;
+  const prevScrollHeight = pre.scrollHeight;
+
+  // 对整个 data 做 ansi->span 转换并 sanitize（脱离文档）
+  const content = sanitizer.sanitize(ansiSpan(data), {
+    allowedTags: ['span'],
+  });
+  const tplFull = document.createElement('template');
+  tplFull.innerHTML = content;
+  const parsedFrag = tplFull.content;
+
+  // 基于全文进行链接检测并构造 outFrag（逻辑与增量路径一致）
+  const fullText = parsedFrag.textContent || '';
+  const ranges = fullText ? autolinkRanges(fullText) : [];
 
-  // 准备输出 fragment（最终将一次性 append 到 pre）
   const outFrag = document.createDocumentFragment();
 
   // pendingAnchor 用于处理链接跨多个原始子节点的情形：
@@ -75,6 +296,7 @@ export function renderText(options: IRenderTextOptions): Promise<void> {
   // 遍历 parsedFrag 的顶层子节点（这些通常是由 sanitizer/ansiSpan 产生的 span/text 节点）
   let globalOffset = 0;
   const childNodes = Array.from(parsedFrag.childNodes) as Node[];
+
   for (let ni = 0; ni < childNodes.length; ni++) {
     const node = childNodes[ni];
     const nodeText = node.textContent || '';
@@ -154,12 +376,24 @@ export function renderText(options: IRenderTextOptions): Promise<void> {
     pendingAnchor = null;
   }
 
-  // 一次性替换 pre 的内容：先清空再 append（减少中间重排）
-  pre.innerHTML = '';
-  pre.appendChild(outFrag);
+  // 在下一帧中执行 DOM 替换以避免同步布局抖动
+  requestAnimationFrame(() => {
+    pre.innerHTML = '';
+    pre.appendChild(outFrag);
 
-  host.classList.add('libro-text-render');
+    // 若用户在底部则滚到底，否则按高度差修正 scrollTop 保持视图不变
+    if (isUserAtBottom(pre)) {
+      pre.scrollTop = pre.scrollHeight;
+    } else {
+      const newScrollHeight = pre.scrollHeight;
+      pre.scrollTop = Math.max(0, prevScrollTop + (newScrollHeight - prevScrollHeight));
+    }
+  });
 
+  // 更新 prevData（记录当前已渲染的原始字符串）
+  st.prevData = data;
+
+  host.classList.add('libro-text-render');
   return Promise.resolve(undefined);
 }