chore(framework): remove component features (#10624)

docs/2-advanced/05-using-features.md

@@ -20,30 +20,22 @@ You can import the feature file from the respective NPM package:
 
 `import "@ui5/<PACKAGE-NAME>/dist/features/<FEATURE-NAME>.js`
 
+As of `2.7.0` some component features are automatically loaded on demand, but can still be pre-loaded to skip the dynamic import, if that's what you prefer. Refer to the table below for details:
+
 ## Component Features
 
 Currently, only a few components offer additional features:
 
 | Package        | Affected Components                                | Feature Import                                                       | Description                                                                                             |
 |----------------|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `main`         | `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
-| `main`         | `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Adds support for input suggestions while typing                                                                  |
+| `main`         | `ui5-color-palette`                               | dynamically loaded if `showMoreColors` is set to `true` (to pre-load: `import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"` )        | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
+| `main`         | `ui5-input`                                       | dynamically loaded if `showSuggestions` is set to `true`(to pre-load: `import "@ui5/webcomponents/dist/features/InputSuggestions.js"` )              | Adds support for input suggestions while typing                                                                  |
 | `main`         | Multiple (e.g., `ui5-input`, `ui5-date-picker`)   | `@ui5/webcomponents/dist/features/InputElementsFormSupport.js`       | Adds support for the use of input components within forms                                                          |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js` | Adds support for the Buddhist calendars                                                                   |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Islamic.js`  | Adds support for the Islamic calendars                                                                    |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Japanese.js` | Adds support for the Japanese calendars                                                                   |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Persian.js`  | Adds support for the Persian calendars                                                                    |
 
-**Note:** Features must be imported before all component modules to ensure the feature is enabled before to the components' definition. For example:
-
-```js
-import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;";
-
-import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Link.js";
-import "@ui5/webcomponents/dist/Input.js";
-```
-
 ## Framework Features
 
 | Package        | Affects                                           | Feature Import                                                       | Description                                                                                             |

packages/ai/src/PromptInput.ts

@@ -183,8 +183,6 @@ class PromptInput extends UI5Element {
 	/**
 	 * Defines whether the component should show suggestions, if such are present.
 	 *
-	 * **Note:** You need to import the `InputSuggestions` module
-	 * from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality.
 	 * @default false
 	 * @public
 	 */
@@ -199,11 +197,6 @@ class PromptInput extends UI5Element {
 	 *
 	 * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
 	 *
-	 * **Note:** Importing the Input Suggestions Support feature:
-	 *
-	 * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";`
-	 *
-	 * automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.
 	 * @public
 	 */
 		@slot({ type: HTMLElement, "default": true })

packages/base/src/FeaturesRegistry.ts

@@ -1,28 +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[]) {}
-
-	/**
-	 * @deprecated assign the feature's "i18nBundle" static member directly from the component that uses the feature
-	 */
-	static define?: () => Promise<void>;
-	/**
-	 * @deprecated no longer necessary for jsxRenderer-enabled components
-	 */
-	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);
@@ -32,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 | undefined => {
-	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

@@ -39,7 +39,6 @@ import type {
 } from "./types.js";
 import { updateFormValue, setFormValue } from "./features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "./features/InputElementsFormSupport.js";
-import { getComponentFeature, subscribeForFeatureLoad } from "./FeaturesRegistry.js";
 import { getI18nBundle } from "./i18nBundle.js";
 import type I18nBundle from "./i18nBundle.js";
 import { fetchCldr } from "./asset-registries/LocaleData.js";
@@ -1322,16 +1321,6 @@ abstract class UI5Element extends HTMLElement {
 
 		const tag = this.getMetadata().getTag();
 
-		const features = this.getMetadata().getFeatures();
-
-		features.forEach(feature => {
-			if (getComponentFeature(feature)) {
-				this.cacheUniqueDependencies();
-			}
-
-			subscribeForFeatureLoad(feature, this, this.cacheUniqueDependencies.bind(this));
-		});
-
 		const definedLocally = isTagRegistered(tag);
 		const definedGlobally = customElements.get(tag);
 

packages/base/src/UI5ElementMetadata.ts

@@ -107,14 +107,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

@@ -57,6 +57,7 @@ const customElement = (tagNameOrComponentSettings: string | {
 	shadowRootOptions?: Partial<ShadowRootInit>,
 	/**
 	 * A list of all features, supported by the custom element.
+	 * @deprecated no longer necessary for jsxRenderer-enabled components
 	 */
 	features?: Array<string>,
 } = {}): ClassDecorator => {
@@ -78,7 +79,6 @@ const customElement = (tagNameOrComponentSettings: string | {
 			fastNavigation,
 			formAssociated,
 			shadowRootOptions,
-			features,
 		 } = tagNameOrComponentSettings;
 
 		target.metadata.tag = tag;
@@ -89,10 +89,6 @@ const customElement = (tagNameOrComponentSettings: string | {
 			target.metadata.cldr = cldr;
 		}
 
-		if (features) {
-			target.metadata.features = features;
-		}
-
 		if (themeAware) {
 			target.metadata.themeAware = themeAware;
 		}

packages/fiori/cypress/specs/ShellBar.cy.ts

@@ -8,7 +8,6 @@ import "@ui5/webcomponents/dist/Switch.js";
 import "@ui5/webcomponents/dist/Tag.js";
 import "@ui5/webcomponents/dist/Avatar.js";
 import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/features/InputSuggestions.js";
 import "@ui5/webcomponents/dist/SuggestionItem.js";
 import "@ui5/webcomponents/dist/SuggestionItemCustom.js";
 import "@ui5/webcomponents/dist/SuggestionItemGroup.js";

packages/main/README.md

@@ -93,37 +93,41 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 
 ## Provided features
 
-```js
-import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
-```
-
-| Affects                                           | Feature Import                                                       | Description                                                                                             |
-|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Support for "more colors dialog" for the color palette component                                        |
-| `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Support for input suggestions while typing                                                              |
+| Feature name             | Affects                                               | Triggered by                            | Description                                                                                             |
+|--------------------------|-------------------------------------------------------|-----------------------------------------|---------------------------------------------------------------------------------------------------------|
+| More Colors Dialog       | `ui5-color-palette`, `ui5-color-palette-popover`      | Setting `showMoreColors` to `true`      | Support for "more colors dialog" for the color palette component                                        |
+| Input Suggestions        | `ui5-input`, `ui5-multi-input`                        | Setting `showSuggestions` to `true`     | Support for input suggestions while typing                                                              |
 
 ### Color Palette "More Colors" Feature
 
+The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
+Since this functionality is not always needed, the "More colors" dialog and its children are not direct dependencies of the component by default,
+and are only loaded dynamically when `showMoreColors` is set to `true`.
+
+Feature import (optional as of `2.7.0`): 
+
 ```js
 import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
 ```
 
-The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
-Since this is not always needed, in order to use this dialog, you must import the above feature.
+You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so. 
 
 ### Input Suggestions Feature
 
-```js
-import "@ui5/webcomponents/dist/features/InputSuggestions.js";
-```
-
 The `<ui5-input>` element acts as an `<input>` with the Fiori design and added functionality, such as value state.
 
 The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing.
 Since input suggestions may not always be needed, they do not come as part of the `<ui5-input>` itself.
 
-To enable the functionality, import the above module into your app. This will also automatically import `ui5-suggestion-item`
-for your convenience.
+Setting the `showSuggestions` property to `true` loads the suggestions feature dynamically (as well as the `ui5-suggestion-item` component) for your convenience.
+
+Feature import (optional as of `2.7.0`):  
+
+```js
+import "@ui5/webcomponents/dist/features/InputSuggestions.js";
+```
+
+You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.
 
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)

packages/main/cypress/specs/ColorPalette.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/ColorPalette.js";
 import "../../src/ColorPaletteItem.js";
-import "../../src/features/ColorPaletteMoreColors.js";
 
 describe("Color Palette tests", () => {
 	it("internal color picker should have selected color set on open", () => {

packages/main/cypress/specs/Input.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/Input.js";
 import type Input from "../../src/Input.js";
-import "../../src/features/InputSuggestions.js";
 import "../../src/SuggestionItem.js";
 import "../../src/SuggestionItemCustom.js";
 import "../../src/SuggestionItemGroup.js";

packages/main/cypress/specs/MultiInput.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/MultiInput.js";
 import "../../src/Tokenizer.js";
-import "../../src/features/InputSuggestions.js";
 import "../../src/SuggestionItem.js";
 
 describe("MultiInput Web Component", () => {

packages/main/cypress/specs/base/Events.cy.ts

@@ -4,7 +4,6 @@ import "../../../src/Select.js";
 import "../../../src/Option.js";
 import "../../../src/Input.js";
 import "../../../src/SuggestionItem.js";
-import "../../../src/features/InputSuggestions.js";
 import "../../../src/MessageStrip.js";
 import "../../../src/MultiComboBox.js";
 import "../../../src/MultiComboBoxItem.js";

packages/main/cypress/support/commands/ColorPalette.commands.ts

@@ -42,8 +42,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 	cy.get("@colorPalette")
 		.shadow()
 		.find("ui5-dialog")
-		.find("ui5-button")
-		.should("have.attr", "design", "Emphasized") // The OK button is Emphasized (the Cancel button is Transparent)
+		.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
 	cy.get("@redColor")
@@ -59,6 +58,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 		.should("have.attr", "value", values.a);
 
 	cy.get("@okButton")
+		.should("be.visible") // Make sure the OK button is rendered before clicking it
 		.realClick();
 
 	cy.get("@colorPalette")

packages/main/src/ColorPalettePopover.ts

@@ -90,7 +90,6 @@ class ColorPalettePopover extends UI5Element {
 	/**
 	 * Defines whether the user can choose a custom color from a component.
 	 *
-	 * **Note:** In order to use this property you need to import the following module: `"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"`
 	 * @default false
 	 * @public
 	 */

packages/main/src/Input.ts

@@ -163,11 +163,6 @@ type InputSuggestionScrollEventDetail = {
  * When the user makes changes to the text, the change event is fired,
  * which enables you to react on any text change.
  *
- * **Note:** If you are using the `ui5-input` as a single npm module,
- * don't forget to import the `InputSuggestions` module from
- * "@ui5/webcomponents/dist/features/InputSuggestions.js"
- * to enable the suggestions functionality.
- *
  * ### Keyboard Handling
  * The `ui5-input` provides the following keyboard shortcuts:
  *
@@ -184,8 +179,6 @@ type InputSuggestionScrollEventDetail = {
  *
  * `import "@ui5/webcomponents/dist/Input.js";`
  *
- * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";` (optional - for input suggestions support)
- *
  * @constructor
  * @extends UI5Element
  * @public
@@ -412,8 +405,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	/**
 	 * Defines whether the component should show suggestions, if such are present.
 	 *
-	 * **Note:** You need to import the `InputSuggestions` module
-	 * from `"@ui5/webcomponents/dist/features/InputSuggestions.js"` to enable this functionality.
 	 * @default false
 	 * @public
 	 */
@@ -537,11 +528,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	 *
 	 * **Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.
 	 *
-	 * **Note:** Importing the Input Suggestions Support feature:
-	 *
-	 * `import "@ui5/webcomponents/dist/features/InputSuggestions.js";`
-	 *
-	 * automatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.
 	 * @public
 	 */
 	@slot({ type: HTMLElement, "default": true })