@remote-dom/polyfill 1.5.1 → 1.6.0

package/source/tests/parent-node-mutation-return-values.test.ts

@@ -0,0 +1,63 @@
+import {Window} from '../index.ts';
+
+import {beforeEach, describe, expect, it} from 'vitest';
+
+beforeEach(() => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+});
+
+describe('ParentNode mutation return values', () => {
+  it('returns the removed child and preserves the remaining tree structure', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const child = document.createElement('em');
+    const last = document.createElement('strong');
+    parent.append(first, child, last);
+
+    expect(parent.removeChild(child)).toBe(child);
+
+    expect(Array.from(parent.childNodes)).toEqual([first, last]);
+    expect(first.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(first);
+    expect(child.parentNode).toBeNull();
+    expect(child.previousSibling).toBeNull();
+    expect(child.nextSibling).toBeNull();
+  });
+
+  it('returns the replaced child and installs the replacement in its place', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const oldChild = document.createElement('em');
+    const last = document.createElement('strong');
+    const newChild = document.createElement('i');
+    parent.append(first, oldChild, last);
+
+    expect(parent.replaceChild(newChild, oldChild)).toBe(oldChild);
+
+    expect(Array.from(parent.childNodes)).toEqual([first, newChild, last]);
+    expect(first.nextSibling).toBe(newChild);
+    expect(newChild.previousSibling).toBe(first);
+    expect(newChild.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(newChild);
+    expect(newChild.parentNode).toBe(parent);
+    expect(oldChild.parentNode).toBeNull();
+  });
+
+  it('returns the child when replacing it with itself without changing the tree', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const child = document.createElement('em');
+    const last = document.createElement('strong');
+    parent.append(first, child, last);
+
+    expect(parent.replaceChild(child, child)).toBe(child);
+
+    expect(Array.from(parent.childNodes)).toEqual([first, child, last]);
+    expect(first.nextSibling).toBe(child);
+    expect(child.previousSibling).toBe(first);
+    expect(child.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(child);
+    expect(child.parentNode).toBe(parent);
+  });
+});

package/source/tests/parent-node-mutation-validation.test.ts

@@ -0,0 +1,362 @@
+import {HOOKS, Window} from '../index.ts';
+
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+let polyfillWindow: Window;
+
+beforeEach(() => {
+  polyfillWindow = new Window();
+  Window.setGlobalThis(polyfillWindow);
+});
+
+describe('ParentNode insertion validation', () => {
+  it('rejects inserting a node into itself without changing the tree', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    parent.appendChild(child);
+
+    expect(() => parent.appendChild(parent)).toThrow();
+
+    expect(parent.parentNode).toBeNull();
+    expect(Array.from(parent.childNodes)).toEqual([child]);
+    expect(child.parentNode).toBe(parent);
+  });
+
+  it('rejects inserting an ancestor without changing either tree', () => {
+    const ancestor = document.createElement('section');
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+    ancestor.appendChild(parent);
+    parent.appendChild(child);
+
+    expect(() => parent.insertBefore(ancestor, child)).toThrow();
+
+    expect(ancestor.parentNode).toBeNull();
+    expect(Array.from(ancestor.childNodes)).toEqual([parent]);
+    expect(parent.parentNode).toBe(ancestor);
+    expect(Array.from(parent.childNodes)).toEqual([child]);
+    expect(child.parentNode).toBe(parent);
+  });
+
+  it('preserves an attached child when the reference belongs to another parent', () => {
+    const source = document.createElement('div');
+    const first = document.createElement('span');
+    const child = document.createElement('em');
+    const last = document.createElement('strong');
+    const destination = document.createElement('div');
+    const foreignParent = document.createElement('div');
+    const foreignReference = document.createElement('span');
+    source.append(first, child, last);
+    foreignParent.appendChild(foreignReference);
+
+    expect(() => destination.insertBefore(child, foreignReference)).toThrow();
+
+    expect(Array.from(source.childNodes)).toEqual([first, child, last]);
+    expect(first.nextSibling).toBe(child);
+    expect(child.previousSibling).toBe(first);
+    expect(child.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(child);
+    expect(child.parentNode).toBe(source);
+    expect(Array.from(destination.childNodes)).toEqual([]);
+    expect(Array.from(foreignParent.childNodes)).toEqual([foreignReference]);
+  });
+
+  it('does nothing when inserting a node before itself', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const child = document.createElement('em');
+    const last = document.createElement('strong');
+    parent.append(first, child, last);
+
+    expect(parent.insertBefore(child, child)).toBe(child);
+
+    expect(Array.from(parent.childNodes)).toEqual([first, child, last]);
+    expect(first.nextSibling).toBe(child);
+    expect(child.previousSibling).toBe(first);
+    expect(child.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(child);
+    expect(child.parentNode).toBe(parent);
+  });
+
+  it('preserves self-insertion lifecycle and observer effects', () => {
+    const calls: string[] = [];
+    class IdentityInsertionElement extends HTMLElement {
+      connectedCallback() {
+        calls.push('connected');
+      }
+
+      disconnectedCallback() {
+        calls.push('disconnected');
+      }
+    }
+    customElements.define(
+      'identity-insertion-element',
+      IdentityInsertionElement,
+    );
+    const parent = document.createElement('div');
+    const child = document.createElement('identity-insertion-element');
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+    calls.length = 0;
+    const observer = new MutationObserver(() => {});
+    observer.observe(parent, {childList: true});
+
+    parent.insertBefore(child, child);
+
+    expect(calls).toEqual(['disconnected', 'connected']);
+    expect(
+      observer.takeRecords().map((record) => ({
+        added: record.addedNodes.length,
+        removed: record.removedNodes.length,
+      })),
+    ).toEqual([
+      {added: 0, removed: 1},
+      {added: 1, removed: 0},
+    ]);
+    observer.disconnect();
+  });
+
+  it('preserves valid move semantics for an attached node', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const child = document.createElement('em');
+    const last = document.createElement('strong');
+    parent.append(first, child, last);
+
+    parent.insertBefore(child, first);
+
+    expect(Array.from(parent.childNodes)).toEqual([child, first, last]);
+    expect(child.previousSibling).toBeNull();
+    expect(child.nextSibling).toBe(first);
+    expect(first.previousSibling).toBe(child);
+    expect(first.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(first);
+  });
+
+  it('does not move fragment children when the reference is invalid', () => {
+    const parent = document.createElement('div');
+    const existing = document.createElement('span');
+    const fragment = document.createDocumentFragment();
+    const first = document.createElement('em');
+    const last = document.createElement('strong');
+    const foreignReference = document.createElement('span');
+    parent.appendChild(existing);
+    fragment.append(first, last);
+
+    expect(() => parent.insertBefore(fragment, foreignReference)).toThrow();
+
+    expect(Array.from(parent.childNodes)).toEqual([existing]);
+    expect(Array.from(fragment.childNodes)).toEqual([first, last]);
+    expect(first.parentNode).toBe(fragment);
+    expect(first.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(first);
+    expect(last.parentNode).toBe(fragment);
+  });
+
+  it('rejects inserting a fragment into its descendant without moving children', () => {
+    const fragment = document.createDocumentFragment();
+    const ancestor = document.createElement('section');
+    const parent = document.createElement('div');
+    fragment.appendChild(ancestor);
+    ancestor.appendChild(parent);
+
+    expect(() => parent.appendChild(fragment)).toThrow();
+
+    expect(Array.from(fragment.childNodes)).toEqual([ancestor]);
+    expect(ancestor.parentNode).toBe(fragment);
+    expect(Array.from(ancestor.childNodes)).toEqual([parent]);
+    expect(parent.parentNode).toBe(ancestor);
+    expect(Array.from(parent.childNodes)).toEqual([]);
+  });
+
+  it('rejects inserting a template into its own content without changing state', () => {
+    const parent = document.createElement('div');
+    const template = document.createElement('template');
+    const content = template.content;
+    parent.appendChild(template);
+    const removeChild = vi.fn();
+    polyfillWindow[HOOKS].removeChild = removeChild;
+
+    expect(() => content.appendChild(template)).toThrow();
+
+    expect(Array.from(parent.childNodes)).toEqual([template]);
+    expect(template.parentNode).toBe(parent);
+    expect(Array.from(content.childNodes)).toEqual([]);
+    expect(content.parentNode).toBeNull();
+    expect(template.contains(content)).toBe(false);
+    expect(removeChild).not.toHaveBeenCalled();
+  });
+
+  it('rejects mutually nesting templates through their content fragments', () => {
+    const parent = document.createElement('div');
+    const outer = document.createElement('template');
+    const inner = document.createElement('template');
+    parent.appendChild(outer);
+    outer.content.appendChild(inner);
+    const removeChild = vi.fn();
+    polyfillWindow[HOOKS].removeChild = removeChild;
+
+    expect(() => inner.content.appendChild(outer)).toThrow();
+
+    expect(Array.from(parent.childNodes)).toEqual([outer]);
+    expect(outer.parentNode).toBe(parent);
+    expect(Array.from(outer.content.childNodes)).toEqual([inner]);
+    expect(inner.parentNode).toBe(outer.content);
+    expect(Array.from(inner.content.childNodes)).toEqual([]);
+    expect(removeChild).not.toHaveBeenCalled();
+  });
+
+  it('rejects nesting an ancestor template through nested template content', () => {
+    const parent = document.createElement('div');
+    const outer = document.createElement('template');
+    const wrapper = document.createElement('section');
+    const inner = document.createElement('template');
+    parent.appendChild(outer);
+    outer.content.appendChild(wrapper);
+    wrapper.appendChild(inner);
+    const removeChild = vi.fn();
+    polyfillWindow[HOOKS].removeChild = removeChild;
+
+    expect(() => inner.content.appendChild(outer)).toThrow();
+
+    expect(Array.from(parent.childNodes)).toEqual([outer]);
+    expect(outer.parentNode).toBe(parent);
+    expect(Array.from(outer.content.childNodes)).toEqual([wrapper]);
+    expect(wrapper.parentNode).toBe(outer.content);
+    expect(Array.from(wrapper.childNodes)).toEqual([inner]);
+    expect(inner.parentNode).toBe(wrapper);
+    expect(Array.from(inner.content.childNodes)).toEqual([]);
+    expect(removeChild).not.toHaveBeenCalled();
+  });
+});
+
+describe('ParentNode replacement validation', () => {
+  it('replaces a child with its next sibling without detaching the sibling', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const oldChild = document.createElement('em');
+    const nextSibling = document.createElement('strong');
+    const last = document.createElement('span');
+    parent.append(first, oldChild, nextSibling, last);
+
+    parent.replaceChild(nextSibling, oldChild);
+
+    expect(Array.from(parent.childNodes)).toEqual([first, nextSibling, last]);
+    expect(first.nextSibling).toBe(nextSibling);
+    expect(nextSibling.previousSibling).toBe(first);
+    expect(nextSibling.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(nextSibling);
+    expect(nextSibling.parentNode).toBe(parent);
+    expect(oldChild.parentNode).toBeNull();
+    expect(oldChild.previousSibling).toBeNull();
+    expect(oldChild.nextSibling).toBeNull();
+  });
+
+  it('rejects replacing a child with the parent without removing the child', () => {
+    const parent = document.createElement('div');
+    const oldChild = document.createElement('span');
+    parent.appendChild(oldChild);
+
+    expect(() => parent.replaceChild(parent, oldChild)).toThrow();
+
+    expect(parent.parentNode).toBeNull();
+    expect(Array.from(parent.childNodes)).toEqual([oldChild]);
+    expect(oldChild.parentNode).toBe(parent);
+  });
+
+  it('rejects replacing a child with an ancestor without changing either tree', () => {
+    const ancestor = document.createElement('section');
+    const parent = document.createElement('div');
+    const oldChild = document.createElement('span');
+    ancestor.appendChild(parent);
+    parent.appendChild(oldChild);
+
+    expect(() => parent.replaceChild(ancestor, oldChild)).toThrow();
+
+    expect(ancestor.parentNode).toBeNull();
+    expect(Array.from(ancestor.childNodes)).toEqual([parent]);
+    expect(parent.parentNode).toBe(ancestor);
+    expect(Array.from(parent.childNodes)).toEqual([oldChild]);
+    expect(oldChild.parentNode).toBe(parent);
+  });
+
+  it('preserves the replacement node when the old child belongs elsewhere', () => {
+    const source = document.createElement('div');
+    const first = document.createElement('span');
+    const replacement = document.createElement('em');
+    const last = document.createElement('strong');
+    const parent = document.createElement('div');
+    const existing = document.createElement('span');
+    const foreignParent = document.createElement('div');
+    const foreignOldChild = document.createElement('span');
+    source.append(first, replacement, last);
+    parent.appendChild(existing);
+    foreignParent.appendChild(foreignOldChild);
+
+    expect(() => parent.replaceChild(replacement, foreignOldChild)).toThrow();
+
+    expect(Array.from(source.childNodes)).toEqual([first, replacement, last]);
+    expect(first.nextSibling).toBe(replacement);
+    expect(replacement.previousSibling).toBe(first);
+    expect(replacement.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(replacement);
+    expect(replacement.parentNode).toBe(source);
+    expect(Array.from(parent.childNodes)).toEqual([existing]);
+    expect(Array.from(foreignParent.childNodes)).toEqual([foreignOldChild]);
+  });
+
+  it('preserves final position when replacing a child with itself', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const child = document.createElement('em');
+    const last = document.createElement('strong');
+    parent.append(first, child, last);
+
+    parent.replaceChild(child, child);
+
+    expect(Array.from(parent.childNodes)).toEqual([first, child, last]);
+    expect(first.nextSibling).toBe(child);
+    expect(child.previousSibling).toBe(first);
+    expect(child.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(child);
+    expect(child.parentNode).toBe(parent);
+  });
+
+  it('preserves self-replacement lifecycle and observer effects', () => {
+    const calls: string[] = [];
+    class IdentityReplacementElement extends HTMLElement {
+      connectedCallback() {
+        calls.push('connected');
+      }
+
+      disconnectedCallback() {
+        calls.push('disconnected');
+      }
+    }
+    customElements.define(
+      'identity-replacement-element',
+      IdentityReplacementElement,
+    );
+    const parent = document.createElement('div');
+    const child = document.createElement('identity-replacement-element');
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+    calls.length = 0;
+    const observer = new MutationObserver(() => {});
+    observer.observe(parent, {childList: true});
+
+    parent.replaceChild(child, child);
+
+    expect(calls).toEqual(['disconnected', 'connected']);
+    expect(
+      observer.takeRecords().map((record) => ({
+        added: record.addedNodes.length,
+        removed: record.removedNodes.length,
+      })),
+    ).toEqual([
+      {added: 0, removed: 1},
+      {added: 1, removed: 0},
+    ]);
+    observer.disconnect();
+  });
+});

package/source/tests/parent-node.test.ts

@@ -0,0 +1,169 @@
+import {Window} from '../index.ts';
+
+import {beforeEach, describe, expect, it} from 'vitest';
+
+function siblingChain(parent: ParentNode) {
+  const names: string[] = [];
+  for (let node = parent.firstChild; node; node = node.nextSibling) {
+    names.push(node.nodeName.toLowerCase());
+  }
+  return names;
+}
+
+function childNodeNames(parent: ParentNode) {
+  return Array.from(parent.childNodes, (node) => node.nodeName.toLowerCase());
+}
+
+beforeEach(() => {
+  const window = new Window();
+  Window.setGlobalThis(window);
+});
+
+describe('ParentNode.appendChild', () => {
+  it('returns the appended child', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('span');
+
+    expect(parent.appendChild(child)).toBe(child);
+  });
+});
+
+describe('ParentNode.insertBefore', () => {
+  it('links an element inserted before a middle child into tree order', () => {
+    const parent = document.createElement('div');
+    const first = document.createElement('span');
+    const middle = document.createElement('em');
+    const last = document.createElement('strong');
+
+    parent.appendChild(first);
+    parent.appendChild(last);
+
+    expect(parent.insertBefore(middle, last)).toBe(middle);
+    expect(Array.from(parent.childNodes)).toEqual([first, middle, last]);
+    expect(first.nextSibling).toBe(middle);
+    expect(middle.previousSibling).toBe(first);
+    expect(middle.nextSibling).toBe(last);
+    expect(last.previousSibling).toBe(middle);
+  });
+
+  it('inserts before the first child', () => {
+    const existing = document.createElement('existing-child');
+    document.body.appendChild(existing);
+
+    const inserted = document.createElement('inserted-child');
+    document.body.insertBefore(inserted, existing);
+
+    expect(siblingChain(document.body)).toStrictEqual([
+      'inserted-child',
+      'existing-child',
+    ]);
+    expect(document.body.firstChild).toBe(inserted);
+  });
+
+  it('keeps the sibling chain and childNodes in agreement', () => {
+    const anchor = document.createElement('anchor-child');
+    document.body.appendChild(anchor);
+
+    for (let i = 0; i < 3; i++) {
+      document.body.insertBefore(document.createElement(`child-${i}`), anchor);
+    }
+
+    expect(siblingChain(document.body)).toStrictEqual(
+      childNodeNames(document.body),
+    );
+    expect(siblingChain(document.body)).toStrictEqual([
+      'child-0',
+      'child-1',
+      'child-2',
+      'anchor-child',
+    ]);
+  });
+
+  it('finds a node inserted before a non-first child by selector', () => {
+    const style = document.createElement('style');
+    document.body.appendChild(style);
+
+    const modal = document.createElement('s-modal');
+    modal.setAttribute('id', 'add-zone');
+    document.body.insertBefore(modal, style);
+
+    expect(document.querySelector('s-modal#add-zone')).toBe(modal);
+    expect(document.querySelectorAll('s-modal')).toHaveLength(1);
+  });
+
+  it('inserts the children of a document fragment in order', () => {
+    const anchor = document.createElement('anchor-child');
+    document.body.appendChild(anchor);
+
+    const fragment = document.createDocumentFragment();
+    fragment.append(
+      document.createElement('fragment-first'),
+      document.createElement('fragment-last'),
+    );
+    document.body.insertBefore(fragment, anchor);
+
+    expect(siblingChain(document.body)).toStrictEqual([
+      'fragment-first',
+      'fragment-last',
+      'anchor-child',
+    ]);
+    expect(siblingChain(document.body)).toStrictEqual(
+      childNodeNames(document.body),
+    );
+  });
+
+  it('relinks a node moved from later to earlier in the same parent', () => {
+    const first = document.createElement('first-child');
+    const middle = document.createElement('middle-child');
+    const last = document.createElement('last-child');
+    document.body.append(first, middle, last);
+
+    document.body.insertBefore(last, middle);
+
+    expect(siblingChain(document.body)).toStrictEqual([
+      'first-child',
+      'last-child',
+      'middle-child',
+    ]);
+    expect(siblingChain(document.body)).toStrictEqual(
+      childNodeNames(document.body),
+    );
+  });
+});
+
+describe('ParentNode.prepend', () => {
+  it('prepends multiple nodes ahead of an existing child', () => {
+    const existing = document.createElement('existing-child');
+    document.body.appendChild(existing);
+
+    document.body.prepend(
+      document.createElement('prepended-first'),
+      document.createElement('prepended-last'),
+    );
+
+    expect(siblingChain(document.body)).toStrictEqual([
+      'prepended-first',
+      'prepended-last',
+      'existing-child',
+    ]);
+    expect(siblingChain(document.body)).toStrictEqual(
+      childNodeNames(document.body),
+    );
+  });
+});
+
+describe('ChildNode.after', () => {
+  it('inserts after a non-last child', () => {
+    const first = document.createElement('first-child');
+    const last = document.createElement('last-child');
+    document.body.append(first, last);
+
+    first.after(document.createElement('inserted-child'));
+
+    expect(siblingChain(document.body)).toStrictEqual([
+      'first-child',
+      'inserted-child',
+      'last-child',
+    ]);
+  });
+});