@ui5/webcomponents-tools 1.2.3 → 1.3.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1](https://github.com/SAP/ui5-webcomponents/compare/v1.3.0...v1.3.1) (2022-04-27)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.3.0](https://github.com/SAP/ui5-webcomponents/compare/v1.2.4...v1.3.0) (2022-04-19)
+
+
+### Bug Fixes
+
+* **localization:** fix js error if "sh" locale set ([#4905](https://github.com/SAP/ui5-webcomponents/issues/4905)) ([979bca2](https://github.com/SAP/ui5-webcomponents/commit/979bca2)), closes [#4904](https://github.com/SAP/ui5-webcomponents/issues/4904)
+
+
+
+
+
+## [1.2.4](https://github.com/SAP/ui5-webcomponents/compare/v1.2.3...v1.2.4) (2022-03-30)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 ## [1.2.3](https://github.com/SAP/ui5-webcomponents/compare/v1.2.2...v1.2.3) (2022-03-23)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/components-package/nps.js

@@ -2,8 +2,6 @@ const path = require("path");
 const fs = require("fs");
 
 const LIB = path.join(__dirname, `../lib/`);
-const polyfillDir = path.dirname(require.resolve("@webcomponents/webcomponentsjs"));
-const polyfillPath = path.join(polyfillDir, "{*.js,*.map,*.md,bundles/**/*.*}");
 const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 const getScripts = (options) => {
@@ -20,16 +18,13 @@ const getScripts = (options) => {
 		clean: "rimraf dist && rimraf .port",
 		lint: "eslint . --config config/.eslintrc.js",
 		lintfix: "eslint . --config config/.eslintrc.js --fix",
-		prepare: {
-			default: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples build.illustrations",
-			es5: "nps clean build.templates build.styles build.i18n build.jsonImports copy.es5 build.samples build.illustrations"
-		},
+		prepare: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples build.illustrations",
 		build: {
-			default: "nps lint prepare.es5 build.bundle",
+			default: "nps lint prepare build.bundle",
 			templates: `mkdirp dist/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o dist/generated/templates`,
 			styles: {
 				default: "nps build.styles.themes build.styles.components",
-				themes: "postcss src/**/parameters-bundle.css --config config/postcss.themes --base src --dir dist/css/",
+				themes: `node "${LIB}/postcss-p/postcss-p.mjs"`,
 				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
@@ -42,7 +37,7 @@ const getScripts = (options) => {
 				themes: `node "${LIB}/generate-json-imports/themes.js" dist/generated/assets/themes dist/generated/json-imports`,
 				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
 			},
-			bundle: "rollup --config config/rollup.config.js --environment ES5_BUILD",
+			bundle: "rollup --config config/rollup.config.js",
 			samples: {
 				default: "nps build.samples.api build.samples.docs",
 				api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
@@ -51,24 +46,17 @@ const getScripts = (options) => {
 			illustrations: illustrationsScript
 		},
 		copy: {
-			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill-placeholder",
-			es5: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
+			default: "nps copy.src copy.props copy.test",
 			src: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.js" dist/`,
 			props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
 			test: `node "${LIB}/copy-and-watch/index.js" --silent "test/**/*.*" dist/test-resources`,
-			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" --silent "${polyfillPath}" dist/webcomponentsjs/`,
-			"webcomponents-polyfill-placeholder": `node "${LIB}/polyfill-placeholder/index.js"`
 		},
 		watch: {
 			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles" "nps watch.i18n"',
-			es5: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle.es5" "nps watch.styles" "nps watch.i18n"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
 			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
 			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
-			bundle: {
-				default: 'rollup --config config/rollup.config.js -w --environment DEV,DEPLOY_PUBLIC_PATH:/resources/',
-				es5: 'rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/'
-			},
+			bundle: 'rollup --config config/rollup.config.js -w --environment DEV',
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
@@ -82,10 +70,7 @@ const getScripts = (options) => {
 			samples: 'chokidar "test/**/*.sample.html" -c "nps build.samples"',
 			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
-		dev: {
-			default: 'concurrently "nps serve" "nps watch"',
-			es5: 'concurrently "nps serve" "nps watch.es5"'
-		},
+		dev: 'concurrently "nps serve" "nps watch"',
 		start: "nps prepare dev",
 		serve: `node "${LIB}/serve/index.js" --dir="dist/" --port=${port} --portStep=${portStep} --packageName="${packageName}"`,
 		test: {
@@ -106,7 +91,7 @@ const getScripts = (options) => {
 			},
 			dev: 'concurrently "nps serve" "nps scope.watch"',
 			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.props" "nps scope.bundle" "nps watch.styles"',
-			bundle: 'rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE'
+			bundle: 'rollup --config config/rollup.config.js -w --environment DEV,SCOPE'
 		}
 	};
 

package/components-package/postcss.themes.js

@@ -1,5 +1,5 @@
 const postcssImport = require('postcss-import');
-const combineSelectors = require('postcss-combine-duplicated-selectors');
+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 cssnano = require('cssnano');

package/components-package/rollup.js

@@ -1,21 +1,16 @@
 const process = require("process");
 const fs = require("fs");
 const os = require("os");
-const { babel } = require("@rollup/plugin-babel");
 const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const url = require("@rollup/plugin-url");
 const { terser } = require("rollup-plugin-terser");
 const json = require("@rollup/plugin-json");
 const replace = require("@rollup/plugin-replace");
-const commonjs = require("@rollup/plugin-commonjs");
 const colors = require("cli-color");
-const filesize = require("rollup-plugin-filesize");
 const livereload = require("rollup-plugin-livereload");
 const emptyModulePlugin = require("./rollup-plugins/empty-module.js");
 
 const packageFile = JSON.parse(fs.readFileSync("./package.json"));
 const packageName = packageFile.name;
-const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
 
 const warningsToSkip = [{
 	warningCode: "THIS_IS_UNDEFINED",
@@ -72,7 +67,7 @@ function ui5DevReadyMessagePlugin() {
 	};
 }
 
-const getPlugins = ({ transpile }) => {
+const getPlugins = () => {
 	const plugins = [];
 
 	if (process.env.DEV) {
@@ -93,59 +88,14 @@ const getPlugins = ({ transpile }) => {
 		}));
 	}
 
-	if (!process.env.DEV) {
-		plugins.push(filesize(
-			{
-				reporter(options, bundle, {
-					minSize, gzipSize, brotliSize, bundleSize,
-					fileName,
-					// "showBeforeSizes: release"
-					lastVersion,
-					// "showBeforeSizes: "release" or "showBeforeSizes": "build"
-					bundleSizeBefore, brotliSizeBefore, minSizeBefore, gzipSizeBefore,
-				}) {
-				// If a promise is returned, it will be awaited before rendering.
-					return `${fileName.padEnd(35)} ${minSize} / gzipped: ${gzipSize}`;
-				},
-			},
-
-		));
-	}
-
-	const publicPath = DEPLOY_PUBLIC_PATH;
-
 	plugins.push(ui5DevImportCheckerPlugin());
 
-	if (!transpile) {
-		plugins.push(json({
-			include: [
-				/.*assets\/.*\.json/,
-			],
-			namedExports: false,
-		}));
-	}
-
-	if (transpile) {
-		plugins.push(url({
-			limit: 0,
-			include: [
-				/.*assets\/.*\.json/,
-			],
-			emitFiles: true,
-			fileName: "[name].[hash][extname]",
-			publicPath,
-		}));
-	}
-
-	if (transpile) {
-		plugins.push(commonjs());
-		plugins.push(babel({
-			presets: ["@babel/preset-env"],
-			exclude: /node_modules\/(?!(lit-html|@ui5\/webcomponents))/, // exclude all node_modules/ except lit-html and all starting with @ui5/webcomponents
-			sourcemap: false,
-			babelHelpers: "bundled",
-		}));
-	}
+	plugins.push(json({
+		include: [
+			/.*assets\/.*\.json/,
+		],
+		namedExports: false,
+	}));
 
 	plugins.push(nodeResolve());
 
@@ -155,7 +105,7 @@ const getPlugins = ({ transpile }) => {
 		}));
 	}
 
-	const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
+	const es6DevMain = process.env.DEV && packageName === "@ui5/webcomponents";
 	if (es6DevMain && os.platform() !== "win32") {
 		plugins.push(livereload({
 			watch: [
@@ -181,58 +131,19 @@ const getES6Config = (input = "bundle.esm.js") => {
 			format: "esm",
 			sourcemap: true,
 		},
-		moduleContext: id => {
-			if (typeof id === "string" && id.includes("url-search-params-polyfill")) {
-				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
-				return "window";
-			}
-		},
-		watch: {
-			clearScreen: false,
-		},
-		plugins: getPlugins({ transpile: false }),
-		onwarn: onwarn,
-	}];
-};
-
-const getES5Config = (input = "bundle.es5.js") => {
-	return [{
-		input,
-		output: {
-			dir: "dist/resources",
-			format: "iife",
-			inlineDynamicImports: true,
-			name: "sap-ui-webcomponents-bundle",
-			extend: "true",	// Whether or not to extend the global variable defined by the name option in umd or iife formats.
-			sourcemap: true,
-		},
-		moduleContext: id => {
-			if (id.includes("url-search-params-polyfill")) {
-				// suppress the rollup error for this module as it uses this in the global scope correctly even without changing the context here
-				return "window";
-			}
-		},
 		watch: {
 			clearScreen: false,
 		},
-		plugins: getPlugins({ transpile: true }),
+		plugins: getPlugins(),
 		onwarn: onwarn,
 	}];
 };
 
 let config = getES6Config();
 
-if (process.env.ES5_BUILD && fs.existsSync("bundle.es5.js")) {
-	config = config.concat(getES5Config());
-}
-
 if (process.env.SCOPE) {
 	if (fs.existsSync("bundle.scoped.esm.js")) {
 		config = config.concat(getES6Config("bundle.scoped.esm.js"));
-
-		if (fs.existsSync("bundle.scoped.es5.js") && process.env.ES5_BUILD) {
-			config = config.concat(getES5Config("bundle.scoped.es5.js"));
-		}
 	}
 }
 

package/lib/copy-and-watch/index.js

@@ -1,3 +1,27 @@
+/*
+MIT License
+
+Copyright (c) 2017
+
+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 fs = require('fs');
 const path = require('path');
 const chokidar = require('chokidar');

package/lib/hbs2lit/src/compiler.js

@@ -30,7 +30,16 @@ const hbs2lit = (file) => {
 	lv.accept(ast);
 
 	for (let key in lv.blocks) {
-		result += lv.blocks[key] + "\n";
+		let block = lv.blocks[key];
+
+		if (block.match(/scopeTag/)) {
+			const matches = block.match(/^(.*?)( => )(.*?);$/);
+			const scopedCode = matches[3];
+			const normalCode = scopedCode.replace(/\${scopeTag\("/g, "").replace(/", tags, suffix\)}/g, "");
+			block = `${matches[1]}${matches[2]}suffix ? ${scopedCode} : ${normalCode};`;
+		}
+
+		result += block + "\n";
 	}
 
 	result = svgProcessor.process(result);

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

@@ -0,0 +1,178 @@
+/*
+ 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);
+					}
+				},
+			};
+		},
+	};
+};
+
+module.exports.postcss = true;

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

@@ -0,0 +1,11 @@
+import 'zx/globals';
+
+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}`;
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -21,21 +21,15 @@
     "directory": "packages/tools"
   },
   "dependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
     "@openui5/sap.ui.core": "1.95.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-url": "^6.0.0",
     "@wdio/cli": "^7.12.2",
     "@wdio/dot-reporter": "^7.10.1",
     "@wdio/local-runner": "^7.12.2",
     "@wdio/mocha-framework": "^7.12.2",
     "@wdio/spec-reporter": "^7.10.1",
-    "@webcomponents/webcomponentsjs": "^2.5.0",
     "chai": "^4.3.4",
     "child_process": "^1.0.2",
     "chokidar": "^3.5.1",
@@ -62,21 +56,21 @@
     "nps": "^5.10.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-import": "^14.0.2",
+    "postcss-selector-parser": "^6.0.10",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
     "resolve": "^1.20.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.41.4",
-    "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "serve": "^12.0.0",
     "slash": "3.0.0",
-    "wdio-chromedriver-service": "^7.0.0"
+    "wdio-chromedriver-service": "^7.0.0",
+    "zx": "^4.3.0"
   },
   "peerDependencies": {
     "chromedriver": "*"
   }
-}
+}

package/lib/polyfill-placeholder/index.js

@@ -1,5 +0,0 @@
-const mkdirp = require("mkdirp");
-const fs = require("fs");
-
-mkdirp.sync("dist/webcomponentsjs/");
-fs.writeFileSync("dist/webcomponentsjs/webcomponents-loader.js", "");