diff --git a/.changeset/swift-eels-drum.md b/.changeset/swift-eels-drum.md new file mode 100644 index 0000000..6c09ea8 --- /dev/null +++ b/.changeset/swift-eels-drum.md @@ -0,0 +1,5 @@ +--- +'@ciolabs/html-mod': patch +--- + +Update experimental version to have same API as standard 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 index abcbc1d..cc982ca 100644 --- a/packages/html-mod/src/experimental/auto-flush-edge-cases.test.ts +++ b/packages/html-mod/src/experimental/auto-flush-edge-cases.test.ts @@ -1,7 +1,8 @@ /* eslint-disable unicorn/prefer-dom-node-dataset */ +import { SourceText } from '@ciolabs/htmlparser2-source'; import { describe, expect, test } from 'vitest'; -import { HtmlMod, HtmlModElement, HtmlModText } from './index'; +import { HtmlMod, HtmlModText } from './index'; describe('Auto-Flush Edge Cases - Aggressive Testing', () => { describe('Chained Modifications with Queries', () => { @@ -256,16 +257,10 @@ describe('Auto-Flush Edge Cases - Aggressive Testing', () => { const html = new HtmlMod('

text1

text2
'); const p = html.querySelector('p')!; - const pText = p.children[0]; - if (pText instanceof HtmlModText) { - pText.textContent = 'modified-text1'; - } + p.textContent = 'modified-text1'; const span = html.querySelector('span')!; - const spanText = span.children[0]; - if (spanText instanceof HtmlModText) { - spanText.textContent = 'modified-text2'; - } + span.textContent = 'modified-text2'; expect(html.querySelector('p')!.textContent).toBe('modified-text1'); expect(html.querySelector('span')!.textContent).toBe('modified-text2'); @@ -771,21 +766,19 @@ describe('Auto-Flush Edge Cases - Aggressive Testing', () => { 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[]; + const textNodes = children + .filter(child => child.type === 'text') + .map(child => new HtmlModText(child as SourceText, html)); 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
'); }); @@ -1829,11 +1822,9 @@ describe('Auto-Flush Edge Cases - Aggressive Testing', () => { expect(children.length).toBe(3); - // Modify through children array - const firstChild = children[0]; - if (firstChild instanceof HtmlModElement) { - firstChild.innerHTML = 'modified'; - } + const firstChild = html.querySelectorAll('p')[0]; + firstChild.innerHTML = 'modified'; + expect(html.querySelectorAll('p')[0].innerHTML).toBe('modified'); }); @@ -1864,12 +1855,10 @@ describe('Auto-Flush Edge Cases - Aggressive Testing', () => { const div = html.querySelector('div')!; div.setAttribute('class', 'parent'); - const children = div.children; - const firstChild = children[0]; - if (firstChild instanceof HtmlModElement) { - firstChild.innerHTML = 'modified'; - } + const firstChildElement = html.querySelector('p')!; + firstChildElement.innerHTML = 'modified'; + expect(html.toString()).toBe('

modified

'); }); @@ -1882,13 +1871,9 @@ describe('Auto-Flush Edge Cases - Aggressive Testing', () => { test('should remove child through children array', () => { const html = new HtmlMod('

1

2

3

'); - const div = html.querySelector('div')!; - const children = div.children; - const secondChild = children[1]; - if (secondChild instanceof HtmlModElement) { - secondChild.remove(); - } + const paragraphs = html.querySelectorAll('p'); + paragraphs[1].remove(); expect(html.querySelectorAll('p').length).toBe(2); expect(html.querySelectorAll('p')[0].innerHTML).toBe('1'); diff --git a/packages/html-mod/src/experimental/index.ts b/packages/html-mod/src/experimental/index.ts index 817ea9d..8181964 100644 --- a/packages/html-mod/src/experimental/index.ts +++ b/packages/html-mod/src/experimental/index.ts @@ -510,19 +510,8 @@ export class HtmlModElement { ); } - get children(): (HtmlModElement | HtmlModText)[] { - this.__htmlMod.__ensureFlushed(); - return this.__element.children - .map(child => { - if (child.type === 'text') { - return new this.__htmlMod.__HtmlModText(child as unknown as SourceText, this.__htmlMod); - } else if (child.type === 'tag') { - return new this.__htmlMod.__HtmlModElement(child as unknown as SourceElement, this.__htmlMod); - } - // For other node types (comments, etc.), skip them for now - return null; - }) - .filter((child): child is HtmlModElement | HtmlModText => child !== null); + get children() { + return this.__element.children; } get parent(): HtmlModElement | null {