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

package/lib/hbs2lit/src/extendedAttributeMapping.js

@@ -0,0 +1,12 @@
+function replaceEqualities(hbs) {
+	// converts the boolean attributes to lit like boolean attributes
+	return hbs.replace(/(\s+)(disabled|hidden|checked|readonly)\s*=\s*/g, " ?$2 = ")
+	// maps all the propertis to attributes
+		.replace(/([a-zA-Z][\w\-]*?)\s*=\s*"{{/g, "$1 = \"{{")
+		// maps the value attribute to property
+		.replace(/(value\s*=)/g, ".value =");
+}
+
+module.exports = {
+	map: replaceEqualities
+};

package/lib/hbs2lit/src/includesReplacer.js

@@ -0,0 +1,31 @@
+const path = require("path");
+const fs = require("fs").promises;
+
+const replaceIncludes = async (file) => {
+	const filePath = path.dirname(file);
+	let fileContent = await fs.readFile(file, "utf-8");
+
+	const inclRegex = /{{>\s*include\s*["'](.+?)["']}}/g;
+	let match;
+
+	while((match = inclRegex.exec(fileContent)) !== null) {
+		inclRegex.lastIndex = 0;
+
+		let targetFile = match[1];
+		if (targetFile.startsWith(".")) {
+			// Relative path, f.e. {{>include "./Popup.hbs"}} or {{>include "../partials/Header.hbs"}}
+			targetFile = path.join(filePath, targetFile);
+		} else {
+			// Node module path, f.e. {{>include "@ui5/webcomponents/src/Popup.hbs"}}
+			targetFile = require.resolve(targetFile);
+		}
+
+		fileContent = fileContent.replace(match[0], await replaceIncludes(targetFile));
+	}
+
+	return fileContent;
+};
+
+module.exports = {
+	replace: replaceIncludes
+};

package/lib/hbs2lit/src/litVisitor2.js

@@ -0,0 +1,278 @@
+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(componentName, debug) {
+	this.blockCounter = 0;
+	this.keys = [];
+	this.blocks = {};
+	this.result = "";
+	this.mainBlock = "";
+	this.blockLevel = 0;
+	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 = [];
+	}
+}
+
+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()] = "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() + ".call(" + this.blockParametersUsage.join(", ") + ")";
+	} else {
+		this.mainBlock = this.currentKey();
+	}
+
+	this.blocks[this.currentKey()] += "return 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("this.classes");
+
+		let parsedCode = "";
+
+		if (isNodeValue && !mustache.escaped) {
+			parsedCode = `\${unsafeHTML(${path})}`;
+		} else if (hasCalculatingClasses) {
+			if (process.env.UI5_TS) {
+				parsedCode = `\${classMap(${path} as ClassMapValue)}`;
+			} else {
+				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);
+
+	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++;
+
+	// 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;
+		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) {
+		// 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()] += ") }";
+}
+
+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", "this");
+
+	} 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 = `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.
+			// 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" : "this";
+		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,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,40 @@
+const tsImports = (controlName, hasTypes) => {
+	if (!process.env.UI5_TS) {
+		return "";
+	}
+
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@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 "../../../../test/elements/${controlName}.js";`
+	}
+	return `import type ${controlName} from "../../${controlName}.js";`
+}
+
+const buildRenderer = (controlName, litTemplate, hasTypes) => {
+	const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
+
+	// 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";
+${tsImports(controlName, hasTypes)}
+${litTemplate}
+
+export default block0;`;
+};
+
+module.exports = {
+	generateTemplate: buildRenderer
+};