chore: reserve free ports for main and fiori (#3008)

.gitignore

@@ -4,6 +4,7 @@ tmp
 temp
 target
 dist
+.port
 
 # Ignore default target directory for the npm package 'ui5-codecompletion'
 .ui5

packages/base/package-scripts.js

@@ -1,17 +1,13 @@
-const path = require("path");
 const resolve = require("resolve");
 
-const serveConfig = `../tools/components-package/serve.json`;
-const port = `9191`;
-
 const assetParametersScript = resolve.sync("@ui5/webcomponents-base/lib/generate-asset-parameters/index.js");
-
+const serve = resolve.sync("@ui5/webcomponents-tools/lib/serve/index.js");
 const generateHash = resolve.sync("@ui5/webcomponents-tools/lib/hash/generate.js");
 const hashIsUpToDate = resolve.sync("@ui5/webcomponents-tools/lib/hash/upToDate.js");
-const UP_TO_DATE = `node ${hashIsUpToDate} dist/ hash.txt && echo "Up to date."`;
+const UP_TO_DATE = `node "${hashIsUpToDate}" dist/ hash.txt && echo "Up to date."`;
 
 const scripts = {
-	clean: "rimraf dist",
+	clean: "rimraf dist && rimraf .port",
 	lint: "eslint . --config config/.eslintrc.js",
 	prepare: "nps clean copy generateAssetParameters",
 	build: {
@@ -20,8 +16,8 @@ const scripts = {
 	},
 	copy: {
 		default: "nps copy.src copy.test",
-		src: "copy-and-watch \"src/**/*.js\" dist/",
-		test: "copy-and-watch \"test/**/*.*\" dist/test-resources",
+		src: `copy-and-watch "src/**/*.js" dist/`,
+		test: `copy-and-watch "test/**/*.*" dist/test-resources`,
 	},
 	generateAssetParameters: `node "${assetParametersScript}"`,
 	watch: {
@@ -32,17 +28,13 @@ const scripts = {
 	},
 	dev: 'concurrently "nps serve" "nps watch"',
 	start: "nps prepare dev",
-	serve: {
-		default: "nps serve.prepare serve.run",
-		prepare: `copy-and-watch "${serveConfig}" dist/`,
-		run: `serve --no-clipboard -l ${port} dist`,
-	},
+	serve: `node "${serve}" --dir="dist/" --port=9191 --packageName="@ui5/webcomponents-base"`,
 	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",
 	},
-	hash: `node ${generateHash} dist/ hash.txt`,
+	hash: `node "${generateHash}" dist/ hash.txt`,
 };
 
 

packages/fiori/package-scripts.js

@@ -1,8 +1,8 @@
-const fs = require("fs");
 const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
 
 const options = {
-	port: JSON.parse(fs.readFileSync("package.json")).ui5.port,
+	port: 8081,
+	portStep: 2,
 };
 
 const scripts = getScripts(options);

packages/fiori/package.json

@@ -3,8 +3,7 @@
   "version": "1.0.0-rc.12",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
-    "webComponentsPackage": true,
-    "port": "8081"
+    "webComponentsPackage": true
   },
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

packages/fiori/test/specs/_port.js

@@ -1,3 +1,5 @@
 const fs = require("fs");
-const packageFile = JSON.parse(fs.readFileSync(require.resolve("@ui5/webcomponents-fiori/package.json")));
-module.exports = packageFile.ui5.port;
+const portFilePath = require.resolve("@ui5/webcomponents-fiori/.port");
+const port = `${fs.readFileSync(portFilePath)}`;
+
+module.exports = port;

packages/main/package-scripts.js

@@ -1,8 +1,8 @@
-const fs = require("fs");
 const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
 
 const options = {
-	port: JSON.parse(fs.readFileSync("package.json")).ui5.port,
+	port: 8080,
+	portStep: 2,
 };
 
 const scripts = getScripts(options);

packages/main/package.json

@@ -3,8 +3,7 @@
   "version": "1.0.0-rc.12",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
-    "webComponentsPackage": true,
-    "port": "8080"
+    "webComponentsPackage": true
   },
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",

packages/main/test/specs/_port.js

@@ -1,3 +1,5 @@
 const fs = require("fs");
-const packageFile = JSON.parse(fs.readFileSync(require.resolve("@ui5/webcomponents/package.json")));
-module.exports = packageFile.ui5.port;
+const portFilePath = require.resolve("@ui5/webcomponents/.port");
+const port = `${fs.readFileSync(portFilePath)}`;
+
+module.exports = port;

packages/tools/components-package/nps.js

@@ -1,16 +1,18 @@
 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, "{*.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
 
 	const scripts = {
-		clean: "rimraf dist",
+		clean: "rimraf dist && rimraf .port",
 		lint: "eslint . --config config/.eslintrc.js",
 		lintfix: "eslint . --config config/.eslintrc.js --fix",
 		prepare: {
@@ -79,11 +81,7 @@ const getScripts = (options) => {
 			es5: 'concurrently "nps serve" "nps watch.es5"'
 		},
 		start: "nps prepare dev",
-		serve: {
-			default: "nps serve.prepare serve.run",
-			prepare: `node "${LIB}/copy-and-watch/index.js" --silent "${serveConfig}" dist/`,
-			run: `serve --no-clipboard -l ${port} dist`,
-		},
+		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',

packages/tools/components-package/rollup.js

@@ -13,7 +13,6 @@ const livereload = require("rollup-plugin-livereload");
 
 const packageFile = JSON.parse(fs.readFileSync("./package.json"));
 const packageName = packageFile.name;
-const ui5Info = packageFile.ui5 || {};
 const DEPLOY_PUBLIC_PATH = process.env.DEPLOY_PUBLIC_PATH || "";
 
 function ui5DevImportCheckerPlugin() {
@@ -29,16 +28,20 @@ function ui5DevImportCheckerPlugin() {
 }
 
 const reportedForPackages = new Set(); // sometimes writeBundle is called more than once per bundle -> suppress extra messages
-function ui5DevReadyMessagePlugin({ packageName, port }) {
+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 (port) {
-				console.log(colors.blue(`Navigate to: ${colors.bold(`http://localhost:${port}/test-resources/pages/`)}`));
+
+			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);
 		},
@@ -122,10 +125,7 @@ const getPlugins = ({ transpile }) => {
 	}
 
 	if (process.env.DEV) {
-		plugins.push(ui5DevReadyMessagePlugin({
-			packageName,
-			port: ui5Info.port,
-		}));
+		plugins.push(ui5DevReadyMessagePlugin());
 	}
 
 	return plugins;

packages/tools/lib/serve/index.js

@@ -0,0 +1,46 @@
+const fs = require("fs");
+const path = require("path");
+const commandLineArgs = require("command-line-args");
+const { exec } = require("child_process");
+const colors = require("colors/safe");
+const isPortReachable = require("is-port-reachable");
+
+const options = commandLineArgs([
+	{ name: "port", type: Number },
+	{ name: "portStep", type: Number },
+	{ name: "packageName", type: String },
+	{ name: "dir", type: String },
+	{ name: "config", type: String },
+]);
+const serveConfig = path.join(__dirname, `serve.json`);
+
+const requestPort = async () => {
+	const serveProcess = (await gen.next()).value;
+	serveProcess.stdout.on('data', data => {
+		const matches = data.match(/Accepting connections at .*?:(\d+)/);
+		if (matches) {
+			console.log(colors.yellow(`Reserved port ${matches[1]} for the ${options.packageName} package.`));
+			fs.writeFileSync(".port", matches[1]);
+		}
+	});
+};
+
+async function* serverGenerator(callback, port = 8080, step = 1) {
+	while (true) {
+		const portInUse = await isPortReachable(port, { host: "127.0.0.1" });
+		if (!portInUse) {
+			const command = `serve --config "${serveConfig}" --no-port-switching --no-clipboard -l ${port} ${options.dir}`;
+			console.log(colors.yellow(`Executing: ${command}`));
+			const serveProcess = exec(command, (err) => {
+				console.log(colors.yellow(`Port ${port} already in use.`));
+				callback();
+			});
+			yield serveProcess;
+		}
+		port += step;
+	}
+}
+
+const gen = serverGenerator(requestPort, options.port, options.portStep);
+
+requestPort();

packages/tools/package.json

@@ -56,6 +56,7 @@
     "getopts": "^2.3.0",
     "glob": "^7.1.6",
     "handlebars": "^4.7.7",
+    "is-port-reachable": "^3.0.0",
     "jsdoc": "^3.6.6",
     "json-beautify": "^1.1.1",
     "mkdirp": "^1.0.4",
@@ -76,7 +77,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^4.2.0",
-    "serve": "^11.3.2",
+    "serve": "github:vercel/serve#a85bd9d03ae267a492aac683616e028c0bfc6447",
     "wdio-chromedriver-service": "^7.0.0"
   },
   "peerDependencies": {

yarn.lock

@@ -1596,17 +1596,7 @@ ajv-keywords@^3.0.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@6.5.3:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.3.tgz#71a569d189ecf4f4f321224fecb166f071dd90f9"
-  integrity sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==
-  dependencies:
-    fast-deep-equal "^2.0.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
-
-ajv@^6.0.1, ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
+ajv@6.12.6, ajv@^6.0.1, ajv@^6.10.0, ajv@^6.12.3, ajv@^6.12.4:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -5343,6 +5333,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-port-reachable@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-port-reachable/-/is-port-reachable-3.0.0.tgz#edf721e7d354e6e00cbeb0fc174ad89bdf6056b3"
+  integrity sha512-056IzLiWHdgVd6Eq1F9HtJl+cIkvi5X2MJ/A1fjQtByHkzQE1wGardnPhqrarOGDF88BOW+297X7PDvZ2vcyVg==
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -8696,13 +8691,12 @@ serve-handler@6.1.3:
     path-to-regexp "2.2.1"
     range-parser "1.2.0"
 
-serve@^11.3.2:
+"serve@github:vercel/serve#a85bd9d03ae267a492aac683616e028c0bfc6447":
   version "11.3.2"
-  resolved "https://registry.yarnpkg.com/serve/-/serve-11.3.2.tgz#b905e980616feecd170e51c8f979a7b2374098f5"
-  integrity sha512-yKWQfI3xbj/f7X1lTBg91fXBP0FqjJ4TEi+ilES5yzH0iKJpN5LjNb1YzIfQg9Rqn4ECUS2SOf2+Kmepogoa5w==
+  resolved "https://codeload.github.com/vercel/serve/tar.gz/a85bd9d03ae267a492aac683616e028c0bfc6447"
   dependencies:
     "@zeit/schemas" "2.6.0"
-    ajv "6.5.3"
+    ajv "6.12.6"
     arg "2.0.0"
     boxen "1.3.0"
     chalk "2.4.1"