@ui5/webcomponents-tools 0.0.0-96e98c995 → 0.0.0-97cba4b0b

package/CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.12.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0...v1.12.0-rc.0) (2023-03-09)
+
+
+### Features
+
+* enhance create-ui5-element command to create component in TS ([#6609](https://github.com/SAP/ui5-webcomponents/issues/6609)) ([d870065](https://github.com/SAP/ui5-webcomponents/commit/d8700650a4e5991862e2076cc2c93482011c4c90))
+
+
+
+
+
+# [1.11.0](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.4...v1.11.0) (2023-03-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.11.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.3...v1.11.0-rc.4) (2023-03-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.11.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.2...v1.11.0-rc.3) (2023-02-23)
+
+
+### Features
+
+* **playground:** next playground with storybook ([#5831](https://github.com/SAP/ui5-webcomponents/issues/5831)) ([79274c8](https://github.com/SAP/ui5-webcomponents/commit/79274c8e442cf5854a7fe6327f25aaed04312103)), closes [#5898](https://github.com/SAP/ui5-webcomponents/issues/5898)
+
+
+
+
+
+# [1.11.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.1...v1.11.0-rc.2) (2023-02-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.11.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.11.0-rc.0...v1.11.0-rc.1) (2023-02-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.11.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.10.4-rc.0...v1.11.0-rc.0) (2023-02-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.10.4-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.10.3...v1.10.4-rc.0) (2023-01-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 ## [1.10.3](https://github.com/SAP/ui5-webcomponents/compare/v1.10.2...v1.10.3) (2023-01-25)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/components-package/nps.js

@@ -8,14 +8,17 @@ const getScripts = (options) => {
 
 	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
 	const illustrationsData = options.illustrationsData || [];
-	illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
 	const createIllustrationsJSImportsScript = illustrations.join(" && ");
 
 	// The script creates the "dist/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
 	const illustrationDestinationPaths = illustrationsData.map(illustrations => illustrations.destinationPath);
 	const createIllustrationsLoadersScript = options.fioriPackage ? `node ${LIB}/generate-js-imports/illustrations.js ${illustrationDestinationPaths[0]} ${illustrationDestinationPaths[1]} dist/generated/js-imports` : "";
-	const tsCommand = options.typescript ? "tsc" : "";
-	const tsWatchCommand = options.typescript ? "tsc --watch" : "";
+	const tsOption = options.typescript;
+	const tsCommand = tsOption ? "tsc" : "";
+	const tsWatchCommand = tsOption ? "tsc --watch" : "";
+	const tsCrossEnv = tsOption ? "cross-env UI5_TS=true" : "";
+	const copySrcGenerated = tsOption ? "" : "copy.srcGenerated";
 
 	let viteConfig;
 	if (fs.existsSync("config/vite.config.js")) {
@@ -42,26 +45,26 @@ const getScripts = (options) => {
 	}
 
 	const scripts = {
-		clean: 'rimraf jsdoc-dist && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
+		clean: 'rimraf jsdoc-dist && rimraf src/generated && rimraf dist && rimraf .port && nps "scope.testPages.clean"',
 		lint: `eslint . ${eslintConfig}`,
-		lintfix: `eslint . ${eslintConfig}`,
+		lintfix: `eslint . ${eslintConfig} --fix`,
 		prepare: {
-			default: "nps clean prepare.all generateAPI",
-			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps typescript" "nps build.illustrations"',
+			default: `${tsCrossEnv} nps clean prepare.all typescript generateAPI`,
+			all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.illustrations"',
 			styleRelated: "nps build.styles build.jsonImports build.jsImports",
 		},
 		typescript: tsCommand,
 		build: {
-			default: "nps lint prepare build.bundle",
+			default: "nps prepare lint build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
 			styles: {
-				default: "nps build.styles.themes build.styles.components",
+				default: `nps build.styles.themes build.styles.components ${copySrcGenerated}`,
 				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,
 				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
+				defaultsjs: `node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
 				json: `node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
@@ -79,10 +82,11 @@ const getScripts = (options) => {
 		copy: {
 			default: "nps copy.src copy.props",
 			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
+			srcGenerated: `node "${LIB}/copy-and-watch/index.js" --silent "src/generated/**/*.js" dist/generated/`,
 			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 		},
 		watch: {
-			default: 'concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "nps watch.styles" "nps watch.i18n" "nps watch.props"',
+			default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.api" "nps watch.src" "nps watch.typescript" "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
 			devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			typescript: tsWatchCommand,

package/components-package/postcss.components.js

@@ -6,16 +6,16 @@ const fs = require("fs");
 const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 module.exports = {
-	plugins: [
-		postcssImport(),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-					mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
-				},
-			]
-		}),
-		postcssCSStoESM({toReplace: 'src', includeDefaultTheme: true, packageName}),
-	]
-};
+		plugins: [
+			postcssImport(),
+			cssnano({
+				preset: [
+					'default', {
+						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
+						mergeRules: false, // https://github.com/cssnano/cssnano/issues/730
+					},
+				]
+			}),
+			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
+		]
+}

package/components-package/postcss.themes.js

@@ -8,19 +8,19 @@ const fs = require("fs");
 const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 module.exports = {
-	plugins: [
-		postcssImport(),
-		combineSelectors({
-			removeDuplicatedProperties: true
-		}),
-		cssnano({
-			preset: [
-				'default', {
-					mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
-				},
-			]
-		},),
-		postcssCSStoJSON({toReplace: 'src', packageName}),
-		postcssCSStoESM({toReplace: 'src', packageName}),
-	]
+		plugins: [
+			postcssImport(),
+			combineSelectors({
+				removeDuplicatedProperties: true
+			}),
+			cssnano({
+				preset: [
+					'default', {
+						mergeLonghand: false, // https://github.com/cssnano/cssnano/issues/675
+					},
+				]
+			},),
+			postcssCSStoJSON({ toReplace: 'src', packageName }),
+			postcssCSStoESM({ toReplace: 'src', packageName }),
+		]
 };

package/icons-collection/nps.js

@@ -41,15 +41,17 @@ const copyIconAssetsCommand = (options) => {
 const getScripts = (options) => {
 	const createJSImportsCmd = createIconImportsCommand(options);
 	const copyAssetsCmd = copyIconAssetsCommand(options);
+	const tsCommand = options.typescript ? "tsc" : "";
+	const tsCrossEnv = options.typescript ? "cross-env UI5_TS=true" : "";
 
 	const scripts = {
-		clean: "rimraf dist",
+		clean: "rimraf dist && rimraf src/generated",
 		copy: copyAssetsCmd,
 		build: {
-			default: `nps clean typescript copy build.i18n build.icons build.jsonImports`,
+			default: `${tsCrossEnv} nps clean copy build.i18n typescript build.icons build.jsonImports`,
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
-				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
+				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
 				json: `mkdirp dist/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
 			jsonImports: {
@@ -58,7 +60,7 @@ const getScripts = (options) => {
 			},
 			icons: createJSImportsCmd,
 		},
-		typescript: "tsc",
+		typescript: tsCommand,
 	};
 
 	return scripts;

package/lib/create-icons/index.js

@@ -1,7 +1,7 @@
 const fs = require("fs").promises;
 const path = require("path");
 
-const collectionName = process.argv[2] || "SAP-icons";
+const collectionName = process.argv[2] || "SAP-icons-v4";
 const collectionVersion = process.argv[3];
 const srcFile = collectionVersion ? path.normalize(`src/${collectionVersion}/${collectionName}.json`) : path.normalize(`src/${collectionName}.json`);
 const destDir = collectionVersion ? path.normalize(`dist/${collectionVersion}/`) : path.normalize("dist/");
@@ -38,13 +38,13 @@ export { pathData, ltr, accData };`;
 
 
 
-const collectionTemplate = (name) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import {pathData as pathDataV5, ltr, accData} from "./v5/${name}.js";
-import {pathData as pathDataV4} from "./v4/${name}.js";
+const collectionTemplate = (name, versions, fullName) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { pathData as pathData${versions[0]}, ltr, accData } from "./${versions[0]}/${name}.js";
+import { pathData as pathData${versions[1]} } from "./${versions[1]}/${name}.js";
 
-const pathData = isThemeFamily("sap_horizon") ? pathDataV5 : pathDataV4;
+const pathData = isThemeFamily("sap_horizon") ? pathData${versions[1]} : pathData${versions[0]};
 
-export default "${name}";
+export default "${fullName}";
 export { pathData, ltr, accData };`;
 
 
@@ -80,22 +80,45 @@ const createIcons = async (file) => {
 		const pathData = iconData.path;
 		const ltr = !!iconData.ltr;
 		const acc = iconData.acc;
+		const packageName =  json.packageName;
+		const collection =  json.collection;
 
-		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, json.collection, json.packageName) : iconTemplate(name, pathData, ltr, json.collection, json.packageName);
+		const content = acc ? iconAccTemplate(name, pathData, ltr, acc, collection, packageName) : iconTemplate(name, pathData, ltr, collection, packageName);
 
 		promises.push(fs.writeFile(path.join(destDir, `${name}.js`), content));
 		promises.push(fs.writeFile(path.join(destDir, `${name}.svg`), svgTemplate(pathData)));
-		promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, json.collection)));
+		promises.push(fs.writeFile(path.join(destDir, `${name}.d.ts`), typeDefinitionTemplate(name, acc, collection)));
+
+		// For versioned icons collections, the script creates top level (unversioned) module that internally imports the versioned ones.
+		// For example, the top level "@ui5/ui5-webcomponents-icons/dist/accept.js" imports:
+		// - "@ui5/ui5-webcomponents-icons/dist/v5/accept.js" 
+		// - "@ui5/ui5-webcomponents-icons/dist/v4/accept.js"
 
 		if (json.version) {
-			promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name)));
-            promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(name, acc)));
+			// The exported value from the top level (unversioned) icon module depends on whether the collection is the default,
+			// to add or not the collection name to the exported value:
+			// For the default collection (SAPIcons) we export just the icon name - "export default { 'accept' }"
+			// For non-default collections (SAPTNTIcons and SAPBSIcons) we export the full name - "export default { 'tnt/actor' }"
+			const effectiveName = isDefaultCollection(collection) ? name : getUnversionedFullIconName(name, collection);
+			promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.js`), collectionTemplate(name, json.versions, effectiveName)));
+            promises.push(fs.writeFile(path.join(path.normalize("dist/"), `${name}.d.ts`), collectionTypeDefinitionTemplate(effectiveName, acc)));
 		}
 	}
 
 	return Promise.all(promises);
 };
 
+const isDefaultCollection = collectionName => collectionName === "SAP-icons-v4"  || collectionName === "SAP-icons-v5";
+const getUnversionedFullIconName = (name, collection) => `${getUnversionedCollectionName(collection)}/${name}`;
+const getUnversionedCollectionName = collectionName => CollectionVersionedToUnversionedMap[collectionName] || collectionName;
+
+const CollectionVersionedToUnversionedMap = {
+	"tnt-v2": "tnt",
+	"tnt-v3": "tnt",
+	"business-suite-v1": "business-suite",
+	"business-suite-v2": "business-suite",
+};
+
 createIcons(srcFile).then(() => {
 	console.log("Icons created.");
 });

package/lib/create-new-component/index.js

@@ -1,80 +1,7 @@
 const fs = require("fs");
-
-const jsFileContentTemplate = componentName => {
-	return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
-
-// Styles
-import ${componentName}Css from "./generated/themes/${componentName}.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "${tagName}",
-	properties: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
-		//
-	},
-	slots: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
-		//
-	},
-	events: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
-		//
-	},
-};
-
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- *
- * <h3>Usage</h3>
- *
- * For the <code>${tagName}</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import ${packageName}/dist/${componentName}.js";</code>
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.${library}.${componentName}
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ${tagName}
- * @public
- */
-class ${componentName} extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ${componentName}Css;
-	}
-
-	static get template() {
-		return ${componentName}Template;
-	}
-
-	static get dependencies() {
-		return [];
-	}
-
-	static async onDefine() {
-
-	}
-}
-
-${componentName}.define();
-
-export default ${componentName};
-`;
-};
+const prompts = require("prompts");
+const jsFileContentTemplate = require("./jsFileContentTemplate.js");
+const tsFileContentTemplate = require("./tsFileContentTemplate.js");
 
 const getPackageName = () => {
 	if (!fs.existsSync("./package.json")) {
@@ -108,47 +35,117 @@ const getLibraryName = packageName => {
 	return packageName.substr("webcomponents-".length);
 };
 
-const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+// String manipulation
+const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
+
+// Validation of user input
+const isNameValid = name => typeof name === "string" && name.match(/^[a-zA-Z][a-zA-Z0-9_-]*$/);
+const isTagNameValid = tagName => tagName.match(/^([a-z][a-z0-9]*-)([a-z0-9]+(-[a-z0-9]+)*)$/);
+
+const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
+	componentName = capitalizeFirstLetter(componentName);
+	const filePaths = {
+		"main": isTypeScript 
+			? `./src/${componentName}.ts` 
+			: `./src/${componentName}.js`,
+		"css": `./src/themes/${componentName}.css`,
+		"template": `./src/${componentName}.hbs`,
+	};
 
-const packageName = getPackageName();
-const library = getLibraryName(packageName);
+	const FileContentTemplate = isTypeScript 
+		? tsFileContentTemplate(componentName, tagName, library, packageName) 
+		: jsFileContentTemplate(componentName, tagName, library, packageName);
 
-const consoleArguments = process.argv.slice(2);
-const componentName = consoleArguments[0];
+	fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
+	fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
+	fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
 
-if (!componentName){
-	console.error("Please enter component name.");
-	return;
+	console.log(`Successfully generated ${filePaths.main}`);
+	console.log(`Successfully generated ${filePaths.css}`);
+	console.log(`Successfully generated ${filePaths.template}`);
+
+	// Change the color of the output
+	console.warn('\x1b[33m%s\x1b[0m', `
+	Make sure to import the component in your bundle by using:
+	import ${componentName} from "./dist/${componentName}.js";`);
 }
 
-const tagName = `ui5-${camelToKebabCase(componentName)}`;
+// Main function
+const createWebComponent = async () => {
+	const packageName = getPackageName();
+	const library = getLibraryName(packageName);
 
-const filePaths = {
-	"js": `./src/${componentName}.js`,
-	"css": `./src/themes/${componentName}.css`,
-	"hbs": `./src/${componentName}.hbs`,
-};
-const sJsFileContentTemplate = jsFileContentTemplate(componentName);
+	const consoleArguments = process.argv.slice(2);
+	let componentName = consoleArguments[0];
+	let tagName = consoleArguments[1];
+	let language = consoleArguments[2];
+	let isTypeScript;
 
-fs.writeFileSync(filePaths.js, sJsFileContentTemplate, { flag: "wx+" });
-fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
-fs.writeFileSync(filePaths.hbs, "<div>Hello World</div>", { flag: "wx+" });
 
+	if (componentName && !isNameValid(componentName)) {
+		throw new Error("Invalid component name. Please use only letters, numbers, dashes and underscores. The first character must be a letter.");
+	}
 
-console.log(`Successfully generated ${componentName}.js`);
-console.log(`Successfully generated ${componentName}.css`);
-console.log(`Successfully generated ${componentName}.hbs`);
+	if (tagName && !isTagNameValid(tagName)) {
+		throw new Error("Invalid tag name. The tag name should only contain lowercase letters, numbers, dashes, and underscores. The first character must be a letter, and it should follow the pattern 'tag-name'.");
+	}
 
-const bundleLogger = fs.createWriteStream("./bundle.common.js", {
-	flags: "a" // appending
-});
+	if (language && language !== "typescript" && language !== "ts" && language !== "javascript" && language !== "js") {
+		throw new Error("Invalid language. Please use 'typescript','javascript' or their respective 'ts','js'.");
+	}
 
-bundleLogger.write(`
-// TODO: Move this line in order to keep the file sorted alphabetically
-import ${componentName} from "./dist/${componentName}.js";`);
+	if (!componentName) {
+		const response = await prompts({
+			type: "text",
+			name: "componentName",
+			message: "Please enter a component name:",
+			validate: (value) => isNameValid(value),
+		});
+		componentName = response.componentName;
+
+		if (!componentName) {
+			process.exit();
+		}
+	}
 
-// Change the color of the output
-	console.warn('\x1b[33m%s\x1b[0m', `
-Component is imported in bundle.common.js.
-Do NOT forget to sort the file in alphabeticall order.
-`);
+	if (!tagName) {
+		const response = await prompts({
+			type: "text",
+			name: "tagName",
+			message: "Please enter a tag name:",
+			validate: (value) => isTagNameValid(value),
+		});
+		tagName = response.tagName;
+
+		if (!tagName) {
+			process.exit();
+		}
+	}
+
+	if (!language) {
+		const response = await prompts({
+			type: "select",
+			name: "isTypeScript",
+			message: "Please select a language:",
+			choices: [
+				{
+					title: "TypeScript (recommended)",
+					value: true,
+				},
+				{
+					title: "JavaScript",
+					value: false,
+				},
+			],
+		});
+		isTypeScript = response.isTypeScript;
+	} else if (language === "typescript" || language === "ts") {
+		isTypeScript = true;
+	} else {
+		isTypeScript = false;
+	}
+
+	generateFiles(componentName, tagName, library, packageName, isTypeScript);
+};
+
+createWebComponent();

package/lib/create-new-component/jsFileContentTemplate.js

@@ -0,0 +1,77 @@
+const jsFileContentTemplate = (componentName, tagName, library, packageName) => {
+	return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
+
+// Styles
+import ${componentName}Css from "./generated/themes/${componentName}.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "${tagName}",
+	properties: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
+		//
+	},
+	slots: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
+		//
+	},
+	events: /** @lends sap.ui.webc.${library}.${componentName}.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>${tagName}</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import ${packageName}/dist/${componentName}.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.${library}.${componentName}
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ${tagName}
+ * @public
+ */
+class ${componentName} extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return ${componentName}Css;
+	}
+
+	static get template() {
+		return ${componentName}Template;
+	}
+
+	static get dependencies() {
+		return [];
+	}
+
+	static async onDefine() {
+
+	}
+}
+
+${componentName}.define();
+
+export default ${componentName};
+`;
+};
+
+module.exports = jsFileContentTemplate;

package/lib/create-new-component/tsFileContentTemplate.js

@@ -0,0 +1,84 @@
+const tsFileContentTemplate = (componentName, tagName, library, packageName) => {
+	return `import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
+
+// Styles
+import ${componentName}Css from "./generated/themes/${componentName}.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>${tagName}</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import ${packageName}/dist/${componentName}.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.${library}.${componentName}
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ${tagName}
+ * @public
+ */
+@customElement({
+	tag: "${tagName}",
+	renderer: litRender,
+	styles: ${componentName}Css,
+	template: ${componentName}Template,
+	dependencies: [],
+})
+
+/**
+ * Example custom event.
+ * Please keep in mind that all public events should be documented in the API Reference as shown below.
+ *
+ * @event sap.ui.webc.${library}.${componentName}#interact
+ * @public
+ */
+@event("interact", { detail: { /* event payload ( optional ) */ } })
+class ${componentName} extends UI5Element {
+	/**
+	 * Defines the value of the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.${library}.${componentName}.prototype.value
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	value!: string;
+
+	/**
+	 * Defines the text of the component.
+	 *
+	 * @type {Node[]}
+	 * @name sap.ui.webc.${library}.${componentName}.prototype.default
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: Node, "default": true })
+	text!: Array<Node>;
+
+	static async onDefine() {
+
+	}
+}
+
+${componentName}.define();
+
+export default ${componentName};
+`;
+};
+
+module.exports = tsFileContentTemplate;

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;
@@ -45,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}"};`;
 	};
 
@@ -62,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/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, filePath, packageName, css, includeDefaultTheme);
 			if (content !== oldContent) {
 				fs.writeFileSync(filePath, content);
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-96e98c995",
+  "version": "0.0.0-97cba4b0b",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -62,7 +62,7 @@
     "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"
   },