@x-oasis/html-fragment-diff 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,15 @@
+
+> @x-oasis/html-fragment-diff@0.1.0 build /home/runner/work/x-oasis/x-oasis/packages/diff/html-fragment-diff
+> tsdx build --tsconfig tsconfig.build.json
+
+@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+⠙ Creating entry file
+✓ Creating entry file 2.2 secs
+⠙ Building modules
+⠹ Building modules
+⠸ Building modules
+[tsdx]: Your rootDir is currently set to "./". Please change your rootDir to "./src".
+TSDX has deprecated setting tsconfig.compilerOptions.rootDir to "./" as it caused buggy output for declarationMaps and more.
+You may also need to change your include to remove "test", which also caused declarations to be unnecessarily created for test files.
+✓ Building modules 4.2 secs

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @x-oasis/html-fragment-diff
+
+## 0.1.0
+
+### Initial Release
+
+- 实现基于 parse5 的 HTML 片段解析功能
+- 提供 `parseFragmentToElement` 函数用于解析 HTML 片段
+- 提供 `compareHtmlFragments` 函数用于对比两个 HTML 片段
+- 提供 `consumeGroupChangeResult` 函数用于消费 `resolveGroupChangeFragments` 的结果
+- 支持检测 class 增删和文本变更
+- 提供完整的交互式示例（React + Vite）
+- 支持 GitHub Pages 部署

package/README.md

@@ -0,0 +1,193 @@
+# @x-oasis/html-fragment-diff
+
+解析和对比 HTML 片段，检测 class 变更和文本变更。用于消费 `resolveGroupChangeFragments` 得到的 `originalFragment` / `finalFragment`。
+
+## 功能
+
+- **HTML 解析**：使用 parse5 解析 HTML 片段，提取标签名、class 列表、文本内容等
+- **Class 对比**：检测 class 的新增和删除
+- **文本对比**：检测文本内容的变更
+- **结构化输出**：提供易于展示的结构化对比结果
+
+## 安装
+
+```bash
+npm install @x-oasis/html-fragment-diff
+# 或
+pnpm add @x-oasis/html-fragment-diff
+```
+
+## 在线示例
+
+查看 [交互式示例](./examples/index.html) 来可视化地了解如何使用这个库。
+
+## 使用方法
+
+### 基本用法：解析 HTML 片段
+
+```typescript
+import { parseFragmentToElement } from '@x-oasis/html-fragment-diff';
+
+const fragment = '<h1 class="title primary">Hello World</h1>';
+const parsed = parseFragmentToElement(fragment);
+
+console.log(parsed?.tagName); // "h1"
+console.log(parsed?.classList); // ["title", "primary"]
+console.log(parsed?.textContent); // "Hello World"
+```
+
+### 对比两个 HTML 片段
+
+```typescript
+import { compareHtmlFragments } from '@x-oasis/html-fragment-diff';
+
+const original = '<h1 class="title">Hello</h1>';
+const final = '<h1 class="title active">World</h1>';
+
+const diff = compareHtmlFragments(original, final);
+
+console.log(diff.classAdded); // ["active"]
+console.log(diff.classRemoved); // []
+console.log(diff.textChanged); // true
+console.log(diff.textSummary); // "「Hello」 → 「World」"
+```
+
+### 消费 resolveGroupChangeFragments 的结果
+
+```typescript
+import { resolveGroupChangeFragments } from '@x-oasis/map-diff-range';
+import { consumeGroupChangeResult } from '@x-oasis/html-fragment-diff';
+
+const result = resolveGroupChangeFragments({
+  originalContent: '<h1 class="title">Name</h1>',
+  currentContent: '<h1 class="title text-xl">Name</h1>',
+  finalContent: '<h1 class="text-xl font-bold">Name</h1>',
+  currentTagOffset: { startOffset: 0, endOffset: 30 },
+});
+
+const withHtmlDiff = consumeGroupChangeResult(result);
+
+if (withHtmlDiff) {
+  console.log(withHtmlDiff.htmlDiff.classAdded); // ["font-bold"]
+  console.log(withHtmlDiff.htmlDiff.classRemoved); // ["title"]
+  console.log(withHtmlDiff.htmlDiff.textChanged); // false
+}
+```
+
+## API
+
+### ParsedFragmentElement
+
+```typescript
+interface ParsedFragmentElement {
+  tagName: string;              // 标签名（小写）
+  classList: string[];          // class 属性按空白切分后的列表
+  textContent: string;          // 元素内直接+间接文本拼接
+  otherAttrs: Record<string, string>; // 除 class 外的其他属性
+}
+```
+
+### HtmlFragmentDiff
+
+```typescript
+interface HtmlFragmentDiff {
+  original: ParsedFragmentElement | null;  // 原始片段解析结果
+  final: ParsedFragmentElement | null;    // 最终片段解析结果
+  classAdded: string[];                     // 新增的 class 列表
+  classRemoved: string[];                   // 删除的 class 列表
+  textOriginal: string;                     // 原始片段根元素文本
+  textFinal: string;                        // 最终片段根元素文本
+  textChanged: boolean;                     // 文本是否发生变更
+  textSummary: string;                      // 文本变更的简短描述
+}
+```
+
+### parseFragmentToElement
+
+从 HTML 片段中解析出第一个根元素的信息。
+
+```typescript
+function parseFragmentToElement(
+  fragment: string
+): ParsedFragmentElement | null
+```
+
+**参数：**
+- `fragment`: 单段 HTML，如 `<h1 class="...">姓名</h1>`
+
+**返回：** 第一个根元素的信息；若无元素或解析失败则返回 `null`
+
+### compareHtmlFragments
+
+对比两个 HTML 片段：解析后比较 class 增删与根元素文本变更。
+
+```typescript
+function compareHtmlFragments(
+  originalFragment: string,
+  finalFragment: string
+): HtmlFragmentDiff
+```
+
+**参数：**
+- `originalFragment`: 原始片段（如 `resolveGroupChangeFragments` 的 `originalFragment`）
+- `finalFragment`: 最终片段（如 `resolveGroupChangeFragments` 的 `finalFragment`）
+
+**返回：** 结构化对比结果
+
+### consumeGroupChangeResult
+
+消费 `resolveGroupChangeFragments` 的返回值：在原有片段级 diff 基础上，再解析两个 HTML 片段，得到 class 增删与文本变更的结构化结果。
+
+```typescript
+function consumeGroupChangeResult<T extends { originalFragment: string; finalFragment: string }>(
+  result: T | undefined
+): (T & { htmlDiff: HtmlFragmentDiff }) | undefined
+```
+
+**参数：**
+- `result`: `resolveGroupChangeFragments` 的返回值
+
+**返回：** 原 result 与 HTML 解析对比结果；若 result 为 `undefined` 则返回 `undefined`
+
+## 示例场景
+
+### 场景 1: Class 变更
+
+```typescript
+const original = '<h1 class="title">Name</h1>';
+const final = '<h1 class="title active">Name</h1>';
+
+const diff = compareHtmlFragments(original, final);
+// diff.classAdded === ["active"]
+// diff.classRemoved === []
+```
+
+### 场景 2: 文本变更
+
+```typescript
+const original = '<h1>Hello</h1>';
+const final = '<h1>World</h1>';
+
+const diff = compareHtmlFragments(original, final);
+// diff.textChanged === true
+// diff.textSummary === "「Hello」 → 「World」"
+```
+
+### 场景 3: Class 和文本同时变更
+
+```typescript
+const original = '<h1 class="title">Hello</h1>';
+const final = '<h1 class="title active">World</h1>';
+
+const diff = compareHtmlFragments(original, final);
+// diff.classAdded === ["active"]
+// diff.textChanged === true
+```
+
+## 依赖
+
+- [parse5](https://www.npmjs.com/package/parse5): HTML 解析库
+
+## License
+
+ISC

package/dist/html-fragment-diff.cjs.development.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var parse5 = require('parse5');
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function getAttr(node, name) {
+  var _node$attrs;
+  var attrs = (_node$attrs = node.attrs) != null ? _node$attrs : [];
+  var lower = name.toLowerCase();
+  var a = attrs.find(function (x) {
+    var _x$name;
+    return ((_x$name = x.name) == null ? void 0 : _x$name.toLowerCase()) === lower;
+  });
+  return a == null ? void 0 : a.value;
+}
+function getTextContent(node) {
+  var _node$childNodes;
+  if (!node) return '';
+  if (node.nodeName === '#text') {
+    var _node$value;
+    return (_node$value = node.value) != null ? _node$value : '';
+  }
+  var childNodes = (_node$childNodes = node.childNodes) != null ? _node$childNodes : [];
+  return childNodes.map(function (child) {
+    return getTextContent(child);
+  }).join('');
+}
+function isElementNode(node) {
+  return node && typeof node.tagName === 'string';
+}
+function splitClassList(classAttr) {
+  if (classAttr == null || classAttr === '') return [];
+  var list = classAttr.trim().split(/\s+/).filter(Boolean);
+  return [].concat(new Set(list));
+}
+function parseFragmentToElement(fragment) {
+  var _fragmentNode$childNo, _fragmentNode;
+  if (!fragment || typeof fragment !== 'string') return null;
+  var wrapped = fragment.trim();
+  if (!wrapped) return null;
+  var fragmentNode;
+  try {
+    fragmentNode = parse5.parseFragment(wrapped);
+  } catch (_unused) {
+    return null;
+  }
+  var childNodes = (_fragmentNode$childNo = (_fragmentNode = fragmentNode) == null ? void 0 : _fragmentNode.childNodes) != null ? _fragmentNode$childNo : [];
+  for (var _iterator = _createForOfIteratorHelperLoose(childNodes), _step; !(_step = _iterator()).done;) {
+    var child = _step.value;
+    if (isElementNode(child)) {
+      var _child$tagName;
+      var classAttr = getAttr(child, 'class');
+      var classList = splitClassList(classAttr);
+      var textContent = getTextContent(child).trim();
+      var otherAttrs = {};
+      for (var _iterator2 = _createForOfIteratorHelperLoose((_child$attrs = child.attrs) != null ? _child$attrs : []), _step2; !(_step2 = _iterator2()).done;) {
+        var _child$attrs, _a$name;
+        var a = _step2.value;
+        if (((_a$name = a.name) == null ? void 0 : _a$name.toLowerCase()) !== 'class') {
+          var _a$value;
+          otherAttrs[a.name] = (_a$value = a.value) != null ? _a$value : '';
+        }
+      }
+      return {
+        tagName: ((_child$tagName = child.tagName) != null ? _child$tagName : '').toLowerCase(),
+        classList: classList,
+        textContent: textContent,
+        otherAttrs: otherAttrs
+      };
+    }
+  }
+  return null;
+}
+function compareHtmlFragments(originalFragment, finalFragment) {
+  var _original$classList, _final$classList, _final$classList2, _original$classList2, _original$textContent, _final$textContent;
+  var original = parseFragmentToElement(originalFragment);
+  var _final = parseFragmentToElement(finalFragment);
+  var originalClasses = new Set((_original$classList = original == null ? void 0 : original.classList) != null ? _original$classList : []);
+  var finalClasses = new Set((_final$classList = _final == null ? void 0 : _final.classList) != null ? _final$classList : []);
+  var classAdded = ((_final$classList2 = _final == null ? void 0 : _final.classList) != null ? _final$classList2 : []).filter(function (c) {
+    return !originalClasses.has(c);
+  });
+  var classRemoved = ((_original$classList2 = original == null ? void 0 : original.classList) != null ? _original$classList2 : []).filter(function (c) {
+    return !finalClasses.has(c);
+  });
+  var textOriginal = (_original$textContent = original == null ? void 0 : original.textContent) != null ? _original$textContent : '';
+  var textFinal = (_final$textContent = _final == null ? void 0 : _final.textContent) != null ? _final$textContent : '';
+  var textChanged = textOriginal !== textFinal;
+  var textSummary = textChanged ? "\u300C" + (textOriginal || '(空)') + "\u300D \u2192 \u300C" + (textFinal || '(空)') + "\u300D" : '无变更';
+  return {
+    original: original,
+    "final": _final,
+    classAdded: classAdded,
+    classRemoved: classRemoved,
+    textOriginal: textOriginal,
+    textFinal: textFinal,
+    textChanged: textChanged,
+    textSummary: textSummary
+  };
+}
+function consumeGroupChangeResult(result) {
+  if (result == null) return undefined;
+  var htmlDiff = compareHtmlFragments(result.originalFragment, result.finalFragment);
+  return _extends({}, result, {
+    htmlDiff: htmlDiff
+  });
+}
+
+exports.compareHtmlFragments = compareHtmlFragments;
+exports.consumeGroupChangeResult = consumeGroupChangeResult;
+exports.parseFragmentToElement = parseFragmentToElement;
+//# sourceMappingURL=html-fragment-diff.cjs.development.js.map

package/dist/html-fragment-diff.cjs.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-fragment-diff.cjs.development.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * 对两个 HTML 片段做 parse 级别的对比：解析出标签、class、文本等，并输出 class 增删与文本变更。\n * 用于消费 resolveGroupChangeFragments 得到的 originalFragment / finalFragment。\n */\n\nimport { parseFragment } from 'parse5';\n\n/** 解析出的单个根元素信息（只关心第一个根元素） */\nexport interface ParsedFragmentElement {\n  tagName: string;\n  /** class 属性按空白切分后的列表 */\n  classList: string[];\n  /** 元素内直接+间接文本拼接（不含子标签的 tag，只取文本） */\n  textContent: string;\n  /** 除 class 外的其他属性（name -> value） */\n  otherAttrs: Record<string, string>;\n}\n\n/** 两个 HTML 片段的对比结果 */\nexport interface HtmlFragmentDiff {\n  /** 原始片段解析结果（若解析失败为 null） */\n  original: ParsedFragmentElement | null;\n  /** 最终片段解析结果（若解析失败为 null） */\n  final: ParsedFragmentElement | null;\n  /** class：最终相对原始新增的 class 列表 */\n  classAdded: string[];\n  /** class：最终相对原始删除的 class 列表 */\n  classRemoved: string[];\n  /** 文本：原始片段根元素文本 */\n  textOriginal: string;\n  /** 文本：最终片段根元素文本 */\n  textFinal: string;\n  /** 文本是否发生变更 */\n  textChanged: boolean;\n  /** 文本变更的简短描述（便于展示） */\n  textSummary: string;\n}\n\n/**\n * 从 parse5 的节点中取属性值\n */\nfunction getAttr(\n  node: { attrs?: Array<{ name: string; value: string }> },\n  name: string\n): string | undefined {\n  const attrs = node.attrs ?? [];\n  const lower = name.toLowerCase();\n  const a = attrs.find((x) => x.name?.toLowerCase() === lower);\n  return a?.value;\n}\n\n/**\n * 递归收集元素的文本内容（不含标签名，只取文本节点）\n */\nfunction getTextContent(node: any): string {\n  if (!node) return '';\n  if (node.nodeName === '#text') {\n    return node.value ?? '';\n  }\n  const childNodes = node.childNodes ?? [];\n  return childNodes.map((child: any) => getTextContent(child)).join('');\n}\n\n/**\n * 判断是否为元素节点（有 tagName）\n */\nfunction isElementNode(node: any): node is {\n  tagName: string;\n  attrs: Array<{ name: string; value: string }>;\n  childNodes?: any[];\n} {\n  return node && typeof (node as any).tagName === 'string';\n}\n\n/**\n * 将 class 属性字符串按空白切分为有序列表，去重保留顺序\n */\nfunction splitClassList(classAttr: string | undefined): string[] {\n  if (classAttr == null || classAttr === '') return [];\n  const list = classAttr.trim().split(/\\s+/).filter(Boolean);\n  return [...new Set(list)];\n}\n\n/**\n * 从 HTML 片段中解析出第一个根元素的信息\n *\n * @param fragment 单段 HTML，如 `<h1 class=\"...\">姓名</h1>`\n * @returns 第一个根元素的信息；若无元素或解析失败则返回 null\n */\nexport function parseFragmentToElement(\n  fragment: string\n): ParsedFragmentElement | null {\n  if (!fragment || typeof fragment !== 'string') return null;\n\n  const wrapped = fragment.trim();\n  if (!wrapped) return null;\n\n  let fragmentNode: any;\n  try {\n    fragmentNode = parseFragment(wrapped);\n  } catch {\n    return null;\n  }\n\n  const childNodes = fragmentNode?.childNodes ?? [];\n  for (const child of childNodes) {\n    if (isElementNode(child)) {\n      const classAttr = getAttr(child, 'class');\n      const classList = splitClassList(classAttr);\n      const textContent = getTextContent(child).trim();\n      const otherAttrs: Record<string, string> = {};\n      for (const a of child.attrs ?? []) {\n        if (a.name?.toLowerCase() !== 'class') {\n          otherAttrs[a.name] = a.value ?? '';\n        }\n      }\n      return {\n        tagName: (child.tagName ?? '').toLowerCase(),\n        classList,\n        textContent,\n        otherAttrs,\n      };\n    }\n  }\n  return null;\n}\n\n/**\n * 对比两个 HTML 片段：解析后比较 class 增删与根元素文本变更\n *\n * @param originalFragment 原始片段（如 resolveGroupChangeFragments 的 originalFragment）\n * @param finalFragment 最终片段（如 resolveGroupChangeFragments 的 finalFragment）\n * @returns 结构化对比结果，便于展示「class 多了啥、少了啥」和「text 变更了啥」\n */\nexport function compareHtmlFragments(\n  originalFragment: string,\n  finalFragment: string\n): HtmlFragmentDiff {\n  const original = parseFragmentToElement(originalFragment);\n  const final = parseFragmentToElement(finalFragment);\n\n  const originalClasses = new Set(original?.classList ?? []);\n  const finalClasses = new Set(final?.classList ?? []);\n  const classAdded = (final?.classList ?? []).filter(\n    (c) => !originalClasses.has(c)\n  );\n  const classRemoved = (original?.classList ?? []).filter(\n    (c) => !finalClasses.has(c)\n  );\n\n  const textOriginal = original?.textContent ?? '';\n  const textFinal = final?.textContent ?? '';\n  const textChanged = textOriginal !== textFinal;\n  const textSummary = textChanged\n    ? `「${textOriginal || '(空)'}」 → 「${textFinal || '(空)'}」`\n    : '无变更';\n\n  return {\n    original,\n    final,\n    classAdded,\n    classRemoved,\n    textOriginal,\n    textFinal,\n    textChanged,\n    textSummary,\n  };\n}\n\n/**\n * 消费 resolveGroupChangeFragments 的返回值：在原有片段级 diff 基础上，再解析两个 HTML 片段，\n * 得到 class 增删与文本变更的结构化结果。\n *\n * @param result resolveGroupChangeMessage / resolveGroupChangeFragments 的返回值\n * @returns 原 result 与 HTML 解析对比结果；若 result 为 undefined 则返回 undefined\n */\nexport function consumeGroupChangeResult<\n  T extends { originalFragment: string; finalFragment: string }\n>(result: T | undefined): (T & { htmlDiff: HtmlFragmentDiff }) | undefined {\n  if (result == null) return undefined;\n  const htmlDiff = compareHtmlFragments(\n    result.originalFragment,\n    result.finalFragment\n  );\n  return { ...result, htmlDiff };\n}\n"],"names":["getAttr","node","name","attrs","_node$attrs","lower","toLowerCase","a","find","x","_x$name","value","getTextContent","nodeName","_node$value","childNodes","_node$childNodes","map","child","join","isElementNode","tagName","splitClassList","classAttr","list","trim","split","filter","Boolean","concat","Set","parseFragmentToElement","fragment","wrapped","fragmentNode","parseFragment","_unused","_fragmentNode$childNo","_fragmentNode","_iterator","_createForOfIteratorHelperLoose","_step","done","_child$tagName","classList","textContent","otherAttrs","_iterator2","_child$attrs","_step2","_a$name","_a$value","compareHtmlFragments","originalFragment","finalFragment","original","final","originalClasses","_original$classList","finalClasses","_final$classList","classAdded","_final$classList2","c","has","classRemoved","_original$classList2","textOriginal","_original$textContent","textFinal","_final$textContent","textChanged","textSummary","consumeGroupChangeResult","result","undefined","htmlDiff","_extends"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAASA,OAAOA,CACdC,IAAwD,EACxDC,IAAY;;EAEZ,IAAMC,KAAK,IAAAC,WAAA,GAAGH,IAAI,CAACE,KAAK,YAAAC,WAAA,GAAI,EAAE;EAC9B,IAAMC,KAAK,GAAGH,IAAI,CAACI,WAAW,EAAE;EAChC,IAAMC,CAAC,GAAGJ,KAAK,CAACK,IAAI,CAAC,UAACC,CAAC;IAAA,IAAAC,OAAA;IAAA,OAAK,EAAAA,OAAA,GAAAD,CAAC,CAACP,IAAI,qBAANQ,OAAA,CAAQJ,WAAW,EAAE,MAAKD,KAAK;IAAC;EAC5D,OAAOE,CAAC,oBAADA,CAAC,CAAEI,KAAK;AACjB;AAKA,SAASC,cAAcA,CAACX,IAAS;;EAC/B,IAAI,CAACA,IAAI,EAAE,OAAO,EAAE;EACpB,IAAIA,IAAI,CAACY,QAAQ,KAAK,OAAO,EAAE;IAAA,IAAAC,WAAA;IAC7B,QAAAA,WAAA,GAAOb,IAAI,CAACU,KAAK,YAAAG,WAAA,GAAI,EAAE;;EAEzB,IAAMC,UAAU,IAAAC,gBAAA,GAAGf,IAAI,CAACc,UAAU,YAAAC,gBAAA,GAAI,EAAE;EACxC,OAAOD,UAAU,CAACE,GAAG,CAAC,UAACC,KAAU;IAAA,OAAKN,cAAc,CAACM,KAAK,CAAC;IAAC,CAACC,IAAI,CAAC,EAAE,CAAC;AACvE;AAKA,SAASC,aAAaA,CAACnB,IAAS;EAK9B,OAAOA,IAAI,IAAI,OAAQA,IAAY,CAACoB,OAAO,KAAK,QAAQ;AAC1D;AAKA,SAASC,cAAcA,CAACC,SAA6B;EACnD,IAAIA,SAAS,IAAI,IAAI,IAAIA,SAAS,KAAK,EAAE,EAAE,OAAO,EAAE;EACpD,IAAMC,IAAI,GAAGD,SAAS,CAACE,IAAI,EAAE,CAACC,KAAK,CAAC,KAAK,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC;EAC1D,UAAAC,MAAA,CAAW,IAAIC,GAAG,CAACN,IAAI,CAAC;AAC1B;SAQgBO,sBAAsBA,CACpCC,QAAgB;;EAEhB,IAAI,CAACA,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,EAAE,OAAO,IAAI;EAE1D,IAAMC,OAAO,GAAGD,QAAQ,CAACP,IAAI,EAAE;EAC/B,IAAI,CAACQ,OAAO,EAAE,OAAO,IAAI;EAEzB,IAAIC,YAAiB;EACrB,IAAI;IACFA,YAAY,GAAGC,oBAAa,CAACF,OAAO,CAAC;GACtC,CAAC,OAAAG,OAAA,EAAM;IACN,OAAO,IAAI;;EAGb,IAAMrB,UAAU,IAAAsB,qBAAA,IAAAC,aAAA,GAAGJ,YAAY,qBAAZI,aAAA,CAAcvB,UAAU,YAAAsB,qBAAA,GAAI,EAAE;EACjD,SAAAE,SAAA,GAAAC,+BAAA,CAAoBzB,UAAU,GAAA0B,KAAA,IAAAA,KAAA,GAAAF,SAAA,IAAAG,IAAA,GAAE;IAAA,IAArBxB,KAAK,GAAAuB,KAAA,CAAA9B,KAAA;IACd,IAAIS,aAAa,CAACF,KAAK,CAAC,EAAE;MAAA,IAAAyB,cAAA;MACxB,IAAMpB,SAAS,GAAGvB,OAAO,CAACkB,KAAK,EAAE,OAAO,CAAC;MACzC,IAAM0B,SAAS,GAAGtB,cAAc,CAACC,SAAS,CAAC;MAC3C,IAAMsB,WAAW,GAAGjC,cAAc,CAACM,KAAK,CAAC,CAACO,IAAI,EAAE;MAChD,IAAMqB,UAAU,GAA2B,EAAE;MAC7C,SAAAC,UAAA,GAAAP,+BAAA,EAAAQ,YAAA,GAAgB9B,KAAK,CAACf,KAAK,YAAA6C,YAAA,GAAI,EAAE,GAAAC,MAAA,IAAAA,MAAA,GAAAF,UAAA,IAAAL,IAAA,GAAE;QAAA,IAAAM,YAAA,EAAAE,OAAA;QAAA,IAAxB3C,CAAC,GAAA0C,MAAA,CAAAtC,KAAA;QACV,IAAI,EAAAuC,OAAA,GAAA3C,CAAC,CAACL,IAAI,qBAANgD,OAAA,CAAQ5C,WAAW,EAAE,MAAK,OAAO,EAAE;UAAA,IAAA6C,QAAA;UACrCL,UAAU,CAACvC,CAAC,CAACL,IAAI,CAAC,IAAAiD,QAAA,GAAG5C,CAAC,CAACI,KAAK,YAAAwC,QAAA,GAAI,EAAE;;;MAGtC,OAAO;QACL9B,OAAO,EAAE,EAAAsB,cAAA,GAACzB,KAAK,CAACG,OAAO,YAAAsB,cAAA,GAAI,EAAE,EAAErC,WAAW,EAAE;QAC5CsC,SAAS,EAATA,SAAS;QACTC,WAAW,EAAXA,WAAW;QACXC,UAAU,EAAVA;OACD;;;EAGL,OAAO,IAAI;AACb;SASgBM,oBAAoBA,CAClCC,gBAAwB,EACxBC,aAAqB;;EAErB,IAAMC,QAAQ,GAAGxB,sBAAsB,CAACsB,gBAAgB,CAAC;EACzD,IAAMG,MAAK,GAAGzB,sBAAsB,CAACuB,aAAa,CAAC;EAEnD,IAAMG,eAAe,GAAG,IAAI3B,GAAG,EAAA4B,mBAAA,GAACH,QAAQ,oBAARA,QAAQ,CAAEX,SAAS,YAAAc,mBAAA,GAAI,EAAE,CAAC;EAC1D,IAAMC,YAAY,GAAG,IAAI7B,GAAG,EAAA8B,gBAAA,GAACJ,MAAK,oBAALA,MAAK,CAAEZ,SAAS,YAAAgB,gBAAA,GAAI,EAAE,CAAC;EACpD,IAAMC,UAAU,GAAG,EAAAC,iBAAA,GAACN,MAAK,oBAALA,MAAK,CAAEZ,SAAS,YAAAkB,iBAAA,GAAI,EAAE,EAAEnC,MAAM,CAChD,UAACoC,CAAC;IAAA,OAAK,CAACN,eAAe,CAACO,GAAG,CAACD,CAAC,CAAC;IAC/B;EACD,IAAME,YAAY,GAAG,EAAAC,oBAAA,GAACX,QAAQ,oBAARA,QAAQ,CAAEX,SAAS,YAAAsB,oBAAA,GAAI,EAAE,EAAEvC,MAAM,CACrD,UAACoC,CAAC;IAAA,OAAK,CAACJ,YAAY,CAACK,GAAG,CAACD,CAAC,CAAC;IAC5B;EAED,IAAMI,YAAY,IAAAC,qBAAA,GAAGb,QAAQ,oBAARA,QAAQ,CAAEV,WAAW,YAAAuB,qBAAA,GAAI,EAAE;EAChD,IAAMC,SAAS,IAAAC,kBAAA,GAAGd,MAAK,oBAALA,MAAK,CAAEX,WAAW,YAAAyB,kBAAA,GAAI,EAAE;EAC1C,IAAMC,WAAW,GAAGJ,YAAY,KAAKE,SAAS;EAC9C,IAAMG,WAAW,GAAGD,WAAW,eACvBJ,YAAY,IAAI,KAAK,8BAAQE,SAAS,IAAI,KAAK,eACnD,KAAK;EAET,OAAO;IACLd,QAAQ,EAARA,QAAQ;IACR,SAAAC,MAAK;IACLK,UAAU,EAAVA,UAAU;IACVI,YAAY,EAAZA,YAAY;IACZE,YAAY,EAAZA,YAAY;IACZE,SAAS,EAATA,SAAS;IACTE,WAAW,EAAXA,WAAW;IACXC,WAAW,EAAXA;GACD;AACH;SASgBC,wBAAwBA,CAEtCC,MAAqB;EACrB,IAAIA,MAAM,IAAI,IAAI,EAAE,OAAOC,SAAS;EACpC,IAAMC,QAAQ,GAAGxB,oBAAoB,CACnCsB,MAAM,CAACrB,gBAAgB,EACvBqB,MAAM,CAACpB,aAAa,CACrB;EACD,OAAAuB,QAAA,KAAYH,MAAM;IAAEE,QAAQ,EAARA;;AACtB;;;;;;"}

package/dist/html-fragment-diff.cjs.production.min.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("parse5");function n(){return(n=Object.assign?Object.assign.bind():function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}function e(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=new Array(n);e<n;e++)r[e]=t[e];return r}function r(t,n){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(r)return(r=r.call(t)).next.bind(r);if(Array.isArray(t)||(r=function(t,n){if(t){if("string"==typeof t)return e(t,void 0);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?e(t,void 0):void 0}}(t))||n&&t&&"number"==typeof t.length){r&&(t=r);var l=0;return function(){return l>=t.length?{done:!0}:{done:!1,value:t[l++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function l(t,n){var e,r=null!=(e=t.attrs)?e:[],l=n.toLowerCase(),a=r.find((function(t){var n;return(null==(n=t.name)?void 0:n.toLowerCase())===l}));return null==a?void 0:a.value}function a(t){var n,e;return t?"#text"===t.nodeName?null!=(e=t.value)?e:"":(null!=(n=t.childNodes)?n:[]).map((function(t){return a(t)})).join(""):""}function o(t){if(null==t||""===t)return[];var n=t.trim().split(/\s+/).filter(Boolean);return[].concat(new Set(n))}function i(n){var e,i;if(!n||"string"!=typeof n)return null;var u,s=n.trim();if(!s)return null;try{u=t.parseFragment(s)}catch(t){return null}for(var c,f,v=r(null!=(e=null==(i=u)?void 0:i.childNodes)?e:[]);!(c=v()).done;){var d=c.value;if((f=d)&&"string"==typeof f.tagName){for(var m,p,g=o(l(d,"class")),y=a(d).trim(),h={},b=r(null!=(x=d.attrs)?x:[]);!(p=b()).done;){var x,w,C,L=p.value;"class"!==(null==(w=L.name)?void 0:w.toLowerCase())&&(h[L.name]=null!=(C=L.value)?C:"")}return{tagName:(null!=(m=d.tagName)?m:"").toLowerCase(),classList:g,textContent:y,otherAttrs:h}}}return null}function u(t,n){var e,r,l,a,o,u,s=i(t),c=i(n),f=new Set(null!=(e=null==s?void 0:s.classList)?e:[]),v=new Set(null!=(r=null==c?void 0:c.classList)?r:[]),d=(null!=(l=null==c?void 0:c.classList)?l:[]).filter((function(t){return!f.has(t)})),m=(null!=(a=null==s?void 0:s.classList)?a:[]).filter((function(t){return!v.has(t)})),p=null!=(o=null==s?void 0:s.textContent)?o:"",g=null!=(u=null==c?void 0:c.textContent)?u:"",y=p!==g;return{original:s,final:c,classAdded:d,classRemoved:m,textOriginal:p,textFinal:g,textChanged:y,textSummary:y?"「"+(p||"(空)")+"」 → 「"+(g||"(空)")+"」":"无变更"}}exports.compareHtmlFragments=u,exports.consumeGroupChangeResult=function(t){if(null!=t)return n({},t,{htmlDiff:u(t.originalFragment,t.finalFragment)})},exports.parseFragmentToElement=i;
+//# sourceMappingURL=html-fragment-diff.cjs.production.min.js.map

package/dist/html-fragment-diff.cjs.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-fragment-diff.cjs.production.min.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * 对两个 HTML 片段做 parse 级别的对比：解析出标签、class、文本等，并输出 class 增删与文本变更。\n * 用于消费 resolveGroupChangeFragments 得到的 originalFragment / finalFragment。\n */\n\nimport { parseFragment } from 'parse5';\n\n/** 解析出的单个根元素信息（只关心第一个根元素） */\nexport interface ParsedFragmentElement {\n  tagName: string;\n  /** class 属性按空白切分后的列表 */\n  classList: string[];\n  /** 元素内直接+间接文本拼接（不含子标签的 tag，只取文本） */\n  textContent: string;\n  /** 除 class 外的其他属性（name -> value） */\n  otherAttrs: Record<string, string>;\n}\n\n/** 两个 HTML 片段的对比结果 */\nexport interface HtmlFragmentDiff {\n  /** 原始片段解析结果（若解析失败为 null） */\n  original: ParsedFragmentElement | null;\n  /** 最终片段解析结果（若解析失败为 null） */\n  final: ParsedFragmentElement | null;\n  /** class：最终相对原始新增的 class 列表 */\n  classAdded: string[];\n  /** class：最终相对原始删除的 class 列表 */\n  classRemoved: string[];\n  /** 文本：原始片段根元素文本 */\n  textOriginal: string;\n  /** 文本：最终片段根元素文本 */\n  textFinal: string;\n  /** 文本是否发生变更 */\n  textChanged: boolean;\n  /** 文本变更的简短描述（便于展示） */\n  textSummary: string;\n}\n\n/**\n * 从 parse5 的节点中取属性值\n */\nfunction getAttr(\n  node: { attrs?: Array<{ name: string; value: string }> },\n  name: string\n): string | undefined {\n  const attrs = node.attrs ?? [];\n  const lower = name.toLowerCase();\n  const a = attrs.find((x) => x.name?.toLowerCase() === lower);\n  return a?.value;\n}\n\n/**\n * 递归收集元素的文本内容（不含标签名，只取文本节点）\n */\nfunction getTextContent(node: any): string {\n  if (!node) return '';\n  if (node.nodeName === '#text') {\n    return node.value ?? '';\n  }\n  const childNodes = node.childNodes ?? [];\n  return childNodes.map((child: any) => getTextContent(child)).join('');\n}\n\n/**\n * 判断是否为元素节点（有 tagName）\n */\nfunction isElementNode(node: any): node is {\n  tagName: string;\n  attrs: Array<{ name: string; value: string }>;\n  childNodes?: any[];\n} {\n  return node && typeof (node as any).tagName === 'string';\n}\n\n/**\n * 将 class 属性字符串按空白切分为有序列表，去重保留顺序\n */\nfunction splitClassList(classAttr: string | undefined): string[] {\n  if (classAttr == null || classAttr === '') return [];\n  const list = classAttr.trim().split(/\\s+/).filter(Boolean);\n  return [...new Set(list)];\n}\n\n/**\n * 从 HTML 片段中解析出第一个根元素的信息\n *\n * @param fragment 单段 HTML，如 `<h1 class=\"...\">姓名</h1>`\n * @returns 第一个根元素的信息；若无元素或解析失败则返回 null\n */\nexport function parseFragmentToElement(\n  fragment: string\n): ParsedFragmentElement | null {\n  if (!fragment || typeof fragment !== 'string') return null;\n\n  const wrapped = fragment.trim();\n  if (!wrapped) return null;\n\n  let fragmentNode: any;\n  try {\n    fragmentNode = parseFragment(wrapped);\n  } catch {\n    return null;\n  }\n\n  const childNodes = fragmentNode?.childNodes ?? [];\n  for (const child of childNodes) {\n    if (isElementNode(child)) {\n      const classAttr = getAttr(child, 'class');\n      const classList = splitClassList(classAttr);\n      const textContent = getTextContent(child).trim();\n      const otherAttrs: Record<string, string> = {};\n      for (const a of child.attrs ?? []) {\n        if (a.name?.toLowerCase() !== 'class') {\n          otherAttrs[a.name] = a.value ?? '';\n        }\n      }\n      return {\n        tagName: (child.tagName ?? '').toLowerCase(),\n        classList,\n        textContent,\n        otherAttrs,\n      };\n    }\n  }\n  return null;\n}\n\n/**\n * 对比两个 HTML 片段：解析后比较 class 增删与根元素文本变更\n *\n * @param originalFragment 原始片段（如 resolveGroupChangeFragments 的 originalFragment）\n * @param finalFragment 最终片段（如 resolveGroupChangeFragments 的 finalFragment）\n * @returns 结构化对比结果，便于展示「class 多了啥、少了啥」和「text 变更了啥」\n */\nexport function compareHtmlFragments(\n  originalFragment: string,\n  finalFragment: string\n): HtmlFragmentDiff {\n  const original = parseFragmentToElement(originalFragment);\n  const final = parseFragmentToElement(finalFragment);\n\n  const originalClasses = new Set(original?.classList ?? []);\n  const finalClasses = new Set(final?.classList ?? []);\n  const classAdded = (final?.classList ?? []).filter(\n    (c) => !originalClasses.has(c)\n  );\n  const classRemoved = (original?.classList ?? []).filter(\n    (c) => !finalClasses.has(c)\n  );\n\n  const textOriginal = original?.textContent ?? '';\n  const textFinal = final?.textContent ?? '';\n  const textChanged = textOriginal !== textFinal;\n  const textSummary = textChanged\n    ? `「${textOriginal || '(空)'}」 → 「${textFinal || '(空)'}」`\n    : '无变更';\n\n  return {\n    original,\n    final,\n    classAdded,\n    classRemoved,\n    textOriginal,\n    textFinal,\n    textChanged,\n    textSummary,\n  };\n}\n\n/**\n * 消费 resolveGroupChangeFragments 的返回值：在原有片段级 diff 基础上，再解析两个 HTML 片段，\n * 得到 class 增删与文本变更的结构化结果。\n *\n * @param result resolveGroupChangeMessage / resolveGroupChangeFragments 的返回值\n * @returns 原 result 与 HTML 解析对比结果；若 result 为 undefined 则返回 undefined\n */\nexport function consumeGroupChangeResult<\n  T extends { originalFragment: string; finalFragment: string }\n>(result: T | undefined): (T & { htmlDiff: HtmlFragmentDiff }) | undefined {\n  if (result == null) return undefined;\n  const htmlDiff = compareHtmlFragments(\n    result.originalFragment,\n    result.finalFragment\n  );\n  return { ...result, htmlDiff };\n}\n"],"names":["getAttr","node","name","attrs","_node$attrs","lower","toLowerCase","a","find","x","_x$name","value","getTextContent","_node$value","nodeName","_node$childNodes","childNodes","map","child","join","splitClassList","classAttr","list","trim","split","filter","Boolean","concat","Set","parseFragmentToElement","fragment","fragmentNode","wrapped","parseFragment","_unused","_step","_iterator","_createForOfIteratorHelperLoose","_fragmentNode$childNo","_fragmentNode","done","tagName","_child$tagName","_step2","classList","textContent","otherAttrs","_iterator2","_child$attrs","_a$name","_a$value","compareHtmlFragments","originalFragment","finalFragment","original","final","originalClasses","_original$classList","finalClasses","_final$classList","classAdded","_final$classList2","c","has","classRemoved","_original$classList2","textOriginal","_original$textContent","textFinal","_final$textContent","textChanged","textSummary","result","_extends","htmlDiff"],"mappings":"+nCAyCA,SAASA,EACPC,EACAC,SAEMC,SAAKC,EAAGH,EAAKE,OAAKC,EAAI,GACtBC,EAAQH,EAAKI,cACbC,EAAIJ,EAAMK,MAAK,SAACC,GAAC,IAAAC,EAAA,cAAKA,EAAAD,EAAEP,aAAFQ,EAAQJ,iBAAkBD,KACtD,aAAOE,SAAAA,EAAGI,MAMZ,SAASC,EAAeX,SAESY,EAD/B,OAAKZ,EACiB,UAAlBA,EAAKa,gBACPD,EAAOZ,EAAKU,OAAKE,EAAI,WAEPE,EAAGd,EAAKe,YAAUD,EAAI,IACpBE,KAAI,SAACC,GAAU,OAAKN,EAAeM,MAAQC,KAAK,IALhD,GAsBpB,SAASC,EAAeC,GACtB,GAAiB,MAAbA,GAAmC,KAAdA,EAAkB,MAAO,GAClD,IAAMC,EAAOD,EAAUE,OAAOC,MAAM,OAAOC,OAAOC,SAClD,SAAAC,OAAW,IAAIC,IAAIN,aASLO,EACdC,WAEA,IAAKA,GAAgC,iBAAbA,EAAuB,OAAO,KAEtD,IAGIC,EAHEC,EAAUF,EAASP,OACzB,IAAKS,EAAS,OAAO,KAGrB,IACED,EAAeE,gBAAcD,GAC7B,MAAAE,GACA,OAAO,KAIT,IADA,IAC8BC,EAvCTlC,EAuCrBmC,EAAAC,SADgBC,SAAAC,EAAGR,UAAAQ,EAAcvB,YAAUsB,EAAI,MACjBH,EAAAC,KAAAI,MAAE,CAAA,IAArBtB,EAAKiB,EAAAxB,MACd,IAxCmBV,EAwCDiB,IAnC4B,iBAAzBjB,EAAawC,QAmCR,CAKxB,IALwB,IAAAC,EAKSC,EAH3BC,EAAYxB,EADApB,EAAQkB,EAAO,UAE3B2B,EAAcjC,EAAeM,GAAOK,OACpCuB,EAAqC,GAC3CC,EAAAV,SAAAW,EAAgB9B,EAAMf,OAAK6C,EAAI,MAAEL,EAAAI,KAAAP,MAAE,CAAA,IAAAQ,EAAAC,EACMC,EAD9B3C,EAACoC,EAAAhC,MACoB,kBAA1BsC,EAAA1C,EAAEL,aAAF+C,EAAQ3C,iBACVwC,EAAWvC,EAAEL,aAAKgD,EAAG3C,EAAEI,OAAKuC,EAAI,IAGpC,MAAO,CACLT,gBAASC,EAACxB,EAAMuB,SAAOC,EAAI,IAAIpC,cAC/BsC,UAAAA,EACAC,YAAAA,EACAC,WAAAA,IAIN,OAAO,cAUOK,EACdC,EACAC,mBAEMC,EAAWzB,EAAuBuB,GAClCG,EAAQ1B,EAAuBwB,GAE/BG,EAAkB,IAAI5B,WAAG6B,QAACH,SAAAA,EAAUV,WAASa,EAAI,IACjDC,EAAe,IAAI9B,WAAG+B,QAACJ,SAAAA,EAAOX,WAASe,EAAI,IAC3CC,UAAaC,QAACN,SAAAA,EAAOX,WAASiB,EAAI,IAAIpC,QAC1C,SAACqC,GAAC,OAAMN,EAAgBO,IAAID,MAExBE,UAAeC,QAACX,SAAAA,EAAUV,WAASqB,EAAI,IAAIxC,QAC/C,SAACqC,GAAC,OAAMJ,EAAaK,IAAID,MAGrBI,SAAYC,QAAGb,SAAAA,EAAUT,aAAWsB,EAAI,GACxCC,SAASC,QAAGd,SAAAA,EAAOV,aAAWwB,EAAI,GAClCC,EAAcJ,IAAiBE,EAKrC,MAAO,CACLd,SAAAA,EACAC,MAAAA,EACAK,WAAAA,EACAI,aAAAA,EACAE,aAAAA,EACAE,UAAAA,EACAE,YAAAA,EACAC,YAZkBD,OACZJ,GAAgB,gBAAaE,GAAa,WAC9C,gFAuBJI,GACA,GAAc,MAAVA,EAKJ,OAAAC,KAAYD,GAAQE,SAJHvB,EACfqB,EAAOpB,iBACPoB,EAAOnB"}

package/dist/html-fragment-diff.esm.js

@@ -0,0 +1,153 @@
+import { parseFragment } from 'parse5';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function getAttr(node, name) {
+  var _node$attrs;
+  var attrs = (_node$attrs = node.attrs) != null ? _node$attrs : [];
+  var lower = name.toLowerCase();
+  var a = attrs.find(function (x) {
+    var _x$name;
+    return ((_x$name = x.name) == null ? void 0 : _x$name.toLowerCase()) === lower;
+  });
+  return a == null ? void 0 : a.value;
+}
+function getTextContent(node) {
+  var _node$childNodes;
+  if (!node) return '';
+  if (node.nodeName === '#text') {
+    var _node$value;
+    return (_node$value = node.value) != null ? _node$value : '';
+  }
+  var childNodes = (_node$childNodes = node.childNodes) != null ? _node$childNodes : [];
+  return childNodes.map(function (child) {
+    return getTextContent(child);
+  }).join('');
+}
+function isElementNode(node) {
+  return node && typeof node.tagName === 'string';
+}
+function splitClassList(classAttr) {
+  if (classAttr == null || classAttr === '') return [];
+  var list = classAttr.trim().split(/\s+/).filter(Boolean);
+  return [].concat(new Set(list));
+}
+function parseFragmentToElement(fragment) {
+  var _fragmentNode$childNo, _fragmentNode;
+  if (!fragment || typeof fragment !== 'string') return null;
+  var wrapped = fragment.trim();
+  if (!wrapped) return null;
+  var fragmentNode;
+  try {
+    fragmentNode = parseFragment(wrapped);
+  } catch (_unused) {
+    return null;
+  }
+  var childNodes = (_fragmentNode$childNo = (_fragmentNode = fragmentNode) == null ? void 0 : _fragmentNode.childNodes) != null ? _fragmentNode$childNo : [];
+  for (var _iterator = _createForOfIteratorHelperLoose(childNodes), _step; !(_step = _iterator()).done;) {
+    var child = _step.value;
+    if (isElementNode(child)) {
+      var _child$tagName;
+      var classAttr = getAttr(child, 'class');
+      var classList = splitClassList(classAttr);
+      var textContent = getTextContent(child).trim();
+      var otherAttrs = {};
+      for (var _iterator2 = _createForOfIteratorHelperLoose((_child$attrs = child.attrs) != null ? _child$attrs : []), _step2; !(_step2 = _iterator2()).done;) {
+        var _child$attrs, _a$name;
+        var a = _step2.value;
+        if (((_a$name = a.name) == null ? void 0 : _a$name.toLowerCase()) !== 'class') {
+          var _a$value;
+          otherAttrs[a.name] = (_a$value = a.value) != null ? _a$value : '';
+        }
+      }
+      return {
+        tagName: ((_child$tagName = child.tagName) != null ? _child$tagName : '').toLowerCase(),
+        classList: classList,
+        textContent: textContent,
+        otherAttrs: otherAttrs
+      };
+    }
+  }
+  return null;
+}
+function compareHtmlFragments(originalFragment, finalFragment) {
+  var _original$classList, _final$classList, _final$classList2, _original$classList2, _original$textContent, _final$textContent;
+  var original = parseFragmentToElement(originalFragment);
+  var _final = parseFragmentToElement(finalFragment);
+  var originalClasses = new Set((_original$classList = original == null ? void 0 : original.classList) != null ? _original$classList : []);
+  var finalClasses = new Set((_final$classList = _final == null ? void 0 : _final.classList) != null ? _final$classList : []);
+  var classAdded = ((_final$classList2 = _final == null ? void 0 : _final.classList) != null ? _final$classList2 : []).filter(function (c) {
+    return !originalClasses.has(c);
+  });
+  var classRemoved = ((_original$classList2 = original == null ? void 0 : original.classList) != null ? _original$classList2 : []).filter(function (c) {
+    return !finalClasses.has(c);
+  });
+  var textOriginal = (_original$textContent = original == null ? void 0 : original.textContent) != null ? _original$textContent : '';
+  var textFinal = (_final$textContent = _final == null ? void 0 : _final.textContent) != null ? _final$textContent : '';
+  var textChanged = textOriginal !== textFinal;
+  var textSummary = textChanged ? "\u300C" + (textOriginal || '(空)') + "\u300D \u2192 \u300C" + (textFinal || '(空)') + "\u300D" : '无变更';
+  return {
+    original: original,
+    "final": _final,
+    classAdded: classAdded,
+    classRemoved: classRemoved,
+    textOriginal: textOriginal,
+    textFinal: textFinal,
+    textChanged: textChanged,
+    textSummary: textSummary
+  };
+}
+function consumeGroupChangeResult(result) {
+  if (result == null) return undefined;
+  var htmlDiff = compareHtmlFragments(result.originalFragment, result.finalFragment);
+  return _extends({}, result, {
+    htmlDiff: htmlDiff
+  });
+}
+
+export { compareHtmlFragments, consumeGroupChangeResult, parseFragmentToElement };
+//# sourceMappingURL=html-fragment-diff.esm.js.map

package/dist/html-fragment-diff.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-fragment-diff.esm.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * 对两个 HTML 片段做 parse 级别的对比：解析出标签、class、文本等，并输出 class 增删与文本变更。\n * 用于消费 resolveGroupChangeFragments 得到的 originalFragment / finalFragment。\n */\n\nimport { parseFragment } from 'parse5';\n\n/** 解析出的单个根元素信息（只关心第一个根元素） */\nexport interface ParsedFragmentElement {\n  tagName: string;\n  /** class 属性按空白切分后的列表 */\n  classList: string[];\n  /** 元素内直接+间接文本拼接（不含子标签的 tag，只取文本） */\n  textContent: string;\n  /** 除 class 外的其他属性（name -> value） */\n  otherAttrs: Record<string, string>;\n}\n\n/** 两个 HTML 片段的对比结果 */\nexport interface HtmlFragmentDiff {\n  /** 原始片段解析结果（若解析失败为 null） */\n  original: ParsedFragmentElement | null;\n  /** 最终片段解析结果（若解析失败为 null） */\n  final: ParsedFragmentElement | null;\n  /** class：最终相对原始新增的 class 列表 */\n  classAdded: string[];\n  /** class：最终相对原始删除的 class 列表 */\n  classRemoved: string[];\n  /** 文本：原始片段根元素文本 */\n  textOriginal: string;\n  /** 文本：最终片段根元素文本 */\n  textFinal: string;\n  /** 文本是否发生变更 */\n  textChanged: boolean;\n  /** 文本变更的简短描述（便于展示） */\n  textSummary: string;\n}\n\n/**\n * 从 parse5 的节点中取属性值\n */\nfunction getAttr(\n  node: { attrs?: Array<{ name: string; value: string }> },\n  name: string\n): string | undefined {\n  const attrs = node.attrs ?? [];\n  const lower = name.toLowerCase();\n  const a = attrs.find((x) => x.name?.toLowerCase() === lower);\n  return a?.value;\n}\n\n/**\n * 递归收集元素的文本内容（不含标签名，只取文本节点）\n */\nfunction getTextContent(node: any): string {\n  if (!node) return '';\n  if (node.nodeName === '#text') {\n    return node.value ?? '';\n  }\n  const childNodes = node.childNodes ?? [];\n  return childNodes.map((child: any) => getTextContent(child)).join('');\n}\n\n/**\n * 判断是否为元素节点（有 tagName）\n */\nfunction isElementNode(node: any): node is {\n  tagName: string;\n  attrs: Array<{ name: string; value: string }>;\n  childNodes?: any[];\n} {\n  return node && typeof (node as any).tagName === 'string';\n}\n\n/**\n * 将 class 属性字符串按空白切分为有序列表，去重保留顺序\n */\nfunction splitClassList(classAttr: string | undefined): string[] {\n  if (classAttr == null || classAttr === '') return [];\n  const list = classAttr.trim().split(/\\s+/).filter(Boolean);\n  return [...new Set(list)];\n}\n\n/**\n * 从 HTML 片段中解析出第一个根元素的信息\n *\n * @param fragment 单段 HTML，如 `<h1 class=\"...\">姓名</h1>`\n * @returns 第一个根元素的信息；若无元素或解析失败则返回 null\n */\nexport function parseFragmentToElement(\n  fragment: string\n): ParsedFragmentElement | null {\n  if (!fragment || typeof fragment !== 'string') return null;\n\n  const wrapped = fragment.trim();\n  if (!wrapped) return null;\n\n  let fragmentNode: any;\n  try {\n    fragmentNode = parseFragment(wrapped);\n  } catch {\n    return null;\n  }\n\n  const childNodes = fragmentNode?.childNodes ?? [];\n  for (const child of childNodes) {\n    if (isElementNode(child)) {\n      const classAttr = getAttr(child, 'class');\n      const classList = splitClassList(classAttr);\n      const textContent = getTextContent(child).trim();\n      const otherAttrs: Record<string, string> = {};\n      for (const a of child.attrs ?? []) {\n        if (a.name?.toLowerCase() !== 'class') {\n          otherAttrs[a.name] = a.value ?? '';\n        }\n      }\n      return {\n        tagName: (child.tagName ?? '').toLowerCase(),\n        classList,\n        textContent,\n        otherAttrs,\n      };\n    }\n  }\n  return null;\n}\n\n/**\n * 对比两个 HTML 片段：解析后比较 class 增删与根元素文本变更\n *\n * @param originalFragment 原始片段（如 resolveGroupChangeFragments 的 originalFragment）\n * @param finalFragment 最终片段（如 resolveGroupChangeFragments 的 finalFragment）\n * @returns 结构化对比结果，便于展示「class 多了啥、少了啥」和「text 变更了啥」\n */\nexport function compareHtmlFragments(\n  originalFragment: string,\n  finalFragment: string\n): HtmlFragmentDiff {\n  const original = parseFragmentToElement(originalFragment);\n  const final = parseFragmentToElement(finalFragment);\n\n  const originalClasses = new Set(original?.classList ?? []);\n  const finalClasses = new Set(final?.classList ?? []);\n  const classAdded = (final?.classList ?? []).filter(\n    (c) => !originalClasses.has(c)\n  );\n  const classRemoved = (original?.classList ?? []).filter(\n    (c) => !finalClasses.has(c)\n  );\n\n  const textOriginal = original?.textContent ?? '';\n  const textFinal = final?.textContent ?? '';\n  const textChanged = textOriginal !== textFinal;\n  const textSummary = textChanged\n    ? `「${textOriginal || '(空)'}」 → 「${textFinal || '(空)'}」`\n    : '无变更';\n\n  return {\n    original,\n    final,\n    classAdded,\n    classRemoved,\n    textOriginal,\n    textFinal,\n    textChanged,\n    textSummary,\n  };\n}\n\n/**\n * 消费 resolveGroupChangeFragments 的返回值：在原有片段级 diff 基础上，再解析两个 HTML 片段，\n * 得到 class 增删与文本变更的结构化结果。\n *\n * @param result resolveGroupChangeMessage / resolveGroupChangeFragments 的返回值\n * @returns 原 result 与 HTML 解析对比结果；若 result 为 undefined 则返回 undefined\n */\nexport function consumeGroupChangeResult<\n  T extends { originalFragment: string; finalFragment: string }\n>(result: T | undefined): (T & { htmlDiff: HtmlFragmentDiff }) | undefined {\n  if (result == null) return undefined;\n  const htmlDiff = compareHtmlFragments(\n    result.originalFragment,\n    result.finalFragment\n  );\n  return { ...result, htmlDiff };\n}\n"],"names":["getAttr","node","name","attrs","_node$attrs","lower","toLowerCase","a","find","x","_x$name","value","getTextContent","nodeName","_node$value","childNodes","_node$childNodes","map","child","join","isElementNode","tagName","splitClassList","classAttr","list","trim","split","filter","Boolean","concat","Set","parseFragmentToElement","fragment","wrapped","fragmentNode","parseFragment","_unused","_fragmentNode$childNo","_fragmentNode","_iterator","_createForOfIteratorHelperLoose","_step","done","_child$tagName","classList","textContent","otherAttrs","_iterator2","_child$attrs","_step2","_a$name","_a$value","compareHtmlFragments","originalFragment","finalFragment","original","final","originalClasses","_original$classList","finalClasses","_final$classList","classAdded","_final$classList2","c","has","classRemoved","_original$classList2","textOriginal","_original$textContent","textFinal","_final$textContent","textChanged","textSummary","consumeGroupChangeResult","result","undefined","htmlDiff","_extends"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export interface ParsedFragmentElement {
+    tagName: string;
+    classList: string[];
+    textContent: string;
+    otherAttrs: Record<string, string>;
+}
+export interface HtmlFragmentDiff {
+    original: ParsedFragmentElement | null;
+    final: ParsedFragmentElement | null;
+    classAdded: string[];
+    classRemoved: string[];
+    textOriginal: string;
+    textFinal: string;
+    textChanged: boolean;
+    textSummary: string;
+}
+export declare function parseFragmentToElement(fragment: string): ParsedFragmentElement | null;
+export declare function compareHtmlFragments(originalFragment: string, finalFragment: string): HtmlFragmentDiff;
+export declare function consumeGroupChangeResult<T extends {
+    originalFragment: string;
+    finalFragment: string;
+}>(result: T | undefined): (T & {
+    htmlDiff: HtmlFragmentDiff;
+}) | undefined;

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./html-fragment-diff.cjs.production.min.js')
+} else {
+  module.exports = require('./html-fragment-diff.cjs.development.js')
+}