@lion/ui 0.8.1 → 0.8.2

package/components/calendar/src/LionCalendar.js

@@ -369,6 +369,12 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
+  /**
+   * // TODO: check if this is a false positive or if we can improve
+   * @configure ReactiveElement
+   */
+  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
   /**
    * @private
    */

package/components/core/src/DisabledWithTabIndexMixin.js

@@ -49,6 +49,13 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
       }
     }
 
+    /**
+     * // TODO: check if this is a false positive or if we can improve
+     * @configure ReactiveElement
+     */
+    // @ts-expect-error
+    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
     /**
      * @param {number} value
      * @private

package/components/core/src/ScopedElementsMixin.js

@@ -1,6 +1,31 @@
-/*
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { adoptStyles, isServer } from 'lit';
+import { ScopedElementsMixin as OpenWcLitScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+
+/**
+ * @typedef {import('../../form-core/types/validate/ValidateMixinTypes.js').ScopedElementsMap} ScopedElementsMap
+ * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
+ * @typedef {import('@open-wc/scoped-elements/lit-element.js').ScopedElementsHost} ScopedElementsHost
+ * @typedef {import('./types.js').ScopedElementsHostV2Constructor} ScopedElementsHostV2Constructor
+ * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
+ * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
+ * @typedef {typeof import('lit').LitElement} TypeofLitElement
+ * @typedef {import('lit').LitElement} LitElement
+ */
+
+export function supportsScopedRegistry() {
+  return Boolean(
+    // @ts-expect-error
+    globalThis.ShadowRoot?.prototype.createElement && globalThis.ShadowRoot?.prototype.importNode,
+  );
+}
+
+/**
  * This file is combination of '@open-wc/scoped-elements@v3/lit-element.js' and '@open-wc/scoped-elements@v3/html-element.js'.
  * Then on top of those, some code from '@open-wc/scoped-elements@v2' is brought to to make polyfill not mandatory.
+ * This can be a great help for ssr scenarios, allowing elements to be consumed without needing knowledge about internall
+ * consumption.
+ * (N.B. at this point in time, this is limited to the scenario where there's one version of lion on the page).
  *
  * ## Considerations
  * In its current state, the [scoped-custom-element-registry](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) draft spec has uncertainties:
@@ -21,29 +46,7 @@
  * This can be beneficial for performance, bundle size, ease of use and SSR capabilities.
  *
  * We will keep a close eye on developments in spec and polyfill, and will re-evaluate the scoped-elements approach when the time is right.
- */
-
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
-import { adoptStyles } from 'lit';
-import { ScopedElementsMixin as OpenWcLitScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
-
-/**
- * @typedef {import('@open-wc/scoped-elements/lit-element.js').ScopedElementsHost} ScopedElementsHost
- * @typedef {import('../../form-core/types/validate/ValidateMixinTypes.js').ScopedElementsMap} ScopedElementsMap
- * @typedef {import('lit').CSSResultOrNative} CSSResultOrNative
- * @typedef {import('lit').LitElement} LitElement
- * @typedef {typeof import('lit').LitElement} TypeofLitElement
- * @typedef {import('@open-wc/dedupe-mixin').Constructor<LitElement>} LitElementConstructor
- * @typedef {import('@open-wc/dedupe-mixin').Constructor<ScopedElementsHost>} ScopedElementsHostConstructor
- * @typedef {import('./types.js').ScopedElementsHostV2Constructor} ScopedElementsHostV2Constructor
- */
-
-const supportsScopedRegistry = Boolean(
-  // @ts-expect-error
-  ShadowRoot.prototype.createElement && ShadowRoot.prototype.importNode,
-);
-
-/**
+ *
  * @template {LitElementConstructor} T
  * @param {T} superclass
  * @return {T & ScopedElementsHostConstructor & ScopedElementsHostV2Constructor}
@@ -51,8 +54,29 @@ const supportsScopedRegistry = Boolean(
 const ScopedElementsMixinImplementation = superclass =>
   /** @type {ScopedElementsHost} */
   class ScopedElementsHost extends OpenWcLitScopedElementsMixin(superclass) {
+    constructor() {
+      super();
+
+      if (isServer) {
+        // We are on the server: this means we can't support scoped registries...
+        // So we must treat it like the "no-polyfill scenario", that registers scoped
+        // elements used for internal composition on the global registry.
+        // On the client that would happen in connectedCallback, so we do it here...
+        // N.B. keep in mind that this does not work when we have multiple element (versions)
+        // with the same name. (like multiple versions of lion extension layers).
+        // If we want to support this, we must re-introduce the shim-behavior of ScopedElementsMixin v1
+        // to make this work with ssr as well.
+        // @ts-expect-error
+        this.registry = customElements;
+        // @ts-expect-error
+        for (const [name, klass] of Object.entries(this.constructor.scopedElements || {})) {
+          this.defineScopedElement(name, klass);
+        }
+      }
+    }
+
     createScopedElement(/** @type {string} */ tagName) {
-      const root = supportsScopedRegistry ? this.shadowRoot : document;
+      const root = supportsScopedRegistry() ? this.shadowRoot : document;
       // @ts-expect-error polyfill to support createElement on shadowRoot is loaded
       return root.createElement(tagName);
     }
@@ -61,12 +85,12 @@ const ScopedElementsMixinImplementation = superclass =>
      * Defines a scoped element.
      *
      * @param {string} tagName
-     * @param {typeof HTMLElement} klass
+     * @param {typeof HTMLElement} classToBeRegistered
      */
-    defineScopedElement(tagName, klass) {
-      // @ts-ignore
+    defineScopedElement(tagName, classToBeRegistered) {
       const registeredClass = this.registry.get(tagName);
-      if (registeredClass && supportsScopedRegistry === false && registeredClass !== klass) {
+      const isAlreadyRegistered = registeredClass && registeredClass === classToBeRegistered;
+      if (isAlreadyRegistered && !supportsScopedRegistry()) {
         // eslint-disable-next-line no-console
         console.error(
           [
@@ -80,10 +104,8 @@ const ScopedElementsMixinImplementation = superclass =>
         );
       }
       if (!registeredClass) {
-        // @ts-ignore
-        return this.registry.define(tagName, klass);
+        return this.registry.define(tagName, classToBeRegistered);
       }
-      // @ts-ignore
       return this.registry.get(tagName);
     }
 
@@ -92,12 +114,12 @@ const ScopedElementsMixinImplementation = superclass =>
      * @returns {ShadowRoot}
      */
     attachShadow(options) {
-      // @ts-ignore
+      // @ts-expect-error
       const { scopedElements } = /** @type {typeof ScopedElementsHost} */ (this.constructor);
 
       const shouldCreateRegistry =
         !this.registry ||
-        // @ts-ignore
+        // @ts-expect-error
         (this.registry === this.constructor.__registry &&
           !Object.prototype.hasOwnProperty.call(this.constructor, '__registry'));
 
@@ -108,8 +130,7 @@ const ScopedElementsMixinImplementation = superclass =>
        * This is important specifically for superclasses/inheritance
        */
       if (shouldCreateRegistry) {
-        // @ts-ignore
-        this.registry = supportsScopedRegistry ? new CustomElementRegistry() : customElements;
+        this.registry = supportsScopedRegistry() ? new CustomElementRegistry() : customElements;
         for (const [tagName, klass] of Object.entries(scopedElements ?? {})) {
           this.defineScopedElement(tagName, klass);
         }
@@ -131,7 +152,7 @@ const ScopedElementsMixinImplementation = superclass =>
       );
 
       const createdRoot = this.attachShadow(shadowRootOptions);
-      if (supportsScopedRegistry) {
+      if (supportsScopedRegistry()) {
         // @ts-expect-error
         this.renderOptions.creationScope = createdRoot;
       }

package/components/core/test/ScopedElementsMixin.test.js

@@ -0,0 +1,131 @@
+import { expect, fixture } from '@open-wc/testing';
+import {
+  ssrNonHydratedFixture,
+  ssrHydratedFixture,
+  csrFixture,
+} from '@lit-labs/testing/fixtures.js';
+import { LitElement, html } from 'lit';
+import sinon from 'sinon';
+import { browserDetection } from '../src/browserDetection.js';
+
+import { ScopedElementsMixin, supportsScopedRegistry } from '../src/ScopedElementsMixin.js';
+
+const hasRealScopedRegistrySupport = supportsScopedRegistry();
+const originalShadowRootProps = {
+  // @ts-expect-error
+  createElement: globalThis.ShadowRoot?.prototype.createElement,
+  // @ts-expect-error
+  importNode: globalThis.ShadowRoot?.prototype.importNode,
+};
+
+// Even though the polyfill might be loaded in this test or we run it in a browser supporting these features,
+// we mock "no support", so that `supportsScopedRegistry()` returns false inside ScopedElementsMixin..
+function mockNoRegistrySupport() {
+  // Are we on a server or do we have no polyfill? Nothing to be done here...
+  if (!hasRealScopedRegistrySupport) return;
+
+  // This will be enough to make the `supportsScopedRegistry()` check fail inside ScopedElementsMixin and bypass scoped registries
+  globalThis.ShadowRoot = globalThis.ShadowRoot || { prototype: {} };
+  // @ts-expect-error
+  globalThis.ShadowRoot.prototype.createElement = null;
+}
+
+mockNoRegistrySupport.restore = () => {
+  // Are we on a server or do we have no polyfill? Nothing to be done here...
+  if (!hasRealScopedRegistrySupport) return;
+
+  // @ts-expect-error
+  globalThis.ShadowRoot.prototype.createElement = originalShadowRootProps.createElement;
+  // @ts-expect-error
+  globalThis.ShadowRoot.prototype.importNode = originalShadowRootProps.importNode;
+};
+
+class ScopedElementsChild extends LitElement {
+  render() {
+    return html`<span>I'm a child</span>`;
+  }
+}
+
+class ScopedElementsHost extends ScopedElementsMixin(LitElement) {
+  static scopedElements = { 'scoped-elements-child': ScopedElementsChild };
+
+  render() {
+    return html`<scoped-elements-child></scoped-elements-child>`;
+  }
+}
+customElements.define('scoped-elements-host', ScopedElementsHost);
+
+describe('ScopedElementsMixin', () => {
+  it('renders child elements correctly (that were not registered yet on global registry)', async () => {
+    // customElements.define('scoped-elements-child', ScopedElementsChild);
+    for (const _fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
+      const el = await _fixture(html`<scoped-elements-host></scoped-elements-host>`, {
+        // we must provide modules atm
+        modules: ['./ssr-definitions/ScopedElementsHost.define.js'],
+      });
+
+      // Wait for FF support
+      if (!browserDetection.isFirefox) {
+        expect(
+          el.shadowRoot?.querySelector('scoped-elements-child')?.shadowRoot?.innerHTML,
+        ).to.contain("<span>I'm a child</span>");
+      }
+
+      // @ts-expect-error
+      expect(el.registry.get('scoped-elements-child')).to.not.be.undefined;
+    }
+  });
+
+  describe('When scoped registries are supported', () => {
+    it('registers elements on local registry', async () => {
+      const ceDefineSpy = sinon.spy(customElements, 'define');
+
+      const el = /** @type {ScopedElementsHost} */ (
+        await fixture(html`<scoped-elements-host></scoped-elements-host>`)
+      );
+
+      // @ts-expect-error
+      expect(el.registry.get('scoped-elements-child')).to.equal(ScopedElementsChild);
+      expect(el.registry).to.not.equal(customElements);
+      expect(ceDefineSpy.calledWith('scoped-elements-child')).to.be.false;
+
+      ceDefineSpy.restore();
+    });
+  });
+
+  describe('When scoped registries are not supported', () => {
+    class ScopedElementsChildNoReg extends LitElement {
+      render() {
+        return html`<span>I'm a child</span>`;
+      }
+    }
+
+    class ScopedElementsHostNoReg extends ScopedElementsMixin(LitElement) {
+      static scopedElements = { 'scoped-elements-child-no-reg': ScopedElementsChildNoReg };
+
+      render() {
+        return html`<scoped-elements-child-no-reg></scoped-elements-child-no-reg>`;
+      }
+    }
+    before(() => {
+      mockNoRegistrySupport();
+      customElements.define('scoped-elements-host-no-reg', ScopedElementsHostNoReg);
+    });
+
+    after(() => {
+      mockNoRegistrySupport.restore();
+    });
+
+    it('registers elements', async () => {
+      const ceDefineSpy = sinon.spy(customElements, 'define');
+
+      const el = /** @type {ScopedElementsHostNoReg} */ (
+        await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
+      );
+
+      expect(el.registry).to.equal(customElements);
+      expect(ceDefineSpy.calledWith('scoped-elements-child-no-reg')).to.be.true;
+      ceDefineSpy.restore();
+    });
+  });
+});

package/components/core/test/ssr-definitions/ScopedElementsHost.define.js

@@ -0,0 +1 @@
+// ... empty file needed for '@lit-labs/testing/fixtures.js'

package/components/form-core/src/FormControlMixin.js

@@ -152,6 +152,12 @@ const FormControlMixinImplementation = superclass =>
       return /** @type {LionValidationFeedback} */ (this.__getDirectSlotChild('feedback'));
     }
 
+    /**
+     * TODO: check if this is a false positive or if we can improve
+     * @configure ReactiveElement
+     */
+    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
     constructor() {
       super();
 

package/components/form-core/src/utils/SyncUpdatableMixin.js

@@ -56,6 +56,13 @@ const SyncUpdatableMixinImplementation = superclass =>
       this.__SyncUpdatableNamespace.connected = false;
     }
 
+    /**
+     * // TODO: check if this is a false positive or if we can improve
+     * @configure ReactiveElement
+     */
+    // @ts-expect-error
+    static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
     /**
      * Makes the propertyAccessor.`hasChanged` compatible in synchronous updates
      * @param {string} name

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { LocalizeMixin } from '@lion/ui/localize-no-side-effects.js';
 import { localizeNamespaceLoader } from '../localizeNamespaceLoader.js';
 
@@ -90,7 +90,9 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
       this.feedbackData.map(
         ({ message, type, validator }) => html`
           <div class="validation-feedback__type">
-            ${this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)}
+            ${message && type
+              ? this._localizeManager.msg(`lion-form-core:validation${capitalize(type)}`)
+              : nothing}
           </div>
           ${this._messageTemplate({ message, type, validator })}
         `,

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -91,6 +91,18 @@ describe('lion-validation-feedback', () => {
     expect(validationFeedbackType?.textContent?.trim()).to.equal('Info');
   });
 
+  it('it does not share the type if there is no message', async () => {
+    const el = /** @type {LionValidationFeedback} */ (
+      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
+    );
+
+    el.feedbackData = [{ message: '', type: 'error', validator: new AlwaysInvalid() }];
+    await el.updateComplete;
+
+    const validationFeedbackType = el.shadowRoot?.querySelector('.validation-feedback__type');
+    expect(validationFeedbackType?.textContent?.trim()).to.not.equal('Error');
+  });
+
   describe('accessibility', () => {
     it('passes a11y audit when with a message', async () => {
       const el = /** @type {LionValidationFeedback} */ (

package/components/icon/src/LionIcon.js

@@ -102,6 +102,12 @@ export class LionIcon extends LitElement {
     this.__svg = nothing;
   }
 
+  /**
+   * TODO: check if this is a false positive or if we can improve
+   * @configure ReactiveElement
+   */
+  static enabledWarnings = super.enabledWarnings?.filter(w => w !== 'change-in-update') || [];
+
   /** @param {import('lit').PropertyValues} changedProperties */
   update(changedProperties) {
     super.update(changedProperties);