Refactor JS to use ES modules (hestiacp#3476)

Author: AlecRust

build.js

@@ -1,37 +1,26 @@
 // Build JS and CSS using esbuild and PostCSS
-const esbuild = require('esbuild');
-const postcss = require('postcss');
-const fs = require('fs').promises;
-const path = require('path');
-const postcssConfig = require('./postcss.config.js');
+import esbuild from 'esbuild';
+import postcss from 'postcss';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import postcssConfig from './postcss.config.js';
 
-// Esbuild JavaScript configuration
 const esbuildConfig = {
-	outdir: './web/js/dist',
-	entryNames: '[dir]/[name].min',
+	outfile: './web/js/dist/main.min.js',
+	bundle: true,
 	minify: true,
+	sourcemap: true,
 };
 
 // Build JavaScript
 async function buildJS() {
-	const jsSrcPath = './web/js/src/';
-	const jsEntries = await fs.readdir(jsSrcPath);
-	const jsBuildPromises = jsEntries
-		.filter((entry) => path.extname(entry) === '.js')
-		.map((entry) => {
-			const inputPath = path.join(jsSrcPath, entry);
-			return esbuild
-				.build({
-					...esbuildConfig,
-					entryPoints: [inputPath],
-				})
-				.then(() => {
-					console.log('✅ JavaScript build completed for', inputPath);
-				});
-		});
-
+	const inputPath = './web/js/src/main.js';
 	try {
-		await Promise.all(jsBuildPromises);
+		await esbuild.build({
+			...esbuildConfig,
+			entryPoints: [inputPath],
+		});
+		console.log('✅ JavaScript build completed for', inputPath);
 	} catch (error) {
 		console.error('❌ Error building JavaScript:', error);
 		process.exit(1);
@@ -56,14 +45,14 @@ async function processCSS(inputFile, outputFile) {
 
 // Build CSS files
 async function buildCSS() {
-	const themesSrcPath = './web/css/src/themes/';
-	const cssEntries = await fs.readdir(themesSrcPath);
+	const themesSourcePath = './web/css/src/themes/';
+	const cssEntries = await fs.readdir(themesSourcePath);
 
 	const cssBuildPromises = cssEntries
 		.filter((entry) => path.extname(entry) === '.css')
 		.map(async (entry) => {
 			const entryName = entry.replace('.css', '.min.css');
-			const inputPath = path.join(themesSrcPath, entry);
+			const inputPath = path.join(themesSourcePath, entry);
 			const outputPath = `./web/css/themes/${entryName}`;
 			await processCSS(inputPath, outputPath);
 		});

package.json

@@ -5,6 +5,7 @@
 	"description": "An open-source Linux web server control panel.",
 	"repository": "https://github.com/hestiacp/hestiacp",
 	"license": "GPL-3.0-or-later",
+	"type": "module",
 	"scripts": {
 		"docs:dev": "vitepress dev docs",
 		"docs:build": "vitepress build docs",
@@ -19,14 +20,15 @@
 	"packageManager": "yarn@3.5.0",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.0",
+		"nanoid": "^4.0.2",
 		"normalize.css": "^8.0.1"
 	},
 	"devDependencies": {
 		"@prettier/plugin-php": "^0.19.4",
-		"@typescript-eslint/eslint-plugin": "^5.58.0",
-		"@typescript-eslint/parser": "^5.58.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.0",
+		"@typescript-eslint/parser": "^5.59.0",
 		"cssnano": "^6.0.0",
-		"esbuild": "^0.17.16",
+		"esbuild": "^0.17.17",
 		"eslint": "^8.38.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-editorconfig": "^4.0.2",
@@ -36,7 +38,7 @@
 		"postcss": "^8.4.22",
 		"postcss-import": "^15.1.0",
 		"postcss-path-replace": "^1.0.4",
-		"postcss-preset-env": "^8.3.1",
+		"postcss-preset-env": "^8.3.2",
 		"postcss-size": "^4.0.1",
 		"prettier": "^2.8.7",
 		"prettier-plugin-nginx": "^1.0.3",
@@ -45,7 +47,7 @@
 		"stylelint": "^15.5.0",
 		"stylelint-config-standard": "^33.0.0",
 		"typescript": "^5.0.4",
-		"vitepress": "1.0.0-alpha.70",
+		"vitepress": "1.0.0-alpha.72",
 		"vue": "^3.2.47"
 	},
 	"browserslist": [

postcss.config.js

@@ -1,14 +1,20 @@
-module.exports = {
+import postcssImport from 'postcss-import';
+import postcssPathReplace from 'postcss-path-replace';
+import postcssSize from 'postcss-size';
+import cssnano from 'cssnano';
+import postcssPresetEnv from 'postcss-preset-env';
+
+export default {
 	plugins: [
-		require('postcss-import'),
-		require('postcss-path-replace')({
+		postcssImport,
+		postcssPathReplace({
 			publicPath: '/webfonts/',
 			matched: '../webfonts/',
 			mode: 'replace',
 		}),
-		require('postcss-size'),
-		require('cssnano'),
-		require('postcss-preset-env')({
+		postcssSize,
+		cssnano,
+		postcssPresetEnv({
 			autoprefixer: {
 				flexbox: 'no-2009',
 			},

web/css/src/themes/default.css

@@ -1588,20 +1588,6 @@
 	}
 }
 
-.toggle-password {
-	color: #aaa;
-	z-index: 1;
-	position: absolute;
-	top: 9px;
-	right: 12px;
-}
-
-.toggle-psw-visibility-icon {
-	cursor: pointer;
-	opacity: 1;
-	margin: -2px;
-}
-
 .password-meter {
 	height: 3px;
 	overflow: hidden;
@@ -1698,7 +1684,7 @@
 		opacity: 0.8;
 	}
 
-	&.is-active {
+	&.active {
 		opacity: 1;
 	}
 
@@ -2213,7 +2199,7 @@
 	opacity: 0;
 	transition: opacity 0.2s ease, visibility 0s 0.2s;
 
-	&.show {
+	&.active {
 		visibility: visible;
 		opacity: 1;
 		transition: opacity 0.2s ease, visibility 0s 0s;

web/css/src/utilities.css

@@ -45,10 +45,6 @@
 	white-space: nowrap !important;
 }
 
-.u-opacity-50 {
-	opacity: 0.5 !important;
-}
-
 .u-mt15 {
 	margin-top: 15px !important;
 }
@@ -145,6 +141,12 @@
 	resize: both !important;
 }
 
+.u-unstyled-button {
+	border: 0 !important;
+	padding: 0 !important;
+	background-color: transparent !important;
+}
+
 .u-console {
 	font-family: var(--font-family-monospace) !important;
 	white-space: pre !important;