deep
Paragraph 1
+Paragraph 2
+original
');
+ const div = html.querySelector('div')!;
+
+ div.prepend('first');
+ div.prepend('second');
+ div.prepend('third');
+
+ expect(div.innerHTML).toBe('thirdsecondfirstoriginal');
+ });
+
+ test('should handle document-level trim operations', () => {
+ const html = new HtmlMod(' content
');
+
+ html.trim();
+ expect(html.toString()).toBe('content
');
+
+ const div = html.querySelector('div')!;
+ div.setAttribute('id', 'test');
+
+ expect(html.querySelector('#test')).not.toBeNull();
+ });
+
+ test('should handle operations at exact document end', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.after('after
'); + div.after('more'); + + // Second after() inserts between div and first insertion + expect(html.toString()).toBe('content
moreafter
'); + expect(html.toString().endsWith('')).toBe(true); + }); + }); + + describe('Off-by-One and Boundary Errors', () => { + test('should handle overlapping modifications in parent and child', () => { + const html = new HtmlMod('text
');
+ const div = html.querySelector('div')!;
+ const span = html.querySelector('span')!;
+
+ // Modify child
+ span.setAttribute('id', 'child');
+
+ // Then modify parent in a way that shifts child's position
+ div.prepend('content
');
+ const div = html.querySelector('div')!;
+
+ // Replace attribute value with same length
+ div.setAttribute('id', 'new');
+ expect(div.getAttribute('id')).toBe('new');
+
+ // Replace with longer
+ div.setAttribute('id', 'muchlonger');
+ expect(div.getAttribute('id')).toBe('muchlonger');
+
+ // Replace with shorter
+ div.setAttribute('id', 'x');
+ expect(div.getAttribute('id')).toBe('x');
+ });
+
+ test('should handle innerHTML that changes element length dramatically', () => {
+ const html = new HtmlMod('x
');
+
+ // Expand massively
+ p.innerHTML = 'x'.repeat(1000);
+ expect(p.innerHTML.length).toBe(1000);
+
+ // Shrink again
+ p.innerHTML = 'y';
+ expect(p.innerHTML).toBe('y');
+ });
+
+ test('should handle removing first vs last vs middle sibling', () => {
+ const html = new HtmlMod('');
+
+ // Remove first
+ html.querySelector('a')!.remove();
+ expect(html.querySelectorAll('*').length).toBe(5); // div + 4 children
+
+ // Remove last
+ html.querySelector('e')!.remove();
+ expect(html.querySelectorAll('*').length).toBe(4);
+
+ // Remove middle
+ html.querySelector('c')!.remove();
+ expect(html.querySelectorAll('*').length).toBe(3);
+
+ // Remaining should be queryable
+ expect(html.querySelector('b')).not.toBeNull();
+ expect(html.querySelector('d')).not.toBeNull();
+ });
+ });
+
+ describe('Malicious Attribute Values', () => {
+ test('should handle attribute values with HTML-like content', () => {
+ const html = new HtmlMod('
content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-html', '');
+ expect(div.getAttribute('data-html')).toBe('');
+ });
+
+ test('should handle attribute values with quotes and escapes', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-quotes', 'He said "hello" and \'goodbye\'');
+ expect(div.getAttribute('data-quotes')).toBe('He said "hello" and \'goodbye\'');
+ });
+
+ test('should handle attribute values with newlines and special chars', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-special', 'line1\nline2\ttab\rcarriage');
+ expect(div.getAttribute('data-special')).toContain('line1');
+ expect(div.getAttribute('data-special')).toContain('line2');
+ });
+
+ test('should handle attribute values that could break position tracking', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ // Value that looks like position indices
+ div.setAttribute('data-pos', '0:100:200:300');
+ expect(div.getAttribute('data-pos')).toBe('0:100:200:300');
+ });
+ });
+
+ describe('Self-Closing Tag Conversion Hell', () => {
+ test('should handle nested self-closing conversions', () => {
+ const html = new HtmlMod('');
+
+ const div = html.querySelector('div')!;
+ const span = html.querySelector('span')!;
+ const p = html.querySelector('p')!;
+
+ // Convert all to non-self-closing by adding content
+ div.innerHTML = 'div content';
+ span.innerHTML = 'span content';
+ p.innerHTML = 'p content';
+
+ expect(html.toString()).toBe('div content
span contentp content
'); + + // All should still be queryable + expect(html.querySelector('div')!.innerHTML).toBe('div content'); + expect(html.querySelector('span')!.innerHTML).toBe('span content'); + expect(html.querySelector('p')!.innerHTML).toBe('p content'); + }); + + test('should handle converting self-closing to non-self-closing back to self-closing', () => { + const html = new HtmlMod(''); + const br = html.querySelector('br')!; + + // Add content (converts to non-self-closing) + br.innerHTML = 'content'; + expect(html.toString()).toContain('content'); + + // Empty it (might convert back depending on implementation) + br.innerHTML = ''; + + // Should still be queryable + expect(html.querySelector('br')).not.toBeNull(); + }); + + test('should handle prepend on self-closing tag', () => { + const html = new HtmlMod(''); + const div = html.querySelector('div')!; + + // This should convert to non-self-closing + div.prepend('prepended'); + + expect(html.toString()).toContain('prepended'); + expect(html.querySelector('span')).not.toBeNull(); + }); + + test('should handle append on self-closing tag', () => { + const html = new HtmlMod(''); + const div = html.querySelector('div')!; + + div.append('appended'); + + expect(html.toString()).toContain('appended'); + expect(html.querySelector('span')).not.toBeNull(); + }); + }); + + describe('Parent-Child Reference Chaos', () => { + test("should handle modifying removed element's former siblings", () => { + const html = new HtmlMod('
123
');
+ const b = html.querySelector('b')!;
+ const c = html.querySelector('c')!;
+
+ // Remove middle element
+ b.remove();
+
+ // Modify its former sibling
+ c.setAttribute('id', 'modified');
+
+ expect(html.querySelector('#modified')).not.toBeNull();
+ expect(html.toString()).toBe('13
');
+ });
+
+ test('should handle removing parent while holding child reference', () => {
+ const html = new HtmlMod('text
1
2
new
'; + + expect(html.querySelector('#new')).not.toBeNull(); + expect(html.querySelectorAll('p').length).toBe(1); + }); + }); + + describe('Extreme Text Content Edge Cases', () => { + test('should handle textContent with only whitespace variations', () => { + const html = new HtmlMod('original
'); + const p = html.querySelector('p')!; + + p.textContent = ' '; + expect(p.textContent).toBe(' '); + + p.textContent = '\n\n\n'; + expect(p.textContent).toBe('\n\n\n'); + + p.textContent = '\t\t\t'; + expect(p.textContent).toBe('\t\t\t'); + }); + + test('should handle textContent with null bytes', () => { + const html = new HtmlMod('original
'); + const p = html.querySelector('p')!; + + p.textContent = 'before\u0000after'; + expect(p.textContent).toContain('before'); + }); + + test('should handle innerHTML with incomplete tags', () => { + const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ // Parser should handle this gracefully
+ div.innerHTML = 'text'; + + // Should not crash + expect(html.toString()).toContain('text'); + }); + }); + + describe('Query After Chaos', () => { + test('should correctly query after 100 mixed operations', () => { + const html = new HtmlMod('
start
content
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 100; index++) {
+ div.innerHTML = `content-${index}`;
+ div.dataset.iteration = String(index);
+ }
+
+ expect(div.dataset.iteration).toBe('99');
+ expect(div.dataset.id).toBe('1');
+ });
+
+ test('should handle dataset with camelCase edge cases', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ // Edge cases for camelCase conversion
+ div.dataset.a = '1';
+ div.dataset.aB = '2';
+ div.dataset.aBc = '3';
+ div.dataset.aBcD = '4';
+
+ expect(div.getAttribute('data-a')).toBe('1');
+ expect(div.getAttribute('data-a-b')).toBe('2');
+ expect(div.getAttribute('data-a-bc')).toBe('3');
+ expect(div.getAttribute('data-a-bc-d')).toBe('4');
+ });
+
+ test('should handle mixing dataset and setAttribute on same attributes', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.dataset.id = '1';
+ div.setAttribute('data-id', '2');
+ expect(div.dataset.id).toBe('2');
+
+ div.setAttribute('data-name', 'foo');
+ expect(div.dataset.name).toBe('foo');
+
+ div.dataset.name = 'bar';
+ expect(div.getAttribute('data-name')).toBe('bar');
+ });
+ });
+
+ describe('Memory Leak Potential', () => {
+ test('should not leak with circular-like innerHTML operations', () => {
+ const html = new HtmlMod('content
text
`; + const p = html.querySelector('p')!; + removedElements.push(p); + p.remove(); + } + + // All removed elements should still have their cached content + for (let index = 0; index < 1000; index++) { + expect(removedElements[index].textContent).toBe('text'); + } + }); + }); +}); diff --git a/packages/html-mod/src/experimental/ast-manipulator.ts b/packages/html-mod/src/experimental/ast-manipulator.ts new file mode 100644 index 0000000..f311c08 --- /dev/null +++ b/packages/html-mod/src/experimental/ast-manipulator.ts @@ -0,0 +1,388 @@ +/** + * AST Manipulation Engine + * + * This module provides functions to directly manipulate the AST structure + * without reparsing, keeping the AST in sync with string modifications. + */ +import { parseDocument, SourceElement, SourceChildNode, SourceText, isTag, Options } from '@ciolabs/htmlparser2-source'; + +/** + * Internal types for AST manipulation that expose mutable properties + * These properties exist at runtime but aren't in the public types + */ +type MutableNode = { + parent?: SourceElement; + children?: SourceChildNode[]; +}; + +type MutableElement = SourceElement & MutableNode; +type MutableChildNode = SourceChildNode & MutableNode; + +/** + * Parse HTML string and create AST nodes positioned at a specific offset + */ +export function parseHtmlAtPosition(html: string, startPosition: number, options?: Options): SourceChildNode[] { + // Parse the HTML string + const doc = parseDocument(html, options); + + // Adjust all positions by the start offset + adjustNodePositions(doc.children, startPosition); + + return doc.children; +} + +/** + * Recursively adjust all positions in nodes by an offset + */ +function adjustNodePositions(nodes: SourceChildNode[], offset: number): void { + for (const node of nodes) { + if ('startIndex' in node && typeof node.startIndex === 'number') { + node.startIndex += offset; + } + if ('endIndex' in node && typeof node.endIndex === 'number') { + node.endIndex += offset; + } + + if (isTag(node)) { + // Adjust element-specific positions + if (node.source?.openTag) { + node.source.openTag.startIndex += offset; + node.source.openTag.endIndex += offset; + } + + if (node.source?.closeTag) { + node.source.closeTag.startIndex += offset; + node.source.closeTag.endIndex += offset; + } + + // Adjust attribute positions + if (node.source?.attributes) { + for (const attribute of node.source.attributes) { + if (attribute.name) { + attribute.name.startIndex += offset; + attribute.name.endIndex += offset; + } + if (attribute.value) { + attribute.value.startIndex += offset; + attribute.value.endIndex += offset; + } + if (attribute.source) { + attribute.source.startIndex += offset; + attribute.source.endIndex += offset; + } + } + } + + // Recursively adjust children + if (node.children) { + adjustNodePositions(node.children, offset); + } + } + } +} + +/** + * Replace all children of an element with new nodes + */ +export function replaceChildren(element: SourceElement, newChildren: SourceChildNode[]): void { + const mutableElement = element as MutableElement; + + // Update parent references + for (const child of newChildren) { + (child as MutableChildNode).parent = element; + } + + // Replace children array + mutableElement.children = newChildren; +} + +/** + * Append children to an element + */ +export function appendChild(element: SourceElement, newChildren: SourceChildNode[]): void { + const mutableElement = element as MutableElement; + + // Update parent references + for (const child of newChildren) { + (child as MutableChildNode).parent = element; + } + + // Append to children array + if (!mutableElement.children) { + mutableElement.children = []; + } + mutableElement.children.push(...newChildren); +} + +/** + * Prepend children to an element + */ +export function prependChild(element: SourceElement, newChildren: SourceChildNode[]): void { + const mutableElement = element as MutableElement; + + // Update parent references + for (const child of newChildren) { + (child as MutableChildNode).parent = element; + } + + // Prepend to children array + if (!mutableElement.children) { + mutableElement.children = []; + } + mutableElement.children.unshift(...newChildren); +} + +/** + * Insert children before a specific node in its parent + */ +export function insertBefore(referenceNode: SourceChildNode, newChildren: SourceChildNode[]): void { + const parent = (referenceNode as MutableChildNode).parent as MutableElement | undefined; + if (!parent || !parent.children) { + throw new Error('Cannot insert before node without parent'); + } + + const index = parent.children.indexOf(referenceNode); + if (index === -1) { + throw new Error('Reference node not found in parent children'); + } + + // Update parent references + for (const child of newChildren) { + (child as MutableChildNode).parent = parent; + } + + // Insert at index + parent.children.splice(index, 0, ...newChildren); +} + +/** + * Insert children after a specific node in its parent + */ +export function insertAfter(referenceNode: SourceChildNode, newChildren: SourceChildNode[]): void { + const parent = (referenceNode as MutableChildNode).parent as MutableElement | undefined; + if (!parent || !parent.children) { + throw new Error('Cannot insert after node without parent'); + } + + const index = parent.children.indexOf(referenceNode); + if (index === -1) { + throw new Error('Reference node not found in parent children'); + } + + // Update parent references + for (const child of newChildren) { + (child as MutableChildNode).parent = parent; + } + + // Insert after index + parent.children.splice(index + 1, 0, ...newChildren); +} + +/** + * Remove a node from its parent + */ +export function removeNode(node: SourceChildNode): void { + const parent = (node as MutableChildNode).parent as MutableElement | undefined; + if (!parent || !parent.children) { + return; + } + + const index = parent.children.indexOf(node); + if (index !== -1) { + parent.children.splice(index, 1); + } +} + +/** + * Replace a node with new children in its parent + */ +export function replaceNode(oldNode: SourceChildNode, newChildren: SourceChildNode[]): void { + const parent = (oldNode as MutableChildNode).parent as MutableElement | undefined; + if (!parent || !parent.children) { + throw new Error('Cannot replace node without parent'); + } + + const index = parent.children.indexOf(oldNode); + if (index === -1) { + throw new Error('Node not found in parent children'); + } + + // Update parent references + for (const child of newChildren) { + (child as MutableChildNode).parent = parent; + } + + // Replace at index + parent.children.splice(index, 1, ...newChildren); +} + +/** + * Update or add an attribute to an element + */ +export function setAttribute( + element: SourceElement, + name: string, + value: string, + quote: '"' | "'" | null, + nameStart: number, + valueStart: number, + sourceStart: number, + sourceEnd: number, + unescapedValue?: string +): void { + if (!element.source) { + element.source = { + openTag: { + startIndex: element.startIndex, + endIndex: element.startIndex, + data: `<${element.tagName}>`, + name: element.tagName, + isSelfClosing: false, + }, + closeTag: null, + attributes: [], + }; + } + + if (!element.source.attributes) { + element.source.attributes = []; + } + + // Find existing attribute + const existingIndex = element.source.attributes.findIndex(a => a.name.data === name); + + const quoteChar = quote === '"' ? '"' : quote === "'" ? "'" : ''; + const attribute = { + name: { + data: name, + startIndex: nameStart, + endIndex: nameStart + name.length - 1, + }, + value: { + data: value, + startIndex: valueStart, + endIndex: valueStart + value.length - 1, + }, + source: { + startIndex: sourceStart, + endIndex: sourceEnd, + data: `${name}=${quoteChar}${value}${quoteChar}`, + }, + quote, + }; + + if (existingIndex === -1) { + // Add new + element.source.attributes.push(attribute); + } else { + // Replace existing + element.source.attributes[existingIndex] = attribute; + } + + // Also update the attribs object + // Use unescapedValue for attribs (JavaScript consumption), escaped value for source (HTML) + if (!element.attribs) { + element.attribs = {}; + } + element.attribs[name] = unescapedValue === undefined ? value : unescapedValue; + + // Update openTag.data to include all attributes + if (element.source) { + let openTagData = `<${element.tagName}`; + if (element.source.attributes && element.source.attributes.length > 0) { + for (const attribute_ of element.source.attributes) { + openTagData += ` ${attribute_.source.data}`; + } + } + openTagData += element.source.openTag.isSelfClosing ? '/>' : '>'; + element.source.openTag.data = openTagData; + } +} + +/** + * Remove an attribute from an element + */ +export function removeAttribute(element: SourceElement, name: string): void { + if (!element.source?.attributes) { + return; + } + + // Remove from attributes array + element.source.attributes = element.source.attributes.filter(a => a.name.data !== name); + + // Remove from attribs object + if (element.attribs) { + delete element.attribs[name]; + } + + // Update openTag.data to reflect removed attribute + if (element.source) { + let openTagData = `<${element.tagName}`; + if (element.source.attributes && element.source.attributes.length > 0) { + for (const attribute of element.source.attributes) { + openTagData += ` ${attribute.source.data}`; + } + } + openTagData += element.source.openTag.isSelfClosing ? '/>' : '>'; + element.source.openTag.data = openTagData; + } +} + +/** + * Update element tag name + */ +export function setTagName(element: SourceElement, tagName: string): void { + element.tagName = tagName; + element.name = tagName; + + // Keep source data in sync + if (element.source) { + element.source.openTag.name = tagName; + + // Reconstruct openTag.data with tagName and all attributes + let openTagData = `<${tagName}`; + if (element.source.attributes && element.source.attributes.length > 0) { + for (const attribute of element.source.attributes) { + openTagData += ` ${attribute.source.data}`; + } + } + openTagData += element.source.openTag.isSelfClosing ? '/>' : '>'; + element.source.openTag.data = openTagData; + + if (element.source.closeTag) { + element.source.closeTag.name = tagName; + element.source.closeTag.data = ``; + } + } +} + +/** + * Update text node data + */ +export function setTextData(text: SourceText, data: string): void { + text.data = data; +} + +/** + * Convert self-closing tag to regular tag with closeTag + */ +export function convertToRegularTag( + element: SourceElement, + openTagEnd: number, + closeTagStart: number, + closeTagEnd: number +): void { + // Update the openTag to not be self-closing + if (element.source) { + element.source.openTag.isSelfClosing = false; + element.source.openTag.endIndex = openTagEnd; // Update '>' position + + // Add closeTag information + element.source.closeTag = { + startIndex: closeTagStart, + endIndex: closeTagEnd, + data: ``, + name: element.tagName, + }; + } +} diff --git a/packages/html-mod/src/experimental/ast-updater.test.ts b/packages/html-mod/src/experimental/ast-updater.test.ts new file mode 100644 index 0000000..761edad --- /dev/null +++ b/packages/html-mod/src/experimental/ast-updater.test.ts @@ -0,0 +1,324 @@ +import { parseDocument, isTag } from '@ciolabs/htmlparser2-source'; +import { describe, expect, test } from 'vitest'; + +import { AstUpdater } from './ast-updater'; +import { + calculateOverwriteDelta, + calculateAppendRightDelta, + calculatePrependLeftDelta, + calculateRemoveDelta, + shouldUpdatePosition, + applyDeltaToPosition, +} from './position-delta'; + +describe('position-delta', () => { + describe('calculateOverwriteDelta', () => { + test('calculates delta for same length replacement', () => { + const delta = calculateOverwriteDelta(10, 15, 'hello'); + expect(delta.operationType).toBe('overwrite'); + expect(delta.mutationStart).toBe(10); + expect(delta.mutationEnd).toBe(15); + expect(delta.delta).toBe(0); // 5 chars replaced with 5 chars + }); + + test('calculates delta for shorter replacement', () => { + const delta = calculateOverwriteDelta(10, 15, 'hi'); + expect(delta.delta).toBe(-3); // 5 chars replaced with 2 chars + }); + + test('calculates delta for longer replacement', () => { + const delta = calculateOverwriteDelta(10, 15, 'hello world'); + expect(delta.delta).toBe(6); // 5 chars replaced with 11 chars + }); + }); + + describe('calculateAppendRightDelta', () => { + test('calculates delta for insertion', () => { + const delta = calculateAppendRightDelta(10, 'hello'); + expect(delta.operationType).toBe('appendRight'); + expect(delta.mutationStart).toBe(10); + expect(delta.delta).toBe(5); + }); + }); + + describe('calculatePrependLeftDelta', () => { + test('calculates delta for insertion', () => { + const delta = calculatePrependLeftDelta(10, 'hello'); + expect(delta.operationType).toBe('prependLeft'); + expect(delta.mutationStart).toBe(10); + expect(delta.delta).toBe(5); + }); + }); + + describe('calculateRemoveDelta', () => { + test('calculates delta for removal', () => { + const delta = calculateRemoveDelta(10, 15); + expect(delta.operationType).toBe('remove'); + expect(delta.mutationStart).toBe(10); + expect(delta.mutationEnd).toBe(15); + expect(delta.delta).toBe(-5); + }); + }); + + describe('shouldUpdatePosition', () => { + test('overwrite affects positions >= end', () => { + const delta = calculateOverwriteDelta(10, 15, 'hello world'); + expect(shouldUpdatePosition(9, delta)).toBe(false); + expect(shouldUpdatePosition(10, delta)).toBe(false); + expect(shouldUpdatePosition(11, delta)).toBe(false); // Within overwritten region + expect(shouldUpdatePosition(14, delta)).toBe(false); // Within overwritten region + expect(shouldUpdatePosition(15, delta)).toBe(true); // At end of overwritten region + expect(shouldUpdatePosition(20, delta)).toBe(true); + }); + + test('appendRight affects positions >= start', () => { + const delta = calculateAppendRightDelta(10, 'hello'); + expect(shouldUpdatePosition(9, delta)).toBe(false); + expect(shouldUpdatePosition(10, delta)).toBe(true); + expect(shouldUpdatePosition(11, delta)).toBe(true); + }); + + test('prependLeft affects positions >= start', () => { + const delta = calculatePrependLeftDelta(10, 'hello'); + expect(shouldUpdatePosition(9, delta)).toBe(false); + expect(shouldUpdatePosition(10, delta)).toBe(true); + expect(shouldUpdatePosition(11, delta)).toBe(true); + }); + + test('remove affects positions >= end', () => { + const delta = calculateRemoveDelta(10, 15); + expect(shouldUpdatePosition(9, delta)).toBe(false); + expect(shouldUpdatePosition(14, delta)).toBe(false); + expect(shouldUpdatePosition(15, delta)).toBe(true); + expect(shouldUpdatePosition(20, delta)).toBe(true); + }); + }); + + describe('applyDeltaToPosition', () => { + test('applies positive delta to affected position', () => { + const delta = calculateAppendRightDelta(10, 'hello'); + expect(applyDeltaToPosition(15, delta)).toBe(20); + }); + + test('does not apply delta to unaffected position', () => { + const delta = calculateAppendRightDelta(10, 'hello'); + expect(applyDeltaToPosition(5, delta)).toBe(5); + }); + + test('applies negative delta', () => { + const delta = calculateRemoveDelta(10, 15); + expect(applyDeltaToPosition(20, delta)).toBe(15); + }); + }); +}); + +describe('AstUpdater', () => { + describe('updateNodePositions', () => { + test('updates single element positions after overwrite', () => { + const html = 'hello
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+ expect(div.startIndex).toBe(0);
+ expect(div.endIndex).toBe(15); // Inclusive - last char is at index 15
+
+ // Simulate overwrite that increases length by 6 chars at position 5
+ const delta = calculateOverwriteDelta(5, 10, 'hello world');
+ updater.updateNodePositions(doc, delta);
+
+ // Positions before mutation (0-4) stay same, after mutation shift by +6
+ expect(div.startIndex).toBe(0); // Before mutation
+ expect(div.endIndex).toBe(21); // 15 + 6
+ });
+
+ test('updates nested elements correctly', () => {
+ const html = 'text
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+ if (!isTag(div)) throw new Error('Expected element');
+ const span = div.children[0];
+
+ // Simulate insertion before the div
+ const delta = calculatePrependLeftDelta(0, 'prefix');
+ updater.updateNodePositions(doc, delta);
+
+ // All positions should shift by +6
+ expect(div.startIndex).toBe(6);
+ expect(span.startIndex).toBe(11);
+ });
+
+ test('updates attribute positions', () => {
+ const html = 'content
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+ if (!isTag(div)) throw new Error('Expected element');
+ const classAttribute = div.source.attributes.find(a => a.name.data === 'class')!;
+
+ const originalNameStart = classAttribute.name.startIndex;
+ const originalValueStart = classAttribute.value!.startIndex;
+
+ // Simulate insertion before the div
+ const delta = calculatePrependLeftDelta(0, 'XX');
+ updater.updateNodePositions(doc, delta);
+
+ expect(classAttribute.name.startIndex).toBe(originalNameStart + 2);
+ expect(classAttribute.value!.startIndex).toBe(originalValueStart + 2);
+ });
+
+ test('updates text node positions', () => {
+ const html = 'hello world
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+ if (!isTag(div)) throw new Error('Expected element');
+ const textNode = div.children[0];
+
+ // Simulate insertion before text
+ const delta = calculatePrependLeftDelta(5, 'XX');
+ updater.updateNodePositions(doc, delta);
+
+ expect(textNode.startIndex).toBe(7); // 5 + 2
+ expect(textNode.endIndex).toBe(17); // Original 15 + 2
+ });
+
+ test('skips nodes before mutation (optimization)', () => {
+ const html = 'first
second';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+ const span = doc.children[1];
+
+ const originalDivEnd = div.endIndex;
+ const originalSpanStart = span.startIndex;
+
+ // Simulate insertion after both elements
+ const delta = calculateAppendRightDelta(35, 'suffix');
+ updater.updateNodePositions(doc, delta);
+
+ // Elements before mutation should not change
+ expect(div.endIndex).toBe(originalDivEnd);
+ expect(span.startIndex).toBe(originalSpanStart);
+ });
+
+ test('handles zero delta (no-op)', () => {
+ const html = 'hello
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const originalStartIndex = doc.children[0].startIndex;
+
+ // Same length replacement
+ const delta = calculateOverwriteDelta(5, 10, 'world');
+ updater.updateNodePositions(doc, delta);
+
+ expect(doc.children[0].startIndex).toBe(originalStartIndex);
+ });
+
+ test('handles negative delta (removal)', () => {
+ const html = 'hello world
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+
+ // Remove 6 chars at position 5
+ const delta = calculateRemoveDelta(5, 11);
+ updater.updateNodePositions(doc, delta);
+
+ expect(div.endIndex).toBe(15); // Original 21 - 6
+ });
+
+ test('updates closeTag positions independently', () => {
+ const html = 'content
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const div = doc.children[0];
+ if (!isTag(div)) throw new Error('Expected element');
+ const originalCloseTagStart = div.source.closeTag!.startIndex;
+
+ // Insert after opening tag
+ const delta = calculateAppendRightDelta(5, 'XX');
+ updater.updateNodePositions(doc, delta);
+
+ expect(div.source.closeTag!.startIndex).toBe(originalCloseTagStart + 2);
+ });
+
+ test('handles multiple nested levels', () => {
+ const html = 'text
content
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const comment = doc.children[0];
+ const div = doc.children[1];
+
+ expect(comment.type).toBe('comment');
+ if (!('startIndex' in comment) || !('endIndex' in comment)) {
+ throw new Error('Comment should have position tracking');
+ }
+ expect(comment.startIndex).toBe(0);
+ expect(comment.endIndex).toBe(15);
+
+ // Insert at beginning
+ const delta = calculatePrependLeftDelta(0, 'XX');
+ updater.updateNodePositions(doc, delta);
+
+ // Comment positions should shift
+ expect(comment.startIndex).toBe(2);
+ expect(comment.endIndex).toBe(17);
+
+ // Div should also shift
+ expect(div.startIndex).toBe(18);
+ });
+
+ test('updates comment positions after elements', () => {
+ const html = 'text
';
+ const doc = parseDocument(html);
+ const updater = new AstUpdater();
+
+ const comment = doc.children[1];
+
+ if (!('startIndex' in comment) || !('endIndex' in comment)) {
+ throw new Error('Comment should have position tracking');
+ }
+ expect(comment.startIndex).toBe(15);
+ expect(comment.endIndex).toBe(30);
+
+ // Insert in middle of div content
+ const delta = calculateAppendRightDelta(10, 'INSERTED');
+ updater.updateNodePositions(doc, delta);
+
+ // Comment after modification should shift
+ expect(comment.startIndex).toBe(23); // 15 + 8
+ expect(comment.endIndex).toBe(38); // 30 + 8
+ });
+ });
+});
diff --git a/packages/html-mod/src/experimental/ast-updater.ts b/packages/html-mod/src/experimental/ast-updater.ts
new file mode 100644
index 0000000..9bfe26c
--- /dev/null
+++ b/packages/html-mod/src/experimental/ast-updater.ts
@@ -0,0 +1,186 @@
+/**
+ * AST Position Update Engine
+ *
+ * This module updates AST node positions after MagicString operations,
+ * keeping the AST synchronized with the string state without reparsing.
+ */
+import { SourceDocument, SourceElement, SourceChildNode, SourceText, isTag, isText } from '@ciolabs/htmlparser2-source';
+
+import { PositionDelta, applyDeltaToPosition } from './position-delta';
+
+/**
+ * Type guard to check if a node has position tracking
+ */
+interface NodeWithPositions {
+ startIndex: number;
+ endIndex: number;
+}
+
+function hasPositions(node: SourceChildNode): node is SourceChildNode & NodeWithPositions {
+ return (
+ 'startIndex' in node &&
+ 'endIndex' in node &&
+ typeof node.startIndex === 'number' &&
+ typeof node.endIndex === 'number'
+ );
+}
+
+export class AstUpdater {
+ /**
+ * Update positions starting from a specific element (targeted update)
+ * This is more efficient when we know which element was modified
+ */
+ updateFromElement(element: SourceElement, rootNode: SourceDocument, delta: PositionDelta): void {
+ if (delta.delta === 0) {
+ return;
+ }
+
+ if (!element.parent) {
+ this.updateNodePositions(rootNode, delta);
+ return;
+ }
+
+ this.updateElementNode(element, delta);
+ this.updateAncestors(element, rootNode, delta);
+ this.updateFollowingSiblings(element, rootNode, delta);
+ }
+
+ private updateFollowingSiblings(element: SourceElement, rootNode: SourceDocument, delta: PositionDelta): void {
+ let parent = element.parent as SourceElement | SourceDocument | null;
+ let child: SourceChildNode = element;
+
+ while (parent) {
+ const siblings = isTag(parent) ? parent.children : parent === rootNode ? rootNode.children : [];
+ const childIndex = siblings.indexOf(child);
+
+ for (let index = childIndex + 1; index < siblings.length; index++) {
+ this.updateNode(siblings[index], delta);
+ }
+
+ if (parent === rootNode) break;
+ child = parent as SourceChildNode;
+ parent = isTag(parent) ? (parent.parent as SourceElement | SourceDocument | null) : null;
+ }
+ }
+
+ updateNodePositions(rootNode: SourceDocument, delta: PositionDelta): void {
+ if (delta.delta === 0) {
+ return;
+ }
+
+ for (const child of rootNode.children) {
+ this.updateNode(child, delta);
+ }
+ }
+
+ private updateAncestors(element: SourceElement, rootNode: SourceDocument, delta: PositionDelta): void {
+ const ancestors: SourceElement[] = [];
+ let current = element.parent as SourceElement | SourceDocument | null;
+
+ while (current && current !== rootNode) {
+ if (isTag(current)) {
+ ancestors.push(current);
+ }
+ current = current.parent as SourceElement | SourceDocument | null;
+ }
+
+ for (const ancestor of ancestors) {
+ if (ancestor.endIndex >= delta.mutationStart) {
+ ancestor.endIndex = applyDeltaToPosition(ancestor.endIndex, delta);
+ }
+
+ if (ancestor.source?.closeTag && ancestor.source.closeTag.startIndex >= delta.mutationStart) {
+ ancestor.source.closeTag.startIndex = applyDeltaToPosition(ancestor.source.closeTag.startIndex, delta);
+ ancestor.source.closeTag.endIndex = applyDeltaToPosition(ancestor.source.closeTag.endIndex, delta);
+ }
+ }
+ }
+
+ private updateNode(node: SourceChildNode, delta: PositionDelta): void {
+ if (isTag(node)) {
+ this.updateElementNode(node, delta);
+ } else if (isText(node)) {
+ this.updateTextNode(node, delta);
+ } else {
+ this.updateBasicNode(node, delta);
+ }
+ }
+
+ private updateElementNode(element: SourceElement, delta: PositionDelta): void {
+ if (element.endIndex < delta.mutationStart) {
+ return;
+ }
+
+ element.startIndex = applyDeltaToPosition(element.startIndex, delta);
+ element.endIndex = applyDeltaToPosition(element.endIndex, delta);
+
+ const openTagEnd = element.source?.openTag?.endIndex ?? element.startIndex;
+ const tagsAffected = openTagEnd >= delta.mutationStart;
+
+ if (tagsAffected) {
+ if (element.source?.openTag) {
+ element.source.openTag.startIndex = applyDeltaToPosition(element.source.openTag.startIndex, delta);
+ element.source.openTag.endIndex = applyDeltaToPosition(element.source.openTag.endIndex, delta);
+ }
+
+ if (element.source?.attributes) {
+ for (const attribute of element.source.attributes) {
+ this.updateAttributePositions(attribute, delta);
+ }
+ }
+ }
+
+ if (element.source?.closeTag) {
+ element.source.closeTag.startIndex = applyDeltaToPosition(element.source.closeTag.startIndex, delta);
+ element.source.closeTag.endIndex = applyDeltaToPosition(element.source.closeTag.endIndex, delta);
+ }
+
+ if (element.children) {
+ for (const child of element.children) {
+ this.updateNode(child, delta);
+ }
+ }
+ }
+
+ private updateTextNode(text: SourceText, delta: PositionDelta): void {
+ if (text.endIndex < delta.mutationStart) {
+ return;
+ }
+
+ text.startIndex = applyDeltaToPosition(text.startIndex, delta);
+ text.endIndex = applyDeltaToPosition(text.endIndex, delta);
+ }
+
+ private updateBasicNode(node: SourceChildNode, delta: PositionDelta): void {
+ if (!hasPositions(node)) {
+ return;
+ }
+
+ if (node.endIndex < delta.mutationStart) {
+ return;
+ }
+
+ node.startIndex = applyDeltaToPosition(node.startIndex, delta);
+ node.endIndex = applyDeltaToPosition(node.endIndex, delta);
+ }
+
+ private updateAttributePositions(
+ attribute: SourceElement['source']['attributes'][number],
+ delta: PositionDelta
+ ): void {
+ if (attribute.name) {
+ attribute.name.startIndex = applyDeltaToPosition(attribute.name.startIndex, delta);
+ attribute.name.endIndex = applyDeltaToPosition(attribute.name.endIndex, delta);
+ }
+
+ if (attribute.value) {
+ attribute.value.startIndex = applyDeltaToPosition(attribute.value.startIndex, delta);
+ attribute.value.endIndex = applyDeltaToPosition(attribute.value.endIndex, delta);
+ }
+
+ if (attribute.source) {
+ attribute.source.startIndex = applyDeltaToPosition(attribute.source.startIndex, delta);
+ attribute.source.endIndex = applyDeltaToPosition(attribute.source.endIndex, delta);
+ }
+ }
+}
diff --git a/packages/html-mod/src/experimental/auto-flush-edge-cases.test.ts b/packages/html-mod/src/experimental/auto-flush-edge-cases.test.ts
new file mode 100644
index 0000000..abcbc1d
--- /dev/null
+++ b/packages/html-mod/src/experimental/auto-flush-edge-cases.test.ts
@@ -0,0 +1,2157 @@
+/* eslint-disable unicorn/prefer-dom-node-dataset */
+import { describe, expect, test } from 'vitest';
+
+import { HtmlMod, HtmlModElement, HtmlModText } from './index';
+
+describe('Auto-Flush Edge Cases - Aggressive Testing', () => {
+ describe('Chained Modifications with Queries', () => {
+ test('should handle query -> modify -> query -> modify chains', () => {
+ const html = new HtmlMod('first
');
+
+ const div = html.querySelector('div')!;
+ expect(div.innerHTML).toBe('first');
+
+ div.append('second');
+ expect(html.querySelectorAll('span').length).toBe(2);
+
+ const spans = html.querySelectorAll('span');
+ spans[0].innerHTML = 'modified-first';
+ expect(html.querySelector('span')!.innerHTML).toBe('modified-first');
+
+ spans[1].innerHTML = 'modified-second';
+ expect(html.querySelectorAll('span')[1].innerHTML).toBe('modified-second');
+
+ expect(html.toString()).toBe('modified-firstmodified-second
');
+ });
+
+ test('should handle deep modification chains', () => {
+ const html = new HtmlMod('text
iteration-9
firstsecondthird
');
+ });
+ });
+
+ describe('Parent-Child Modification Ordering', () => {
+ test('should handle parent modification followed by child query', () => {
+ const html = new HtmlMod('content
content
modified
'); + }); + + test('should handle sibling modifications in sequence', () => { + const html = new HtmlMod('123
');
+
+ const elements = html.querySelectorAll('a, b, c');
+ elements[0].innerHTML = 'first';
+ elements[1].innerHTML = 'second';
+ elements[2].innerHTML = 'third';
+
+ expect(html.querySelector('a')!.innerHTML).toBe('first');
+ expect(html.querySelector('b')!.innerHTML).toBe('second');
+ expect(html.querySelector('c')!.innerHTML).toBe('third');
+ });
+
+ test('should handle nested parent modifications', () => {
+ const html = new HtmlMod('deep
content
');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'new content that is much longer';
+ div.setAttribute('class', 'new');
+ div.setAttribute('data-test', 'value');
+
+ expect(html.toString()).toBe('new content that is much longer
');
+ });
+
+ test('should handle content modifications after attribute changes', () => {
+ const html = new HtmlMod('content
');
+
+ const div = html.querySelector('div')!;
+ div.setAttribute('class', 'new');
+ div.setAttribute('data-test', 'value');
+ div.innerHTML = 'new content';
+
+ expect(html.toString()).toBe('new content
');
+ });
+
+ test('should handle interleaved attribute and content changes', () => {
+ const html = new HtmlMod('content
');
+
+ const div = html.querySelector('div')!;
+ div.setAttribute('a', '1');
+ div.innerHTML = 'modified';
+ div.setAttribute('b', '2');
+ div.append(' more');
+ div.setAttribute('c', '3');
+
+ expect(div.getAttribute('a')).toBe('1');
+ expect(div.getAttribute('b')).toBe('2');
+ expect(div.getAttribute('c')).toBe('3');
+ expect(div.innerHTML).toBe('modified more');
+ });
+
+ test('should handle attribute removal after content changes', () => {
+ const html = new HtmlMod('content
');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'much longer content that shifts positions significantly';
+ div.removeAttribute('data-a');
+ div.removeAttribute('class');
+
+ expect(div.hasAttribute('class')).toBe(false);
+ expect(div.hasAttribute('data-a')).toBe(false);
+ expect(div.hasAttribute('data-b')).toBe(true);
+ });
+ });
+
+ describe('Self-Closing Tag Conversions', () => {
+ test('should handle self-closing to regular tag with content', () => {
+ const html = new HtmlMod('');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'content';
+
+ expect(html.toString()).toBe('content
');
+ expect(html.querySelector('div')!.innerHTML).toBe('content');
+ });
+
+ test('should handle self-closing to regular tag with nested elements', () => {
+ const html = new HtmlMod('');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'nested';
+
+ expect(html.querySelectorAll('span').length).toBe(1);
+ expect(html.querySelector('span')!.innerHTML).toBe('nested');
+ });
+
+ test('should handle multiple self-closing conversions', () => {
+ const html = new HtmlMod('');
+
+ html.querySelector('div')!.innerHTML = 'div-content';
+ html.querySelector('section')!.innerHTML = 'section-content';
+ html.querySelector('article')!.innerHTML = 'article-content';
+
+ expect(html.toString()).toBe(
+ 'div-content
123
');
+
+ const spans = html.querySelectorAll('span');
+ expect(spans.length).toBe(3);
+
+ spans[1].remove();
+
+ const remainingSpans = html.querySelectorAll('span');
+ expect(remainingSpans.length).toBe(2);
+ expect(remainingSpans[0].innerHTML).toBe('1');
+ expect(remainingSpans[1].innerHTML).toBe('3');
+ });
+
+ test('should handle modifications after removing siblings', () => {
+ const html = new HtmlMod('');
+
+ html.querySelector('b')!.remove();
+ html.querySelector('c')!.remove();
+
+ const a = html.querySelector('a')!;
+ const d = html.querySelector('d')!;
+
+ a.innerHTML = 'first';
+ d.innerHTML = 'last';
+
+ expect(html.toString()).toBe('firstlast
');
+ });
+
+ test('should handle parent modification after child removal', () => {
+ const html = new HtmlMod('remove-me
');
+
+ html.querySelector('span')!.remove();
+
+ const div = html.querySelector('div')!;
+ div.prepend('keep-me
title
'); + + expect(html.querySelectorAll('span').length).toBe(0); + expect(html.querySelectorAll('h1').length).toBe(1); + expect(html.querySelectorAll('p').length).toBe(1); + }); + }); + + describe('Text Node Modifications in Complex Structures', () => { + test('should handle multiple text node modifications in nested structure', () => { + const html = new HtmlMod('text1
simple
');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = '<html>
'; + + const p = html.querySelector('p')!; + expect(p.textContent).toBe(''); + + p.innerHTML = '"quotes"'; + expect(p.textContent).toBe('"quotes"'); + }); + }); + + describe('Mixed Operation Types in Sequence', () => { + test('should handle overwrite -> append -> prepend -> remove sequence', () => { + const html = new HtmlMod('123
');
+
+ // Overwrite
+ html.querySelector('b')!.innerHTML = 'modified';
+ expect(html.querySelector('b')!.innerHTML).toBe('modified');
+
+ // Append
+ html.querySelector('div')!.append('title
'); + expect(html.querySelector('h1')!.innerHTML).toBe('title'); + + // Remove + html.querySelector('c')!.remove(); + expect(html.querySelectorAll('c').length).toBe(0); + + expect(html.querySelectorAll('a, b, d').length).toBe(3); + }); + + test('should handle replace -> setAttribute -> append -> remove sequence', () => { + const html = new HtmlMod('old
');
+
+ const span = html.querySelector('span')!;
+ span.replaceWith('new
'); + + const p = html.querySelector('p')!; + p.setAttribute('class', 'test'); + + html.querySelector('div')!.append(''); + + expect(html.querySelectorAll('span').length).toBe(0); + expect(html.querySelector('p')!.getAttribute('class')).toBe('test'); + expect(html.querySelector('footer')!.innerHTML).toBe('end'); + }); + }); + + describe('Boundary Conditions', () => { + test('should handle empty string modifications', () => { + const html = new HtmlMod('content
');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = '';
+ expect(div.innerHTML).toBe('');
+
+ div.innerHTML = 'new';
+ expect(div.innerHTML).toBe('new');
+ });
+
+ test('should handle very long string modifications', () => {
+ const longContent = 'x'.repeat(10_000);
+ const html = new HtmlMod('short
');
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = longContent;
+ expect(div.innerHTML).toBe(longContent);
+
+ div.innerHTML = 'short';
+ expect(div.innerHTML).toBe('short');
+ });
+
+ test('should handle modifications at document boundaries', () => {
+ const html = new HtmlMod('content
');
+
+ html.trim();
+ const div = html.querySelector('div')!;
+ expect(div.innerHTML).toBe('content');
+
+ div.prepend('prefix');
+ expect(div.innerHTML).toBe('prefixcontent');
+ });
+
+ test('should handle empty document modifications', () => {
+ const html = new HtmlMod('');
+ expect(html.toString()).toBe('');
+
+ // Can't query empty document, but toString should work
+ expect(html.isEmpty()).toBe(true);
+ });
+ });
+
+ describe('Complex Selector Queries After Modifications', () => {
+ test('should handle complex selectors after structure changes', () => {
+ const html = new HtmlMod('content
- 1
- 2
- 3
content
');
+
+ const div1 = html.querySelector('div')!;
+ const range1 = div1.sourceRange;
+ expect(range1.startLineNumber).toBe(1);
+ expect(range1.startColumn).toBe(1);
+
+ div1.prepend('prefix');
+
+ const div2 = html.querySelector('div')!;
+ const range2 = div2.sourceRange;
+ expect(range2.startLineNumber).toBe(1);
+ // Column should be same since we're querying the same element
+ expect(range2.startColumn).toBe(1);
+ });
+
+ test('should handle source ranges in multiline documents', () => {
+ const html = new HtmlMod('\n
');
+
+ const p = html.querySelector('p')!;
+ p.innerHTML = 'modified';
+
+ const range = html.querySelector('p')!.sourceRange;
+ expect(range.startLineNumber).toBe(2);
+ });
+ });
+
+ describe('Clone Operations', () => {
+ test('should handle cloned element modifications independently', () => {
+ const html = new HtmlMod('line2
\n line3\noriginal
');
+
+ const div = html.querySelector('div')!;
+ const clone = div.clone();
+
+ div.innerHTML = 'modified-original';
+ clone.innerHTML = 'modified-clone';
+
+ expect(html.querySelector('div')!.innerHTML).toBe('modified-original');
+ expect(clone.toString()).toBe('modified-clone
');
+ });
+
+ test('should handle document clones', () => {
+ const html = new HtmlMod('content
');
+ const clone = html.clone();
+
+ html.querySelector('div')!.innerHTML = 'original-modified';
+ clone.querySelector('div')!.innerHTML = 'clone-modified';
+
+ expect(html.toString()).toBe('original-modified
');
+ expect(clone.toString()).toBe('clone-modified
');
+ });
+ });
+
+ describe('Large Document Performance and Correctness', () => {
+ test('should handle large documents with many modifications', () => {
+ const items = Array.from({ length: 100 }, (_, index) => `- ${items}
';
+ for (let index = 0; index < 10; index++) {
+ htmlString += ``;
+ }
+ htmlString += 'deep content';
+ for (let index = 0; index < 10; index++) {
+ htmlString += ' ';
+ }
+ htmlString += '
';
+
+ const html = new HtmlMod(htmlString);
+
+ const sections = html.querySelectorAll('section');
+ expect(sections.length).toBe(10);
+
+ sections[0].setAttribute('modified', 'true');
+ sections[9].setAttribute('modified', 'true');
+
+ expect(html.querySelector('[data-level="0"]')!.getAttribute('modified')).toBe('true');
+ expect(html.querySelector('[data-level="9"]')!.getAttribute('modified')).toBe('true');
+ });
+ });
+
+ describe('Before/After Operations', () => {
+ test('should handle before operations with multiple siblings', () => {
+ const html = new HtmlMod('2
');
+
+ const b = html.querySelector('b')!;
+ b.before('1');
+
+ expect(html.querySelectorAll('a').length).toBe(1);
+ expect(html.querySelectorAll('b').length).toBe(1);
+
+ const a = html.querySelector('a')!;
+ a.innerHTML = 'first';
+ b.innerHTML = 'second';
+
+ expect(html.toString()).toBe('firstsecond
');
+ });
+
+ test('should handle after operations with multiple siblings', () => {
+ const html = new HtmlMod('');
+
+ const a = html.querySelector('a')!;
+ a.after('2');
+
+ expect(html.querySelectorAll('a').length).toBe(1);
+ expect(html.querySelectorAll('b').length).toBe(1);
+
+ const b = html.querySelector('b')!;
+ a.innerHTML = 'first';
+ b.innerHTML = 'second';
+
+ expect(html.toString()).toBe('firstsecond
');
+ });
+
+ test('should handle mixed before/after operations', () => {
+ const html = new HtmlMod('0
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 1; index <= 100; index++) {
+ div.innerHTML = `${index}`;
+ expect(html.querySelector('div')!.innerHTML).toBe(`${index}`);
+ }
+
+ expect(html.toString()).toBe('100
');
+ });
+
+ test('should handle alternating operations', () => {
+ const html = new HtmlMod('');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 50; index++) {
+ div.innerHTML = `content-${index}`;
+ expect(html.querySelector('span')!.innerHTML).toBe(`content-${index}`);
+
+ div.setAttribute(`attr-${index}`, `value-${index}`);
+ expect(div.getAttribute(`attr-${index}`)).toBe(`value-${index}`);
+ }
+ });
+
+ test('should handle complex nested modifications', () => {
+ const html = new HtmlMod('text
| cell |
- 1
- 1
- second
- third
unclosed
');
+
+ const div = html.querySelector('div')!;
+ div.setAttribute('class', 'container');
+
+ const p = html.querySelector('p')!;
+ p.innerHTML = 'fixed';
+
+ expect(div.getAttribute('class')).toBe('container');
+ expect(p.innerHTML).toBe('fixed');
+ });
+
+ test('should handle modifications with HTML entities', () => {
+ const html = new HtmlMod('nested
<script>alert("test")</script>
');
+
+ const div = html.querySelector('div')!;
+ expect(div.textContent).toBe('');
+
+ div.innerHTML = '& < > "';
+ expect(div.textContent).toBe('& < > "');
+ });
+
+ test('should handle modifications with mixed quotes', () => {
+ const html = new HtmlMod(`content
`);
+
+ const div = html.querySelector('div')!;
+ div.setAttribute('data-mixed', `value with "quotes"`);
+ div.setAttribute('data-single', 'new value');
+
+ expect(div.getAttribute('data-mixed')).toBe(`value with "quotes"`);
+ expect(div.getAttribute('data-single')).toBe('new value');
+ });
+ });
+
+ describe('Trim Operations with Modifications', () => {
+ test('should handle modifications after trim', () => {
+ const html = new HtmlMod(' content
');
+ html.trim();
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'modified';
+
+ expect(html.toString()).toBe('modified
');
+ });
+
+ test('should handle modifications after trimStart', () => {
+ const html = new HtmlMod(' content
');
+ html.trimStart();
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'modified';
+
+ expect(html.toString()).toBe('modified
');
+ });
+
+ test('should handle modifications after trimEnd', () => {
+ const html = new HtmlMod('content
');
+ html.trimEnd();
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'modified';
+
+ expect(html.toString()).toBe('modified
');
+ });
+
+ test('should handle multiple trim and modification operations', () => {
+ const html = new HtmlMod(' content
');
+ html.trim();
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = 'first';
+
+ div.innerHTML = 'second';
+ div.innerHTML = 'third';
+
+ expect(html.toString()).toBe('third
');
+ });
+ });
+
+ describe('Additional Edge Cases - Comprehensive Coverage', () => {
+ test('should handle multiple consecutive setAttribute calls', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('a', '1');
+ div.setAttribute('b', '2');
+ div.setAttribute('c', '3');
+ div.setAttribute('d', '4');
+ div.setAttribute('e', '5');
+
+ expect(html.toString()).toBe('content
');
+ expect(div.getAttribute('a')).toBe('1');
+ expect(div.getAttribute('b')).toBe('2');
+ expect(div.getAttribute('c')).toBe('3');
+ expect(div.getAttribute('d')).toBe('4');
+ expect(div.getAttribute('e')).toBe('5');
+ });
+
+ test('should handle removing then re-adding attributes', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.removeAttribute('b');
+ expect(html.toString()).toBe('content
');
+
+ div.setAttribute('b', 'new-value');
+ expect(html.toString()).toBe('content
');
+ expect(div.getAttribute('b')).toBe('new-value');
+
+ div.removeAttribute('a');
+ div.setAttribute('a', 'another-value');
+ expect(html.toString()).toBe('content
');
+ });
+
+ test('should handle multiple text nodes in same parent', () => {
+ const html = new HtmlMod('text1middletext2
');
+ const div = html.querySelector('div')!;
+
+ // Get all text nodes
+ const children = div.children;
+ const textNodes = children.filter(child => child instanceof HtmlModText) as HtmlModText[];
+
+ expect(textNodes.length).toBe(2);
+
+ // Modify first text node
+ textNodes[0].textContent = 'modified1';
+ expect(html.toString()).toBe('modified1middletext2
');
+
+ // Modify second text node
+ textNodes[1].textContent = 'modified2';
+ expect(html.toString()).toBe('modified1middlemodified2
');
+
+ // Modify first again
+ textNodes[0].textContent = 'final1';
+ expect(html.toString()).toBe('final1middlemodified2
');
+ });
+
+ test('should handle self-closing tag conversion followed by more attributes', () => {
+ const html = new HtmlMod('text1
text2
text3
final1
modified2
modified3
content
');
+ const div = html.querySelector('div')!;
+
+ // Create a large attribute value (10KB)
+ const largeValue = 'x'.repeat(10_000);
+ div.setAttribute('data', largeValue);
+
+ expect(html.toString()).toContain(`data="${largeValue}"`);
+ expect(div.getAttribute('data')).toBe(largeValue);
+
+ // Modify content after large attribute
+ div.innerHTML = 'modified';
+ expect(html.querySelector('div')!.innerHTML).toBe('modified');
+
+ // Add another attribute
+ div.setAttribute('other', 'value');
+ expect(div.getAttribute('other')).toBe('value');
+ });
+
+ test('should handle unicode and emoji in content', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ // Set emoji content
+ div.innerHTML = '🎉🔥💯';
+ expect(html.toString()).toBe('🎉🔥💯
');
+
+ // Add attribute
+ div.setAttribute('data', '🌟');
+ expect(html.toString()).toBe('🎉🔥💯
');
+
+ // Modify with mixed unicode
+ div.innerHTML = 'Hello 世界 🌍';
+ expect(html.toString()).toBe('Hello 世界 🌍
');
+ expect(div.innerHTML).toBe('Hello 世界 🌍');
+ });
+
+ test('should handle removeAttribute on non-existent attribute', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ // Remove non-existent attribute (should not error)
+ div.removeAttribute('nonexistent');
+ expect(html.toString()).toBe('content
');
+
+ // Add and then remove
+ div.setAttribute('b', '2');
+ expect(html.toString()).toBe('content
');
+
+ div.removeAttribute('nonexistent');
+ expect(html.toString()).toBe('content
');
+
+ // Normal remove
+ div.removeAttribute('a');
+ expect(html.toString()).toBe('content
');
+ });
+
+ test('should handle nested setAttribute (parent then child then parent)', () => {
+ const html = new HtmlMod('content
content
content
content
content
content
old
replacement
');
+
+ // Modify the replacement
+ const span = html.querySelector('#new')!;
+ span.innerHTML = 'modified';
+ expect(html.toString()).toBe('modified
');
+
+ // Add attribute to replacement
+ span.setAttribute('data', 'value');
+ expect(html.toString()).toBe('modified
');
+
+ // Replace again
+ span.replaceWith('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-id', '123');
+ div.setAttribute('data-name', 'test');
+ div.setAttribute('data-complex-name', 'value');
+
+ expect(html.toString()).toBe('content
');
+ expect(div.getAttribute('data-id')).toBe('123');
+ expect(div.getAttribute('data-name')).toBe('test');
+ });
+
+ test('should handle aria-* attributes', () => {
+ const html = new HtmlMod('');
+ const button = html.querySelector('button')!;
+
+ button.setAttribute('aria-label', 'Submit button');
+ button.setAttribute('aria-hidden', 'false');
+
+ expect(html.toString()).toBe('');
+ expect(button.getAttribute('aria-label')).toBe('Submit button');
+ });
+
+ test('should handle boolean-like attributes', () => {
+ const html = new HtmlMod('');
+ const input = html.querySelector('input')!;
+
+ input.setAttribute('checked', '');
+ input.setAttribute('disabled', '');
+ expect(input.getAttribute('checked')).toBe('');
+ expect(input.getAttribute('disabled')).toBe('');
+
+ input.removeAttribute('checked');
+ expect(input.getAttribute('checked')).toBeNull();
+ expect(input.getAttribute('disabled')).toBe('');
+ });
+
+ test('should handle attributes containing quotes in values', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-json', '{"key":"value"}');
+ // Library switches to single quotes when value contains double quotes
+ expect(html.toString()).toBe('content
');
+
+ div.setAttribute('title', "It's a test");
+ expect(div.getAttribute('title')).toBe("It's a test");
+ });
+
+ test('should handle switching between quote types', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('class', 'modified');
+ expect(div.getAttribute('class')).toBe('modified');
+
+ div.setAttribute('id', 'no-quotes');
+ expect(div.getAttribute('id')).toBe('no-quotes');
+ });
+
+ test('should handle attributes with special characters', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-url', 'https://example.com?foo=bar&baz=qux');
+ expect(div.getAttribute('data-url')).toBe('https://example.com?foo=bar&baz=qux');
+
+ div.setAttribute('data-special', '<>&"\'');
+ expect(div.getAttribute('data-special')).toBe('<>&"\'');
+ });
+ });
+
+ describe('Special Node Types', () => {
+ test('should handle comment nodes without modification', () => {
+ const html = new HtmlMod('text
text
modified
content
');
+ const div = html.querySelector('div')!;
+
+ div.innerHTML = 'modified';
+ expect(html.toString()).toBe('modified
');
+ });
+
+ test('should handle script tags with inline JavaScript', () => {
+ const html = new HtmlMod('');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('id', 'container');
+ expect(html.toString()).toBe('');
+
+ div.prepend('Before script
'); + expect(html.querySelector('p')!.innerHTML).toBe('Before script'); + }); + + test('should handle style tags with inline CSS', () => { + const html = new HtmlMod('text
modified
content
');
+ const div = html.querySelector('div')!;
+
+ div.innerHTML = 'modified';
+ expect(html.toString()).toContain('modified
');
+ });
+ });
+
+ describe('Complex Tree Manipulations', () => {
+ test('should handle moving elements between parents', () => {
+ const html = new HtmlMod('moveme
contentA
contentB
');
+ const a = html.querySelector('#a')!;
+ const b = html.querySelector('#b')!;
+
+ const temporaryA = a.innerHTML;
+ a.innerHTML = b.innerHTML;
+ b.innerHTML = temporaryA;
+
+ expect(html.querySelector('#a')!.innerHTML).toBe('contentB');
+ expect(html.querySelector('#b')!.innerHTML).toBe('contentA');
+ });
+
+ test('should handle deeply nested modifications (20 levels)', () => {
+ let nested = '';
+ for (let index = 0; index < 20; index++) {
+ nested += `
';
+
+ const html = new HtmlMod(nested);
+ const deepest = html.querySelector('.level-19')!;
+ deepest.innerHTML = 'modified deep content';
+
+ expect(html.toString()).toContain('modified deep content');
+ expect(html.querySelector('.level-0')).not.toBeNull();
+ });
+
+ test('should handle flattening nested structure', () => {
+ const html = new HtmlMod('`;
+ }
+ nested += 'deep content';
+ for (let index = 0; index < 20; index++) {
+ nested += '
';
+ }
+ nested += 'nested
nested
A
B
');
+ const a = html.querySelector('#a')!;
+ const b = html.querySelector('#b')!;
+
+ const spanA = a.querySelector('span')!.outerHTML;
+ const spanB = b.querySelector('span')!.outerHTML;
+
+ a.innerHTML = spanB;
+ b.innerHTML = spanA;
+
+ expect(html.querySelector('#a span')!.innerHTML).toBe('B');
+ expect(html.querySelector('#b span')!.innerHTML).toBe('A');
+ });
+
+ test('should handle element duplication', () => {
+ const html = new HtmlMod('template
text with spaces
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('id', 'test');
+ expect(html.toString()).toBe('text with spaces
');
+ });
+
+ test('should handle newlines in content', () => {
+ const html = new HtmlMod('line1\nline2\nline3
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('class', 'multiline');
+ expect(html.toString()).toBe('line1\nline2\nline3
');
+ });
+
+ test('should handle tabs in content', () => {
+ const html = new HtmlMod('text\twith\ttabs
');
+ const div = html.querySelector('div')!;
+
+ div.innerHTML = 'new\tcontent\twith\ttabs';
+ expect(html.toString()).toBe('new\tcontent\twith\ttabs
');
+ });
+
+ test('should handle whitespace-only text nodes', () => {
+ const html = new HtmlMod(' \n\t text \n\t
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('id', 'mixed');
+ expect(html.toString()).toContain(' \n\t text \n\t ');
+ });
+ });
+
+ describe('Stale References', () => {
+ test('should handle element reference after parent removal', () => {
+ const html = new HtmlMod('text
text1
text2
content
');
+ const ref1 = html.querySelector('#test')!;
+ const ref2 = html.querySelector('#test')!;
+
+ ref1.innerHTML = 'modified1';
+ expect(ref2.innerHTML).toBe('modified1');
+
+ ref2.setAttribute('data-ref', '2');
+ expect(ref1.getAttribute('data-ref')).toBe('2');
+ });
+
+ test('should handle element after sibling removal', () => {
+ const html = new HtmlMod('first
second
still works
text
Hello
World
Hello
World
- ${rendered}
Title
'; + + container.append(''); + const main = html.querySelector('main')!; + main.innerHTML = 'Content
'; + + container.append(''); + const footer = html.querySelector('footer')!; + footer.innerHTML = 'Footer
'; + + expect(html.querySelectorAll('p').length).toBe(2); + expect(html.toString()).toContain('Title
Visible
' : 'Hidden
'; + expect(html.toString()).toContain('Visible'); + + const showContent2 = false; + root.innerHTML = showContent2 ? 'Visible
' : 'Hidden
'; + expect(html.toString()).toContain('Hidden'); + }); + }); + + describe('Performance Edge Cases', () => { + test('should handle 1000 elements with modifications', () => { + const items = Array.from({ length: 1000 }, (_, index) => `${index}
`).join('');
+ const html = new HtmlMod(`${items}
`);
+
+ const container = html.querySelector('#container')!;
+ container.setAttribute('data-count', '1000');
+
+ expect(html.querySelectorAll('div[class^="item-"]').length).toBe(1000);
+ expect(container.getAttribute('data-count')).toBe('1000');
+ });
+
+ test('should handle 50 levels of nesting', () => {
+ let nested = '';
+ for (let index = 0; index < 50; index++) {
+ nested += ``;
+ }
+ nested += 'deep content';
+ for (let index = 0; index < 50; index++) {
+ nested += '
';
+ }
+
+ const html = new HtmlMod(nested);
+ const deepest = html.querySelector('.level-49')!;
+ deepest.innerHTML = 'modified';
+
+ expect(html.toString()).toContain('modified');
+ });
+
+ test('should handle attribute with 50KB value', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ const largeValue = 'x'.repeat(50_000);
+ div.setAttribute('data-large', largeValue);
+
+ expect(div.getAttribute('data-large')).toBe(largeValue);
+ expect(html.toString().length).toBeGreaterThan(50_000);
+ });
+
+ test('should handle 1000 rapid sequential modifications', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 1000; index++) {
+ div.setAttribute(`data-${index}`, `value-${index}`);
+ }
+
+ expect(div.getAttribute('data-0')).toBe('value-0');
+ expect(div.getAttribute('data-999')).toBe('value-999');
+ });
+
+ test('should handle alternating modifications 500 times', () => {
+ const html = new HtmlMod('initial
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 500; index++) {
+ div.innerHTML = `content-${index}`;
+ div.setAttribute('data-iteration', `${index}`);
+ }
+
+ expect(div.innerHTML).toBe('content-499');
+ expect(div.getAttribute('data-iteration')).toBe('499');
+ });
+ });
+
+ describe('Error Recovery and Edge Cases', () => {
+ test('should handle innerHTML with unclosed tags', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.innerHTML = 'unclosed'; + // Parser should handle it gracefully + expect(html.toString()).toContain('
unclosed'); + }); + + test('should handle empty string operations', () => { + const html = new HtmlMod('
content
');
+ const div = html.querySelector('div')!;
+
+ div.innerHTML = '';
+ expect(html.toString()).toBe('');
+
+ div.setAttribute('empty', '');
+ expect(html.toString()).toBe('');
+ });
+
+ test('should handle repeated remove operations', () => {
+ const html = new HtmlMod('text
text
short
');
+ const div = html.querySelector('div')!;
+
+ const longText = 'a'.repeat(100_000);
+ div.innerHTML = longText;
+
+ expect(div.innerHTML.length).toBe(100_000);
+ });
+
+ test('should handle consecutive identical modifications', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.innerHTML = 'same';
+ div.innerHTML = 'same';
+ div.innerHTML = 'same';
+
+ expect(html.toString()).toBe('same
');
+ });
+
+ test('should handle attribute name with unusual characters', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('data-my:attr', 'value');
+ expect(div.getAttribute('data-my:attr')).toBe('value');
+ });
+ });
+
+ describe('Clone Behavior with Modifications', () => {
+ test('should clone element and verify original and clone are independent', () => {
+ const html = new HtmlMod('content
');
+ const original = html.querySelector('#original')!;
+ const clone = original.clone();
+
+ // Modify original
+ original.setAttribute('data-modified', 'true');
+ original.innerHTML = 'modified content';
+
+ // Clone should be unchanged
+ expect(clone.getAttribute('data-modified')).toBeNull();
+ expect(clone.innerHTML).toBe('content');
+
+ // Original should be modified
+ expect(original.getAttribute('data-modified')).toBe('true');
+ expect(original.innerHTML).toBe('modified content');
+ });
+
+ test('should clone element, modify clone, verify original unchanged', () => {
+ const html = new HtmlMod('content
');
+ const original = html.querySelector('#original')!;
+ const clone = original.clone();
+
+ // Modify clone
+ clone.setAttribute('id', 'cloned');
+ clone.innerHTML = 'cloned content';
+
+ // Original in document should be unchanged
+ expect(html.querySelector('#original')!.innerHTML).toBe('content');
+ expect(html.querySelector('#original')!.getAttribute('id')).toBe('original');
+ });
+
+ test('should clone after removal', () => {
+ const html = new HtmlMod('content
');
+ const element = html.querySelector('#test')!;
+
+ element.remove();
+ const clone = element.clone();
+
+ // Clone should have the cached content
+ expect(clone.innerHTML).toBe('content');
+ expect(clone.getAttribute('id')).toBe('test');
+ });
+
+ test('should clone nested structure', () => {
+ const html = new HtmlMod('text
text
'); + }); + + test('should handle multiple clones of same element', () => { + const html = new HtmlMod('original
');
+ const original = html.querySelector('div')!;
+
+ const clone1 = original.clone();
+ const clone2 = original.clone();
+ const clone3 = original.clone();
+
+ // Modify original
+ original.innerHTML = 'modified';
+
+ // All clones should be independent
+ expect(clone1.innerHTML).toBe('original');
+ expect(clone2.innerHTML).toBe('original');
+ expect(clone3.innerHTML).toBe('original');
+ });
+
+ test('should clone document and verify independence', () => {
+ const html = new HtmlMod('content
');
+ const clone = html.clone();
+
+ // Modify original
+ const div = html.querySelector('#test')!;
+ div.innerHTML = 'modified';
+
+ // Clone should be unchanged
+ expect(clone.toString()).toBe('content
');
+ });
+ });
+
+ describe('replaceWith Edge Cases', () => {
+ test('should replace element and verify old reference behaves as removed', () => {
+ const html = new HtmlMod('old
text
text
old
simple
Title
Content
text
text content
');
+ const div = html.querySelector('div')!;
+ const textNode = div.children[0];
+
+ if (textNode instanceof HtmlModText) {
+ textNode.textContent = 'modified text';
+ expect(html.toString()).toBe('modified text
');
+ }
+ });
+
+ test('should handle multiple text nodes', () => {
+ const html = new HtmlMod('text1middletext2
');
+ const div = html.querySelector('div')!;
+
+ // Should have 3 children: text, span, text
+ expect(div.children.length).toBe(3);
+ });
+
+ test('should modify text node innerHTML', () => {
+ const html = new HtmlMod('plain text
');
+ const div = html.querySelector('div')!;
+ const textNode = div.children[0];
+
+ if (textNode instanceof HtmlModText) {
+ textNode.innerHTML = 'bold';
+ // After modifying text node innerHTML, check the div contains the new content
+ expect(html.toString()).toContain('bold');
+ }
+ });
+
+ test('should handle text node with special characters', () => {
+ const html = new HtmlMod('<test>
');
+ const div = html.querySelector('div')!;
+
+ // textContent decodes HTML entities
+ expect(div.textContent).toBe('');
+ const div = html.querySelector('div')!;
+
+ // Should handle gracefully
+ expect(div.children.length).toBeGreaterThanOrEqual(1);
+ });
+
+ test('should modify text content after element modifications', () => {
+ const html = new HtmlMod('
text
');
+ const div = html.querySelector('div')!;
+
+ div.setAttribute('id', 'test');
+ div.textContent = 'new text';
+
+ expect(html.toString()).toBe('new text
');
+ });
+
+ test('should handle text node toString', () => {
+ const html = new HtmlMod('text content
');
+ const div = html.querySelector('div')!;
+ const textNode = div.children[0];
+
+ if (textNode instanceof HtmlModText) {
+ expect(textNode.toString()).toBe('text content');
+ }
+ });
+ });
+
+ describe('Parent/Child Reference Integrity', () => {
+ test('should get child reference, remove parent, verify child behaves as removed', () => {
+ const html = new HtmlMod('text
text
text
text
text
1
2
3
1
2
3
original
1
2
3
'; + + const childrenAfter = div.children; + expect(childrenAfter.length).toBe(3); + }); + + test('should handle children array with mixed element and text nodes', () => { + const html = new HtmlMod('text1elementtext2
');
+ const div = html.querySelector('div')!;
+ const children = div.children;
+
+ // Should include both text and element nodes
+ expect(children.length).toBe(3);
+ });
+
+ test('should modify children after parent attribute change', () => {
+ const html = new HtmlMod('content
modified
1
2
3
Title
Content
'; + + expect(html.querySelector('section article h1')!.innerHTML).toBe('Title'); + expect(html.querySelector('section article p')!.innerHTML).toBe('Content'); + }); + + test('should query after removing and adding elements', () => { + const html = new HtmlMod('1
2
1
2
'; + + expect(html.querySelectorAll('.new').length).toBe(2); + expect(html.querySelectorAll('.old').length).toBe(0); + }); + + test('should query after attribute changes that affect selectors', () => { + const html = new HtmlMod('1
2
3
1
text
old
1
'); + expect(html.querySelectorAll('p').length).toBe(1); + + div.append('2
'); + expect(html.querySelectorAll('p').length).toBe(2); + + div.append('3
'); + expect(html.querySelectorAll('p').length).toBe(3); + }); + }); + + describe('Cascading Modifications', () => { + test('should modify element A then element B before A, verify A positions correct', () => { + const html = new HtmlMod('1
2
3
A
B
C
A-modified
C-modified
deep
1
2
1
2
3
4
5
content
content
content
content
content
content
content
');
+
+ html.trimStart();
+ expect(html.toString()).toBe(' content
');
+
+ html.trimEnd();
+ expect(html.toString()).toBe(' content
');
+ });
+
+ test('should trim then modify elements', () => {
+ const html = new HtmlMod(' text
modified
text
text
\n
\n\n');
+ html.trimLines();
+
+ expect(html.toString()).toBe('content
\n\n
');
+ });
+
+ test('should handle trim on empty document', () => {
+ const html = new HtmlMod(' ');
+ html.trim();
+
+ expect(html.toString()).toBe('');
+ expect(html.isEmpty()).toBe(true);
+ });
+
+ test('should handle cascading trim and innerHTML operations', () => {
+ const html = new HtmlMod(' ');
+ html.trim();
+
+ const div = html.querySelector('div')!;
+ div.innerHTML = ' content
\ntext
'; + + expect(html.toString()).toBe('text
text
text
';
+
+ const stable = new StableHtmlMod(initialHtml);
+ const experimental = new ExperimentalHtmlMod(initialHtml);
+
+ for (let index = 0; index < 100; index++) {
+ const operation = rng.nextInt(0, 7);
+
+ try {
+ switch (operation) {
+ case 0: {
+ // Change innerHTML
+ const selector = rng.pick(['div', 'span', '#root']);
+ const stableElement = stable.querySelector(selector);
+ const expElement = experimental.querySelector(selector);
+
+ if (stableElement && expElement) {
+ const newContent = `content-${index}`;
+ stableElement.innerHTML = newContent;
+ expElement.innerHTML = newContent;
+ }
+ break;
+ }
+
+ case 1: {
+ // setAttribute
+ const selector = rng.pick(['div', 'span', '#root']);
+ const stableElement = stable.querySelector(selector);
+ const expElement = experimental.querySelector(selector);
+
+ if (stableElement && expElement) {
+ const attribute = rng.pick(['id', 'class', 'data-test']);
+ const value = `value-${index}`;
+ stableElement.setAttribute(attribute, value);
+ expElement.setAttribute(attribute, value);
+ }
+ break;
+ }
+
+ case 2: {
+ // before()
+ const selector = rng.pick(['div', 'span']);
+ const stableElement = stable.querySelector(selector);
+ const expElement = experimental.querySelector(selector);
+
+ if (stableElement && expElement) {
+ const newHtml = `before-${index}
`; + stableElement.before(newHtml); + expElement.before(newHtml); + } + break; + } + + case 3: { + // after() + const selector = rng.pick(['div', 'span']); + const stableElement = stable.querySelector(selector); + const expElement = experimental.querySelector(selector); + + if (stableElement && expElement) { + const newHtml = `after-${index}
`; + stableElement.after(newHtml); + expElement.after(newHtml); + } + break; + } + + case 4: { + // removeAttribute + const selector = rng.pick(['div', 'span', '#root']); + const stableElement = stable.querySelector(selector); + const expElement = experimental.querySelector(selector); + + if (stableElement && expElement) { + const attribute = rng.pick(['id', 'class', 'data-test']); + stableElement.removeAttribute(attribute); + expElement.removeAttribute(attribute); + } + break; + } + + case 5: { + // tagName change + const selector = rng.pick(['span', 'p']); + const stableElement = stable.querySelector(selector); + const expElement = experimental.querySelector(selector); + + if (stableElement && expElement) { + const newTag = rng.pick(['div', 'section', 'article']); + stableElement.tagName = newTag; + expElement.tagName = newTag; + } + break; + } + + case 6: { + // trim operations + const op = rng.pick(['trim', 'trimStart', 'trimEnd'] as const); + stable[op](); + experimental[op](); + break; + } + + case 7: { + // Use id/className setters (only in experimental) + const selector = rng.pick(['div', 'span']); + const stableElement = stable.querySelector(selector); + const expElement = experimental.querySelector(selector); + + if (stableElement && expElement) { + if (rng.boolean()) { + const value = `id-${index}`; + stableElement.setAttribute('id', value); + expElement.id = value; + } else { + const value = `class-${index}`; + stableElement.setAttribute('class', value); + expElement.className = value; + } + } + break; + } + } + + stable.flush(); + + const stableOutput = stable.toString(); + const expOutput = experimental.toString(); + + expect(expOutput.length).toBeGreaterThan(0); + expect(stableOutput.length).toBeGreaterThan(0); + + // Verify content matches + const contentMatches = stableOutput.match(/content-\d+|value-\d+|before-\d+|after-\d+/g) || []; + for (const match of contentMatches) { + expect(expOutput).toContain(match); + } + } catch (error) { + console.error(`Failed on seed ${seed}, operation ${index}, type ${operation}`); + throw error; + } + } + + const stableFinal = stable.toString(); + const expFinal = experimental.toString(); + + expect(expFinal.length).toBeGreaterThan(0); + expect(stableFinal.length).toBeGreaterThan(0); + } + }); + + test('500 operations on complex HTML structure', () => { + const rng = new SeededRandom(99_999); + const initialHtml = ` + +
+
+
+
+
+
+
+
+
+ `;
+
+ const stable = new StableHtmlMod(initialHtml);
+ const experimental = new ExperimentalHtmlMod(initialHtml);
+
+ const operations = [
+ 'innerHTML',
+ 'setAttribute',
+ 'removeAttribute',
+ 'before',
+ 'after',
+ 'tagName',
+ 'id',
+ 'className',
+ ];
+
+ for (let index = 0; index < 500; index++) {
+ const operation = rng.pick(operations);
+ const selector = rng.pick(['div', 'p', 'h1', 'section', 'header', 'main', 'footer', '#app', '#content']);
+
+ try {
+ const stableElement = stable.querySelector(selector);
+ const expElement = experimental.querySelector(selector);
+
+ if (!stableElement || !expElement) continue;
+
+ switch (operation) {
+ case 'innerHTML': {
+ stableElement.innerHTML = `content-${index}`;
+ expElement.innerHTML = `content-${index}`;
+ break;
+ }
+
+ case 'setAttribute': {
+ stableElement.setAttribute(`data-${index}`, `val-${index}`);
+ expElement.setAttribute(`data-${index}`, `val-${index}`);
+ break;
+ }
+
+ case 'removeAttribute': {
+ const attributes = ['id', 'class', 'data-test'];
+ const attribute = rng.pick(attributes);
+ stableElement.removeAttribute(attribute);
+ expElement.removeAttribute(attribute);
+ break;
+ }
+
+ case 'before': {
+ stableElement.before(`before-${index}`);
+ expElement.before(`before-${index}`);
+ break;
+ }
+
+ case 'after': {
+ stableElement.after(`after-${index}`);
+ expElement.after(`after-${index}`);
+ break;
+ }
+
+ case 'tagName': {
+ const newTag = rng.pick(['div', 'section', 'article']);
+ stableElement.tagName = newTag;
+ expElement.tagName = newTag;
+ break;
+ }
+
+ case 'id': {
+ stableElement.setAttribute('id', `id-${index}`);
+ expElement.id = `id-${index}`;
+ break;
+ }
+
+ case 'className': {
+ stableElement.setAttribute('class', `class-${index}`);
+ expElement.className = `class-${index}`;
+ break;
+ }
+ }
+
+ stable.flush();
+
+ const stableOutput = stable.toString();
+ const expOutput = experimental.toString();
+
+ expect(expOutput.length).toBeGreaterThan(0);
+ expect(stableOutput.length).toBeGreaterThan(0);
+ } catch (error) {
+ console.error(`Failed on operation ${index}: ${operation} on ${selector}`);
+ throw error;
+ }
+ }
+
+ const stableFinal = stable.toString();
+ const expFinal = experimental.toString();
+
+ expect(expFinal.length).toBeGreaterThan(0);
+ expect(stableFinal.length).toBeGreaterThan(0);
+ });
+
+ test('1000 rapid setAttribute calls - stress test', () => {
+ const rng = new SeededRandom(55_555);
+ const html = 'Title
content
';
+
+ const stable = new StableHtmlMod(html);
+ const experimental = new ExperimentalHtmlMod(html);
+
+ const stableDiv = stable.querySelector('div')!;
+ const expDiv = experimental.querySelector('div')!;
+
+ for (let index = 0; index < 1000; index++) {
+ const attribute = rng.pick(['data-a', 'data-b', 'data-c', 'id', 'class']);
+ const value = `value-${index}`;
+
+ stableDiv.setAttribute(attribute, value);
+ expDiv.setAttribute(attribute, value);
+
+ if (index % 10 === 0) {
+ stable.flush();
+
+ const stableOutput = stable.toString();
+ const expOutput = experimental.toString();
+
+ expect(expOutput).toContain('content');
+ expect(stableOutput).toContain('content');
+ }
+ }
+
+ stable.flush();
+
+ const stableFinal = stable.toString();
+ const expFinal = experimental.toString();
+
+ expect(expFinal).toContain('content');
+ expect(stableFinal).toContain('content');
+ });
+
+ test('Mixed operations with queries - chaos mode', () => {
+ const seeds = [111, 222, 333, 444, 555];
+
+ for (const seed of seeds) {
+ const rng = new SeededRandom(seed);
+ const html = 'text
';
+ for (let index = 0; index < 50; index++) {
+ html += `
';
+
+ const stable = new StableHtmlMod(html);
+ const experimental = new ExperimentalHtmlMod(html);
+
+ // Random modifications on random levels
+ for (let index = 0; index < 100; index++) {
+ const level = rng.nextInt(0, 49);
+ const selector = `#level-${level}`;
+
+ const stableElement = stable.querySelector(selector);
+ const expElement = experimental.querySelector(selector);
+
+ if (stableElement && expElement) {
+ const op = rng.nextInt(0, 2);
+
+ switch (op) {
+ case 0: {
+ stableElement.innerHTML = `modified-${index}`;
+ expElement.innerHTML = `modified-${index}`;
+ break;
+ }
+ case 1: {
+ stableElement.dataset.mod = `${index}`;
+ expElement.dataset.mod = `${index}`;
+ break;
+ }
+ case 2: {
+ stableElement.setAttribute('class', `class-${index}`);
+ expElement.className = `class-${index}`;
+ break;
+ }
+ }
+
+ stable.flush();
+ }
+ }
+
+ const stableFinal = stable.toString();
+ const expFinal = experimental.toString();
+
+ expect(expFinal.length).toBeGreaterThan(0);
+ expect(stableFinal.length).toBeGreaterThan(0);
+ expect(stableFinal).toContain('root');
+ expect(expFinal).toContain('root');
+ });
+
+ test('Property-based: output should always be valid HTML', () => {
+ const seeds = [1, 10, 100, 1000, 10_000];
+
+ for (const seed of seeds) {
+ const rng = new SeededRandom(seed);
+ const html = '`;
+ }
+ html += 'content';
+ for (let index = 0; index < 50; index++) {
+ html += '
';
+ }
+ html += 'test
';
+
+ const stable = new StableHtmlMod(html);
+ const experimental = new ExperimentalHtmlMod(html);
+
+ for (let index = 0; index < 50; index++) {
+ const selector = rng.pick(['div', 'span']);
+ const stableElement = stable.querySelector(selector);
+ const expElement = experimental.querySelector(selector);
+
+ if (stableElement && expElement) {
+ // Random operation
+ const op = rng.nextInt(0, 3);
+ switch (op) {
+ case 0: {
+ stableElement.innerHTML = `content-${index}
`; + expElement.innerHTML = `content-${index}
`; + break; + } + case 1: { + stableElement.dataset.test = `${index}`; + expElement.dataset.test = `${index}`; + break; + } + case 2: { + stableElement.before(`Hello 👋 World 🌍
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 100; index++) {
+ div.setAttribute('data-count', String(index));
+ div.innerHTML = `Hello 👋 World 🌍 ${index}`;
+ }
+
+ expect(div.innerHTML).toContain('👋');
+ expect(div.innerHTML).toContain('🌍');
+ expect(html.querySelector('div')).not.toBeNull();
+ });
+
+ test('should handle emoji in attributes without corruption', () => {
+ const html = new HtmlMod('content
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 100; index++) {
+ div.setAttribute('data-emoji', `Value 🎉 ${index}`);
+ }
+
+ expect(div.getAttribute('data-emoji')).toContain('🎉');
+ expect(div.getAttribute('data-emoji')).toBe('Value 🎉 99');
+ });
+
+ test('should handle surrogate pairs without position corruption', () => {
+ // Surrogate pairs (characters outside BMP)
+ const html = new HtmlMod('𝕳𝖊𝖑𝖑𝖔 𝖂𝖔𝖗𝖑𝖉
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 100; index++) {
+ div.setAttribute('data-index', String(index));
+ }
+
+ expect(html.querySelector('div')).not.toBeNull();
+ expect(div.getAttribute('data-index')).toBe('99');
+ });
+
+ test('should handle combining characters without corruption', () => {
+ // Combining diacritical marks
+ const html = new HtmlMod('e\u0301
'); // é as e + combining acute accent
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 100; index++) {
+ div.setAttribute('data-index', String(index));
+ }
+
+ expect(html.querySelector('div')).not.toBeNull();
+ });
+
+ test('should handle mixed multi-byte characters under heavy load', () => {
+ const html = new HtmlMod('ASCII 中文 العربية עברית 🎉
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 500; index++) {
+ div.setAttribute('data-i', String(index));
+ if (index % 10 === 0) {
+ div.innerHTML = `ASCII 中文 العربية עברית 🎉 ${index}`;
+ }
+ }
+
+ expect(div.innerHTML).toContain('中文');
+ expect(div.innerHTML).toContain('العربية');
+ expect(html.querySelector('div')).not.toBeNull();
+ });
+ });
+
+ describe('Malformed HTML Auto-Correction', () => {
+ test('should handle unclosed tags without corruption', () => {
+ const html = new HtmlMod('unclosed paragraph
text
content
');
+ const div = html.querySelector('div')!;
+
+ for (let index = 0; index < 100; index++) {
+ div.setAttribute('class', `class-${index}`);
+ }
+
+ expect(div.getAttribute('class')).toBe('class-99');
+ });
+ });
+
+ describe('Comments and Special Content', () => {
+ test('should handle HTML comments without corruption', () => {
+ const html = new HtmlMod('content
content