fix: Pretty CLI Output

esbuild/index.js

@@ -2,8 +2,10 @@ let path = require("path");
 let fs = require("fs");
 let glob = require("fast-glob");
 let esbuild = require("esbuild");
-let html_plugin = require("./esbuild-plugin-html");
 let vue = require("esbuild-vue");
+let cliui = require("cliui")();
+let chalk = require("chalk");
+let html_plugin = require("./esbuild-plugin-html");
 let postCssPlugin = require("esbuild-plugin-postcss2").default;
 let ignore_assets = require("./ignore-assets");
 let sass_options = require("./sass_options");
@@ -16,7 +18,7 @@ let {
 	get_cli_arg
 } = require("./utils");
 
-const TOTAL_BUILD_TIME = "Total Build Time";
+const TOTAL_BUILD_TIME = `${chalk.black.bgGreen(" DONE ")} Total Build Time`;
 const WATCH_MODE = get_cli_arg("watch");
 const NODE_PATHS = [].concat(
 	// node_modules of apps directly importable
@@ -30,9 +32,25 @@ const NODE_PATHS = [].concat(
 );
 
 (async function() {
+	let apps = app_list;
+	let apps_arg = get_cli_arg("apps");
+	if (apps_arg) {
+		apps = apps_arg.split(",");
+	}
+
 	console.time(TOTAL_BUILD_TIME);
-	await build_assets_for_apps(app_list);
-	console.timeEnd(TOTAL_BUILD_TIME);
+	build_assets_for_apps(apps)
+		.then(() => {
+			console.timeEnd(TOTAL_BUILD_TIME);
+			console.log();
+			if (WATCH_MODE) {
+				console.log('Watching for changes...')
+			}
+		})
+		.catch(() => {
+			let error = chalk.white.bgRed(" ERROR ");
+			console.error(`${error} There were some problems during build`);
+		});
 })();
 
 function build_assets_for_apps(apps) {
@@ -127,8 +145,8 @@ function build_files({ files, outdir }) {
 							if (error)
 								console.error("watch build failed:", error);
 							else {
-								console.log("\n\nwatch build succeeded:");
-								log_build_meta(result.metafile);
+								console.log(`${new Date().toLocaleTimeString()}: Compiled changes...`)
+								// log_build_meta(result.metafile);
 							}
 						}
 				  }
@@ -136,18 +154,66 @@ function build_files({ files, outdir }) {
 		})
 		.then(result => {
 			log_build_meta(result.metafile);
-		})
-		.catch(e => {
-			console.error("Error during build");
 		});
 }
 
 function log_build_meta(metafile) {
+	let column_widths = [40, 20];
+	cliui.div(
+		{
+			text: chalk.cyan.bold("File"),
+			width: column_widths[0]
+		},
+		{
+			text: chalk.cyan.bold("Size"),
+			width: column_widths[1]
+		}
+	);
+	cliui.div("");
+
+	let output_by_dist_path = {};
 	for (let outfile in metafile.outputs) {
 		if (outfile.endsWith(".map")) continue;
 		let data = metafile.outputs[outfile];
 		outfile = path.resolve(outfile);
 		outfile = path.relative(assets_path, outfile);
-		console.log(outfile, data.bytes / 1000 + " Kb");
+		let filename = path.basename(outfile);
+		let dist_path = outfile.replace(filename, "");
+		output_by_dist_path[dist_path] = output_by_dist_path[dist_path] || [];
+		output_by_dist_path[dist_path].push({
+			name: filename,
+			size: (data.bytes / 1000).toFixed(2) + " Kb"
+		});
+	}
+
+	for (let dist_path in output_by_dist_path) {
+		let files = output_by_dist_path[dist_path];
+		cliui.div({
+			text: dist_path,
+			width: column_widths[0]
+		});
+
+		for (let i in files) {
+			let file = files[i];
+			let branch = "";
+			if (i < files.length - 1) {
+				branch = "├─ ";
+			} else {
+				branch = "└─ ";
+			}
+			let color = file.name.endsWith(".js") ? "green" : "blue";
+			cliui.div(
+				{
+					text: branch + chalk[color]("" + file.name),
+					width: column_widths[0]
+				},
+				{
+					text: file.size,
+					width: column_widths[1]
+				}
+			);
+		}
+		cliui.div("");
 	}
+	console.log(cliui.toString());
 }

esbuild/utils.js

@@ -97,20 +97,17 @@ function get_apps_list() {
 
 function get_cli_arg(name) {
 	let args = process.argv.slice(2);
+	let arg = `--${name}`;
+	let index = args.indexOf(arg);
 
-	for (let i in args) {
-		let arg = args[i];
-		let value = null;
-		if (arg == `--${name}`) {
-			value = true;
-		}
-		if (args[i + 1]) {
-			value = args[i + 1];
-		}
-		if (value) {
-			return value;
-		}
+	let value = null;
+	if (index != -1) {
+		value = true;
+	}
+	if (value && args[index + 1]) {
+		value = args[index + 1];
 	}
+	return value;
 }
 
 module.exports = {

package.json

@@ -22,6 +22,7 @@
     "autoprefixer": "^9.8.6",
     "awesomplete": "^1.1.5",
     "bootstrap": "4.5.0",
+    "cliui": "^7.0.4",
     "cookie": "^0.4.0",
     "cssnano": "^4.1.10",
     "driver.js": "^0.9.8",

yarn.lock

@@ -749,6 +749,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
 ansi-styles@^4.1.0:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
@@ -1524,6 +1531,15 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
+cliui@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
@@ -8431,6 +8447,15 @@ string-width@^4.0.0, string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string-width@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
 string.prototype.trimend@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
@@ -9383,6 +9408,15 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"