@incremark/core 0.0.4 → 0.1.0

package/dist/index.js

@@ -520,6 +520,557 @@ function joinLines(lines, start, end) {
   return lines.slice(start, end + 1).join("\n");
 }
 
-export { IncremarkParser, calculateLineOffset, createIncremarkParser, createInitialContext, detectContainer, detectContainerEnd, detectFenceEnd, detectFenceStart, generateId, isBlockBoundary, isBlockquoteStart, isEmptyLine, isHeading, isHtmlBlock, isListItemStart, isTableDelimiter, isThematicBreak, joinLines, resetIdCounter, splitLines, updateContext };
+// src/transformer/utils.ts
+function countChars(node) {
+  let count = 0;
+  function traverse(n) {
+    if (n.value && typeof n.value === "string") {
+      count += n.value.length;
+      return;
+    }
+    if (n.children && Array.isArray(n.children)) {
+      for (const child of n.children) {
+        traverse(child);
+      }
+    }
+  }
+  traverse(node);
+  return count;
+}
+function sliceAst(node, maxChars, accumulatedChunks) {
+  if (maxChars <= 0) return null;
+  let remaining = maxChars;
+  let charIndex = 0;
+  const chunkRanges = [];
+  if (accumulatedChunks && accumulatedChunks.chunks.length > 0) {
+    let chunkStart = accumulatedChunks.stableChars;
+    for (const chunk of accumulatedChunks.chunks) {
+      chunkRanges.push({
+        start: chunkStart,
+        end: chunkStart + chunk.text.length,
+        chunk
+      });
+      chunkStart += chunk.text.length;
+    }
+  }
+  function process(n) {
+    if (remaining <= 0) return null;
+    if (n.value && typeof n.value === "string") {
+      const take = Math.min(n.value.length, remaining);
+      remaining -= take;
+      if (take === 0) return null;
+      const slicedValue = n.value.slice(0, take);
+      const nodeStart = charIndex;
+      const nodeEnd = charIndex + take;
+      charIndex += take;
+      const result = {
+        ...n,
+        value: slicedValue
+      };
+      if (chunkRanges.length > 0 && accumulatedChunks) {
+        const nodeChunks = [];
+        let firstChunkLocalStart = take;
+        for (const range of chunkRanges) {
+          const overlapStart = Math.max(range.start, nodeStart);
+          const overlapEnd = Math.min(range.end, nodeEnd);
+          if (overlapStart < overlapEnd) {
+            const localStart = overlapStart - nodeStart;
+            const localEnd = overlapEnd - nodeStart;
+            const chunkText = slicedValue.slice(localStart, localEnd);
+            if (chunkText.length > 0) {
+              if (nodeChunks.length === 0) {
+                firstChunkLocalStart = localStart;
+              }
+              nodeChunks.push({
+                text: chunkText,
+                createdAt: range.chunk.createdAt
+              });
+            }
+          }
+        }
+        if (nodeChunks.length > 0) {
+          result.stableLength = firstChunkLocalStart;
+          result.chunks = nodeChunks;
+        }
+      }
+      return result;
+    }
+    if (n.children && Array.isArray(n.children)) {
+      const newChildren = [];
+      for (const child of n.children) {
+        if (remaining <= 0) break;
+        const processed = process(child);
+        if (processed) {
+          newChildren.push(processed);
+        }
+      }
+      if (newChildren.length === 0) {
+        return null;
+      }
+      return { ...n, children: newChildren };
+    }
+    remaining -= 1;
+    charIndex += 1;
+    return { ...n };
+  }
+  return process(node);
+}
+function cloneNode(node) {
+  return JSON.parse(JSON.stringify(node));
+}
+
+// src/transformer/BlockTransformer.ts
+var BlockTransformer = class {
+  state;
+  options;
+  rafId = null;
+  lastTickTime = 0;
+  isRunning = false;
+  isPaused = false;
+  chunks = [];
+  // 累积的 chunks（用于 fade-in 动画）
+  visibilityHandler = null;
+  constructor(options = {}) {
+    this.options = {
+      charsPerTick: options.charsPerTick ?? 1,
+      tickInterval: options.tickInterval ?? 20,
+      effect: options.effect ?? "none",
+      plugins: options.plugins ?? [],
+      onChange: options.onChange ?? (() => {
+      }),
+      pauseOnHidden: options.pauseOnHidden ?? true
+    };
+    this.state = {
+      completedBlocks: [],
+      currentBlock: null,
+      currentProgress: 0,
+      pendingBlocks: []
+    };
+    if (this.options.pauseOnHidden && typeof document !== "undefined") {
+      this.setupVisibilityHandler();
+    }
+  }
+  /**
+   * 推入新的 blocks
+   * 会自动过滤已存在的 blocks
+   */
+  push(blocks) {
+    const existingIds = this.getAllBlockIds();
+    const newBlocks = blocks.filter((b) => !existingIds.has(b.id));
+    if (newBlocks.length > 0) {
+      this.state.pendingBlocks.push(...newBlocks);
+      this.startIfNeeded();
+    }
+    if (this.state.currentBlock) {
+      const updated = blocks.find((b) => b.id === this.state.currentBlock.id);
+      if (updated && updated.node !== this.state.currentBlock.node) {
+        const oldTotal = this.countChars(this.state.currentBlock.node);
+        const newTotal = this.countChars(updated.node);
+        if (newTotal < oldTotal || newTotal < this.state.currentProgress) {
+          this.state.currentProgress = Math.min(this.state.currentProgress, newTotal);
+        }
+        this.state.currentBlock = updated;
+        if (!this.rafId && !this.isPaused) {
+          if (this.state.currentProgress < newTotal) {
+            this.startIfNeeded();
+          }
+        }
+      }
+    }
+  }
+  /**
+   * 更新指定 block（用于 pending block 内容增加时）
+   */
+  update(block) {
+    if (this.state.currentBlock?.id === block.id) {
+      const oldTotal = this.countChars(this.state.currentBlock.node);
+      const newTotal = this.countChars(block.node);
+      this.state.currentBlock = block;
+      if (newTotal > oldTotal && !this.rafId && !this.isPaused && this.state.currentProgress >= oldTotal) {
+        this.startIfNeeded();
+      }
+    }
+  }
+  /**
+   * 跳过所有动画，直接显示全部内容
+   */
+  skip() {
+    this.stop();
+    const allBlocks = [
+      ...this.state.completedBlocks,
+      ...this.state.currentBlock ? [this.state.currentBlock] : [],
+      ...this.state.pendingBlocks
+    ];
+    this.state = {
+      completedBlocks: allBlocks,
+      currentBlock: null,
+      currentProgress: 0,
+      pendingBlocks: []
+    };
+    this.chunks = [];
+    this.emit();
+  }
+  /**
+   * 重置状态
+   */
+  reset() {
+    this.stop();
+    this.state = {
+      completedBlocks: [],
+      currentBlock: null,
+      currentProgress: 0,
+      pendingBlocks: []
+    };
+    this.chunks = [];
+    this.emit();
+  }
+  /**
+   * 暂停动画
+   */
+  pause() {
+    this.isPaused = true;
+    this.cancelRaf();
+  }
+  /**
+   * 恢复动画
+   */
+  resume() {
+    if (this.isPaused) {
+      this.isPaused = false;
+      this.startIfNeeded();
+    }
+  }
+  /**
+   * 获取用于渲染的 display blocks
+   */
+  getDisplayBlocks() {
+    const result = [];
+    for (const block of this.state.completedBlocks) {
+      result.push({
+        ...block,
+        displayNode: block.node,
+        progress: 1,
+        isDisplayComplete: true
+      });
+    }
+    if (this.state.currentBlock) {
+      const total = this.countChars(this.state.currentBlock.node);
+      const accumulatedChunks = this.options.effect === "fade-in" && this.chunks.length > 0 ? { stableChars: 0, chunks: this.chunks } : void 0;
+      const displayNode = this.sliceNode(
+        this.state.currentBlock.node,
+        this.state.currentProgress,
+        accumulatedChunks
+      );
+      result.push({
+        ...this.state.currentBlock,
+        displayNode: displayNode || { type: "paragraph", children: [] },
+        progress: total > 0 ? this.state.currentProgress / total : 1,
+        isDisplayComplete: false
+      });
+    }
+    return result;
+  }
+  /**
+   * 是否正在处理中
+   */
+  isProcessing() {
+    return this.isRunning || this.state.currentBlock !== null || this.state.pendingBlocks.length > 0;
+  }
+  /**
+   * 是否已暂停
+   */
+  isPausedState() {
+    return this.isPaused;
+  }
+  /**
+   * 获取内部状态（用于调试）
+   */
+  getState() {
+    return { ...this.state };
+  }
+  /**
+   * 动态更新配置
+   */
+  setOptions(options) {
+    if (options.charsPerTick !== void 0) {
+      this.options.charsPerTick = options.charsPerTick;
+    }
+    if (options.tickInterval !== void 0) {
+      this.options.tickInterval = options.tickInterval;
+    }
+    if (options.effect !== void 0) {
+      this.options.effect = options.effect;
+    }
+    if (options.pauseOnHidden !== void 0) {
+      this.options.pauseOnHidden = options.pauseOnHidden;
+      if (options.pauseOnHidden && typeof document !== "undefined") {
+        this.setupVisibilityHandler();
+      } else {
+        this.removeVisibilityHandler();
+      }
+    }
+  }
+  /**
+   * 获取当前配置
+   */
+  getOptions() {
+    return {
+      charsPerTick: this.options.charsPerTick,
+      tickInterval: this.options.tickInterval,
+      effect: this.options.effect
+    };
+  }
+  /**
+   * 获取当前动画效果
+   */
+  getEffect() {
+    return this.options.effect;
+  }
+  /**
+   * 销毁，清理资源
+   */
+  destroy() {
+    this.stop();
+    this.removeVisibilityHandler();
+  }
+  // ============ 私有方法 ============
+  getAllBlockIds() {
+    return new Set([
+      ...this.state.completedBlocks.map((b) => b.id),
+      this.state.currentBlock?.id,
+      ...this.state.pendingBlocks.map((b) => b.id)
+    ].filter((id) => id !== void 0));
+  }
+  setupVisibilityHandler() {
+    if (this.visibilityHandler) return;
+    this.visibilityHandler = () => {
+      if (document.hidden) {
+        this.pause();
+      } else {
+        this.resume();
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityHandler);
+  }
+  removeVisibilityHandler() {
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler);
+      this.visibilityHandler = null;
+    }
+  }
+  startIfNeeded() {
+    if (this.rafId || this.isPaused) return;
+    if (!this.state.currentBlock && this.state.pendingBlocks.length > 0) {
+      this.state.currentBlock = this.state.pendingBlocks.shift();
+      this.state.currentProgress = 0;
+    }
+    if (this.state.currentBlock) {
+      this.isRunning = true;
+      this.lastTickTime = 0;
+      this.scheduleNextFrame();
+    }
+  }
+  scheduleNextFrame() {
+    this.rafId = requestAnimationFrame((time) => this.animationFrame(time));
+  }
+  animationFrame(time) {
+    this.rafId = null;
+    if (this.lastTickTime === 0) {
+      this.lastTickTime = time;
+    }
+    const elapsed = time - this.lastTickTime;
+    if (elapsed >= this.options.tickInterval) {
+      this.lastTickTime = time;
+      this.tick();
+    }
+    if (this.isRunning && !this.isPaused) {
+      this.scheduleNextFrame();
+    }
+  }
+  tick() {
+    const block = this.state.currentBlock;
+    if (!block) {
+      this.processNext();
+      return;
+    }
+    const total = this.countChars(block.node);
+    const step = this.getStep();
+    const prevProgress = this.state.currentProgress;
+    this.state.currentProgress = Math.min(prevProgress + step, total);
+    if (this.options.effect === "fade-in" && this.state.currentProgress > prevProgress) {
+      const newText = this.extractText(block.node, prevProgress, this.state.currentProgress);
+      if (newText.length > 0) {
+        this.chunks.push({
+          text: newText,
+          createdAt: Date.now()
+        });
+      }
+    }
+    this.emit();
+    if (this.state.currentProgress >= total) {
+      this.notifyComplete(block.node);
+      this.state.completedBlocks.push(block);
+      this.state.currentBlock = null;
+      this.state.currentProgress = 0;
+      this.chunks = [];
+      this.processNext();
+    }
+  }
+  /**
+   * 从 AST 节点中提取指定范围的文本
+   */
+  extractText(node, start, end) {
+    let result = "";
+    let charIndex = 0;
+    function traverse(n) {
+      if (charIndex >= end) return false;
+      if (n.value && typeof n.value === "string") {
+        const nodeStart = charIndex;
+        const nodeEnd = charIndex + n.value.length;
+        charIndex = nodeEnd;
+        const overlapStart = Math.max(start, nodeStart);
+        const overlapEnd = Math.min(end, nodeEnd);
+        if (overlapStart < overlapEnd) {
+          result += n.value.slice(overlapStart - nodeStart, overlapEnd - nodeStart);
+        }
+        return charIndex < end;
+      }
+      if (n.children && Array.isArray(n.children)) {
+        for (const child of n.children) {
+          if (!traverse(child)) return false;
+        }
+      }
+      return true;
+    }
+    traverse(node);
+    return result;
+  }
+  getStep() {
+    const { charsPerTick } = this.options;
+    if (typeof charsPerTick === "number") {
+      return charsPerTick;
+    }
+    const [min, max] = charsPerTick;
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+  processNext() {
+    if (this.state.pendingBlocks.length > 0) {
+      this.state.currentBlock = this.state.pendingBlocks.shift();
+      this.state.currentProgress = 0;
+      this.chunks = [];
+      this.emit();
+    } else {
+      this.isRunning = false;
+      this.cancelRaf();
+      this.emit();
+    }
+  }
+  cancelRaf() {
+    if (this.rafId) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+  stop() {
+    this.cancelRaf();
+    this.isRunning = false;
+    this.isPaused = false;
+  }
+  emit() {
+    this.options.onChange(this.getDisplayBlocks());
+  }
+  // ============ 插件调用 ============
+  countChars(node) {
+    for (const plugin of this.options.plugins) {
+      if (plugin.match?.(node) && plugin.countChars) {
+        const result = plugin.countChars(node);
+        if (result !== void 0) return result;
+      }
+    }
+    return countChars(node);
+  }
+  sliceNode(node, chars, accumulatedChunks) {
+    for (const plugin of this.options.plugins) {
+      if (plugin.match?.(node) && plugin.sliceNode) {
+        const total = this.countChars(node);
+        const result = plugin.sliceNode(node, chars, total);
+        if (result !== null) return result;
+      }
+    }
+    return sliceAst(node, chars, accumulatedChunks);
+  }
+  notifyComplete(node) {
+    for (const plugin of this.options.plugins) {
+      if (plugin.match?.(node) && plugin.onComplete) {
+        plugin.onComplete(node);
+      }
+    }
+  }
+};
+function createBlockTransformer(options) {
+  return new BlockTransformer(options);
+}
+
+// src/transformer/plugins.ts
+var codeBlockPlugin = {
+  name: "code-block",
+  match: (node) => node.type === "code",
+  countChars: () => 1,
+  // 算作 1 个字符，整体出现
+  sliceNode: (node, displayedChars, totalChars) => {
+    return displayedChars >= totalChars ? node : null;
+  }
+};
+var mermaidPlugin = {
+  name: "mermaid",
+  match: (node) => {
+    if (node.type !== "code") return false;
+    const codeNode = node;
+    return codeNode.lang === "mermaid";
+  },
+  countChars: () => 1,
+  sliceNode: (node, displayedChars) => displayedChars > 0 ? node : null
+};
+var imagePlugin = {
+  name: "image",
+  match: (node) => node.type === "image",
+  countChars: () => 0
+  // 0 字符，立即显示
+};
+var mathPlugin = {
+  name: "math",
+  match: (node) => {
+    const type = node.type;
+    return type === "math" || type === "inlineMath";
+  },
+  countChars: () => 1,
+  sliceNode: (node, displayedChars) => displayedChars > 0 ? node : null
+};
+var thematicBreakPlugin = {
+  name: "thematic-break",
+  match: (node) => node.type === "thematicBreak",
+  countChars: () => 0
+};
+var defaultPlugins = [
+  imagePlugin,
+  thematicBreakPlugin
+];
+var allPlugins = [
+  mermaidPlugin,
+  // mermaid 优先于普通 code block
+  codeBlockPlugin,
+  imagePlugin,
+  mathPlugin,
+  thematicBreakPlugin
+];
+function createPlugin(name, matcher, options = {}) {
+  return {
+    name,
+    match: matcher,
+    ...options
+  };
+}
+
+export { BlockTransformer, IncremarkParser, allPlugins, calculateLineOffset, cloneNode, codeBlockPlugin, countChars, createBlockTransformer, createIncremarkParser, createInitialContext, createPlugin, defaultPlugins, detectContainer, detectContainerEnd, detectFenceEnd, detectFenceStart, generateId, imagePlugin, isBlockBoundary, isBlockquoteStart, isEmptyLine, isHeading, isHtmlBlock, isListItemStart, isTableDelimiter, isThematicBreak, joinLines, mathPlugin, mermaidPlugin, resetIdCounter, sliceAst, splitLines, thematicBreakPlugin, updateContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map