@ui5/webcomponents-base 0.0.0-82b703434 → 0.0.0-8393c7cdd

package/dist/UI5Element.js

@@ -1,33 +1,30 @@
 import merge from "./thirdparty/merge.js";
-import boot from "./boot.js";
+import { boot } from "./Boot.js";
 import UI5ElementMetadata from "./UI5ElementMetadata.js";
 import EventProvider from "./EventProvider.js";
-import executeTemplate from "./renderer/executeTemplate.js";
+import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
 import StaticAreaItem from "./StaticAreaItem.js";
-import RenderScheduler from "./RenderScheduler.js";
+import updateShadowRoot from "./updateShadowRoot.js";
+import { renderDeferred, renderImmediately, cancelRender } from "./Render.js";
 import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
-import DOMObserver from "./compatibility/DOMObserver.js";
+import { observeDOMNode, unobserveDOMNode } from "./DOMObserver.js";
 import { skipOriginalEvent } from "./config/NoConflict.js";
-import { getRTL } from "./config/RTL.js";
-import getConstructableStyle from "./theming/getConstructableStyle.js";
-import createComponentStyleTag from "./theming/createComponentStyleTag.js";
-import getEffectiveStyle from "./theming/getEffectiveStyle.js";
-import Integer from "./types/Integer.js";
-import Float from "./types/Float.js";
+import getEffectiveDir from "./locale/getEffectiveDir.js";
+import DataType from "./types/DataType.js";
 import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
 import isValidPropertyName from "./util/isValidPropertyName.js";
-import isSlot from "./util/isSlot.js";
+import isDescendantOf from "./util/isDescendantOf.js";
+import { isSlot, getSlotName, getSlottedElementsList } from "./util/SlotsHelper.js";
 import arraysAreEqual from "./util/arraysAreEqual.js";
+import getClassCopy from "./util/getClassCopy.js";
 import { markAsRtlAware } from "./locale/RTLAwareRegistry.js";
+import preloadLinks from "./theming/preloadLinks.js";
 
 let autoId = 0;
 
 const elementTimeouts = new Map();
 const uniqueDependenciesCache = new Map();
 
-const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
-const GLOBAL_DIR_CSS_VAR = "--_ui5_dir";
-
 /**
  * Triggers re-rendering of a UI5Element instance due to state change.
  *
@@ -45,10 +42,12 @@ function _invalidate(changeInfo) {
 	this.onInvalidation(changeInfo);
 
 	this._changedState.push(changeInfo);
-	RenderScheduler.renderDeferred(this);
-	this._eventProvider.fireEvent("change", { ...changeInfo, target: this });
+	renderDeferred(this);
+	this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this });
 }
 
+let metadata = {};
+
 /**
  * Base class for all UI5 Web Components
  *
@@ -75,10 +74,14 @@ class UI5Element extends HTMLElement {
 			deferredResolve = resolve;
 		});
 		this._domRefReadyPromise._deferredResolve = deferredResolve;
+		this._doNotSyncAttributes = new Set(); // attributes that are excluded from attributeChangedCallback synchronization
 
 		this._initializeState();
 		this._upgradeAllProperties();
-		this._initializeContainers();
+
+		if (this.constructor._needsShadowDOM()) {
+			this.attachShadow({ mode: "open" });
+		}
 	}
 
 	/**
@@ -95,32 +98,16 @@ class UI5Element extends HTMLElement {
 		return this.__id;
 	}
 
-	/**
-	 * @private
-	 */
-	_initializeContainers() {
-		const needsShadowDOM = this.constructor._needsShadowDOM();
-		const needsStaticArea = this.constructor._needsStaticArea();
-
-		// Init Shadow Root
-		if (needsShadowDOM) {
-			this.attachShadow({ mode: "open" });
-		}
-
-		// Init StaticAreaItem only if needed
-		if (needsStaticArea) {
-			this.staticAreaItem = new StaticAreaItem(this);
-		}
-	}
-
 	/**
 	 * Do not call this method from derivatives of UI5Element, use "onEnterDOM" only
 	 * @private
 	 */
 	async connectedCallback() {
 		this.setAttribute(this.constructor.getMetadata().getPureTag(), "");
+		if (this.constructor.getMetadata().supportsF6FastNavigation()) {
+			this.setAttribute("data-sap-ui-fastnavgroup", "true");
+		}
 
-		const needsShadowDOM = this.constructor._needsShadowDOM();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
 		this._inDOM = true;
@@ -131,16 +118,11 @@ class UI5Element extends HTMLElement {
 			await this._processChildren();
 		}
 
-		if (needsShadowDOM && !this.shadowRoot) { // Workaround for Firefox74 bug
-			await Promise.resolve();
-		}
-
 		if (!this._inDOM) { // Component removed from DOM while _processChildren was running
 			return;
 		}
 
-		RenderScheduler.register(this);
-		RenderScheduler.renderImmediately(this);
+		renderImmediately(this);
 		this._domRefReadyPromise._deferredResolve();
 		this._fullyConnected = true;
 		if (typeof this.onEnterDOM === "function") {
@@ -153,8 +135,6 @@ class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	disconnectedCallback() {
-		const needsShadowDOM = this.constructor._needsShadowDOM();
-		const needsStaticArea = this.constructor._needsStaticArea();
 		const slotsAreManaged = this.constructor.getMetadata().slotsAreManaged();
 
 		this._inDOM = false;
@@ -163,21 +143,18 @@ class UI5Element extends HTMLElement {
 			this._stopObservingDOMChildren();
 		}
 
-		if (needsShadowDOM) {
-			RenderScheduler.deregister(this);
-			if (this._fullyConnected) {
-				if (typeof this.onExitDOM === "function") {
-					this.onExitDOM();
-				}
-				this._fullyConnected = false;
+		if (this._fullyConnected) {
+			if (typeof this.onExitDOM === "function") {
+				this.onExitDOM();
 			}
+			this._fullyConnected = false;
 		}
 
-		if (needsStaticArea) {
-			this.staticAreaItem._removeFragmentFromStaticArea();
+		if (this.staticAreaItem && this.staticAreaItem.parentElement) {
+			this.staticAreaItem.parentElement.removeChild(this.staticAreaItem);
 		}
 
-		RenderScheduler.cancelRender(this);
+		cancelRender(this);
 	}
 
 	/**
@@ -195,14 +172,14 @@ class UI5Element extends HTMLElement {
 			subtree: canSlotText,
 			characterData: canSlotText,
 		};
-		DOMObserver.observeDOMNode(this, this._processChildren.bind(this), mutationObserverOptions);
+		observeDOMNode(this, this._processChildren.bind(this), mutationObserverOptions);
 	}
 
 	/**
 	 * @private
 	 */
 	_stopObservingDOMChildren() {
-		DOMObserver.unobserveDOMNode(this);
+		unobserveDOMNode(this);
 	}
 
 	/**
@@ -240,7 +217,7 @@ class UI5Element extends HTMLElement {
 
 		const allChildrenUpgraded = domChildren.map(async (child, idx) => {
 			// Determine the type of the child (mainly by the slot attribute)
-			const slotName = this.constructor._getSlotName(child);
+			const slotName = getSlotName(child);
 			const slotData = slotsMap[slotName];
 
 			// Check if the slotName is supported
@@ -280,7 +257,8 @@ class UI5Element extends HTMLElement {
 
 			// Listen for any invalidation on the child if invalidateOnChildChange is true or an object (ignore when false or not set)
 			if (child.isUI5Element && slotData.invalidateOnChildChange) {
-				child._attachChange(this._getChildChangeListener(slotName));
+				const method = (child.attachInvalidate || child._attachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			// Listen for the slotchange event if the child is a slot itself
@@ -340,7 +318,8 @@ class UI5Element extends HTMLElement {
 
 		children.forEach(child => {
 			if (child && child.isUI5Element) {
-				child._detachChange(this._getChildChangeListener(slotName));
+				const method = (child.detachInvalidate || child._detachChange).bind(child);
+				method(this._getChildChangeListener(slotName));
 			}
 
 			if (isSlot(child)) {
@@ -355,20 +334,20 @@ class UI5Element extends HTMLElement {
 	 * Attach a callback that will be executed whenever the component is invalidated
 	 *
 	 * @param callback
-	 * @protected
+	 * @public
 	 */
-	_attachChange(callback) {
-		this._eventProvider.attachEvent("change", callback);
+	attachInvalidate(callback) {
+		this._eventProvider.attachEvent("invalidate", callback);
 	}
 
 	/**
 	 * Detach the callback that is executed whenever the component is invalidated
 	 *
 	 * @param callback
-	 * @protected
+	 * @public
 	 */
-	_detachChange(callback) {
-		this._eventProvider.detachEvent("change", callback);
+	detachInvalidate(callback) {
+		this._eventProvider.detachEvent("invalidate", callback);
 	}
 
 	/**
@@ -398,6 +377,10 @@ class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	attributeChangedCallback(name, oldValue, newValue) {
+		if (this._doNotSyncAttributes.has(name)) { // This attribute is mutated internally, not by the user
+			return;
+		}
+
 		const properties = this.constructor.getMetadata().getProperties();
 		const realName = name.replace(/^ui5-/, "");
 		const nameInCamelCase = kebabToCamelCase(realName);
@@ -405,12 +388,8 @@ class UI5Element extends HTMLElement {
 			const propertyTypeClass = properties[nameInCamelCase].type;
 			if (propertyTypeClass === Boolean) {
 				newValue = newValue !== null;
-			}
-			if (propertyTypeClass === Integer) {
-				newValue = parseInt(newValue);
-			}
-			if (propertyTypeClass === Float) {
-				newValue = parseFloat(newValue);
+			} else if (isDescendantOf(propertyTypeClass, DataType)) {
+				newValue = propertyTypeClass.attributeToProperty(newValue);
 			}
 			this[nameInCamelCase] = newValue;
 		}
@@ -423,22 +402,31 @@ class UI5Element extends HTMLElement {
 		if (!this.constructor.getMetadata().hasAttribute(name)) {
 			return;
 		}
-
-		if (typeof newValue === "object") {
-			return;
-		}
-
+		const properties = this.constructor.getMetadata().getProperties();
+		const propertyTypeClass = properties[name].type;
 		const attrName = camelToKebabCase(name);
 		const attrValue = this.getAttribute(attrName);
-		if (typeof newValue === "boolean") {
+
+		if (propertyTypeClass === Boolean) {
 			if (newValue === true && attrValue === null) {
 				this.setAttribute(attrName, "");
 			} else if (newValue === false && attrValue !== null) {
 				this.removeAttribute(attrName);
 			}
-		} else if (attrValue !== newValue) {
-			this.setAttribute(attrName, newValue);
-		}
+		} else if (isDescendantOf(propertyTypeClass, DataType)) {
+			const newAttrValue = propertyTypeClass.propertyToAttribute(newValue);
+			if (newAttrValue === null) { // null means there must be no attribute for the current value of the property
+				this._doNotSyncAttributes.add(attrName); // skip the attributeChangedCallback call for this attribute
+				this.removeAttribute(attrName); // remove the attribute safely (will not trigger synchronization to the property value due to the above line)
+				this._doNotSyncAttributes.delete(attrName); // enable synchronization again for this attribute
+			} else {
+				this.setAttribute(attrName, newAttrValue);
+			}
+		} else if (typeof newValue !== "object") {
+			if (attrValue !== newValue) {
+				this.setAttribute(attrName, newValue);
+			}
+		} // else { return; } // old object handling
 	}
 
 	/**
@@ -464,8 +452,7 @@ class UI5Element extends HTMLElement {
 	 * @private
 	 */
 	_initializeState() {
-		const defaultState = this.constructor._getDefaultState();
-		this._state = Object.assign({}, defaultState);
+		this._state = { ...this.constructor.getMetadata().getInitialState() };
 	}
 
 	/**
@@ -554,7 +541,7 @@ class UI5Element extends HTMLElement {
 	onInvalidation(changeInfo) {}
 
 	/**
-	 * Do not call this method directly, only intended to be called by RenderScheduler.js
+	 * Do not call this method directly, only intended to be called by js
 	 * @protected
 	 */
 	_render() {
@@ -599,10 +586,11 @@ class UI5Element extends HTMLElement {
 		this._changedState = [];
 
 		// Update shadow root and static area item
-		this._updateShadowRoot();
-		if (this._shouldUpdateFragment()) {
-			this.staticAreaItem._updateFragment(this);
-			this.staticAreaItemDomRef = this.staticAreaItem.staticAreaItemDomRef.shadowRoot;
+		if (this.constructor._needsShadowDOM()) {
+			updateShadowRoot(this);
+		}
+		if (this.staticAreaItem) {
+			this.staticAreaItem.update();
 		}
 
 		// Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
@@ -616,35 +604,6 @@ class UI5Element extends HTMLElement {
 		}
 	}
 
-	/**
-	 * @private
-	 */
-	_updateShadowRoot() {
-		if (!this.constructor._needsShadowDOM()) {
-			return;
-		}
-
-		let styleToPrepend;
-		const renderResult = executeTemplate(this.constructor.template, this);
-
-		// IE11, Edge
-		if (window.ShadyDOM) {
-			createComponentStyleTag(this.constructor);
-		}
-
-		// Chrome
-		if (document.adoptedStyleSheets) {
-			this.shadowRoot.adoptedStyleSheets = getConstructableStyle(this.constructor);
-		}
-
-		// FF, Safari
-		if (!document.adoptedStyleSheets && !window.ShadyDOM) {
-			styleToPrepend = getEffectiveStyle(this.constructor);
-		}
-
-		this.constructor.render(renderResult, this.shadowRoot, styleToPrepend, { eventContext: this });
-	}
-
 	/**
 	 * @private
 	 */
@@ -667,16 +626,27 @@ class UI5Element extends HTMLElement {
 
 	/**
 	 * Returns the DOM Element inside the Shadow Root that corresponds to the opening tag in the UI5 Web Component's template
+	 * *Note:* For logical (abstract) elements (items, options, etc...), returns the part of the parent's DOM that represents this option
 	 * Use this method instead of "this.shadowRoot" to read the Shadow DOM, if ever necessary
+	 *
 	 * @public
 	 */
 	getDomRef() {
+		// If a component set _getRealDomRef to its children, use the return value of this function
+		if (typeof this._getRealDomRef === "function") {
+			return this._getRealDomRef();
+		}
+
 		if (!this.shadowRoot || this.shadowRoot.children.length === 0) {
 			return;
 		}
 
-		return this.shadowRoot.children.length === 1
-			? this.shadowRoot.children[0] : this.shadowRoot.children[1];
+		const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
+		if (children.length !== 1) {
+			console.warn(`The shadow DOM for ${this.constructor.getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
+		}
+
+		return children[0];
 	}
 
 	/**
@@ -702,19 +672,6 @@ class UI5Element extends HTMLElement {
 		return this.getFocusDomRef();
 	}
 
-	/**
-	 * Use this method in order to get a reference to an element in the shadow root of the web component or the static area item of the component
-	 * @public
-	 * @method
-	 * @param {String} refName Defines the name of the stable DOM ref
-	 */
-	getStableDomRef(refName) {
-		const staticAreaResult = this.staticAreaItemDomRef && this.staticAreaItemDomRef.querySelector(`[data-ui5-stable=${refName}]`);
-
-		return staticAreaResult
-		|| this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
-	}
-
 	/**
 	 * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
 	 * @public
@@ -750,8 +707,6 @@ class UI5Element extends HTMLElement {
 	}
 
 	_fireEvent(name, data, cancelable = false, bubbles = true) {
-		let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
-
 		const noConflictEvent = new CustomEvent(`ui5-${name}`, {
 			detail: data,
 			composed: false,
@@ -759,14 +714,14 @@ class UI5Element extends HTMLElement {
 			cancelable,
 		});
 
-		// This will be false if the compat event is prevented
-		compatEventResult = this.dispatchEvent(noConflictEvent);
+		// This will be false if the no-conflict event is prevented
+		const noConflictEventResult = this.dispatchEvent(noConflictEvent);
 
 		if (skipOriginalEvent(name)) {
-			return compatEventResult;
+			return noConflictEventResult;
 		}
 
-		const customEvent = new CustomEvent(name, {
+		const normalEvent = new CustomEvent(name, {
 			detail: data,
 			composed: false,
 			bubbles,
@@ -774,10 +729,10 @@ class UI5Element extends HTMLElement {
 		});
 
 		// This will be false if the normal event is prevented
-		const normalEventResult = this.dispatchEvent(customEvent);
+		const normalEventResult = this.dispatchEvent(normalEvent);
 
 		// Return false if any of the two events was prevented (its result was false).
-		return normalEventResult && compatEventResult;
+		return normalEventResult && noConflictEventResult;
 	}
 
 	/**
@@ -786,18 +741,7 @@ class UI5Element extends HTMLElement {
 	 * @public
 	 */
 	getSlottedNodes(slotName) {
-		const reducer = (acc, curr) => {
-			if (!isSlot(curr)) {
-				return acc.concat([curr]);
-			}
-			return acc.concat(curr.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement));
-		};
-
-		return this[slotName].reduce(reducer, []);
-	}
-
-	get isCompact() {
-		return getComputedStyle(this).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR) === "compact";
+		return getSlottedElementsList(this[slotName]);
 	}
 
 	/**
@@ -809,33 +753,7 @@ class UI5Element extends HTMLElement {
 	 */
 	get effectiveDir() {
 		markAsRtlAware(this.constructor); // if a UI5 Element calls this method, it's considered to be rtl-aware
-
-		const doc = window.document;
-		const dirValues = ["ltr", "rtl"]; // exclude "auto" and "" from all calculations
-		const locallyAppliedDir = getComputedStyle(this).getPropertyValue(GLOBAL_DIR_CSS_VAR);
-
-		// In that order, inspect the CSS Var (for modern browsers), the element itself, html and body (for IE fallback)
-		if (dirValues.includes(locallyAppliedDir)) {
-			return locallyAppliedDir;
-		}
-		if (dirValues.includes(this.dir)) {
-			return this.dir;
-		}
-		if (dirValues.includes(doc.documentElement.dir)) {
-			return doc.documentElement.dir;
-		}
-		if (dirValues.includes(doc.body.dir)) {
-			return doc.body.dir;
-		}
-
-		// Finally, check the configuration for explicitly set RTL or language-implied RTL
-		return getRTL() ? "rtl" : undefined;
-	}
-
-	updateStaticAreaItemContentDensity() {
-		if (this.staticAreaItem) {
-			this.staticAreaItem._updateContentDensity(this.isCompact);
-		}
+		return getEffectiveDir(this);
 	}
 
 	/**
@@ -855,26 +773,6 @@ class UI5Element extends HTMLElement {
 		return this.getMetadata().getAttributesList();
 	}
 
-	/**
-	 * @private
-	 */
-	static _getSlotName(child) {
-		// Text nodes can only go to the default slot
-		if (!(child instanceof HTMLElement)) {
-			return "default";
-		}
-
-		// Discover the slot based on the real slot name (f.e. footer => footer, or content-32 => content)
-		const slot = child.getAttribute("slot");
-		if (slot) {
-			const match = slot.match(/^(.+?)-\d+$/);
-			return match ? match[1] : slot;
-		}
-
-		// Use default slot as a fallback
-		return "default";
-	}
-
 	/**
 	 * @private
 	 */
@@ -882,70 +780,30 @@ class UI5Element extends HTMLElement {
 		return !!this.template;
 	}
 
-	_shouldUpdateFragment() {
-		return this.constructor._needsStaticArea() && this.staticAreaItem.isRendered();
-	}
-
 	/**
 	 * @private
 	 */
 	static _needsStaticArea() {
-		return typeof this.staticAreaTemplate === "function";
+		return !!this.staticAreaTemplate;
 	}
 
 	/**
 	 * @public
 	 */
 	getStaticAreaItemDomRef() {
-		return this.staticAreaItem.getDomRef();
-	}
-
-	/**
-	 * @private
-	 */
-	static _getDefaultState() {
-		if (Object.prototype.hasOwnProperty.call(this, "_defaultState")) {
-			return this._defaultState;
+		if (!this.constructor._needsStaticArea()) {
+			throw new Error("This component does not use the static area");
 		}
 
-		const MetadataClass = this.getMetadata();
-		const defaultState = {};
-		const slotsAreManaged = MetadataClass.slotsAreManaged();
-
-		// Initialize properties
-		const props = MetadataClass.getProperties();
-		for (const propName in props) { // eslint-disable-line
-			const propType = props[propName].type;
-			const propDefaultValue = props[propName].defaultValue;
-
-			if (propType === Boolean) {
-				defaultState[propName] = false;
-
-				if (propDefaultValue !== undefined) {
-					console.warn("The 'defaultValue' metadata key is ignored for all booleans properties, they would be initialized with 'false' by default"); // eslint-disable-line
-				}
-			} else if (props[propName].multiple) {
-				defaultState[propName] = [];
-			} else if (propType === Object) {
-				defaultState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : {};
-			} else if (propType === String) {
-				defaultState[propName] = "defaultValue" in props[propName] ? props[propName].defaultValue : "";
-			} else {
-				defaultState[propName] = propDefaultValue;
-			}
+		if (!this.staticAreaItem) {
+			this.staticAreaItem = StaticAreaItem.createInstance();
+			this.staticAreaItem.setOwnerElement(this);
 		}
-
-		// Initialize slots
-		if (slotsAreManaged) {
-			const slots = MetadataClass.getSlots();
-			for (const [slotName, slotData] of Object.entries(slots)) { // eslint-disable-line
-				const propertyName = slotData.propertyName || slotName;
-				defaultState[propertyName] = [];
-			}
+		if (!this.staticAreaItem.parentElement) {
+			getSingletonElementInstance("ui5-static-area").appendChild(this.staticAreaItem);
 		}
 
-		this._defaultState = defaultState;
-		return defaultState;
+		return this.staticAreaItem.getDomRef();
 	}
 
 	/**
@@ -997,11 +855,19 @@ class UI5Element extends HTMLElement {
 					}
 				},
 				set(value) {
+					let isDifferent;
 					value = this.constructor.getMetadata().constructor.validatePropertyValue(value, propData);
 
 					const oldState = this._state[prop];
+					if (propData.multiple && propData.compareValues) {
+						isDifferent = !arraysAreEqual(oldState, value);
+					} else if (isDescendantOf(propData.type, DataType)) {
+						isDifferent = !propData.type.valuesAreEqual(oldState, value);
+					} else {
+						isDifferent = oldState !== value;
+					}
 
-					if (oldState !== value) {
+					if (isDifferent) {
 						this._state[prop] = value;
 						_invalidate.call(this, {
 							type: "property",
@@ -1044,7 +910,15 @@ class UI5Element extends HTMLElement {
 	 * @protected
 	 */
 	static get metadata() {
-		return {};
+		return metadata;
+	}
+
+	/**
+	 * Sets a new metadata object for this UI5 Web Component Class
+	 * @protected
+	 */
+	static set metadata(newMetadata) {
+		metadata = newMetadata;
 	}
 
 	/**
@@ -1132,11 +1006,13 @@ class UI5Element extends HTMLElement {
 			this._generateAccessors();
 			registerTag(tag);
 			window.customElements.define(tag, this);
+			preloadLinks(this);
 
 			if (altTag && !customElements.get(altTag)) {
-				class oldClassName extends this {}
 				registerTag(altTag);
-				window.customElements.define(altTag, oldClassName);
+				window.customElements.define(altTag, getClassCopy(this, () => {
+					console.log(`The ${altTag} tag is deprecated and will be removed in the next release, please use ${tag} instead.`); // eslint-disable-line
+				}));
 			}
 		}
 		return this;