fix(tools): dependencies usage (#12716)

nnaydenow · web-flow · commit 89bb0dd62322 · 2025-12-02T16:26:30.000+02:00
Switch to module consumption of 3rd party dependencies in order to avoid problem when trying to access their bins especially in the case of monorepo where different versions of packages are installed. that's because `@ui5/webcomponents-tools` is using bins from transitive dependencies.
diff --git a/packages/ai/package.json b/packages/ai/package.json
@@ -55,9 +55,7 @@
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
     "@ui5/webcomponents-tools": "2.17.0-rc.4",
-    "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
     "vite": "5.4.21"
   }
 }
diff --git a/packages/base/package-scripts.cjs b/packages/base/package-scripts.cjs
@@ -24,7 +24,7 @@ const scripts = {
 		"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
 		"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
 	},
-	lint: `eslint .`,
+	lint: `ui5nps-script "${LIB}/eslint/eslint.js"`,
 	generate: "ui5nps clean build.i18n integrate copy generateAssetParameters generateVersionInfo generateStyles generateFontFace build.jsonImports",
 	prepare: "ui5nps clean build.i18n integrate copy generateAssetParameters generateVersionInfo generateStyles generateFontFace typescript integrate.no-remaining-require build.jsonImports",
 	typescript: "tsc -b",
@@ -41,7 +41,7 @@ const scripts = {
 	},
 	build: {
 		default: `ui5nps prepare`,
-		bundle: `vite build ${viteConfig}`,
+		bundle: `ui5nps-script "${LIB}/vite-bundler/vite-bundler.mjs" ${viteConfig}`,
 		i18n: {
 			default: "ui5nps build.i18n.defaultsjs build.i18n.json",
 			defaultsjs: `ui5nps-script "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
@@ -82,7 +82,7 @@ const scripts = {
 		withBundle: 'ui5nps-p watch.src watch.bundle watch.styles', // concurently
 		src: 'ui5nps copy.srcWithWatch',
 		bundle: `ui5nps-script ${LIB}/dev-server/dev-server.mjs ${viteConfig}`,
-		styles: 'chokidar "src/css/*.css" -c "ui5nps generateStyles"'
+		styles: `ui5nps-script "${LIB}/chokidar/chokidar.js" "src/css/*.css" "ui5nps generateStyles"`
 	},
 	test: {
 		default: 'ui5nps-p test.ssr test.ssr2 test.test-cy-ci', // concurently
diff --git a/packages/base/package.json b/packages/base/package.json
@@ -65,11 +65,8 @@
     "@sap-theming/theming-base-content": "11.29.3",
     "@ui5/cypress-internal": "0.1.0",
     "@ui5/webcomponents-tools": "2.17.0-rc.4",
-    "chokidar-cli": "^3.0.0",
     "clean-css": "^5.2.2",
     "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
-    "mkdirp": "^1.0.4",
     "mocha": "^11.7.2",
     "replace-in-file": "^6.3.5",
     "resolve": "^1.20.0",
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
@@ -180,7 +180,7 @@ abstract class UI5Element extends HTMLElement {
 	eventDetails!: NotEqual<this, UI5Element> extends true ? object : {
 		[k: string]: any
 	};
-	_jsxEvents!: Omit<JSX.DOMAttributes<this>, keyof Convert<this["eventDetails"], this> | "onClose" | "onToggle" | "onChange" | "onSelect" | "onInput"> & Convert<this["eventDetails"], this>
+	_jsxEvents!: Omit<JSX.DOMAttributes<this>, keyof Convert<this["eventDetails"], this> | "onClose" | "onToggle" | "onChange" | "onSelect" | "onInput"> & Convert<this["eventDetails"], this>;
 	_jsxProps!: Pick<JSX.AllHTMLAttributes<HTMLElement>, GlobalHTMLAttributeNames> & ElementProps<this> & Partial<this["_jsxEvents"]> & { key?: any };
 	__id?: string;
 	_suppressInvalidation: boolean;
diff --git a/packages/base/src/util/SelectionAssistant.ts b/packages/base/src/util/SelectionAssistant.ts
@@ -90,7 +90,7 @@ const getElementSelection = (element: HTMLElement) => {
 	copiedElement.textContent = innerElement!.value;
 
 	if (innerElement) {
-		copyAndApplyStyles(innerElement, copiedElement)!;
+		copyAndApplyStyles(innerElement, copiedElement);
 	}
 
 	return getSelectionCoordinates(innerElement!, copiedElement as HTMLDivElement);
diff --git a/packages/compat/package.json b/packages/compat/package.json
@@ -55,9 +55,7 @@
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
     "@ui5/webcomponents-tools": "2.17.0-rc.4",
-    "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
     "vite": "5.4.21"
   }
 }
diff --git a/packages/compat/src/utils/CompatCustomElementsScope.ts b/packages/compat/src/utils/CompatCustomElementsScope.ts
@@ -26,7 +26,7 @@ const patchScopingSuffix = (klass: typeof UI5Element) => {
 	// eslint-disable-next-line @typescript-eslint/unbound-method
 	const originalGetTag = metadata.getTag;
 
-	metadata.getTag = function () {
+	metadata.getTag = function getTag() {
 		const originalTag = originalGetTag.call(this);
 
 		if (!originalTag) {
diff --git a/packages/create-package/package.json b/packages/create-package/package.json
@@ -17,8 +17,6 @@
     "directory": "packages/create-package"
   },
   "dependencies": {
-    "chokidar-cli": "^3.0.0",
-    "mkdirp": "^1.0.4",
     "npm-config-user-agent-parser": "^1.0.0",
     "prettier": "^3.5.3",
     "prompts": "^2.4.1",
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
@@ -62,9 +62,7 @@
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
     "@ui5/webcomponents-tools": "2.17.0-rc.4",
-    "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
diff --git a/packages/localization/package-scripts.cjs b/packages/localization/package-scripts.cjs
@@ -13,7 +13,7 @@ const scripts = {
 		"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
 		"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
 	},
-	lint: "eslint .",
+	lint: `ui5nps-script "${LIB}eslint/eslint.js"`,
 	generate: "ui5nps clean copy.used-modules copy.cldr copy.overlay build.amd-to-es6 build.jsonImports",
 	build: {
 		"default": "ui5nps clean copy.used-modules copy.cldr copy.overlay build.amd-to-es6 build.jsonImports build.typescript build.no-remaining-require",
diff --git a/packages/localization/package.json b/packages/localization/package.json
@@ -35,9 +35,7 @@
     "@openui5/sap.ui.core": "1.120.17",
     "@ui5/webcomponents-tools": "2.17.0-rc.4",
     "babel-plugin-amd-to-esm": "^2.0.3",
-    "eslint": "^7.22.0",
     "estree-walk": "^2.2.0",
-    "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },
   "dependencies": {
diff --git a/packages/main/package.json b/packages/main/package.json
@@ -63,9 +63,7 @@
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
     "@ui5/webcomponents-tools": "2.17.0-rc.4",
-    "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
-    "eslint": "^7.22.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
@@ -1410,7 +1410,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_getPickerInput() {
-		return this._getPicker()!.querySelector<HTMLInputElement>("[ui5-input]")!;
+		return this._getPicker().querySelector<HTMLInputElement>("[ui5-input]")!;
 	}
 
 	get openOnMobile() {
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -1100,7 +1100,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 		if (isArrowDown || isDownCtrl(e)) {
 			if (this.showSelectAll && !isSelectAllFocused) {
-				return (this._getResponsivePopover()!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
+				return (this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
 			}
 
 			this._handleArrowDown();
@@ -1197,7 +1197,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 					return;
 				}
 
-				(this._getResponsivePopover()!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
+				(this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
 			} else {
 				this._inputDom.focus();
 				this._shouldAutocomplete = true;
@@ -1237,7 +1237,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 		if (isArrowDown && this.open) {
 			if (this.showSelectAll) {
-				(this._getResponsivePopover()!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
+				(this._getResponsivePopover().querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
 				return;
 			}
 		}
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
@@ -396,7 +396,7 @@ class TextArea extends UI5Element implements IFormInputElement {
 	}
 
 	onAfterRendering() {
-		const nativeTextArea = this.getInputDomRef()!;
+		const nativeTextArea = this.getInputDomRef();
 
 		if (this.rows === 1) {
 			nativeTextArea.setAttribute("rows", "1");
@@ -463,7 +463,7 @@ class TextArea extends UI5Element implements IFormInputElement {
 	}
 
 	_oninput(e: InputEvent) {
-		const nativeTextArea = this.getInputDomRef()!;
+		const nativeTextArea = this.getInputDomRef();
 
 		if (e.target === nativeTextArea) {
 			// stop the native event, as the semantic "input" would be fired.
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
@@ -654,7 +654,7 @@ class Tokenizer extends UI5Element implements IFormInputElement {
 
 	handleBeforeOpen() {
 		const list = this._getList();
-		const firstListItem = list.querySelectorAll("[ui5-li]")[0]! as ListItem;
+		const firstListItem = list.querySelectorAll("[ui5-li]")[0] as ListItem;
 
 		list._itemNavigation.setCurrentItem(firstListItem);
 
diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts
@@ -375,7 +375,7 @@ class Suggestions {
 		this.onItemSelect(currentItem);
 
 		if (!this._isItemIntoView(currentItem)) {
-			const itemRef = this._isGroupItem ? (currentItem.shadowRoot!.querySelector("[ui5-li-group-header]") as ListItemGroupHeader)! : currentItem;
+			const itemRef = this._isGroupItem ? (currentItem.shadowRoot!.querySelector("[ui5-li-group-header]") as ListItemGroupHeader) : currentItem;
 			this._scrollItemIntoView(itemRef);
 		}
 	}
@@ -423,7 +423,7 @@ class Suggestions {
 
 	_getScrollContainer() {
 		if (!this._scrollContainer) {
-			this._scrollContainer = this._getPicker()!.shadowRoot!.querySelector(".ui5-popup-content")!;
+			this._scrollContainer = this._getPicker().shadowRoot!.querySelector(".ui5-popup-content")!;
 		}
 
 		return this._scrollContainer;
diff --git a/packages/tools/bin/ui5nps.js b/packages/tools/bin/ui5nps.js
@@ -165,7 +165,12 @@ class Parser {
 			return new Promise(async (resolve, reject) => {
 				if (command.trim().startsWith("ui5nps-script")) {
 					const argv = parseArgsStringToArgv(command);
-					const importedContent = require(argv[1]);
+					if (!path.isAbsolute(argv[1])) {
+						throw new Error(`Script path must be absolute: ${argv[1]}`);
+					}
+
+					const importPath = argv[1];
+					const importedContent = require(importPath);
 					let _ui5mainFn;
 
 					if (importedContent.__esModule) {
@@ -174,6 +179,10 @@ class Parser {
 						_ui5mainFn = importedContent._ui5mainFn;
 					}
 
+					if (!_ui5mainFn) {
+						return reject(new Error(`No valid _ui5mainFn function exported from ${importPath} tried to be executed with ui5nps-script. Either provide a valid _ui5mainFn function or use another way to execute the script (via node).`));
+					}
+
 					console.log(` |  Executing command ${commandName} as module.`);
 					const result = _ui5mainFn(argv);
 
diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
@@ -66,15 +66,6 @@ const getScripts = (options) => {
 		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
 	}
 
-	let eslintConfig;
-	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
-		// preferred way of custom configuration in root project folder
-		eslintConfig = "";
-	} else {
-		// no custom configuration - use default from tools project
-		eslintConfig = `--config "${require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")}"`;
-	}
-
 	const scripts = {
 		__ui5envs: {
 			UI5_CEM_MODE: options.dev,
@@ -86,8 +77,8 @@ const getScripts = (options) => {
 			"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
 			"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
 		},
-		lint: `eslint . ${eslintConfig}`,
-		lintfix: `eslint . ${eslintConfig} --fix`,
+		lint: `ui5nps-script "${LIB}eslint/eslint.js"`,
+		lintfix: `ui5nps-script "${LIB}eslint/eslint.js" --fix`,
 		generate: {
 			default: `ui5nps prepare.all`,
 			all: `ui5nps-p build.templates build.i18n prepare.styleRelated copyProps build.illustrations`, // concurently
@@ -101,7 +92,7 @@ const getScripts = (options) => {
 		},
 		build: {
 			default: "ui5nps prepare lint build.bundle", // build.bundle2
-			templates: options.legacy ? `mkdirp src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
+			templates: options.legacy ? `mkdir -p src/generated/templates && node "${LIB}hbs2ui5/index.js" -d src/ -o src/generated/templates` : "",
 			styles: {
 				default: `ui5nps-p build.styles.themes build.styles.components`, // concurently
 				themes: `ui5nps-script "${LIB}css-processors/css-processor-themes.mjs"`,
@@ -123,7 +114,7 @@ const getScripts = (options) => {
 				default: "ui5nps build.jsImports.illustrationsLoaders",
 				illustrationsLoaders: createIllustrationsLoadersScript,
 			},
-			bundle: `vite build ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
+			bundle: `ui5nps-script "${LIB}vite-bundler/vite-bundler.mjs" ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
 			bundle2: ``,
 			illustrations: createIllustrationsJSImportsScript,
 		},
@@ -147,8 +138,8 @@ const getScripts = (options) => {
 				themes: 'ui5nps build.styles.themesWithWatch',
 				components: `ui5nps build.styles.componentsWithWatch`,
 			},
-			templates: options.legacy ? 'chokidar "src/**/*.hbs" -i "src/generated" -c "ui5nps build.templates"' : "",
-			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "ui5nps build.i18n.defaultsjs"'
+			templates: options.legacy ? `ui5nps-script "${LIB}chokidar/chokidar.js" "src/**/*.hbs" "ui5nps build.templates"` : "",
+			i18n: `ui5nps-script "${LIB}chokidar/chokidar.js" "src/i18n/messagebundle.properties" "ui5nps build.i18n.defaultsjs"`
 		},
 		start: "ui5nps prepare watch.devServer",
 		test: `ui5nps-script "${LIB}/test-runner/test-runner.js"`,
diff --git a/packages/tools/lib/chokidar/chokidar.js b/packages/tools/lib/chokidar/chokidar.js
@@ -0,0 +1,28 @@
+const chokidar = require('chokidar');
+const { exec } = require("child_process");
+
+const main = async (argv) => {
+	if (argv.length < 4) {
+		console.error("Please provide a file pattern to watch and a command to execute on changes.");
+		console.error("<file-pattern> <command>");
+		process.exit(1);
+	}
+
+	const filePattern = argv[2];
+	const command = argv.slice(3).join(' ');
+
+	const watcher = new chokidar.FSWatcher();
+
+	watcher.add(filePattern);
+	watcher.unwatch("src/generated");
+
+	watcher.on('change', async () => {
+		exec(command);
+	});
+};
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;
diff --git a/packages/tools/lib/eslint/eslint.js b/packages/tools/lib/eslint/eslint.js
@@ -0,0 +1,44 @@
+const fs = require("fs");
+const { ESLint: ESLint7 } = require("eslint"); // isolated v7
+const path = require("path");
+
+const main = async argv => {
+	let eslintConfig;
+	if (fs.existsSync(".eslintrc.js") || fs.existsSync(".eslintrc.cjs")) {
+		// preferred way of custom configuration in root project folder
+		eslintConfig = null;
+	} else {
+		// no custom configuration - use default from tools project
+		eslintConfig = require.resolve("@ui5/webcomponents-tools/components-package/eslint.js")
+	};
+
+	const packageDir = path.dirname(require.resolve("@ui5/webcomponents-tools/package.json"));
+	const eslint = new ESLint7({
+		overrideConfigFile: eslintConfig,
+		fix: argv.includes("--fix"),
+		resolvePluginsRelativeTo: packageDir,
+	});
+	console.log("Running ESLint v7...");
+
+	// Lint files
+	const results = await eslint.lintFiles(["."]);
+
+	// Format results
+	const formatter = await eslint.loadFormatter("stylish");
+	const resultText = formatter.format(results);
+
+	// Output results
+	console.log(resultText);
+
+	// Exit with error code if there are errors
+	const hasErrors = results.some(result => result.errorCount > 0);
+	if (hasErrors) {
+		process.exit(1);
+	}
+}
+
+if (require.main === module) {
+	main(process.argv)
+}
+
+exports._ui5mainFn = main;
diff --git a/packages/tools/lib/test-runner/test-runner.js b/packages/tools/lib/test-runner/test-runner.js
diff --git a/packages/tools/lib/vite-bundler/vite-bundler.mjs b/packages/tools/lib/vite-bundler/vite-bundler.mjs
diff --git a/packages/tools/package.json b/packages/tools/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -55,9 +55,7 @@`
`55`	`55`	`"@custom-elements-manifest/analyzer": "^0.10.10",`
`56`	`56`	`"@ui5/cypress-internal": "0.1.0",`
`57`	`57`	`"@ui5/webcomponents-tools": "2.17.0-rc.4",`
`58`		`- "chokidar-cli": "^3.0.0",`
`59`	`58`	`"cypress": "^15.3.0",`
`60`		`- "eslint": "^7.22.0",`
`61`	`59`	`"vite": "5.4.21"`
`62`	`60`	`}`
`63`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,7 @@ const getElementSelection = (element: HTMLElement) => {`
`90`	`90`	`copiedElement.textContent = innerElement!.value;`
`91`	`91`
`92`	`92`	`if (innerElement) {`
`93`		`- copyAndApplyStyles(innerElement, copiedElement)!;`
	`93`	`+ copyAndApplyStyles(innerElement, copiedElement);`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`return getSelectionCoordinates(innerElement!, copiedElement as HTMLDivElement);`