@ui5/webcomponents-tools 0.0.0-d0bcf47c7 → 0.0.0-d4d43327a

package/lib/hbs2lit/src/litVisitor2.js

@@ -0,0 +1,253 @@
+const Handlebars = require("handlebars/dist/handlebars.min.js");
+const path = require("path");
+const Visitor = Handlebars.Visitor;
+
+// skip ifDefined for event handlers and boolean attrs
+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*$/;
+
+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(debug) {
+	this.blockCounter = 0;
+	this.keys = [];
+	this.blocks = {};
+	this.result = "";
+	this.mainBlock = "";
+	this.blockLevel = 0;
+	this.blockParameters = ["context", "tags", "suffix"];
+	this.paths = []; //contains all normalized relative paths
+	this.debug = debug;
+	if (this.debug) {
+		this.blockByNumber = [];
+	}
+}
+
+HTMLLitVisitor.prototype = new Visitor();
+
+HTMLLitVisitor.prototype.Program = function(program) {
+	let key = `block${this.blockCounter++}`;
+
+	this.keys.push(key);
+	this.debug && this.blockByNumber.push(key);
+
+	this.blocks[this.currentKey()] = "const " + this.currentKey() + " = (" + this.blockParameters.join(", ") + ") => ";
+
+	if (this.keys.length > 1) { //it's a nested block
+		this.blocks[this.prevKey()] += this.currentKey() + "(" + this.blockParameters.join(", ") + ")";
+	} else {
+		this.mainBlock = this.currentKey();
+	}
+
+	this.blocks[this.currentKey()] += "html`";
+	Visitor.prototype.Program.call(this, program);
+	this.blocks[this.currentKey()] += "`;";
+
+	this.keys.pop(key);
+};
+
+HTMLLitVisitor.prototype.ContentStatement = function(content) {
+	Visitor.prototype.ContentStatement.call(this, content);
+	// let content = content.orgiinal; // attribute="__ attribute = "__  attribute ="__
+
+	let contentStatement = content.original;
+	skipIfDefined = !!dynamicAttributeRgx.exec(contentStatement);
+
+	const closingIndex = contentStatement.lastIndexOf(">");
+	const openingIndex = contentStatement.lastIndexOf("<");
+	if (closingIndex !== -1 || openingIndex !== -1) { // Only change isNodeValue whenever < or > is found in the content statement
+		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;
+};
+
+HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
+	Visitor.prototype.MustacheStatement.call(this, mustache);
+
+	if (mustache.path.original === "@index") {
+		this.blocks[this.currentKey()] += "${index}";
+	} else {
+		const path = normalizePath.call(this, mustache.path.original);
+		const hasCalculatingClasses = path.includes("context.classes");
+
+		let parsedCode = "";
+
+		if (isNodeValue && !mustache.escaped) {
+			parsedCode = `\${unsafeHTML(${path})}`;
+		} else if (hasCalculatingClasses) {
+			parsedCode = `\${classMap(${path})}`;
+		} else if (isStyleAttribute) {
+			parsedCode = `\${styleMap(${path})}`;
+		} else if (skipIfDefined){
+			parsedCode = `\${${path}}`;
+		} else {
+			parsedCode = `\${ifDefined(${path})}`;
+		}
+
+		this.blocks[this.currentKey()] += parsedCode;
+	}
+};
+
+HTMLLitVisitor.prototype.BlockStatement = function(block) {
+	if (block.path.original === "if") {
+		visitIfBlock.call(this, block);
+	} else if (block.path.original === "unless") {
+		visitUnlessBlock.call(this, block);
+	} else if (block.path.original === "each") {
+		visitEachBlock.call(this, block);
+	}
+};
+
+HTMLLitVisitor.prototype.currentKey = function() {
+	return this.keys[this.keys.length - 1];
+};
+
+HTMLLitVisitor.prototype.prevKey = function() {
+	return this.keys[this.keys.length - 2];
+};
+
+function visitSubExpression(mustache) {
+	this.acceptRequired(mustache, "path");
+	this.acceptArray(mustache.params);
+	this.acceptKey(mustache, "hash");
+}
+
+function visitIfBlock(block) {
+	visitSubExpression.call(this, block);
+
+	let params = normalizePath.call(this, block.params[0].original);
+	this.blocks[this.currentKey()] += "${ " + params + " ? ";
+	this.acceptKey(block, "program");
+	this.blocks[this.currentKey()] += " : ";
+	if (block.inverse) {
+		this.acceptKey(block, "inverse");
+	} else {
+		this.blocks[this.currentKey()] += "undefined";
+	}
+	this.blocks[this.currentKey()] += " }";
+}
+
+function visitUnlessBlock(block) {
+	visitSubExpression.call(this, block);
+
+	let params = normalizePath.call(this, block.params[0].original);
+	this.blocks[this.currentKey()] += "${ !" + params + " ? ";
+	this.acceptKey(block, "program");
+	this.blocks[this.currentKey()] += " : undefined }";
+}
+
+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) => ";
+	this.paths.push(normalizePath.call(this, block.params[0].original));
+	this.blockLevel++;
+
+	if (this.blockParameters.indexOf("item") === -1) {
+		bParamAdded = true;
+		this.blockParameters.unshift("index");
+		this.blockParameters.unshift("item");
+	}
+	this.acceptKey(block, "program");
+	if (bParamAdded) {
+		this.blockParameters.shift("item");
+		this.blockParameters.shift("index");
+	}
+	this.blockLevel--;
+	this.blocks[this.currentKey()] += ") }";
+}
+
+function normalizePath(sPath) {
+	let result = replaceAll(replaceAll(replaceAll(sPath, ".this", ""), "this.", ""), "this", "");
+
+	//read carefully - https://github.com/wycats/handlebars.js/issues/1028
+	//kpdecker commented on May 20, 2015
+
+	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");
+
+	} 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 = `context.${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 {
+		// 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" : "context";
+		result = result ? replaceAll(blockPath + "/" + result, "/", ".") : blockPath;
+	}
+
+	return result;
+}
+
+function replaceAll(str, find, repl) {
+	let sResult = str;
+	while (sResult.indexOf(find) !== -1) {
+		sResult = sResult.replace(find, repl);
+	}
+	return sResult;
+}
+
+module.exports = HTMLLitVisitor;

package/lib/hbs2lit/src/partials2.js

@@ -0,0 +1,51 @@
+//collects the partials defined with the inline mustache syntax
+//also cleans the handlebars template from the partials definitions
+function collectPartials(hbs) {
+	let oResult = {};
+
+	const re = RegExp("{{#\\*inline\\s* \"(\\w+)\"\\s*}}((.|\\s)*?){{\\/inline}}");
+	const regexGroups = {partialKey: 1, partialDefinition: 2};
+
+	let m;
+
+	do {
+		m = re.exec(hbs);
+		if (m) {
+			// This is necessary to avoid infinite loops with zero-width matches
+			if (m.index === re.lastIndex) {
+				re.lastIndex++;
+			}
+
+			// The result can be accessed through the `m`-variable.
+			oResult[m[regexGroups.partialKey]] = m[regexGroups.partialDefinition];
+
+			//remove the partial from the hbs
+			hbs = hbs.replace(m[0], "");
+		}
+	} while (m);
+
+	return {partials: oResult, hbs: hbs};
+}
+
+//replaces the partials usages with their actual definitions
+function replacePartials(hbs, mPartials) {
+	let sResultHbs = hbs;
+	for (let key in mPartials) {
+		if (mPartials.hasOwnProperty(key)) {
+			let val = mPartials[key];
+			let re = new RegExp("{{\\s*>\\s*" + key + "\\s*}}", "g"); //ex match: {{   >   controlData  }}
+			sResultHbs = sResultHbs.replace(re, val);
+		}
+	}
+
+	return sResultHbs;
+}
+
+module.exports = {
+	resolve: function(hbs) {
+		let oResult = collectPartials(hbs);
+		let sResultHbs = replacePartials(oResult.hbs, oResult.partials);
+
+		return sResultHbs;
+	}
+};

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,69 @@
+
+const svgrx = new RegExp(/<svg[\s\S]*?>([\s\S]*?)<\/svg>/, 'g');
+const blockrx = /block[0-9]+/g;
+
+function process(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) {
+	return {
+		usage: `\${blockSVG${blockCounter}(context, tags, suffix)}`,
+		definition: `\nconst blockSVG${blockCounter} = (context, tags, suffix) => svg\`${input}\`;`,
+	};
+}
+
+function replaceInternalBlocks(template, svgContent) {
+	const internalBlocks = svgContent.match(blockrx) || [];
+
+	internalBlocks.forEach(blockName => {
+		const rx = new RegExp(`const ${blockName}.*(html\`).*;`);
+		template = template.replace(rx, (match, p1) => {
+			return match.replace(p1, "svg\`");
+		});
+	});
+
+	return template;
+}
+
+module.exports = {
+	process: process
+};

package/lib/hbs2ui5/RenderTemplates/LitRenderer.js

@@ -0,0 +1,12 @@
+const buildRenderer = (controlName, litTemplate) => {
+	return `/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+${litTemplate}
+
+export default block0;`;
+};
+
+module.exports = {
+	generateTemplate: buildRenderer
+};

package/lib/hbs2ui5/index.js

@@ -0,0 +1,102 @@
+const fs = require('fs').promises;
+const getopts = require('getopts');
+const hbs2lit = require('../hbs2lit');
+const path = require('path');
+const litRenderer = require('./RenderTemplates/LitRenderer');
+const recursiveReadDir = require("recursive-readdir");
+
+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.indexOf('.hbs') !== -1;
+
+const processFile = async (file, outputDir) => {
+	const litCode = await hbs2lit(file);
+	const absoluteOutputDir = composeAbsoluteOutputDir(file, outputDir);
+	const componentNameMatcher = /(\w+)(\.hbs)/gim;
+	const componentName = componentNameMatcher.exec(file)[1];
+
+	return writeRenderers(absoluteOutputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+};
+
+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.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);
+		} 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");
+	});
+}