@remote-dom/polyfill 1.5.0 → 1.6.0

package/source/tests/serialization-template.test.ts

@@ -0,0 +1,232 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+
+import {CONTENT, HTML_NAMESPACE, SVG_NAMESPACE} from '../constants.ts';
+import type {HTMLTemplateElement} from '../HTMLTemplateElement.ts';
+import {Window} from '../index.ts';
+
+let window: Window;
+
+describe('template parsing and serialization', () => {
+  beforeEach(() => {
+    window = new Window();
+    Window.setGlobalThis(window);
+  });
+
+  it('serializes an empty template', () => {
+    const template = window.document.createElement(
+      'template',
+    ) as HTMLTemplateElement;
+
+    expect(template.outerHTML).toBe('<template></template>');
+  });
+
+  it('does not serialize lazy HTML template ordinary children', () => {
+    const container = window.document.createElement('div');
+    const template = window.document.createElement(
+      'template',
+    ) as HTMLTemplateElement;
+    const ordinaryChild = window.document.createElement('span');
+    ordinaryChild.textContent = 'ordinary';
+    template.appendChild(ordinaryChild);
+    container.appendChild(template);
+
+    expect(template[CONTENT]).toBeUndefined();
+    expect(template.outerHTML).toBe('<template></template>');
+    expect(container.innerHTML).toBe('<template></template>');
+    expect(template[CONTENT]).toBeUndefined();
+    expect([...template.childNodes]).toEqual([ordinaryChild]);
+    expect(ordinaryChild.parentNode).toBe(template);
+
+    void template.content;
+
+    expect(template.outerHTML).toBe('<template></template>');
+    expect(container.innerHTML).toBe('<template></template>');
+    expect([...template.childNodes]).toEqual([ordinaryChild]);
+    expect(ordinaryChild.parentNode).toBe(template);
+  });
+
+  it('serializes and clears initialized template content', () => {
+    const template = window.document.createElement(
+      'template',
+    ) as HTMLTemplateElement;
+    template.innerHTML = '<span>content</span>';
+
+    expect(template.outerHTML).toBe(
+      '<template><span>content</span></template>',
+    );
+
+    template.innerHTML = '';
+
+    expect(template.outerHTML).toBe('<template></template>');
+  });
+
+  it('selects prefixed HTML template content by exact local name', () => {
+    const template = window.document.createElementNS(
+      HTML_NAMESPACE,
+      'h:template',
+    ) as HTMLTemplateElement;
+    const ordinaryChild = window.document.createElement('span');
+    template.appendChild(ordinaryChild);
+
+    expect(template.outerHTML).toBe('<h:template></h:template>');
+
+    template.content.append('content');
+
+    expect(template.outerHTML).toBe('<h:template>content</h:template>');
+    expect([...template.childNodes]).toEqual([ordinaryChild]);
+  });
+
+  it.each([
+    ['foreign', 'urn:widget', 'template'],
+    ['null', null, 'template'],
+    ['established case', HTML_NAMESPACE, 'Template'],
+  ])(
+    'serializes ordinary children for %s template controls',
+    (_label, namespace, name) => {
+      const template = window.document.createElementNS(
+        namespace as typeof HTML_NAMESPACE,
+        name,
+      );
+      template.append('ordinary');
+
+      expect(template.outerHTML).toBe(`<${name}>ordinary</${name}>`);
+    },
+  );
+
+  it('parses and serializes content between template tags', () => {
+    const element = window.document.createElement('div');
+    element.innerHTML = '<template><p class="message">Hello</p></template>';
+
+    const template = element.firstElementChild as HTMLTemplateElement;
+    expect(template.childNodes).toHaveLength(0);
+    expect(template.content.childNodes).toHaveLength(1);
+    expect(template.outerHTML).toBe(
+      '<template><p class="message">Hello</p></template>',
+    );
+    expect(element.innerHTML).toBe(
+      '<template><p class="message">Hello</p></template>',
+    );
+  });
+
+  it('parses and serializes nested template content', () => {
+    const element = window.document.createElement('div');
+    element.innerHTML =
+      '<template><p>Outer</p><template><span>Nested</span></template></template>';
+
+    const template = element.firstElementChild as HTMLTemplateElement;
+    const nestedTemplate = template.content.children[1] as HTMLTemplateElement;
+    expect(template.content.children).toHaveLength(2);
+    expect(nestedTemplate.childNodes).toHaveLength(0);
+    expect(nestedTemplate.content.children[0]?.localName).toBe('span');
+    expect(element.innerHTML).toBe(
+      '<template><p>Outer</p><template><span>Nested</span></template></template>',
+    );
+  });
+
+  it('restores the outer insertion target after a template closes', () => {
+    const element = window.document.createElement('div');
+    element.innerHTML = '<template><b>x</b></template><i>y</i>';
+
+    const template = element.children[0] as HTMLTemplateElement;
+    expect(element.children).toHaveLength(2);
+    expect(template.content.children[0]?.localName).toBe('b');
+    expect(element.children[1]?.localName).toBe('i');
+    expect(element.innerHTML).toBe('<template><b>x</b></template><i>y</i>');
+  });
+
+  it('keeps ordinary element children as direct children', () => {
+    const element = window.document.createElement('div');
+    element.innerHTML = '<section><p>x</p></section>';
+
+    const section = element.firstElementChild!;
+    expect(section.childNodes).toHaveLength(1);
+    expect(section.firstElementChild?.localName).toBe('p');
+    expect(element.innerHTML).toBe('<section><p>x</p></section>');
+  });
+
+  it('preserves template content during reentrant parsing', () => {
+    const nested = window.document.createElement('div');
+    let callbackCount = 0;
+
+    class ReentrantTemplateElement extends HTMLElement {
+      static observedAttributes = ['data-nested'];
+
+      attributeChangedCallback() {
+        callbackCount += 1;
+        nested.innerHTML = '<template><span>Nested</span></template>';
+      }
+    }
+
+    customElements.define(
+      'reentrant-template-element',
+      ReentrantTemplateElement,
+    );
+
+    const element = window.document.createElement('div');
+    element.innerHTML =
+      '<reentrant-template-element data-nested="yes"></reentrant-template-element><template><p>Outer</p></template><i>After</i>';
+
+    const nestedTemplate = nested.firstElementChild as HTMLTemplateElement;
+    const outerTemplate = element.children[1] as HTMLTemplateElement;
+    expect(callbackCount).toBe(1);
+    expect(nestedTemplate.content.children[0]?.localName).toBe('span');
+    expect(nestedTemplate.outerHTML).toBe(
+      '<template><span>Nested</span></template>',
+    );
+    expect(outerTemplate.content.children[0]?.localName).toBe('p');
+    expect(element.innerHTML).toBe(
+      '<reentrant-template-element data-nested="yes"></reentrant-template-element><template><p>Outer</p></template><i>After</i>',
+    );
+  });
+
+  it('preserves escaping, comments, and HTML void serialization in templates', () => {
+    const template = window.document.createElement(
+      'template',
+    ) as HTMLTemplateElement;
+    template.innerHTML =
+      '<p title="Fish &amp; &quot;chips&quot;">Fish &amp; &lt;chips&gt;<!--note--></p><br>';
+
+    expect(template.outerHTML).toBe(
+      '<template><p title="Fish &amp; &quot;chips&quot;">Fish &amp; &lt;chips&gt;<!--note--></p><br></template>',
+    );
+  });
+
+  it('only omits void-element closing tags in the HTML namespace', () => {
+    const htmlBreak = window.document.createElement('br');
+    const svgBreak = window.document.createElementNS(SVG_NAMESPACE, 'br');
+
+    expect(htmlBreak.outerHTML).toBe('<br>');
+    expect(svgBreak.outerHTML).toBe('<br></br>');
+  });
+
+  it('serializes 6,000 nested templates without overflowing', () => {
+    const depth = 6_000;
+    const template = window.document.createElement(
+      'template',
+    ) as HTMLTemplateElement;
+    let parent = template;
+
+    for (let index = 1; index < depth; index += 1) {
+      const nestedTemplate = window.document.createElement(
+        'template',
+      ) as HTMLTemplateElement;
+      parent.content.append(nestedTemplate);
+      parent = nestedTemplate;
+    }
+    parent.content.append('deep');
+
+    const expected =
+      '<template>'.repeat(depth) + 'deep' + '</template>'.repeat(depth);
+    expect(template.outerHTML).toBe(expected);
+  }, 20_000);
+
+  it('serializes 6,000 parsed nested templates without overflowing', () => {
+    const depth = 6_000;
+    const expected =
+      '<template>'.repeat(depth) + 'deep' + '</template>'.repeat(depth);
+    const element = window.document.createElement('div');
+    element.innerHTML = expected;
+
+    expect(element.innerHTML).toBe(expected);
+  }, 20_000);
+});

package/source/tests/slot-attribute.test.ts

@@ -0,0 +1,133 @@
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+import {HOOKS, HTMLElement as PolyfillHTMLElement, Window} from '../index.ts';
+
+let polyfillWindow: Window;
+let polyfillDocument: Window['document'];
+
+beforeEach(() => {
+  polyfillWindow = new Window();
+  Window.setGlobalThis(polyfillWindow);
+  polyfillDocument = polyfillWindow.document;
+});
+
+describe('slot attribute reflection', () => {
+  it.each([
+    {description: 'empty', slot: ''},
+    {description: 'non-empty', slot: 'aside'},
+  ])(
+    'removes an $description slot attribute without recreating it',
+    ({slot}) => {
+      const setAttribute = vi.fn();
+      const removeAttribute = vi.fn((element: Element, name: string) => {
+        if (name === 'slot') {
+          expect(element.hasAttribute(name)).toBe(false);
+          expect(element.slot).toBe('');
+        }
+      });
+      polyfillWindow[HOOKS].setAttribute = setAttribute;
+      polyfillWindow[HOOKS].removeAttribute = removeAttribute;
+      const element = polyfillDocument.createElement('div');
+
+      element.setAttribute('slot', slot);
+      const removedAttribute = element.attributes.getNamedItem('slot');
+      setAttribute.mockClear();
+
+      element.removeAttribute('slot');
+
+      expect(removeAttribute).toHaveBeenCalledOnce();
+      expect(removeAttribute).toHaveBeenCalledWith(element, 'slot', null);
+      expect(setAttribute).not.toHaveBeenCalled();
+      expect(removedAttribute?.ownerElement).toBeNull();
+      expect(element.hasAttribute('slot')).toBe(false);
+      expect(element.getAttribute('slot')).toBeNull();
+      expect(element.slot).toBe('');
+      expect(element.hasAttribute('slot')).toBe(false);
+    },
+  );
+
+  it('treats repeated slot attribute removal as a no-op', () => {
+    const setAttribute = vi.fn();
+    const removeAttribute = vi.fn();
+    polyfillWindow[HOOKS].setAttribute = setAttribute;
+    polyfillWindow[HOOKS].removeAttribute = removeAttribute;
+    const element = polyfillDocument.createElement('div');
+    element.setAttribute('slot', 'aside');
+    setAttribute.mockClear();
+
+    element.removeAttribute('slot');
+    element.removeAttribute('slot');
+
+    expect(removeAttribute).toHaveBeenCalledOnce();
+    expect(setAttribute).not.toHaveBeenCalled();
+    expect(element.hasAttribute('slot')).toBe(false);
+    expect(element.slot).toBe('');
+  });
+
+  it('reflects property-driven slot updates through the attribute', () => {
+    const values: string[] = [];
+    polyfillWindow[HOOKS].setAttribute = (_element, name, value) => {
+      if (name === 'slot') values.push(value);
+    };
+    const element = polyfillDocument.createElement('div');
+
+    element.slot = 'aside';
+    element.slot = 'header';
+    element.slot = 'header';
+    element.slot = '';
+
+    expect(values).toEqual(['aside', 'header', '']);
+    expect(element.slot).toBe('');
+    expect(element.hasAttribute('slot')).toBe(true);
+    expect(element.getAttribute('slot')).toBe('');
+
+    element.removeAttribute('slot');
+
+    expect(values).toEqual(['aside', 'header', '']);
+    expect(element.slot).toBe('');
+    expect(element.hasAttribute('slot')).toBe(false);
+  });
+
+  it('emits removal before a slot callback restores the attribute', () => {
+    const events: string[] = [];
+
+    class RestoringSlotElement extends PolyfillHTMLElement {
+      static observedAttributes = ['slot'];
+
+      attributeChangedCallback(
+        _name: string,
+        _oldValue: string | null,
+        newValue: string | null,
+      ) {
+        events.push(`callback:${newValue}`);
+        if (newValue == null) this.slot = 'restored';
+      }
+    }
+
+    polyfillWindow.customElements.define(
+      'restoring-slot',
+      RestoringSlotElement as unknown as CustomElementConstructor,
+    );
+    const element = polyfillDocument.createElement('restoring-slot');
+    element.setAttribute('slot', 'initial');
+    events.length = 0;
+
+    polyfillWindow[HOOKS].removeAttribute = (_element, name) => {
+      if (name === 'slot') events.push('hook:remove');
+    };
+    polyfillWindow[HOOKS].setAttribute = (_element, name, value) => {
+      if (name === 'slot') events.push(`hook:set:${value}`);
+    };
+
+    element.removeAttribute('slot');
+
+    expect(events).toEqual([
+      'hook:remove',
+      'callback:null',
+      'hook:set:restored',
+      'callback:restored',
+    ]);
+    expect(element.getAttribute('slot')).toBe('restored');
+    expect(element.slot).toBe('restored');
+  });
+});