chore: add TS/JS switch

packages/base/package-scripts.js

@@ -40,7 +40,7 @@ const scripts = {
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	generateVersionInfo: `node "${versionScript}"`,
 	generateStyles: `node "${stylesScript}"`,
-	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
+	generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
 	generateAPI: {
 		default: "nps generateAPI.prepare generateAPI.preprocess generateAPI.jsdoc generateAPI.cleanup",
 		prepare: `copy-and-watch "dist/**/*.js" jsdoc-dist/`,

packages/tools/components-package/nps.js

@@ -65,7 +65,7 @@ const getScripts = (options) => {
 		typescript: tsCommand,
 		build: {
 			default: "nps prepare lint build.bundle",
-			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
+			templates: `mkdirp dist/generated/templates && ${tsCrossEnv} node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
 			styles: {
 				default: `nps build.styles.themes build.styles.components ${copySrcGenerated}`,
 				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,

packages/tools/lib/hbs2lit/src/compiler.js

@@ -17,10 +17,12 @@ const hbs2lit = async (file, componentName) => {
 
 	sPreprocessed = removeWhiteSpaces(sPreprocessed);
 
+	const blockSignature = process.env.UI5_TS ? `this: ${componentName}` : ""
+
 	// icons hack
 	if (sPreprocessed.startsWith("<g ") || sPreprocessed.startsWith("<g>")) {
 		return `
-		function block0 (this: ${componentName}) {
+		function block0 (${blockSignature}) {
 			return svg\`${sPreprocessed}\`
 		}`;
 	}

packages/tools/lib/hbs2lit/src/litVisitor2.js

@@ -35,10 +35,12 @@ function HTMLLitVisitor(componentName, debug) {
 	this.result = "";
 	this.mainBlock = "";
 	this.blockLevel = 0;
-	this.blockParametersDefinition = ["context: UI5Element", "tags: string[]", "suffix: string | undefined"];
-	this.blockParametersUsage = ["context", "tags", "suffix"];
-	this.paths = []; //contains all normalized relative paths
 	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) {
 		this.blockByNumber = [];
@@ -54,10 +56,10 @@ HTMLLitVisitor.prototype.Program = function(program) {
 	this.debug && this.blockByNumber.push(key);
 
 	// this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: any, ` + this.blockParametersDefinition.join(", ") + ") { ";
-	this.blocks[this.currentKey()] = "function " + this.currentKey() + ` (this: ${this.componentName}, ` + 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() + ".call(this, " + this.blockParametersUsage.join(", ") + ")";
+		this.blocks[this.prevKey()] += this.currentKey() + ".call(" + this.blockParametersUsage.join(", ") + ")";
 	} else {
 		this.mainBlock = this.currentKey();
 	}
@@ -108,7 +110,11 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
 		if (isNodeValue && !mustache.escaped) {
 			parsedCode = `\${unsafeHTML(${path})}`;
 		} else if (hasCalculatingClasses) {
-			parsedCode = `\${classMap(${path} as ClassMapValue)}`;
+			if (process.env.UI5_TS) {
+				parsedCode = `\${classMap(${path} as ClassMapValue)}`;
+			} else {
+				parsedCode = `\${classMap(${path})}`;
+			}
 		} else if (isStyleAttribute) {
 			parsedCode = `\${styleMap(${path})}`;
 		} else if (skipIfDefined){
@@ -173,23 +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: any, index: number) => item._id || index, (item: any, index: number) => ";
+	const reapeatDirectiveParamsTS = "(item: any, index: number) => item._id || index, (item: any, 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.blockParametersDefinition.indexOf("item: any") === -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.blockParametersDefinition.unshift("index: number");
-		this.blockParametersDefinition.unshift("item: any");
-		this.blockParametersUsage.unshift("index");
-		this.blockParametersUsage.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.blockParametersDefinition.shift("item: any");
-		this.blockParametersDefinition.shift("index: number");
-		this.blockParametersUsage.shift("item");
-		this.blockParametersUsage.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()] += ") }";

packages/tools/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,11 +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}.call(this, context, tags, suffix)}`,
-		definition: `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
-			return svg\`${input}\`;
-		};`,
+		definition: process.env.UI5_TS ? definitionTS : definitionJS,
 	};
 }
 
@@ -67,5 +72,5 @@ function replaceInternalBlocks(template, svgContent) {
 }
 
 module.exports = {
-	process: process
+	process: processSVG,
 };

packages/tools/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -38,7 +38,20 @@ jsControls = ["RatingIndicator",
 	"Wizard",
 ]
 
+const tsImports = (controlName) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
+
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	return `import type UI5Element from "${importPrefix}UI5Element";
+	${importForControl(controlName)}
+	import type { ClassMapValue } from "${importPrefix}types";
+	`;
+}
 const importForControl = (controlName) => {
+
 	if (jsControls.includes(controlName)) {
 		return `type ${controlName} = any;`;
 	}
@@ -52,13 +65,9 @@ const importForControl = (controlName) => {
 
 const buildRenderer = (controlName, litTemplate) => {
 	// typescript cannot process package imports for the same package and the paths are changed to relative for base package templates
-	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
 	return `/* eslint no-unused-vars: 0 */
 import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "${importPrefix}renderer/LitRenderer.js";
-import type UI5Element from "${importPrefix}UI5Element";
-${importForControl(controlName)}
-import type { ClassMapValue } from "${importPrefix}types";
-
+${tsImports(controlName)}
 ${litTemplate}
 
 export default block0;`;

packages/tools/lib/hbs2ui5/index.js

@@ -26,6 +26,7 @@ const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
 const processFile = async (file, outputDir) => {
 	const componentNameMatcher = /(\w+)(\.hbs)/gim;
 	const componentName = componentNameMatcher.exec(file)[1];
+	console.log({componentName})
 	const litCode = await hbs2lit(file, componentName);
 	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
 
@@ -70,7 +71,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
 
 		await fs.mkdir(outputDir, { recursive: true });
 
-		const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.ts`;
+		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");