rebuiltron 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Arkellys
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# Rebuiltron
+
+A tool made to easily build an offline **React/Electron** app using webpack.
+
+---
+
+## Why
+
+The idea behind Rebuiltron was to migrate one of my project initially created with the deprecated [CRA](https://create-react-app.dev/) to a maintained tool configured with Electron in mind. As such, it has been developed using [react-scripts](https://github.com/facebook/create-react-app/tree/main/packages/react-scripts) as a base, but heavily edited and stripped of a lot of features.
+
+> [!IMPORTANT]
+> Since I made Rebuiltron specifically for one of my own projects, I only kept in the configuration what *this* project needed and nothing more. Except for the entry points and some SASS options, **Rebuiltron doesn't offer any configurable options**. If you are looking to create a new Electron/React app, or even migrating an existing CRA app, you should probably take a look at [electron-vite](https://electron-vite.org/) instead.
+
+
+## Features
+
+Rebuiltron uses webpack with [SWC](https://swc.rs/) to compile JavaScript instead of [Babel](https://babeljs.io/).
+
+- Support for multiple windows and preloads
+- Development server taking care of starting Electron
+- Production bundler for React and Electron code
+- Support for React, JSX, SASS, ICSS
+
+> [!WARNING]
+> Rebuiltron **doesn't support**: Typescript, Flow, CSS Modules, Jest, and proxying.
+
+
+## Installation
+
+```shell
+yarn add rebuiltron -D
+```
+
+[**React**](https://react.dev/) and [**Electron**](https://www.electronjs.org/) are required dependencies you must install separately.
+
+## Configuration
+
+The following documentation assume you already have a basic knowledge of how to use React and Electron.
+
+### Folder structure
+
+Rebuiltron expects the following folder structure:
+
+```js
+my-app
+├── electron/
+│   └── // Main and preload files
+├── public/
+│   └── // Renderer HTML file(s)
+├── src/
+│   └── // Renderer JS file(s)
+└── package.json
+```
+
+### Main entry
+Set the main Electron entry in `package.json`:
+
+```json
+{
+  "main": "electron/main.js",
+}
+```
+
+### Scripts
+Add Rebuiltron scripts:
+
+```json
+{
+  "start": "rebuiltron start",
+  "build": "rebuiltron build",
+}
+```
+
+The `build` command will bundle your code so it's ready for production, but **it will not package it into a working app**. For this task, you need to use a tool such as [Electron Forge](https://www.electronforge.io/) or [electron-builder](https://www.electron.build/index.html).
+
+### Browserslist
+
+Add your desired [browserslist](https://github.com/browserslist/browserslist) in `package.json`:
+
+```json
+{
+  "browserslist": "last 2 electron major versions",
+}
+```
+
+### Configuration file
+
+At the root of your project, create a `rebuiltron.config.js` file.
+
+#### Options:
+
+| Option | Type | Required | Description |
+| --- | :---: | :---: | --- |
+| `renderers` | `object` | ✔️ | Renderer entries. It takes the name of the entries as keys and their paths as values. |
+| `preloads` | `object` | ✔️ | Preload entries. It takes the name of the entries as keys and their paths as values. |
+| `sassOptions` | `object` | ❌ | Custom SASS options for `sass-loader`. |
+| `sassOptions.additionalData` | `object` | ❌ | Configuration of `additionalData`. |
+| `sassOptions.additionalData.data` | `string` | ❌ | Data to prepend to SASS files. |
+| `sassOptions.additionalData.exclude` | `Regex` | ❌ | Regex matching the files to exclude from `additionalData`. This is necessary to prevent an `@import loop` error. |
+
+#### Example:
+
+```js
+module.exports = {
+  renderers: {
+    index: "./src/index.js",
+    worker: "./src/worker.js"
+  },
+  preloads: {
+    worker: "./electron/preloads/worker.js"
+  },
+  sassOptions: {
+    additionalData: {
+      data: "@use \"styles/settings\" as *;",
+      exclude: /^src\\styles\\.*/
+    }
+  }
+};
+```
+
+> [!NOTE]
+> Your renderers entry file(s) will be automatically injected into your HTML file(s). Thus, make sure you have a corresponding HTML file in the `public` folder for each entry (using the same name).
+
+### Environment variables
+
+When the development server is running, Rebuiltron exposes a `DEV_LOCAL_URL` variable that you can access on your main process using `process.env.DEV_LOCAL_URL`.
+
+```js
+if(!app.isPackaged) {
+  appWindow.loadURL(`${process.env.DEV_LOCAL_URL}/index.html`);
+}
+```
+
+## Usage
+
+To run the development server:
+
+```shell
+yarn start
+```
+
+To create the production build:
+
+```shell
+yarn build
+```
+
+## Contributing and feature requests
+
+I made Rebuiltron specifically for a project of mine, and for that reason, **I have no plans to add new features nor to accept contributions**, unless required for this project in particular. If you wish to use Rebuiltron but need something that is not available in the current configuration, please feel free to create a fork and change the code to your needs.
+
+## License
+MIT

package/bin/index.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+const { exitProcessWithError } = require("../helpers/utils.js");
+
+
+const args = process.argv.slice(2);
+const [script] = args;
+
+const scripts = {
+	start: () => require("../scripts/start.js"),
+	build: () => require("../scripts/build.js")
+};
+
+scripts[script]?.() || exitProcessWithError(`Unknown command: \`${script}\``);

package/buildApp.js

@@ -0,0 +1,33 @@
+const fsExtra = require("fs-extra");
+const clearConsole = require("react-dev-utils/clearConsole");
+const webpack = require("webpack");
+const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
+const { isEmpty, head } = require("lodash");
+
+const paths = require("./helpers/paths");
+const webpackConfig = require("./webpack.config");
+const spinnies = require("./helpers/spinnies");
+
+
+module.exports = (previousFileSizes) => {
+	fsExtra.emptyDirSync(paths.appBuild);
+
+	clearConsole();
+	spinnies.add("build", { text: "Creating production build" });
+
+	const compiler = webpack(webpackConfig);
+
+	return new Promise((resolve, reject) => {
+		compiler.run((error, stats) => {
+			const statsData = error
+				? { errors: [error?.message || error], warnings: [] }
+				: stats.toJson({ all: false, warnings: true, errors: true });
+
+			const { errors, warnings } = formatWebpackMessages(statsData);
+
+			return !isEmpty(errors)
+				? reject(["Failed to compile.\n", head(errors)])
+				: resolve({ stats, previousFileSizes, warnings });
+		});
+	});
+};

package/checkSetup.js

@@ -0,0 +1,63 @@
+const fs = require("fs");
+
+const detect = require("detect-port");
+
+const { isEnvProduction } = require("./helpers/environment");
+const rebuiltronConfig = require("./rebuiltronConfig");
+const { resolveApp } = require("./helpers/utils");
+
+/**
+ * Checks whether the default port is available, otherwise resolves with the next available port.
+ */
+
+const checkPort = new Promise(async (resolve) => {
+	if (isEnvProduction) resolve();
+
+	const defaultPort = 3000;
+	const nextAvailablePort = await detect(defaultPort);
+
+	resolve(nextAvailablePort);
+});
+
+/**
+ * Checks whether Electron's entry point is set.
+ */
+
+const checkEntryPoint = new Promise((resolve, reject) => {
+	const packageJsonPath = resolveApp("package.json");
+	const { main } = require(packageJsonPath);
+
+	if (!main) {
+		reject([
+			"No entry point found for Electron.",
+			"Please add a `main` field in `package.json`."
+		]);
+	}
+
+	resolve();
+});
+
+/**
+ * Checks whether Rebuiltron's config file exists and contains the required fields.
+ */
+
+const checkAppConfig = new Promise((resolve, reject) => {
+	const configPath = resolveApp(rebuiltronConfig.configFileName);
+
+	if (!fs.existsSync(configPath)) {
+		reject([
+			"Not configuration file found.",
+			`Please create a \`${rebuiltronConfig.configFileName}\` file.`
+		]);
+	}
+
+	const { preloads, renderers } = require(configPath);
+
+	if (!preloads) reject("Configuration error: `preloads` field is required.");
+	if (!renderers) reject("Configuration error: `renderers` field is required.");
+
+	resolve();
+});
+
+
+module.exports = Promise.all([checkPort, checkEntryPoint, checkAppConfig]);

package/configurations/base.js

@@ -0,0 +1,121 @@
+const { createHash } = require("crypto");
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+
+const paths = require("../helpers/paths");
+const { shouldUseSourceMap, isEnvDevelopment, isEnvProduction } = require("../helpers/environment");
+const { emptyOr } = require("../helpers/utils");
+const imageLoaders = require("../loaders/images");
+const styleLoaders = require("../loaders/style");
+const javascriptLoaders = require("../loaders/javascript");
+const rebuiltronConfig = require("../rebuiltronConfig");
+
+
+module.exports = {
+	stats: "errors-warnings",
+	bail: isEnvProduction,
+	output: {
+		path: paths.appBuild,
+		pathinfo: isEnvDevelopment,
+		publicPath: paths.basePath
+	},
+	cache: {
+		type: "filesystem",
+		version: createHash("md5").update(process.env.NODE_ENV.toString()).digest("hex"), // I don't know what I'm doing...
+		cacheDirectory: paths.appWebpackCache,
+		store: "pack",
+		buildDependencies: {
+			defaultWebpack: ["webpack/lib/"],
+			config: [__filename]
+		}
+	},
+	infrastructureLogging: {
+		level: "none"
+	},
+	resolve: {
+		modules: ["node_modules", paths.appNodeModules, paths.appSrc],
+		extensions: [".web.js", ".js", ".json", ".jsx", ".node"],
+		alias: {
+			src: paths.appSrc
+		}
+	},
+	optimization: {
+		minimize: isEnvProduction,
+		minimizer: [
+			new TerserPlugin({
+				terserOptions: {
+					parse: {
+						ecma: 8
+					},
+					compress: {
+						ecma: 5,
+						warnings: false,
+						comparisons: false,
+						inline: 2
+					},
+					output: {
+						ecma: 5,
+						comments: false
+					}
+				}
+			}),
+			new CssMinimizerPlugin()
+		]
+	},
+	module: {
+		strictExportPresence: true,
+		rules: [
+			// Handles `node_modules` packages that contain sourcemaps
+			...emptyOr(shouldUseSourceMap, [{
+				enforce: "pre",
+				exclude: /@babel(?:\/|\\{1,2})runtime/,
+				test: /\.(js|mjs|jsx|ts|tsx|css)$/,
+				loader: require.resolve("source-map-loader")
+			}]),
+			{
+				oneOf: [
+					...imageLoaders,
+					...javascriptLoaders,
+					...styleLoaders,
+					{
+						// Makes sure the assets get served by `WebpackDevServer`
+						exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+						type: "asset/resource"
+					}
+				]
+			}
+		]
+	},
+	plugins: [
+		...emptyOr(isEnvProduction, [
+			new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]), // Injects scripts into HTML
+			new MiniCssExtractPlugin({
+				filename: `${rebuiltronConfig.buildDirs.css}/[name].[contenthash:8].css`,
+				chunkFilename: `${rebuiltronConfig.buildDirs.css}/[name].[contenthash:8].chunk.css`
+			}),
+			new CopyPlugin({
+				patterns: [{
+					from: paths.appPublic,
+					to: paths.appBuild,
+					globOptions: {
+						ignore: ["**/*.html"]
+					}
+				}]
+			})
+		]),
+		...emptyOr(isEnvDevelopment, [
+			new ReactRefreshWebpackPlugin({ overlay: false }),
+			new CaseSensitivePathsPlugin() // Detects case errors in import paths
+		]),
+		new ModuleNotFoundPlugin(paths.appPath) // Gives some necessary context to module not found errors
+	],
+	performance: false // Performance processing is already handled via `FileSizeReporter`
+};

package/configurations/main.js

@@ -0,0 +1,17 @@
+const paths = require("../helpers/paths");
+const rebuiltronConfig = require("../rebuiltronConfig");
+const baseConfig = require("./base");
+
+
+module.exports = {
+	...baseConfig,
+	mode: "production",
+	target: "electron-main",
+	entry: {
+		[rebuiltronConfig.buildFileNames.main]: paths.electronMain
+	},
+	output: {
+		...baseConfig.output,
+		filename: `${rebuiltronConfig.buildDirs.js}/[name].js`
+	}
+};

package/configurations/preloads.js

@@ -0,0 +1,22 @@
+const { mapKeys } = require("lodash");
+
+const paths = require("../helpers/paths");
+const rebuiltronConfig = require("../rebuiltronConfig");
+const baseConfig = require("./base");
+
+
+const { preloads } = require(paths.appConfig);
+
+
+module.exports = {
+	...baseConfig,
+	mode: "production",
+	target: "electron-preload",
+	entry: mapKeys(preloads, (_value, entryName) => (
+		`${rebuiltronConfig.buildFileNames.preload}.${entryName}`)
+	),
+	output: {
+		...baseConfig.output,
+		filename: `${rebuiltronConfig.buildDirs.js}/[name].js`
+	}
+};

package/configurations/renderers.js

@@ -0,0 +1,53 @@
+const path = require("path");
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { keys } = require("lodash");
+
+const paths = require("../helpers/paths");
+const { isEnvProduction, shouldUseSourceMap } = require("../helpers/environment");
+const { emptyOr } = require("../helpers/utils");
+const rebuiltronConfig = require("../rebuiltronConfig");
+const baseConfig = require("./base");
+
+
+const { renderers } = require(paths.appConfig);
+
+
+module.exports = {
+	...baseConfig,
+	mode: isEnvProduction ? "production" : "development",
+	target: "browserslist",
+	devtool: shouldUseSourceMap && (isEnvProduction ? "source-map" : "cheap-module-source-map"),
+	entry: renderers,
+	output: {
+		...baseConfig.output,
+		filename: `${rebuiltronConfig.buildDirs.js}/${isEnvProduction ? "[name].[contenthash:8].js" : "[name].bundle.js"}`,
+		chunkFilename: `${rebuiltronConfig.buildDirs.js}/${isEnvProduction ? "[name].[contenthash:8].chunk.js" : "[name].chunk.js"}`,
+		assetModuleFilename: `${rebuiltronConfig.buildDirs.media}/[name].[hash][ext]`
+	},
+	plugins: [
+		...baseConfig.plugins,
+		...keys(renderers).map(renderer => (
+			new HtmlWebpackPlugin({
+				inject: true,
+				template: path.join(paths.appPublic, `${renderer}.html`),
+				filename: `${renderer}.html`,
+				chunks: [renderer],
+				...emptyOr(isEnvProduction, {
+					minify: {
+						removeComments: true,
+						collapseWhitespace: true,
+						removeRedundantAttributes: true,
+						useShortDoctype: true,
+						removeEmptyAttributes: true,
+						removeStyleLinkTypeAttributes: true,
+						keepClosingSlash: true,
+						minifyJS: true,
+						minifyCSS: true,
+						minifyURLs: true
+					}
+				})
+			})
+		))
+	]
+};

package/createDevServer.js

@@ -0,0 +1,75 @@
+const { spawn } = require("child_process");
+const path = require("path");
+const fs = require("fs");
+
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const clearConsole = require("react-dev-utils/clearConsole");
+const { bold } = require("colorette");
+
+const webpackConfig = require("./webpack.config");
+const devServerConfig = require("./webpackDevServer.config");
+const { exitProcessWithError } = require("./helpers/utils");
+const spinnies = require("./helpers/spinnies");
+
+
+let isElectronStarted = false;
+
+
+const _startElectron = (port) => {
+	spinnies.add("electron", { text: "Starting Electron" });
+
+	try {
+		const electronPath = require.resolve("electron");
+		const electronModulePath = path.dirname(electronPath);
+		const pathFile = path.join(electronModulePath, "path.txt");
+		const executablePath = fs.readFileSync(pathFile, "utf-8");
+		const electronExtPath = path.join(electronModulePath, "dist", executablePath);
+
+		const electronProcess = spawn(electronExtPath, ["."], {
+			stdio: "inherit",
+			env: {
+				...process.env,
+				DEV_LOCAL_URL: `http://localhost:${port}`
+			}
+		});
+
+		electronProcess.on("close", process.exit);
+
+		spinnies.succeed("devServer", { text: `Development server running on port ${bold(port)}` });
+		spinnies.succeed("electron", { text: "Electron started\n" });
+
+		isElectronStarted = true;
+
+	} catch (error) {
+		exitProcessWithError({
+			message: [
+				"An error occured while starting Electron.",
+				"Please make sure the dependencies `electron` is installed."
+			],
+			stack: error.stack || error
+		});
+	}
+};
+
+module.exports = (port) => {
+	const compiler = webpack(webpackConfig);
+
+	// Starting (re)compiling
+
+	compiler.hooks.invalid.tap("invalid", () => {
+		clearConsole();
+		spinnies.add("compile", { text: "Compiling..." });
+	});
+
+	// Finished (re)compiling
+
+	compiler.hooks.done.tap("done", () => {
+		clearConsole();
+		spinnies.remove("compile");
+
+		if (!isElectronStarted) _startElectron(port);
+	});
+
+	return new WebpackDevServer({ ...devServerConfig, port }, compiler);
+};

package/helpers/environment.js

@@ -0,0 +1,6 @@
+const isEnvDevelopment = process.env.NODE_ENV === "development";
+const isEnvProduction = process.env.NODE_ENV === "production";
+const shouldUseSourceMap = isEnvDevelopment;
+
+
+module.exports = { isEnvDevelopment, isEnvProduction, shouldUseSourceMap };

package/helpers/logger.js

@@ -0,0 +1,55 @@
+const { red, green, yellow, black } = require("colorette");
+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
+};

package/helpers/paths.js

@@ -0,0 +1,22 @@
+const rebuiltronConfig = require("../rebuiltronConfig.js");
+const { isEnvDevelopment } = require("./environment.js");
+const { resolveApp } = require("./utils.js");
+
+
+const packageJsonPath = resolveApp("package.json");
+const packageJson = require(packageJsonPath);
+
+
+module.exports = {
+	appConfig: resolveApp(rebuiltronConfig.configFileName),
+	electronMain: resolveApp(packageJson.main),
+	appPath: resolveApp("."),
+	appBuild: resolveApp(rebuiltronConfig.appDirs.build),
+	appPublic: resolveApp(rebuiltronConfig.appDirs.public),
+	appPackageJson: packageJsonPath,
+	appSrc: resolveApp(rebuiltronConfig.appDirs.appSrc),
+	electronSrc: resolveApp(rebuiltronConfig.appDirs.electronSrc),
+	appNodeModules: resolveApp("node_modules"),
+	appWebpackCache: resolveApp("node_modules/.cache"),
+	basePath: isEnvDevelopment ? "/" : "./"
+};

package/helpers/spinnies.js

@@ -0,0 +1,7 @@
+const Spinnies = require("spinnies");
+
+
+let spinnies = null;
+spinnies ??= new Spinnies({ spinnerColor: "cyan", color: "blue", succeedColor: "white" });
+
+module.exports = spinnies;

package/helpers/utils.js

@@ -0,0 +1,48 @@
+const path = require("path");
+const fs = require("fs");
+
+const { isArray } = require("lodash");
+
+const log = require("./logger");
+const spinnies = require("./spinnies");
+
+
+const _appDirectory = fs.realpathSync(process.cwd());
+
+
+/**
+ * Resolves a path relative to the app directory.
+ * @param {string} relativePath - Path to resolve
+ * @returns {string} Resolved path
+ */
+
+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
+ */
+
+const exitProcessWithError = (error) => {
+	spinnies.stopAll("fail");
+
+	log.error(error?.message || error);
+	if (error.stack) log.info(error.stack);
+
+	process.exit(1);
+};
+
+/**
+ * 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
+ */
+
+const emptyOr = (condition, value) => {
+	const empty = isArray(value) ? [] : {};
+	return condition ? value : empty;
+};
+
+
+module.exports = { resolveApp, exitProcessWithError, emptyOr };

package/loaders/images.js

@@ -0,0 +1,24 @@
+module.exports = [
+	{
+		test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+		type: "asset",
+		parser: {
+			dataUrlCondition: {
+				maxSize: 10000
+			}
+		}
+	},
+	{
+		test: /\.svg$/,
+		issuer: /\.jsx?$/,
+		use: [{
+			loader: require.resolve("@svgr/webpack"),
+			options: {
+				prettier: false,
+				svgo: false,
+				titleProp: true,
+				ref: true
+			}
+		}]
+	}
+];

package/loaders/javascript.js

@@ -0,0 +1,28 @@
+const paths = require("../helpers/paths");
+const { shouldUseSourceMap, isEnvProduction } = require("../helpers/environment");
+
+
+module.exports = [
+	{
+		test: /\.(js|jsx)$/,
+		exclude: [paths.appNodeModules],
+		use: {
+			loader: require.resolve("swc-loader"),
+			options: {
+				jsc: {
+					parser: {
+						jsx: true
+					},
+					transform: {
+						react: {
+							refresh: true,
+							runtime: "automatic"
+						}
+					}
+				},
+				minify: isEnvProduction,
+				sourceMaps: shouldUseSourceMap
+			}
+		}
+	}
+];

package/loaders/style.js

@@ -0,0 +1,98 @@
+const path = require("path");
+
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const paths = require("../helpers/paths");
+const { shouldUseSourceMap, isEnvDevelopment, isEnvProduction } = require("../helpers/environment");
+const { emptyOr } = require("../helpers/utils");
+const rebuiltronConfig = require("../rebuiltronConfig");
+
+
+const { sassOptions } = require(paths.appConfig);
+
+
+const _publicPath = rebuiltronConfig.buildDirs.css
+	.split("/")
+	.reduce(path => (path + "../"), "");
+
+const _getBaseStyleLoaders = () => ([
+	...emptyOr(isEnvDevelopment, [require.resolve("style-loader")]),
+	...emptyOr(isEnvProduction, [{
+		loader: MiniCssExtractPlugin.loader,
+		options: { publicPath: _publicPath } // Locates HTML files from bundled `.css`
+	}]),
+	{
+		loader: require.resolve("css-loader"),
+		options: {
+			importLoaders: 3,
+			sourceMap: shouldUseSourceMap,
+			modules: {
+				mode: "icss"
+			}
+		}
+	},
+	{
+		loader: require.resolve("postcss-loader"),
+		options: {
+			postcssOptions: {
+				ident: "postcss",
+				config: false,
+				plugins: [
+					"postcss-flexbugs-fixes",
+					[
+						"postcss-preset-env",
+						{
+							autoprefixer: {
+								flexbox: "no-2009"
+							},
+							stage: 3
+						}
+					],
+					"postcss-normalize"
+				]
+			},
+			sourceMap: shouldUseSourceMap
+		}
+	}
+]);
+
+
+module.exports = [
+	{
+		test: /\.css$/,
+		use: _getBaseStyleLoaders({ importLoaders: 1 }),
+		sideEffects: true // https://github.com/webpack/webpack/issues/6571
+	},
+	{
+		test: /\.(scss|sass)$/,
+		use: [
+			..._getBaseStyleLoaders({ importLoaders: 3 }),
+			{
+				loader: require.resolve("resolve-url-loader"),
+				options: {
+					sourceMap: shouldUseSourceMap,
+					root: paths.appSrc
+				}
+			},
+			{
+				loader: require.resolve("sass-loader"),
+				options: {
+					sourceMap: true,
+					...emptyOr(sassOptions?.additionalData, {
+						additionalData: (content, loaderContext) => {
+							const { data, exclude } = sassOptions.additionalData;
+							const { resourcePath, rootContext } = loaderContext;
+
+							const relativeFilePath = path.relative(rootContext, resourcePath);
+							const isExcluded = relativeFilePath.match(exclude);
+
+							// Add `additionalData` on non-excluded files
+							return isExcluded ? content : data + content;
+						}
+					})
+				}
+			}
+		],
+		sideEffects: true // https://github.com/webpack/webpack/issues/6571
+	}
+];

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "rebuiltron",
+  "version": "1.0.0",
+  "author": "Arkellys",
+  "license": "MIT",
+  "bin": {
+    "rebuiltron": "bin/index.js"
+  },
+  "scripts": {
+    "lint": "eslint \"**/*.js\""
+  },
+  "devDependencies": {
+    "eslint-config-arklint": "^1.0.2"
+  },
+  "dependencies": {
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "^8.0.1",
+    "@swc/core": "^1.3.76",
+    "browserslist": "^4.18.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "colorette": "^2.0.20",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "detect-port": "^1.5.1",
+    "fs-extra": "^11.1.1",
+    "html-webpack-plugin": "^5.5.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^7.3.3",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^9.1.1",
+    "react-dev-utils": "^12.0.1",
+    "react-refresh": "^0.14.0",
+    "resolve-url-loader": "^5.0.0",
+    "sass-loader": "^13.3.2",
+    "source-map-loader": "^4.0.1",
+    "spinnies": "^0.5.1",
+    "style-loader": "^3.3.1",
+    "swc-loader": "^0.2.3",
+    "terser-webpack-plugin": "^5.2.5",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0"
+  },
+  "peerDependencies": {
+    "electron": ">=25.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "eslintConfig": {
+    "extends": "arklint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Arkellys/rebuiltron.git"
+  },
+  "homepage": "https://github.com/Arkellys/rebuiltron#readme"
+}

package/rebuiltronConfig.js

@@ -0,0 +1,18 @@
+module.exports = {
+	configFileName: "rebuiltron.config.js",
+	buildDirs: {
+		js: "static/js",
+		media: "static/media",
+		css: "static/css"
+	},
+	buildFileNames: {
+		main: "electron.main",
+		preload: "electron.preload"
+	},
+	appDirs: {
+		public: "public",
+		electronSrc: "electron",
+		appSrc: "src",
+		build: "build"
+	}
+};

package/scripts/build.js

@@ -0,0 +1,48 @@
+process.env.BABEL_ENV = "production";
+process.env.NODE_ENV = "production";
+
+
+const { measureFileSizesBeforeBuild, printFileSizesAfterBuild } = require("react-dev-utils/FileSizeReporter");
+const { isEmpty } = require("lodash");
+const clearConsole = require("react-dev-utils/clearConsole");
+
+const checkSetup = require("../checkSetup");
+const paths = require("../helpers/paths");
+const { exitProcessWithError } = require("../helpers/utils");
+const log = require("../helpers/logger");
+const spinnies = require("../helpers/spinnies");
+
+
+process.on("unhandledRejection", exitProcessWithError);
+
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+checkSetup
+	.then(() => measureFileSizesBeforeBuild(paths.appBuild))
+	.then(previousFileSizes => {
+		const buildApp = require("../buildApp");
+		return buildApp(previousFileSizes);
+	})
+	.then(({ stats, previousFileSizes, warnings }) => {
+		spinnies.remove("build");
+		clearConsole();
+
+		isEmpty(warnings)
+			? log.success("Compiled successfully!")
+			: log.warning(["Compiled with warnings.\n", warnings.join("\n\n")]);
+
+		console.log("File sizes after gzip:\n");
+
+		printFileSizesAfterBuild(
+			stats,
+			previousFileSizes,
+			paths.appBuild,
+			WARN_AFTER_BUNDLE_GZIP_SIZE,
+			WARN_AFTER_CHUNK_GZIP_SIZE
+		);
+
+		console.log();
+		process.exit(0);
+	})
+	.catch(exitProcessWithError);

package/scripts/start.js

@@ -0,0 +1,29 @@
+process.env.BABEL_ENV = "development";
+process.env.NODE_ENV = "development";
+
+
+const clearConsole = require("react-dev-utils/clearConsole");
+
+const checkSetup = require("../checkSetup");
+const { exitProcessWithError } = require("../helpers/utils");
+const spinnies = require("../helpers/spinnies");
+
+
+process.on("unhandledRejection", exitProcessWithError);
+
+checkSetup.then(([port]) => {
+	const createDevServer = require("../createDevServer");
+	const devServer = createDevServer(port);
+
+	clearConsole();
+	spinnies.add("devServer", { text: "Starting the development server" });
+
+	devServer.start();
+
+	["SIGINT", "SIGTERM"].forEach((sig) => {
+		process.on(sig, () => {
+			devServer.close();
+			process.exit();
+		});
+	});
+}).catch(exitProcessWithError);

package/webpack.config.js

@@ -0,0 +1,7 @@
+const { isEnvDevelopment } = require("./helpers/environment");
+const rendererConfig = require("./configurations/renderers");
+const preloadConfig = require("./configurations/preloads");
+const mainConfig = require("./configurations/main");
+
+
+module.exports = isEnvDevelopment ? rendererConfig : [rendererConfig, mainConfig, preloadConfig];

package/webpackDevServer.config.js

@@ -0,0 +1,32 @@
+const evalSourceMapMiddleware = require("react-dev-utils/evalSourceMapMiddleware");
+const ignoredFiles = require("react-dev-utils/ignoredFiles");
+const redirectServedPath = require("react-dev-utils/redirectServedPathMiddleware");
+
+const paths = require("./helpers/paths");
+
+
+module.exports = {
+	compress: true,
+	static: {
+		directory: paths.appPublic,
+		publicPath: [paths.basePath],
+		watch: {
+			ignored: ignoredFiles(paths.appSrc)
+		}
+	},
+	client: {
+		overlay: {
+			errors: true,
+			warnings: false
+		}
+	},
+	historyApiFallback: {
+		disableDotRule: true, // Supports route with dots
+		index: paths.basePath
+	},
+	setupMiddlewares: (middlewares, devServer) => ([
+		...middlewares,
+		evalSourceMapMiddleware(devServer), // Fetches source contents from webpack for the error overlay
+		redirectServedPath(paths.basePath) // Redirects to `basePath` if url not match
+	])
+};