@lion/ui 0.0.2 → 0.0.4

package/components/core/test/SlotMixin.test.js

@@ -1,14 +1,25 @@
 import sinon from 'sinon';
-import { defineCE, expect, fixture } from '@open-wc/testing';
+import { defineCE, expect, fixture, unsafeStatic, html } from '@open-wc/testing';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { SlotMixin } from '@lion/ui/core.js';
-import { LitElement, html } from 'lit';
+import { LitElement } from 'lit';
 
+/**
+ * @typedef {import('../types/SlotMixinTypes.js').SlotHost} SlotHost
+ */
+
+const mockedRenderTarget = document.createElement('div');
 function mockScopedRegistry() {
+  const outputObj = { createElementCallCount: 0 };
   // @ts-expect-error wait for browser support
-  ShadowRoot.prototype.createElement = () => {};
+  ShadowRoot.prototype.createElement = () => {
+    outputObj.createElementCallCount += 1;
+    // Return an element that lit can use as render target
+    return mockedRenderTarget;
+  };
   // @ts-expect-error wait for browser support
   window.CustomElementRegistry = class {};
+  return outputObj;
 }
 
 function unMockScopedRegistry() {
@@ -19,7 +30,7 @@ function unMockScopedRegistry() {
 }
 
 describe('SlotMixin', () => {
-  it('inserts provided element into lightdom and sets slot', async () => {
+  it('inserts provided element into light dom and sets slot', async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {
         get slots() {
@@ -34,7 +45,7 @@ describe('SlotMixin', () => {
     expect(el.children[0].slot).to.equal('feedback');
   });
 
-  it("supports unnamed slot with ''", async () => {
+  it("supports default slot with ''", async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {
         get slots() {
@@ -50,7 +61,7 @@ describe('SlotMixin', () => {
     expect(el.children[0]).dom.to.equal('<div></div>');
   });
 
-  it('supports unnamed slot in conjunction with named slots', async () => {
+  it('supports default slot in conjunction with named slots', async () => {
     const tag = defineCE(
       class extends SlotMixin(LitElement) {
         get slots() {
@@ -104,63 +115,6 @@ describe('SlotMixin', () => {
     expect(slot.innerText).to.equal('');
   });
 
-  it('supports complex dom trees as element', async () => {
-    const tag = defineCE(
-      class extends SlotMixin(LitElement) {
-        constructor() {
-          super();
-          this.foo = 'bar';
-        }
-
-        get slots() {
-          return {
-            ...super.slots,
-            feedback: () => {
-              const el = document.createElement('div');
-              el.setAttribute('foo', this.foo);
-              const subEl = document.createElement('p');
-              subEl.innerText = 'cat';
-              el.appendChild(subEl);
-              return el;
-            },
-          };
-        }
-      },
-    );
-    const el = await fixture(`<${tag}></${tag}>`);
-    expect(el.children[0].slot).to.equal('feedback');
-    expect(el.children[0].getAttribute('foo')).to.equal('bar');
-    expect(/** @type HTMLParagraphElement */ (el.children[0].children[0]).innerText).to.equal(
-      'cat',
-    );
-  });
-
-  it('supports conditional slots', async () => {
-    let renderSlot = true;
-    const tag = defineCE(
-      class extends SlotMixin(LitElement) {
-        get slots() {
-          return {
-            ...super.slots,
-            conditional: () => {
-              if (renderSlot) {
-                const el = document.createElement('div');
-                el.id = 'someSlot';
-                return el;
-              }
-              return undefined;
-            },
-          };
-        }
-      },
-    );
-    const elSlot = await fixture(`<${tag}><${tag}>`);
-    expect(elSlot.querySelector('#someSlot')).to.exist;
-    renderSlot = false;
-    const elNoSlot = await fixture(`<${tag}><${tag}>`);
-    expect(elNoSlot.querySelector('#someSlot')).to.not.exist;
-  });
-
   it("allows to check which slots have been created via this._isPrivateSlot('slotname')", async () => {
     let renderSlot = true;
     class SlotPrivateText extends SlotMixin(LitElement) {
@@ -188,102 +142,358 @@ describe('SlotMixin', () => {
     expect(elNoSlot.didCreateConditionalSlot()).to.be.false;
   });
 
-  it('supports templates', async () => {
-    const tag = defineCE(
-      class extends SlotMixin(LitElement) {
-        get slots() {
-          return {
-            ...super.slots,
-            template: () => html`<span>text</span>`,
-          };
-        }
+  describe('Rerender', () => {
+    it('supports rerender when SlotRerenderObject provided', async () => {
+      const tag = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
 
-        render() {
-          return html`<slot name="template"></slot>`;
-        }
-      },
-    );
-    const el = await fixture(`<${tag}></${tag}>`);
-    const slot = /** @type HTMLSpanElement */ (
-      Array.from(el.children).find(elm => elm.slot === 'template')
-    );
-    expect(slot.slot).to.equal('template');
-    expect(slot.tagName).to.equal('SPAN');
-  });
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
 
-  // TODO: @Thijs is this still needed?
-  it.skip('supports scoped elements when polyfill loaded', async () => {
-    mockScopedRegistry();
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => ({ template: html`<span>${this.currentValue}</span> ` }),
+            };
+          }
 
-    class ScopedEl extends LitElement {}
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
 
-    const tag = defineCE(
-      class extends ScopedElementsMixin(SlotMixin(LitElement)) {
-        static get scopedElements() {
-          return {
+          get _templateNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'template')
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
+      await el.updateComplete;
+
+      expect(el._templateNode.slot).to.equal('template');
+      expect(el._templateNode.textContent?.trim()).to.equal('0');
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(el._templateNode.textContent?.trim()).to.equal('1');
+    });
+
+    it('keeps focus after rerender', async () => {
+      const tag = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
+
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              'focusable-node': () => ({
+                template: html`<input /> `,
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="focusable-node"></slot>`;
+          }
+
+          get _focusableNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'focusable-node')
+                ?.firstElementChild
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
+
+      el._focusableNode.focus();
+      expect(document.activeElement).to.equal(el._focusableNode);
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(document.activeElement).to.equal(el._focusableNode);
+    });
+
+    it('keeps focus after rerendering complex shadow root into slot', async () => {
+      const complexSlotTagName = defineCE(
+        class extends LitElement {
+          render() {
+            return html`
+              <input />
+              <button>I will be focused</button>
+            `;
+          }
+
+          get _buttonNode() {
             // @ts-expect-error
-            ...super.scopedElements,
-            'scoped-el': ScopedEl,
-          };
-        }
+            return this.shadowRoot.querySelector('button');
+          }
+        },
+      );
 
-        get slots() {
-          return {
-            ...super.slots,
-            template: () => html`<scoped-el></scoped-el>`,
-          };
-        }
+      const complexSlotTag = unsafeStatic(complexSlotTagName);
 
-        render() {
-          return html`<slot name="template"></slot>`;
-        }
-      },
-    );
+      const tagName = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
 
-    let error = '';
-    try {
-      // @ts-ignore
-      await fixture(html`<${tag}></${tag}>`, { scopedElements: true });
-    } catch (e) {
-      // @ts-ignore
-      error = e.toString();
-    }
-    // it throws when it uses our temp mock (error is browser specific, so we check overlapping part)
-    expect(error).to.include('.importNode is not a function');
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              'focusable-node': () => ({
+                template: html`<${complexSlotTag}> </${complexSlotTag}> `,
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="focusable-node"></slot>`;
+          }
+
+          get _focusableNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'focusable-node')
+                ?.firstElementChild
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tagName}></${tagName}>`));
 
-    unMockScopedRegistry();
+      el._focusableNode._buttonNode.focus();
+
+      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(document.activeElement).to.equal(el._focusableNode);
+      expect(el._focusableNode.shadowRoot.activeElement).to.equal(el._focusableNode._buttonNode);
+    });
   });
 
-  it('does not scope elements when polyfill not loaded', async () => {
-    class ScopedEl extends LitElement {}
+  describe('SlotFunctionResult types', () => {
+    it('supports complex dom trees as element (type "Element")', async () => {
+      const tag = defineCE(
+        class extends SlotMixin(LitElement) {
+          constructor() {
+            super();
+            this.foo = 'bar';
+          }
 
-    const tag = defineCE(
-      class extends ScopedElementsMixin(SlotMixin(LitElement)) {
-        static get scopedElements() {
-          return {
-            // @ts-expect-error
-            ...super.scopedElements,
-            'scoped-el': ScopedEl,
-          };
-        }
+          get slots() {
+            return {
+              ...super.slots,
+              feedback: () => {
+                const el = document.createElement('div');
+                el.setAttribute('foo', this.foo);
+                const subEl = document.createElement('p');
+                subEl.innerText = 'cat';
+                el.appendChild(subEl);
+                return el;
+              },
+            };
+          }
+        },
+      );
+      const el = await fixture(`<${tag}></${tag}>`);
+      expect(el.children[0].slot).to.equal('feedback');
+      expect(el.children[0].getAttribute('foo')).to.equal('bar');
+      expect(/** @type HTMLParagraphElement */ (el.children[0].children[0]).innerText).to.equal(
+        'cat',
+      );
+    });
 
-        get slots() {
-          return {
-            ...super.slots,
-            template: () => html`<scoped-el></scoped-el>`,
-          };
-        }
+    it('supports conditional slots (type "undefined")', async () => {
+      let renderSlot = true;
+      const tag = defineCE(
+        class extends SlotMixin(LitElement) {
+          get slots() {
+            return {
+              ...super.slots,
+              conditional: () => {
+                if (renderSlot) {
+                  const el = document.createElement('div');
+                  el.id = 'someSlot';
+                  return el;
+                }
+                return undefined;
+              },
+            };
+          }
+        },
+      );
+      const elSlot = await fixture(`<${tag}><${tag}>`);
+      expect(elSlot.querySelector('#someSlot')).to.exist;
+      renderSlot = false;
+      const elNoSlot = await fixture(`<${tag}><${tag}>`);
+      expect(elNoSlot.querySelector('#someSlot')).to.not.exist;
+    });
 
-        render() {
-          return html`<slot name="template"></slot>`;
-        }
-      },
-    );
+    it('supports templates (type "TemplateResult")', async () => {
+      const tag = defineCE(
+        class extends SlotMixin(LitElement) {
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => html`<span>text</span>`,
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+        },
+      );
+      const el = await fixture(`<${tag}></${tag}>`);
+      const slot = /** @type HTMLSpanElement */ (
+        Array.from(el.children).find(elm => elm.slot === 'template')
+      );
+      expect(slot.slot).to.equal('template');
+      expect(slot.tagName).to.equal('SPAN');
+    });
+
+    it('supports afterRender logic (type "{ template:TemplateResults; afterRender: Function}" )', async () => {
+      let varThatProvesAfterRenderIsCalled = 'not called';
+
+      const tag = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { currentValue: Number };
+
+          constructor() {
+            super();
+            this.currentValue = 0;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => ({
+                template: html`<span>${this.currentValue}</span>, `,
+                afterRender: () => {
+                  varThatProvesAfterRenderIsCalled = 'called';
+                },
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+
+          get _templateNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'template')?.firstElementChild
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tag}></${tag}>`));
+      expect(el._templateNode.textContent).to.equal('0');
+
+      el.currentValue = 1;
+      await el.updateComplete;
+
+      expect(varThatProvesAfterRenderIsCalled).to.equal('called');
+      expect(el._templateNode.textContent).to.equal('1');
+    });
+  });
+
+  describe('Scoped Registries', () => {
+    it('supports scoped elements when polyfill loaded', async () => {
+      const outputObj = mockScopedRegistry();
+
+      class ScopedEl extends LitElement {}
+
+      const tagName = defineCE(
+        class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+          static get scopedElements() {
+            return {
+              // @ts-expect-error
+              ...super.scopedElements,
+              'scoped-elm': ScopedEl,
+            };
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => html`<scoped-elm></scoped-elm>`,
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+        },
+      );
+
+      const tag = unsafeStatic(tagName);
+      await fixture(html`<${tag}></${tag}>`);
+
+      expect(outputObj.createElementCallCount).to.equal(1);
+
+      unMockScopedRegistry();
+    });
+
+    it('does not scope elements when polyfill not loaded', async () => {
+      class ScopedEl extends LitElement {}
+
+      const tagName = defineCE(
+        class extends ScopedElementsMixin(SlotMixin(LitElement)) {
+          static get scopedElements() {
+            return {
+              // @ts-expect-error
+              ...super.scopedElements,
+              'scoped-el': ScopedEl,
+            };
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              template: () => html`<scoped-el></scoped-el>`,
+            };
+          }
+
+          render() {
+            return html`<slot name="template"></slot>`;
+          }
+        },
+      );
+
+      const renderTarget = document.createElement('div');
+      const el = document.createElement(tagName);
+
+      // We don't use fixture, so we limit the amount of calls to document.createElement
+      const docSpy = sinon.spy(document, 'createElement');
+      document.body.appendChild(renderTarget);
+      renderTarget.appendChild(el);
+
+      expect(docSpy.callCount).to.equal(2);
 
-    const docSpy = sinon.spy(document, 'createElement');
-    await fixture(html`<${tag}></${tag}>`);
-    // one for the fixture, one for the scoped slot
-    expect(docSpy).to.have.been.calledTwice;
-    docSpy.restore();
+      document.body.removeChild(renderTarget);
+      docSpy.restore();
+    });
   });
 });

package/components/core/types/SlotMixinTypes.ts

@@ -1,7 +1,18 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 import { TemplateResult, LitElement } from 'lit';
 
-declare function slotFunction(): HTMLElement | Node[] | TemplateResult | undefined;
+/**
+ * Implicitly creates a wrapper node that allows for rerenders
+ */
+export type SlotRerenderObject = {
+  template: TemplateResult;
+  /* Add logic that will be performed after the render */
+  afterRender?: Function;
+};
+
+export type SlotFunctionResult = TemplateResult | Element | SlotRerenderObject | undefined;
+
+declare function slotFunction(): SlotFunctionResult;
 
 export type SlotsMap = {
   [key: string]: typeof slotFunction;

package/components/input-tel/src/LionInputTel.js

@@ -305,20 +305,11 @@ export class LionInputTel extends LocalizeMixin(LionInput) {
     // This should trigger a rerender in shadow dom
     this._phoneUtil = /** @type {AwesomePhoneNumber} */ (PhoneUtilManager.PhoneUtil);
     // This should trigger a rerender in light dom
-    this._scheduleLightDomRender();
     // Format when libPhoneNumber is loaded
     this._calculateValues({ source: null });
     this.__calculateActiveRegion();
   }
 
-  /**
-   * This allows to hook into the update hook
-   * @protected
-   */
-  _scheduleLightDomRender() {
-    this._needsLightDomRender += 1;
-  }
-
   /**
    * @private
    */