feat(tools): Templates can be imported from node_modules/ (#1860)

Author: vladitasev

packages/fiori/.npmignore

@@ -3,7 +3,6 @@ dist/resources
 dist/test-resources
 lib/
 node_modules/
-src/
 test/
 bundle.*.js
 .eslintrc.js

packages/main/.npmignore

@@ -3,7 +3,6 @@ dist/resources
 dist/test-resources
 lib/
 node_modules/
-src/
 test/
 bundle.*.js
 .eslintrc.js

packages/tools/lib/hbs2lit/index.js

@@ -1,5 +1,3 @@
-const compiler = require("./src/compiler");
+const hbs2lit = require("./src/compiler");
 
-module.exports = {
-	compileString: compiler.compileString
-};
+module.exports = hbs2lit;

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

@@ -12,10 +12,9 @@ const removeWhiteSpaces = (source) => {
 		.replace(/}}\s+{{/g, "}}{{"); // Remove whitespace between }} and {{
 };
 
-const compileString = async (sInput, config) => {
-	let sPreprocessed = sInput;
+const hbs2lit = (file) => {
+	let sPreprocessed = includesReplacer.replace(file);
 
-	sPreprocessed = includesReplacer.replace(sPreprocessed, config);
 	sPreprocessed = removeWhiteSpaces(sPreprocessed);
 
 	const ast = Handlebars.parse(sPreprocessed);
@@ -38,6 +37,4 @@ const compileString = async (sInput, config) => {
 	return result;
 };
 
-module.exports = {
-	compileString
-};
+module.exports = hbs2lit;

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

@@ -1,20 +1,31 @@
 const path = require("path");
-const nativeFs = require("fs");
+const fs = require("fs");
 
-function replaceIncludes(hbs, config) {
-	const fs = config.fs || nativeFs;
-	const inclRegex = /{{>\s*include\s*["']([a-zA-Z.\/]+)["']}}/g;
+function replaceIncludes(file) {
+	const filePath = path.dirname(file);
+	let fileContent = fs.readFileSync(file, "utf-8");
+
+	const inclRegex = /{{>\s*include\s*["'](.+?)["']}}/g;
 	let match;
 
-	while((match = inclRegex.exec(hbs)) !== null) {
+	while((match = inclRegex.exec(fileContent)) !== null) {
 		inclRegex.lastIndex = 0;
-		const includeContent = fs.readFileSync(path.join(config.templatesPath, match[1]), "utf-8");
-		hbs = hbs.replace(match[0], includeContent);
+
+		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], replaceIncludes(targetFile));
 	}
 
-	return hbs;
+	return fileContent;
 }
 
 module.exports = {
 	replace: replaceIncludes
-};
+};

packages/tools/lib/hbs2ui5/index.js

@@ -18,26 +18,18 @@ const args = getopts(process.argv.slice(2), {
 
 const onError = (place) => {
 	console.log(`A problem occoured when reading ${place}. Please recheck passed parameters.`);
-}
+};
+
 const isHandlebars = (fileName) => fileName.indexOf('.hbs') !== -1;
-const parseFile = (filePath, inputDir, outputDir) => {
-	fs.readFile(filePath, 'utf-8', (err, content) => {
 
-		if (err) {
-			onError('file');
-		}
+const processFile = (file, outputDir) => {
 
-		hbs2lit.compileString(content, {
-			templatesPath: inputDir,
-			compiledTemplatesPath: outputDir
-		}).then((litCode) => {
-			const componentNameMatcher = /(\w+)(\.hbs)/gim;
-			const componentName = componentNameMatcher.exec(filePath)[1];
+	const litCode = hbs2lit(file);
 
-			writeRenderers(outputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
-		});
-	});
-}
+	const componentNameMatcher = /(\w+)(\.hbs)/gim;
+	const componentName = componentNameMatcher.exec(file)[1];
+	writeRenderers(outputDir, componentName, litRenderer.generateTemplate(componentName, litCode));
+};
 
 const wrapDirectory = (directory, outputDir) => {
 	directory = path.normalize(directory);
@@ -51,9 +43,7 @@ const wrapDirectory = (directory, outputDir) => {
 
 		files.forEach(fileName => {
 			if (isHandlebars(fileName)) {
-
-				// could be refactored a bit
-				parseFile(directory + fileName, directory, outputDir);
+				processFile(path.join(directory, fileName), outputDir);
 			}
 		});
 	})