@ui5/webcomponents-tools 1.0.0-rc.9 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,95 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.2...v1.1.0) (2022-01-21)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.0.2](https://github.com/SAP/ui5-webcomponents/compare/v1.0.1...v1.0.2) (2021-11-29)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [1.0.1](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0...v1.0.1) (2021-11-10)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.0.0](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.16...v1.0.0) (2021-11-10)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+# [1.0.0-rc.16](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.15...v1.0.0-rc.16) (2021-11-09)
+
+
+
+### Features
+
+* **tools:** create an npm init script ([#4090](https://github.com/SAP/ui5-webcomponents/issues/4090)) ([5608e04](https://github.com/SAP/ui5-webcomponents/commit/5608e04))
+
+
+
+# [1.0.0-rc.15](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.14...v1.0.0-rc.15) (2021-07-23)
+
+
+### Bug Fixes
+
+* **tools:** fix build error on MacOS 11 from rollup-plugin-terser ([#3347](https://github.com/SAP/ui5-webcomponents/issues/3347)) ([59892c4](https://github.com/SAP/ui5-webcomponents/commit/59892c4)), closes [#2515](https://github.com/SAP/ui5-webcomponents/issues/2515)
+
+
+
+
+
+
+# [1.0.0-rc.14](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.13...v1.0.0-rc.14) (2021-04-01)
+
+
+
+
+# [1.0.0-rc.13](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.12...v1.0.0-rc.13) (2021-03-26)
+
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [1.0.0-rc.12](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.11...v1.0.0-rc.12) (2021-02-18)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+# [1.0.0-rc.11](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.10...v1.0.0-rc.11) (2020-12-21)
+
+
+### Bug Fixes
+
+* build error on MacOS 11 from rollup-plugin-terser ([#2515](https://github.com/SAP/ui5-webcomponents/issues/2515)) ([0629fac](https://github.com/SAP/ui5-webcomponents/commit/0629fac))
+
+
+
+
+
+# [1.0.0-rc.10](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.9...v1.0.0-rc.10) (2020-11-12)
+
+
+
 # [1.0.0-rc.9](https://github.com/SAP/ui5-webcomponents/compare/v1.0.0-rc.8...v1.0.0-rc.9) (2020-10-08)
 
 

package/README.md

@@ -17,7 +17,7 @@ used by other UI5 Web Components packages, such as `main` and `fiori`.
 We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.

package/assets-meta.js

@@ -8,7 +8,9 @@ const assetsMeta = {
       "sap_belize_hcb",
       "sap_belize_hcw",
       "sap_fiori_3_hcb",
-      "sap_fiori_3_hcw"
+      "sap_fiori_3_hcw",
+	  "sap_horizon",
+	  "sap_horizon_exp"
     ]
   },
   "languages": {
@@ -18,17 +20,25 @@ const assetsMeta = {
       "bg",
       "ca",
       "cs",
+      "cy",
       "da",
       "de",
       "el",
       "en",
+      "en_GB",
+      "en_US_sappsd",
+      "en_US_saprigi",
+      "en_US_saptrc",
       "es",
+      "es_MX",
       "et",
       "fi",
       "fr",
+      "fr_CA",
       "hi",
       "hr",
       "hu",
+      "in",
       "it",
       "iw",
       "ja",
@@ -40,6 +50,7 @@ const assetsMeta = {
       "nl",
       "no",
       "pl",
+      "pt_PT",
       "pt",
       "ro",
       "ru",

package/components-package/nps.js

@@ -1,25 +1,36 @@
 const path = require("path");
+const fs = require("fs");
 
 const LIB = path.join(__dirname, `../lib/`);
-const serveConfig = path.join(__dirname, `serve.json`);
 const polyfillDir = path.dirname(require.resolve("@webcomponents/webcomponentsjs"));
-const polyfillPath = path.join(polyfillDir, "/**/*.*");
+const polyfillPath = path.join(polyfillDir, "{*.js,*.map,*.md,bundles/**/*.*}");
+const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 const getScripts = (options) => {
 
-	const port = options.port;
+	const port = options.port || 8080; // preferred port
+	const portStep = options.portStep || 1; // step to check for available ports, if preferred port is already used
+	let illustrations = options.illustrationsData || [];
+
+	illustrations = illustrations.map(illustration => `node "${LIB}/create-illustrations/index.js" ${illustration.path} ${illustration.defaultText} ${illustration.illustrationsPrefix} ${illustration.set} ${illustration.destinationPath}`);
+
+	let illustrationsScript = illustrations.join(" && ");
 
 	const scripts = {
-		clean: "rimraf dist",
+		clean: "rimraf dist && rimraf .port",
 		lint: "eslint . --config config/.eslintrc.js",
-		prepare: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples",
+		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"
+		},
 		build: {
-			default: "nps lint prepare build.bundle",
+			default: "nps lint prepare.es5 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/",
-				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/",
+				components: "postcss src/themes/*.css --config config/postcss.components --base src --dir dist/css/", // When updating this, also update the new files script
 			},
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
@@ -36,38 +47,51 @@ const getScripts = (options) => {
 				default: "nps build.samples.api build.samples.docs",
 				api: `jsdoc -c "${LIB}/jsdoc/config.json"`,
 				docs: `node "${LIB}/documentation/index.js" dist/api.json`,
-			}
+			},
+			illustrations: illustrationsScript
 		},
 		copy: {
-			default: "nps copy.src copy.test copy.webcomponents-polyfill",
-			src: `node "${LIB}/copy-and-watch/index.js" "src/**/*.js" dist/`,
-			test: `node "${LIB}/copy-and-watch/index.js" "test/**/*.*" dist/test-resources`,
-			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" "${polyfillPath}" dist/webcomponentsjs/`,
+			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill-placeholder",
+			es5: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
+			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"',
+			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: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/",
+			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/'
+			},
 			styles: {
 				default: 'concurrently "nps watch.styles.themes" "nps watch.styles.components"',
 				themes: 'nps "build.styles.themes -w"',
-				components: 'nps "build.styles.components -w"',
+				components: {
+					default: 'concurrently "nps watch.styles.components.existingFiles" "nps watch.styles.components.newFiles"',
+					existingFiles: `nps "build.styles.components -w"`,
+					newFiles: `node "${LIB}/postcss-new-files/index.js" --srcFiles="src/themes/*.css"`,
+				},
 			},
-			templates: "chokidar \"src/**/*.hbs\" -c \"nps build.templates\"",
-			samples: "chokidar \"test/**/*.sample.html\" -c \"nps build.samples\"",
+			templates: 'chokidar "src/**/*.hbs" -c "nps build.templates"',
+			samples: 'chokidar "test/**/*.sample.html" -c "nps build.samples"',
+			i18n: 'chokidar "src/i18n/messagebundle.properties" -c "nps build.i18n.defaultsjs"'
 		},
-		dev: 'concurrently "nps serve" "nps watch"',
-		start: "nps prepare dev",
-		serve: {
-			default: "nps serve.prepare serve.run",
-			prepare: `node "${LIB}/copy-and-watch/index.js" "${serveConfig}" dist/`,
-			run: `serve --no-clipboard -l ${port} dist`,
+		dev: {
+			default: 'concurrently "nps serve" "nps watch"',
+			es5: 'concurrently "nps serve" "nps watch.es5"'
 		},
+		start: "nps prepare dev",
+		serve: `node "${LIB}/serve/index.js" --dir="dist/" --port=${port} --portStep=${portStep} --packageName="${packageName}"`,
 		test: {
 			// --success first - report the exit code of the test run (first command to finish), as serve is always terminated and has a non-0 exit code
 			default: 'concurrently "nps serve" "nps test.run" --kill-others --success first',
-			run: "cross-env WDIO_LOG_LEVEL=error FORCE_COLOR=0 wdio config/wdio.conf.js",
+			run: "cross-env WDIO_LOG_LEVEL=error wdio config/wdio.conf.js",
 			spec: "wdio run config/wdio.conf.js",
 		},
 		startWithScope: "nps scope.prepare scope.dev",
@@ -77,12 +101,12 @@ const getScripts = (options) => {
 			testPages: {
 				default: "nps scope.testPages.clean scope.testPages.copy scope.testPages.replace",
 				clean: "rimraf dist/test-resources/pages/scoped",
-				copy: `node "${LIB}/copy-and-watch/index.js" "dist/test-resources/pages/**/*" dist/test-resources/scoped`,
+				copy: `node "${LIB}/copy-and-watch/index.js" --silent "dist/test-resources/pages/**/*" dist/test-resources/scoped`,
 				replace: `node "${LIB}/scoping/scope-test-pages.js" dist/test-resources/scoped demo`,
 			},
 			dev: 'concurrently "nps serve" "nps scope.watch"',
-			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps scope.bundle" "nps watch.styles"',
-			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE"
+			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'
 		}
 	};
 

package/components-package/postcss.themes.js

@@ -3,6 +3,9 @@ const combineSelectors = require('postcss-combine-duplicated-selectors');
 const postcssCSStoJSON = require('../lib/postcss-css-to-json/index.js');
 const postcssCSStoESM = require('../lib/postcss-css-to-esm/index.js');
 const cssnano = require('cssnano');
+const fs = require("fs");
+
+const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
 
 module.exports = {
 	plugins: [
@@ -17,7 +20,7 @@ module.exports = {
 				},
 			]
 		},),
-		postcssCSStoJSON({toReplace: 'src'}),
-		postcssCSStoESM({toReplace: 'src'}),
+		postcssCSStoJSON({toReplace: 'src', packageName}),
+		postcssCSStoESM({toReplace: 'src', packageName}),
 	]
 };

package/components-package/rollup-plugins/empty-module.js

@@ -0,0 +1,15 @@
+const slash = require("slash");
+
+function emptyModulePlugin({ emptyModules }) {
+	return {
+		name: "ui5-dev-empty-module-plugin",
+		load(id) {
+			if (emptyModules.some(mod => slash(id).includes(mod))) {
+				return `export default ""`;
+			}
+			return null;
+		},
+	};
+}
+
+module.exports = emptyModulePlugin;

package/components-package/rollup.js

@@ -5,13 +5,23 @@ 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 notify = require('rollup-plugin-notify');
-const filesize = require('rollup-plugin-filesize');
-const livereload = require('rollup-plugin-livereload');
-
-const packageName = JSON.parse(fs.readFileSync("./package.json")).name;
+const json = require("@rollup/plugin-json");
+const replace = require("@rollup/plugin-replace");
+const commonjs = require("@rollup/plugin-commonjs");
+const colors = require("colors/safe");
+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",
+	filePath: /.+zxing.+/,
+}];
+
 function ui5DevImportCheckerPlugin() {
 	return {
 		name: "ui5-dev-import-checker-plugin",
@@ -20,51 +30,129 @@ function ui5DevImportCheckerPlugin() {
 			if (re.test(code)) {
 				throw new Error(`illegal import in ${file}`);
 			}
-		}
+		},
+	};
+}
+
+function onwarn(warning, warn) {
+	// Skip warning for known false positives that will otherwise polute the log
+	let skip = warningsToSkip.find(warningToSkip => {
+		let loc, file;
+		return warning.code === warningToSkip.warningCode
+			&& (loc = warning.loc)
+			&& (file = loc.file)
+			&& file.match(warningToSkip.filePath);
+	});
+	if (skip) {
+		return;
+	}
+
+	// warn everything else
+	warn( warning );
+}
+
+const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
+function ui5DevReadyMessagePlugin() {
+	return {
+		name: "ui5-dev-message-ready-plugin",
+		writeBundle: (assets, bundle) => {
+			if (reportedForPackages.has(packageName)) {
+				return;
+			}
+			console.log(colors.blue(`${colors.bold(packageName)} successfully built!`));
+
+			if (fs.existsSync(".port")) {
+				const port = `${fs.readFileSync(".port")}`;
+				if (port) {
+					console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
+				}
+			}
+			reportedForPackages.add(packageName);
+		},
 	};
 }
 
 const getPlugins = ({ transpile }) => {
 	const plugins = [];
-	let publicPath = DEPLOY_PUBLIC_PATH;
 
-	if (!process.env.DEV) {
-		plugins.push(filesize({
-			render : function (options, bundle, { minSize, gzipSize, brotliSize, bundleSize }){
-				return gzipSize;
-			}
+	if (process.env.DEV) {
+		plugins.push(replace({
+			values: {
+				'const DEV_MODE = false': 'const DEV_MODE = true',
+			},
+			preventAssignment: false,
+		}));
+	}
+
+	if (process.env.DEV && !process.env.ENABLE_CLDR) {
+		// Empty the CLDR assets file for better performance during development
+		plugins.push(emptyModulePlugin({
+			emptyModules: [
+				"localization/dist/Assets.js",
+			],
 		}));
 	}
 
+	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());
 
-	plugins.push(url({
-		limit: 0,
-		include: [
-			/.*assets\/.*\.json/
-		],
-		emitFiles: true,
-		fileName: "[name].[hash][extname]",
-		publicPath,
-	}));
+	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: true,
+			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(nodeResolve());
 
 	if (!process.env.DEV) {
-		plugins.push(terser());
-	}
-
-	if (process.env.DEV) {
-		plugins.push(notify());
+		plugins.push(terser({
+			numWorkers: 1,
+		}));
 	}
 
 	const es6DevMain = process.env.DEV && !transpile && packageName === "@ui5/webcomponents";
@@ -74,10 +162,14 @@ const getPlugins = ({ transpile }) => {
 				"dist/resources/bundle.esm.js",
 				"dist/**/*.html",
 				"dist/**/*.json",
-			]
+			],
 		}));
 	}
 
+	if (process.env.DEV) {
+		plugins.push(ui5DevReadyMessagePlugin());
+	}
+
 	return plugins;
 };
 
@@ -87,23 +179,24 @@ const getES6Config = (input = "bundle.esm.js") => {
 		output: {
 			dir: "dist/resources",
 			format: "esm",
-			sourcemap: true
+			sourcemap: true,
 		},
-		moduleContext: (id) => {
-			if (id.includes("url-search-params-polyfill")) {
+		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
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: false}),
+		plugins: getPlugins({ transpile: false }),
+		onwarn: onwarn,
 	}];
 };
 
 const getES5Config = (input = "bundle.es5.js") => {
-	return [ {
+	return [{
 		input,
 		output: {
 			dir: "dist/resources",
@@ -111,24 +204,25 @@ const getES5Config = (input = "bundle.es5.js") => {
 			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
+			sourcemap: true,
 		},
-		moduleContext: (id) => {
+		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
+			clearScreen: false,
 		},
-		plugins: getPlugins({transpile: true}),
+		plugins: getPlugins({ transpile: true }),
+		onwarn: onwarn,
 	}];
 };
 
 let config = getES6Config();
 
-if (process.env.ES5_BUILD) {
+if (process.env.ES5_BUILD && fs.existsSync("bundle.es5.js")) {
 	config = config.concat(getES5Config());
 }