Revert "chore: fix features loading" (#9573)

This reverts commit 74a8a4c.

Author: nnaydenow

packages/base/src/FeaturesRegistry.ts

@@ -1,21 +1,4 @@
-import EventProvider from "./EventProvider.js";
-import type UI5Element from "./UI5Element.js";
-
-abstract class ComponentFeature {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-empty-function
-	constructor(...args: any[]) {}
-	static define?: () => Promise<void>;
-	static dependencies?: Array<typeof UI5Element>
-}
-
 const features = new Map<string, any>();
-const componentFeatures = new Map<string, ComponentFeature>();
-const subscribers = new Map<typeof UI5Element, Array<string>>();
-
-const EVENT_NAME = "componentFeatureLoad";
-const eventProvider = new EventProvider<undefined, void>();
-
-const featureLoadEventName = (name: string) => `${EVENT_NAME}_${name}`;
 
 const registerFeature = (name: string, feature: object) => {
 	features.set(name, feature);
@@ -25,44 +8,7 @@ const getFeature = <T>(name: string): T => {
 	return features.get(name) as T;
 };
 
-const registerComponentFeature = async (name: string, feature: typeof ComponentFeature) => {
-	await Promise.all(feature.dependencies?.map(dep => dep.define()) || []);
-	await feature.define?.();
-
-	componentFeatures.set(name, feature);
-	notifyForFeatureLoad(name);
-};
-
-const getComponentFeature = <T>(name: string): T => {
-	return componentFeatures.get(name) as T;
-};
-
-const subscribeForFeatureLoad = (name: string, klass: typeof UI5Element, callback: () => void) => {
-	const subscriber = subscribers.get(klass);
-	const isSubscribed = subscriber?.includes(name);
-
-	if (isSubscribed) {
-		return;
-	}
-
-	if (!subscriber) {
-		subscribers.set(klass, [name]);
-	} else {
-		subscriber.push(name);
-	}
-
-	eventProvider.attachEvent(featureLoadEventName(name), callback);
-};
-
-const notifyForFeatureLoad = (name: string) => {
-	eventProvider.fireEvent(featureLoadEventName(name), undefined);
-};
-
 export {
 	registerFeature,
 	getFeature,
-	registerComponentFeature,
-	getComponentFeature,
-	subscribeForFeatureLoad,
-	ComponentFeature,
 };

packages/base/src/UI5Element.ts

@@ -34,7 +34,6 @@ import type {
 	ComponentStylesData,
 	ClassMap,
 } from "./types.js";
-import { subscribeForFeatureLoad } from "./FeaturesRegistry.js";
 
 let autoId = 0;
 
@@ -1140,19 +1139,15 @@ abstract class UI5Element extends HTMLElement {
 		return [];
 	}
 
-	static cacheUniqueDependencies(this: typeof UI5Element): void {
-		const filtered = this.dependencies.filter((dep, index, deps) => deps.indexOf(dep) === index);
-		uniqueDependenciesCache.set(this, filtered);
-	}
-
 	/**
 	 * Returns a list of the unique dependencies for this UI5 Web Component
 	 *
 	 * @public
 	 */
 	static getUniqueDependencies(this: typeof UI5Element): Array<typeof UI5Element> {
 		if (!uniqueDependenciesCache.has(this)) {
-			this.cacheUniqueDependencies();
+			const filtered = this.dependencies.filter((dep, index, deps) => deps.indexOf(dep) === index);
+			uniqueDependenciesCache.set(this, filtered);
 		}
 
 		return uniqueDependenciesCache.get(this) || [];
@@ -1188,12 +1183,6 @@ abstract class UI5Element extends HTMLElement {
 
 		const tag = this.getMetadata().getTag();
 
-		const features = this.getMetadata().getFeatures();
-
-		features.forEach(feature => {
-			subscribeForFeatureLoad(feature, this, this.cacheUniqueDependencies.bind(this));
-		});
-
 		const definedLocally = isTagRegistered(tag);
 		const definedGlobally = customElements.get(tag);
 

packages/base/src/UI5ElementMetadata.ts

@@ -41,7 +41,6 @@ type Metadata = {
 	fastNavigation?: boolean,
 	themeAware?: boolean,
 	languageAware?: boolean,
-	features?: Array<string>
 };
 
 type State = Record<string, PropertyValue | Array<SlotValue>>;
@@ -143,14 +142,6 @@ class UI5ElementMetadata {
 		return this.metadata.tag || "";
 	}
 
-	/**
-	 * Returns the tag of the UI5 Element without the scope
-	 * @private
-	 */
-	getFeatures(): Array<string> {
-		return this.metadata.features || [];
-	}
-
 	/**
 	 * Returns the tag of the UI5 Element
 	 * @public

packages/base/src/decorators/customElement.ts

@@ -20,7 +20,6 @@ const customElement = (tagNameOrComponentSettings: string | {
 	languageAware?: boolean,
 	themeAware?: boolean,
 	fastNavigation?: boolean,
-	features?: Array<string>,
 } = {}): ClassDecorator => {
 	return (target: any) => {
 		if (!Object.prototype.hasOwnProperty.call(target, "metadata")) {
@@ -37,18 +36,12 @@ const customElement = (tagNameOrComponentSettings: string | {
 			languageAware,
 			themeAware,
 			fastNavigation,
-			features,
 		 } = tagNameOrComponentSettings;
 
 		target.metadata.tag = tag;
 		if (languageAware) {
 			target.metadata.languageAware = languageAware;
 		}
-
-		if (features) {
-			target.metadata.features = features;
-		}
-
 		if (themeAware) {
 			target.metadata.themeAware = themeAware;
 		}

packages/main/src/Input.hbs

@@ -58,7 +58,7 @@
 
 		{{> postContent }}
 
-		{{#if _effectiveShowSuggestions}}
+		{{#if showSuggestions}}
 			<span id="{{_id}}-suggestionsText" class="ui5-hidden-text">{{suggestionsText}}</span>
 			<span id="{{_id}}-selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
 			<span id="{{_id}}-suggestionsCount" class="ui5-hidden-text" aria-live="polite">{{availableSuggestionsCount}}</span>

packages/main/src/Input.ts

@@ -13,7 +13,7 @@ import {
 	isAndroid,
 } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getFeature, getComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import {
 	isUp,
 	isDown,
@@ -199,9 +199,8 @@ type InputSuggestionScrollEventDetail = {
 	staticAreaTemplate: InputPopoverTemplate,
 	styles: inputStyles,
 	staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss],
-	features: ["InputSuggestions"],
 	get dependencies() {
-		const Suggestions = getComponentFeature<typeof InputSuggestions>("InputSuggestions");
+		const Suggestions = getFeature<typeof InputSuggestions>("InputSuggestions");
 		return ([Popover, Icon] as Array<typeof UI5Element>).concat(Suggestions ? Suggestions.dependencies : []);
 	},
 })
@@ -651,7 +650,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 
 		if (this.showSuggestions) {
 			this.enableSuggestions();
-			this.suggestionObjects = this.Suggestions?.defaultSlotProperties(this.typedInValue) || [];
+			this.suggestionObjects = this.Suggestions!.defaultSlotProperties(this.typedInValue);
 		}
 
 		this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
@@ -695,10 +694,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		}
 	}
 
-	get _effectiveShowSuggestions() {
-		return !!(this.showSuggestions && this.Suggestions);
-	}
-
 	async onAfterRendering() {
 		const innerInput = this.getInputDOMRefSync()!;
 
@@ -794,13 +789,13 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	_handleUp(e: KeyboardEvent) {
-		if (this.Suggestions?.isOpened()) {
+		if (this.Suggestions && this.Suggestions.isOpened()) {
 			this.Suggestions.onUp(e);
 		}
 	}
 
 	_handleDown(e: KeyboardEvent) {
-		if (this.Suggestions?.isOpened()) {
+		if (this.Suggestions && this.Suggestions.isOpened()) {
 			this.Suggestions.onDown(e);
 		}
 	}
@@ -818,8 +813,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	_handleEnter(e: KeyboardEvent) {
-		// if a group item is focused, this is false
-		const suggestionItemPressed = !!(this.Suggestions?.onEnter(e));
+		const suggestionItemPressed = !!(this.Suggestions && this.Suggestions.onEnter(e));
+
 		const innerInput = this.getInputDOMRefSync()!;
 		// Check for autocompleted item
 		const matchingItem = this.suggestionItems.find(item => {
@@ -855,29 +850,29 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 
 	_handlePageUp(e: KeyboardEvent) {
 		if (this._isSuggestionsFocused) {
-			this.Suggestions?.onPageUp(e);
+			this.Suggestions!.onPageUp(e);
 		} else {
 			e.preventDefault();
 		}
 	}
 
 	_handlePageDown(e: KeyboardEvent) {
 		if (this._isSuggestionsFocused) {
-			this.Suggestions?.onPageDown(e);
+			this.Suggestions!.onPageDown(e);
 		} else {
 			e.preventDefault();
 		}
 	}
 
 	_handleHome(e: KeyboardEvent) {
 		if (this._isSuggestionsFocused) {
-			this.Suggestions?.onHome(e);
+			this.Suggestions!.onHome(e);
 		}
 	}
 
 	_handleEnd(e: KeyboardEvent) {
 		if (this._isSuggestionsFocused) {
-			this.Suggestions?.onEnd(e);
+			this.Suggestions!.onEnd(e);
 		}
 	}
 
@@ -894,7 +889,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 			return;
 		}
 
-		if (isOpen && this.Suggestions?._isItemOnTarget()) {
+		if (isOpen && this.Suggestions!._isItemOnTarget()) {
 			// Restore the value.
 			this.value = this.typedInValue || this.valueBeforeItemPreview;
 
@@ -980,8 +975,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 		this._isValueStateFocused = false;
 		this.hasSuggestionItemSelected = false;
 
-		this.Suggestions?._deselectItems();
-		this.Suggestions?._clearItemFocus();
+		this.Suggestions._deselectItems();
+		this.Suggestions._clearItemFocus();
 	}
 
 	_click() {
@@ -1216,9 +1211,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 			return;
 		}
 
-		const Suggestions = getComponentFeature<typeof InputSuggestions>("InputSuggestions");
+		const Suggestions = getFeature<typeof InputSuggestions>("InputSuggestions");
+
 		if (Suggestions) {
 			this.Suggestions = new Suggestions(this, "suggestionItems", true, false);
+		} else {
+			throw new Error(`You have to import "@ui5/webcomponents/dist/features/InputSuggestions.js" module to use ui5-input suggestions`);
 		}
 	}
 
@@ -1399,7 +1397,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 			return Promise.resolve(false);
 		}
 
-		return this.Suggestions?._isScrollable();
+		return this.Suggestions._isScrollable();
 	}
 
 	getInputId() {
@@ -1627,7 +1625,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	get availableSuggestionsCount() {
-		if (this.showSuggestions && (this.value || this.Suggestions?.isOpened())) {
+		if (this.showSuggestions && (this.value || this.Suggestions!.isOpened())) {
 			const nonGroupItems = this.suggestionObjects.filter(item => !item.groupItem);
 
 			switch (nonGroupItems.length) {
@@ -1654,7 +1652,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	get _isSuggestionsFocused() {
-		return !this.focused && this.Suggestions?.isOpened();
+		return !this.focused && this.Suggestions && this.Suggestions.isOpened();
 	}
 
 	/**
@@ -1737,7 +1735,12 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	static async onDefine() {
-		Input.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+		const Suggestions = getFeature<typeof InputSuggestions>("InputSuggestions");
+
+		[Input.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			Suggestions ? Suggestions.init() : Promise.resolve(),
+		]);
 	}
 }
 

packages/main/src/InputPopover.hbs

@@ -1,4 +1,4 @@
-{{#if _effectiveShowSuggestions}}
+{{#if showSuggestions}}
 	<ui5-responsive-popover
 		class="{{classes.popover}}"
 		hide-arrow

packages/main/src/features/InputSuggestions.ts

@@ -1,5 +1,5 @@
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 // @ts-ignore
@@ -66,7 +66,7 @@ type SuggestionsAccInfo = {
  * @class
  * @private
  */
-class Suggestions extends ComponentFeature {
+class Suggestions {
 	component: SuggestionComponent;
 	slotName: string;
 	handleFocus: boolean;
@@ -85,7 +85,6 @@ class Suggestions extends ComponentFeature {
 	static SCROLL_STEP = 60;
 
 	constructor(component: SuggestionComponent, slotName: string, highlight: boolean, handleFocus: boolean) {
-		super();
 		// The component, that the suggestion would plug into.
 		this.component = component;
 
@@ -672,13 +671,13 @@ class Suggestions extends ComponentFeature {
 		];
 	}
 
-	static async define() {
+	static async init() {
 		Suggestions.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 
 // Add suggestions support to the global features registry so that Input.js can use it
-registerComponentFeature("InputSuggestions", Suggestions);
+registerFeature("InputSuggestions", Suggestions);
 
 export default Suggestions;