feat(build): integrate esbuild for improved build performance and add CSS processing

package.json

@@ -80,8 +80,10 @@
     "cordova-plugin-system": "file:src/plugins/system",
     "cordova-plugin-websocket": "file:src/plugins/websocket",
     "css-loader": "^7.1.2",
+    "esbuild": "^0.25.10",
     "mini-css-extract-plugin": "^2.9.3",
     "path-browserify": "^1.0.1",
+    "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.6.2",
     "prettier-plugin-java": "^2.7.4",

src/components/quickTools/footer.js

@@ -3,7 +3,7 @@
  */
 
 import settings from "lib/settings";
-import items, { ref } from "./items";
+import items from "./items";
 
 /**
  * Create a row with common buttons

src/pages/sponsors/sponsors.js

@@ -207,7 +207,7 @@ function SponsorCard({ name, image, website, tier, tagline }) {
 function handleLinkClick(e) {
 	const target = e.target.closest(".sponsor-card");
 	if (!target) return;
-	const { website } = target.dataset;
+	let { website } = target.dataset;
 	if (!website) return;
 	if (!website.startsWith("http")) {
 		website = "http://" + website;

src/sidebarApps/searchInFiles/index.js

@@ -529,7 +529,7 @@ function terminateWorker(initializeNewWorkers = true) {
  * @returns {Worker} A new Worker object that runs the code in 'searchInFilesWorker.build.js'.
  */
 function getWorker() {
-	return new Worker(new URL("./worker.js", import.meta.url));
+	return new Worker("./build/searchInFilesWorker.js");
 }
 
 /**

src/utils/keyboardEvent.js

@@ -37,7 +37,7 @@ const keys = {
 	46: "Delete",
 };
 
-const initKeyboardEventType = (function (event) {
+let initKeyboardEventType = (function (event) {
 	try {
 		event.initKeyboardEvent(
 			"keyup", // in DOMString typeArg

utils/esbuild.js

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+const path = require("node:path");
+const fs = require("node:fs/promises");
+const babel = require("@babel/core");
+const esbuild = require("esbuild");
+const sass = require("sass");
+const postcss = require("postcss");
+const tagLoader = require("html-tag-js/jsx/tag-loader");
+
+const postcssConfig = require("../postcss.config.js");
+
+const args = process.argv.slice(2);
+const modeArgIndex = args.indexOf("--mode");
+const mode =
+	modeArgIndex > -1 && args[modeArgIndex + 1]
+		? args[modeArgIndex + 1]
+		: "development";
+const isProd = mode === "production";
+const watch = args.includes("--watch");
+
+const root = path.resolve(__dirname, "..");
+const outdir = path.join(root, "www", "build");
+const target = ["es5"];
+
+async function ensureCleanOutdir() {
+	await fs.rm(outdir, { recursive: true, force: true });
+	await fs.mkdir(outdir, { recursive: true });
+}
+
+async function processCssFile(filePath) {
+	const isSass = /\.(sa|sc)ss$/.test(filePath);
+	let css;
+
+	if (isSass) {
+		const result = sass.compile(filePath, {
+			style: isProd ? "compressed" : "expanded",
+			loadPaths: [
+				path.dirname(filePath),
+				path.join(root, "src"),
+				path.join(root, "node_modules"),
+			],
+		});
+		css = result.css;
+	} else {
+		css = await fs.readFile(filePath, "utf8");
+	}
+
+	const postcssPlugins = postcssConfig.plugins || [];
+	const processed = await postcss(postcssPlugins).process(css, {
+		from: filePath,
+		map: !isProd ? { inline: true } : false,
+	});
+
+	return processed.css;
+}
+
+const babelPlugin = {
+	name: "babel-transform",
+	setup(build) {
+		build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
+			const source = await fs.readFile(args.path, "utf8");
+			const result = await babel.transformAsync(source, {
+				filename: args.path,
+				configFile: path.join(root, ".babelrc"),
+				sourceType: "unambiguous",
+				caller: {
+					name: "esbuild",
+					supportsStaticESM: true,
+					supportsDynamicImport: true,
+				},
+			});
+			const transformed = result && result.code ? result.code : source;
+			const contents = tagLoader(transformed);
+			return { contents, loader: "js" };
+		});
+	},
+};
+
+const cssPlugin = {
+	name: "css-modules-as-text",
+	setup(build) {
+		build.onLoad({ filter: /\.(sa|sc|c)ss$/ }, async (args) => {
+			const isModule = /\.m\.(sa|sc|c)ss$/.test(args.path);
+			const contents = await processCssFile(args.path);
+			return {
+				contents,
+				loader: isModule ? "text" : "css",
+			};
+		});
+	},
+};
+
+const nodeFallbackPlugin = {
+	name: "node-fallbacks",
+	setup(build) {
+		const emptyNamespace = "empty-module";
+
+		build.onResolve({ filter: /^path$/ }, () => ({
+			path: require.resolve("path-browserify"),
+		}));
+
+		build.onResolve({ filter: /^crypto$/ }, () => ({
+			path: "crypto",
+			namespace: emptyNamespace,
+		}));
+
+		build.onLoad({ filter: /.*/, namespace: emptyNamespace }, () => ({
+			contents: "export default {};",
+			loader: "js",
+		}));
+	},
+};
+
+async function run() {
+	await ensureCleanOutdir();
+
+	const buildOptions = {
+		absWorkingDir: root,
+		entryPoints: {
+			main: "./src/main.js",
+			console: "./src/lib/console.js",
+		},
+		outdir,
+		entryNames: "[name]",
+		chunkNames: "[name].chunk",
+		assetNames: "[name][ext]",
+		publicPath: "/build/",
+		bundle: true,
+		format: "iife",
+		platform: "browser",
+		target,
+		minify: isProd,
+		sourcemap: !isProd,
+		define: {
+			"process.env.NODE_ENV": JSON.stringify(mode),
+		},
+		nodePaths: [path.join(root, "src")],
+		loader: {
+			".hbs": "text",
+			".md": "text",
+			".png": "file",
+			".svg": "file",
+			".jpg": "file",
+			".jpeg": "file",
+			".ico": "file",
+			".ttf": "file",
+			".woff2": "file",
+			".webp": "file",
+			".eot": "file",
+			".woff": "file",
+			".webm": "file",
+			".mp4": "file",
+			".wav": "file",
+		},
+		plugins: [babelPlugin, cssPlugin, nodeFallbackPlugin],
+	};
+
+	if (watch) {
+		const ctx = await esbuild.context(buildOptions);
+		await ctx.watch();
+		console.log("esbuild is watching for changes...");
+		return;
+	}
+
+	await esbuild.build(buildOptions);
+}
+
+run().catch((error) => {
+	console.error(error);
+	process.exit(1);
+});

utils/scripts/build.sh

@@ -80,7 +80,7 @@ RED=''
 NC=''
 
 script1="node ./utils/config.js $mode $app"
-script2="webpack --progress --mode $webpackmode "
+script2="node ./utils/esbuild.js --mode $webpackmode"
 # script3="node ./utils/loadStyles.js"
 
 echo "type : $packageType"

utils/scripts/start.sh

@@ -30,7 +30,7 @@ fi
 RED=''
 NC=''
 script1="node ./utils/config.js $mode $app"
-script2="webpack --progress --mode $webpackmode "
+script2="node ./utils/esbuild.js --mode $webpackmode"
 # script3="node ./utils/loadStyles.js"
 script4="cordova run $platform $cordovamode"
 eval "
@@ -42,4 +42,4 @@ $script2&&
 # $script3;
 echo \"${RED}$script4${NC}\";
 $script4
-"
+"