@ui5/webcomponents-tools 0.0.0-9c26e8e4f → 0.0.0-9ed6f23c6

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -1,7 +1,35 @@
-const buildRenderer = (controlName, litTemplate) => {
-	return `/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+const tsImports = (controlName, hasTypes) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
+
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	return `import type UI5Element from "${importPrefix}UI5Element.js";
+	${importForControl(controlName, hasTypes)}
+	import type { ClassMapValue } from "${importPrefix}types.js";
+	`;
+}
+const importForControl = (controlName, hasTypes) => {
+
+	if (!hasTypes) {
+		return `type ${controlName} = any;`;
+	}
 
+	if (process.env.UI5_BASE) {
+		// base package has a component in `test/elements` instead of `src`
+		return `import type ${controlName} from "../../../../test/elements/${controlName}.js";`
+	}
+	return `import type ${controlName} from "../../${controlName}.js";`
+}
+
+const buildRenderer = (controlName, litTemplate, hasTypes) => {
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
+	return `/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
+${tsImports(controlName, hasTypes)}
 ${litTemplate}
 
 export default block0;`;
@@ -9,4 +37,4 @@ export default block0;`;
 
 module.exports = {
 	generateTemplate: buildRenderer
-};
+};

package/lib/hbs2ui5/index.js

@@ -1,10 +1,13 @@
 const fs = require('fs').promises;
+const existsSync = require('fs').existsSync;
 const getopts = require('getopts');
 const hbs2lit = require('../hbs2lit');
 const path = require('path');
 const litRenderer = require('./RenderTemplates/LitRenderer');
 const recursiveReadDir = require("recursive-readdir");
 
+let missingTypesReported = false;
+
 const args = getopts(process.argv.slice(2), {
 	alias: {
 		o: 'output',
@@ -23,13 +26,27 @@ const onError = (place) => {
 
 const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
 
+const hasTypes = (file, componentName) => {
+	const tsFile = path.join(path.dirname(file), componentName + ".ts")
+	const dtsFile = path.join(path.dirname(file), componentName + ".d.ts")
+	return existsSync(tsFile) || existsSync(dtsFile);
+}
+
 const processFile = async (file, outputDir) => {
-	const litCode = await hbs2lit(file);
-	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
+	const componentHasTypes = hasTypes(file, componentName);
+	if (!componentHasTypes) { 
+		if (!missingTypesReported) {
+			console.warn("[Warn] The following templates do not have a corresponging .ts or .d.ts file and won't be type checked:")
+			missingTypesReported = true;
+		}
+		console.log("  -> " + componentName + ".hbs");
+	}
+	const litCode = await hbs2lit(file, componentName);
+	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 
-	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
 };
 
 const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -70,7 +87,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
 
 		await fs.mkdir(outputDir, { recursive: true });
 
-		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
+		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.${process.env.UI5_TS ? "ts" : "js"}`;
 
 		// strip DOS line endings because the break the source maps
 		let fileContentUnix = fileContent.replace(/\r\n/g, "\n");

package/lib/i18n/defaults.js

@@ -8,7 +8,9 @@ const generate = async () => {
 
 	const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
 	const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
-	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.js`);
+	const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
+
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.${tsMode ? "ts": "js"}`);
 
 	if (!messageBundle || !outputFile) {
 		return;
@@ -22,6 +24,15 @@ const generate = async () => {
 	} catch (e) {
 	}
 
+	// Merge messagebundle.properties and messagebundle_en.properties files to generate the default texts.
+	// Note:
+	// (1) at DEV time, it's intuituve to work with the source bundle file - the messagebundle.properties,
+	// and see the changes there take effect.
+	// (2) as the messagebundle.properties file is always written in English,
+	// it makes sense to consider the messagebundle.properties content only when the default language is "en".
+	if (defaultLanguage === "en") {
+		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);  
+	}
 
 	/*
 	 * Returns the single text object to enable single export.
@@ -36,6 +47,9 @@ const generate = async () => {
 		let effectiveValue = defaultLanguageValue || value;
 		effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
 
+		if (tsMode) {
+			return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
+		}
 		return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
 	};
 
@@ -53,7 +67,9 @@ const generate = async () => {
 		const textKeys = Object.keys(properties);
 		const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
 
-		return `${texts}
+		// tabs are intentionally mixed to have proper identation in the produced file
+		return `${tsMode ? `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
+${texts}
 export {${textKeys.join()}};`;
 	};
 

package/lib/i18n/toJSON.js

@@ -34,7 +34,7 @@ const convertToJSON = async (file) => {
 const generate = async () => {
 	const { globby } = await import("globby");
 	await fs.mkdir(messagesJSONDist, { recursive: true });
-	const files = await globby(messagesBundles);
+	const files = await globby(messagesBundles.replace(/\\/g, "/"));
 	return Promise.all(files.map(convertToJSON));
 };
 

package/lib/jsdoc/configTypescript.json

@@ -0,0 +1,29 @@
+{
+	"source": {
+		"include": "jsdoc-dist",
+		"excludePattern": "(/|\\\\)library-all\\.js|(/|\\\\).*-preload\\.js|^jquery-.*\\.js|^sap-.*\\.js|.+Renderer\\.lit\\.js|.*library\\.js|thirdparty"
+	},
+	"opts" : {
+		"recurse": true,
+		"template" : "template",
+		"destination": ""
+	},
+	"plugins": [
+		"./plugin.js"
+	],
+	"templates" : {
+		"ui5" : {
+			"variants": [
+				"apijson"
+			],
+			"version": "1.62",
+			"apiJsonFolder": "",
+			"apiJsonFile": "dist/api.json",
+			"includeSettingsInConstructor": false
+		}
+	},
+	"tags": {
+		"allowUnknownTags": true,
+		"dictionaries": ["jsdoc"]
+	}
+}

package/lib/jsdoc/plugin.js

@@ -34,6 +34,10 @@
  *   native
  *
  *   noattribute
+ * 
+ *   formEvents
+ * 
+ *   formProperty
  *
  *   allowPreventDefault
  *
@@ -2108,6 +2112,34 @@ exports.defineTags = function(dictionary) {
 			doclet.noattribute = true;
 		}
 	});
+
+	dictionary.defineTag('formEvents', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			if (tag.value) {
+				doclet.formEvents = doclet.formEvents || [];
+				tag.value.split(" ").forEach(function($) {
+					if ( doclet.formEvents.indexOf($) < 0 ) {
+						doclet.formEvents.push($);
+					}
+				});
+			}
+		}
+	});
+
+	dictionary.defineTag('formProperty', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.formProperty = true;
+		}
+	});
+
+	dictionary.defineTag('formAssociated', {
+		mustHaveValue: false,
+		onTagged: function(doclet, tag) {
+			doclet.formAssociated = doclet.formAssociated || true;
+		}
+	});
 };
 
 exports.handlers = {

package/lib/jsdoc/preprocess.js

@@ -0,0 +1,146 @@
+const process = require("process");
+const path = require("path");
+const fs = require("fs/promises");
+
+const inputDir = process.argv[2];
+const sourceDir = process.argv[3];
+
+const preprocessTypes = async () => {
+	try {
+		const { globby } = await import("globby");
+		const fileNames = await globby(inputDir.replace(/\\/g, "/") + "**/types/*.js");
+
+		return Promise.all(fileNames.map(processTypeFile));
+	} catch(e) {
+		console.log("JSDoc types preprocess failed: ", e);
+	}
+};
+
+const processTypeFile = async (fileName) => {
+	let fileContent = `${await fs.readFile(fileName)}`;
+
+	const re = new RegExp(`(\\/\\*\\*\\s*\\n([^\\*]|(\\*(?!\\/)))*\\*\\/)\\s+[\\w\\d]+\\[\\"([\\w\\d]+)\\"\\]\\s*=\\s*\\"([\\w\\d]+)\\";`, "gm")
+	let matches = [...fileContent.matchAll(re)];
+
+	// Get all type values
+	const typeData = matches.map(match => {
+		return {
+			comment: match[1],
+			key: match[4],
+			value: match[5],
+		};
+	});
+	if (typeData.length === 0) {
+		return;
+	}
+
+	const typeName = path.parse(fileName).name;
+
+	matches = fileContent.match(/\/\*\*\s*\n([^\*]|(\*(?!\/)))*\*\//gm);
+	const comment = matches[0];
+
+	const propsCode = typeData.map(item => {
+		return `${item.comment}\n get ${item.key}() { return "${item.value}"; }`;
+	}).join("\n");
+
+	const newClassCode = `
+	${comment}
+	class ${typeName} {
+		${propsCode}
+	};
+
+	export default ${typeName};`;
+
+	fileContent = newClassCode;
+
+	return fs.writeFile(fileName, fileContent);
+};
+
+const preprocessComponents = async () => {
+	if (!sourceDir) {
+		return; // if the second param was not passed, there are no components
+	}
+
+	try {
+		const { globby } = await import("globby");
+		const fileNames = await globby(sourceDir.replace(/\\/g, "/") + "/*.ts");
+
+		return Promise.all(fileNames.map(processComponentFile));
+	} catch(e) {
+		console.log("JSDoc components preprocess failed: ", e);
+	}
+};
+
+const isClass = text => {
+	return text.includes("@abstract") || text.includes("@class");
+};
+
+const isAnnotationComment = (comment) =>  {
+	return comment.includes("@name");
+}
+
+const processComponentFile = async (fileName) => {
+	// source file (src/*.ts)
+	let tsFileContent = `${await fs.readFile(fileName)}`;
+
+	// Skip all non-component files
+	if (!isClass(tsFileContent)) {
+		return;
+	}
+
+	// Gather all JSDocs from the original .ts file
+	const allJSDocsRegExp = new RegExp(`\\/\\*\\*(.|\\n)+?\\s+\\*\\/`, "gm");
+	let allJSDocs = [...tsFileContent.matchAll(allJSDocsRegExp)];
+	allJSDocs = allJSDocs.map(match => match[0]); // all /** ..... */ comments
+
+	// Find where the class is defined in the original file
+	const tsClassDefinitionRegExp = new RegExp(`^(abstract\\s)?class [\\w\\d_]+`, "gm");
+	let tsClassDefinitionMatch = tsFileContent.match(tsClassDefinitionRegExp);
+	if (!tsClassDefinitionMatch) {
+		return; // no class defined in this .ts file
+	}
+	const tsClassDefinition = tsClassDefinitionMatch[0];
+	const tsClassDefinitionIndex = tsFileContent.indexOf(tsClassDefinition);
+
+	// Gather all JSDocs that are before the class definition (except for the @class one)
+	const JSDocsToAppend = [];
+	allJSDocs.forEach(JSDoc => {
+		if (!isClass(JSDoc) && (tsFileContent.indexOf(JSDoc) < tsClassDefinitionIndex || isAnnotationComment(JSDoc, tsFileContent))) {
+			JSDocsToAppend.push(JSDoc);
+		}
+	});
+
+
+
+	// destination file (jsdoc-dist/*.js)
+	const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
+	let jsFileContent = `${await fs.readFile(destFileName)}`;
+
+	const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
+	let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
+	if (!classDefinitionMatch) {
+		return; // not a file, generated by typescript, nothing to do here
+	}
+
+	const classDefinition = classDefinitionMatch[0];
+	const classDefinitionIndex = jsFileContent.indexOf(classDefinition); // classDefinitionIndex is the position in the file where the class is defined
+
+	// All comments before the class definition, except for the @class comment, must be removed
+	allJSDocs.forEach(JSDoc => {
+		if (!isClass(JSDoc) && jsFileContent.indexOf(JSDoc) < classDefinitionIndex) {
+			jsFileContent = jsFileContent.replace(JSDoc, "");
+		}
+	});
+
+	// Put all other comments at the end of the file
+	jsFileContent = jsFileContent + "\n\n" + JSDocsToAppend.join("\n\n");
+	return fs.writeFile(destFileName, jsFileContent);
+};
+
+Promise.all([
+	preprocessTypes(),
+	preprocessComponents(),
+]).then(() => {
+	console.log("JSDoc preprocess ready.");
+});
+

package/lib/jsdoc/template/publish.js

@@ -2820,6 +2820,14 @@ function createAPIJSON4Symbol(symbol, omitDefaults) {
 						attrib("since", extractVersion(member.since));
 					}
 
+					if ( member.formEvents ) {
+						attrib("formEvents", member.formEvents);
+					}
+
+					if ( member.formEvents ) {
+						attrib("formProperty", member.formProperty);
+					}
+
 					var type = listTypes(member.type);
 					attrib("type", type);
 
@@ -3865,7 +3873,7 @@ function createAPIJS(symbols, filename) {
 
 	var output = [];
 
-	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
+	var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|formEvents|formProperty|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
 
 	function isNoKeyword($) { return !rkeywords.test($.name); }
 

package/lib/postcss-css-to-esm/index.js

@@ -11,11 +11,38 @@ const getDefaultThemeCode = packageName => {
 import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
 import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
 
-registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", () => defaultThemeBase);
-registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
+registerThemePropertiesLoader("@ui5/webcomponents-theming", "${DEFAULT_THEME}", async () => defaultThemeBase);
+registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () => defaultTheme);
 `;
 };
 
+const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
+	if (tsMode) {
+		return getTSContent(targetFile, packageName, css, includeDefaultTheme);
+	}
+
+	return getJSContent(targetFile, packageName, css, includeDefaultTheme);
+}
+
+const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	// tabs are intentionally mixed to have proper identation in the produced file
+	return `${typeImport}
+${defaultTheme}
+const styleData: StyleData = {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}};
+export default styleData;
+	`;
+}
+
+const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+	const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
+
+	return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+}
+
+
 const proccessCSS = css => {
 	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
 	css = css.replace(/\.background-image.*{.*}/, "");
@@ -27,18 +54,23 @@ const proccessCSS = css => {
 module.exports = function (opts) {
 	opts = opts || {};
 
+	const packageName = opts.packageName;
+	const includeDefaultTheme = opts.includeDefaultTheme;
+	const toReplace = opts.toReplace;
+
 	return {
 		postcssPlugin: 'postcss-css-to-esm',
 		Once (root) {
+			const tsMode = process.env.UI5_TS === "true";
+
 			let css = root.toString();
 			css = proccessCSS(css);
 
-			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\");
+			const targetFile = root.source.input.from.replace(`/${toReplace}/`, "/src/generated/").replace(`\\${toReplace}\\`, "\\src\\generated\\");
 			mkdirp.sync(path.dirname(targetFile));
 
-			const filePath = `${targetFile}.js`;
-			const defaultTheme = opts.includeDefaultTheme ? getDefaultThemeCode(opts.packageName) : ``;
-			
+			const filePath = `${targetFile}.${tsMode ? "ts" : "js"}`;
+
 			// it seems slower to read the old content, but writing the same content with no real changes
 			// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
 			let oldContent = "";
@@ -47,7 +79,8 @@ module.exports = function (opts) {
 			} catch (e) {
 				// file not found
 			}
-			const content = `${defaultTheme}export default {packageName:"${opts.packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
+
+			const content = getFileContent(tsMode, targetFile, packageName, css, includeDefaultTheme);
 			if (content !== oldContent) {
 				fs.writeFileSync(filePath, content);
 			}

package/lib/replace-global-core/index.js

@@ -16,7 +16,7 @@ const replaceGlobalCoreUsage = async (srcPath) => {
 
 const generate = async () => {
 	const { globby } = await import("globby");
-	const fileNames = await globby(basePath + "**/*.js");
+	const fileNames = await globby(basePath.replace(/\\/g, "/") + "**/*.js");
 	return Promise.all(fileNames.map(replaceGlobalCoreUsage).filter(x => !!x));
 };
 

package/lib/scoping/get-all-tags.js

@@ -8,18 +8,11 @@ const getTag = file => {
 	return matches ? matches[1] : undefined;
 };
 
-const getAltTag = file => {
-	const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
-	const matches = fileContent.match(/\baltTag\b:\s*\"(.*?)\"/);
-	return matches ? matches[1] : undefined;
-};
-
 const getPackageTags = (packageDir) => {
 	const srcDir = path.join(packageDir, "src/");
 	return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
 		const tag = getTag(file);
-		const altTag = getAltTag(file);
-		return [tag, altTag];
+		return [tag];
 	}).filter(item => !!item);
 };
 

package/lib/test-runner/test-runner.js

@@ -1,6 +1,7 @@
 const child_process = require("child_process");
 const { readFileSync } = require("fs");
 const path = require("path");
+const fs = require("fs");
 
 // search for dev-server port 
 // start in current folder
@@ -23,7 +24,7 @@ while (true) {
 // check if we are in a monorepo and extract path from package.json
 let packageRepositoryPath = "";
 const pkg = require(path.join(process.cwd(), "package.json"));
-packageRepositoryPath = pkg.repository.directory;
+packageRepositoryPath = pkg.repository ? pkg.repository.directory : "";
 
 // construct base url
 // use devServerPort if a dev server is running, otherwise let the baseUrl in the wdio config be used
@@ -57,7 +58,14 @@ if (process.argv.length > 3) {
     restParams = process.argv.slice(2).join(" ");
 }
 
+let wdioConfig = "";
+if (fs.existsSync("config/wdio.conf.cjs")) {
+    wdioConfig = "config/wdio.conf.cjs";
+} else if (fs.existsSync("config/wdio.conf.js")) {
+    wdioConfig = "config/wdio.conf.js";
+}
+
 // run wdio with calculated parameters
-const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js ${spec} ${baseUrl} ${restParams}`;
+const cmd = `yarn cross-env WDIO_LOG_LEVEL=error wdio ${wdioConfig} ${spec} ${baseUrl} ${restParams}`;
 console.log(`executing: ${cmd}`);
 child_process.execSync(cmd, {stdio: 'inherit'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-9c26e8e4f",
+  "version": "0.0.0-9ed6f23c6",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,8 +21,9 @@
     "directory": "packages/tools"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "@wdio/cli": "^7.19.7",
-    "@wdio/devtools-service": "^7.19.7",
     "@wdio/dot-reporter": "^7.19.7",
     "@wdio/local-runner": "^7.19.7",
     "@wdio/mocha-framework": "^7.19.7",
@@ -35,7 +36,7 @@
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.11",
+    "cssnano": "^6.0.1",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -50,22 +51,30 @@
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
+    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-import": "^14.0.2",
     "postcss-selector-parser": "^6.0.10",
+    "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
-    "vite": "^2.9.12",
+    "vite": "^3.0.4",
     "wdio-chromedriver-service": "^7.3.2",
     "zx": "^4.3.0"
   },
   "peerDependencies": {
-    "chromedriver": "*"
+    "chromedriver": "*",
+    "typescript": "^4.9.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "yargs": "^17.5.1"