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

package/lib/generate-json-imports/i18n.js

@@ -1,13 +1,15 @@
 const fs = require("fs").promises;
 const path = require('path');
 
+const isTypeScript = process.env.UI5_TS;
+const ext = isTypeScript ? 'ts' : 'js';
+
 const generate = async () => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
 	const inputFolder = path.normalize(process.argv[2]);
-	const outputFile = path.normalize(`${process.argv[3]}/i18n-static.js`);
-	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.js`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
 
 // All languages present in the file system
 	const files = await fs.readdir(inputFolder);
@@ -16,50 +18,22 @@ const generate = async () => {
 		return matches ? matches[1] : undefined;
 	}).filter(key => !!key);
 
-	let contentStatic, contentDynamic;
+	let contentDynamic;
 
 // No i18n - just import dependencies, if any
 	if (languages.length === 0) {
-		contentStatic = "";
 		contentDynamic = "";
 // There is i18n - generate the full file
 	} else {
 		// Keys for the array
-		const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
 		const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
 
 		// Actual imports for json assets
-		const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
-
-		// static imports
-		contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
-
-${assetsImportsString}
-
-const bundleMap = {
-	${languagesKeysString}
-};
-
-const fetchMessageBundle = async (localeId) => {
-	if (typeof bundleMap[localeId] === "object") {
-		// inlined from build
-		throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
-	}
-	return (await fetch(bundleMap[localeId])).json()
-}
-
-const localeIds = [${languagesKeysStringArray}];
-
-localeIds.forEach(localeId => {
-	registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
-});
-`;
-
-		// Actual imports for json assets
-		const dynamicImportsString = languages.map(key => `		case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
+		const dynamicImportsString = languages.map(key => `		case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
 
 		// Resulting file content
-		contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+		contentDynamic = `// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
 
 	const importMessageBundle = async (localeId) => {
 		switch (localeId) {
@@ -71,7 +45,7 @@ localeIds.forEach(localeId => {
 	const importAndCheck = async (localeId) => {
 		const data = await importMessageBundle(localeId);
 		if (typeof data === "string" && data.endsWith(".json")) {
-			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
 		}
 		return data;
 	}
@@ -86,9 +60,8 @@ localeIds.forEach(localeId => {
 
 	}
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic),
 	]);
 }

package/lib/generate-json-imports/themes.js

@@ -2,10 +2,12 @@ const fs = require("fs").promises;
 const path = require('path');
 const assets = require("../../assets-meta.js");
 
+const isTypeScript = process.env.UI5_TS;
+const ext = isTypeScript ? 'ts' : 'js';
+
 const generate = async () => {
 	const inputFolder = path.normalize(process.argv[2]);
-	const outputFile = path.normalize(`${process.argv[3]}/Themes-static.js`);
-	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.js`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
 
 // All supported optional themes
 	const allThemes = assets.themes.all;
@@ -19,35 +21,12 @@ const generate = async () => {
 
 	const packageName = JSON.parse(await fs.readFile("package.json")).name;
 
-	const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
-	const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
 	const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
-	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import("../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
-
-
-// static imports file content
-	const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-
-${importLines}
-
-const themeUrlsByName = ${themeUrlsByName};
-const isInlined = obj => typeof (obj) === "object";
-
-const loadThemeProperties = async (themeName) => {
-	if (typeof themeUrlsByName[themeName] === "object") {
-		// inlined from build
-		throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
-	}
-	return (await fetch(themeUrlsByName[themeName])).json();
-};
-
-${availableThemesArray}
-  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
-`;
-
+	const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
 
 // dynamic imports file content
-	const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+	const contentDynamic = `// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 const loadThemeProperties = async (themeName) => {
 	switch (themeName) {
@@ -59,7 +38,7 @@ ${dynamicImportLines}
 const loadAndCheck = async (themeName) => {
 	const data = await loadThemeProperties(themeName);
 	if (typeof data === "string" && data.endsWith(".json")) {
-		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
 	}
 	return data;
 };
@@ -68,9 +47,8 @@ ${availableThemesArray}
   .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
+	await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
 	return Promise.all([
-		fs.writeFile(outputFile, contentStatic),
 		fs.writeFile(outputFileDynamic, contentDynamic)
 	]);
 };

package/lib/i18n/defaults.js

@@ -31,7 +31,7 @@ const generate = async () => {
 	// (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") {
-		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);  
+		defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
 	}
 
 	/*

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

@@ -154,22 +154,29 @@ module.exports = (options) => {
 							options.removeDuplicatedProperties ||
 							options.removeDuplicatedValues
 						) {
-							removeDupProperties(
-								destination,
-								options.removeDuplicatedValues,
-							);
+							// removeDupProperties(
+							// 	destination,
+							// 	options.removeDuplicatedValues,
+							// );
 						}
 					} else {
 						if (
 							options.removeDuplicatedProperties ||
 							options.removeDuplicatedValues
 						) {
-							removeDupProperties(rule, 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);
+						}
+					})
+				}
 			};
 		},
 	};

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

@@ -10,7 +10,7 @@ const getTag = file => {
 
 const getPackageTags = (packageDir) => {
 	const srcDir = path.join(packageDir, "src/");
-	return glob.sync(path.join(srcDir, "/**/*.js")).flatMap(file => {
+	return glob.sync(path.join(srcDir, "/**/*.ts")).flatMap(file => {
 		const tag = getTag(file);
 		return [tag];
 	}).filter(item => !!item);

package/lib/scoping/lint-src.js

@@ -7,25 +7,26 @@ 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 = String(fs.readFileSync(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(`Warning! ${tag} found in ${file}`);
+			errors.push(`${tag} found in ${file}`);
 		}
 	});
 });
 
-glob.sync(path.join(process.cwd(), "src/**/*.js")).forEach(file => {
-	let content = String(fs.readFileSync(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(`Warning! querySelector for ${tag} found in ${file}`);
+			errors.push(`querySelector for ${tag} found in ${file}`);
 		}
 	});
 });
 
 if (errors.length) {
-	errors.forEach(error => console.log(error));
-	throw new Error("Errors found.");
+	throw new Error(`Scoping-related errors found (f.e. used ui5-input instead of [ui5-input]): \n ${errors.join("\n")}`);
 }

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

@@ -18,6 +18,7 @@ const replaceTagsHTML = 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`);
 	});
@@ -27,7 +28,7 @@ const replaceTagsAny = 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(/bundle\.(.*?)\.js/g, `../bundle.scoped.$1.js`);
+	content = content.replace("%VITE_BUNDLE_PATH%", "%VITE_BUNDLE_PATH_SCOPED%");
 	content = replaceTagsHTML(content);
 	fs.writeFileSync(file, content);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "0.0.0-d1315d658",
+  "version": "0.0.0-d473b9686",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,22 +21,26 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@wdio/cli": "^7.19.7",
     "@wdio/dot-reporter": "^7.19.7",
     "@wdio/local-runner": "^7.19.7",
     "@wdio/mocha-framework": "^7.19.7",
     "@wdio/spec-reporter": "^7.19.7",
     "@wdio/static-server-service": "^7.19.5",
+    "ajv": "^8.12.0",
+    "cem-plugin-vs-code-custom-data-generator": "^1.4.2",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^3.0.0",
     "command-line-args": "^5.1.1",
+    "comment-parser": "^1.4.0",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.0.1",
+    "custom-element-jet-brains-integration": "^1.4.4",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -48,14 +52,11 @@
     "globby": "^13.1.1",
     "handlebars": "^4.7.7",
     "is-port-reachable": "^3.1.0",
-    "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
-    "modify-selectors": "^2.0.0",
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-import": "^14.0.2",
     "postcss-selector-parser": "^6.0.10",
     "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
@@ -63,9 +64,8 @@
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
-    "vite": "^3.0.4",
-    "wdio-chromedriver-service": "^7.3.2",
-    "zx": "^7.2.3"
+    "vite": "^4.4.9",
+    "wdio-chromedriver-service": "^7.3.2"
   },
   "peerDependencies": {
     "chromedriver": "*",
@@ -77,6 +77,7 @@
     }
   },
   "devDependencies": {
+    "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   }
 }