fix: correct scoping issues with several components (#4820)

vladitasev · web-flow · commit 621dc205faa9 · 2022-02-25T16:39:59.000+02:00
diff --git a/packages/fiori/src/ViewSettingsDialog.js b/packages/fiori/src/ViewSettingsDialog.js
@@ -8,6 +8,7 @@ import Label from "@ui5/webcomponents/dist/Label.js";
 import GroupHeaderListItem from "@ui5/webcomponents/dist/GroupHeaderListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
 import SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js";
 import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js";
 import Bar from "./Bar.js";
@@ -251,6 +252,7 @@ class ViewSettingsDialog extends UI5Element {
 		return [
 			Bar,
 			Button,
+			Title,
 			Dialog,
 			Label,
 			List,
diff --git a/packages/main/src/Breadcrumbs.js b/packages/main/src/Breadcrumbs.js
@@ -24,6 +24,7 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 
 // Templates
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
@@ -567,6 +568,7 @@ class Breadcrumbs extends UI5Element {
 			List,
 			StandardListItem,
 			Icon,
+			Button,
 		];
 	}
 
diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js
@@ -277,7 +277,7 @@ class Calendar extends CalendarPart {
 
 		// Create tags for the selected dates that don't already exist in DOM
 		selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
-			const dateElement = document.createElement("ui5-date");
+			const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag());
 			dateElement.value = value;
 			this.appendChild(dateElement);
 		});
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
@@ -61,6 +61,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 
 /**
  * @public
@@ -1067,6 +1068,7 @@ class ComboBox extends UI5Element {
 			BusyIndicator,
 			Button,
 			StandardListItem,
+			GroupHeaderListItem,
 			Popover,
 			ComboBoxGroupItem,
 		];
diff --git a/packages/main/src/FileUploader.js b/packages/main/src/FileUploader.js
@@ -15,6 +15,7 @@ import {
 
 import Input from "./Input.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 
 // Template
 import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";
@@ -517,7 +518,7 @@ class FileUploader extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Input, Popover];
+		return [Input, Popover, Icon];
 	}
 
 	static async onDefine() {
diff --git a/packages/main/src/ProgressIndicator.js b/packages/main/src/ProgressIndicator.js
@@ -5,6 +5,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Icon from "./Icon.js";
 import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
 import {
 	VALUE_STATE_ERROR,
@@ -138,6 +139,10 @@ class ProgressIndicator extends UI5Element {
 		return ProgressIndicatorTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 
diff --git a/packages/main/src/RangeSlider.js b/packages/main/src/RangeSlider.js
@@ -6,6 +6,7 @@ import {
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js";
 
 // Texts
@@ -124,6 +125,10 @@ class RangeSlider extends SliderBase {
 		};
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
diff --git a/packages/main/src/SegmentedButtonItem.js b/packages/main/src/SegmentedButtonItem.js
@@ -1,6 +1,7 @@
 import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
 import ToggleButton from "./ToggleButton.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import Icon from "./Icon.js";
 
 import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
@@ -99,6 +100,10 @@ class SegmentedButtonItem extends ToggleButton {
 		return SegmentedButtonItemTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	get ariaDescription() {
 		return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
 	}
diff --git a/packages/main/src/Slider.js b/packages/main/src/Slider.js
@@ -2,6 +2,7 @@ import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 
 // Template
 import SliderTemplate from "./generated/templates/SliderTemplate.lit.js";
@@ -118,6 +119,10 @@ class Slider extends SliderBase {
 		this._setInitialValue("value", null);
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	/**
 	 *
 	 * Check if the previously saved state is outdated. That would mean
diff --git a/packages/main/src/SplitButton.js b/packages/main/src/SplitButton.js
@@ -14,6 +14,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import SplitButtonTemplate from "./generated/templates/SplitButtonTemplate.lit.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import Button from "./Button.js";
 
 import {
 	SPLIT_BUTTON_DESCRIPTION,
@@ -293,6 +294,10 @@ class SplitButton extends UI5Element {
 		return SplitButtonTemplate;
 	}
 
+	static get dependencies() {
+		return [Button];
+	}
+
 	static async onDefine() {
 		SplitButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
diff --git a/packages/main/src/TableRow.js b/packages/main/src/TableRow.js
@@ -8,6 +8,7 @@ import {
 	isTabNext,
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import CheckBox from "./CheckBox.js";
 import TableMode from "./types/TableMode.js";
 import TableRowType from "./types/TableRowType.js";
 import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
@@ -183,6 +184,10 @@ class TableRow extends UI5Element {
 		return TableRowTemplate;
 	}
 
+	static get dependencies() {
+		return [CheckBox];
+	}
+
 	_onmouseup() {
 		this.deactivate();
 	}
@@ -191,7 +196,7 @@ class TableRow extends UI5Element {
 		const itemActive = this.type === TableRowType.Active;
 		const isSingleSelect = this.isSingleSelect;
 		const itemSelectable = isSingleSelect || this.isMultiSelect;
-		const isRowFocused = this._getActiveElementTagName() === "ui5-table-row";
+		const isRowFocused = this._activeElementHasAttribute("ui5-table-row");
 		const checkboxPressed = event.target.classList.contains("ui5-multi-select-checkbox");
 
 		if (isTabNext(event) || isTabPrevious(event)) {
@@ -252,7 +257,7 @@ class TableRow extends UI5Element {
 	_onfocusin(event, forceSelfFocus = false) {
 		const tableRowRoot = this.shadowRoot.querySelector(".ui5-table-row-root");
 
-		if (forceSelfFocus || this._getActiveElementTagName() === "ui5-table-cell") {
+		if (forceSelfFocus || this._activeElementHasAttribute("ui5-table-cell")) {
 			tableRowRoot.focus();
 			this.activate();
 		}
@@ -280,7 +285,7 @@ class TableRow extends UI5Element {
 			this.deactivate();
 		}
 
-		if (this._getActiveElementTagName() === "ui5-table-row") {
+		if (this._activeElementHasAttribute("ui5-table-row")) {
 			if (this.isSingleSelect) {
 				this._handleSelection();
 			}
@@ -333,8 +338,8 @@ class TableRow extends UI5Element {
 		}
 	}
 
-	_getActiveElementTagName() {
-		return this.getRootNode().activeElement.localName.toLocaleLowerCase();
+	_activeElementHasAttribute(attr) {
+		return this.getRootNode().activeElement.hasAttribute(attr);
 	}
 
 	activate() {
diff --git a/packages/main/src/TextArea.js b/packages/main/src/TextArea.js
@@ -9,6 +9,7 @@ import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -688,7 +689,7 @@ class TextArea extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Popover];
+		return [Popover, Icon];
 	}
 
 	static async onDefine() {
diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
@@ -20,6 +20,8 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
+import Title from "./Title.js";
+import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import TokenizerTemplate from "./generated/templates/TokenizerTemplate.lit.js";
 import TokenizerPopoverTemplate from "./generated/templates/TokenizerPopoverTemplate.lit.js";
@@ -549,6 +551,8 @@ class Tokenizer extends UI5Element {
 			ResponsivePopover,
 			List,
 			StandardListItem,
+			Title,
+			Button,
 		];
 	}
 
diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js
@@ -7,6 +7,8 @@ import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
 import Button from "../Button.js";
+import Icon from "../Icon.js";
+import Popover from "../Popover.js";
 import GroupHeaderListItem from "../GroupHeaderListItem.js";
 import SuggestionListItem from "../SuggestionListItem.js";
 
@@ -578,6 +580,8 @@ class Suggestions {
 			SuggestionListItem,
 			GroupHeaderListItem,
 			Button,
+			Icon,
+			Popover,
 		];
 	}
 
diff --git a/packages/tools/lib/scoping/missing-dependencies.js b/packages/tools/lib/scoping/missing-dependencies.js
@@ -0,0 +1,65 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+const projectPath = process.argv[2];
+
+// gather all tags from all files
+const tagsToFiles = new Map();
+const filesToTags = new Map();
+
+let files = [
+	...glob.sync(path.join("packages/main/src/**/*.js")),
+	...glob.sync(path.join("packages/fiori/src/**/*.js")),
+];
+files.forEach(file => {
+	let matches = file.match(/([a-zA-Z0-9_]+)\.js$/);
+	const name = matches[1];
+
+	const content = `${fs.readFileSync(file)}`;
+	matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		const tag = matches[1];
+		tagsToFiles.set(tag, name);
+		filesToTags.set(name, tag);
+	}
+});
+
+// Process the package
+files = glob.sync(path.join(projectPath, "src/**/*.js"));
+tagsToFiles.forEach((file, tag) => {
+	const sourcePath = path.join(projectPath, "src/", `${file}.js`);
+	if (!fs.existsSync(sourcePath)) {
+		return;
+	}
+	const sourceContent = `${fs.readFileSync(sourcePath)}`.split("\n").join(" ");
+
+	const hbsPath = path.join(projectPath, "src/", `${file}.hbs`);
+	const hbsContent = fs.existsSync(hbsPath) ? `${fs.readFileSync(hbsPath)}` : "";
+
+	const hbsPopoverPath = path.join(projectPath, "src/", `${file}Popover.hbs`);
+	const hbsPopoverContent = fs.existsSync(hbsPopoverPath) ? `${fs.readFileSync(hbsPopoverPath)}` : "";
+
+	// deps
+	let deps = [];
+	let matches = sourceContent.match(/static get dependencies\(\) \{\s+return \[(.*?)\]/);
+	if (matches) {
+		deps = matches[1].split(",").map(x => x.trim()).filter(x => !!x);
+	}
+
+	// tags
+	matches = [
+		...hbsContent.matchAll(/<ui5-[a-z0-9-]+/g),
+		...hbsPopoverContent.matchAll(/<ui5-[a-z0-9-]+/g),
+	];
+	if (matches) {
+		matches.forEach(match => {
+			const tagUsed = match[0].substr(1);
+			const dep = tagsToFiles.get(tagUsed);
+			if (!deps.includes(dep)) {
+				console.log(`${file} used ${tagUsed}`);
+			}
+		});
+	}
+});
diff --git a/packages/tools/lib/scoping/report-tags-usage.js b/packages/tools/lib/scoping/report-tags-usage.js
@@ -0,0 +1,28 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+// gather all tags from all files
+const tags = new Set();
+const files = glob.sync(path.join(process.argv[2], "src/**/*.js"));
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		tags.add(matches[1]);
+	}
+});
+
+// report all usages of any tag within any file, which is not the tag definition and is not hasAttribute
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const lines = content.split("\n");
+	lines.forEach(line => {
+		tags.forEach(tag => {
+			if (line.includes(`"${tag}"`) && !line.includes(`tag: "${tag}",`) && !line.includes(`hasAttribute("${tag}")`)) {
+				console.log(`${file}: ${line.trim()}`);
+			}
+		});
+	});
+});

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ import {`
`15`	`15`
`16`	`16`	`import Input from "./Input.js";`
`17`	`17`	`import Popover from "./Popover.js";`
	`18`	`+import Icon from "./Icon.js";`
`18`	`19`
`19`	`20`	`// Template`
`20`	`21`	`import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";`
`@@ -517,7 +518,7 @@ class FileUploader extends UI5Element {`
`517`	`518`	`}`
`518`	`519`
`519`	`520`	`static get dependencies() {`
`520`		`- return [Input, Popover];`
	`521`	`+ return [Input, Popover, Icon];`
`521`	`522`	`}`
`522`	`523`
`523`	`524`	`static async onDefine() {`