@ui5/webcomponents-tools 0.0.0-f2abb18c2 → 0.0.0-f42e7c18c

package/lib/generate-json-imports/themes.js

@@ -1,42 +1,63 @@
-const fs = require("fs");
+const fs = require("fs").promises;
 const path = require('path');
-const mkdirp = require("mkdirp");
 const assets = require("../../assets-meta.js");
 
-const inputFolder = path.normalize(process.argv[2]);
-const outputFile = path.normalize(`${process.argv[3]}/Themes.js`);
+const isTypeScript = process.env.UI5_TS;
+const ext = isTypeScript ? 'ts' : 'js';
+
+const generate = async () => {
+	const inputFolder = path.normalize(process.argv[2]);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/Themes-fetch.${ext}`);
 
 // All supported optional themes
-const optionalThemes = assets.themes.all.filter(theme => theme !== assets.themes.default);
+	const allThemes = assets.themes.all;
 
 // All themes present in the file system
-const dirs = fs.readdirSync(inputFolder);
-const themesOnFileSystem = dirs.map(dir => {
-	const matches = dir.match(/sap_.*$/);
-	return matches ? dir : undefined;
-}).filter(key => !!key && optionalThemes.includes(key));
-
-const packageName = JSON.parse(fs.readFileSync("package.json")).name;
-
-const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
-const isInlinedCondition = themesOnFileSystem.map(theme => `isInlined(${theme})`).join(" || ");
-const registerLines = themesOnFileSystem.map(theme => `registerThemeProperties("${packageName}", "${theme}", ${theme});`).join("\n");
-
-// Resulting file content
-const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-
-${importLines}
-
-const isInlined = obj => typeof (obj) === "object";
-
-if (${isInlinedCondition}) {
-	console.warn(\`Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
-See rollup-plugin-url or webpack file-loader for more information.
-Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
-}
-
-${registerLines}
+	const dirs = await fs.readdir(inputFolder);
+	const themesOnFileSystem = dirs.map(dir => {
+		const matches = dir.match(/sap_.*$/);
+		return matches ? dir : undefined;
+	}).filter(key => !!key && allThemes.includes(key));
+
+	const packageName = JSON.parse(await fs.readFile("package.json")).name;
+
+	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
+	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
+	const fetchMetaResolveLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await fetch(new URL("../assets/themes/${theme}/parameters-bundle.css.json", import.meta.url))).json();`).join("\n");
+
+// dynamic imports file content
+	const contentDynamic = function (lines) {
+		return `// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+const loadThemeProperties = async (themeName) => {
+	switch (themeName) {
+${lines}
+		default: throw "unknown theme"
+	}
+};
+
+const loadAndCheck = async (themeName) => {
+	const data = await loadThemeProperties(themeName);
+	if (typeof data === "string" && data.endsWith(".json")) {
+		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
+	}
+	return data;
+};
+
+${availableThemesArray}
+  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
-
-mkdirp.sync(path.dirname(outputFile));
-fs.writeFileSync(outputFile, content);
+	}
+
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
+	return Promise.all([
+		fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
+		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
+	]);
+};
+
+generate().then(() => {
+	console.log("Generated themes JSON imports.");
+});

package/lib/hbs2lit/src/compiler.js

@@ -12,15 +12,25 @@ const removeWhiteSpaces = (source) => {
 		.replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
 };
 
-const hbs2lit = (file) => {
-	let sPreprocessed = includesReplacer.replace(file);
+const hbs2lit = async (file, componentName) => {
+	let sPreprocessed = await includesReplacer.replace(file);
 
 	sPreprocessed = removeWhiteSpaces(sPreprocessed);
 
+	const blockSignature = process.env.UI5_TS ? `this: ${componentName}` : ""
+
+	// icons hack
+	if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
+		return `
+		function block0 (${blockSignature}) {
+			return svg\`${sPreprocessed}\`
+		}`;
+	}
+
 	const ast = Handlebars.parse(sPreprocessed);
 
 	const pv = new PartialsVisitor();
-	const lv = new HTMLLitVisitor();
+	const lv = new HTMLLitVisitor(componentName);
 
 	let result = "";
 
@@ -30,7 +40,17 @@ const hbs2lit = (file) => {
 	lv.accept(ast);
 
 	for (let key in lv.blocks) {
-		result += lv.blocks[key] + "\n";
+		let block = lv.blocks[key];
+
+		if (block.match(/scopeTag/)) {
+			// const matches = block.match(/^(.*?)( => )(.*?);$/);
+			const matches = block.match(/^(function .*? \{ return )(.*?);\}$/);
+			const scopedCode = matches[2];
+			const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
+			block = `${matches[1]}suffix ? ${scopedCode} : ${normalCode};}`;
+		}
+
+		result += block + "\n";
 	}
 
 	result = svgProcessor.process(result);

package/lib/hbs2lit/src/includesReplacer.js

@@ -1,9 +1,9 @@
 const path = require("path");
-const fs = require("fs");
+const fs = require("fs").promises;
 
-function replaceIncludes(file) {
+const replaceIncludes = async (file) => {
 	const filePath = path.dirname(file);
-	let fileContent = fs.readFileSync(file, "utf-8");
+	let fileContent = await fs.readFile(file, "utf-8");
 
 	const inclRegex = /{{>\s*include\s*["'](.+?)["']}}/g;
 	let match;
@@ -20,11 +20,11 @@ function replaceIncludes(file) {
 			targetFile = require.resolve(targetFile);
 		}
 
-		fileContent = fileContent.replace(match[0], replaceIncludes(targetFile));
+		fileContent = fileContent.replace(match[0], await replaceIncludes(targetFile));
 	}
 
 	return fileContent;
-}
+};
 
 module.exports = {
 	replace: replaceIncludes

package/lib/hbs2lit/src/litVisitor2.js

@@ -8,17 +8,38 @@ let skipIfDefined = false;
 // when true => an HTML node value, when false => an attribute value
 let isNodeValue = false;
 
+// when true => the current attribute is "style"
+let isStyleAttribute = false;
+
 // matches event handlers @click= and boolean attrs ?disabled=
 const dynamicAttributeRgx = /\s(\?|@)([a-zA-Z|-]+)="?\s*$/;
 
-function HTMLLitVisitor(debug) {
+if (!String.prototype.replaceAll) {
+	String.prototype.replaceAll = function(str, newStr){
+
+		// If a regex pattern
+		if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+			return this.replace(str, newStr);
+		}
+
+		// If a string
+		return this.replace(new RegExp(str, 'g'), newStr);
+
+	};
+}
+
+function HTMLLitVisitor(componentName, debug) {
 	this.blockCounter = 0;
 	this.keys = [];
 	this.blocks = {};
 	this.result = "";
 	this.mainBlock = "";
-	this.blockPath = "context";
-	this.blockParameters = ["context"];
+	this.blockLevel = 0;
+	this.componentName = componentName
+	const blockParametersDefinitionTS = [`this: ${componentName}`, "context: UI5Element", "tags: string[]", "suffix: string | undefined"];
+	const blockParametersDefinitionJS = ["context", "tags", "suffix"];
+	this.blockParametersDefinition = process.env.UI5_TS ? blockParametersDefinitionTS : blockParametersDefinitionJS;
+	this.blockParametersUsage = ["this", "context", "tags", "suffix"];
 	this.paths = []; //contains all normalized relative paths
 	this.debug = debug;
 	if (this.debug) {
@@ -34,18 +55,18 @@ HTMLLitVisitor.prototype.Program = function(program) {
 	this.keys.push(key);
 	this.debug && this.blockByNumber.push(key);
 
-	this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => { return ";
+	// this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: any, ` + this.blockParametersDefinition.join(", ") + ") { ";
+	this.blocks[this.currentKey()] = `function ${this.currentKey()} (${this.blockParametersDefinition.join(", ")}) { `;
 
 	if (this.keys.length > 1) { //it's a nested block
-		this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
+		this.blocks[this.prevKey()] += this.currentKey() + ".call(" + this.blockParametersUsage.join(", ") + ")";
 	} else {
 		this.mainBlock = this.currentKey();
-		this.paths.push(this.blockPath);
 	}
 
-	this.blocks[this.currentKey()] += "html`";
+	this.blocks[this.currentKey()] += "return html`";
 	Visitor.prototype.Program.call(this, program);
-	this.blocks[this.currentKey()] += "`; };";
+	this.blocks[this.currentKey()] += "`;}";
 
 	this.keys.pop(key);
 };
@@ -54,7 +75,7 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
 	Visitor.prototype.ContentStatement.call(this, content);
 	// let content = content.orgiinal; // attribute="__ attribute = "__  attribute ="__
 
-	const contentStatement = content.original;
+	let contentStatement = content.original;
 	skipIfDefined = !!dynamicAttributeRgx.exec(contentStatement);
 
 	const closingIndex = contentStatement.lastIndexOf(">");
@@ -63,6 +84,15 @@ HTMLLitVisitor.prototype.ContentStatement = function(content) {
 		isNodeValue = closingIndex > openingIndex;
 	}
 
+	isStyleAttribute = !isNodeValue && contentStatement.match(/style *= *["']? *$/);
+
+	if (!isStyleAttribute && contentStatement.match(/style=/)) {
+		console.log("WARNING: style hard-coded", contentStatement);
+	}
+
+	// Scope custom element tags
+	contentStatement = contentStatement.replaceAll(/(<\/?\s*)([a-zA-Z0-9_]+-[a-zA-Z0-9_-]+)/g, "$1\${scopeTag(\"$2\", tags, suffix)}");
+
 	this.blocks[this.currentKey()] += contentStatement;
 };
 
@@ -73,16 +103,19 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
 		this.blocks[this.currentKey()] += "${index}";
 	} else {
 		const path = normalizePath.call(this, mustache.path.original);
-		const hasCalculatingClasses = path.includes("context.classes");
-		const hasStylesCalculation = path.includes("context.styles");
+		const hasCalculatingClasses = path.includes("this.classes");
 
 		let parsedCode = "";
 
 		if (isNodeValue && !mustache.escaped) {
 			parsedCode = `\${unsafeHTML(${path})}`;
 		} else if (hasCalculatingClasses) {
-			parsedCode = `\${classMap(${path})}`;
-		} else if (hasStylesCalculation) {
+			if (process.env.UI5_TS) {
+				parsedCode = `\${classMap(${path} as ClassMapValue)}`;
+			} else {
+				parsedCode = `\${classMap(${path})}`;
+			}
+		} else if (isStyleAttribute) {
 			parsedCode = `\${styleMap(${path})}`;
 		} else if (skipIfDefined){
 			parsedCode = `\${${path}}`;
@@ -146,22 +179,37 @@ function visitEachBlock(block) {
 	var bParamAdded = false;
 	visitSubExpression.call(this, block);
 
-	this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", (item, index) => item._id || index, (item, index) => ";
+	const reapeatDirectiveParamsTS = "(item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number)";
+	const reapeatDirectiveParamsJS = "(item, index) => item._id || index, (item, index)";
+	const repleatDirectiveParams = process.env.UI5_TS ? reapeatDirectiveParamsTS : reapeatDirectiveParamsJS;
+	this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", " + repleatDirectiveParams + " => ";
 	this.paths.push(normalizePath.call(this, block.params[0].original));
-	this.blockPath = "item";
+	this.blockLevel++;
 
-	if (this.blockParameters.indexOf("item") === -1) {
+	// block params is [this, context, tags, suffix] for top level blocks
+	// blcok params is [this, context, tags, suffix, item, index] for nested blocks
+	if (!this.blockParametersUsage.includes("index")) {
+		// last item is not index, but an each block is processed, add the paramters for further nested blocks
 		bParamAdded = true;
-		this.blockParameters.unshift("index");
-		this.blockParameters.unshift("item");
+		if (process.env.UI5_TS) {
+			this.blockParametersDefinition.push("item: any");
+			this.blockParametersDefinition.push("index: number");
+		} else {
+			this.blockParametersDefinition.push("item");
+			this.blockParametersDefinition.push("index");
+		}
+		this.blockParametersUsage.push("item");
+		this.blockParametersUsage.push("index");
 	}
 	this.acceptKey(block, "program");
 	if (bParamAdded) {
-		this.blockParameters.shift("item");
-		this.blockParameters.shift("index");
+		// if parameters were added at this step, remove the last two
+		this.blockParametersDefinition.pop();
+		this.blockParametersDefinition.pop();
+		this.blockParametersUsage.pop();
+		this.blockParametersUsage.pop();
 	}
-	this.blockPath = "context";
-
+	this.blockLevel--;
 	this.blocks[this.currentKey()] += ") }";
 }
 
@@ -170,12 +218,52 @@ function normalizePath(sPath) {
 
 	//read carefully - https://github.com/wycats/handlebars.js/issues/1028
 	//kpdecker commented on May 20, 2015
-	if (result.indexOf("../") === 0) {
-		let absolutePath = replaceAll(this.paths[this.paths.length - 1], ".", "/") + "/" + result;
+
+	if (result.indexOf("@root") === 0) {
+		// Trying to access root context via the HBS "@root" variable.
+		// Example: {{@root.property}} compiles to "context.property" - called from anywhere within the template.
+		result = result.replace("@root", "this");
+
+	} else if (result.indexOf("../") === 0) {
+		let absolutePath;
+		const levelsUp = (result.match(/..\//g) || []).length;
+
+		if (this.blockLevel <= levelsUp) {
+			// Trying to access root context from nested loops.
+			// Example: {{../../property}} compiles to "context.property" - when currently in a nested level loop.
+			// Example: {{../../../property}} compile to "context.property" - when requested levels are not present. fallback to root context.
+			absolutePath = `this.${replaceAll(result,"../", "")}`;
+		} else {
+			// Trying to access upper context (one-level-up) and based on the current lelev, that could be "context" or "item".
+			// Example: {{../property}} compiles to "context.property" - when called in a top level loop.
+			// Example: {{../property}} compiles to "item.property" - when called in a nested level loop.
+			// TODO: the second example, although correctly generated to "item.property", "item" will point to the current object within the nested loop,
+			// not the upper level loop as intended. So accessing the upper loop from nested loop is currently not working.
+			absolutePath = replaceAll(this.paths[this.paths.length - 1 - levelsUp], ".", "/") + "/" + result;
+		}
+
 		result = replaceAll(path.normalize(absolutePath), path.sep, ".");
+
 	} else {
-		result = result ? replaceAll(this.blockPath + "/" + result, "/", ".") : this.blockPath;
+		// When neither "@root", nor "../" are used, use the following contexts:
+		// - use "context" - for the top level of execution, e.g "this.blockLevel = 0".
+		// - use "item" - for any nested level, e.g "this.blockLevel > 0".
+		// Example:
+		//
+		// {{text}} -> compiles to "context.text"
+		// {{#each items}}
+				// Item text: {{text}}</div> -> compiles to "item.text"
+				// 	{{#each words}}
+				// 			 Word text: {{text}}</div> -> compiles to "item.text"
+				// 	{{/each}}
+				// 	Item text: {{text}}</div> -> compiles to "item.text"
+		// {{/each}}
+		// {{text}} -> compiles to "context.text"
+
+		const blockPath = this.blockLevel > 0 ? "item" : "this";
+		result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
 	}
+
 	return result;
 }
 

package/lib/hbs2lit/src/svgProcessor.js

@@ -2,7 +2,7 @@
 const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
 const blockrx = /block[0-9]+/g;
 
-function process(input) {
+function processSVG(input) {
 	let matches;
 	let template = input;
 	let blockCounter = 0;
@@ -45,9 +45,16 @@ function getSVGMatches(template) {
 }
 
 function getSVGBlock(input, blockCounter) {
+	const definitionTS = `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
+		return svg\`${input}\`;
+	};`;
+	const definitionJS = `\nfunction blockSVG${blockCounter} (context, tags, suffix) {
+		return svg\`${input}\`;
+	};`;
+
 	return {
-		usage: `\${blockSVG${blockCounter}(context)}`,
-		definition: `\nconst blockSVG${blockCounter} = (context) => {return svg\`${input}\`};`,
+		usage: `\${blockSVG${blockCounter}.call(this, context, tags, suffix)}`,
+		definition: process.env.UI5_TS ? definitionTS : definitionJS,
 	};
 }
 
@@ -55,7 +62,7 @@ function replaceInternalBlocks(template, svgContent) {
 	const internalBlocks = svgContent.match(blockrx) || [];
 
 	internalBlocks.forEach(blockName => {
-		const rx = new RegExp(`const ${blockName}.*(html\`).*};`);
+		const rx = new RegExp(`function ${blockName}.*(html\`).*;`);
 		template = template.replace(rx, (match, p1) => {
 			return match.replace(p1, "svg\`");
 		});
@@ -65,5 +72,5 @@ function replaceInternalBlocks(template, svgContent) {
 }
 
 module.exports = {
-	process: process
+	process: processSVG,
 };

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -1,19 +1,45 @@
-const buildRenderer = (controlName, litTemplate) => {
-	return `
-/* eslint no-unused-vars: 0 */
-import ifDefined from '@ui5/webcomponents-base/dist/renderer/ifDefined.js';
-import { html, svg, repeat, classMap, styleMap, unsafeHTML, setTags, setSuffix } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
-${litTemplate}
+const tsImports = (controlName, hasTypes) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
 
-const main = (context, tags, suffix) => {
-	setTags(tags);
-	setSuffix(suffix);
-	return block0(context);
-};
- 
-export default main;`
+	const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@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 "../../../${controlName}.js";`
+	}
+	return `import type ${controlName} from "../../${controlName}.js";`
+}
+
+const buildRenderer = (controlName, litTemplate, hasTypes) => {
+	const importPrefix = process.env.UI5_BASE ? "../../../../../src/" : "@ui5/webcomponents-base/dist/";
+
+	const mainTemplateFunction = process.env.UI5_TS ?
+		`function template(this: ${controlName}) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }` :
+		`function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }`;
+
+	// 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";
+import { getCustomElementsScopingSuffix } from "${importPrefix}CustomElementsScopeUtils.js";
+${tsImports(controlName, hasTypes)}
+${litTemplate}
+${mainTemplateFunction}
+export default template;`;
 };
 
 module.exports = {
 	generateTemplate: buildRenderer
-};
+};

package/lib/hbs2ui5/index.js

@@ -1,10 +1,12 @@
-const fs = require('fs');
+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");
-const mkdirp = require('mkdirp');
+
+let missingTypesReported = false;
 
 const args = getopts(process.argv.slice(2), {
 	alias: {
@@ -22,15 +24,29 @@ const onError = (place) => {
 	console.log(`A problem occoured when reading ${place}. Please recheck passed parameters.`);
 };
 
-const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
+const isHandlebars = (fileName) => fileName.endsWith('.hbs');
 
-const processFile = (file, outputDir) => {
-	const litCode = hbs2lit(file);
-	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
+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 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);
 
-	writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
 };
 
 const composeAbsoluteOutputDir = (file, outputDir) => {
@@ -40,39 +56,54 @@ const composeAbsoluteOutputDir = (file, outputDir) => {
 	const fileDir = file.split(path.sep).slice(1, -1).join(path.sep);
 
 	// (2) Compose full output dir - "dist/generated/templates/lvl1/lvl2"
-	return `${outputDir}${path.sep}${fileDir}`; 
+	return `${outputDir}${path.sep}${fileDir}`;
 };
 
 const wrapDirectory = (directory, outputDir) => {
 	directory = path.normalize(directory);
 	outputDir = path.normalize(outputDir);
 
-	recursiveReadDir(directory, (err, files) => {
-
-		if (err) {
-			onError('directory');
-		}
+	return new Promise((resolve, reject) => {
+		recursiveReadDir(directory, (err, files) => {
 
-		files.forEach(fileName => {
-			if (isHandlebars(fileName)) {
-				processFile(fileName, outputDir);
+			if (err) {
+				onError('directory');
+				reject();
 			}
+
+			const promises = files.map(fileName => {
+				if (isHandlebars(fileName)) {
+					return processFile(fileName, outputDir);
+				}
+			}).filter(x => !!x);
+
+			resolve(Promise.all(promises));
 		});
-	})
+	});
 };
 
-const writeRenderers = (outputDir, controlName, fileContent) => {
+const writeRenderers = async (outputDir, controlName, fileContent) => {
 	try {
-		if (!fs.existsSync(outputDir)) {
-			mkdirp.sync(outputDir);
-		}
 
-		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.js`;
+		await fs.mkdir(outputDir, { recursive: true });
+
+		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");
 		fileContentUnix = fileContentUnix.replace(/\r/g, "\n");
-		fs.writeFileSync(compiledFilePath, fileContentUnix);
+
+		// Only write to the file system actual changes - each updated file, no matter if the same or not, triggers an expensive operation for rollup
+		// Note: .hbs files that include a changed .hbs file will also be recompiled as their content will be updated too
+
+		let existingFileContent = "";
+		try {
+			existingFileContent = (await fs.readFile(compiledFilePath)).toString();
+		} catch (e) {}
+
+		if (existingFileContent !== fileContentUnix) {
+			return fs.writeFile(compiledFilePath, fileContentUnix);
+		}
 
 	} catch (e) {
 		console.log(e);
@@ -82,5 +113,7 @@ const writeRenderers = (outputDir, controlName, fileContent) => {
 if (!args['d'] || !args['o']) {
 	console.log('Please provide an input and output directory (-d and -o)');
 } else {
-	wrapDirectory(args['d'], args['o']);
+	wrapDirectory(args['d'], args['o']).then(() => {
+		console.log("Templates generated");
+	});
 }