@ui5/webcomponents-tools 0.0.0-38861c872 → 0.0.0-38f83ffef

package/lib/create-new-component/{tsFileContentTemplate.js → Component.js}

@@ -1,12 +1,12 @@
-const tsFileContentTemplate = (componentName, tagName, library, packageName) => {
+const Component = (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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
-import ${componentName}Template from "./generated/templates/${componentName}Template.lit.js";
+import ${componentName}Template from "./${componentName}Template.js";
 
 // Styles
 import ${componentName}Css from "./generated/themes/${componentName}.css.js";
@@ -22,7 +22,7 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  * For the <code>${tagName}</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import ${packageName}/dist/${componentName}.js";</code>
+ * <code>import "${packageName}/dist/${componentName}.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -30,10 +30,9 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  */
 @customElement({
 	tag: "${tagName}",
-	renderer: litRender,
+	renderer: jsxRenderer,
 	styles: ${componentName}Css,
 	template: ${componentName}Template,
-	dependencies: [],
 })
 
 /**
@@ -42,8 +41,12 @@ import ${componentName}Css from "./generated/themes/${componentName}.css.js";
  *
  * @public
  */
-@event("interact", { detail: { /* event payload ( optional ) */ } })
+@event("interact")
 class ${componentName} extends UI5Element {
+	eventDetails!: {
+		"interact": void,
+	};
+
 	/**
 	 * Defines the value of the component.
 	 *
@@ -51,7 +54,7 @@ class ${componentName} extends UI5Element {
 	 * @public
 	 */
 	@property()
-	value!: string;
+	value?: string;
 
 	/**
 	 * Defines the text of the component.
@@ -68,4 +71,4 @@ export default ${componentName};
 `;
 };
 
-module.exports = tsFileContentTemplate;
+module.exports = Component;

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

@@ -0,0 +1,12 @@
+const ComponentTemplate = (componentName) => {
+	return `import type ${componentName} from "./${componentName}.js";
+
+export default function ${componentName}Template(this: ${componentName}) {
+	return (
+		<div>Hello World!</div>
+	);
+}
+`;
+};
+
+module.exports = ComponentTemplate;

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

@@ -1,18 +1,17 @@
 const fs = require("fs");
-const path = require("path");
 const prompts = require("prompts");
-const jsFileContentTemplate = require("./jsFileContentTemplate.js");
-const tsFileContentTemplate = require("./tsFileContentTemplate.js");
+const Component = require("./Component.js");
+const ComponentTemplate= require("./ComponentTemplate.js");
 
 /**
- * Hyphanates the given PascalCase string, f.e.:
- * Foo -> "my-foo" (adds preffix)
- * FooBar -> "foo-bar"
+ * Hyphanates the given PascalCase string and adds prefix, f.e.:
+ * Foo -> "my-foo"
+ * FooBar -> "my-foo-bar"
  */
 const hyphaneteComponentName = (componentName) => {
 	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
 
-	return result.includes("-") ? result : `my-${result}`;
+	return `my-${result}`;
 };
 
 /**
@@ -58,23 +57,17 @@ const getLibraryName = packageName => {
 	return packageName.substr("webcomponents-".length);
 };
 
-const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
+const generateFiles = (componentName, tagName, library, packageName) => {
 	componentName = capitalizeFirstLetter(componentName);
 	const filePaths = {
-		"main": isTypeScript 
-			? `./src/${componentName}.ts` 
-			: `./src/${componentName}.js`,
+		"main": `./src/${componentName}.ts`,
 		"css": `./src/themes/${componentName}.css`,
-		"template": `./src/${componentName}.hbs`,
+		"template": `./src/${componentName}Template.tsx`,
 	};
 
-	const FileContentTemplate = isTypeScript 
-		? tsFileContentTemplate(componentName, tagName, library, packageName) 
-		: jsFileContentTemplate(componentName, tagName, library, packageName);
-
-	fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
+	fs.writeFileSync(filePaths.main, Component(componentName, tagName, library, packageName), { flag: "wx+" });
 	fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
-	fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
+	fs.writeFileSync(filePaths.template, ComponentTemplate(componentName), { flag: "wx+" });
 
 	console.log(`Successfully generated ${filePaths.main}`);
 	console.log(`Successfully generated ${filePaths.css}`);
@@ -82,8 +75,8 @@ const generateFiles = (componentName, tagName, library, packageName, isTypeScrip
 
 	// 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 "./dist/${componentName}.js";`);
+Now, import the component in src/bundle.esm.ts via: "import ${componentName} from ./${componentName}.js";
+And, add it to your HTML: <${tagName}></${tagName}>.`);
 }
 
 // Main function
@@ -112,10 +105,9 @@ const createWebComponent = async () => {
 		}
 	}
 
-	const isTypeScript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
 	const tagName = hyphaneteComponentName(componentName);
 
-	generateFiles(componentName, tagName, library, packageName, isTypeScript);
+	generateFiles(componentName, tagName, library, packageName);
 };
 
 createWebComponent();

package/lib/css-processors/css-processor-components.mjs

@@ -22,13 +22,14 @@ let customPlugin = {
         build.onEnd(result => {
             result.outputFiles.forEach(async f => {
                 // scoping
-                const newText = scopeVariables(f.text, packageJSON);
+                let newText = scopeVariables(f.text, packageJSON);
+                newText = newText.replaceAll(/\\/g, "\\\\"); // Escape backslashes as they might appear in css rules
                 await mkdir(path.dirname(f.path), {recursive: true});
                 writeFile(f.path, newText);
 
                 // JS/TS
                 const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true);
+                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`", true);
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

package/lib/css-processors/css-processor-themes.mjs

@@ -42,16 +42,11 @@ let scopingPlugin = {
                 // JSON
                 const jsonPath = f.path.replace(/dist[\/\\]css/, "dist/generated/assets").replace(".css", ".css.json");
                 await mkdir(path.dirname(jsonPath), {recursive: true});
-                const data = {
-                    packageName: packageJSON.name,
-                    fileName: jsonPath.substr(jsonPath.lastIndexOf("themes")),
-                    content: newText,
-                };
-                writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
+                writeFileIfChanged(jsonPath, JSON.stringify(newText));
 
                 // JS/TS
                 const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
-                const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
+                const jsContent = getFileContent(packageJSON.name, "\`" + newText + "\`");
                 writeFileIfChanged(jsPath, jsContent);
             });
         })

package/lib/css-processors/scope-variables.mjs

@@ -1,4 +1,7 @@
 import * as path from "path";
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
 
 /**
  * Tries to detect an override for a package

package/lib/css-processors/shared.mjs

@@ -47,30 +47,10 @@ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () =>
 `;
 };
 
-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 getFileContent = (packageName, css, includeDefaultTheme) => {
 	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;
-	`;
+	return `${defaultTheme}export default ${css.trim()}`
 }
 
-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}}`
-}
 
 export { writeFileIfChanged, stripThemingBaseContent, getFileContent}

package/lib/dev-server/{dev-server.js → dev-server.mjs}

@@ -1,7 +1,7 @@
-const fs = require("fs/promises");
-const { createServer } = require('vite');
-const yargs = require('yargs/yargs')
-const { hideBin } = require('yargs/helpers')
+import fs from "fs/promises";
+import { createServer } from 'vite';
+import yargs from 'yargs';
+import { hideBin }  from 'yargs/helpers';
 
 const argv = yargs(hideBin(process.argv))
 	.alias("c", "config")

package/lib/dev-server/virtual-index-html-plugin.js

@@ -1,23 +1,17 @@
-const virtualIndexPlugin = async () => {
-	const path = await import("path");
-	const { globby } = await import("globby");
-	const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
-
-	const pagesPerFolder = {};
-	files.forEach(file => {
-		let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
-		folder.push(path.basename(file));
-	});
+const virtualIndexPlugin = () => {
+	return {
+		name: 'virtual-index-html',
+		async config() {
+			const path = (await import("path")).default;
+			const globby = (await import("globby")).globby;
+			const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
 
-	const rollupInput = {};
+			const rollupInput = {};
 
-	files.forEach(file => {
-		rollupInput[file] = path.resolve(process.cwd(), file);
-	})
+			files.forEach(file => {
+				rollupInput[file] = path.resolve(process.cwd(), file);
+			});
 
-	return {
-		name: 'virtual-index-html',
-		config() {
 			return {
 				build: {
 					rollupOptions: {
@@ -26,7 +20,17 @@ const virtualIndexPlugin = async () => {
 				}
 			}
 		},
-		configureServer(server) {
+		async configureServer(server) {
+			const path = (await import("path")).default;
+			const globby = (await import("globby")).globby;
+			const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
+
+			const pagesPerFolder = {};
+			files.forEach(file => {
+				let folder = pagesPerFolder[path.dirname(file)] = pagesPerFolder[path.dirname(file)] || [];
+				folder.push(path.basename(file));
+			});
+
 			server.middlewares.use((req, res, next) => {
 				if (req.url === "/") {
 					const folders = Object.keys(pagesPerFolder);
@@ -37,8 +41,8 @@ const virtualIndexPlugin = async () => {
 						const pages = pagesPerFolder[folder];
 						return `<h1>${folder}</h1>
 							${pages.map(page => {
-								return `<li><a href='${folder}/${page}'>${page}</a></li>`
-							}).join("")}
+							return `<li><a href='${folder}/${page}'>${page}</a></li>`
+						}).join("")}
 						`
 					}).join("")}`);
 				} else {

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

@@ -4,97 +4,81 @@ const path = require('path');
 const isTypeScript = process.env.UI5_TS;
 const ext = isTypeScript ? 'ts' : 'js';
 
+
+const getContent = function(caseLines, languagesKeysStringArray, packageName) {
+	return `// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+const importMessageBundle = async (localeId) => {
+	switch (localeId) {
+		${caseLines}
+		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. Check the \"Assets\" documentation for more information.\`);
+	}
+	return data;
+}
+
+const localeIds = [${languagesKeysStringArray}];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("${packageName}", localeId, importAndCheck);
+});
+`;
+}
+
 const generate = async () => {
 
 	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.${ext}`);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/i18n-fetch.${ext}`);
+	const outputFileDynamicImportJSONImport = path.normalize(`${process.argv[3]}/i18n-node.${ext}`);
 
-// All languages present in the file system
+	// All languages present in the file system
 	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 contentStatic, contentDynamic;
+	let contentDynamic;
+	let contentFetchMetaResolve;
+	let contentDynamicImportJSONAttr;
 
-// No i18n - just import dependencies, if any
+	// No i18n - just import dependencies, if any
 	if (languages.length === 0) {
-		contentStatic = "";
 		contentDynamic = "";
-// There is i18n - generate the full file
+		contentFetchMetaResolve = "";
+		contentDynamicImportJSONAttr = "";
+	// There is i18n - generate the full file
 	} 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");
-
-		// static imports
-		contentStatic = `// @ts-nocheck
-import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
-
-${assetsImportsString}
-
-const bundleMap = {
-	${languagesKeysString}
-};
-
-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()
-}
-
-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(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
+		const fetchMetaResolveString = languages.map(key => `		case "${key}": return (await fetch(new URL("../assets/i18n/messagebundle_${key}.json", import.meta.url))).json();`).join("\n");
+		const dynamicImportJSONAttrString = languages.map(key => `		case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json", {with: { type: 'json'}})).default;`).join("\n");
 
 		// Resulting file content
-		contentDynamic = `// @ts-nocheck
-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);
-	});
-	`;
-
 
+		contentDynamic = getContent(dynamicImportsString, languagesKeysStringArray, packageName);
+		contentFetchMetaResolve = getContent(fetchMetaResolveString, languagesKeysStringArray, packageName);
+		contentDynamicImportJSONAttr = getContent(dynamicImportJSONAttrString, languagesKeysStringArray, packageName);
 	}
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic),
+		fs.writeFile(outputFileFetchMetaResolve, contentFetchMetaResolve),
+		fs.writeFile(outputFileDynamicImportJSONImport, contentDynamicImportJSONAttr),
 	]);
 }
 

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

@@ -7,8 +7,9 @@ const ext = isTypeScript ? 'ts' : 'js';
 
 const generate = async () => {
 	const inputFolder = path.normalize(process.argv[2]);
-	const outputFile = path.normalize(`${process.argv[3]}/Themes-static.${ext}`);
 	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
+	const outputFileDynamicImportJSONAttr = path.normalize(`${process.argv[3]}/Themes-node.${ext}`);
+	const outputFileFetchMetaResolve = path.normalize(`${process.argv[3]}/Themes-fetch.${ext}`);
 
 // All supported optional themes
 	const allThemes = assets.themes.all;
@@ -22,41 +23,19 @@ const generate = async () => {
 
 	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 themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
 	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");
-
-
-// static imports file content
-	const contentStatic = `// @ts-nocheck
-import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-
-${importLines}
-
-const themeUrlsByName = ${themeUrlsByName};
-const isInlined = obj => typeof (obj) === "object";
-
-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));
-`;
-
+	const dynamicImportJSONAttrLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json", {with: { type: '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 = `// @ts-nocheck
+	const contentDynamic = function (lines) {
+		return `// @ts-nocheck
 import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 const loadThemeProperties = async (themeName) => {
 	switch (themeName) {
-${dynamicImportLines}
+${lines}
 		default: throw "unknown theme"
 	}
 };
@@ -64,7 +43,7 @@ ${dynamicImportLines}
 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.\`);
+		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;
 };
@@ -72,11 +51,13 @@ const loadAndCheck = async (themeName) => {
 ${availableThemesArray}
   .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
+	}
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFile, contentStatic),
-		fs.writeFile(outputFileDynamic, contentDynamic)
+		fs.writeFile(outputFileDynamic, contentDynamic(dynamicImportLines)),
+		fs.writeFile(outputFileDynamicImportJSONAttr, contentDynamic(dynamicImportJSONAttrLines)),
+		fs.writeFile(outputFileFetchMetaResolve, contentDynamic(fetchMetaResolveLines)),
 	]);
 };
 

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -3,11 +3,11 @@ const tsImports = (controlName, hasTypes) => {
 		return "";
 	}
 
-	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+	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";
+${importForControl(controlName, hasTypes)}
+import type { ClassMapValue } from "${importPrefix}types.js";
 	`;
 }
 const importForControl = (controlName, hasTypes) => {
@@ -18,21 +18,26 @@ const importForControl = (controlName, hasTypes) => {
 
 	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";`
 	}
 	return `import type ${controlName} from "../../${controlName}.js";`
 }
 
 const buildRenderer = (controlName, litTemplate, hasTypes) => {
-	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+	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}
-
-export default block0;`;
+${mainTemplateFunction}
+export default template;`;
 };
 
 module.exports = {

package/lib/hbs2ui5/index.js

@@ -24,7 +24,7 @@ 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 hasTypes = (file, componentName) => {
 	const tsFile = path.join(path.dirname(file), componentName + ".ts")
@@ -36,7 +36,7 @@ const processFile = async (file, outputDir) => {
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
 	const componentHasTypes = hasTypes(file, componentName);
-	if (!componentHasTypes) { 
+	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;
@@ -98,7 +98,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
 
 		let existingFileContent = "";
 		try {
-			existingFileContent = await fs.readFile(compiledFilePath);
+			existingFileContent = (await fs.readFile(compiledFilePath)).toString();
 		} catch (e) {}
 
 		if (existingFileContent !== fileContentUnix) {

package/lib/i18n/defaults.js

@@ -31,7 +31,8 @@ const generate = async () => {
 	// (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);  
+		// use messagebundle_en.properties to overwrite all developer properties, only the not translated ones will remain
+		defaultLanguageProperties = Object.assign({}, properties, defaultLanguageProperties);
 	}
 
 	/*
@@ -68,7 +69,7 @@ const generate = async () => {
 		const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
 
 		// tabs are intentionally mixed to have proper identation in the produced file
-		return `${tsMode ? `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
+		return `${tsMode ? `import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
 ${texts}
 export {${textKeys.join()}};`;
 	};