@vaadin/component-base 24.0.0-alpha2 → 24.0.0-alpha3

package/index.d.ts

@@ -8,5 +8,4 @@ export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { ResizeMixin } from './src/resize-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/index.js

@@ -7,5 +7,4 @@ export { FocusMixin } from './src/focus-mixin.js';
 export { FocusTrapController } from './src/focus-trap-controller.js';
 export { KeyboardMixin } from './src/keyboard-mixin.js';
 export { SlotController } from './src/slot-controller.js';
-export { SlotMixin } from './src/slot-mixin.js';
 export { TabindexMixin } from './src/tabindex-mixin.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.0.0-alpha2",
+  "version": "24.0.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "0c16c01a6807e629a84f5a982793afecc1a7ced0"
+  "gitHead": "7a013a3c5a56abd61dd4f7773c6ec77c3541bdf2"
 }

package/src/element-mixin.js

@@ -39,7 +39,7 @@ const registered = new Set();
 export const ElementMixin = (superClass) =>
   class VaadinElementMixin extends DirMixin(superClass) {
     static get version() {
-      return '24.0.0-alpha2';
+      return '24.0.0-alpha3';
     }
 
     /** @protected */

package/src/slot-controller.d.ts

@@ -25,9 +25,12 @@ export class SlotController extends EventTarget implements ReactiveController {
   constructor(
     host: HTMLElement,
     slotName: string,
-    slotFactory?: () => HTMLElement,
-    slotInitializer?: (host: HTMLElement, node: HTMLElement) => void,
-    useUniqueId?: boolean,
+    tagName?: string,
+    config?: {
+      observe?: boolean;
+      useUniqueId?: boolean;
+      initializer?(host: HTMLElement, node: HTMLElement): void;
+    },
   );
 
   hostConnected(): void;
@@ -54,5 +57,5 @@ export class SlotController extends EventTarget implements ReactiveController {
   /**
    * Setup the observer to manage slot content changes.
    */
-  protected observe(): void;
+  protected observeSlot(): void;
 }

package/src/slot-controller.js

@@ -23,13 +23,16 @@ export class SlotController extends EventTarget {
     return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  constructor(host, slotName, slotFactory, slotInitializer, useUniqueId) {
+  constructor(host, slotName, tagName, config = {}) {
     super();
 
+    const { initializer, observe, useUniqueId } = config;
+
     this.host = host;
     this.slotName = slotName;
-    this.slotFactory = slotFactory;
-    this.slotInitializer = slotInitializer;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.slotInitializer = initializer;
 
     // Only generate the default ID if requested by the controller.
     if (useUniqueId) {
@@ -50,8 +53,9 @@ export class SlotController extends EventTarget {
 
       this.initNode(node);
 
-      // TODO: Consider making this behavior opt-in to improve performance.
-      this.observe();
+      if (this.observe) {
+        this.observeSlot();
+      }
 
       this.initialized = true;
     }
@@ -63,14 +67,14 @@ export class SlotController extends EventTarget {
    * @protected
    */
   attachDefaultNode() {
-    const { host, slotName, slotFactory } = this;
+    const { host, slotName, tagName } = this;
 
     // Check if the node was created previously and if so, reuse it.
     let node = this.defaultNode;
 
     // Slot factory is optional, some slots don't have default content.
-    if (!node && slotFactory) {
-      node = slotFactory(host);
+    if (!node && tagName) {
+      node = document.createElement(tagName);
       if (node instanceof Element) {
         if (slotName !== '') {
           node.setAttribute('slot', slotName);
@@ -111,7 +115,7 @@ export class SlotController extends EventTarget {
     // Don't try to bind `this` to initializer (normally it's arrow function).
     // Instead, pass the host as a first argument to access component's state.
     if (slotInitializer) {
-      slotInitializer(this.host, node);
+      slotInitializer(node, this.host);
     }
   }
 
@@ -135,7 +139,7 @@ export class SlotController extends EventTarget {
    * Setup the observer to manage slot content changes.
    * @protected
    */
-  observe() {
+  observeSlot() {
     const { slotName } = this;
     const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
     const slot = this.host.shadowRoot.querySelector(selector);

package/src/slot-mixin.d.ts

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { Constructor } from '@open-wc/dedupe-mixin';
-
-/**
- * A mixin to provide content for named slots defined by component.
- */
-export declare function SlotMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<SlotMixinClass> & T;
-
-export declare class SlotMixinClass {
-  /**
-   * List of named slots to initialize.
-   */
-  protected readonly slots: Record<string, () => HTMLElement>;
-}

package/src/slot-mixin.js

@@ -1,60 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { dedupingMixin } from '@polymer/polymer/lib/utils/mixin.js';
-
-/**
- * A mixin to provide content for named slots defined by component.
- *
- * @polymerMixin
- */
-export const SlotMixin = dedupingMixin(
-  (superclass) =>
-    class SlotMixinClass extends superclass {
-      /**
-       * List of named slots to initialize.
-       * @protected
-       */
-      get slots() {
-        return {};
-      }
-
-      /** @protected */
-      ready() {
-        super.ready();
-        this._connectSlotMixin();
-      }
-
-      /** @private */
-      _connectSlotMixin() {
-        Object.keys(this.slots).forEach((slotName) => {
-          // Ignore labels of nested components, if any
-          const hasContent = this._getDirectSlotChild(slotName) !== undefined;
-
-          if (!hasContent) {
-            const slotFactory = this.slots[slotName];
-            const slotContent = slotFactory();
-            if (slotContent instanceof Element) {
-              if (slotName !== '') {
-                slotContent.setAttribute('slot', slotName);
-              }
-              this.appendChild(slotContent);
-            }
-          }
-        });
-      }
-
-      /** @protected */
-      _getDirectSlotChild(slotName) {
-        return Array.from(this.childNodes).find((node) => {
-          // Either an element (any slot) or a text node (only un-named slot).
-          return (
-            (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
-            (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
-          );
-        });
-      }
-    },
-);