@ui5/webcomponents-tools 0.0.0-037d08c67

package/bin/ui5nps.js

@@ -0,0 +1,301 @@
+#!/usr/bin/env node
+
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { exec } = require("child_process");
+var { parseArgsStringToArgv } = require('string-argv');
+
+const SCRIPT_NAMES = [
+	"package-scripts.js",
+	"package-scripts.cjs",
+	"package-scripts.mjs"
+]
+
+/**
+ * Check if verbose mode is enabled via CLI flag or environment variable.
+ * @returns {boolean}
+ */
+function isVerbose() {
+	return process.env.UI5_VERBOSE === "true";
+}
+
+/**
+ * Log a message only in verbose mode.
+ * @param  {...any} args - Arguments to pass to console.log
+ */
+function verboseLog(...args) {
+	if (isVerbose()) {
+		console.log(...args);
+	}
+}
+
+/**
+ * Parser for UI5 package scripts with support for parallel and sequential execution
+ */
+class Parser {
+	scripts;
+	envs;
+	parsedScripts = new Map();
+	resolvedScripts = new Map();
+
+	constructor() {
+		const { scripts, envs } = this.getScripts();
+
+		this.scripts = scripts;
+		this.envs = envs;
+
+		// Parse scripts on initialization
+		this.parseScripts();
+
+		[...this.parsedScripts.keys()].forEach(key => {
+			this.resolveScripts(`${key}`);
+		});
+	}
+
+	/**
+	 * Recursively parses script definitions from package-scripts file
+	 * @param {Object} scripts - Script definitions object
+	 * @param {string} parentKey - Parent key for nested scripts
+	 */
+	parseScripts(scripts = this.scripts, parentKey = "") {
+		for (const [key, value] of Object.entries(scripts)) {
+			if (key === "__ui5envs") continue; // Skip envs key
+
+			if (parentKey && key === "default") {
+				this.parsedScripts.set(parentKey, value);
+			}
+
+			const fullKey = parentKey ? `${parentKey}.${key}` : key;
+
+			if (typeof value === "string") {
+				this.parsedScripts.set(fullKey, value);
+			} else if (typeof value === "object") {
+				this.parseScripts(value, fullKey);
+			} else {
+				throw new Error(`Invalid script definition for key: ${fullKey}`);
+			}
+		}
+	}
+
+	/**
+	 * Resolves script commands and determines if they should run in parallel
+	 * @param {string} commandName - Name of the command to resolve
+	 * @returns {Object} Resolved command object with commands array and parallel flag
+	 */
+	resolveScripts(commandName) {
+		if (this.resolvedScripts.has(commandName)) {
+			return this.resolvedScripts.get(commandName);
+		}
+
+		let executableCommand = this.parsedScripts.get(commandName);
+		if (executableCommand === undefined) {
+			throw new Error(`Command "${commandName}" not found in scripts`);
+		}
+
+		if (!executableCommand.startsWith("ui5nps") || executableCommand.startsWith("ui5nps-script")) {
+			this.resolvedScripts.set(commandName, { commandName, commands: [executableCommand], parallel: false });
+			return this.resolvedScripts.get(commandName);
+		}
+
+		const parts = executableCommand.trim().split(" ").filter(Boolean).slice(1); // Remove "ui5nps" or ui5nps-p part
+		const commands = [];
+		for (const part of parts) {
+			if (!this.parsedScripts.has(part)) {
+				throw new Error(`Referenced command "${part}" not found in scripts`);
+			}
+
+			const parsedScript = this.parsedScripts.get(part);
+
+			if (parsedScript && (parsedScript.startsWith("ui5nps") || parsedScript.startsWith("ui5nps-p"))) {
+				this.resolveScripts(part);
+			}
+
+			commands.push(this.resolvedScripts.get(part) || { commandName: part, commands: [parsedScript], parallel: parsedScript.startsWith("ui5nps-p") });
+		}
+
+
+		this.resolvedScripts.set(commandName, { commandName, commands, parallel: executableCommand.startsWith("ui5nps-p") });
+
+		return this.resolvedScripts.get(commandName);
+	}
+
+	/**
+	 * Loads and validates package-scripts file
+	 * @returns {Object} Object containing scripts and environment variables
+	 */
+	getScripts() {
+		let packageScriptPath;
+
+		for (const scriptName of SCRIPT_NAMES) {
+			const filePath = path.join(process.cwd(), scriptName);
+			if (fs.existsSync(filePath)) {
+				packageScriptPath = filePath;
+				break;
+			}
+		}
+
+		// Package-script file should be in the current working directory
+		if (!packageScriptPath) {
+			console.error("No package-scripts.js/cjs/mjs file found in the current directory.");
+			process.exit(1);
+		}
+
+		const packageScript = require(packageScriptPath);
+		let scripts;
+		let envs;
+
+		if (packageScript.__esModule) {
+			scripts = packageScript.default.scripts;
+		} else {
+			scripts = packageScript.scripts;
+		}
+
+		// Package-script should provide default export with scripts object
+		if (!scripts || typeof scripts !== "object") {
+			console.error("No valid 'scripts' object found in package-scripts file.");
+			process.exit(1);
+		}
+
+		envs = JSON.parse(JSON.stringify(scripts.__ui5envs || {}));
+
+		Object.entries(envs).forEach(([key, value]) => {
+			envs[key] = String(value);
+		});
+
+		// Package-script should provide default export with scripts object
+		if (envs && typeof envs !== "object") {
+			console.error("No valid 'envs' object found in package-scripts file.");
+			process.exit(1);
+		}
+
+		return { scripts, envs };
+	}
+
+	/**
+	 * Executes a command or command object (with parallel/sequential support)
+	 * @param {string|Object} command - Command string or command object with commands array
+	 * @returns {Promise} Promise that resolves when command(s) complete
+	 */
+	async executeCommand(command, commandName = "unknown") {
+		if (typeof command === "string" && command) {
+			return new Promise(async (resolve, reject) => {
+				if (command.trim().startsWith("ui5nps-script")) {
+					const argv = parseArgsStringToArgv(command);
+					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) {
+						_ui5mainFn = importedContent.default._ui5mainFn;
+					} else {
+						_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).`));
+					}
+
+					verboseLog(` |  Executing command ${commandName} as module.`);
+					const result = _ui5mainFn(argv);
+
+					if (result instanceof Promise) {
+						return result.then(resolve).catch(reject);
+					} else {
+						return resolve();
+					}
+				}
+
+				verboseLog(` |  Executing command ${commandName} as command.\n    Running: ${command}`);
+				const child = exec(command, { stdio: "inherit", env: { ...process.env, ...this.envs } });
+
+				child.stdout.on("data", (data) => {
+					verboseLog(data);
+				});
+
+				child.stderr.on("data", (data) => {
+					console.error(data);
+				});
+
+				child.on("error", (err) => {
+					console.error("Failed to start:", err);
+					reject(err);
+				});
+
+				child.on("close", (code) => {
+					code === 0 ? resolve() : reject(new Error(`Exit ${code}`));
+				});
+			});
+		} else if (typeof command === "object" && command.commands) {
+			if (command.parallel) {
+				// Execute commands in parallel
+				const promises = command.commands.filter(Boolean).map(cmd => this.executeCommand(cmd, cmd.commandName || commandName));
+				await Promise.all(promises);
+			} else {
+				// Execute commands sequentially
+				for (const cmd of command.commands) {
+					await this.executeCommand(cmd, cmd.commandName || commandName);
+				}
+			}
+		}
+	}
+
+	/**
+	 * Main execution method for a named command
+	 * @param {string} commandName - Name of the command to execute
+	 * @returns {Promise} Promise that resolves when execution completes
+	 */
+	async execute(commandName) {
+		const command = this.resolvedScripts.get(commandName);
+
+		if (!command) {
+			throw new Error(`Command "${commandName}" not found in scripts`);
+		}
+
+		return this.executeCommand(this.resolvedScripts.get(commandName), commandName);
+	}
+}
+
+const parser = new Parser();
+
+// Basic input validation
+const commands = process.argv.slice(2).filter(arg => arg !== "--verbose" && arg !== "-v");
+const verbose = process.argv.includes("--verbose") || process.argv.includes("-v");
+
+// Set verbose environment variable for child scripts
+if (verbose) {
+	process.env.UI5_VERBOSE = "true";
+}
+
+if (commands.length === 0) {
+	console.error("Usage: ui5nps [--verbose|-v] <command> [command2] [command3] ...");
+	console.error("No commands provided.");
+	process.exit(1);
+}
+
+if (commands.includes("--help") || commands.includes("-h")) {
+	console.log("Usage: ui5nps [--verbose|-v] <command> [command2] [command3] ...");
+	console.log("\nOptions:");
+	console.log("  --verbose, -v    Show detailed output (default: quiet, errors only)");
+	console.log("\nAvailable commands:");
+	for (const [key, value] of parser.parsedScripts.entries()) {
+		console.log(`  - ${key}: ${value}`);
+	}
+	process.exit(0);
+}
+
+(async () => {
+	process.env = { ...process.env, ...parser.envs };
+
+	for (const commandName of commands) {
+		await parser.execute(commandName);
+	}
+})().catch(error => {
+	console.error("Error executing commands:", error);
+	process.exit(1);
+});

package/components-package/eslint.js

@@ -0,0 +1,195 @@
+const fs = require("fs");
+const path = require("path");
+const tsMode = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
+
+/**
+ * Returns eslint rules specific to typescript files
+ * @returns
+ */
+const getTsModeOverrides = () => {
+	const tsConfiguration = {
+		files: ["*.ts"],
+		parser: "@typescript-eslint/parser",
+		plugins: ["@typescript-eslint"],
+		extends: [
+			"plugin:@typescript-eslint/recommended",
+			"plugin:@typescript-eslint/recommended-requiring-type-checking"
+		],
+		parserOptions: {
+			"project": [
+				"./tsconfig.json"
+			],
+			EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
+		},
+		rules: {
+			"no-shadow": "off",
+			"@typescript-eslint/consistent-type-imports": "error",
+			"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+			"@typescript-eslint/no-shadow": ["error"],
+			"@typescript-eslint/no-unsafe-member-access": "off",
+			"@typescript-eslint/no-floating-promises": "off",
+			"@typescript-eslint/no-explicit-any": "off",
+			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/ban-ts-comment": "off",
+			"@typescript-eslint/no-unsafe-call": "off",
+			"@typescript-eslint/no-non-null-assertion": "off",
+			"@typescript-eslint/no-empty-function": "off",
+			"@typescript-eslint/no-empty-interface": "off",
+			"lines-between-class-members": "off",
+		}
+	};
+
+	const tsxConfiguration = JSON.parse(JSON.stringify(tsConfiguration));
+	tsxConfiguration.files = ["*.tsx"];
+	tsxConfiguration.plugins.push("jsx-no-leaked-values");
+	tsxConfiguration.rules = {
+		...tsxConfiguration.rules,
+		"jsx-no-leaked-values/jsx-no-leaked-values": "error",
+		"@typescript-eslint/unbound-method": "off", // to be able to attach on* listeners
+		"@typescript-eslint/no-misused-promises": "off", // to be able to have async event listeners
+		"operator-linebreak": "off",
+		"no-nested-ternary": "off",
+		"implicit-arrow-linebreak": "off",
+		"function-paren-newline": "off",
+		"comma-dangle": "off"
+	};
+
+	return [
+		tsConfiguration,
+		tsxConfiguration
+	];
+}
+
+module.exports = {
+	"env": {
+		"browser": true,
+		"es6": true
+	},
+	"root": true,
+	"extends": "airbnb-base",
+	"overrides": tsMode ? getTsModeOverrides() : [],
+	"parserOptions": {
+		"ecmaVersion": 2018,
+		"sourceType": "module"
+	},
+	"rules": {
+		"comma-dangle": [2, "always-multiline"], // difference from openui5
+		"no-cond-assign": 2,
+		"no-console": 2,
+		"no-constant-condition": 2,
+		"no-control-regex": 2,
+		"no-debugger": 2,
+		"no-dupe-args": 2,
+		"no-dupe-keys": 2,
+		"no-duplicate-case": 2,
+		"no-empty-character-class": 2,
+		"no-empty": 2,
+		"no-ex-assign": 2,
+		"no-extra-boolean-cast": 1,
+		"no-extra-parens": [2, "functions"],
+		"no-extra-semi": 2,
+		"no-func-assign": 2,
+		"no-inner-declarations": [2, "functions"],
+		"no-invalid-regexp": 2,
+		"no-irregular-whitespace": 2,
+		"no-negated-in-lhs": 2,
+		"no-obj-calls": 2,
+		"no-regex-spaces": 2,
+		"no-sparse-arrays": 2,
+		"no-trailing-spaces": 2,
+		"no-unreachable": 2,
+		"use-isnan": 2,
+		// "valid-jsdoc": [1, { removed for UI5 WebComponents
+		// 	"requireReturn": false
+		// }],
+		"valid-typeof": 2,
+
+		"accessor-pairs": 2,
+		"block-scoped-var": 1,
+		// "consistent-return": 1, // removed for UI5 WebComponents
+		"curly": [2, "all"],
+		// "default-case": 1, // removed for UI5 WebComponents
+		"import/extensions": ["error", "always"], // override for UI5 WebComponents
+		"import/order": "off",
+		"no-alert": 2,
+		"no-caller": 2,
+		"no-div-regex": 2,
+		"no-eval": 2,
+		"no-extend-native": 2,
+		"no-extra-bind": 2,
+		"no-fallthrough": 2,
+		"no-floating-decimal": 2,
+		"no-implied-eval": 2,
+		"no-iterator": 2,
+		"no-labels": 2,
+		"no-lone-blocks": 2,
+		"no-loop-func": 2,
+		"no-native-reassign": 2,
+		"no-new-func": 2,
+		"no-new-wrappers": 1,
+		"no-new": 1,
+		"no-octal-escape": 2,
+		"no-octal": 2,
+		"no-proto": 2,
+		"no-redeclare": 1,
+		"no-return-assign": 2,
+		"no-script-url": 2,
+		"no-self-compare": 2,
+		"no-sequences": 2,
+		"no-unused-expressions": [1, { allowShortCircuit: true }],
+		"no-void": 2,
+		"no-warning-comments": 1,
+		"no-with": 2,
+		"radix": [2, "as-needed"],
+		"wrap-iife": [2, "any"],
+		"yoda": 2,
+
+		"strict": [2, "function"],
+
+		"no-catch-shadow": 2,
+		"no-delete-var": 2,
+		"no-label-var": 2,
+		"no-shadow-restricted-names": 2,
+		"no-undef-init": 2,
+		"no-undef": 2,
+		"no-unused-vars": [2, { "vars": "all", "args": "none" }],
+
+		"brace-style": [2, "1tbs", { "allowSingleLine": true }],
+		"camelcase": [1, { "properties": "never" }], // added for UI5 WebComponents
+		"consistent-this": [1, "that"],
+		"linebreak-style": 2,
+		"max-nested-callbacks": [1, 3],
+		"new-cap": 1,
+		"new-parens": 2,
+		"no-array-constructor": 2,
+		"no-lonely-if": 1,
+		"no-mixed-spaces-and-tabs": [2, "smart-tabs"],
+		"no-nested-ternary": 2,
+		"no-new-object": 2,
+		"no-spaced-func": 2,
+		"quote-props": [2, "as-needed", { "keywords": true, "unnecessary": false }],
+		"semi-spacing": [1, { "before": false, "after": true }],
+		"semi": 2,
+		"keyword-spacing": 2,
+		"space-infix-ops": 2,
+		"space-unary-ops": [2, { "words": true, "nonwords": false }],
+		// airbnb overrides
+		"indent": [2, "tab"],
+		"no-underscore-dangle": 0,
+		"no-tabs": 0,
+		"quotes": [2, "double", { "allowTemplateLiterals": true }],
+		"no-useless-constructor": 0,
+		"no-param-reassign": 0,
+		"one-var": 0,
+		"max-len": 0,
+		"arrow-parens": [2, "as-needed"],
+		"class-methods-use-this": 0,
+		"no-plusplus": 0,
+		"default-case": 0,
+		"consistent-return": 0,
+		"prefer-destructuring": 0,
+		"arrow-body-style": 0,
+		"import/no-unresolved": 0,
+		"no-use-before-define": 0
+	}
+};

package/components-package/nps.js

@@ -0,0 +1,177 @@
+const path = require("path");
+const fs = require("fs");
+const LIB = path.join(__dirname, `../lib/`);
+let websiteBaseUrl = "/";
+
+const isPreview = !!process.env.PR_NUMBER;
+const getPreviewBaseUrl = () => {
+	if (process.env.DEPLOYMENT_TYPE === "netlify_preview") {
+		return "/";
+	}
+	return `/webcomponents/pr-${process.env.PR_NUMBER}/`;
+}
+
+if (process.env.DEPLOY) {
+	websiteBaseUrl = "/webcomponents/";
+} else if (process.env.DEPLOY_NIGHTLY) {
+	websiteBaseUrl = "/webcomponents/nightly/";
+} else if (isPreview) {
+	websiteBaseUrl = getPreviewBaseUrl();
+}
+
+const getScripts = (options) => {
+	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
+	const illustrationsData = options.illustrationsData || [];
+	const createIllustrationsJSImportsScript = {
+		default: `ui5nps-p ${illustrationsData.map(illustrations => `build.illustrations.build-${illustrations.set}-${illustrations.collection}`).join(" ")}` // concurently,
+	}
+	illustrationsData.forEach((illustration) => {
+		createIllustrationsJSImportsScript[`build-${illustration.set}-${illustration.collection}`] = `ui5nps-script "${LIB}create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath} ${illustration.collection}`
+	});
+	// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
+	const createIllustrationsLoadersScript = {
+		default: `ui5nps-p ${illustrationsData.map(illustrations => `build.jsImports.illustrationsLoaders.generate-${illustrations.set}-${illustrations.collection}`).join(" ")}` // concurently,
+	}
+	illustrationsData.forEach((illustrations) => {
+		createIllustrationsLoadersScript[`generate-${illustrations.set}-${illustrations.collection}`] = `ui5nps-script ${LIB}generate-js-imports/illustrations.js ${illustrations.path} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(",")}`
+	});
+
+
+	const tsOption = !!(!options.legacy || options.jsx);
+	const tsCommandOld = tsOption ? "tsc" : "";
+	let tsWatchCommandStandalone = tsOption ? "tsc --watch" : "";
+	// this command is only used for standalone projects. monorepo projects get their watch from vite, so opt-out here
+	if (options.noWatchTS) {
+		tsWatchCommandStandalone = "";
+	}
+
+	if (tsOption) {
+		try {
+			require("typescript");
+		} catch (e) {
+			console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
+			process.exit(e.code);
+		}
+	}
+
+	let viteConfig;
+	if (fs.existsSync("config/vite.config.js")) {
+		// old project setup where config file is in separate folder
+		viteConfig = "-c config/vite.config.js";
+	} else if (fs.existsSync("vite.config.js")) {
+		// preferred way of custom configuration in root project folder
+		viteConfig = "";
+	} else {
+		// no custom configuration - use default from tools project
+		viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-package/vite.config.js")}"`;
+	}
+
+	const scripts = {
+		__ui5envs: {
+			UI5_CEM_MODE: options.dev,
+			UI5_TS: `${tsOption}`,
+			CSS_VARIABLES_TARGET: options.cssVariablesTarget ?? "root",
+			CYPRESS_COVERAGE: !!(options.internal?.cypress_code_coverage),
+		},
+		clean: {
+			"default": "ui5nps clean.generated clean.dist scope.testPages.clean",
+			"generated": `ui5nps-script "${LIB}/rimraf/rimraf.js src/generated`,
+			"dist": `ui5nps-script "${LIB}/rimraf/rimraf.js dist`,
+		},
+		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
+			styleRelated: "ui5nps build.styles build.jsonImports build.jsImports",
+		},
+		prepare: {
+			default: `ui5nps clean prepare.all copy copyProps prepare.typescript generateAPI`,
+			all: `ui5nps-p build.templates build.i18n prepare.styleRelated build.illustrations`, // concurently
+			styleRelated: "ui5nps build.styles build.jsonImports build.jsImports",
+			typescript: tsCommandOld,
+		},
+		build: {
+			default: "ui5nps prepare lint build.bundle", // build.bundle2
+			templates: options.legacy ? `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"`,
+				themesWithWatch: `ui5nps-script "${LIB}css-processors/css-processor-themes.mjs" -w`,
+				components: `ui5nps-script "${LIB}css-processors/css-processor-components.mjs"`,
+				componentsWithWatch: `ui5nps-script "${LIB}css-processors/css-processor-components.mjs" -w`,
+			},
+			i18n: {
+				default: "ui5nps build.i18n.defaultsjs build.i18n.json",
+				defaultsjs: `ui5nps-script "${LIB}i18n/defaults.js" src/i18n src/generated/i18n`,
+				json: `ui5nps-script "${LIB}i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
+			},
+			jsonImports: {
+				default: "ui5nps build.jsonImports.themes build.jsonImports.i18n",
+				themes: `ui5nps-script "${LIB}generate-json-imports/themes.js" src/themes src/generated/json-imports`,
+				i18n: `ui5nps-script "${LIB}generate-json-imports/i18n.js" src/i18n src/generated/json-imports`,
+			},
+			jsImports: {
+				default: "ui5nps build.jsImports.illustrationsLoaders",
+				illustrationsLoaders: createIllustrationsLoadersScript,
+			},
+			bundle: `ui5nps-script "${LIB}vite-bundler/vite-bundler.mjs" ${viteConfig} --mode testing --base ${websiteBaseUrl}`,
+			bundle2: ``,
+			illustrations: createIllustrationsJSImportsScript,
+		},
+		copyProps: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/`,
+		copyPropsWithWatch: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/ --watch --safe --skip-initial-copy`,
+		copySrcWithWatch: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/ --watch --safe --skip-initial-copy`,
+		copy: {
+			default: options.legacy ? "ui5nps copy.src copy.props" : "",
+			src: options.legacy ? `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/**/*.{js,json}" dist/` : "",
+			props: options.legacy ? `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "src/i18n/*.properties" dist/` : "",
+		},
+		watch: {
+			default: `ui5nps-p watch.templates watch.typescript watch.src watch.styles watch.i18n watch.props`, // concurently
+			devServer: 'ui5nps-p watch.default watch.bundle', // concurently
+			src: options.legacy ? 'ui5nps copySrcWithWatch' : "",
+			typescript: tsWatchCommandStandalone,
+			props: 'ui5nps copyPropsWithWatch',
+			bundle: `ui5nps-script ${LIB}dev-server/dev-server.mjs ${viteConfig}`,
+			styles: {
+				default: 'ui5nps-p watch.styles.themes watch.styles.components', // concurently
+				themes: 'ui5nps build.styles.themesWithWatch',
+				components: `ui5nps build.styles.componentsWithWatch`,
+			},
+			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"`,
+		"test-cy-ci": `cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `cypress run --component --browser chrome --spec "**/specs/[A-C]*.cy.{js,jsx,ts,tsx},**/specs/[^D-Z]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-ci-suite-2": `cypress run --component --browser chrome --spec "**/specs/[D-L]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-ci-suite-3": `cypress run --component --browser chrome --spec "**/specs/[M-S]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-ci-suite-4": `cypress run --component --browser chrome --spec "**/specs/[T-Z]*.cy.{js,jsx,ts,tsx}"`,
+		"test-cy-open": `cypress open --component --browser chrome`,
+		startWithScope: "ui5nps scope.prepare scope.watchWithBundle",
+		scope: {
+			prepare: "ui5nps scope.lint scope.testPages",
+			lint: `ui5nps-script "${LIB}scoping/lint-src.js"`,
+			testPages: {
+				default: "ui5nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
+				"clean": `ui5nps-script "${LIB}/rimraf/rimraf.js test/pages/scoped`,
+				copy: `ui5nps-script "${LIB}copy-and-watch/index.js" --silent "test/pages/**/*" test/pages/scoped`,
+				replace: `ui5nps-script "${LIB}scoping/scope-test-pages.js" test/pages/scoped demo`,
+			},
+			watchWithBundle: 'ui5nps-p scope.watch scope.bundle', // concurently
+			watch: 'ui5nps-p watch.templates watch.props watch.styles', // concurently
+			bundle: `ui5nps-script ${LIB}dev-server/dev-server.mjs ${viteConfig}`,
+		},
+		generateAPI: {
+			default: tsOption ? "ui5nps generateAPI.generateCEM generateAPI.validateCEM" : "",
+			generateCEM: `ui5nps-script "${LIB}cem/cem.js" analyze --config "${LIB}cem/custom-elements-manifest.config.mjs"`,
+			validateCEM: `ui5nps-script "${LIB}cem/validate.js"`,
+		},
+	};
+
+	return scripts;
+};
+
+module.exports = getScripts;

package/components-package/postcss.components.js

@@ -0,0 +1 @@
+module.exports = {}

package/components-package/postcss.themes.js

@@ -0,0 +1 @@
+module.exports = {};

package/components-package/vite.config.js

@@ -0,0 +1,9 @@
+// vite.config.js
+const virtualIndex = require('../lib/dev-server/virtual-index-html-plugin.js');
+
+module.exports = {
+	build: {
+		emptyOutDir: false,
+	},
+	plugins: [virtualIndex()],
+};