@x-oasis/map-diff-range 0.1.0

package/dist/map-diff-range.esm.js

@@ -0,0 +1,213 @@
+import { diff_match_patch } from 'diff-match-patch';
+
+var DIFF_DELETE = -1;
+var DIFF_INSERT = 1;
+var DIFF_EQUAL = 0;
+function mapNewerRangeToOlder(olderContent, newerContent, startOffset, endOffset) {
+  var dmp = new diff_match_patch();
+  var diffs = dmp.diff_main(olderContent, newerContent);
+  dmp.diff_cleanupSemantic(diffs);
+  var newerOffset = 0;
+  var olderOffset = 0;
+  var olderStart = null;
+  var olderEnd = null;
+  for (var i = 0; i < diffs.length; i++) {
+    var _diffs$i = diffs[i],
+      op = _diffs$i[0],
+      text = _diffs$i[1];
+    var len = text.length;
+    var nextDiff = i < diffs.length - 1 ? diffs[i + 1] : null;
+    if (op === DIFF_EQUAL) {
+      var rangeStart = newerOffset;
+      var rangeEnd = newerOffset + len;
+      if (olderStart === null && startOffset >= rangeStart && startOffset < rangeEnd) {
+        olderStart = olderOffset + (startOffset - rangeStart);
+      }
+      if (olderEnd === null && endOffset > rangeStart && endOffset <= rangeEnd) {
+        var offsetInRange = endOffset - rangeStart;
+        olderEnd = olderOffset + offsetInRange;
+        if (endOffset === rangeEnd && nextDiff && nextDiff[0] === DIFF_DELETE) {
+          olderEnd = olderOffset + len + nextDiff[1].length;
+        }
+      }
+      newerOffset += len;
+      olderOffset += len;
+    } else if (op === DIFF_INSERT) {
+      var _rangeStart = newerOffset;
+      var _rangeEnd = newerOffset + len;
+      if (olderStart === null && startOffset >= _rangeStart && startOffset < _rangeEnd) {
+        olderStart = olderOffset;
+      }
+      if (olderEnd === null && endOffset > _rangeStart && endOffset <= _rangeEnd) {
+        olderEnd = olderOffset;
+      }
+      newerOffset += len;
+    } else if (op === DIFF_DELETE) {
+      if (olderStart === null && startOffset <= newerOffset) {
+        olderStart = olderOffset;
+      }
+      if (olderEnd === null && endOffset <= newerOffset) {
+        olderEnd = endOffset === newerOffset ? olderOffset + len : olderOffset;
+      } else if (olderEnd === null && endOffset === newerOffset) {
+        olderEnd = olderOffset + len;
+      }
+      olderOffset += len;
+    }
+    if (olderStart !== null && olderEnd !== null) break;
+  }
+  if (olderStart === null) olderStart = olderOffset;
+  if (olderEnd === null) olderEnd = olderOffset;
+  return {
+    start: olderStart,
+    end: olderEnd
+  };
+}
+function mapOlderRangeToNewer(olderContent, newerContent, startOffset, endOffset) {
+  var dmp = new diff_match_patch();
+  var diffs = dmp.diff_main(olderContent, newerContent);
+  dmp.diff_cleanupSemantic(diffs);
+  var olderOffset = 0;
+  var newerOffset = 0;
+  var newerStart = null;
+  var newerEnd = null;
+  for (var i = 0; i < diffs.length; i++) {
+    var _diffs$i2 = diffs[i],
+      op = _diffs$i2[0],
+      text = _diffs$i2[1];
+    var len = text.length;
+    var nextDiff = i < diffs.length - 1 ? diffs[i + 1] : null;
+    if (op === DIFF_EQUAL) {
+      var oldRangeStart = olderOffset;
+      var oldRangeEnd = olderOffset + len;
+      if (newerStart === null && startOffset >= oldRangeStart && startOffset < oldRangeEnd) {
+        newerStart = newerOffset + (startOffset - oldRangeStart);
+      }
+      if (newerEnd === null && endOffset > oldRangeStart && endOffset <= oldRangeEnd) {
+        var offsetInRange = endOffset - oldRangeStart;
+        newerEnd = newerOffset + offsetInRange;
+        if (endOffset === oldRangeEnd && nextDiff && nextDiff[0] === DIFF_INSERT) {
+          newerEnd = newerOffset + len + nextDiff[1].length;
+        }
+      }
+      olderOffset += len;
+      newerOffset += len;
+    } else if (op === DIFF_INSERT) {
+      newerOffset += len;
+    } else if (op === DIFF_DELETE) {
+      var _oldRangeStart = olderOffset;
+      var _oldRangeEnd = olderOffset + len;
+      if (newerStart === null && startOffset >= _oldRangeStart && startOffset < _oldRangeEnd) {
+        newerStart = newerOffset;
+      }
+      if (newerEnd === null && endOffset > _oldRangeStart && endOffset <= _oldRangeEnd) {
+        newerEnd = newerOffset;
+      } else if (newerEnd === null && endOffset <= olderOffset) {
+        newerEnd = newerOffset;
+      }
+      olderOffset += len;
+    }
+    if (newerStart !== null && newerEnd !== null) break;
+  }
+  if (newerStart === null) newerStart = newerOffset;
+  if (newerEnd === null) newerEnd = newerOffset;
+  return {
+    start: newerStart,
+    end: newerEnd
+  };
+}
+function analyzeFragmentChange(originalFragment, finalFragment) {
+  var dmp = new diff_match_patch();
+  var diffs = dmp.diff_main(originalFragment, finalFragment);
+  dmp.diff_cleanupSemantic(diffs);
+  var hasDelete = diffs.some(function (_ref) {
+    var op = _ref[0];
+    return op === DIFF_DELETE;
+  });
+  var hasInsert = diffs.some(function (_ref2) {
+    var op = _ref2[0];
+    return op === DIFF_INSERT;
+  });
+  var equal = !hasDelete && !hasInsert;
+  var onlyDeletion = hasDelete && !hasInsert;
+  var onlyInsertion = !hasDelete && hasInsert;
+  var replacement = hasDelete && hasInsert;
+  var summary;
+  if (equal) {
+    summary = '无变更';
+  } else if (onlyDeletion) {
+    var deleted = diffs.filter(function (_ref3) {
+      var op = _ref3[0];
+      return op === DIFF_DELETE;
+    }).map(function (_ref4) {
+      var text = _ref4[1];
+      return text;
+    }).join('');
+    summary = "\u5220\u9664: " + formatSnippet(deleted);
+  } else if (onlyInsertion) {
+    var inserted = diffs.filter(function (_ref5) {
+      var op = _ref5[0];
+      return op === DIFF_INSERT;
+    }).map(function (_ref6) {
+      var text = _ref6[1];
+      return text;
+    }).join('');
+    summary = "\u65B0\u589E: " + formatSnippet(inserted);
+  } else {
+    var _deleted = diffs.filter(function (_ref7) {
+      var op = _ref7[0];
+      return op === DIFF_DELETE;
+    }).map(function (_ref8) {
+      var text = _ref8[1];
+      return text;
+    }).join('');
+    var _inserted = diffs.filter(function (_ref9) {
+      var op = _ref9[0];
+      return op === DIFF_INSERT;
+    }).map(function (_ref10) {
+      var text = _ref10[1];
+      return text;
+    }).join('');
+    summary = "\u66FF\u6362: " + formatSnippet(_deleted) + " \u2192 " + formatSnippet(_inserted);
+  }
+  return {
+    originalFragment: originalFragment,
+    finalFragment: finalFragment,
+    equal: equal,
+    onlyDeletion: onlyDeletion,
+    onlyInsertion: onlyInsertion,
+    replacement: replacement,
+    summary: summary,
+    diffs: diffs
+  };
+}
+function formatSnippet(s, maxLen) {
+  if (maxLen === void 0) {
+    maxLen = 40;
+  }
+  var t = s.replace(/\s+/g, ' ').trim();
+  if (t.length <= maxLen) return t;
+  return t.slice(0, maxLen) + "\u2026";
+}
+function resolveGroupChangeFragments(options) {
+  var currentContent = options.currentContent,
+    nextContent = options.nextContent,
+    currentRange = options.currentRange;
+  var startOffset = currentRange.start,
+    endOffset = currentRange.end;
+  if (startOffset < 0 || endOffset < 0 || startOffset > endOffset || endOffset > currentContent.length) {
+    return undefined;
+  }
+  var nextRange = mapOlderRangeToNewer(currentContent, nextContent, startOffset, endOffset);
+  var currentFragment = currentContent.substring(startOffset, endOffset);
+  var nextFragment = nextContent.substring(nextRange.start, nextRange.end);
+  var changeAnalysis = analyzeFragmentChange(currentFragment, nextFragment);
+  return {
+    nextRange: nextRange,
+    currentFragment: currentFragment,
+    nextFragment: nextFragment,
+    changeAnalysis: changeAnalysis
+  };
+}
+
+export { analyzeFragmentChange, mapNewerRangeToOlder, mapOlderRangeToNewer, resolveGroupChangeFragments };
+//# sourceMappingURL=map-diff-range.esm.js.map

package/dist/map-diff-range.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-diff-range.esm.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * 基于 diff-match-patch 的 range 映射与变更分析工具\n * 用于在 originalContent / currentContent / finalContent 之间映射 range，并分析片段级变更\n *\n * 参考: https://github.com/red-armor/x-oasis/blob/main/packages/diff/diff-match-patch/src/index.ts#L123\n */\n\nimport { diff_match_patch } from 'diff-match-patch';\n\n/** diff 操作常量，与 diff-match-patch 一致 */\nconst DIFF_DELETE = -1;\nconst DIFF_INSERT = 1;\nconst DIFF_EQUAL = 0;\n\n/** 单端 range，start 含头，end 含尾（substring 语义） */\nexport interface Range {\n  start: number;\n  end: number;\n}\n\n/** 片段级变更分析结果 */\nexport interface FragmentChangeAnalysis {\n  /** 原始片段内容 */\n  originalFragment: string;\n  /** 最终片段内容 */\n  finalFragment: string;\n  /** 是否完全相同 */\n  equal: boolean;\n  /** 仅删除（无新增） */\n  onlyDeletion: boolean;\n  /** 仅新增（无删除） */\n  onlyInsertion: boolean;\n  /** 既有删除又有新增（替换） */\n  replacement: boolean;\n  /** 语义化描述（简短） */\n  summary: string;\n  /** 详细 diff 条目，便于上层做展示或进一步处理 */\n  diffs: Array<[number, string]>;\n}\n\n/**\n * 将「新内容」中的 offset range 映射到「旧内容」中的 offset range\n * 等价于 x-oasis 的 mapCurrentRangeToOriginal：diffs = diff_main(older, newer)，给定 newer 上的 [start,end]，返回 older 上的 [start,end]\n *\n * @param olderContent 旧内容（diff 的 text1）\n * @param newerContent 新内容（diff 的 text2）\n * @param startOffset 新内容中的 range 起始 offset\n * @param endOffset 新内容中的 range 结束 offset（不含尾，即 [startOffset, endOffset) 或含尾由调用方约定，此处按 substring 含头含尾）\n * @returns 旧内容中对应的 range；若越界或无效则返回 { start: 0, end: 0 }\n */\nexport function mapNewerRangeToOlder(\n  olderContent: string,\n  newerContent: string,\n  startOffset: number,\n  endOffset: number\n): Range {\n  const dmp = new diff_match_patch();\n  const diffs = dmp.diff_main(olderContent, newerContent);\n  dmp.diff_cleanupSemantic(diffs);\n\n  let newerOffset = 0;\n  let olderOffset = 0;\n  let olderStart: number | null = null;\n  let olderEnd: number | null = null;\n\n  for (let i = 0; i < diffs.length; i++) {\n    const [op, text] = diffs[i];\n    const len = text.length;\n    const nextDiff = i < diffs.length - 1 ? diffs[i + 1] : null;\n\n    if (op === DIFF_EQUAL) {\n      const rangeStart = newerOffset;\n      const rangeEnd = newerOffset + len;\n\n      if (\n        olderStart === null &&\n        startOffset >= rangeStart &&\n        startOffset < rangeEnd\n      ) {\n        olderStart = olderOffset + (startOffset - rangeStart);\n      }\n      if (\n        olderEnd === null &&\n        endOffset > rangeStart &&\n        endOffset <= rangeEnd\n      ) {\n        const offsetInRange = endOffset - rangeStart;\n        olderEnd = olderOffset + offsetInRange;\n        if (endOffset === rangeEnd && nextDiff && nextDiff[0] === DIFF_DELETE) {\n          olderEnd = olderOffset + len + nextDiff[1].length;\n        }\n      }\n\n      newerOffset += len;\n      olderOffset += len;\n    } else if (op === DIFF_INSERT) {\n      const rangeStart = newerOffset;\n      const rangeEnd = newerOffset + len;\n\n      if (\n        olderStart === null &&\n        startOffset >= rangeStart &&\n        startOffset < rangeEnd\n      ) {\n        olderStart = olderOffset;\n      }\n      if (\n        olderEnd === null &&\n        endOffset > rangeStart &&\n        endOffset <= rangeEnd\n      ) {\n        olderEnd = olderOffset;\n      }\n\n      newerOffset += len;\n    } else if (op === DIFF_DELETE) {\n      if (olderStart === null && startOffset <= newerOffset) {\n        olderStart = olderOffset;\n      }\n      if (olderEnd === null && endOffset <= newerOffset) {\n        olderEnd = endOffset === newerOffset ? olderOffset + len : olderOffset;\n      } else if (olderEnd === null && endOffset === newerOffset) {\n        olderEnd = olderOffset + len;\n      }\n\n      olderOffset += len;\n    }\n\n    if (olderStart !== null && olderEnd !== null) break;\n  }\n\n  if (olderStart === null) olderStart = olderOffset;\n  if (olderEnd === null) olderEnd = olderOffset;\n\n  return { start: olderStart, end: olderEnd };\n}\n\n/**\n * 将「旧内容」中的 offset range 映射到「新内容」中的 offset range\n * 与 mapNewerRangeToOlder 对称：diffs = diff_main(older, newer)，给定 older 上的 [start,end]，返回 newer 上的 [start,end]\n *\n * @param olderContent 旧内容（diff 的 text1）\n * @param newerContent 新内容（diff 的 text2）\n * @param startOffset 旧内容中的 range 起始 offset\n * @param endOffset 旧内容中的 range 结束 offset\n * @returns 新内容中对应的 range\n */\nexport function mapOlderRangeToNewer(\n  olderContent: string,\n  newerContent: string,\n  startOffset: number,\n  endOffset: number\n): Range {\n  const dmp = new diff_match_patch();\n  const diffs = dmp.diff_main(olderContent, newerContent);\n  dmp.diff_cleanupSemantic(diffs);\n\n  let olderOffset = 0;\n  let newerOffset = 0;\n  let newerStart: number | null = null;\n  let newerEnd: number | null = null;\n\n  for (let i = 0; i < diffs.length; i++) {\n    const [op, text] = diffs[i];\n    const len = text.length;\n    const nextDiff = i < diffs.length - 1 ? diffs[i + 1] : null;\n\n    if (op === DIFF_EQUAL) {\n      const oldRangeStart = olderOffset;\n      const oldRangeEnd = olderOffset + len;\n\n      if (\n        newerStart === null &&\n        startOffset >= oldRangeStart &&\n        startOffset < oldRangeEnd\n      ) {\n        newerStart = newerOffset + (startOffset - oldRangeStart);\n      }\n      if (\n        newerEnd === null &&\n        endOffset > oldRangeStart &&\n        endOffset <= oldRangeEnd\n      ) {\n        const offsetInRange = endOffset - oldRangeStart;\n        newerEnd = newerOffset + offsetInRange;\n        if (\n          endOffset === oldRangeEnd &&\n          nextDiff &&\n          nextDiff[0] === DIFF_INSERT\n        ) {\n          newerEnd = newerOffset + len + nextDiff[1].length;\n        }\n      }\n\n      olderOffset += len;\n      newerOffset += len;\n    } else if (op === DIFF_INSERT) {\n      newerOffset += len;\n    } else if (op === DIFF_DELETE) {\n      const oldRangeStart = olderOffset;\n      const oldRangeEnd = olderOffset + len;\n\n      if (\n        newerStart === null &&\n        startOffset >= oldRangeStart &&\n        startOffset < oldRangeEnd\n      ) {\n        newerStart = newerOffset;\n      }\n      if (\n        newerEnd === null &&\n        endOffset > oldRangeStart &&\n        endOffset <= oldRangeEnd\n      ) {\n        newerEnd = newerOffset;\n      } else if (newerEnd === null && endOffset <= olderOffset) {\n        newerEnd = newerOffset;\n      }\n\n      olderOffset += len;\n    }\n\n    if (newerStart !== null && newerEnd !== null) break;\n  }\n\n  if (newerStart === null) newerStart = newerOffset;\n  if (newerEnd === null) newerEnd = newerOffset;\n\n  return { start: newerStart, end: newerEnd };\n}\n\n/**\n * 对比两段片段内容，分析发生的变更类型并生成简短描述\n *\n * @param originalFragment 原始片段\n * @param finalFragment 变更后片段\n * @returns 变更分析结果\n */\nexport function analyzeFragmentChange(\n  originalFragment: string,\n  finalFragment: string\n): FragmentChangeAnalysis {\n  const dmp = new diff_match_patch();\n  const diffs = dmp.diff_main(originalFragment, finalFragment);\n  dmp.diff_cleanupSemantic(diffs);\n\n  const hasDelete = diffs.some(([op]) => op === DIFF_DELETE);\n  const hasInsert = diffs.some(([op]) => op === DIFF_INSERT);\n  const equal = !hasDelete && !hasInsert;\n  const onlyDeletion = hasDelete && !hasInsert;\n  const onlyInsertion = !hasDelete && hasInsert;\n  const replacement = hasDelete && hasInsert;\n\n  let summary: string;\n  if (equal) {\n    summary = '无变更';\n  } else if (onlyDeletion) {\n    const deleted = diffs\n      .filter(([op]) => op === DIFF_DELETE)\n      .map(([, text]) => text)\n      .join('');\n    summary = `删除: ${formatSnippet(deleted)}`;\n  } else if (onlyInsertion) {\n    const inserted = diffs\n      .filter(([op]) => op === DIFF_INSERT)\n      .map(([, text]) => text)\n      .join('');\n    summary = `新增: ${formatSnippet(inserted)}`;\n  } else {\n    const deleted = diffs\n      .filter(([op]) => op === DIFF_DELETE)\n      .map(([, text]) => text)\n      .join('');\n    const inserted = diffs\n      .filter(([op]) => op === DIFF_INSERT)\n      .map(([, text]) => text)\n      .join('');\n    summary = `替换: ${formatSnippet(deleted)} → ${formatSnippet(inserted)}`;\n  }\n\n  return {\n    originalFragment,\n    finalFragment,\n    equal,\n    onlyDeletion,\n    onlyInsertion,\n    replacement,\n    summary,\n    diffs,\n  };\n}\n\n/** 片段截断展示，避免过长 */\nfunction formatSnippet(s: string, maxLen = 40): string {\n  const t = s.replace(/\\s+/g, ' ').trim();\n  if (t.length <= maxLen) return t;\n  return `${t.slice(0, maxLen)}…`;\n}\n\n/**\n * 根据当前内容和 range，找到下一个内容对应的 range\n * 用于将 currentContent 中的 range 映射到 nextContent 中对应的 range\n *\n * @param options.currentContent 当前文件内容\n * @param options.nextContent 下一个文件内容\n * @param options.currentRange 当前文件中需要映射的 range\n * @returns 映射得到的 nextRange、对应片段、以及片段级变更分析；若无法解析则返回 undefined\n */\nexport function resolveGroupChangeFragments(options: {\n  currentContent: string;\n  nextContent: string;\n  currentRange: Range;\n}):\n  | {\n      nextRange: Range;\n      currentFragment: string;\n      nextFragment: string;\n      changeAnalysis: FragmentChangeAnalysis;\n    }\n  | undefined {\n  const { currentContent, nextContent, currentRange } = options;\n\n  const { start: startOffset, end: endOffset } = currentRange;\n\n  if (\n    startOffset < 0 ||\n    endOffset < 0 ||\n    startOffset > endOffset ||\n    endOffset > currentContent.length\n  ) {\n    return undefined;\n  }\n\n  const nextRange = mapOlderRangeToNewer(\n    currentContent,\n    nextContent,\n    startOffset,\n    endOffset\n  );\n\n  const currentFragment = currentContent.substring(startOffset, endOffset);\n  const nextFragment = nextContent.substring(nextRange.start, nextRange.end);\n\n  const changeAnalysis = analyzeFragmentChange(currentFragment, nextFragment);\n\n  return {\n    nextRange,\n    currentFragment,\n    nextFragment,\n    changeAnalysis,\n  };\n}\n"],"names":["DIFF_DELETE","DIFF_INSERT","DIFF_EQUAL","mapNewerRangeToOlder","olderContent","newerContent","startOffset","endOffset","dmp","diff_match_patch","diffs","diff_main","diff_cleanupSemantic","newerOffset","olderOffset","olderStart","olderEnd","i","length","_diffs$i","op","text","len","nextDiff","rangeStart","rangeEnd","offsetInRange","start","end","mapOlderRangeToNewer","newerStart","newerEnd","_diffs$i2","oldRangeStart","oldRangeEnd","analyzeFragmentChange","originalFragment","finalFragment","hasDelete","some","_ref","hasInsert","_ref2","equal","onlyDeletion","onlyInsertion","replacement","summary","deleted","filter","_ref3","map","_ref4","join","formatSnippet","inserted","_ref5","_ref6","_ref7","_ref8","_ref9","_ref10","s","maxLen","t","replace","trim","slice","resolveGroupChangeFragments","options","currentContent","nextContent","currentRange","undefined","nextRange","currentFragment","substring","nextFragment","changeAnalysis"],"mappings":"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"}

package/examples/.turbo/turbo-build.log

@@ -0,0 +1,12 @@
+
+> map-diff-range-example@0.1.0 build /home/runner/work/x-oasis/x-oasis/packages/diff/map-diff-range/examples
+> vite build
+
+vite v4.1.4 building for production...
+transforming...
+✓ 34 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.html                   0.54 kB
+dist/assets/index-a9dac6a7.css    3.25 kB │ gzip:  1.06 kB
+dist/assets/index-07c5d0de.js   168.84 kB │ gzip: 54.30 kB

package/examples/README.md

@@ -0,0 +1,111 @@
+# Examples
+
+这个目录包含 `@x-oasis/map-diff-range` 的交互式示例。
+
+## 运行示例
+
+这是一个基于 Vite + React 的项目。
+
+### 安装依赖
+
+在项目根目录运行：
+
+```bash
+pnpm install
+```
+
+### 启动开发服务器
+
+在 `examples` 目录下运行：
+
+```bash
+cd packages/diff/map-diff-range/examples
+pnpm install
+pnpm dev
+```
+
+或者从项目根目录运行：
+
+```bash
+pnpm install
+cd packages/diff/map-diff-range/examples
+pnpm dev
+```
+
+开发服务器将在 `http://localhost:3000` 启动，并自动在浏览器中打开。
+
+### 构建生产版本
+
+```bash
+pnpm build
+```
+
+### 预览生产构建
+
+```bash
+pnpm preview
+```
+
+## 功能说明
+
+示例页面包含以下功能：
+
+1. **三路文件输入**: 并排显示原始文件、当前文件和最终文件内容
+2. **Range 输入**: 输入当前文件中发生变更的 offset range（startOffset/endOffset）
+3. **Range 映射**: 自动计算并显示：
+   - Original Range：原始文件中对应的 range
+   - Final Range：最终文件中对应的 range
+4. **片段提取**: 显示从原始文件和最终文件中提取的对应片段
+5. **变更分析**: 显示详细的变更分析：
+   - 变更类型（equal、onlyDeletion、onlyInsertion、replacement）
+   - 变更摘要（语义化描述）
+   - 详细 diff 条目（带颜色编码）
+6. **快速示例**: 提供预设的测试场景按钮，快速测试不同场景
+
+## 示例场景
+
+### 场景 1: Class 属性变更
+
+- Original: `<h1 class="title">Name</h1>`
+- Current: `<h1 class="title text-xl">Name</h1>`
+- Final: `<h1 class="text-xl font-bold">Name</h1>`
+- Range: startOffset: 4, endOffset: 30
+- 说明: 演示 class 属性的变更，从 "title" 变为 "text-xl font-bold"
+
+### 场景 2: 文本替换
+
+- Original: `Hello World`
+- Current: `Hello Beautiful World`
+- Final: `Hello Amazing World`
+- Range: startOffset: 6, endOffset: 15
+- 说明: 演示文本的替换，从 "Beautiful" 变为 "Amazing"
+
+### 场景 3: 单词替换
+
+- Original: `The quick brown fox`
+- Current: `The fast brown fox`
+- Final: `The slow brown fox`
+- Range: startOffset: 4, endOffset: 8
+- 说明: 演示单词的替换，从 "quick" → "fast" → "slow"
+
+## 技术实现
+
+示例使用：
+- **Vite**: 快速的前端构建工具
+- **React**: UI 框架
+- **TypeScript**: 类型安全
+- **@x-oasis/map-diff-range**: 核心库，提供 range 映射和变更分析功能
+- **diff-match-patch**: 差异计算库
+
+## GitHub Pages 部署
+
+示例已配置支持 GitHub Pages 部署。在 `vite.config.ts` 中：
+
+- 支持 `GITHUB_PAGES` 环境变量
+- 自动配置 base 路径
+- 支持子路径部署
+
+部署时设置环境变量：
+- `GITHUB_PAGES=true`
+- `GITHUB_REPOSITORY=owner/repo-name`
+- `GITHUB_PAGES_PATH=map-diff-range`

package/examples/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Map Diff Range - Range Mapping and Change Analysis Example</title>
+    <link rel="stylesheet" href="https://esm.sh/@git-diff-view/react@latest/styles/diff-view.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/examples/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "map-diff-range-example",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@git-diff-view/react": "latest",
+    "@git-diff-view/file": "latest",
+    "diff-match-patch": "^1.0.5"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^4.1.4",
+    "typescript": "^4.8.3"
+  },
+  "publishConfig": {
+    "access": "private"
+  }
+}

package/examples/src/App.tsx

@@ -0,0 +1,257 @@
+import React, { useState } from 'react';
+import { resolveGroupChangeFragments } from '@x-oasis/map-diff-range';
+import './index.css';
+
+const App: React.FC = () => {
+  const [currentContent, setCurrentContent] = useState(
+    '<h1 class="text-[--color-text-title] text-2xl font-bold">姓名3333444</h1>'
+  );
+  const [nextContent, setNextContent] = useState(
+    '<h1 class="text-2xl font-bold text-[--color-primary-pressing]">姓名3</h1>'
+  );
+  const [startOffset, setStartOffset] = useState<number>(244);
+  const [endOffset, setEndOffset] = useState<number>(315);
+  const [result, setResult] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAnalyze = () => {
+    setError(null);
+    try {
+      const analysis = resolveGroupChangeFragments({
+        currentContent,
+        nextContent,
+        currentRange: { start: startOffset, end: endOffset },
+      });
+
+      if (analysis) {
+        setResult(analysis);
+      } else {
+        setError('无法解析变更：offset range 无效或超出范围');
+      }
+    } catch (err: any) {
+      setError(err.message || '分析失败');
+    }
+  };
+
+  const getDiffEntryClass = (op: number) => {
+    if (op === 1) return 'insert';
+    if (op === -1) return 'delete';
+    return 'equal';
+  };
+
+  const getDiffEntryLabel = (op: number) => {
+    if (op === 1) return '+';
+    if (op === -1) return '-';
+    return '=';
+  };
+
+  return (
+    <div className="container">
+      <h1>Map Diff Range - Range Mapping and Change Analysis</h1>
+      <p className="subtitle">
+        在 currentContent 和 nextContent 之间映射 range，并分析片段级变更
+      </p>
+
+      <div className="info-box">
+        <strong>使用说明：</strong>
+        <ul style={{ marginTop: '8px', marginLeft: '20px' }}>
+          <li>输入两个文件内容：当前内容、下一个内容</li>
+          <li>输入当前文件中需要映射的 range（startOffset 和 endOffset）</li>
+          <li>点击"分析变更"查看映射结果和变更分析</li>
+          <li>系统会自动计算 nextRange，并分析片段间的变更</li>
+        </ul>
+      </div>
+
+      <div className="section">
+        <div className="section-title">文件内容输入</div>
+        <div className="file-comparison">
+          <div className="file-panel">
+            <div className="file-header">当前内容 (currentContent)</div>
+            <textarea
+              className="file-content"
+              value={currentContent}
+              onChange={(e) => setCurrentContent(e.target.value)}
+              spellCheck={false}
+              placeholder="输入当前文件内容..."
+            />
+          </div>
+          <div className="file-panel">
+            <div className="file-header">下一个内容 (nextContent)</div>
+            <textarea
+              className="file-content"
+              value={nextContent}
+              onChange={(e) => setNextContent(e.target.value)}
+              spellCheck={false}
+              placeholder="输入下一个文件内容..."
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="section">
+        <div className="section-title">变更 Range 输入</div>
+        <div className="controls">
+          <div className="control-group">
+            <label>Start Offset (基于 currentContent)</label>
+            <input
+              type="number"
+              value={startOffset}
+              onChange={(e) => setStartOffset(Number(e.target.value))}
+              min="0"
+            />
+          </div>
+          <div className="control-group">
+            <label>End Offset (基于 currentContent)</label>
+            <input
+              type="number"
+              value={endOffset}
+              onChange={(e) => setEndOffset(Number(e.target.value))}
+              min="0"
+            />
+          </div>
+          <button onClick={handleAnalyze}>分析变更</button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="error-message">
+          <strong>错误：</strong> {error}
+        </div>
+      )}
+
+      {result && (
+        <div className="section">
+          <div className="section-title">分析结果</div>
+
+          <div className="analysis-panel">
+            <div className="analysis-item">
+              <strong>Range 映射</strong>
+              <div className="analysis-value">
+                <div>
+                  Next Range:{' '}
+                  <span className="range-info">
+                    [{result.nextRange.start}, {result.nextRange.end}]
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="analysis-item">
+              <strong>当前片段 (currentFragment)</strong>
+              <div className="analysis-value">{result.currentFragment}</div>
+            </div>
+
+            <div className="analysis-item">
+              <strong>下一个片段 (nextFragment)</strong>
+              <div className="analysis-value">{result.nextFragment}</div>
+            </div>
+
+            <div className="analysis-item">
+              <strong>变更类型</strong>
+              <div className="analysis-value">
+                <div>
+                  Equal:{' '}
+                  <span className="range-info">
+                    {String(result.changeAnalysis.equal)}
+                  </span>
+                </div>
+                <div>
+                  Only Deletion:{' '}
+                  <span className="range-info">
+                    {String(result.changeAnalysis.onlyDeletion)}
+                  </span>
+                </div>
+                <div>
+                  Only Insertion:{' '}
+                  <span className="range-info">
+                    {String(result.changeAnalysis.onlyInsertion)}
+                  </span>
+                </div>
+                <div>
+                  Replacement:{' '}
+                  <span className="range-info">
+                    {String(result.changeAnalysis.replacement)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="analysis-item">
+              <strong>变更摘要 (summary)</strong>
+              <div className="analysis-value">
+                {result.changeAnalysis.summary}
+              </div>
+            </div>
+
+            <div className="analysis-item">
+              <strong>详细 Diff 条目</strong>
+              <div className="analysis-value">
+                {result.changeAnalysis.diffs.map(
+                  (diff: [number, string], index: number) => (
+                    <div
+                      key={index}
+                      className={`diff-entry ${getDiffEntryClass(diff[0])}`}
+                    >
+                      <span style={{ fontWeight: 'bold', marginRight: '5px' }}>
+                        {getDiffEntryLabel(diff[0])}
+                      </span>
+                      {diff[1]}
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="result-panel">
+            <div className="result-title">完整结果 (JSON)</div>
+            <div className="result-content">
+              {JSON.stringify(result, null, 2)}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="section">
+        <div className="section-title">快速测试场景</div>
+        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+          <button
+            className="example-btn"
+            onClick={() => {
+              setCurrentContent('<h1 class="title text-xl">Name</h1>');
+              setNextContent('<h1 class="text-xl font-bold">Name</h1>');
+              setStartOffset(4);
+              setEndOffset(30);
+            }}
+          >
+            场景 1: Class 变更
+          </button>
+          <button
+            className="example-btn"
+            onClick={() => {
+              setCurrentContent('Hello Beautiful World');
+              setNextContent('Hello Amazing World');
+              setStartOffset(6);
+              setEndOffset(15);
+            }}
+          >
+            场景 2: 文本替换
+          </button>
+          <button
+            className="example-btn"
+            onClick={() => {
+              setCurrentContent('The fast brown fox');
+              setNextContent('The slow brown fox');
+              setStartOffset(4);
+              setEndOffset(8);
+            }}
+          >
+            场景 3: 单词替换
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;