@vaadin/component-base 24.2.0-alpha4 → 24.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -39,8 +39,8 @@
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.4.3",
     "sinon": "^13.0.2"
   },
-  "gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
+  "gitHead": "3ef6e6cd66919b3ef7637e42916e4c54656beb51"
 }

package/src/controller-mixin.js

@@ -15,62 +15,67 @@ import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
  *
  * @polymerMixin
  */
-export const ControllerMixin = dedupingMixin(
-  (superClass) =>
-    class ControllerMixinClass extends superClass {
-      constructor() {
-        super();
+export const ControllerMixin = dedupingMixin((superClass) => {
+  // If the superclass extends from LitElement,
+  // use its own controllers implementation.
+  if (typeof superClass.prototype.addController === 'function') {
+    return superClass;
+  }
 
-        /**
-         * @type {Set<ReactiveController>}
-         */
-        this.__controllers = new Set();
-      }
+  return class ControllerMixinClass extends superClass {
+    constructor() {
+      super();
 
-      /** @protected */
-      connectedCallback() {
-        super.connectedCallback();
+      /**
+       * @type {Set<ReactiveController>}
+       */
+      this.__controllers = new Set();
+    }
 
-        this.__controllers.forEach((c) => {
-          if (c.hostConnected) {
-            c.hostConnected();
-          }
-        });
-      }
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-      /** @protected */
-      disconnectedCallback() {
-        super.disconnectedCallback();
+      this.__controllers.forEach((c) => {
+        if (c.hostConnected) {
+          c.hostConnected();
+        }
+      });
+    }
 
-        this.__controllers.forEach((c) => {
-          if (c.hostDisconnected) {
-            c.hostDisconnected();
-          }
-        });
-      }
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
 
-      /**
-       * Registers a controller to participate in the element update cycle.
-       *
-       * @param {ReactiveController} controller
-       * @protected
-       */
-      addController(controller) {
-        this.__controllers.add(controller);
-        // Call hostConnected if a controller is added after the element is attached.
-        if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
-          controller.hostConnected();
+      this.__controllers.forEach((c) => {
+        if (c.hostDisconnected) {
+          c.hostDisconnected();
         }
-      }
+      });
+    }
 
-      /**
-       * Removes a controller from the element.
-       *
-       * @param {ReactiveController} controller
-       * @protected
-       */
-      removeController(controller) {
-        this.__controllers.delete(controller);
+    /**
+     * Registers a controller to participate in the element update cycle.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    addController(controller) {
+      this.__controllers.add(controller);
+      // Call hostConnected if a controller is added after the element is attached.
+      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
+        controller.hostConnected();
       }
-    },
-);
+    }
+
+    /**
+     * Removes a controller from the element.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    removeController(controller) {
+      this.__controllers.delete(controller);
+    }
+  };
+});

package/src/dom-utils.d.ts

@@ -13,6 +13,13 @@
  */
 export function getAncestorRootNodes(node: Node): Node[];
 
+/**
+ * Returns the list of flattened elements for the given `node`.
+ * This list consists of a node's children and, for any children that are
+ * `<slot>` elements, the expanded flattened list of `assignedElements`.
+ */
+export function getFlattenedElements(node: Node): Element[];
+
 /**
  * Traverses the given node and its parents, including those that are across
  * the shadow root boundaries, until it finds a node that matches the selector.

package/src/dom-utils.js

@@ -40,6 +40,27 @@ export function getAncestorRootNodes(node) {
   return result;
 }
 
+/**
+ * Returns the list of flattened elements for the given `node`.
+ * This list consists of a node's children and, for any children that are
+ * `<slot>` elements, the expanded flattened list of `assignedElements`.
+ *
+ * @param {Node} node
+ * @return {Element[]}
+ */
+export function getFlattenedElements(node) {
+  const result = [];
+  let elements;
+  if (node.localName === 'slot') {
+    elements = node.assignedElements();
+  } else {
+    result.push(node);
+    elements = [...node.children];
+  }
+  elements.forEach((elem) => result.push(...getFlattenedElements(elem)));
+  return result;
+}
+
 /**
  * Traverses the given node and its parents, including those that are across
  * the shadow root boundaries, until it finds a node that matches the selector.

package/src/element-mixin.js

@@ -45,7 +45,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.2.0-alpha4';
+      return '24.2.0-alpha6';
     }
 
     /** @protected */

package/src/overflow-controller.js

@@ -3,7 +3,6 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { animationFrame } from './async.js';
 import { Debouncer } from './debounce.js';
 
@@ -47,30 +46,41 @@ export class OverflowController {
    * @protected
    */
   observe() {
-    this.__resizeObserver = new ResizeObserver(() => {
+    const { host } = this;
+
+    this.__resizeObserver = new ResizeObserver((entries) => {
       this.__debounceOverflow = Debouncer.debounce(this.__debounceOverflow, animationFrame, () => {
         this.__updateOverflow();
       });
     });
 
-    this.__resizeObserver.observe(this.host);
+    this.__resizeObserver.observe(host);
 
-    this.__childObserver = new FlattenedNodesObserver(this.host, (info) => {
-      info.addedNodes.forEach((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          this.__resizeObserver.observe(node);
-        }
-      });
+    // Observe initial children
+    [...host.children].forEach((child) => {
+      this.__resizeObserver.observe(child);
+    });
 
-      info.removedNodes.forEach((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-          this.__resizeObserver.unobserve(node);
-        }
+    this.__childObserver = new MutationObserver((mutations) => {
+      mutations.forEach(({ addedNodes, removedNodes }) => {
+        addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            this.__resizeObserver.observe(node);
+          }
+        });
+
+        removedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            this.__resizeObserver.unobserve(node);
+          }
+        });
       });
 
       this.__updateOverflow();
     });
 
+    this.__childObserver.observe(host, { childList: true });
+
     // Update overflow attribute on scroll
     this.scrollTarget.addEventListener('scroll', this.__boundOnScroll);
 

package/src/polylit-mixin.js

@@ -175,7 +175,7 @@ const PolylitMixinImplementation = (superclass) => {
         this.$ = {};
       }
 
-      this.shadowRoot.querySelectorAll('[id]').forEach((node) => {
+      this.renderRoot.querySelectorAll('[id]').forEach((node) => {
         this.$[node.id] = node;
       });
     }

package/src/slot-controller.js

@@ -3,8 +3,8 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { isEmptyTextNode } from './dom-utils.js';
+import { SlotObserver } from './slot-observer.js';
 import { generateUniqueId } from './unique-id-utils.js';
 
 /**
@@ -199,17 +199,17 @@ export class SlotController extends EventTarget {
     const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
     const slot = this.host.shadowRoot.querySelector(selector);
 
-    this.__slotObserver = new FlattenedNodesObserver(slot, (info) => {
+    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
       const current = this.multiple ? this.nodes : [this.node];
 
       // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
       // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
-      const newNodes = info.addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
 
-      if (info.removedNodes.length) {
-        this.nodes = current.filter((node) => !info.removedNodes.includes(node));
+      if (removedNodes.length) {
+        this.nodes = current.filter((node) => !removedNodes.includes(node));
 
-        info.removedNodes.forEach((node) => {
+        removedNodes.forEach((node) => {
           this.teardownNode(node);
         });
       }

package/src/slot-observer.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A helper for observing slot changes.
+ */
+export class SlotObserver {
+  constructor(
+    slot: HTMLSlotElement,
+    callback: (info: { addedNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
+  );
+
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect(): void;
+
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect(): void;
+
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush(): void;
+}

package/src/slot-observer.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A helper for observing slot changes.
+ */
+export class SlotObserver {
+  constructor(slot, callback) {
+    /** @type HTMLSlotElement */
+    this.slot = slot;
+
+    /** @type Function */
+    this.callback = callback;
+
+    /** @type {Node[]} */
+    this._storedNodes = [];
+
+    this._connected = false;
+    this._scheduled = false;
+
+    this._boundSchedule = () => {
+      this._schedule();
+    };
+
+    this.connect();
+    this._schedule();
+  }
+
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect() {
+    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this._connected = true;
+  }
+
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect() {
+    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this._connected = false;
+  }
+
+  /** @private */
+  _schedule() {
+    if (!this._scheduled) {
+      this._scheduled = true;
+
+      queueMicrotask(() => {
+        this.flush();
+      });
+    }
+  }
+
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush() {
+    if (!this._connected) {
+      return;
+    }
+
+    this._scheduled = false;
+
+    this._processNodes();
+  }
+
+  /** @private */
+  _processNodes() {
+    const currentNodes = this.slot.assignedNodes({ flatten: true });
+
+    let addedNodes = [];
+    const removedNodes = [];
+    const movedNodes = [];
+
+    if (currentNodes.length) {
+      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    }
+
+    if (this._storedNodes.length) {
+      this._storedNodes.forEach((node, index) => {
+        const idx = currentNodes.indexOf(node);
+        if (idx === -1) {
+          removedNodes.push(node);
+        } else if (idx !== index) {
+          movedNodes.push(node);
+        }
+      });
+    }
+
+    if (addedNodes.length || removedNodes.length || movedNodes.length) {
+      this.callback({ addedNodes, movedNodes, removedNodes });
+    }
+
+    this._storedNodes = currentNodes;
+  }
+}