@vaadin/component-base - npm Package Compare versions

Comparing version 25.3.0-alpha6 to 25.3.0-alpha7

package.json

 {
   "name": "@vaadin/component-base",
-  "version": "25.3.0-alpha6",
+  "version": "25.3.0-alpha7",
   "publishConfig": {
@@ -41,4 +41,4 @@ "access": "public"
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.3.0-alpha6",
-    "@vaadin/test-runner-commands": "25.3.0-alpha6",
+    "@vaadin/chai-plugins": "25.3.0-alpha7",
+    "@vaadin/test-runner-commands": "25.3.0-alpha7",
     "@vaadin/testing-helpers": "^2.0.0",
@@ -48,3 +48,3 @@ "sinon": "^22.0.0"
   "customElements": "custom-elements.json",
-  "gitHead": "92c124fb9cff367bc07e734d8e65707facd0bd43"
+  "gitHead": "ae7b9823df5598faebd7a482993029ee489c35ae"
 }

src/define.js

@@ -16,3 +16,3 @@ /**
 
-export function defineCustomElement(CustomElement, version = '25.3.0-alpha6') {
+export function defineCustomElement(CustomElement, version = '25.3.0-alpha7') {
   Object.defineProperty(CustomElement, 'version', {
@@ -19,0 +19,0 @@ get() {

src/media-query-controller.js

@@ -11,2 +11,5 @@ /**
 export class MediaQueryController {
+  /** @type {MediaQueryList | null} */
+  #mediaQuery = null;
+
   constructor(query, callback) {
@@ -28,42 +31,37 @@ /**
     this.callback = callback;
-
-    this._boundQueryHandler = this._queryHandler.bind(this);
   }
 
   hostConnected() {
-    this._removeListener();
+    this.#removeListener();
 
-    this._mediaQuery = window.matchMedia(this.query);
+    this.#mediaQuery = window.matchMedia(this.query);
 
-    this._addListener();
+    this.#addListener();
 
-    this._queryHandler(this._mediaQuery);
+    this.#queryHandler(this.#mediaQuery);
   }
 
   hostDisconnected() {
-    this._removeListener();
+    this.#removeListener();
   }
 
-  /** @private */
-  _addListener() {
-    if (this._mediaQuery) {
-      this._mediaQuery.addListener(this._boundQueryHandler);
+  #addListener() {
+    if (this.#mediaQuery) {
+      this.#mediaQuery.addListener(this.#queryHandler);
     }
   }
 
-  /** @private */
-  _removeListener() {
-    if (this._mediaQuery) {
-      this._mediaQuery.removeListener(this._boundQueryHandler);
+  #removeListener() {
+    if (this.#mediaQuery) {
+      this.#mediaQuery.removeListener(this.#queryHandler);
     }
 
-    this._mediaQuery = null;
+    this.#mediaQuery = null;
   }
 
-  /** @private */
-  _queryHandler(mediaQuery) {
+  #queryHandler = (mediaQuery) => {
     if (typeof this.callback === 'function') {
       this.callback(mediaQuery.matches);
     }
-  }
+  };
 }

src/overflow-controller.js

@@ -13,2 +13,11 @@ /**
 export class OverflowController {
+  /** @type {ResizeObserver} */
+  #resizeObserver;
+
+  /** @type {MutationObserver} */
+  #childObserver;
+
+  /** @type {number} */
+  #resizeRaf;
+
   constructor(host, scrollTarget) {
@@ -29,5 +38,2 @@ /**
     this.scrollTarget = scrollTarget || host;
-
-    /** @private */
-    this.__boundOnScroll = this.__onScroll.bind(this);
   }
@@ -51,15 +57,15 @@
 
-    this.__resizeObserver = new ResizeObserver(() => this.__onResize());
-    this.__resizeObserver.observe(host);
+    this.#resizeObserver = new ResizeObserver(() => this.#onResize());
+    this.#resizeObserver.observe(host);
 
     // Observe initial children
     [...host.children].forEach((child) => {
-      this.__resizeObserver.observe(child);
+      this.#resizeObserver.observe(child);
     });
 
-    this.__childObserver = new MutationObserver((mutations) => {
+    this.#childObserver = new MutationObserver((mutations) => {
       mutations.forEach(({ addedNodes, removedNodes }) => {
         addedNodes.forEach((node) => {
           if (node.nodeType === Node.ELEMENT_NODE) {
-            this.__resizeObserver.observe(node);
+            this.#resizeObserver.observe(node);
           }
@@ -70,3 +76,3 @@ });
           if (node.nodeType === Node.ELEMENT_NODE) {
-            this.__resizeObserver.unobserve(node);
+            this.#resizeObserver.unobserve(node);
           }
@@ -76,3 +82,3 @@ });
         if (addedNodes.length === 0 && removedNodes.length > 0) {
-          this.__updateState({ sync: true });
+          this.#updateState({ sync: true });
         }
@@ -82,32 +88,28 @@ });
 
-    this.__childObserver.observe(host, { childList: true });
+    this.#childObserver.observe(host, { childList: true });
 
     // Update overflow attribute on scroll
-    this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
+    this.scrollTarget.addEventListener('scroll', this.#onScroll);
   }
 
-  /** @private */
-  __onResize() {
-    this.__updateState({ sync: false });
+  #onResize() {
+    this.#updateState({ sync: false });
   }
 
-  /** @private */
-  __onScroll() {
-    this.__updateState({ sync: true });
-  }
+  #onScroll = () => {
+    this.#updateState({ sync: true });
+  };
 
-  /** @private */
-  __updateState({ sync }) {
-    cancelAnimationFrame(this.__resizeRaf);
+  #updateState({ sync }) {
+    cancelAnimationFrame(this.#resizeRaf);
 
-    const state = this.__readState();
+    const state = this.#readState();
     if (sync) {
-      this.__writeState(state);
+      this.#writeState(state);
     } else {
-      this.__resizeRaf = requestAnimationFrame(() => this.__writeState(state));
+      this.#resizeRaf = requestAnimationFrame(() => this.#writeState(state));
     }
   }
 
-  /** @private */
-  __readState() {
+  #readState() {
     const target = this.scrollTarget;
@@ -137,4 +139,3 @@
 
-  /** @private */
-  __writeState({ overflow }) {
+  #writeState({ overflow }) {
     if (overflow) {
@@ -141,0 +142,0 @@ this.host.setAttribute('overflow', overflow);

src/slot-child-observe-controller.d.ts

@@ -28,2 +28,7 @@ /**
   protected updateDefaultNode(node: Node): void;
+
+  /**
+   * Fire an event to notify the controller host about node changes.
+   */
+  protected _notifyChange(node: Node): void;
 }

src/slot-child-observe-controller.js

@@ -13,2 +13,5 @@ /**
 export class SlotChildObserveController extends SlotController {
+  /** @type {MutationObserver} */
+  #nodeObserver;
+
   constructor(host, slot, tagName, config = {}) {
@@ -26,4 +29,4 @@ super(host, slot, tagName, { ...config, useUniqueId: true });
   initCustomNode(node) {
-    this.__updateNodeId(node);
-    this.__notifyChange(node);
+    this.#updateNodeId(node);
+    this._notifyChange(node);
   }
@@ -44,3 +47,3 @@
     if (node && node !== this.defaultNode) {
-      this.__notifyChange(node);
+      this._notifyChange(node);
     } else {
@@ -64,3 +67,3 @@ this.restoreDefaultNode();
     if (node) {
-      this.__updateNodeId(node);
+      this.#updateNodeId(node);
     }
@@ -87,3 +90,3 @@
   updateDefaultNode(node) {
-    this.__notifyChange(node);
+    this._notifyChange(node);
   }
@@ -100,7 +103,7 @@
     // Stop observing the previous node, if any.
-    if (this.__nodeObserver) {
-      this.__nodeObserver.disconnect();
+    if (this.#nodeObserver) {
+      this.#nodeObserver.disconnect();
     }
 
-    this.__nodeObserver = new MutationObserver((mutations) => {
+    this.#nodeObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
@@ -117,7 +120,7 @@ const target = mutation.target;
           if (isCurrentNodeMutation) {
-            this.__updateNodeId(target);
+            this.#updateNodeId(target);
           }
         } else if (isCurrentNodeMutation || target.parentElement === this.node) {
           // Node text content has changed.
-          this.__notifyChange(this.node);
+          this._notifyChange(this.node);
         }
@@ -128,3 +131,3 @@ });
     // Observe changes to node ID attribute, text content and children.
-    this.__nodeObserver.observe(node, {
+    this.#nodeObserver.observe(node, {
       attributes: true,
@@ -144,5 +147,4 @@ attributeFilter: ['id'],
    * @return {boolean}
-   * @private
    */
-  __hasContent(node) {
+  #hasContent(node) {
     if (!node) {
@@ -162,8 +164,8 @@ return false;
    * @param {Node} node
-   * @private
+   * @protected
    */
-  __notifyChange(node) {
+  _notifyChange(node) {
     this.dispatchEvent(
       new CustomEvent('slot-content-changed', {
-        detail: { hasContent: this.__hasContent(node), node },
+        detail: { hasContent: this.#hasContent(node), node },
       }),
@@ -177,5 +179,4 @@ );
    * @param {Node} node
-   * @private
    */
-  __updateNodeId(node) {
+  #updateNodeId(node) {
     // When in multiple mode, only set ID attribute on the element in default slot.
@@ -182,0 +183,0 @@ const isFirstNode = !this.nodes || node === this.nodes[0];

src/slot-controller.js

@@ -205,3 +205,4 @@ /**
 
-    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+    // eslint-disable-next-line no-new
+    new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
       const current = this.multiple ? this.nodes : [this.node];
@@ -208,0 +209,0 @@

src/tooltip-controller.js

@@ -17,3 +17,2 @@ /**
     this.setTarget(host);
-    this.__onContentChange = this.__onContentChange.bind(this);
   }
@@ -54,4 +53,4 @@
     }
-    this.__notifyChange(tooltipNode);
-    tooltipNode.addEventListener('content-changed', this.__onContentChange);
+    this.#notifyChange(tooltipNode);
+    tooltipNode.addEventListener('content-changed', this.#onContentChange);
   }
@@ -70,4 +69,4 @@
     }
-    tooltipNode.removeEventListener('content-changed', this.__onContentChange);
-    this.__notifyChange(null);
+    tooltipNode.removeEventListener('content-changed', this.#onContentChange);
+    this.#notifyChange(null);
   }
@@ -185,11 +184,9 @@
 
-  /** @private */
-  __onContentChange(event) {
-    this.__notifyChange(event.target);
-  }
+  #onContentChange = (event) => {
+    this.#notifyChange(event.target);
+  };
 
-  /** @private */
-  __notifyChange(node) {
+  #notifyChange(node) {
     this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node } }));
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

255515

-0.02%

Lines of code

7209

-0.01%

No dependency changes