@ui5/webcomponents-tools 0.0.0-974b11d82 → 0.0.0-97db186fd

package/components-package/wdio.sync.js

@@ -56,7 +56,15 @@ exports.config = {
 		'goog:chromeOptions': {
 			// to run chrome headless the following flags are required
 			// (see https://developers.google.com/web/updates/2017/04/headless-chrome)
-			args: ['--headless', '--disable-gpu'],
+			args: [
+				'--headless',
+				'--start-maximized',
+				'--no-sandbox',
+				'--disable-gpu',
+				'--disable-infobars',
+				'--disable-extensions',
+				'--disable-dev-shm-usage',
+			],
 			// args: ['--disable-gpu'],
 		}
 	}],

package/icons-collection/nps.js

@@ -21,7 +21,7 @@ const copyIconAssetsCommand = (options) => {
 		return 	{
 			default: "nps copy.json-imports copy.icon-collection",
 			"json-imports": `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
-			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" dist/generated/assets/`,
+			"icon-collection": `node "${LIB}/copy-and-watch/index.js" --silent "src/*.json" src/generated/assets/`,
 		}
 	}
 
@@ -32,7 +32,7 @@ const copyIconAssetsCommand = (options) => {
 
 	options.versions.forEach((v) => {
 		command.default += ` copy.icon-collection${v}`;
-		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" dist/generated/assets/${v}/`;
+		command[`icon-collection${v}`] = `node "${LIB}/copy-and-watch/index.js" --silent "src/${v}/*.json" src/generated/assets/${v}/`;
 	});
 
 	return command;

package/lib/create-icons/index.js

@@ -38,11 +38,11 @@ export { pathData, ltr, accData };`;
 
 
 
-const collectionTemplate = (name, versions, fullName) => `import { isThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+const collectionTemplate = (name, versions, fullName) => `import { isLegacyThemeFamily } 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") ? pathData${versions[1]} : pathData${versions[0]};
+const pathData = isLegacyThemeFamily() ? pathData${versions[0]} : pathData${versions[1]};
 
 export default "${fullName}";
 export { pathData, ltr, accData };`;

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

@@ -1,80 +1,30 @@
 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";
+const path = require("path");
+const prompts = require("prompts");
+const jsFileContentTemplate = require("./jsFileContentTemplate.js");
+const tsFileContentTemplate = require("./tsFileContentTemplate.js");
 
 /**
- * @public
+ * Hyphanates the given PascalCase string, f.e.:
+ * Foo -> "my-foo" (adds preffix)
+ * FooBar -> "foo-bar"
  */
-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 */ {
-		//
-	},
+const hyphaneteComponentName = (componentName) => {
+	const result = componentName.replace(/([a-z])([A-Z])/g, '$1-$2' ).toLowerCase();
+
+	return result.includes("-") ? result : `my-${result}`;
 };
 
 /**
- * @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
+ * Capitalizes first letter of string.
  */
-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();
+const capitalizeFirstLetter = string => string.charAt(0).toUpperCase() + string.slice(1);
 
-export default ${componentName};
-`;
-};
+/**
+ * Validates component name, enforcing PascalCase pattern - Button, MyButton.
+ */
+const PascalCasePattern = /^[A-Z][A-Za-z0-9]+$/;
+const isNameValid = name => typeof name === "string" && PascalCasePattern.test(name);
 
 const getPackageName = () => {
 	if (!fs.existsSync("./package.json")) {
@@ -108,47 +58,64 @@ const getLibraryName = packageName => {
 	return packageName.substr("webcomponents-".length);
 };
 
-const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-
-const packageName = getPackageName();
-const library = getLibraryName(packageName);
-
-const consoleArguments = process.argv.slice(2);
-const componentName = consoleArguments[0];
-
-if (!componentName){
-	console.error("Please enter component name.");
-	return;
+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 FileContentTemplate = isTypeScript 
+		? tsFileContentTemplate(componentName, tagName, library, packageName) 
+		: jsFileContentTemplate(componentName, tagName, library, packageName);
+
+	fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
+	fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
+	fs.writeFileSync(filePaths.template, "<div>Hello World</div>", { flag: "wx+" });
+
+	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)}`;
-
-const filePaths = {
-	"js": `./src/${componentName}.js`,
-	"css": `./src/themes/${componentName}.css`,
-	"hbs": `./src/${componentName}.hbs`,
-};
-const sJsFileContentTemplate = jsFileContentTemplate(componentName);
+// Main function
+const createWebComponent = async () => {
+	const packageName = getPackageName();
+	const library = getLibraryName(packageName);
 
-fs.writeFileSync(filePaths.js, sJsFileContentTemplate, { flag: "wx+" });
-fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
-fs.writeFileSync(filePaths.hbs, "<div>Hello World</div>", { flag: "wx+" });
+	const consoleArguments = process.argv.slice(2);
+	let componentName = consoleArguments[0];
 
+	if (componentName && !isNameValid(componentName)) {
+		throw new Error(`${componentName} is invalid component name. Use only letters (at least two) and start with capital one:  Button, MyButton, etc.`);
+	}
 
-console.log(`Successfully generated ${componentName}.js`);
-console.log(`Successfully generated ${componentName}.css`);
-console.log(`Successfully generated ${componentName}.hbs`);
+	if (!componentName) {
+		const response = await prompts({
+			type: "text",
+			name: "componentName",
+			message: "Please enter a component name:",
+			validate: (value) => isNameValid(value) ? true : "Component name should follow PascalCase naming convention (f.e. Button, MyButton, etc.).",
+		});
+		componentName = response.componentName;
+
+		if (!componentName) {
+			process.exit();
+		}
+	}
 
-const bundleLogger = fs.createWriteStream("./bundle.common.js", {
-	flags: "a" // appending
-});
+	const isTypeScript = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
+	const tagName = hyphaneteComponentName(componentName);
 
-bundleLogger.write(`
-// TODO: Move this line in order to keep the file sorted alphabetically
-import ${componentName} from "./dist/${componentName}.js";`);
+	generateFiles(componentName, tagName, library, packageName, isTypeScript);
+};
 
-// 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.
-`);
+createWebComponent();

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

@@ -0,0 +1,73 @@
+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 [];
+	}
+}
+
+${componentName}.define();
+
+export default ${componentName};
+`;
+};
+
+module.exports = jsFileContentTemplate;

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

@@ -0,0 +1,80 @@
+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>;
+}
+
+${componentName}.define();
+
+export default ${componentName};
+`;
+};
+
+module.exports = tsFileContentTemplate;

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

@@ -1,6 +1,5 @@
-let path = require("path");
-
 const virtualIndexPlugin = async () => {
+	const path = await import("path");
 	const { globby } = await import("globby");
 	const files = await globby(["test/pages/**/*.html", "packages/*/test/pages/**/*.html"]);
 

package/lib/esm-abs-to-rel/index.js

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

package/lib/hbs2lit/src/compiler.js

@@ -12,15 +12,17 @@ const removeWhiteSpaces = (source) => {
 		.replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
 };
 
-const hbs2lit = async (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 `
-		let block0 = () => {
+		function block0 (${blockSignature}) {
 			return svg\`${sPreprocessed}\`
 		}`;
 	}
@@ -28,7 +30,7 @@ const hbs2lit = async (file) => {
 	const ast = Handlebars.parse(sPreprocessed);
 
 	const pv = new PartialsVisitor();
-	const lv = new HTMLLitVisitor();
+	const lv = new HTMLLitVisitor(componentName);
 
 	let result = "";
 
@@ -41,10 +43,11 @@ const hbs2lit = async (file) => {
 		let block = lv.blocks[key];
 
 		if (block.match(/scopeTag/)) {
-			const matches = block.match(/^(.*?)( => )(.*?);$/);
-			const scopedCode = matches[3];
+			// 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]}${matches[2]}suffix ? ${scopedCode} : ${normalCode};`;
+			block = `${matches[1]}suffix ? ${scopedCode} : ${normalCode};}`;
 		}
 
 		result += block + "\n";

package/lib/hbs2lit/src/litVisitor2.js

@@ -28,14 +28,18 @@ if (!String.prototype.replaceAll) {
 	};
 }
 
-function HTMLLitVisitor(debug) {
+function HTMLLitVisitor(componentName, debug) {
 	this.blockCounter = 0;
 	this.keys = [];
 	this.blocks = {};
 	this.result = "";
 	this.mainBlock = "";
 	this.blockLevel = 0;
-	this.blockParameters = ["context", "tags", "suffix"];
+	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) {
@@ -51,17 +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(", ") + ") => ";
+	// 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.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);
 };
@@ -98,14 +103,18 @@ 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 hasCalculatingClasses = path.includes("this.classes");
 
 		let parsedCode = "";
 
 		if (isNodeValue && !mustache.escaped) {
 			parsedCode = `\${unsafeHTML(${path})}`;
 		} else if (hasCalculatingClasses) {
-			parsedCode = `\${classMap(${path})}`;
+			if (process.env.UI5_TS) {
+				parsedCode = `\${classMap(${path} as ClassMapValue)}`;
+			} else {
+				parsedCode = `\${classMap(${path})}`;
+			}
 		} else if (isStyleAttribute) {
 			parsedCode = `\${styleMap(${path})}`;
 		} else if (skipIfDefined){
@@ -170,19 +179,35 @@ 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.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.blockLevel--;
 	this.blocks[this.currentKey()] += ") }";
@@ -197,7 +222,7 @@ function normalizePath(sPath) {
 	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", "context");
+		result = result.replace("@root", "this");
 
 	} else if (result.indexOf("../") === 0) {
 		let absolutePath;
@@ -207,7 +232,7 @@ function normalizePath(sPath) {
 			// 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 = `context.${replaceAll(result,"../", "")}`;
+			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.
@@ -235,7 +260,7 @@ function normalizePath(sPath) {
 		// {{/each}}
 		// {{text}} -> compiles to "context.text"
 
-		const blockPath = this.blockLevel > 0 ? "item" : "context";
+		const blockPath = this.blockLevel > 0 ? "item" : "this";
 		result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
 	}
 

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, tags, suffix)}`,
-		definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => 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,
 };