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

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,83 @@
+const fs = require('fs').promises;
+const path = require('path');
+const PropertiesReader = require('properties-reader');
+const assets = require('../../assets-meta.js');
+
+const generate = async () => {
+	const defaultLanguage = assets.languages.default;
+
+	const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
+	const messageBundleDefaultLanguage = path.normalize(`${process.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(`${process.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));
+};
+
+generate().then(() => {
+	console.log("i18n default file generated.");
+});

package/lib/i18n/toJSON.js

@@ -0,0 +1,43 @@
+/*
+ * 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;
+
+const messagesBundles = path.normalize(`${process.argv[2]}/messagebundle_*.properties`);
+const messagesJSONDist = path.normalize(`${process.argv[3]}`);
+
+const convertToJSON = async (file) => {
+	const properties = PropertiesReader(file)._properties;
+	const filename = path.basename(file, path.extname(file));
+	const language = filename.match(/^messagebundle_(.*?)$/)[1];
+	if (!allLanguages.includes(language)) {
+		console.log("Not supported language: ", language);
+		return;
+	}
+	const outputFile = path.normalize(`${messagesJSONDist}/${filename}.json`);
+
+	return fs.writeFile(outputFile, JSON.stringify(properties));
+	// console.log(`[i18n]: "${filename}.json" has been generated!`);
+};
+
+const generate = async () => {
+	const { globby } = await import("globby");
+	await fs.mkdir(messagesJSONDist, { recursive: true });
+	const files = await globby(messagesBundles.replace(/\\/g, "/"));
+	return Promise.all(files.map(convertToJSON));
+};
+
+generate().then(() => {
+	console.log("Message bundle JSON files generated.");
+});

package/lib/postcss-combine-duplicated-selectors/index.js

@@ -0,0 +1,185 @@
+/*
+ The MIT License (MIT)
+
+Copyright (c) 2016 Christian Murphy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+ */
+
+const parser = require('postcss-selector-parser');
+const name = "postcss-combine-duplicated-selectors";
+
+/**
+ * Ensure that attributes with different quotes match.
+ * @param {Object} selector - postcss selector node
+ */
+function normalizeAttributes(selector) {
+	selector.walkAttributes((node) => {
+		if (node.value) {
+			// remove quotes
+			node.value = node.value.replace(/'|\\'|"|\\"/g, '');
+		}
+	});
+}
+
+/**
+ * Sort class and id groups alphabetically
+ * @param {Object} selector - postcss selector node
+ */
+function sortGroups(selector) {
+	selector.each((subSelector) => {
+		subSelector.nodes.sort((a, b) => {
+			// different types cannot be sorted
+			if (a.type !== b.type) {
+				return 0;
+			}
+
+			// sort alphabetically
+			return a.value < b.value ? -1 : 1;
+		});
+	});
+
+	selector.sort((a, b) => (a.nodes.join('') < b.nodes.join('') ? -1 : 1));
+}
+
+/**
+ * Remove duplicated properties
+ * @param {Object} selector - postcss selector node
+ * @param {Boolean} exact
+ */
+function removeDupProperties(selector, exact) {
+	if (!exact) { // Remove duplicated properties, regardless of value
+		const retainedProps = new Set();
+
+		for (let actIndex = selector.nodes.length - 1; actIndex >= 1; actIndex--) {
+			const prop = selector.nodes[actIndex].prop;
+			if (prop !== undefined) {
+				if (!retainedProps.has(prop)) {
+					retainedProps.add(prop); // Mark the prop as retained, all other occurrences must be removed
+				} else {
+					selector.nodes[actIndex].remove(); // This occurrence of the prop must be removed
+				}
+			}
+		}
+	} else {
+		// Remove duplicated properties from bottom to top ()
+		for (let actIndex = selector.nodes.length - 1; actIndex >= 1; actIndex--) {
+			for (let befIndex = actIndex - 1; befIndex >= 0; befIndex--) {
+				if (
+					selector.nodes[actIndex].prop === selector.nodes[befIndex].prop &&
+					selector.nodes[actIndex].value === selector.nodes[befIndex].value
+				) {
+					selector.nodes[befIndex].remove();
+					actIndex--;
+				}
+			}
+		}
+	}
+}
+
+const uniformStyle = parser((selector) => {
+	normalizeAttributes(selector);
+	sortGroups(selector);
+});
+
+const defaultOptions = {
+	removeDuplicatedProperties: false,
+};
+
+module.exports = (options) => {
+	options = Object.assign({}, defaultOptions, options);
+	return {
+		postcssPlugin: name,
+		prepare() {
+			// Create a map to store maps
+			const mapTable = new Map();
+			// root map to store root selectors
+			mapTable.set('root', new Map());
+
+			return {
+				Rule: (rule) => {
+					let map;
+					// Check selector parent for any at rule
+					if (rule.parent.type === 'atrule') {
+						// Use name and query params as the key
+						const query =
+							rule.parent.name.toLowerCase() +
+							rule.parent.params.replace(/\s+/g, '');
+
+						// See if this query key is already in the map table
+						map = mapTable.has(query) ? // If it is use it
+							mapTable.get(query) : // if not set it and get it
+							mapTable.set(query, new Map()).get(query);
+					} else {
+						// Otherwise we are dealing with a selector in the root
+						map = mapTable.get('root');
+					}
+
+					// create a uniform selector
+					const selector = uniformStyle.processSync(rule.selector, {
+						lossless: false,
+					});
+
+					if (map.has(selector)) {
+						// store original rule as destination
+						const destination = map.get(selector);
+
+						// check if node has already been processed
+						if (destination === rule) return;
+
+						// move declarations to original rule
+						while (rule.nodes.length > 0) {
+							destination.append(rule.nodes[0]);
+						}
+						// remove duplicated rule
+						rule.remove();
+
+						if (
+							options.removeDuplicatedProperties ||
+							options.removeDuplicatedValues
+						) {
+							// removeDupProperties(
+							// 	destination,
+							// 	options.removeDuplicatedValues,
+							// );
+						}
+					} else {
+						if (
+							options.removeDuplicatedProperties ||
+							options.removeDuplicatedValues
+						) {
+							// removeDupProperties(rule, options.removeDuplicatedValues);
+						}
+						// add new selector to symbol table
+						map.set(selector, rule);
+					}
+				},
+				OnceExit(root) {
+					root.nodes.forEach(node => {
+						if (node.type === "rule") {
+							removeDupProperties(node, options.removeDuplicatedValues);
+						}
+					})
+				}
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

package/lib/remove-dev-mode/remove-dev-mode.mjs

@@ -0,0 +1,37 @@
+import { globby } from "globby";
+import * as esbuild from 'esbuild'
+import * as fs from "fs";
+
+let customPlugin = {
+    name: 'ui5-tools',
+    setup(build) {
+        build.onLoad({ filter: /UI5Element.ts$/ }, async (args) => {
+          let text = await fs.promises.readFile(args.path, 'utf8');
+          text = text.replaceAll(/const DEV_MODE = true/g, "");
+          text = text.replaceAll(/if \(DEV_MODE\)/g, "if (false)");
+          return {
+            contents: text,
+            loader: 'ts',
+          }
+        })
+      },
+}
+
+const getConfig = async () => {
+    const config = {
+        entryPoints: await globby("src/**/*.ts"),
+        bundle: false,
+        minify: true,
+        sourcemap: true,
+        outdir: 'dist/prod',
+        outbase: 'src',
+        plugins: [
+            customPlugin,
+        ]
+    };
+    return config;
+}
+
+
+const config = await getConfig();
+const result = await esbuild.build(config);

package/lib/scoping/get-all-tags.js

@@ -0,0 +1,44 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+
+const getTag = file => {
+	const fileContent = String(fs.readFileSync(file)).replace(/\n/g, "");
+	let matches = fileContent.match(/\btag\b:\s*\"(.*?)\"/);
+	if (matches) {
+		return matches[1];
+	}
+	matches = fileContent.match(/@customElement\("(.*?)"\)/);
+	if (matches) {
+		return matches[1];
+	}
+	return undefined;
+};
+
+const getPackageTags = (packageDir) => {
+	const srcDir = path.join(packageDir, "src/");
+	return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
+		const tag = getTag(file);
+		return [tag];
+	}).filter(item => !!item);
+};
+
+const isComponentsPackage = (packageFileContent) => {
+	return packageFileContent.ui5 && packageFileContent.ui5.webComponentsPackage;
+};
+
+const getDepComponentPackages = packageDir => {
+	const packageFile = path.join(packageDir, "package.json");
+	const packageFileContent = JSON.parse(fs.readFileSync(packageFile));
+	if (!isComponentsPackage(packageFileContent)) {
+		return [];
+	}
+
+	return Object.keys(packageFileContent.dependencies || {}).map(dep => path.dirname(require.resolve(path.join(dep, "package.json"))));
+};
+
+const getAllTags = (packageDir) => {
+	return getPackageTags(packageDir).concat(getDepComponentPackages(packageDir).flatMap(getPackageTags));
+};
+
+module.exports = getAllTags;

package/lib/scoping/lint-src.js

@@ -0,0 +1,32 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const getAllTags = require("./get-all-tags.js");
+
+const tags = getAllTags(process.cwd());
+
+const errors = [];
+
+const removeComments = str => str.replaceAll(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, "");
+
+glob.sync(path.join(process.cwd(), "src/**/*.css")).forEach(file => {
+	let content = removeComments(String(fs.readFileSync(file)));
+	tags.forEach(tag => {
+		if (content.match(new RegExp(`(^|[^\.\-_A-Za-z0-9"\[])(${tag})([^\-_A-Za-z0-9]|$)`, "g"))) {
+			errors.push(`${tag} found in ${file}`);
+		}
+	});
+});
+
+glob.sync(path.join(process.cwd(), "src/**/*.ts")).forEach(file => {
+	let content = removeComments(String(fs.readFileSync(file)));
+	tags.forEach(tag => {
+		if (content.match(new RegExp(`querySelector[A-Za-z]*..${tag}`, "g"))) {
+			errors.push(`querySelector for ${tag} found in ${file}`);
+		}
+	});
+});
+
+if (errors.length) {
+	throw new Error(`Scoping-related errors found (f.e. used ui5-input instead of [ui5-input]): \n ${errors.join("\n")}`);
+}

package/lib/scoping/missing-dependencies.js

@@ -0,0 +1,65 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+const projectPath = process.argv[2];
+
+// gather all tags from all files
+const tagsToFiles = new Map();
+const filesToTags = new Map();
+
+let files = [
+	...glob.sync(path.join("packages/main/src/**/*.js")),
+	...glob.sync(path.join("packages/fiori/src/**/*.js")),
+];
+files.forEach(file => {
+	let matches = file.match(/([a-zA-Z0-9_]+)\.js$/);
+	const name = matches[1];
+
+	const content = `${fs.readFileSync(file)}`;
+	matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		const tag = matches[1];
+		tagsToFiles.set(tag, name);
+		filesToTags.set(name, tag);
+	}
+});
+
+// Process the package
+files = glob.sync(path.join(projectPath, "src/**/*.js"));
+tagsToFiles.forEach((file, tag) => {
+	const sourcePath = path.join(projectPath, "src/", `${file}.js`);
+	if (!fs.existsSync(sourcePath)) {
+		return;
+	}
+	const sourceContent = `${fs.readFileSync(sourcePath)}`.split("\n").join(" ");
+
+	const hbsPath = path.join(projectPath, "src/", `${file}.hbs`);
+	const hbsContent = fs.existsSync(hbsPath) ? `${fs.readFileSync(hbsPath)}` : "";
+
+	const hbsPopoverPath = path.join(projectPath, "src/", `${file}Popover.hbs`);
+	const hbsPopoverContent = fs.existsSync(hbsPopoverPath) ? `${fs.readFileSync(hbsPopoverPath)}` : "";
+
+	// deps
+	let deps = [];
+	let matches = sourceContent.match(/static get dependencies\(\) \{\s+return \[(.*?)\]/);
+	if (matches) {
+		deps = matches[1].split(",").map(x => x.trim()).filter(x => !!x);
+	}
+
+	// tags
+	matches = [
+		...hbsContent.matchAll(/<ui5-[a-z0-9-]+/g),
+		...hbsPopoverContent.matchAll(/<ui5-[a-z0-9-]+/g),
+	];
+	if (matches) {
+		matches.forEach(match => {
+			const tagUsed = match[0].substr(1);
+			const dep = tagsToFiles.get(tagUsed);
+			if (!deps.includes(dep)) {
+				console.log(`${file} used ${tagUsed}`);
+			}
+		});
+	}
+});

package/lib/scoping/report-tags-usage.js

@@ -0,0 +1,28 @@
+const fs = require("fs");
+const glob = require("glob");
+const path = require("path");
+const process = require("process");
+
+// gather all tags from all files
+const tags = new Set();
+const files = glob.sync(path.join(process.argv[2], "src/**/*.js"));
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const matches = content.match(/tag: "(.*?)",/);
+	if (matches) {
+		tags.add(matches[1]);
+	}
+});
+
+// report all usages of any tag within any file, which is not the tag definition and is not hasAttribute
+files.forEach(file => {
+	const content = `${fs.readFileSync(file)}`;
+	const lines = content.split("\n");
+	lines.forEach(line => {
+		tags.forEach(tag => {
+			if (line.includes(`"${tag}"`) && !line.includes(`tag: "${tag}",`) && !line.includes(`hasAttribute("${tag}")`)) {
+				console.log(`${file}: ${line.trim()}`);
+			}
+		});
+	});
+});

package/lib/scoping/scope-test-pages.js

@@ -0,0 +1,41 @@
+const fs = require("fs");
+const path = require("path");
+const glob = require("glob");
+const getAllTags = require("./get-all-tags.js");
+
+const root = process.argv[2];
+const suffix = process.argv[3];
+
+const tags = getAllTags(process.cwd());
+
+// Replaces tags in HTML content, f.e. <ui5-button> with <ui5-button-ver> or </ui5-button> with </ui5-button-ver>
+const replaceTagsHTML = content => {
+	tags.forEach(tag => {
+		content = content.replace(new RegExp(`(<\/?)(${tag})(\/?[> \t\n])`, "g"), `$1$2-${suffix}$3`);
+	});
+	return content;
+};
+
+// Replace tags in any content
+const replaceTagsAny = content => {
+	console.log(tags.length);
+	tags.forEach(tag => {
+		content = content.replace(new RegExp(`(^|[^\-_A-Za-z0-9])(${tag})([^\-_A-Za-z0-9]|$)`, "g"), `$1$2-${suffix}$3`);
+	});
+	return content;
+};
+
+// Replace bundle names and HTML tag names in test pages
+glob.sync(path.join(root, "/**/*.html")).forEach(file => {
+	let content = String(fs.readFileSync(file));
+	content = content.replace("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
+	content = replaceTagsHTML(content);
+	fs.writeFileSync(file, content);
+});
+
+// Replace tag names everywhere
+glob.sync(path.join(root, "/**/*.{html,css,js}")).forEach(file => {
+	let content = String(fs.readFileSync(file));
+	content = replaceTagsAny(content);
+	fs.writeFileSync(file, content);
+});