refactor: end optimize

Author: Arman19941113

packages/html-diff/src/index.ts

@@ -290,20 +290,72 @@ export default class HtmlDiff {
     )
   }
 
-  private getMatchedBlockList(
-    oldStart = 0,
-    oldEnd: number = this.oldWords.length,
-    newStart = 0,
-    newEnd: number = this.newWords.length,
+  private getMatchedBlockList(): MatchedBlock[] {
+    const n1 = this.oldWords.length
+    const n2 = this.newWords.length
+
+    // 1. sync from start
+    let start: MatchedBlock | null = null
+    let i = 0
+    while (i < n1 && i < n2 && this.oldWords[i] === this.newWords[i]) {
+      i++
+    }
+    if (i >= this.config.minMatchedSize) {
+      start = {
+        oldStart: 0,
+        oldEnd: i,
+        newStart: 0,
+        newEnd: i,
+        size: i,
+      }
+    }
+
+    // 2. sync from end
+    let end: MatchedBlock | null = null
+    let e1 = n1 - 1
+    let e2 = n2 - 1
+    while (i <= e1 && i <= e2 && this.oldWords[e1] === this.newWords[e2]) {
+      e1--
+      e2--
+    }
+    const size = n1 - 1 - e1
+    if (size >= this.config.minMatchedSize) {
+      end = {
+        oldStart: e1 + 1,
+        oldEnd: n1,
+        newStart: e2 + 1,
+        newEnd: n2,
+        size,
+      }
+    }
+
+    const ret = this.computeMatchedBlockList(
+      start ? i : 0,
+      end ? e1 + 1 : n1,
+      start ? i : 0,
+      end ? e2 + 1 : n2,
+    )
+    if (start) ret.unshift(start)
+    if (end) ret.push(end)
+
+    return ret
+  }
+
+  // todo difflib
+  private computeMatchedBlockList(
+    oldStart: number,
+    oldEnd: number,
+    newStart: number,
+    newEnd: number,
     matchedBlockList: MatchedBlock[] = [],
   ): MatchedBlock[] {
-    const matchBlock = this.getBestMatchedBlock(oldStart, oldEnd, newStart, newEnd)
+    const matchBlock = this.computeBestMatchedBlock(oldStart, oldEnd, newStart, newEnd)
     if (!matchBlock) {
       return []
     }
 
     if (oldStart < matchBlock.oldStart && newStart < matchBlock.newStart) {
-      this.getMatchedBlockList(
+      this.computeMatchedBlockList(
         oldStart,
         matchBlock.oldStart,
         newStart,
@@ -313,7 +365,7 @@ export default class HtmlDiff {
     }
     matchedBlockList.push(matchBlock)
     if (oldEnd > matchBlock.oldEnd && newEnd > matchBlock.newEnd) {
-      this.getMatchedBlockList(
+      this.computeMatchedBlockList(
         matchBlock.oldEnd,
         oldEnd,
         matchBlock.newEnd,
@@ -326,7 +378,7 @@ export default class HtmlDiff {
 
   // find the longest matched block between old and new words
   // 滑动窗口 O((N+M)×min(N,M))
-  private getBestMatchedBlock(
+  private computeBestMatchedBlock(
     oldStart: number,
     oldEnd: number,
     newStart: number,

packages/html-diff/tests/__snapshots__/index.spec.ts.snap

@@ -96,3 +96,62 @@ exports[`HtmlDiff > should work with basic replace 2`] = `
   "<div><span class="html-diff-create-text-wrapper">world</span></div>",
 ]
 `;
+
+exports[`HtmlDiff > should work with equal 1`] = `
+"<h1>hello world</h1>
+<p>你若安好，便是晴天</p>"
+`;
+
+exports[`HtmlDiff > should work with equal 2`] = `
+[
+  "<h1>hello world</h1>
+<p>你若安好，便是晴天</p>",
+  "<h1>hello world</h1>
+<p>你若安好，便是晴天</p>",
+]
+`;
+
+exports[`HtmlDiff > should work with equal double 1`] = `
+"<p>hello world</p>
+<p><span class="html-diff-delete-text-wrapper">你若安好，便是晴天</span><span class="html-diff-create-text-wrapper">今天天气很不错</span></p>
+<p>你的微笑总是让我为你着迷</p>"
+`;
+
+exports[`HtmlDiff > should work with equal double 2`] = `
+[
+  "<p data-seq="1">hello world</p>
+<p data-seq="2"><span class="html-diff-delete-text-wrapper">你若安好，便是晴天</span></p>
+<p data-seq="3">你的微笑总是让我为你着迷</p>",
+  "<p data-seq="1">hello world</p>
+<p data-seq="2"><span class="html-diff-create-text-wrapper">今天天气很不错</span></p>
+<p data-seq="3">你的微笑总是让我为你着迷</p>",
+]
+`;
+
+exports[`HtmlDiff > should work with equal end 1`] = `
+"<p>你<span class="html-diff-delete-text-wrapper">有一双会说话的眼睛</span><span class="html-diff-create-text-wrapper">的微笑总是让我为你着迷</span></p>
+<p>你若安好，便是晴天</p>"
+`;
+
+exports[`HtmlDiff > should work with equal end 2`] = `
+[
+  "<p data-seq="1">你<span class="html-diff-delete-text-wrapper">有一双会说话的眼睛</span></p>
+<p data-seq="2">你若安好，便是晴天</p>",
+  "<p data-seq="1">你<span class="html-diff-create-text-wrapper">的微笑总是让我为你着迷</span></p>
+<p data-seq="2">你若安好，便是晴天</p>",
+]
+`;
+
+exports[`HtmlDiff > should work with equal start 1`] = `
+"<p>hello world</p>
+<p><span class="html-diff-delete-text-wrapper">你若安好，便是晴天</span><span class="html-diff-create-text-wrapper">今天天气很不错</span></p>"
+`;
+
+exports[`HtmlDiff > should work with equal start 2`] = `
+[
+  "<p data-seq="1">hello world</p>
+<p data-seq="2"><span class="html-diff-delete-text-wrapper">你若安好，便是晴天</span></p>",
+  "<p data-seq="1">hello world</p>
+<p data-seq="2"><span class="html-diff-create-text-wrapper">今天天气很不错</span></p>",
+]
+`;

packages/html-diff/tests/index.spec.ts

@@ -26,6 +26,48 @@ describe('HtmlDiff', () => {
     expect(diff.getSideBySideContents()).toMatchSnapshot()
   })
 
+  it('should work with equal', function () {
+    const oldHtml = `<h1>hello world</h1>
+<p>你若安好，便是晴天</p>`
+    const newHtml = `<h1>hello world</h1>
+<p>你若安好，便是晴天</p>`
+    const diff = new HtmlDiff(oldHtml, newHtml)
+    expect(diff.getUnifiedContent()).toMatchSnapshot()
+    expect(diff.getSideBySideContents()).toMatchSnapshot()
+  })
+
+  it('should work with equal start', function () {
+    const oldHtml = `<p>hello world</p>
+<p>你若安好，便是晴天</p>`
+    const newHtml = `<p>hello world</p>
+<p>今天天气很不错</p>`
+    const diff = new HtmlDiff(oldHtml, newHtml)
+    expect(diff.getUnifiedContent()).toMatchSnapshot()
+    expect(diff.getSideBySideContents()).toMatchSnapshot()
+  })
+
+  it('should work with equal end', function () {
+    const oldHtml = `<p>你有一双会说话的眼睛</p>
+<p>你若安好，便是晴天</p>`
+    const newHtml = `<p>你的微笑总是让我为你着迷</p>
+<p>你若安好，便是晴天</p>`
+    const diff = new HtmlDiff(oldHtml, newHtml)
+    expect(diff.getUnifiedContent()).toMatchSnapshot()
+    expect(diff.getSideBySideContents()).toMatchSnapshot()
+  })
+
+  it('should work with equal double', function () {
+    const oldHtml = `<p>hello world</p>
+<p>你若安好，便是晴天</p>
+<p>你的微笑总是让我为你着迷</p>`
+    const newHtml = `<p>hello world</p>
+<p>今天天气很不错</p>
+<p>你的微笑总是让我为你着迷</p>`
+    const diff = new HtmlDiff(oldHtml, newHtml)
+    expect(diff.getUnifiedContent()).toMatchSnapshot()
+    expect(diff.getSideBySideContents()).toMatchSnapshot()
+  })
+
   it('should work sample 1', function () {
     const oldHtml = `<div>hello world</div>`
     const newHtml = `<h1>You got a dream. You gotta protect it.</h1>`