@ui5/webcomponents-tools 0.0.0-f1f9d888f → 0.0.0-f24ff9019

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

@@ -1,35 +1,38 @@
-const fs = require("fs");
+const fs = require("fs").promises;
 const path = require('path');
-const mkdirp = require("mkdirp");
 
-const packageName = JSON.parse(fs.readFileSync("package.json")).name;
+const generate = async () => {
 
-const inputFolder = path.normalize(process.argv[2]);
-const outputFile = path.normalize(`${process.argv[3]}/i18n.js`);
+	const packageName = JSON.parse(await fs.readFile("package.json")).name;
+
+	const inputFolder = path.normalize(process.argv[2]);
+	const outputFile = path.normalize(`${process.argv[3]}/i18n-static.js`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.js`);
 
 // All languages present in the file system
-const files = fs.readdirSync(inputFolder);
-const languages = files.map(file => {
-	const matches = file.match(/messagebundle_(.+?).json$/);
-	return matches ? matches[1] : undefined;
-}).filter(key => !!key);
+	const files = await fs.readdir(inputFolder);
+	const languages = files.map(file => {
+		const matches = file.match(/messagebundle_(.+?).json$/);
+		return matches ? matches[1] : undefined;
+	}).filter(key => !!key);
 
-let content;
+	let contentStatic, contentDynamic;
 
 // No i18n - just import dependencies, if any
-if (languages.length === 0) {
-  content = ``;
+	if (languages.length === 0) {
+		contentStatic = "";
+		contentDynamic = "";
 // There is i18n - generate the full file
-} else {
-
-// Keys for the array
-const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
+	} else {
+		// Keys for the array
+		const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
+		const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
 
-// Actual imports for json assets
-const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
+		// Actual imports for json assets
+		const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
 
-// Resulting file content
-content = `import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+		// static imports
+		contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
 
 ${assetsImportsString}
 
@@ -37,17 +40,59 @@ const bundleMap = {
 	${languagesKeysString}
 };
 
-const allEntriesInlined = Object.entries(bundleMap).every(([_key, value]) => typeof (value) === "object");
-
-if (allEntriesInlined) {
-	console.warn(\`Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
-See rollup-plugin-url or webpack file-loader for more information.
-Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
+const fetchMessageBundle = async (localeId) => {
+	if (typeof bundleMap[localeId] === "object") {
+		// inlined from build
+		throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
+	}
+	return (await fetch(bundleMap[localeId])).json()
 }
 
-registerI18nBundle("${packageName}", bundleMap);
+const localeIds = [${languagesKeysStringArray}];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
+});
 `;
+
+		// Actual imports for json assets
+		const dynamicImportsString = languages.map(key => `		case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
+
+		// Resulting file content
+		contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+	const importMessageBundle = async (localeId) => {
+		switch (localeId) {
+	${dynamicImportsString}
+			default: throw "unknown locale"
+		}
+	}
+
+	const importAndCheck = async (localeId) => {
+		const data = await importMessageBundle(localeId);
+		if (typeof data === "string" && data.endsWith(".json")) {
+			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+		}
+		return data;
+	}
+
+	const localeIds = [${languagesKeysStringArray}];
+
+	localeIds.forEach(localeId => {
+		registerI18nLoader("${packageName}", localeId, importAndCheck);
+	});
+	`;
+
+
+	}
+
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	return Promise.all([
+		fs.writeFile(outputFile, contentStatic),
+		fs.writeFile(outputFileDynamic, contentDynamic),
+	]);
 }
 
-mkdirp.sync(path.dirname(outputFile));
-fs.writeFileSync(outputFile, content);
+generate().then(() => {
+	console.log("Generated i18n JSON imports.");
+});

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

@@ -1,42 +1,80 @@
-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 generate = async () => {
+	const inputFolder = path.normalize(process.argv[2]);
+	const outputFile = path.normalize(`${process.argv[3]}/Themes-static.js`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.js`);
 
 // 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 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(fs.readFileSync("package.json")).name;
+	const packageName = JSON.parse(await fs.readFile("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");
+	const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
+	const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
+	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
+	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import("../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
 
-// Resulting file content
-const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+// static imports file content
+	const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 ${importLines}
 
+const themeUrlsByName = ${themeUrlsByName};
 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"\`);
-}
+const loadThemeProperties = async (themeName) => {
+	if (typeof themeUrlsByName[themeName] === "object") {
+		// inlined from build
+		throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
+	}
+	return (await fetch(themeUrlsByName[themeName])).json();
+};
+
+${availableThemesArray}
+  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
+`;
+
 
-${registerLines}
+// dynamic imports file content
+	const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+const loadThemeProperties = async (themeName) => {
+	switch (themeName) {
+${dynamicImportLines}
+		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 or use 'import ".../Assets-static.js"'. 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(outputFile), { recursive: true });
+	return Promise.all([
+		fs.writeFile(outputFile, contentStatic),
+		fs.writeFile(outputFileDynamic, contentDynamic)
+	]);
+};
+
+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,40 @@
-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';
+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}
 
-const main = (context, tags, suffix) => {
-	setTags(tags);
-	setSuffix(suffix);
-	return block0(context);
-};
- 
-export default main;`
+export default block0;`;
 };
 
 module.exports = {
 	generateTemplate: buildRenderer
-};
+};