@x-oasis/html-fragment-diff 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,12 @@
1
1
 
2
- > @x-oasis/html-fragment-diff@0.2.1 build /home/runner/work/x-oasis/x-oasis/packages/diff/html-fragment-diff
2
+ > @x-oasis/html-fragment-diff@0.2.2 build /home/runner/work/x-oasis/x-oasis/packages/diff/html-fragment-diff
3
3
  > tsdx build --tsconfig tsconfig.build.json
4
4
 
5
5
  @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`.
6
6
  @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`.
7
7
  ⠙ Creating entry file
8
8
  ⠙ Building modules
9
- ✓ Creating entry file 4.7 secs
9
+ ✓ Creating entry file 5.9 secs
10
10
  ⠹ Building modules
11
11
  ⠸ Building modules
12
12
  ⠼ Building modules
@@ -20,7 +20,8 @@
20
20
  ⠹ Building modules
21
21
  ⠸ Building modules
22
22
  ⠼ Building modules
23
+ ⠴ Building modules
23
24
  [tsdx]: Your rootDir is currently set to "./". Please change your rootDir to "./src".
24
25
  TSDX has deprecated setting tsconfig.compilerOptions.rootDir to "./" as it caused buggy output for declarationMaps and more.
25
26
  You may also need to change your include to remove "test", which also caused declarations to be unnecessarily created for test files.
26
- ✓ Building modules 15.7 secs
27
+ ✓ Building modules 14.3 secs
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @x-oasis/html-fragment-diff
2
2
 
3
+ ## 0.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - fbf782d: fix html diff
8
+
3
9
  ## 0.2.1
4
10
 
5
11
  ### Patch Changes
@@ -1 +1 @@
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 // 明确返回全新 string[],避免被误用或序列化成 Set\n const classAdded: string[] = [\n ...(final?.classList ?? []).filter((c) => !originalClasses.has(c)),\n ];\n const classRemoved: string[] = [\n ...(original?.classList ?? []).filter((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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"}
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\n// import { parseFragment } from \"parse5\";\n\n// /** 解析出的单个根元素信息(只关心第一个根元素) */\n// export 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 片段的对比结果 */\n// export 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// */\n// function 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// */\n// function 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// */\n// function isElementNode(node: any): node is { tagName: string; attrs: Array<{ name: string; value: string }>; childNodes?: any[] } {\n// return node && typeof (node as any).tagName === \"string\";\n// }\n\n// /**\n// * 将 class 属性字符串按空白切分为有序列表,去重保留顺序\n// */\n// function 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// */\n// export 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// */\n// export 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((c) => !originalClasses.has(c));\n// const classRemoved = (original?.classList ?? []).filter((c) => !finalClasses.has(c));\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// */\n// export function consumeGroupChangeResult<T extends { originalFragment: string; finalFragment: string }>(\n// result: T | undefined\n// ): (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\n/**\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 // 明确返回全新 string[],避免被误用或序列化成 Set\n const classAdded: string[] = [\n ...(final?.classList ?? []).filter((c) => !originalClasses.has(c)),\n ];\n const classRemoved: string[] = [\n ...(original?.classList ?? []).filter((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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"}
@@ -1 +1 @@
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 // 明确返回全新 string[],避免被误用或序列化成 Set\n const classAdded: string[] = [\n ...(final?.classList ?? []).filter((c) => !originalClasses.has(c)),\n ];\n const classRemoved: string[] = [\n ...(original?.classList ?? []).filter((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,IAE3CC,KAAUjC,eACXkC,QAACN,SAAAA,EAAOX,WAASiB,EAAI,IAAIpC,QAAO,SAACqC,GAAC,OAAMN,EAAgBO,IAAID,OAE3DE,KAAYrC,eACbsC,QAACX,SAAAA,EAAUV,WAASqB,EAAI,IAAIxC,QAAO,SAACqC,GAAC,OAAMJ,EAAaK,IAAID,OAG3DI,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"}
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\n// import { parseFragment } from \"parse5\";\n\n// /** 解析出的单个根元素信息(只关心第一个根元素) */\n// export 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 片段的对比结果 */\n// export 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// */\n// function 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// */\n// function 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// */\n// function isElementNode(node: any): node is { tagName: string; attrs: Array<{ name: string; value: string }>; childNodes?: any[] } {\n// return node && typeof (node as any).tagName === \"string\";\n// }\n\n// /**\n// * 将 class 属性字符串按空白切分为有序列表,去重保留顺序\n// */\n// function 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// */\n// export 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// */\n// export 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((c) => !originalClasses.has(c));\n// const classRemoved = (original?.classList ?? []).filter((c) => !finalClasses.has(c));\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// */\n// export function consumeGroupChangeResult<T extends { originalFragment: string; finalFragment: string }>(\n// result: T | undefined\n// ): (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\n/**\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 // 明确返回全新 string[],避免被误用或序列化成 Set\n const classAdded: string[] = [\n ...(final?.classList ?? []).filter((c) => !originalClasses.has(c)),\n ];\n const classRemoved: string[] = [\n ...(original?.classList ?? []).filter((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":"+nCA4NA,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,IAE3CC,KAAUjC,eACXkC,QAACN,SAAAA,EAAOX,WAASiB,EAAI,IAAIpC,QAAO,SAACqC,GAAC,OAAMN,EAAgBO,IAAID,OAE3DE,KAAYrC,eACbsC,QAACX,SAAAA,EAAUV,WAASqB,EAAI,IAAIxC,QAAO,SAACqC,GAAC,OAAMJ,EAAaK,IAAID,OAG3DI,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"}
@@ -1 +1 @@
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 // 明确返回全新 string[],避免被误用或序列化成 Set\n const classAdded: string[] = [\n ...(final?.classList ?? []).filter((c) => !originalClasses.has(c)),\n ];\n const classRemoved: string[] = [\n ...(original?.classList ?? []).filter((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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"}
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\n// import { parseFragment } from \"parse5\";\n\n// /** 解析出的单个根元素信息(只关心第一个根元素) */\n// export 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 片段的对比结果 */\n// export 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// */\n// function 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// */\n// function 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// */\n// function isElementNode(node: any): node is { tagName: string; attrs: Array<{ name: string; value: string }>; childNodes?: any[] } {\n// return node && typeof (node as any).tagName === \"string\";\n// }\n\n// /**\n// * 将 class 属性字符串按空白切分为有序列表,去重保留顺序\n// */\n// function 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// */\n// export 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// */\n// export 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((c) => !originalClasses.has(c));\n// const classRemoved = (original?.classList ?? []).filter((c) => !finalClasses.has(c));\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// */\n// export function consumeGroupChangeResult<T extends { originalFragment: string; finalFragment: string }>(\n// result: T | undefined\n// ): (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\n/**\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 // 明确返回全新 string[],避免被误用或序列化成 Set\n const classAdded: string[] = [\n ...(final?.classList ?? []).filter((c) => !originalClasses.has(c)),\n ];\n const classRemoved: string[] = [\n ...(original?.classList ?? []).filter((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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"}
@@ -1,5 +1,5 @@
1
1
 
2
- > html-fragment-diff-example@0.2.1 build /home/runner/work/x-oasis/x-oasis/packages/diff/html-fragment-diff/examples
2
+ > html-fragment-diff-example@0.2.2 build /home/runner/work/x-oasis/x-oasis/packages/diff/html-fragment-diff/examples
3
3
  > vite build
4
4
 
5
5
  vite v4.1.4 building for production...
@@ -1,5 +1,13 @@
1
1
  # html-fragment-diff-example
2
2
 
3
+ ## 0.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - fbf782d: fix html diff
8
+ - Updated dependencies [fbf782d]
9
+ - @x-oasis/html-fragment-diff@0.2.2
10
+
3
11
  ## 0.2.1
4
12
 
5
13
  ### Patch Changes
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "html-fragment-diff-example",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "private": true,
5
5
  "type": "module",
6
6
  "scripts": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-oasis/html-fragment-diff",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Parse and compare HTML fragments to detect class changes and text changes",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
package/src/index.ts CHANGED
@@ -1,3 +1,182 @@
1
+ // /**
2
+ // * 对两个 HTML 片段做 parse 级别的对比:解析出标签、class、文本等,并输出 class 增删与文本变更。
3
+ // * 用于消费 resolveGroupChangeFragments 得到的 originalFragment / finalFragment。
4
+ // */
5
+
6
+ // import { parseFragment } from "parse5";
7
+
8
+ // /** 解析出的单个根元素信息(只关心第一个根元素) */
9
+ // export interface ParsedFragmentElement {
10
+ // tagName: string;
11
+ // /** class 属性按空白切分后的列表 */
12
+ // classList: string[];
13
+ // /** 元素内直接+间接文本拼接(不含子标签的 tag,只取文本) */
14
+ // textContent: string;
15
+ // /** 除 class 外的其他属性(name -> value) */
16
+ // otherAttrs: Record<string, string>;
17
+ // }
18
+
19
+ // /** 两个 HTML 片段的对比结果 */
20
+ // export interface HtmlFragmentDiff {
21
+ // /** 原始片段解析结果(若解析失败为 null) */
22
+ // original: ParsedFragmentElement | null;
23
+ // /** 最终片段解析结果(若解析失败为 null) */
24
+ // final: ParsedFragmentElement | null;
25
+ // /** class:最终相对原始新增的 class 列表 */
26
+ // classAdded: string[];
27
+ // /** class:最终相对原始删除的 class 列表 */
28
+ // classRemoved: string[];
29
+ // /** 文本:原始片段根元素文本 */
30
+ // textOriginal: string;
31
+ // /** 文本:最终片段根元素文本 */
32
+ // textFinal: string;
33
+ // /** 文本是否发生变更 */
34
+ // textChanged: boolean;
35
+ // /** 文本变更的简短描述(便于展示) */
36
+ // textSummary: string;
37
+ // }
38
+
39
+ // /**
40
+ // * 从 parse5 的节点中取属性值
41
+ // */
42
+ // function getAttr(
43
+ // node: { attrs?: Array<{ name: string; value: string }> },
44
+ // name: string
45
+ // ): string | undefined {
46
+ // const attrs = node.attrs ?? [];
47
+ // const lower = name.toLowerCase();
48
+ // const a = attrs.find((x) => x.name?.toLowerCase() === lower);
49
+ // return a?.value;
50
+ // }
51
+
52
+ // /**
53
+ // * 递归收集元素的文本内容(不含标签名,只取文本节点)
54
+ // */
55
+ // function getTextContent(node: any): string {
56
+ // if (!node) return "";
57
+ // if (node.nodeName === "#text") {
58
+ // return node.value ?? "";
59
+ // }
60
+ // const childNodes = node.childNodes ?? [];
61
+ // return childNodes.map((child: any) => getTextContent(child)).join("");
62
+ // }
63
+
64
+ // /**
65
+ // * 判断是否为元素节点(有 tagName)
66
+ // */
67
+ // function isElementNode(node: any): node is { tagName: string; attrs: Array<{ name: string; value: string }>; childNodes?: any[] } {
68
+ // return node && typeof (node as any).tagName === "string";
69
+ // }
70
+
71
+ // /**
72
+ // * 将 class 属性字符串按空白切分为有序列表,去重保留顺序
73
+ // */
74
+ // function splitClassList(classAttr: string | undefined): string[] {
75
+ // if (classAttr == null || classAttr === "") return [];
76
+ // const list = classAttr.trim().split(/\s+/).filter(Boolean);
77
+ // return [...new Set(list)];
78
+ // }
79
+
80
+ // /**
81
+ // * 从 HTML 片段中解析出第一个根元素的信息
82
+ // *
83
+ // * @param fragment 单段 HTML,如 `<h1 class="...">姓名</h1>`
84
+ // * @returns 第一个根元素的信息;若无元素或解析失败则返回 null
85
+ // */
86
+ // export function parseFragmentToElement(
87
+ // fragment: string
88
+ // ): ParsedFragmentElement | null {
89
+ // if (!fragment || typeof fragment !== "string") return null;
90
+
91
+ // const wrapped = fragment.trim();
92
+ // if (!wrapped) return null;
93
+
94
+ // let fragmentNode: any;
95
+ // try {
96
+ // fragmentNode = parseFragment(wrapped);
97
+ // } catch {
98
+ // return null;
99
+ // }
100
+
101
+ // const childNodes = fragmentNode?.childNodes ?? [];
102
+ // for (const child of childNodes) {
103
+ // if (isElementNode(child)) {
104
+ // const classAttr = getAttr(child, "class");
105
+ // const classList = splitClassList(classAttr);
106
+ // const textContent = getTextContent(child).trim();
107
+ // const otherAttrs: Record<string, string> = {};
108
+ // for (const a of child.attrs ?? []) {
109
+ // if (a.name?.toLowerCase() !== "class") {
110
+ // otherAttrs[a.name] = a.value ?? "";
111
+ // }
112
+ // }
113
+ // return {
114
+ // tagName: (child.tagName ?? "").toLowerCase(),
115
+ // classList,
116
+ // textContent,
117
+ // otherAttrs,
118
+ // };
119
+ // }
120
+ // }
121
+ // return null;
122
+ // }
123
+
124
+ // /**
125
+ // * 对比两个 HTML 片段:解析后比较 class 增删与根元素文本变更
126
+ // *
127
+ // * @param originalFragment 原始片段(如 resolveGroupChangeFragments 的 originalFragment)
128
+ // * @param finalFragment 最终片段(如 resolveGroupChangeFragments 的 finalFragment)
129
+ // * @returns 结构化对比结果,便于展示「class 多了啥、少了啥」和「text 变更了啥」
130
+ // */
131
+ // export function compareHtmlFragments(
132
+ // originalFragment: string,
133
+ // finalFragment: string
134
+ // ): HtmlFragmentDiff {
135
+ // const original = parseFragmentToElement(originalFragment);
136
+ // const final = parseFragmentToElement(finalFragment);
137
+
138
+ // const originalClasses = new Set(original?.classList ?? []);
139
+ // const finalClasses = new Set(final?.classList ?? []);
140
+ // const classAdded = (final?.classList ?? []).filter((c) => !originalClasses.has(c));
141
+ // const classRemoved = (original?.classList ?? []).filter((c) => !finalClasses.has(c));
142
+
143
+ // const textOriginal = original?.textContent ?? "";
144
+ // const textFinal = final?.textContent ?? "";
145
+ // const textChanged = textOriginal !== textFinal;
146
+ // const textSummary = textChanged
147
+ // ? `「${textOriginal || "(空)"}」 → 「${textFinal || "(空)"}」`
148
+ // : "无变更";
149
+
150
+ // return {
151
+ // original,
152
+ // final,
153
+ // classAdded,
154
+ // classRemoved,
155
+ // textOriginal,
156
+ // textFinal,
157
+ // textChanged,
158
+ // textSummary,
159
+ // };
160
+ // }
161
+
162
+ // /**
163
+ // * 消费 resolveGroupChangeFragments 的返回值:在原有片段级 diff 基础上,再解析两个 HTML 片段,
164
+ // * 得到 class 增删与文本变更的结构化结果。
165
+ // *
166
+ // * @param result resolveGroupChangeMessage / resolveGroupChangeFragments 的返回值
167
+ // * @returns 原 result 与 HTML 解析对比结果;若 result 为 undefined 则返回 undefined
168
+ // */
169
+ // export function consumeGroupChangeResult<T extends { originalFragment: string; finalFragment: string }>(
170
+ // result: T | undefined
171
+ // ): (T & { htmlDiff: HtmlFragmentDiff }) | undefined {
172
+ // if (result == null) return undefined;
173
+ // const htmlDiff = compareHtmlFragments(
174
+ // result.originalFragment,
175
+ // result.finalFragment
176
+ // );
177
+ // return { ...result, htmlDiff };
178
+ // }
179
+
1
180
  /**
2
181
  * 对两个 HTML 片段做 parse 级别的对比:解析出标签、class、文本等,并输出 class 增删与文本变更。
3
182
  * 用于消费 resolveGroupChangeFragments 得到的 originalFragment / finalFragment。