@adia-ai/web-components 0.6.7 → 0.6.9

package/core/template.test.js

@@ -279,3 +279,297 @@ describe('html template — FB-47 (v0.5.19) stamp() cache + repeat() keyed reuse
     expect(secondDiv.textContent).toBe('second');
   });
 });
+
+describe('html template — FB-55 (v0.6.8) `.camelCase=${expr}` property-binding lowercase trap close', () => {
+  // FEEDBACK-55: the HTML parser lowercases attribute names inside
+  // <template>.innerHTML per HTML5 §13.2.5.32. Pre-fix, `.className=` arrived
+  // at scan() as `.classname`, then `name.slice(1)` yielded `"classname"`,
+  // and `applyValue()` wrote `p.n["classname"] = v` — an enumerable expando,
+  // never invoking the camelCase property setter. Classes never applied; no
+  // warn, no error.
+  //
+  // Fix: PROP_CASE_FIX static map (for built-in DOM camelCase props) +
+  // prototype-walk fallback (for UIElement-defined custom-element props).
+  // Backward-compatible: when no case-insensitive match exists, the
+  // original lowercase name is preserved (genuine expando consumers
+  // unaffected).
+  //
+  // RESPONSE-55 documents the trap end-to-end + reviewer-#A scope
+  // expansion to UIElement primitives.
+
+  let container;
+  let warnSpy;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    container.remove();
+    warnSpy.mockRestore();
+  });
+
+  it('.className=${expr} writes to the real className property (not lowercase expando)', () => {
+    const tpl = html`<span .className=${'foo bar'}>x</span>`;
+    stamp(tpl, container);
+    const span = container.querySelector('span');
+    expect(span.className).toBe('foo bar');              // ✅ real className set
+    expect(span.getAttribute('class')).toBe('foo bar');  // ✅ reflected to DOM attr
+    expect(span.classname).toBeUndefined();              // ✅ NO lowercase expando
+  });
+
+  it('.tabIndex=${n} writes to the real tabIndex property', () => {
+    const tpl = html`<div .tabIndex=${3}></div>`;
+    stamp(tpl, container);
+    const div = container.querySelector('div');
+    expect(div.tabIndex).toBe(3);
+    expect(div.getAttribute('tabindex')).toBe('3');
+  });
+
+  it('.innerHTML=${str} survives unchanged (already-lowercase name)', () => {
+    // .innerHTML is one of the few camelCase-looking names whose
+    // canonical form is already lowercase (well, it's `innerHTML` but
+    // the parser lowercases it to `innerhtml` AND PROP_CASE_FIX maps
+    // back to `innerHTML`). Verify it lands on the property regardless.
+    const tpl = html`<div .innerHTML=${'<span class="inner">payload</span>'}></div>`;
+    stamp(tpl, container);
+    const div = container.querySelector('div');
+    expect(div.querySelector('.inner')?.textContent).toBe('payload');
+  });
+
+  it('.lowercaseProp=${v} on a stock element preserves expando semantics (backward compat)', () => {
+    // The fallback prototype walk skips Object.prototype to avoid noisy
+    // matches. A genuinely-lowercase property name with no matching
+    // camelCase pair on the chain (e.g. `.myexpando`) lands on the
+    // element as a lowercase expando — the documented escape hatch
+    // for arbitrary data attachment. Verify no regression.
+    const tpl = html`<div .myexpando=${'attached'}></div>`;
+    stamp(tpl, container);
+    const div = container.querySelector('div');
+    expect(div.myexpando).toBe('attached');
+  });
+
+  it('.camelCaseProp=${v} on a UIElement-style custom element invokes the canonical setter', async () => {
+    // Reviewer-addition #A from RESPONSE-55: UIElement defines
+    // properties under camelCase keys via Object.defineProperty. The
+    // pre-fix trap wrote `el['camelprop'] = v` (expando) instead of
+    // invoking the setter. Verify the fix routes correctly through
+    // the prototype-walk fallback.
+    class FB55El extends HTMLElement {
+      constructor() {
+        super();
+        let _camelProp = '';
+        Object.defineProperty(this, 'camelProp', {
+          get() { return _camelProp; },
+          set(v) { _camelProp = v; this.dataset.lastSet = v; },
+          configurable: true,
+          enumerable: true,
+        });
+      }
+    }
+    if (!customElements.get('fb55-el')) customElements.define('fb55-el', FB55El);
+
+    const tpl = html`<fb55-el .camelProp=${'via-setter'}></fb55-el>`;
+    stamp(tpl, container);
+    const el = container.querySelector('fb55-el');
+    expect(el.camelProp).toBe('via-setter');             // ✅ getter returns set value
+    expect(el.dataset.lastSet).toBe('via-setter');       // ✅ setter side-effect ran
+    expect(el.camelprop).toBeUndefined();                // ✅ NO lowercase expando
+  });
+
+  it('.maxChroma=${n} on a UIElement-style ce reaches the camelCase property', () => {
+    // Real-world surface: <color-picker max-chroma> and <color-input
+    // max-chroma> declare `maxChroma` as a static property. Consumers
+    // reaching for `.maxChroma=${value}` template binding must invoke
+    // the setter, not write an expando.
+    class FB55Numeric extends HTMLElement {
+      constructor() {
+        super();
+        let _maxChroma = 0;
+        Object.defineProperty(this, 'maxChroma', {
+          get() { return _maxChroma; },
+          set(v) { _maxChroma = v; },
+          configurable: true, enumerable: true,
+        });
+      }
+    }
+    if (!customElements.get('fb55-num')) customElements.define('fb55-num', FB55Numeric);
+
+    const tpl = html`<fb55-num .maxChroma=${0.42}></fb55-num>`;
+    stamp(tpl, container);
+    const el = container.querySelector('fb55-num');
+    expect(el.maxChroma).toBe(0.42);
+  });
+
+  it('updates to .className=${expr} re-route through the setter on every value change', () => {
+    // The PROP_CASE_FIX resolution is cached in parts[i].name at scan()
+    // time. Subsequent update() ticks must continue to use the resolved
+    // camelCase name. Verify by re-stamping with a new value.
+    const make = (cls) => html`<span .className=${cls}>x</span>`;
+    stamp(make('a'), container);
+    let span = container.querySelector('span');
+    expect(span.className).toBe('a');
+
+    stamp(make('b'), container);
+    span = container.querySelector('span');
+    expect(span.className).toBe('b');                    // ✅ second update routes correctly
+    expect(span.getAttribute('class')).toBe('b');
+  });
+
+  it('warning text no longer recommends .className= as the FIRST option for class= partial interp', () => {
+    // FB-55 #2: pre-fix, the v0.5.5 §184 warn text put `.className=`
+    // first; post-fix, `class="${expr}"` (the discoverable form) leads.
+    // Both work now (FB-55 #1), but the recommended ordering matters
+    // for new consumers reading the warning cold.
+    const cls = 'foo';
+    const tpl = html`<span class="prefix ${cls}">x</span>`;
+    stamp(tpl, container);
+    expect(warnSpy).toHaveBeenCalled();
+    const msg = warnSpy.mock.calls[0][0];
+    const classFullPos = msg.indexOf('class="${expression}"');
+    const classNamePos = msg.indexOf('.className=${expression}');
+    expect(classFullPos).toBeGreaterThan(-1);
+    expect(classNamePos).toBeGreaterThan(-1);
+    expect(classFullPos).toBeLessThan(classNamePos);     // ✅ class="" first, .className= second
+  });
+
+  it('warning text dropped the .classList= aspirational line (FB-55 #2)', () => {
+    // Pre-fix the warn text mentioned `.classList=${{foo: true, bar: false}}`
+    // as "if/when implemented". classList is a read-only DOMTokenList
+    // accessor — no PROP_CASE_FIX could make it assignable, so the line
+    // was misleading. Post-fix it's removed.
+    const cls = 'foo';
+    const tpl = html`<span class="prefix ${cls}">x</span>`;
+    stamp(tpl, container);
+    const msg = warnSpy.mock.calls[0][0];
+    expect(msg).not.toMatch(/\.classList=/);
+  });
+
+  it('does not regress: canonical .style=${cssText}, .title=${str}, .value=${v} still work', () => {
+    // These property names are already lowercase, so they survived
+    // the parser pre-fix. Verify PROP_CASE_FIX didn't break them.
+    const tpl = html`<input .title=${'tip'} .value=${'val'}>`;
+    stamp(tpl, container);
+    const input = container.querySelector('input');
+    expect(input.title).toBe('tip');
+    expect(input.value).toBe('val');
+  });
+});
+
+describe('html template — FB-57 (v0.6.8) nested SVG/MathML template namespace re-routing', () => {
+  // FEEDBACK-57: nested `${html`<svg-child/>`}` interpolations produce
+  // HTML-namespaced elements (HTMLUnknownElement) instead of SVGElement.
+  // Root cause: each nested html`` is a SEPARATE cached template, and
+  // `tpl.innerHTML = m` is parsed at document level without SVG context.
+  // The <span style="display:contents"> wrapper from wrap() doesn't fix
+  // it because display:contents is layout-level not namespace-level;
+  // SVG layout is namespace-strict → invisible-but-present output.
+  //
+  // Fix: namespace-aware mount() — when the container is inside an SVG
+  // (or MathML) subtree, recursively re-namespace the cloned fragment
+  // via createElementNS. <foreignObject> and <annotation-xml
+  // encoding=text/html> revert to HTML per HTML5 §12.2.5 foreign-content
+  // insertion mode.
+  //
+  // RESPONSE-57 documents the trap end-to-end + the implementation-site
+  // choice (mount() not getTemplate(), to keep cache coherent).
+
+  const SVG_NS = 'http://www.w3.org/2000/svg';
+  const MATHML_NS = 'http://www.w3.org/1998/Math/MathML';
+
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    container.remove();
+  });
+
+  it('inline <svg><circle/></svg> in a single template keeps working (regression)', () => {
+    // Pre-fix this case already worked because the HTML parser sees
+    // <svg> in tpl.innerHTML and enters SVG insertion mode for its
+    // descendants. Post-fix it must still work — the container is
+    // HTML-namespaced (<div>), so foreignContentNS() returns null,
+    // re-namespacing is skipped, and the inline parser's NS survives.
+    const tpl = html`<svg viewBox="0 0 10 10"><circle cx="5" cy="5" r="3"/></svg>`;
+    stamp(tpl, container);
+    const svg = container.querySelector('svg');
+    const circle = container.querySelector('circle');
+    expect(svg.namespaceURI).toBe(SVG_NS);
+    expect(circle.namespaceURI).toBe(SVG_NS);
+  });
+
+  it('nested ${html`<circle/>`} inside an SVG container now lands in SVG namespace', () => {
+    // The canonical fix surface. Pre-fix, the inner template's <circle>
+    // arrived as HTMLUnknownElement (NS xhtml). Post-fix, the wrap()
+    // span is HTML-namespaced (correct — it has display:contents) but
+    // its children get re-namespaced via the wrap-span's closest('svg')
+    // matching the outer SVG.
+    const svgRoot = document.createElementNS(SVG_NS, 'svg');
+    container.appendChild(svgRoot);
+    const dots = [{ x: 1 }, { x: 2 }, { x: 3 }];
+    const tpl = html`${dots.map(d => html`<circle cx=${d.x} cy="5" r="2"/>`)}`;
+    stamp(tpl, svgRoot);
+    const circles = svgRoot.querySelectorAll('circle');
+    expect(circles.length).toBe(3);
+    for (const c of circles) {
+      expect(c.namespaceURI).toBe(SVG_NS);                       // ✅ SVG-NS
+    }
+  });
+
+  it('a directly-stamped html`<circle/>` template into an SVG container is SVG-namespaced', () => {
+    // Even without array interpolation, stamping a single SVG-content
+    // template into an SVG container must re-namespace.
+    const svgRoot = document.createElementNS(SVG_NS, 'svg');
+    container.appendChild(svgRoot);
+    const tpl = html`<circle cx="5" cy="5" r="3"/>`;
+    stamp(tpl, svgRoot);
+    const circle = svgRoot.querySelector('circle');
+    expect(circle.namespaceURI).toBe(SVG_NS);
+  });
+
+  it('<foreignObject> children REVERT to HTML namespace (per HTML5 spec)', () => {
+    // <foreignObject> is the spec-defined HTML escape hatch inside SVG.
+    // Re-namespacing must stop at the foreignObject boundary; its
+    // children stay HTML-namespaced.
+    const svgRoot = document.createElementNS(SVG_NS, 'svg');
+    container.appendChild(svgRoot);
+    const tpl = html`<foreignObject><div class="html-inside-svg">html content</div></foreignObject>`;
+    stamp(tpl, svgRoot);
+    const fo = svgRoot.querySelector('foreignObject');
+    const innerDiv = svgRoot.querySelector('.html-inside-svg');
+    expect(fo.namespaceURI).toBe(SVG_NS);                        // ✅ foreignObject itself is SVG
+    expect(innerDiv.namespaceURI).toBe('http://www.w3.org/1999/xhtml');  // ✅ children HTML
+  });
+
+  it('MathML <math><mi/></math> inline template stays in MathML namespace via the HTML parser', () => {
+    // Like inline-SVG: the HTML parser enters MathML insertion mode for
+    // <math>, so inline children arrive correctly namespaced even
+    // pre-fix. Post-fix this remains true (no re-namespacing because
+    // the container is HTML).
+    const tpl = html`<math><mi>x</mi></math>`;
+    stamp(tpl, container);
+    const math = container.querySelector('math');
+    const mi = container.querySelector('mi');
+    // happy-dom may or may not surface MathML namespace; smoke that the
+    // elements at least exist and the math element is acknowledged.
+    expect(math).not.toBeNull();
+    expect(mi).not.toBeNull();
+    expect(math.localName).toBe('math');
+  });
+
+  it('does not re-namespace when stamping into an HTML container (no overhead in the common case)', () => {
+    // Probe the discriminator: a plain <div> container should skip the
+    // re-namespacing path entirely. Verify by stamping a template
+    // whose children are HTML elements and confirming they stay HTML.
+    const tpl = html`<p class="probe">html paragraph</p>`;
+    stamp(tpl, container);
+    const p = container.querySelector('p.probe');
+    expect(p.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",