@incremark/core 0.0.5 → 0.1.1

package/src/parser/IncremarkParser.ts

@@ -50,7 +50,7 @@ export class IncremarkParser {
   private context: BlockContext
   private options: ParserOptions
   /** 缓存的容器配置，避免重复计算 */
-  private cachedContainerConfig: ContainerConfig | undefined | null = null
+  private readonly containerConfig: ContainerConfig | undefined
   /** 上次 append 返回的 pending blocks，用于 getAst 复用 */
   private lastPendingBlocks: ParsedBlock[] = []
 
@@ -60,8 +60,8 @@ export class IncremarkParser {
       ...options
     }
     this.context = createInitialContext()
-    // 初始化容器配置缓存
-    this.cachedContainerConfig = this.computeContainerConfig()
+    // 初始化容器配置（构造时计算一次）
+    this.containerConfig = this.computeContainerConfig()
   }
 
   private generateBlockId(): string {
@@ -74,10 +74,6 @@ export class IncremarkParser {
     return containers === true ? {} : containers
   }
 
-  private getContainerConfig(): ContainerConfig | undefined {
-    return this.cachedContainerConfig ?? undefined
-  }
-
   private parse(text: string): Root {
     const extensions: MicromarkExtension[] = []
     const mdastExtensions: MdastExtension[] = []
@@ -148,7 +144,6 @@ export class IncremarkParser {
     let stableLine = -1
     let stableContext: BlockContext = this.context
     let tempContext = { ...this.context }
-    const containerConfig = this.getContainerConfig()
 
     for (let i = this.pendingStartLine; i < this.lines.length; i++) {
       const line = this.lines[i]
@@ -156,7 +151,7 @@ export class IncremarkParser {
       const wasInContainer = tempContext.inContainer
       const wasContainerDepth = tempContext.containerDepth
 
-      tempContext = updateContext(line, tempContext, containerConfig)
+      tempContext = updateContext(line, tempContext, this.containerConfig)
 
       if (wasInFencedCode && !tempContext.inFencedCode) {
         if (i < this.lines.length - 1) {
@@ -182,7 +177,7 @@ export class IncremarkParser {
         continue
       }
 
-      const stablePoint = this.checkStability(i, containerConfig)
+      const stablePoint = this.checkStability(i)
       if (stablePoint >= 0) {
         stableLine = stablePoint
         stableContext = { ...tempContext }
@@ -192,10 +187,7 @@ export class IncremarkParser {
     return { line: stableLine, contextAtLine: stableContext }
   }
 
-  private checkStability(
-    lineIndex: number,
-    containerConfig: ContainerConfig | undefined
-  ): number {
+  private checkStability(lineIndex: number): number {
     // 第一行永远不稳定
     if (lineIndex === 0) {
       return -1
@@ -237,10 +229,10 @@ export class IncremarkParser {
       }
 
       // 新容器开始
-      if (containerConfig !== undefined) {
-        const container = detectContainer(line, containerConfig)
+      if (this.containerConfig !== undefined) {
+        const container = detectContainer(line, this.containerConfig)
         if (container && !container.isEnd) {
-          const prevContainer = detectContainer(prevLine, containerConfig)
+          const prevContainer = detectContainer(prevLine, this.containerConfig)
           if (!prevContainer || prevContainer.isEnd) {
             return lineIndex - 1
           }

package/src/transformer/BlockTransformer.ts

@@ -1,4 +1,5 @@
 import type { RootContent } from 'mdast'
+import type { AstNode } from '../types'
 import type {
   SourceBlock,
   DisplayBlock,
@@ -7,7 +8,7 @@ import type {
   TransformerPlugin,
   AnimationEffect
 } from './types'
-import { countChars as defaultCountChars, sliceAst as defaultSliceAst } from './utils'
+import { countChars as defaultCountChars, sliceAst as defaultSliceAst, appendToAst, type TextChunk, type AccumulatedChunks } from './utils'
 
 /**
  * Block Transformer
@@ -54,7 +55,16 @@ export class BlockTransformer<T = unknown> {
   private lastTickTime = 0
   private isRunning = false
   private isPaused = false
+  private chunks: TextChunk[] = []  // 累积的 chunks（用于 fade-in 动画）
   private visibilityHandler: (() => void) | null = null
+  
+  // ============ 性能优化：缓存机制 ============
+  /** 缓存的已截断 displayNode（稳定的部分，避免重复遍历） */
+  private cachedDisplayNode: RootContent | null = null
+  /** 缓存的字符数（避免重复计算） */
+  private cachedTotalChars: number | null = null
+  /** 当前缓存的进度（对应 cachedDisplayNode） */
+  private cachedProgress: number = 0
 
   constructor(options: TransformerOptions = {}) {
     this.options = {
@@ -98,12 +108,23 @@ export class BlockTransformer<T = unknown> {
     if (this.state.currentBlock) {
       const updated = blocks.find((b) => b.id === this.state.currentBlock!.id)
       if (updated && updated.node !== this.state.currentBlock.node) {
-        // 内容增加了，更新引用
+        // 内容更新，清除缓存
+        this.clearCache()
+        
+        const oldTotal = this.cachedTotalChars ?? this.countChars(this.state.currentBlock.node)
+        const newTotal = this.countChars(updated.node)
+        
+        // 如果字符数减少了（AST 结构变化，如 **xxx 变成 **xxx**）
+        // 重新计算进度，保持相对位置
+        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) {
-          const total = this.countChars(updated.node)
-          if (this.state.currentProgress < total) {
+          if (this.state.currentProgress < newTotal) {
             this.startIfNeeded()
           }
         }
@@ -116,13 +137,15 @@ export class BlockTransformer<T = unknown> {
    */
   update(block: SourceBlock<T>): void {
     if (this.state.currentBlock?.id === block.id) {
-      const oldTotal = this.countChars(this.state.currentBlock.node)
+      const oldTotal = this.cachedTotalChars ?? 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.clearCache()
         this.startIfNeeded()
       }
     }
@@ -146,6 +169,8 @@ export class BlockTransformer<T = unknown> {
       currentProgress: 0,
       pendingBlocks: []
     }
+    this.chunks = []
+    this.clearCache()
 
     this.emit()
   }
@@ -161,6 +186,8 @@ export class BlockTransformer<T = unknown> {
       currentProgress: 0,
       pendingBlocks: []
     }
+    this.chunks = []
+    this.clearCache()
     this.emit()
   }
 
@@ -184,6 +211,7 @@ export class BlockTransformer<T = unknown> {
 
   /**
    * 获取用于渲染的 display blocks
+   * 优化：使用缓存的 displayNode，避免重复遍历已稳定的节点
    */
   getDisplayBlocks(): DisplayBlock<T>[] {
     const result: DisplayBlock<T>[] = []
@@ -200,12 +228,17 @@ export class BlockTransformer<T = unknown> {
 
     // 当前正在显示的 block
     if (this.state.currentBlock) {
-      const total = this.countChars(this.state.currentBlock.node)
-      const displayNode = this.sliceNode(this.state.currentBlock.node, this.state.currentProgress)
+      // 使用缓存的字符数
+      const total = this.getTotalChars()
+      
+      // 如果进度变化了或缓存无效，更新缓存的 displayNode
+      if (this.state.currentProgress !== this.cachedProgress || !this.cachedDisplayNode) {
+        this.updateCachedDisplayNode()
+      }
 
       result.push({
         ...this.state.currentBlock,
-        displayNode: displayNode || { type: 'paragraph', children: [] },
+        displayNode: this.cachedDisplayNode || { type: 'paragraph', children: [] },
         progress: total > 0 ? this.state.currentProgress / total : 1,
         isDisplayComplete: false
       })
@@ -325,6 +358,7 @@ export class BlockTransformer<T = unknown> {
     if (!this.state.currentBlock && this.state.pendingBlocks.length > 0) {
       this.state.currentBlock = this.state.pendingBlocks.shift()!
       this.state.currentProgress = 0
+      this.clearCache() // 新 block，清除缓存
     }
 
     if (this.state.currentBlock) {
@@ -366,23 +400,77 @@ export class BlockTransformer<T = unknown> {
       return
     }
 
-    const total = this.countChars(block.node)
+    // 使用缓存的字符数，避免重复计算
+    const total = this.getTotalChars()
     const step = this.getStep()
+    const prevProgress = this.state.currentProgress
     
-    this.state.currentProgress = Math.min(this.state.currentProgress + step, total)
+    this.state.currentProgress = Math.min(prevProgress + step, total)
+
+    // 如果是 fade-in 效果，添加新的 chunk
+    if (this.options.effect === 'fade-in' && this.state.currentProgress > prevProgress) {
+      // 从 block.node 中提取新增的字符
+      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) {
-      // 当前 block 完成
+      // 当前 block 完成，清空 chunks 和缓存
       this.notifyComplete(block.node)
       this.state.completedBlocks.push(block)
       this.state.currentBlock = null
       this.state.currentProgress = 0
+      this.chunks = []
+      this.clearCache()
       this.processNext()
     }
   }
 
+  /**
+   * 从 AST 节点中提取指定范围的文本
+   */
+  private extractText(node: RootContent, start: number, end: number): string {
+    let result = ''
+    let charIndex = 0
+
+    function traverse(n: AstNode): boolean {
+      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 as AstNode)
+    return result
+  }
+
   private getStep(): number {
     const { charsPerTick } = this.options
     if (typeof charsPerTick === 'number') {
@@ -397,6 +485,8 @@ export class BlockTransformer<T = unknown> {
     if (this.state.pendingBlocks.length > 0) {
       this.state.currentBlock = this.state.pendingBlocks.shift()!
       this.state.currentProgress = 0
+      this.chunks = []
+      this.clearCache() // 新 block，清除缓存
       this.emit()
       // 继续运行（rAF 已经在调度中）
     } else {
@@ -437,7 +527,7 @@ export class BlockTransformer<T = unknown> {
     return defaultCountChars(node)
   }
 
-  private sliceNode(node: RootContent, chars: number): RootContent | null {
+  private sliceNode(node: RootContent, chars: number, accumulatedChunks?: AccumulatedChunks): RootContent | null {
     // 先找匹配的插件
     for (const plugin of this.options.plugins) {
       if (plugin.match?.(node) && plugin.sliceNode) {
@@ -446,8 +536,8 @@ export class BlockTransformer<T = unknown> {
         if (result !== null) return result
       }
     }
-    // 默认截断
-    return defaultSliceAst(node, chars)
+    // 默认截断，传入累积的 chunks
+    return defaultSliceAst(node, chars, accumulatedChunks)
   }
 
   private notifyComplete(node: RootContent): void {
@@ -457,6 +547,84 @@ export class BlockTransformer<T = unknown> {
       }
     }
   }
+
+  // ============ 缓存管理方法 ============
+
+  /**
+   * 更新缓存的 displayNode
+   * 使用真正的增量追加模式：只处理新增部分，不重复遍历已稳定的节点
+   */
+  private updateCachedDisplayNode(): void {
+    const block = this.state.currentBlock
+    if (!block) {
+      this.cachedDisplayNode = null
+      this.cachedProgress = 0
+      return
+    }
+
+    const currentProgress = this.state.currentProgress
+
+    // 如果进度减少了（内容更新导致），需要重新截断
+    if (currentProgress < this.cachedProgress) {
+      this.cachedDisplayNode = this.sliceNode(
+        block.node,
+        currentProgress,
+        this.getAccumulatedChunks()
+      )
+      this.cachedProgress = currentProgress
+      return
+    }
+
+    // 如果进度增加了，使用增量追加模式
+    if (currentProgress > this.cachedProgress && this.cachedDisplayNode) {
+      // 真正的增量追加：只处理新增部分，不重复遍历已稳定的节点
+      this.cachedDisplayNode = appendToAst(
+        this.cachedDisplayNode,
+        block.node,
+        this.cachedProgress,
+        currentProgress,
+        this.getAccumulatedChunks()
+      )
+      this.cachedProgress = currentProgress
+    } else if (!this.cachedDisplayNode) {
+      // 首次截断
+      this.cachedDisplayNode = this.sliceNode(
+        block.node,
+        currentProgress,
+        this.getAccumulatedChunks()
+      )
+      this.cachedProgress = currentProgress
+    }
+  }
+
+  /**
+   * 获取总字符数（带缓存）
+   */
+  private getTotalChars(): number {
+    if (this.cachedTotalChars === null && this.state.currentBlock) {
+      this.cachedTotalChars = this.countChars(this.state.currentBlock.node)
+    }
+    return this.cachedTotalChars ?? 0
+  }
+
+  /**
+   * 清除缓存（当 block 切换或内容更新时）
+   */
+  private clearCache(): void {
+    this.cachedDisplayNode = null
+    this.cachedTotalChars = null
+    this.cachedProgress = 0
+  }
+
+  /**
+   * 获取累积的 chunks（用于 fade-in 效果）
+   */
+  private getAccumulatedChunks(): AccumulatedChunks | undefined {
+    if (this.options.effect === 'fade-in' && this.chunks.length > 0) {
+      return { stableChars: 0, chunks: this.chunks }
+    }
+    return undefined
+  }
 }
 
 /**

package/src/transformer/index.ts

@@ -20,6 +20,7 @@ export type {
 
 // 工具函数
 export { countChars, sliceAst, cloneNode } from './utils'
+export type { TextChunk, TextNodeWithChunks, AccumulatedChunks } from './utils'
 
 // 内置插件
 export {

package/src/transformer/types.ts

@@ -1,4 +1,5 @@
 import type { RootContent } from 'mdast'
+import type { BlockStatus } from '../types'
 
 /**
  * 源 Block 类型（来自解析器）
@@ -9,7 +10,7 @@ export interface SourceBlock<T = unknown> {
   /** AST 节点 */
   node: RootContent
   /** 块状态 */
-  status: 'pending' | 'stable' | 'completed'
+  status: BlockStatus
   /** 用户自定义元数据 */
   meta?: T
 }
@@ -29,9 +30,10 @@ export interface DisplayBlock<T = unknown> extends SourceBlock<T> {
 /**
  * 动画效果类型
  * - 'none': 无动画效果
- * - 'typing': 打字机光标效果（需配合 CSS）
+ * - 'fade-in': 新增字符渐入效果
+ * - 'typing': 打字机光标效果
  */
-export type AnimationEffect = 'none' | 'typing'
+export type AnimationEffect = 'none' | 'fade-in' | 'typing'
 
 /**
  * Transformer 插件