rebuiltron 6.0.2 → 6.1.0

package/configurations/base.js

@@ -1,11 +1,11 @@
 const { createHash } = require("crypto");
 
 const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
 const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
-const paths = require("../helpers/paths");
 const { isEnvDevelopment, isEnvProduction } = require("../helpers/environment");
+const paths = require("../helpers/paths");
 const { emptyOr } = require("../helpers/utils");
 
 

package/configurations/main.js

@@ -1,7 +1,8 @@
 const paths = require("../helpers/paths");
+const javascriptLoaders = require("../loaders/javascript");
 const rebuiltronConfig = require("../rebuiltronConfig");
+
 const baseConfig = require("./base");
-const javascriptLoaders = require("../loaders/javascript");
 
 
 const { main } = require(paths.appConfig);

package/configurations/preloads.js

@@ -1,9 +1,10 @@
 const { mapKeys } = require("lodash");
 
 const paths = require("../helpers/paths");
+const javascriptLoaders = require("../loaders/javascript");
 const rebuiltronConfig = require("../rebuiltronConfig");
+
 const baseConfig = require("./base");
-const javascriptLoaders = require("../loaders/javascript");
 
 
 const { preloads } = require(paths.appConfig);

package/configurations/renderers.js

@@ -1,21 +1,22 @@
 const path = require("path");
 
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CopyPlugin = require("copy-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { keys } = require("lodash");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
 
-const paths = require("../helpers/paths");
 const { isEnvProduction, isEnvDevelopment, shouldUseSourceMap } = require("../helpers/environment");
+const paths = require("../helpers/paths");
 const { emptyOr } = require("../helpers/utils");
-const rebuiltronConfig = require("../rebuiltronConfig");
-const baseConfig = require("./base");
 const imageLoaders = require("../loaders/images");
-const styleLoaders = require("../loaders/style");
 const javascriptLoaders = require("../loaders/javascript");
+const styleLoaders = require("../loaders/style");
+const rebuiltronConfig = require("../rebuiltronConfig");
+
+const baseConfig = require("./base");
 
 
 const { renderers } = require(paths.appConfig);

package/eslint.config.js

@@ -0,0 +1,9 @@
+const arklintConfig = require("eslint-config-arklint");
+const { importConfig, jsdocConfig } = require("eslint-config-arklint/extensions");
+
+
+module.exports = [
+	...arklintConfig,
+	...importConfig,
+	...jsdocConfig
+];

package/helpers/constants.js

@@ -0,0 +1,16 @@
+const COMPILATION_ASSETS = Object.freeze({
+	PRELOAD: "Preload",
+	MAIN: "Main",
+	RENDERER: "Renderer"
+});
+
+const COMPILATION_STATES = Object.freeze({
+	PENDING: "pending",
+	FATAL_ERROR: "fatalError",
+	ERROR: "error",
+	WARNING: "warning",
+	SUCCESS: "success"
+});
+
+
+module.exports = { COMPILATION_ASSETS, COMPILATION_STATES };

package/helpers/paths.js

@@ -1,4 +1,5 @@
 const rebuiltronConfig = require("../rebuiltronConfig.js");
+
 const { isEnvDevelopment } = require("./environment.js");
 const { resolveApp } = require("./utils.js");
 

package/helpers/utils.js

@@ -1,14 +1,25 @@
-const path = require("path");
+/* eslint-disable jsdoc/valid-types, jsdoc/match-description */
+
 const fs = require("fs");
+const path = require("path");
 
+const { bold, red, green, yellow } = require("chalk");
 const { isArray } = require("lodash");
 
-const log = require("./logger");
+const { COMPILATION_STATES } = require("./constants");
 const spinnies = require("./spinnies");
 
 
-const _appDirectory = fs.realpathSync(process.cwd());
+/**
+ * @import { Stats } from "webpack"
+ * @import { COMPILATION_ASSETS } from "./constants"
+ */
+
+/**
+ * Path of the app directory.
+ */
 
+const _appDirectory = fs.realpathSync(process.cwd());
 
 /**
  * Resolves a path relative to the app directory.
@@ -19,15 +30,15 @@ const _appDirectory = fs.realpathSync(process.cwd());
 const resolveApp = (relativePath) => path.resolve(_appDirectory, relativePath);
 
 /**
- * Logs error message and stack (if available) and exit the running process.
- * @param {(Error|import("./logger").LogMessage)} error - Error to log
+ * Logs error message (if provided) and exits the running process.
+ * @param {Error} [error] - Error to log
  */
 
 const exitProcessWithError = (error) => {
 	spinnies.stopAll("fail");
 
-	log.error(error?.message || error);
-	if (error.stack) log.info(error.stack);
+	if (!error) return;
+	console.log(red(`\n${error?.message || error}\n`));
 
 	process.exit(1);
 };
@@ -35,8 +46,8 @@ const exitProcessWithError = (error) => {
 /**
  * Returns the given value when the condition is truthy, otherwise an empty element of the same type.
  * @param {any} condition - Condition determining if the value should be returned
- * @param {(object|Array)} value - Value to return
- * @returns {(object|Array)} Value or empty element
+ * @param {(object | Array)} value - Value to return
+ * @returns {(object | Array)} Value or empty element
  */
 
 const emptyOr = (condition, value) => {
@@ -44,5 +55,70 @@ const emptyOr = (condition, value) => {
 	return condition ? value : empty;
 };
 
+/**
+ * Clears the console.
+ */
+
+const clearConsole = () => {
+	process.stdout.write(
+		process.platform === "win32" ? "\x1B[2J\x1B[0f" : "\x1B[2J\x1B[3J\x1B[H"
+	);
+};
+
+/**
+ * Logs stats.
+ * @param {Stats} stats - Stats to log
+ */
+
+const logStats = (stats) => {
+	console.log();
+
+	console.log(stats.toString({
+		colors: true,
+		all: false,
+		warnings: true,
+		errors: true,
+		errorDetails: false
+	}));
+};
+
+/**
+ * @typedef CompilationData
+ * @property {COMPILATION_ASSETS[keyof COMPILATION_ASSETS]} [asset] - Type of the compiled asset
+ * @property {COMPILATION_STATES[keyof COMPILATION_STATES]} state - Compilation state
+ * @property {Stats} [stats] - Compilation stats
+ */
+
+/**
+ * Constructs the text to display for the given compilation state.
+ * @param {CompilationData} data - Compilation data
+ * @returns {string} Compilation text
+ */
+
+const getCompilationText = ({ asset, state, stats }) => {
+	let prefix = asset ? bold(`${asset}: `) : "";
+
+	if (state === COMPILATION_STATES.PENDING) return prefix + `${asset ? "c" : "C"}ompiling...`;
+	if (state === COMPILATION_STATES.FATAL_ERROR) return prefix + bold(`${asset ? "f" : "F"}ailed`) + " to compile";
+
+	prefix += `${asset ? "c" : "C"}ompiled `;
+
+	if (state === COMPILATION_STATES.SUCCESS) return prefix + green(bold("successfully"));
+
+	const isError = state === COMPILATION_STATES.ERROR;
+
+	const count = stats.toJson()[isError ? "errorsCount" : "warningsCount"];
+	const color = isError ? red : yellow;
+
+	return prefix + "with " + bold(color(`${count} ${state}${count > 1 ? "s" : ""}`));
+};
+
 
-module.exports = { resolveApp, exitProcessWithError, emptyOr };
+module.exports = {
+	resolveApp,
+	exitProcessWithError,
+	emptyOr,
+	logStats,
+	clearConsole,
+	getCompilationText
+};

package/loaders/javascript.js

@@ -1,5 +1,7 @@
-const paths = require("../helpers/paths");
+const path = require("path");
+
 const { shouldUseSourceMap, isEnvProduction } = require("../helpers/environment");
+const paths = require("../helpers/paths");
 
 
 module.exports = [
@@ -10,6 +12,16 @@ module.exports = [
 			loader: require.resolve("swc-loader"),
 			options: {
 				jsc: {
+					experimental: {
+						plugins: [
+							["@swc/plugin-transform-imports", {
+								lodash: {
+									transform: "lodash/{{member}}"
+								}
+							}]
+						],
+						cacheRoot: path.join(paths.appWebpackCache, "swc")
+					},
 					parser: {
 						syntax: "ecmascript",
 						jsx: true,

package/loaders/style.js

@@ -2,8 +2,8 @@ const path = require("path");
 
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const paths = require("../helpers/paths");
 const { shouldUseSourceMap, isEnvDevelopment, isEnvProduction } = require("../helpers/environment");
+const paths = require("../helpers/paths");
 const { emptyOr } = require("../helpers/utils");
 const rebuiltronConfig = require("../rebuiltronConfig");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebuiltron",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "author": "Arkellys",
   "license": "MIT",
   "bin": {
@@ -10,38 +10,39 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
-    "eslint-config-arklint": "^1.11.0"
+    "eslint": "^9.14.0",
+    "eslint-config-arklint": "^3.3.0"
   },
   "dependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@svgr/webpack": "^8.1.0",
-    "@swc/core": "^1.7.26",
-    "browserslist": "^4.23.3",
+    "@swc/core": "^1.7.42",
+    "@swc/plugin-transform-imports": "^4.0.0",
+    "browserslist": "^4.24.2",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "detect-port": "^1.6.1",
     "fs-extra": "^11.2.0",
-    "html-webpack-plugin": "^5.6.0",
+    "html-webpack-plugin": "^5.6.3",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.9.1",
+    "mini-css-extract-plugin": "^2.9.2",
     "postcss": "^8.4.47",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^8.1.1",
-    "postcss-normalize": "^13.0.0",
-    "postcss-preset-env": "^10.0.3",
+    "postcss-normalize": "^13.0.1",
+    "postcss-preset-env": "^10.0.9",
     "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.14.2",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^16.0.1",
+    "sass-loader": "^16.0.3",
     "source-map-loader": "^5.0.0",
     "spinnies": "^0.5.1",
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
-    "webpack": "^5.94.0",
+    "webpack": "^5.96.1",
     "webpack-dev-server": "^5.1.0"
   },
   "peerDependencies": {

package/scripts/build.js

@@ -2,12 +2,13 @@ process.env.BABEL_ENV = "production";
 process.env.NODE_ENV = "production";
 
 
+const fsExtra = require("fs-extra");
 const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = require("react-dev-utils/FileSizeReporter");
 
-const buildApp = require("../tasks/buildApp");
-const checkSetup = require("../tasks/checkSetup");
 const paths = require("../helpers/paths");
 const { exitProcessWithError } = require("../helpers/utils");
+const buildApp = require("../tasks/buildApp");
+const checkSetup = require("../tasks/checkSetup");
 
 
 process.on("unhandledRejection", exitProcessWithError);
@@ -16,8 +17,13 @@ const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 
 checkSetup
-	.then(() => measureFileSizesBeforeBuild(paths.appBuild))
-	.then((previousFileSizes) => buildApp(previousFileSizes))
+	.then(() => (
+		measureFileSizesBeforeBuild(paths.appBuild)
+	))
+	.then((previousFileSizes) => {
+		fsExtra.emptyDirSync(paths.appBuild);
+		return buildApp(previousFileSizes);
+	})
 	.then(({ stats, previousFileSizes }) => {
 		console.log("\nFile sizes after gzip:\n");
 

package/scripts/start.js

@@ -2,14 +2,12 @@ process.env.BABEL_ENV = "development";
 process.env.NODE_ENV = "development";
 
 
-const clearConsole = require("react-dev-utils/clearConsole");
-
+const { exitProcessWithError, clearConsole } = require("../helpers/utils");
 const checkSetup = require("../tasks/checkSetup");
-const startDevServer = require("../tasks/startDevServer");
 const compileMain = require("../tasks/compileMain");
-const watchPreloads = require("../tasks/watchPreloads");
+const startDevServer = require("../tasks/startDevServer");
 const startElectron = require("../tasks/startElectron");
-const { exitProcessWithError } = require("../helpers/utils");
+const watchPreloads = require("../tasks/watchPreloads");
 
 
 process.on("unhandledRejection", exitProcessWithError);

package/tasks/buildApp.js

@@ -1,13 +1,9 @@
-const fsExtra = require("fs-extra");
 const webpack = require("webpack");
-const clearConsole = require("react-dev-utils/clearConsole");
-const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
-const { bold, green, yellow } = require("chalk");
 
-const paths = require("../helpers/paths");
-const webpackConfig = require("../webpack.config");
+const { COMPILATION_STATES } = require("../helpers/constants");
 const spinnies = require("../helpers/spinnies");
-const log = require("../helpers/logger");
+const { logStats, getCompilationText, clearConsole } = require("../helpers/utils");
+const webpackConfig = require("../webpack.config");
 
 
 /**
@@ -16,50 +12,50 @@ const log = require("../helpers/logger");
  * @returns {Promise<{ stats: webpack.Stats | undefined, previousFileSizes: any }>} Result of the build
  */
 
-module.exports = (previousFileSizes) => {
-	fsExtra.emptyDirSync(paths.appBuild);
-	const compiler = webpack(webpackConfig.production);
+module.exports = (previousFileSizes) => new Promise((resolve, reject) => {
+	clearConsole();
+	spinnies.add("build", { text: "Creating the production build" });
 
-	return new Promise((resolve, reject) => {
+	webpack(webpackConfig.production, (error, stats) => {
 		clearConsole();
-		spinnies.add("build", { text: "Creating the production build" });
-
-		compiler.run((error, stats) => {
-			if (!error) {
-				return resolve({
-					stats,
-					previousFileSizes
-				});
-			}
 
+		if (error || stats.hasErrors()) {
 			spinnies.fail("build", {
-				text: "Failed to compile"
+				text: getCompilationText({
+					state: COMPILATION_STATES.FATAL_ERROR
+				})
 			});
 
-			reject(error);
-		});
-
-		compiler.hooks.done.tap("done", (stats) => {
-			clearConsole();
-
-			const statsData = stats.toJson({ all: false, warnings: true, errors: true });
-			const { errors, warnings } = formatWebpackMessages(statsData);
+			if (stats) logStats(stats);
+			return reject(error);
+		}
+
+		if (stats.hasWarnings()) {
+			spinnies.update("build", {
+				text: getCompilationText({
+					state: COMPILATION_STATES.WARNING
+				}),
+				status: "stopped",
+				color: "white"
+			});
 
-			if (stats.hasErrors()) throw new Error(errors);
+			logStats(stats);
 
-			if (stats.hasWarnings()) {
-				spinnies.update("build", {
-					text: `Compiled ${yellow(bold("with warnings"))}`,
-					status: "stopped",
-					color: "white"
-				});
+			return resolve({
+				stats,
+				previousFileSizes
+			});
+		}
 
-				return log.warning(warnings.join("\n\n"));
-			}
+		spinnies.succeed("build", {
+			text: getCompilationText({
+				state: COMPILATION_STATES.SUCCESS
+			})
+		});
 
-			spinnies.succeed("build", {
-				text: `Compiled ${green(bold("successfully"))}`
-			});
+		return resolve({
+			stats,
+			previousFileSizes
 		});
 	});
-};
+});

package/tasks/checkSetup.js

@@ -3,8 +3,9 @@ const fs = require("fs");
 const detect = require("detect-port");
 
 const { isEnvProduction } = require("../helpers/environment");
-const rebuiltronConfig = require("../rebuiltronConfig");
 const { resolveApp } = require("../helpers/utils");
+const rebuiltronConfig = require("../rebuiltronConfig");
+
 
 /**
  * @type {Promise<number>}

package/tasks/compileMain.js

@@ -1,9 +1,9 @@
 const webpack = require("webpack");
-const { bold, green } = require("chalk");
-const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
 
-const webpackConfig = require("../webpack.config");
+const { COMPILATION_ASSETS, COMPILATION_STATES } = require("../helpers/constants");
 const spinnies = require("../helpers/spinnies");
+const { getCompilationText, logStats } = require("../helpers/utils");
+const webpackConfig = require("../webpack.config");
 
 
 /**
@@ -11,31 +11,51 @@ const spinnies = require("../helpers/spinnies");
  * @returns {Promise<void>} Promise resolving when compilation is successful
  */
 
-module.exports = () => {
-	const mainCompiler = webpack(webpackConfig.development.main);
-
-	return new Promise((resolve, reject) => {
-		spinnies.add("compile-main", { text: "Compiling main file..." });
+module.exports = () => new Promise((resolve, reject) => {
+	const asset = COMPILATION_ASSETS.MAIN;
 
-		mainCompiler.run((error) => {
-			if (!error) return resolve();
+	spinnies.add("compile-main", {
+		text: getCompilationText({
+			asset,
+			state: COMPILATION_STATES.PENDING
+		})
+	});
 
+	webpack(webpackConfig.development.main, (error, stats) => {
+		if (error || stats.hasErrors()) {
 			spinnies.fail("compile-main", {
-				text: "Failed to compile main file"
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.FATAL_ERROR
+				})
 			});
 
-			reject(error);
-		});
-
-		mainCompiler.hooks.done.tap("done", (stats) => {
-			const statsData = stats.toJson({ all: false, warnings: true, errors: true });
-			const { errors } = formatWebpackMessages(statsData);
+			if (stats) logStats(stats);
+			return reject(error);
+		}
+
+		if (stats.hasWarnings()) {
+			spinnies.update("compile-main", {
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.WARNING,
+					stats
+				}),
+				status: "stopped",
+				color: "white"
+			});
 
-			if (stats.hasErrors()) throw new Error(errors);
+			logStats(stats);
+			return resolve();
+		}
 
-			spinnies.succeed("compile-main", {
-				text: `Main file compiled ${green(bold("successfully"))}`
-			});
+		spinnies.succeed("compile-main", {
+			text: getCompilationText({
+				asset,
+				state: COMPILATION_STATES.SUCCESS
+			})
 		});
+
+		return resolve();
 	});
-};
+});

package/tasks/startDevServer.js

@@ -1,11 +1,13 @@
+const { bold } = require("chalk");
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");
-const clearConsole = require("react-dev-utils/clearConsole");
-const { bold } = require("chalk");
 
+const { COMPILATION_ASSETS, COMPILATION_STATES } = require("../helpers/constants");
+const spinnies = require("../helpers/spinnies");
+const { getCompilationText, logStats, clearConsole } = require("../helpers/utils");
 const webpackConfig = require("../webpack.config");
 const devServerConfig = require("../webpackDevServer.config");
-const spinnies = require("../helpers/spinnies");
+
 
 /**
  * Starts the development server.
@@ -18,28 +20,66 @@ module.exports = (port) => (
 		let devServer;
 		let isFirstRun = true;
 
-		const rendererCompiler = webpack(webpackConfig.development.renderers);
+		const asset = COMPILATION_ASSETS.RENDERER;
+		const compiler = webpack(webpackConfig.development.renderers);
 
 		spinnies.add("devServer", { text: "Starting the development server" });
 
-		rendererCompiler.hooks.invalid.tap("invalid", () => {
-			clearConsole();
-			spinnies.add("compile", { text: "Compiling..." });
+		compiler.hooks.compile.tap("compile", () => {
+			if (!isFirstRun) clearConsole();
+
+			spinnies.add("compile", {
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.PENDING
+				})
+			});
 		});
 
-		rendererCompiler.hooks.done.tap("done", () => {
+		compiler.hooks.done.tap("done", (stats) => {
 			if (isFirstRun) {
 				isFirstRun = false;
 
 				spinnies.succeed("devServer", { text: `Development server running on port ${bold(port)}` });
-				return resolve(devServer);
+				resolve(devServer);
+			}
+
+			if (stats.hasErrors()) {
+				spinnies.fail("compile", {
+					text: getCompilationText({
+						asset,
+						state: COMPILATION_STATES.ERROR,
+						stats
+					}),
+					failColor: "white"
+				});
+
+				return logStats(stats);
+			}
+
+			if (stats.hasWarnings()) {
+				spinnies.update("compile", {
+					text: getCompilationText({
+						asset,
+						state: COMPILATION_STATES.WARNING,
+						stats
+					}),
+					status: "stopped",
+					color: "white"
+				});
+
+				return logStats(stats);
 			}
 
-			clearConsole();
-			spinnies.remove("compile");
+			spinnies.succeed("compile", {
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.SUCCESS
+				})
+			});
 		});
 
-		devServer = new WebpackDevServer({ ...devServerConfig, port }, rendererCompiler);
+		devServer = new WebpackDevServer({ ...devServerConfig, port }, compiler);
 		await devServer.start();
 	})
 );

package/tasks/startElectron.js

@@ -1,6 +1,8 @@
 const { spawn } = require("child_process");
-const path = require("path");
 const fs = require("fs");
+const path = require("path");
+
+const { bold } = require("chalk");
 
 const spinnies = require("../helpers/spinnies");
 
@@ -13,7 +15,7 @@ const spinnies = require("../helpers/spinnies");
 
 module.exports = (port) => (
 	new Promise((resolve, reject) => {
-		spinnies.add("electron", { text: "Starting Electron" });
+		spinnies.add("electron", { text: `Starting ${bold("Electron")}` });
 
 		try {
 			const electronPath = require.resolve("electron");
@@ -30,11 +32,11 @@ module.exports = (port) => (
 				}
 			}).on("close", process.exit);
 
-			spinnies.succeed("electron", { text: "Electron started" });
+			spinnies.succeed("electron", { text: `${bold("Electron")} started` });
 			resolve();
 
 		} catch (error) {
-			spinnies.fail("electron", { text: "Failed to start Electron" });
+			spinnies.fail("electron", { text: `${bold("Failed")} to start Electron` });
 			reject(error);
 		}
 	})

package/tasks/watchPreloads.js

@@ -1,11 +1,9 @@
 const webpack = require("webpack");
-const { red, bold, green, yellow } = require("chalk");
-const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
-const clearConsole = require("react-dev-utils/clearConsole");
 
-const webpackConfig = require("../webpack.config");
+const { COMPILATION_ASSETS, COMPILATION_STATES } = require("../helpers/constants");
 const spinnies = require("../helpers/spinnies");
-const log = require("../helpers/logger");
+const { logStats, getCompilationText, clearConsole } = require("../helpers/utils");
+const webpackConfig = require("../webpack.config");
 
 
 /**
@@ -13,61 +11,72 @@ const log = require("../helpers/logger");
  * @returns {Promise<void>} Promise resolving when compilation is successful
  */
 
-module.exports = () => {
-	const preloadCompiler = webpack(webpackConfig.development.preloads);
+module.exports = () => new Promise((resolve, reject) => {
+	let isFirstWatch = true;
 
-	return new Promise((resolve, reject) => {
-		let isFirstWatch = true;
+	const asset = COMPILATION_ASSETS.PRELOAD;
+	const compiler = webpack(webpackConfig.development.preloads);
 
-		preloadCompiler.watch({}, (error) => {
-			if (!isFirstWatch) return;
-			isFirstWatch = false;
+	compiler.hooks.compile.tap("compile", () => {
+		if (!isFirstWatch) clearConsole();
 
-			if (!error) return resolve();
+		spinnies.add("watch", {
+			text: getCompilationText({
+				asset,
+				state: COMPILATION_STATES.PENDING
+			})
+		});
+	});
 
+	compiler.watch({}, (error, stats) => {
+		if (error) {
 			spinnies.fail("watch", {
-				text: "Failed to compile preload file(s)"
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.FATAL_ERROR
+				})
 			});
 
-			reject(error);
-		});
+			return reject(error);
+		}
 
-		preloadCompiler.hooks.compile.tap("compile", () => {
-			if (!isFirstWatch) clearConsole();
+		if (isFirstWatch) {
+			isFirstWatch = false;
+			resolve();
+		}
 
-			spinnies.add("watch", {
-				text: "Compiling preload file(s)..."
+		if (stats.hasErrors()) {
+			spinnies.fail("watch", {
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.ERROR,
+					stats
+				}),
+				failColor: "white"
 			});
-		});
-
-		preloadCompiler.hooks.done.tap("done", (stats) => {
-			const statsData = stats.toJson({ all: false, warnings: true, errors: true });
-			const { errors, warnings } = formatWebpackMessages(statsData);
-
-			if (stats.hasErrors()) {
-				if (isFirstWatch) throw new Error(errors); // Stops the process
-
-				spinnies.fail("watch", {
-					text: `Preload file(s) compiled ${red(bold("with errors"))}`,
-					failColor: "white"
-				});
 
-				return log.error(errors.join("\n\n"));
-			}
-
-			if (stats.hasWarnings()) {
-				spinnies.update("watch", {
-					text: `Preload file(s) compiled ${yellow(bold("with warnings"))}`,
-					status: "stopped",
-					color: "white"
-				});
+			return logStats(stats);
+		}
+
+		if (stats.hasWarnings()) {
+			spinnies.update("watch", {
+				text: getCompilationText({
+					asset,
+					state: COMPILATION_STATES.WARNING,
+					stats
+				}),
+				status: "stopped",
+				color: "white"
+			});
 
-				return log.warning(warnings.join("\n\n"));
-			}
+			return logStats(stats);
+		}
 
-			spinnies.succeed("watch", {
-				text: `Preload file(s) compiled ${green(bold("successfully"))}`
-			});
+		spinnies.succeed("watch", {
+			text: getCompilationText({
+				asset,
+				state: COMPILATION_STATES.SUCCESS
+			})
 		});
 	});
-};
+});

package/webpack.config.js

@@ -1,6 +1,6 @@
-const rendererConfig = require("./configurations/renderers");
-const preloadConfig = require("./configurations/preloads");
 const mainConfig = require("./configurations/main");
+const preloadConfig = require("./configurations/preloads");
+const rendererConfig = require("./configurations/renderers");
 
 
 module.exports = {

package/webpackDevServer.config.js

@@ -15,11 +15,15 @@ module.exports = {
 		}
 	},
 	client: {
+		progress: true,
 		overlay: {
 			errors: true,
 			warnings: false
 		}
 	},
+	devMiddleware: {
+		stats: "none" // Already handled manually
+	},
 	historyApiFallback: {
 		disableDotRule: true, // Supports route with dots
 		index: paths.basePath

package/helpers/logger.js

@@ -1,55 +0,0 @@
-const { red, green, yellow, black } = require("chalk");
-const { isString } = require("lodash");
-
-
-/**
- * @typedef {(string|string[])} LogMessage
- */
-
-/**
- * Formats a message into a single string.
- * @param {LogMessage} message - Message to format
- * @returns {string} Formatted message
- */
-
-const _formatMessage = (message) => {
-	if (isString(message)) return message;
-	return message.join("\n");
-};
-
-
-/**
- * Logs a message in red.
- * @param {LogMessage} message - Message to log
- */
-
-const logError = (message) => console.log(red(`\n${_formatMessage(message)}\n`));
-
-/**
- * Logs a message in green.
- * @param {LogMessage} message - Message to log
- */
-
-const logSuccess = (message) => console.log(green(`\n${_formatMessage(message)}\n`));
-
-/**
- * Logs a message in yellow.
- * @param {LogMessage} message - Message to log
- */
-
-const logWarning = (message) => console.log(yellow(`\n${_formatMessage(message)}\n`));
-
-/**
- * Logs a message in black.
- * @param {string} message - Message to log
- */
-
-const logInfo = (message) => console.log(black(`${message}\n`));
-
-
-module.exports = {
-	error: logError,
-	success: logSuccess,
-	warning: logWarning,
-	info: logInfo
-};