@ui5/webcomponents-tools 1.16.0 → 1.17.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0-rc.0...v1.17.0-rc.1) (2023-08-17)
+
+
+### Features
+
+* **framework:** scope css variables per runtime and version ([#7449](https://github.com/SAP/ui5-webcomponents/issues/7449)) ([d3f6c2e](https://github.com/SAP/ui5-webcomponents/commit/d3f6c2efba9cfda389ea4d700a375f75b3e2996b))
+
+
+
+
+
+# [1.17.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0...v1.17.0-rc.0) (2023-08-10)
+
+
+### Bug Fixes
+
+* **ui5-illustrated-message:** support collection based illustration loading ([#7318](https://github.com/SAP/ui5-webcomponents/issues/7318)) ([6b52dbd](https://github.com/SAP/ui5-webcomponents/commit/6b52dbd157a3c8198e41c84157e3d9ae89e3386e))
+
+
+
+
+
 # [1.16.0](https://github.com/SAP/ui5-webcomponents/compare/v1.16.0-rc.4...v1.16.0) (2023-08-03)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/assets-meta.js

@@ -9,12 +9,15 @@ const assetsMeta = {
       "sap_belize_hcw",
       "sap_fiori_3_hcb",
       "sap_fiori_3_hcw",
-	  "sap_horizon",
-	  "sap_horizon_dark",
-	  "sap_horizon_hcb",
-	  "sap_horizon_hcw",
-	  "sap_horizon_exp"
-    ]
+	    "sap_horizon",
+	    "sap_horizon_dark",
+	    "sap_horizon_hcb",
+	    "sap_horizon_hcw",
+      "sap_horizon_exp",
+	    "sap_horizon_dark_exp",
+	    "sap_horizon_hcb_exp",
+	    "sap_horizon_hcw_exp",
+    ],
   },
   "languages": {
     "default": "en",

package/components-package/nps.js

@@ -8,12 +8,12 @@ const getScripts = (options) => {
 
 	// The script creates all JS modules (dist/illustrations/{illustrationName}.js) out of the existing SVGs
 	const illustrationsData = options.illustrationsData || [];
-	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+	const illustrations = illustrationsData.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath} ${illustration.collection}`);
 	const createIllustrationsJSImportsScript = illustrations.join(" && ");
 
 	// The script creates the "dist/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
-	const illustrationDestinationPaths = illustrationsData.map(illustrations => illustrations.destinationPath);
-	const createIllustrationsLoadersScript = options.fioriPackage ? `node ${LIB}/generate-js-imports/illustrations.js ${illustrationDestinationPaths[0]} ${illustrationDestinationPaths[1]} dist/generated/js-imports` : "";
+    const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.prefix || '\"\"'} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
+
 	const tsOption = options.typescript;
 	const tsCommand = tsOption ? "tsc" : "";
 	const tsWatchCommand = tsOption ? "tsc --watch" : "";

package/components-package/postcss.components.js

@@ -1,9 +1,11 @@
 const postcssImport = require('postcss-import');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const fs = require("fs");
+const fs = require("fs")
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
 
 module.exports = {
 		plugins: [
@@ -16,6 +18,7 @@ module.exports = {
 					},
 				]
 			}),
-			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName }),
+			postcssScopeVars({version: packageJSON.version}),
+			postcssCSStoESM({ toReplace: 'src', includeDefaultTheme: true, packageName: packageJSON.name }),
 		]
 }

package/components-package/postcss.themes.js

@@ -2,15 +2,17 @@ const postcssImport = require('postcss-import');
 const combineSelectors = require('../lib/postcss-combine-duplicated-selectors/index.js');
 const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
+const postcssScopeVars = require('../lib/postcss-scope-vars/index.js');
 const cssnano = require('cssnano');
-const modifySelectors = require("modify-selectors");
 const fs = require("fs");
 
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
-const selectors = [".sapUiSizeCompact", ".ui5-content-density-compact", "[data-ui5-compact-size]", "[dir=\"rtl\"]", "[dir=\"ltr\"]"];
+
+const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
+const packageName = packageJSON.name;
 
 module.exports = {
 		plugins: [
+			postcssScopeVars({version: packageJSON.version}),
 			postcssImport(),
 			combineSelectors({
 				removeDuplicatedProperties: true
@@ -22,28 +24,6 @@ module.exports = {
 					},
 				]
 			},),
-			modifySelectors({
-				enable: true,
-				suffix: [
-					{
-						match: '*',
-						with: '[_ui5host]', // Add suffix to each selector in the file (:root => :root [_ui5host])
-					},
-				],
-			}),
-			modifySelectors({
-				enable: true,
-				modify: [
-					{
-						match: (selector) => {
-							return selectors.some($ => selector.startsWith($));
-						},
-						with: (selector) => {
-							return `${selector.replace(" ", "")}, ${selector}`;
-						},
-					},
-				]
-			}),
 			postcssCSStoJSON({ toReplace: 'src', packageName }),
 			postcssCSStoESM({ toReplace: 'src', packageName }),
 		]

package/lib/create-illustrations/index.js

@@ -57,10 +57,20 @@ const generate = async () => {
 	const illustrationsPrefix = process.argv[4];
 	const illustrationSet = process.argv[5];
 	const destPath = process.argv[6];
+	const collection = process.argv[7];
 	const fileNamePattern = new RegExp(`${illustrationsPrefix}-.+-(.+).svg`);
 // collect each illustration name because each one should have Sample.js file
 	const fileNames = new Set();
 
+	try {
+		await fs.access(srcPath);
+	} catch (error) {
+		console.log(`The path ${srcPath} does not exist.`);
+		return Promise.resolve(null);
+	}
+
+	console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
+
 	const svgImportTemplate = svgContent => {
 		return `export default \`${svgContent}\`;`
 	};
@@ -95,6 +105,7 @@ import {
 
 const name = "${illustrationName}";
 const set = "${illustrationSet}";
+const collection = "${collection}";
 const title = IM_TITLE_${illustrationNameUpperCase};
 const subtitle = IM_SUBTITLE_${illustrationNameUpperCase};
 
@@ -105,6 +116,7 @@ registerIllustration(name, {
 	title,
 	subtitle,
 	set,
+	collection,
 });
 
 export {
@@ -119,12 +131,14 @@ import spotSvg from "./${illustrationsPrefix}-Spot-${illustrationName}.js";
 
 const name = "${illustrationName}";
 const set = "${illustrationSet}";
+const collection = "${collection}";
 
 registerIllustration(name, {
 	dialogSvg,
 	sceneSvg,
 	spotSvg,
 	set,
+	collection,
 });
 
 export {

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

@@ -1,72 +1,83 @@
 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 = (fileNames, location, exclusionPatterns = []) => {
+  return fileNames
+    .filter((fileName) => !exclusionPatterns.some((pattern) => fileName.startsWith(pattern)))
+    .map((fileName) => {
+      const illustrationPath = `${location}/${fileName.replace(".js", "")}`;
+      return `\t\tcase "${fileName.replace('.js', '')}": return (await import("${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 `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 = 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/postcss-css-to-esm/index.js

@@ -60,7 +60,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-esm',
-		Once (root) {
+		OnceExit(root) {
 			const tsMode = process.env.UI5_TS === "true";
 
 			let css = root.toString();

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

@@ -15,7 +15,7 @@ module.exports = function (opts) {
 
 	return {
 		postcssPlugin: 'postcss-css-to-json',
-		Once (root) {
+		OnceExit (root) {
 			let css = root.toString();
 			css = proccessCSS(css);
 

package/lib/postcss-scope-vars/index.js

@@ -0,0 +1,24 @@
+const name = "postcss-scope-vars";
+
+module.exports = (options) => {
+	const versionStr = "v" + options?.version?.replaceAll(".", "-");
+	return {
+		postcssPlugin: name,
+		prepare() {
+			return {
+				Declaration: (declaration) => {
+					if (declaration.__ui5_replaced) {
+						return;
+					}
+					// add version after ui5
+					const expr = /(--_?ui5)([^\,\:\)\s]+)/g
+					declaration.prop = declaration.prop.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.value = declaration.value.replaceAll(expr, `$1-${versionStr}$2`)
+					declaration.__ui5_replaced = true;
+				},
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.16.0",
+  "version": "1.17.0-rc.1",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -51,7 +51,6 @@
     "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",
@@ -79,5 +78,5 @@
   "devDependencies": {
     "yargs": "^17.5.1"
   },
-  "gitHead": "fe4e7e41b2a2780e04e6b35aabbb48dff4fd0ef8"
+  "gitHead": "6ab07172a4a1566c3c598ea1db8dae9b26b4d64e"
 }