@ui5/webcomponents-tools 0.0.0-037d08c67

package/lib/hbs2lit/src/partialsVisitor.js

@@ -0,0 +1,187 @@
+function Visitor() {
+	this.parents = [];
+	this.paths = [];
+}
+
+Visitor.prototype = {
+	constructor: Visitor,
+	mutating: true,
+
+	// Visits a given value. If mutating, will replace the value if necessary.
+	acceptKey: function(node, name) {
+		this.paths.push(name);
+		let value = this.accept(node[name]);
+		if (this.mutating) {
+			// Hacky sanity check: This may have a few false positives for type for the helper
+			// methods but will generally do the right thing without a lot of overhead.
+			if (value && !Visitor.prototype[value.type]) {
+				throw new Error("Unexpected node type \"" + value.type + "\" found when accepting " + name + " on " + node.type);
+			}
+			node[name] = value;
+		}
+		this.paths.pop();
+	},
+
+	// Performs an accept operation with added sanity check to ensure
+	// required keys are not removed.
+	acceptRequired: function(node, name) {
+		this.acceptKey(node, name);
+
+		if (!node[name]) {
+			throw new Error(node.type + " requires " + name);
+		}
+	},
+
+	// Traverses a given array. If mutating, empty respnses will be removed
+	// for child elements.
+	acceptArray: function(array) {
+		for (let i = 0, l = array.length; i < l; i++) {
+			this.acceptKey(array, i);
+
+			if (!array[i]) {
+				array.splice(i, 1);
+				i--;
+				l--;
+			}
+		}
+	},
+
+	accept: function(object) {
+		if (!object) {
+			return;
+		}
+
+		/* istanbul ignore next: Sanity code */
+		if (!this[object.type]) {
+			throw new Error("Unknown type: " + object.type, object);
+		}
+
+		if (this.current) {
+			this.parents.unshift(this.current);
+		}
+		this.current = object;
+
+		let ret = this[object.type](object);
+
+		this.current = this.parents.shift();
+
+		if (!this.mutating || ret) {
+			return ret;
+		} else if (ret !== false) {
+			return object;
+		}
+	},
+
+	Program: function(program) {
+		this.paths.push("body");
+		this.acceptArray(program.body);
+		this.paths.pop();
+	},
+
+	MustacheStatement: visitSubExpression,
+	Decorator: visitSubExpression,
+
+	BlockStatement: visitBlock,
+	DecoratorBlock: visitBlock,
+
+	PartialStatement: visitPartial,
+	PartialBlockStatement: function(partial) {
+		visitPartial.call(this, partial);
+
+		this.acceptKey(partial, "program");
+	},
+
+	ContentStatement: function(/* content */) {},
+	CommentStatement: function(/* comment */) {},
+
+	SubExpression: visitSubExpression,
+
+	PathExpression: function(/* path */) {},
+
+	StringLiteral: function(/* string */) {},
+	NumberLiteral: function(/* number */) {},
+	BooleanLiteral: function(/* bool */) {},
+	UndefinedLiteral: function(/* literal */) {},
+	NullLiteral: function(/* literal */) {},
+
+	Hash: function(hash) {
+		this.paths.push("pairs");
+		this.acceptArray(hash.pairs);
+		this.paths.pop();
+	},
+	HashPair: function(pair) {
+		this.acceptRequired(pair, "value");
+	}
+};
+
+function visitSubExpression(mustache) {
+	this.acceptRequired(mustache, "path");
+	this.paths.push("params");
+	this.acceptArray(mustache.params);
+	this.paths.pop();
+	this.acceptKey(mustache, "hash");
+}
+function visitBlock(block) {
+	visitSubExpression.call(this, block);
+
+	this.acceptKey(block, "program");
+	this.acceptKey(block, "inverse");
+}
+function visitPartial(partial) {
+	this.acceptRequired(partial, "name");
+	this.paths.push("params");
+	this.acceptArray(partial.params);
+	this.paths.pop();
+	this.acceptKey(partial, "hash");
+}
+
+////////////
+
+function PartialsVisitor() {
+	this.partialDefinitions = {};
+	this.partials = [];
+}
+
+PartialsVisitor.prototype = new Visitor();
+
+PartialsVisitor.prototype.PartialStatement = function(node) {
+	this.partials.push({
+		nodes: this.paths.slice(0),
+		name: node.name.original
+	});
+	Visitor.prototype.PartialStatement.call(this, node);
+};
+
+PartialsVisitor.prototype.DecoratorBlock = function(node) {
+	if (node.path.original === "ui5.inline" || node.path.original === "inline") {
+		let name = node.params[0].original;
+		this.partialDefinitions[name] = Object.assign({}, node);
+	}
+
+	Visitor.prototype.DecoratorBlock.call(this, node);
+
+	return false;
+};
+
+PartialsVisitor.prototype.collect = function(node) {
+	return Visitor.prototype.accept(node);
+};
+
+PartialsVisitor.prototype.modify = function(node) {
+	for (let i = this.partials.length - 1; i >= 0; i--) {
+		let partial = this.partials[i];
+		let parentNode = node;
+
+		//find the parent node - it's always inside the body of some Program node
+		while (partial.nodes.length > 1) {
+			parentNode = parentNode[partial.nodes.shift()];
+		}
+
+		let nodeName = partial.nodes.shift();
+		if (Array.isArray(parentNode) && typeof (nodeName) === "number") {
+			parentNode.splice(nodeName, 1, ...this.partialDefinitions[partial.name].program.body);
+		}
+	}
+};
+
+module.exports = PartialsVisitor;

package/lib/hbs2lit/src/svgProcessor.js

@@ -0,0 +1,76 @@
+
+const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
+const blockrx = /block[0-9]+/g;
+
+function processSVG(input) {
+	let matches;
+	let template = input;
+	let blockCounter = 0;
+
+	matches = getSVGMatches(template);
+
+	if (!matches.length) {
+		return template;
+	}
+
+	matches.forEach(match => {
+		//(1) extract the SVG content as a separate block
+		const svgContentGroup = match[1];
+		const block = getSVGBlock(svgContentGroup, ++blockCounter);
+
+		// (2) replace the SVG content with its block called, e.g ${blockSVG(context)}
+		template = template.replace(svgContentGroup, block.usage);
+
+		// (3) look for internal blocks in the SVG content and replace their `html with `svg
+		template = replaceInternalBlocks(template, svgContentGroup);
+
+		// (4) append the SVG block definiton (built in step 1), e.g const blockSVG = (context) => {return svg`.*`}
+		template += block.definition;
+	});
+
+	return template;
+}
+
+function getSVGMatches(template) {
+	let matches = [];
+
+	while (svgMatch = svgrx.exec(template)) {
+		matches.push(svgMatch);
+		if (svgrx.lastIndex === svgMatch.index) {
+			svgrx.lastIndex++;
+		}
+	}
+
+	return matches;
+}
+
+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: process.env.UI5_TS ? definitionTS : definitionJS,
+	};
+}
+
+function replaceInternalBlocks(template, svgContent) {
+	const internalBlocks = svgContent.match(blockrx) || [];
+
+	internalBlocks.forEach(blockName => {
+		const rx = new RegExp(`function ${blockName}.*(html\`).*;`);
+		template = template.replace(rx, (match, p1) => {
+			return match.replace(p1, "svg\`");
+		});
+	});
+
+	return template;
+}
+
+module.exports = {
+	process: processSVG,
+};

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -0,0 +1,45 @@
+const tsImports = (controlName, hasTypes) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
+
+	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

@@ -0,0 +1,119 @@
+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");
+
+let missingTypesReported = false;
+
+const args = getopts(process.argv.slice(2), {
+	alias: {
+		o: 'output',
+		d: 'directory',
+		f: 'file',
+		t: 'type'
+	},
+	default: {
+		t: 'lit-html'
+	}
+});
+
+const onError = (place) => {
+	console.log(`A problem occoured when reading ${place}. Please recheck passed parameters.`);
+};
+
+const isHandlebars = (fileName) => fileName.endsWith('.hbs');
+
+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);
+
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode, componentHasTypes));
+};
+
+const composeAbsoluteOutputDir = (file, outputDir) => {
+	// (1) Extract the dir structure from the source file path - "src/lvl1/lvl2/MyCompBadge.hbs"
+	// - remove the filename - "src/lvl1/lvl2"
+	// - remove the leading dir - "lvl1/lvl2"
+	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}`;
+};
+
+const wrapDirectory = (directory, outputDir) => {
+	directory = path.normalize(directory);
+	outputDir = path.normalize(outputDir);
+
+	return new Promise((resolve, reject) => {
+		recursiveReadDir(directory, (err, files) => {
+
+			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 = async (outputDir, controlName, fileContent) => {
+	try {
+
+		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");
+
+		// 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);
+	}
+};
+
+if (!args['d'] || !args['o']) {
+	console.log('Please provide an input and output directory (-d and -o)');
+} else {
+	wrapDirectory(args['d'], args['o']).then(() => {
+		console.log("Templates generated");
+	});
+}

package/lib/i18n/defaults.js

@@ -0,0 +1,90 @@
+const fs = require('fs').promises;
+const path = require('path');
+const PropertiesReader = require('properties-reader');
+const assets = require('../../assets-meta.js');
+
+const generate = async (argv) => {
+	const defaultLanguage = assets.languages.default;
+
+	const messageBundle = path.normalize(`${argv[2]}/messagebundle.properties`);
+	const messageBundleDefaultLanguage = path.normalize(`${argv[2]}/messagebundle_${defaultLanguage}.properties`);
+	const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
+
+	const outputFile = path.normalize(`${argv[3]}/i18n-defaults.${tsMode ? "ts" : "js"}`);
+
+	if (!messageBundle || !outputFile) {
+		return;
+	}
+
+	const properties = PropertiesReader(messageBundle)._properties;
+
+	let defaultLanguageProperties;
+	try {
+		defaultLanguageProperties = PropertiesReader(messageBundleDefaultLanguage)._properties;
+	} catch (e) {
+	}
+
+	// Merge messagebundle.properties and messagebundle_en.properties files to generate the default texts.
+	// Note:
+	// (1) at DEV time, it's intuituve to work with the source bundle file - the messagebundle.properties,
+	// and see the changes there take effect.
+	// (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") {
+		// use messagebundle_en.properties to overwrite all developer properties, only the not translated ones will remain
+		defaultLanguageProperties = Object.assign({}, properties, defaultLanguageProperties);
+	}
+
+	/*
+	 * Returns the single text object to enable single export.
+	 *
+	 * Example:
+	 * const ARIA_LABEL_CARD_CONTENT = {
+	 *	key: "ARIA_LABEL_CARD_CONTENT",
+	 *	defaultText: "Card Content",
+	 * };
+	 */
+	const getTextInfo = (key, value, defaultLanguageValue) => {
+		let effectiveValue = defaultLanguageValue || value;
+		effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
+
+		if (tsMode) {
+			return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
+		}
+		return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
+	};
+
+	/*
+	 * Returns the complete content of i18n-defaults.js file:
+	 * (1) the single text objects
+	 * (2) the export statement at the end of the file
+	 *
+	 * Example:
+	 * export {
+	 *	ARIA_LABEL_CARD_CONTENT,
+	 * }
+	 */
+	const getOutputFileContent = (properties, defaultLanguageProperties) => {
+		const textKeys = Object.keys(properties);
+		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 type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
+${texts}
+export {${textKeys.join()}};`;
+	};
+
+	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.writeFile(outputFile, getOutputFileContent(properties, defaultLanguageProperties));
+
+
+	if (process.env.UI5_VERBOSE === "true") {
+		console.log("i18n default file generated.");
+	}
+};
+
+if (require.main === module) {
+	generate(process.argv)
+}
+
+exports._ui5mainFn = generate;

package/lib/i18n/toJSON.js

@@ -0,0 +1,71 @@
+/*
+ * The script converts all messebindle_*.properties files to messagebundle_*.json files.
+ *
+ * Execution (note: the paths depends on the the execution context)
+ * node toJSON.js ../../src/assets/i18n ../../dist/generated/assets/i18n
+ *
+ * The 1st param '../../src/assets/i18n' is the location of messagebundle_*.properties files
+ * The 2nd param './../dist/generated/assets/i18n' is where the JSON files would be written to.
+ */
+const path = require("path");
+const PropertiesReader = require('properties-reader');
+const fs = require('fs').promises;
+const assets = require('../../assets-meta.js');
+
+const allLanguages = assets.languages.all;
+
+/**
+ * The translation system has a configuration whether to return UTF-8 sequences
+ * or the actual characters. This function inlines UTF-8 sequences to actual characters.
+ * 
+ * For example, it converts "Keine Produkte erf\u00FCgbar" to "Keine Produkte verfügbar"
+ * This makes the JSON files more readable and smaller.
+ */
+function inlineUTF(properties) {
+	for (const key in properties) {
+		if (Object.prototype.hasOwnProperty.call(properties, key)) {
+			try {
+				// escape double quotes to avoid JSON parse error
+				const escaped = properties[key].replaceAll("\"", "\\\"");
+				properties[key] = JSON.parse(`"${escaped}"`); // utilize JSON parser to decode UTF-8 sequences
+			} catch (e) {
+				// in case of error, just keep the original string
+				console.log(`Warning: failed to inline UTF-8 for key "${key}" with value "${properties[key]}"`);
+			}
+		}
+	}
+	return properties;
+}
+
+const convertToJSON = async (file, distPath) => {
+	const properties = inlineUTF(PropertiesReader(file)._properties);
+	const filename = path.basename(file, path.extname(file));
+	const language = filename.match(/^messagebundle_(.*?)$/)[1];
+	if (!allLanguages.includes(language)) {
+		console.warn("Not supported language or script: ", language);
+	}
+	const outputFile = path.normalize(`${distPath}/${filename}.json`);
+
+	return fs.writeFile(outputFile, JSON.stringify(properties));
+	// console.log(`[i18n]: "${filename}.json" has been generated!`);
+};
+
+const generate = async (agrv) => {
+	const { globby } = await import("globby");
+	const messagesBundles = path.normalize(`${agrv[2]}/messagebundle_*.properties`);
+	const messagesJSONDist = path.normalize(`${agrv[3]}`);
+	await fs.mkdir(messagesJSONDist, { recursive: true });
+	const files = await globby(messagesBundles.replace(/\\/g, "/"));
+	return Promise.all(files.map(file => convertToJSON(file, messagesJSONDist)))
+		.then(() => {
+			if (process.env.UI5_VERBOSE === "true") {
+				console.log("Message bundle JSON files generated.");
+			}
+		});
+};
+
+if (require.main === module) {
+	generate(process.argv)
+}
+
+exports._ui5mainFn = generate;