markstream-vue2 0.0.49 → 0.0.50

package/dist/index.js

@@ -56,7 +56,7 @@ export * from "stream-markdown-parser";
 import { KATEX_COMMANDS, normalizeStandaloneBackslashT, setDefaultMathOptions as setDefaultMathOptions2 } from "stream-markdown-parser";
 import * as VueModule from "vue-demi";
 import { defineComponent, getCurrentInstance, computed, shallowRef, h, inject, ref, watch, readonly, useAttrs, onMounted, nextTick, onUpdated, onBeforeUnmount, provide, getCurrentScope, onScopeDispose, markRaw, reactive, onUnmounted } from "vue-demi";
-import { resolveStreamingTextState, normalizeShikiLanguage, createSmoothMarkdownStream, getHighlightRegistrationKey, getRuntimeShikiRegistrationConfig, registerHighlightOnce } from "markstream-core";
+import { normalizeShikiLanguage, createSmoothMarkdownStream, getHighlightRegistrationKey, getRuntimeShikiRegistrationConfig, registerHighlightOnce } from "markstream-core";
 import { autoUpdate, offset, flip, shift, computePosition } from "@floating-ui/dom";
 function getVue2MinorVersion$1(version) {
   const raw = typeof version === "string" ? version : "";
@@ -616,6 +616,20 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    function settleAndMergeSegments(current, segmentId) {
+      return current.reduce((result, segment) => {
+        const nextSegment = segment.id === segmentId ? __spreadProps(__spreadValues({}, segment), { fading: false }) : segment;
+        const previousSegment = result[result.length - 1];
+        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
+          result[result.length - 1] = __spreadProps(__spreadValues({}, previousSegment), {
+            content: previousSegment.content + nextSegment.content
+          });
+        } else {
+          result.push(nextSegment);
+        }
+        return result;
+      }, []);
+    }
     const instance = getCurrentInstance();
     const attrs = computed(() => {
       var _a2, _b;
@@ -645,39 +659,58 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         return "";
       return String(raw);
     });
-    const settledCode = ref(props.node.code);
-    const streamedDelta = ref("");
-    const streamFadeVersion = ref(0);
-    function getRenderedContent() {
-      return settledCode.value + streamedDelta.value;
-    }
+    const segments = ref(props.node.code ? [{ id: 0, content: props.node.code, fading: false }] : []);
+    const renderedCode = ref(props.node.code);
+    let nextSegmentId = 1;
     function setFullContent(next) {
-      settledCode.value = next;
-      streamedDelta.value = "";
+      var _a2;
+      if (segments.value.length === 1 && !((_a2 = segments.value[0]) == null ? void 0 : _a2.fading) && segments.value[0].content === next)
+        return;
+      segments.value = next ? [{ id: nextSegmentId++, content: next, fading: false }] : [];
     }
-    function settleStreamedDelta() {
-      if (!streamedDelta.value)
+    function settleSegment(segmentId) {
+      if (!segments.value.some((segment) => segment.id === segmentId && segment.fading))
         return;
-      settledCode.value = getRenderedContent();
-      streamedDelta.value = "";
+      segments.value = settleAndMergeSegments(segments.value, segmentId);
+    }
+    function streamedDeltaClass(segment) {
+      return segment.id % 2 === 0 ? "inline-code-stream-delta--a" : "inline-code-stream-delta--b";
     }
     watch(
       [() => props.node.code, streamStateKey, fadeEnabled],
       ([next]) => {
         const normalized = String(next != null ? next : "");
-        const rendered = getRenderedContent();
         const key = streamStateKey.value;
         const previousPersisted = key ? inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.get(key) : void 0;
-        const previousContent = previousPersisted != null ? previousPersisted : rendered;
-        const nextState = resolveStreamingTextState({
-          nextContent: normalized,
-          previousContent,
-          typewriterEnabled: fadeEnabled.value
-        });
-        settledCode.value = nextState.settledContent;
-        streamedDelta.value = nextState.streamedDelta;
-        if (nextState.appended)
-          streamFadeVersion.value += 1;
+        const previousContent = previousPersisted != null ? previousPersisted : renderedCode.value;
+        const resumeFromPersistedContent = previousPersisted !== void 0 && previousPersisted !== renderedCode.value;
+        if (!fadeEnabled.value) {
+          setFullContent(normalized);
+        } else if (normalized !== previousContent) {
+          if (previousContent && normalized.startsWith(previousContent)) {
+            const appendedContent = normalized.slice(previousContent.length);
+            const lastSegment = segments.value[segments.value.length - 1];
+            if (resumeFromPersistedContent) {
+              segments.value = [
+                { id: nextSegmentId++, content: previousContent, fading: false },
+                { id: nextSegmentId++, content: appendedContent, fading: true }
+              ];
+            } else if (lastSegment == null ? void 0 : lastSegment.fading) {
+              segments.value = [
+                ...segments.value.slice(0, -1),
+                __spreadProps(__spreadValues({}, lastSegment), { content: lastSegment.content + appendedContent })
+              ];
+            } else {
+              segments.value = [
+                ...segments.value,
+                { id: nextSegmentId++, content: appendedContent, fading: true }
+              ];
+            }
+          } else {
+            setFullContent(normalized);
+          }
+        }
+        renderedCode.value = normalized;
         if (key)
           inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
       },
@@ -688,17 +721,20 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       (enabled) => {
         if (enabled)
           return;
-        setFullContent(getRenderedContent());
+        setFullContent(renderedCode.value);
       }
     );
-    const streamedDeltaClass = computed(() => streamFadeVersion.value % 2 === 0 ? "inline-code-stream-delta--a" : "inline-code-stream-delta--b");
-    return { __sfc: true, props, instance, attrs, inheritedFade, inheritedTextStreamState, explicitFade, fadeEnabled, streamStateKey, settledCode, streamedDelta, streamFadeVersion, getRenderedContent, setFullContent, settleStreamedDelta, streamedDeltaClass };
+    return { __sfc: true, props, settleAndMergeSegments, instance, attrs, inheritedFade, inheritedTextStreamState, explicitFade, fadeEnabled, streamStateKey, segments, renderedCode, nextSegmentId, setFullContent, settleSegment, streamedDeltaClass };
   }
 });
-const InlineCodeNode_vue_vue_type_style_index_0_scoped_820dbd10_lang = "";
+const InlineCodeNode_vue_vue_type_style_index_0_scoped_6ea4ef26_lang = "";
 var _sfc_render$E = function render6() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("code", { staticClass: "inline text-[85%] px-1 py-0.5 rounded font-mono bg-[hsl(var(--secondary))] whitespace-normal break-words max-w-full before:content-[''] after:content-['']" }, [_setup.settledCode ? _c("span", [_vm._v(_vm._s(_setup.settledCode))]) : _vm._e(), _setup.streamedDelta ? _c("span", { staticClass: "inline-code-stream-delta", class: [_setup.streamedDeltaClass], on: { "animationend": _setup.settleStreamedDelta } }, [_vm._v(" " + _vm._s(_setup.streamedDelta) + " ")]) : _vm._e()]);
+  return _c("code", { staticClass: "inline text-[85%] px-1 py-0.5 rounded font-mono bg-[hsl(var(--secondary))] whitespace-normal break-words max-w-full before:content-[''] after:content-['']" }, _vm._l(_setup.segments, function(segment) {
+    return _c("span", { key: segment.id, class: segment.fading ? ["inline-code-stream-delta", _setup.streamedDeltaClass(segment)] : void 0, on: { "animationend": function($event) {
+      segment.fading && _setup.settleSegment(segment.id);
+    } } }, [_vm._v(" " + _vm._s(segment.content) + " ")]);
+  }), 0);
 };
 var _sfc_staticRenderFns$E = [];
 var __component__$E = /* @__PURE__ */ normalizeComponent(
@@ -707,7 +743,7 @@ var __component__$E = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$E,
   false,
   null,
-  "820dbd10",
+  "6ea4ef26",
   null,
   null
 );
@@ -1094,6 +1130,20 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   emits: ["copy"],
   setup(__props) {
     const props = __props;
+    function settleAndMergeSegments(current, segmentId) {
+      return current.reduce((result, segment) => {
+        const nextSegment = segmentId == null || segment.id === segmentId ? __spreadProps(__spreadValues({}, segment), { fading: false }) : segment;
+        const previousSegment = result[result.length - 1];
+        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
+          result[result.length - 1] = __spreadProps(__spreadValues({}, previousSegment), {
+            content: previousSegment.content + nextSegment.content
+          });
+        } else {
+          result.push(nextSegment);
+        }
+        return result;
+      }, []);
+    }
     const katexReady = useKatexReady();
     const instance = getCurrentInstance();
     const attrs = computed(() => {
@@ -1125,54 +1175,76 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         return "";
       return String(raw);
     });
-    const settledContent = ref(props.node.content);
-    const streamedDelta = ref("");
-    const streamFadeVersion = ref(0);
-    function getRenderedContent() {
-      return settledContent.value + streamedDelta.value;
-    }
+    const segments = ref(props.node.content ? [{ id: 0, content: props.node.content, fading: false }] : []);
+    const renderedContent = ref(props.node.content);
+    let nextSegmentId = 1;
     function setFullContent(next) {
-      settledContent.value = next;
-      streamedDelta.value = "";
+      var _a2;
+      if (segments.value.length === 1 && !((_a2 = segments.value[0]) == null ? void 0 : _a2.fading) && segments.value[0].content === next)
+        return;
+      segments.value = next ? [{ id: nextSegmentId++, content: next, fading: false }] : [];
+    }
+    function settleSegment(segmentId) {
+      if (!segments.value.some((segment) => segment.id === segmentId && segment.fading))
+        return;
+      segments.value = settleAndMergeSegments(segments.value, segmentId);
     }
-    function settleStreamedDelta() {
-      if (!streamedDelta.value)
+    function settleFadingSegments() {
+      if (!segments.value.some((segment) => segment.fading))
         return;
-      settledContent.value = getRenderedContent();
-      streamedDelta.value = "";
+      segments.value = settleAndMergeSegments(segments.value);
+    }
+    function streamedDeltaClass(segment) {
+      return segment.id % 2 === 0 ? "text-node-stream-delta--a" : "text-node-stream-delta--b";
     }
     watch(
       [() => props.node.content, streamStateKey, fadeEnabled, () => inheritedStreamVersion == null ? void 0 : inheritedStreamVersion.value],
       ([next]) => {
         const normalized = String(next != null ? next : "");
-        const rendered = getRenderedContent();
         const key = streamStateKey.value;
         const previousPersisted = key ? inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.get(key) : void 0;
-        const previousContent = previousPersisted != null ? previousPersisted : rendered;
+        const previousContent = previousPersisted != null ? previousPersisted : renderedContent.value;
+        const resumeFromPersistedContent = previousPersisted !== void 0 && previousPersisted !== renderedContent.value;
         if (!fadeEnabled.value) {
           setFullContent(normalized);
+          renderedContent.value = normalized;
           if (key)
             inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
           return;
         }
         if (normalized === previousContent) {
-          if (streamedDelta.value)
-            settleStreamedDelta();
-          else if (rendered !== normalized)
+          if (segments.value.some((segment) => segment.fading))
+            settleFadingSegments();
+          else if (renderedContent.value !== normalized)
             setFullContent(normalized);
           if (key)
             inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
+          renderedContent.value = normalized;
           return;
         }
-        const nextState = resolveStreamingTextState({
-          nextContent: normalized,
-          previousContent,
-          typewriterEnabled: fadeEnabled.value
-        });
-        settledContent.value = nextState.settledContent;
-        streamedDelta.value = nextState.streamedDelta;
-        if (nextState.appended)
-          streamFadeVersion.value += 1;
+        if (previousContent && normalized.startsWith(previousContent)) {
+          const appendedContent = normalized.slice(previousContent.length);
+          const lastSegment = segments.value[segments.value.length - 1];
+          if (resumeFromPersistedContent) {
+            segments.value = [
+              { id: nextSegmentId++, content: previousContent, fading: false },
+              { id: nextSegmentId++, content: appendedContent, fading: true }
+            ];
+          } else if (lastSegment == null ? void 0 : lastSegment.fading) {
+            segments.value = [
+              ...segments.value.slice(0, -1),
+              __spreadProps(__spreadValues({}, lastSegment), { content: lastSegment.content + appendedContent })
+            ];
+          } else {
+            segments.value = [
+              ...segments.value,
+              { id: nextSegmentId++, content: appendedContent, fading: true }
+            ];
+          }
+        } else {
+          setFullContent(normalized);
+        }
+        renderedContent.value = normalized;
         if (key)
           inheritedTextStreamState == null ? void 0 : inheritedTextStreamState.set(key, normalized);
       },
@@ -1183,17 +1255,20 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       (enabled) => {
         if (enabled)
           return;
-        setFullContent(getRenderedContent());
+        setFullContent(renderedContent.value);
       }
     );
-    const streamedDeltaClass = computed(() => streamFadeVersion.value % 2 === 0 ? "text-node-stream-delta--a" : "text-node-stream-delta--b");
-    return { __sfc: true, props, katexReady, instance, attrs, inheritedFade, inheritedTextStreamState, inheritedStreamVersion, explicitFade, fadeEnabled, streamStateKey, settledContent, streamedDelta, streamFadeVersion, getRenderedContent, setFullContent, settleStreamedDelta, streamedDeltaClass };
+    return { __sfc: true, props, settleAndMergeSegments, katexReady, instance, attrs, inheritedFade, inheritedTextStreamState, inheritedStreamVersion, explicitFade, fadeEnabled, streamStateKey, segments, renderedContent, nextSegmentId, setFullContent, settleSegment, settleFadingSegments, streamedDeltaClass };
   }
 });
-const TextNode_vue_vue_type_style_index_0_scoped_e8e0f51e_lang = "";
+const TextNode_vue_vue_type_style_index_0_scoped_00951658_lang = "";
 var _sfc_render$C = function render8() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-  return _c("span", { staticClass: "whitespace-pre-wrap break-words text-node", class: [_setup.katexReady && _vm.node.center ? "text-node-center" : ""] }, [_setup.settledContent ? _c("span", [_vm._v(_vm._s(_setup.settledContent))]) : _vm._e(), _setup.streamedDelta ? _c("span", { staticClass: "text-node-stream-delta", class: [_setup.streamedDeltaClass], on: { "animationend": _setup.settleStreamedDelta } }, [_vm._v(" " + _vm._s(_setup.streamedDelta) + " ")]) : _vm._e()]);
+  return _c("span", { staticClass: "whitespace-pre-wrap break-words text-node", class: [_setup.katexReady && _vm.node.center ? "text-node-center" : ""] }, _vm._l(_setup.segments, function(segment) {
+    return _c("span", { key: segment.id, class: segment.fading ? ["text-node-stream-delta", _setup.streamedDeltaClass(segment)] : void 0, on: { "animationend": function($event) {
+      segment.fading && _setup.settleSegment(segment.id);
+    } } }, [_vm._v(" " + _vm._s(segment.content) + " ")]);
+  }), 0);
 };
 var _sfc_staticRenderFns$C = [];
 var __component__$C = /* @__PURE__ */ normalizeComponent(
@@ -1202,7 +1277,7 @@ var __component__$C = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns$C,
   false,
   null,
-  "e8e0f51e",
+  "00951658",
   null,
   null
 );