feat: liferay#538 Add webpack actions to report

This is so that we can tell the user what webpack and/or our plugins are doing
on each file.

Author: ivan-zaera

packages/liferay-npm-build-tools-common/src/project/misc.ts

@@ -5,9 +5,13 @@
 
 import {Project} from '.';
 import prop from 'dot-prop';
+import {print, warn} from 'liferay-npm-build-tools-common/lib/format';
 
 import FilePath from '../file-path';
 
+/** Valid log levels for console and report */
+export type LogLevel = 'off' | 'error' | 'warn' | 'info' | 'debug';
+
 /**
  * Reflects miscellaneous project configuration values.
  */
@@ -23,10 +27,28 @@ export default class Misc {
 	/**
 	 * Whether or not to dump detailed information about what the tool is doing
 	 */
-	get logLevel(): 'off' | 'error' | 'warn' | 'info' | 'debug' {
+	get logLevel(): LogLevel {
 		const {npmbundlerrc} = this._project;
 
-		return prop.get(npmbundlerrc, 'log-level', 'warn');
+		let logLevel = prop.get<string>(npmbundlerrc, 'log-level', 'warn');
+
+		switch (logLevel) {
+			case 'off':
+			case 'error':
+			case 'warn':
+			case 'info':
+			case 'debug':
+				break;
+
+			default:
+				logLevel = 'off';
+				print(
+					warn`Configuration value {log-level} has invalid value: it will be ignored`
+				);
+				break;
+		}
+
+		return logLevel as LogLevel;
 	}
 
 	/**
@@ -54,7 +76,6 @@ export default class Misc {
 	/**
 	 * Get the path to the report file or undefined if no report is configured.
 	 */
-
 	get reportFile(): FilePath | undefined {
 		const {_project} = this;
 		const {npmbundlerrc} = _project;
@@ -66,5 +87,45 @@ export default class Misc {
 			: undefined;
 	}
 
+	/**
+	 * Get report log level
+	 */
+	get reportLevel(): LogLevel {
+		const {_project} = this;
+		const {npmbundlerrc} = _project;
+
+		let dumpReport = prop.get<string | boolean>(
+			npmbundlerrc,
+			'dump-report',
+			false
+		);
+
+		switch (dumpReport) {
+			case 'off':
+			case 'error':
+			case 'warn':
+			case 'info':
+			case 'debug':
+				break;
+
+			case true:
+				dumpReport = 'info';
+				break;
+
+			case false:
+				dumpReport = 'off';
+				break;
+
+			default:
+				dumpReport = 'off';
+				print(
+					warn`Configuration value {dump-report} has invalid value: it will be ignored`
+				);
+				break;
+		}
+
+		return dumpReport as LogLevel;
+	}
+
 	private readonly _project: Project;
 }

packages/liferay-npm-bundler/src/report/html.ts

@@ -21,6 +21,7 @@ export function htmlDump(report: Report): string {
 		_rules,
 		_versionsInfo,
 		_warnings,
+		_webpack,
 	} = report;
 
 	const title = 'Report of liferay-npm-bundler execution';
@@ -66,6 +67,39 @@ export function htmlDump(report: Report): string {
 		)
 	);
 
+	const webpack = htmlSection(
+		'Details of webpack execution',
+		htmlTable(
+			'File',
+			'',
+			'Source',
+			'Messages',
+			Object.entries(_webpack.logs)
+				.sort((a, b) => a[0].localeCompare(b[0]))
+				.map(([prjRelPath, sources]) =>
+					Object.entries(sources).map(([source, logger]) =>
+						logger.messages
+							.map(({logLevel, things}, index) =>
+								htmlRow(
+									`
+									<td>${index == 0 ? prjRelPath : ''}</td>
+									<td class="${logLevel}">
+										${logLevel.toUpperCase()}
+									</td>
+									<td class="source">[${source}]</td>
+									<td>
+										${things.map(thing => `${thing}`).join(' ')}
+									</td>
+								`,
+									logLevel
+								)
+							)
+							.join('')
+					)
+				)
+		)
+	);
+
 	const rulesExecution = htmlIf(Object.keys(_rules.files).length > 0, () =>
 		htmlSection(
 			'Details of rule executions',
@@ -131,20 +165,28 @@ export function htmlDump(report: Report): string {
 					}
 					
 					th, td {
-						padding: .1em 0;
+						padding: .1em;
 						vertical-align: top;
 					}
 					
-					td.info, td.warn, td.error {
-						background: green;
+					td.debug, td.info, td.warn, td.error {
 						border-radius: 4px;
 						color: white;
+						padding: 0 2px;
 						text-align: center;
 						vertical-align: middle;
 						width: 1px;
 						white-space: nowrap;
 					}
 
+					td.debug {
+						background: gray;
+					}
+
+					td.info {
+						background: green;
+					}
+
 					td.warn {
 						background: orange;
 					}
@@ -154,6 +196,7 @@ export function htmlDump(report: Report): string {
 					}
 					
 					td.source {
+						color: grey;
 						white-space: nowrap;
 					}
 
@@ -231,21 +274,28 @@ export function htmlDump(report: Report): string {
 
 						var select = document.getElementById('log-level-select');
 
-						select.value = 'info';
+						select.value = 'debug';
 
 						select.onchange = function() {
 							switch(select.value) {
-								case 'info':
+								case 'debug':
 									style.innerHTML = '';
 									break;
 
+								case 'info':
+									style.innerHTML = 
+										'tr.debug {display: none;}';
+									break;
+
 								case 'warn':
 									style.innerHTML = 
+										'tr.debug {display: none;}' +
 										'tr.info {display: none;}';
 									break;
 
 								case 'error':
 									style.innerHTML = 
+										'tr.debug {display: none;}' +
 										'tr.info {display: none;} ' +
 										'tr.warn {display: none;}';
 									break;
@@ -258,6 +308,7 @@ export function htmlDump(report: Report): string {
 				<div id='log-level-selector'>
 					Log level filter: 
 					<select id='log-level-select'>
+						<option>debug</option>
 						<option>info</option>
 						<option>warn</option>
 						<option>error</option>
@@ -269,6 +320,7 @@ export function htmlDump(report: Report): string {
 				${warnings}
 				${projectInfo}
 				${versionsInfo}
+				${webpack}
 				${rulesExecution}
 			</body>
 		</html>

packages/liferay-npm-bundler/src/report/index.ts

@@ -8,32 +8,13 @@ import PluginLogger from 'liferay-npm-build-tools-common/lib/plugin-logger';
 import {VersionInfo} from 'liferay-npm-build-tools-common/lib/project/types';
 
 import {htmlDump} from './html';
+import ReportLogger from './logger';
 
 /**
  * A Report holds data describing a execution of the liferay-npm-bundler so that
  * it can be dump as an HTML report.
  */
 export class Report {
-	_executionDate: Date;
-	_executionTime: number[];
-	_versionsInfo: {
-		[key: string]: VersionInfo;
-	};
-	_rootPkg: {
-		id: string;
-		name: string;
-		version: string;
-	};
-	_rules: {
-		config: object;
-		files: {
-			[prjRelPath: string]: {
-				logger: PluginLogger;
-			};
-		};
-	};
-	_warnings: string[];
-
 	constructor() {
 		this._executionDate = new Date();
 		this._executionTime = undefined;
@@ -45,6 +26,9 @@ export class Report {
 		};
 
 		this._warnings = [];
+		this._webpack = {
+			logs: {},
+		};
 	}
 
 	/**
@@ -122,6 +106,45 @@ export class Report {
 	rulesRun(prjRelPath: string, logger: PluginLogger): void {
 		this._rules.files[prjRelPath] = {logger};
 	}
+
+	getWebpackLogger(source: string, prjRelPath: string): ReportLogger {
+		if (this._webpack.logs[prjRelPath] === undefined) {
+			this._webpack.logs[prjRelPath] = {};
+		}
+
+		if (this._webpack.logs[prjRelPath][source] === undefined) {
+			this._webpack.logs[prjRelPath][source] = new ReportLogger();
+		}
+
+		return this._webpack.logs[prjRelPath][source];
+	}
+
+	readonly _executionDate: Date;
+	_executionTime: number[];
+	_versionsInfo: {
+		[key: string]: VersionInfo;
+	};
+	_rootPkg: {
+		id: string;
+		name: string;
+		version: string;
+	};
+	readonly _rules: {
+		config: object;
+		files: {
+			[prjRelPath: string]: {
+				logger: PluginLogger;
+			};
+		};
+	};
+	readonly _warnings: string[];
+	readonly _webpack: {
+		logs: {
+			[prjRelPath: string]: {
+				[source: string]: ReportLogger;
+			};
+		};
+	};
 }
 
 const report = new Report();