fix(core): fix types for core mixins to inherit Lit/HTMLElement super

.changeset/spicy-pears-attack.md

@@ -0,0 +1,5 @@
+---
+'@lion/core': patch
+---
+
+Added @param JSDocs type annotation to make sure that the superclass types are properly inherited inside the mixins

package.json

@@ -51,6 +51,7 @@
     "@web/test-runner": "^0.7.3",
     "@web/test-runner-browserstack": "^0.1.1",
     "@web/test-runner-playwright": "^0.5.1",
+    "@web/test-runner-puppeteer": "^0.6.1",
     "@webcomponents/webcomponentsjs": "^2.4.4",
     "babel-eslint": "^8.2.6",
     "babel-polyfill": "^6.26.0",

packages/core/src/DelegateMixin.js

@@ -8,10 +8,14 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
 /**
  * @typedef DelegateEvent
  * @property {string} type - Type of event
- * @property {Array<?>} args - Event arguments
+ * @property {EventHandlerNonNull} handler - Event arguments
+ * @property {boolean | AddEventListenerOptions} [opts]
  */
 
-/** @type {DelegateMixin} */
+/**
+ * @type {DelegateMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit-element').LitElement>} superclass
+ */
 const DelegateMixinImplementation = superclass =>
   // eslint-disable-next-line
   class DelegateMixin extends superclass {
@@ -40,9 +44,7 @@ const DelegateMixinImplementation = superclass =>
     }
 
     connectedCallback() {
-      if (super.connectedCallback) {
       super.connectedCallback();
-      }
       this._connectDelegateMixin();
     }
 
@@ -54,18 +56,19 @@ const DelegateMixinImplementation = superclass =>
 
     /**
      * @param {string} type
-     * @param {...Object} args
+     * @param {EventHandlerNonNull} handler
+     * @param {boolean | AddEventListenerOptions} [opts]
      */
-    addEventListener(type, ...args) {
+    addEventListener(type, handler, opts) {
       const delegatedEvents = this.delegations.events;
       if (delegatedEvents.indexOf(type) > -1) {
         if (this.delegationTarget) {
-          this.delegationTarget.addEventListener(type, ...args);
+          this.delegationTarget.addEventListener(type, handler, opts);
         } else {
-          this.__eventsQueue.push({ type, args });
+          this.__eventsQueue.push({ type, handler });
         }
       } else {
-        super.addEventListener(type, ...args);
+        super.addEventListener(type, handler, opts);
       }
     }
 
@@ -163,7 +166,7 @@ const DelegateMixinImplementation = superclass =>
 
     __emptyEventListenerQueue() {
       this.__eventsQueue.forEach(ev => {
-        this.delegationTarget.addEventListener(ev.type, ...ev.args);
+        this.delegationTarget.addEventListener(ev.type, ev.handler, ev.opts);
       });
     }
 

packages/core/src/DisabledMixin.js

@@ -4,9 +4,13 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @typedef {import('../types/DisabledMixinTypes').DisabledMixin} DisabledMixin
  */
 
-/** @type {DisabledMixin} */
+/**
+ * @type {DisabledMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit-element').LitElement>} superclass
+ */
 const DisabledMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow
+  // @ts-expect-error we're overriding private _requestUpdate
   class DisabledMixinHost extends superclass {
     static get properties() {
       return {
@@ -19,23 +23,23 @@ const DisabledMixinImplementation = superclass =>
 
     constructor() {
       super();
-      this.__requestedToBeDisabled = false;
+      this._requestedToBeDisabled = false;
       this.__isUserSettingDisabled = true;
       this.__restoreDisabledTo = false;
       this.disabled = false;
     }
 
     makeRequestToBeDisabled() {
-      if (this.__requestedToBeDisabled === false) {
+      if (this._requestedToBeDisabled === false) {
-        this.__requestedToBeDisabled = true;
+        this._requestedToBeDisabled = true;
         this.__restoreDisabledTo = this.disabled;
         this.__internalSetDisabled(true);
       }
     }
 
     retractRequestToBeDisabled() {
-      if (this.__requestedToBeDisabled === true) {
+      if (this._requestedToBeDisabled === true) {
-        this.__requestedToBeDisabled = false;
+        this._requestedToBeDisabled = false;
         this.__internalSetDisabled(this.__restoreDisabledTo);
       }
     }
@@ -52,12 +56,13 @@ const DisabledMixinImplementation = superclass =>
      * @param {?} oldValue
      */
     _requestUpdate(name, oldValue) {
+      // @ts-expect-error
       super._requestUpdate(name, oldValue);
       if (name === 'disabled') {
         if (this.__isUserSettingDisabled) {
           this.__restoreDisabledTo = this.disabled;
         }
-        if (this.disabled === false && this.__requestedToBeDisabled === true) {
+        if (this.disabled === false && this._requestedToBeDisabled === true) {
           this.__internalSetDisabled(true);
         }
       }

packages/core/src/DisabledWithTabIndexMixin.js

@@ -5,9 +5,13 @@ import { DisabledMixin } from './DisabledMixin.js';
  * @typedef {import('../types/DisabledWithTabIndexMixinTypes').DisabledWithTabIndexMixin} DisabledWithTabIndexMixin
  */
 
-/** @type {DisabledWithTabIndexMixin} */
+/**
+ * @type {DisabledWithTabIndexMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit-element').LitElement>} superclass
+ */
 const DisabledWithTabIndexMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow
+  // @ts-expect-error we're overriding private _requestUpdate
   class DisabledWithTabIndexMixinHost extends DisabledMixin(superclass) {
     static get properties() {
       return {
@@ -31,14 +35,14 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
 
     makeRequestToBeDisabled() {
       super.makeRequestToBeDisabled();
-      if (this.__requestedToBeDisabled === false && this.tabIndex != null) {
+      if (this._requestedToBeDisabled === false && this.tabIndex != null) {
         this.__restoreTabIndexTo = this.tabIndex;
       }
     }
 
     retractRequestToBeDisabled() {
       super.retractRequestToBeDisabled();
-      if (this.__requestedToBeDisabled === true) {
+      if (this._requestedToBeDisabled === true) {
         this.__internalSetTabIndex(this.__restoreTabIndexTo);
       }
     }
@@ -57,6 +61,7 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
      * @param {?} oldValue
      */
     _requestUpdate(name, oldValue) {
+      // @ts-expect-error
       super._requestUpdate(name, oldValue);
 
       if (name === 'disabled') {
@@ -72,7 +77,7 @@ const DisabledWithTabIndexMixinImplementation = superclass =>
           this.__restoreTabIndexTo = this.tabIndex;
         }
 
-        if (this.tabIndex !== -1 && this.__requestedToBeDisabled === true) {
+        if (this.tabIndex !== -1 && this._requestedToBeDisabled === true) {
           this.__internalSetTabIndex(-1);
         }
       }

packages/core/src/SlotMixin.js

@@ -6,7 +6,10 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @typedef {import('../types/SlotMixinTypes').SlotsMap} SlotsMap
  */
 
-/** @type {SlotMixin} */
+/**
+ * @type {SlotMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<HTMLElement>} superclass
+ */
 const SlotMixinImplementation = superclass =>
   // eslint-disable-next-line no-unused-vars, no-shadow
   class SlotMixinHost extends superclass {
@@ -23,7 +26,9 @@ const SlotMixinImplementation = superclass =>
     }
 
     connectedCallback() {
+      // @ts-ignore checking this in case we pass LitElement, found no good way to type this...
       if (super.connectedCallback) {
+        // @ts-ignore checking this in case we pass LitElement, found no good way to type this...
         super.connectedCallback();
       }
       this._connectSlotMixin();

packages/core/src/UpdateStylesMixin.js

@@ -6,7 +6,10 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  * @typedef {import('../types/UpdateStylesMixinTypes').StylesMap} StylesMap
  */
 
-/** @type {UpdateStylesMixin} */
+/**
+ * @type {UpdateStylesMixin}
+ * @param {import('@open-wc/dedupe-mixin').Constructor<HTMLElement>} superclass
+ */
 const UpdateStylesMixinImplementation = superclass =>
   // eslint-disable-next-line no-shadow
   class UpdateStylesMixinHost extends superclass {

packages/core/test/SlotMixin.test.js

@@ -1,5 +1,4 @@
-import { expect, fixture, defineCE } from '@open-wc/testing';
+import { defineCE, expect, fixture } from '@open-wc/testing';
-
 import { SlotMixin } from '../src/SlotMixin.js';
 
 describe('SlotMixin', () => {

packages/core/types/DisabledMixinTypes.d.ts

@@ -21,6 +21,7 @@ export declare class DisabledMixinHost {
   public retractRequestToBeDisabled(): void;
 
   private __internalSetDisabled(value: boolean): void;
+  protected _requestedToBeDisabled: boolean;
 }
 
 export declare function DisabledMixinImplementation<T extends Constructor<LitElement>>(

yarn.lock

@@ -2388,7 +2388,7 @@
   dependencies:
     "@types/puppeteer" "*"
 
-"@types/puppeteer@*":
+"@types/puppeteer@*", "@types/puppeteer@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-3.0.1.tgz#053ec20facc162b25a64785affccaa3e5817c607"
   integrity sha512-t03eNKCvWJXhQ8wkc5C6GYuSqMEdKLOX0GLMGtks25YZr38wKZlKTwGM/BoAPVtdysX7Bb9tdwrDS1+NrW3RRA==
@@ -2667,6 +2667,16 @@
     "@web/test-runner-coverage-v8" "^0.1.1"
     playwright "^1.3.0"
 
+"@web/test-runner-puppeteer@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@web/test-runner-puppeteer/-/test-runner-puppeteer-0.6.1.tgz#6a74e75f8a0251a8baa3044708eaee053ca21784"
+  integrity sha512-1tZmBEJoUmnDYnbvvuAZFwFelXN6dhAxmdYc/RfKhm274Q00pMO5Dk+0sLYPdpSA5MKu673wMSlsldhBe1zClw==
+  dependencies:
+    "@types/puppeteer" "^3.0.1"
+    "@web/test-runner-chrome" "^0.6.1"
+    "@web/test-runner-core" "^0.7.1"
+    puppeteer "^5.1.0"
+
 "@web/test-runner-selenium@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@web/test-runner-selenium/-/test-runner-selenium-0.2.1.tgz#d9ffdf39152586b49389f82b358bc2dae3d659d9"
@@ -9357,6 +9367,24 @@ puppeteer-core@^5.0.0:
     unbzip2-stream "^1.3.3"
     ws "^7.2.3"
 
+puppeteer@^5.1.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-5.2.1.tgz#7f0564f0a5384f352a38c8cc42af875cd87f4ea6"
+  integrity sha512-PZoZG7u+T6N1GFWBQmGVG162Ak5MAy8nYSVpeeQrwJK2oYUlDWpHEJPcd/zopyuEMTv7DiztS1blgny1txR2qw==
+  dependencies:
+    debug "^4.1.0"
+    devtools-protocol "0.0.781568"
+    extract-zip "^2.0.0"
+    https-proxy-agent "^4.0.0"
+    mime "^2.0.3"
+    pkg-dir "^4.2.0"
+    progress "^2.0.1"
+    proxy-from-env "^1.0.0"
+    rimraf "^3.0.2"
+    tar-fs "^2.0.0"
+    unbzip2-stream "^1.3.3"
+    ws "^7.2.3"
+
 q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"