@ui5/webcomponents-tools 0.0.0-cb061e041 → 0.0.0-cddf8ba1c

package/lib/generate-js-imports/illustrations.js

@@ -1,72 +1,86 @@
 const fs = require("fs").promises;
-const path = require('path');
-
-const generate = async () => {
-	const fioriInputFolder = path.normalize(process.argv[2]);
-	const tntInputFolder = path.normalize(process.argv[3]);
-	const outputFile = path.normalize(`${process.argv[4]}/Illustrations.js`);
-
-	const dir = await fs.readdir(fioriInputFolder);
-	const fioriIllustrationsOnFileSystem = dir.map(illustrationName => {
-		const fioriMatches = illustrationName.match(/.*\.js$/);
-		return fioriMatches ? illustrationName : undefined;
-	}).filter(key => !!key);
-
-	const tntDir = await fs.readdir(tntInputFolder);
-	const tntIllustrationsOnFileSystem = tntDir.map(illustrationName => {
-		const tntMatches = illustrationName.match(/.*\.js$/);
-		return tntMatches ? illustrationName : undefined;
-	}).filter(key => !!key);
-
-	// dynamic imports for Fiori illustrations
-	const fioriAvailableIllustrationsArray = `[${fioriIllustrationsOnFileSystem.filter(
-		// skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
-		line => !line.startsWith("sapIllus-Dialog") && !line.startsWith("sapIllus-Scene") && !line.startsWith("sapIllus-Spot") && !line.startsWith("AllIllustrations")).map(illustrationName => `"${illustrationName.replace('.js', '')}"`).join(", ")}]`;
-
-	const fioriDynamicImportLines = fioriIllustrationsOnFileSystem.map(illustrationName =>
-		`\t\tcase "${illustrationName.replace('.js', '')}": return (await import("../../illustrations/${illustrationName}")).default;`).filter(
-			// skipping the items starting with sapIllus-Dialog, sapIllus-Scene, sapIllus-Spot since they are included in the illustration's js file
-			line => !line.startsWith("\t\tcase \"sapIllus-Dialog") && !line.startsWith("\t\tcase \"sapIllus-Scene") && !line.startsWith("\t\tcase \"sapIllus-Spot") && !line.startsWith("\t\tcase \"AllIllustrations")).join("\n");
-
-	// dynamic imports for Tnt illustrations
-	const tntAvailableIllustrationsArray = `[${tntIllustrationsOnFileSystem.filter(
-		// skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
-		line => !line.startsWith("tnt-Dialog") && !line.startsWith("tnt-Scene") && !line.startsWith("tnt-Spot")).map(illustrationName => `"Tnt${illustrationName.replace('.js', '')}"`).join(", ")}]`;
-
-	const tntDynamicImportLines = tntIllustrationsOnFileSystem.map(illustrationName =>
-		`\t\tcase "Tnt${illustrationName.replace('.js', '')}": return (await import("../../illustrations/tnt/${illustrationName}")).default;`).filter(
-			// skipping the items starting with tnt-Dialog, tnt-Scene, tnt-Spot since they are included in the illustration's js file
-			line => !line.startsWith("\t\tcase \"Tnttnt-Dialog") && !line.startsWith("\t\tcase \"Tnttnt-Scene") && !line.startsWith("\t\tcase \"Tnttnt-Spot")).join("\n");
-
-
-	// dynamic imports file content
-	const contentDynamic = `import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
-
-const loadIllustration = async (illustrationName) => {
-	switch (illustrationName) {
-${fioriDynamicImportLines}
-${tntDynamicImportLines}
-		default: throw new Error("[Illustrations] Illustration not found: " + illustrationName);
-	}
+const path = require("path");
+
+const generateDynamicImportLines = async (fileNames, location, exclusionPatterns = []) => {
+  const packageName = JSON.parse(await fs.readFile("package.json")).name;
+  return fileNames
+    .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
+    .map((fileName) => {
+      const illustrationName = fileName.replace(".js", "");
+      const illustrationPath = `${location}/${illustrationName}`;
+      return `\t\tcase "${fileName.replace('.js', '')}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${illustrationName.toLowerCase()}" */ "${illustrationPath}.js")).default;`;
+    })
+    .join("\n");
+};
+
+const generateAvailableIllustrationsArray = (fileNames, exclusionPatterns = []) => {
+  return JSON.stringify(
+    fileNames
+      .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
+      .map((fileName) => fileName.replace(".js", ""))
+  );
+};
+
+const generateDynamicImportsFileContent = (dynamicImports, availableIllustrations, collection, prefix = "") => {
+  return `// @ts-nocheck
+  import { registerIllustrationLoader } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+
+export const loadIllustration = async (illustrationName) => {
+  const collectionAndPrefix = "${collection}/${prefix}";
+  const cleanIllustrationName = illustrationName.startsWith(collectionAndPrefix) ? illustrationName.replace(collectionAndPrefix, "") : illustrationName;
+  switch (cleanIllustrationName) {
+${dynamicImports}
+    default:
+      throw new Error("[Illustrations] Illustration not found: " + illustrationName);
+  }
+};
+
+const loadAndCheck = async (illustrationName) => {
+  const data = await loadIllustration(illustrationName);
+  return data;
+};
+
+${availableIllustrations}.forEach((illustrationName) =>
+  registerIllustrationLoader(\`${collection}/${prefix}\${illustrationName}\`, loadAndCheck)
+);
+`;
+};
+
+const getMatchingFiles = async (folder, pattern) => {
+  const dir = await fs.readdir(folder);
+  return dir.filter((fileName) => fileName.match(pattern));
 };
-	const loadAndCheck = async (illustrationName) => {
-		const data = await loadIllustration(illustrationName);
-		return data;
-	}
 
+const generateIllustrations = async (config) => {
+  const { inputFolder, outputFile, collection, location, prefix, filterOut } = config;
+
+  const normalizedInputFolder = path.normalize(inputFolder);
+  const normalizedOutputFile = path.normalize(outputFile);
+
+  const illustrations = await getMatchingFiles(normalizedInputFolder, /^.*\.js$/);
 
-	${fioriAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));
-	${tntAvailableIllustrationsArray}.forEach(illustrationName => registerIllustrationLoader(illustrationName, loadAndCheck));`;
-	
+  const dynamicImports = await generateDynamicImportLines(illustrations, location, filterOut);
+  const availableIllustrations = generateAvailableIllustrationsArray(illustrations, filterOut);
+
+  const contentDynamic = generateDynamicImportsFileContent(dynamicImports, availableIllustrations, collection, prefix);
+
+  await fs.mkdir(path.dirname(normalizedOutputFile), { recursive: true });
+  await fs.writeFile(normalizedOutputFile, contentDynamic);
+
+  console.log(`Generated ${normalizedOutputFile}`);
+};
 
-	await fs.mkdir(path.dirname(outputFile), { recursive: true });
-	return Promise.all([fs.writeFile(outputFile, contentDynamic)]);
+// Parse configuration from command-line arguments
+const config = {
+  inputFolder: process.argv[2],
+  outputFile: process.argv[3],
+  collection: process.argv[4],
+  location: process.argv[5],
+  prefix: process.argv[6],
+  filterOut: process.argv.slice(7),
 };
 
-generate().then(() => {
-	console.log("Generated Illustrations.js");
-})
-.catch(err => {
-	console.error(err);
-	process.exit(1);
+// Run the generation process
+generateIllustrations(config).catch((error) => {
+  console.error("Error generating illustrations:", error);
 });

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

@@ -1,13 +1,16 @@
 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 outputFile = path.normalize(`${process.argv[3]}/i18n-static.${ext}`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
 
 // All languages present in the file system
 	const files = await fs.readdir(inputFolder);
@@ -32,7 +35,8 @@ const generate = async () => {
 		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";
+		contentStatic = `// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
 
 ${assetsImportsString}
 
@@ -56,10 +60,11 @@ localeIds.forEach(localeId => {
 `;
 
 		// 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) {

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

@@ -2,10 +2,13 @@ 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 outputFile = path.normalize(`${process.argv[3]}/Themes-static.${ext}`);
+	const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
 
 // All supported optional themes
 	const allThemes = assets.themes.all;
@@ -22,11 +25,12 @@ const generate = async () => {
 	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");
+	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");
 
 
 // static imports file content
-	const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+	const contentStatic = `// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 ${importLines}
 
@@ -47,7 +51,8 @@ ${availableThemesArray}
 
 
 // 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) {

package/lib/jsdoc/preprocess.js

@@ -116,7 +116,7 @@ const processComponentFile = async (fileName) => {
 	const destFileName = fileName.replace(sourceDir, inputDir).replace(/\.ts$/, ".js");
 	let jsFileContent = `${await fs.readFile(destFileName)}`;
 
-	const classDefinitionRegExp = new RegExp(`let.*? = class`, "gm");
+	const classDefinitionRegExp = new RegExp(`(let.*? = class)|(^class.*?)`, "gm");
 	let classDefinitionMatch = jsFileContent.match(classDefinitionRegExp);
 	if (!classDefinitionMatch) {
 		return; // not a file, generated by typescript, nothing to do here

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/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/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-cb061e041",
+  "version": "0.0.0-cddf8ba1c",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,10 +21,9 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "@wdio/cli": "^7.19.7",
-    "@wdio/devtools-service": "^7.19.7",
     "@wdio/dot-reporter": "^7.19.7",
     "@wdio/local-runner": "^7.19.7",
     "@wdio/mocha-framework": "^7.19.7",
@@ -37,7 +36,6 @@
     "command-line-args": "^5.1.1",
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^4.1.11",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
@@ -55,7 +53,6 @@
     "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 +60,8 @@
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "slash": "3.0.0",
-    "vite": "^3.0.4",
-    "wdio-chromedriver-service": "^7.3.2",
-    "zx": "^4.3.0"
+    "vite": "^4.4.9",
+    "wdio-chromedriver-service": "^7.3.2"
   },
   "peerDependencies": {
     "chromedriver": "*",
@@ -77,6 +73,7 @@
     }
   },
   "devDependencies": {
+    "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   }
 }

package/lib/postcss-css-to-json/index.js

@@ -1,47 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const mkdirp = require('mkdirp');
-
-const proccessCSS = css => {
-	css = css.replace(/\.sapThemeMeta[\s\S]*?:root/, ":root");
-	css = css.replace(/\.background-image.*{.*}/, "");
-	css = css.replace(/\.sapContrast[ ]*:root[\s\S]*?}/, "");
-	css = css.replace(/--sapFontUrl.*\);?/, "");
-	return css;
-}
-
-module.exports = function (opts) {
-	opts = opts || {};
-
-	return {
-		postcssPlugin: 'postcss-css-to-json',
-		Once (root) {
-			let css = root.toString();
-			css = proccessCSS(css);
-
-			const targetFile = root.source.input.from.replace(`/${opts.toReplace}/`, "/dist/generated/assets/").replace(`\\${opts.toReplace}\\`, "\\dist\\generated\\assets\\");
-			mkdirp.sync(path.dirname(targetFile));
-
-			const filePath = `${targetFile}.json`;
-			const data = {
-				packageName: opts.packageName,
-				fileName: targetFile.substr(targetFile.lastIndexOf("themes")),
-				content: css
-			};
-			// it seems slower to read the old content, but writing the same content with no real changes
-			// (as in initial build and then watch mode) will cause an unnecessary dev server refresh
-			let oldContent = "";
-			try {
-				oldContent = fs.readFileSync(filePath).toString();
-			} catch (e) {
-				// file not found
-			}
-			const content = JSON.stringify({_: data});
-			if (content !== oldContent) {
-				fs.writeFileSync(filePath, content);
-			}
-		}
-	};
-};
-
-module.exports.postcss = true;

package/lib/postcss-new-files/index.js

@@ -1,36 +0,0 @@
-const chokidar = require("chokidar");
-const commandLineArgs = require("command-line-args");
-const { exec } = require("child_process");
-
-const options = commandLineArgs([
-	{ name: "srcFiles", type: String },
-]);
-
-const runPostcss = path => {
-	let command = `postcss ${path} --config config/postcss.components --base src --dir dist/css/`;
-	console.log(`Executing: ${command}`);
-	exec(command, (err, stdout, stderr) => {
-		if (err) {
-			console.log(`Could not run postcss for ${path}. Error: ${err}`);
-		}
-	});
-
-	command = `${command} -w`;
-	console.log(`Executing: ${command}`);
-	exec(command, (err, stdout, stderr) => {
-		if (err) {
-			console.log(`Could not run postcss in watch mode for ${path}. Error: ${err}`);
-		}
-	});
-};
-
-let ready = false; // Do nothing until the ready event has been fired (we don't want to recompile all files initially)
-const watcher = chokidar.watch(options.srcFiles);
-watcher.on("ready", () => {
-	ready = true; // Initial scan is over -> waiting for new files
-});
-watcher.on("add", path => {
-	if (ready) {
-		runPostcss(path);
-	}
-});

package/lib/postcss-p/postcss-p.mjs

@@ -1,14 +0,0 @@
-import 'zx/globals';
-
-// don't print executed commands and their output
-$.verbose = false;
-
-const inputFiles = await globby("src/**/parameters-bundle.css");
-
-const restArgs = process.argv.slice(2);
-
-// run all postcss processes in parallel as passing the glob directly to postcss makes them processed sequentially.
-// and the amount of imports give a big speed up when run in parallel
-await Promise.all(inputFiles.map(file => {
-  return $`postcss ${file} --config config/postcss.themes --base src --dir dist/css/ ${restArgs}`;
-}));