@jpp-toolkit/plugin-build-fivem 0.0.18 → 0.0.20

package/dist/index.d.mts

@@ -6,7 +6,6 @@ declare class FivemBuildCommand extends Command {
   static summary: string;
   static flags: {
     watch: _oclif_core_interfaces0.BooleanFlag<boolean>;
-    env: _oclif_core_interfaces0.OptionFlag<string | undefined, _oclif_core_interfaces0.CustomOptions>;
     autoReload: _oclif_core_interfaces0.BooleanFlag<boolean>;
     server: _oclif_core_interfaces0.OptionFlag<string, _oclif_core_interfaces0.CustomOptions>;
     password: _oclif_core_interfaces0.OptionFlag<string | undefined, _oclif_core_interfaces0.CustomOptions>;

package/dist/index.mjs

@@ -1,9 +1,10 @@
 import path from "node:path";
 import { Command } from "@jpp-toolkit/core";
-import { createFivemRspackConfig } from "@jpp-toolkit/rspack-config";
-import { getErrMsg } from "@jpp-toolkit/utils";
+import { createFivemScriptRspackConfig, createFivemUiRspackConfig } from "@jpp-toolkit/rspack-config";
+import { debounce, getErrMsg } from "@jpp-toolkit/utils";
 import { Flags } from "@oclif/core";
 import { rspack } from "@rspack/core";
+import { RspackDevServer } from "@rspack/dev-server";
 import dgram from "node:dgram";
 
 //#region src/fivem-rcon.ts
@@ -58,12 +59,6 @@ var FivemBuildCommand = class FivemBuildCommand extends Command {
 			description: "Watch files for changes and rebuild automatically.",
 			default: false
 		}),
-		env: Flags.string({
-			char: "e",
-			description: "Set the build environment (development or production).",
-			options: ["development", "production"],
-			required: false
-		}),
 		autoReload: Flags.boolean({
 			char: "r",
 			description: "Automatically reload FiveM resource after build.",
@@ -95,10 +90,6 @@ var FivemBuildCommand = class FivemBuildCommand extends Command {
 			description: "Build the FiveM resource in watch mode.",
 			command: "<%= config.bin %> <%= command.id %> --watch"
 		},
-		{
-			description: "Build the FiveM resource in production environment.",
-			command: "<%= config.bin %> <%= command.id %> --env=production"
-		},
 		{
 			description: "Build the FiveM resource and automatically reload it on the server after build.",
 			command: "<%= config.bin %> <%= command.id %> --auto-reload --password your_rcon_password"
@@ -113,42 +104,61 @@ var FivemBuildCommand = class FivemBuildCommand extends Command {
 		}
 	];
 	async run() {
-		const { env, resourceName, rconOptions, watch } = await this._parseOptions();
-		const compiler = rspack(createFivemRspackConfig({
-			environment: env,
-			resourceName
+		const { resourceName, rconOptions, watch } = await this._parseOptions();
+		const scriptCompiler = rspack(createFivemScriptRspackConfig(void 0, { isProduction: !watch })({
+			RSPACK_BUILD: !watch,
+			RSPACK_WATCH: watch
 		}));
-		const reloadFivemResource = async () => {
+		const uiConfig = createFivemUiRspackConfig({ resourceName }, { isProduction: !watch })({
+			RSPACK_BUILD: !watch,
+			RSPACK_SERVE: watch
+		});
+		const uiCompiler = rspack(uiConfig);
+		const reloadFivemResource = debounce(async () => {
 			if (!rconOptions) return;
+			this.logger.log("");
 			this.logger.info(`Reloading FiveM resource "${resourceName}"...`);
 			try {
 				await refreshAndEnsureFivemResource(resourceName, rconOptions);
 				this.logger.success(`FiveM resource reloaded successfully.\n`);
 			} catch (error) {
-				this.logger.error(`Failed to reload FiveM resource: ${getErrMsg(error)}\n`);
+				this.logger.error(`Failed to reload FiveM resource: ${error}\n`);
 			}
-		};
+		}, 500);
 		const compilerCallback = (err, stats) => {
 			if (err) {
-				this.logger.error(getErrMsg(err));
-				if ("details" in err) this.logger.error(err.details);
-				if ("stack" in err) this.logger.error(err.stack);
+				this.logger.error(err.toString());
 				return;
 			}
-			if (stats) this.logger.log(stats.toString(true), "\n");
+			if (!stats) return;
+			this.logger.log(stats.toString({
+				preset: "normal",
+				colors: true
+			}), "\n");
 			reloadFivemResource();
 		};
 		if (watch) {
-			this.logger.info(`Building FiveM resource in watch mode...\n`);
-			compiler.watch({}, compilerCallback);
+			const devServerOptions = uiConfig.devServer ?? {};
+			devServerOptions.hot = true;
+			await new RspackDevServer(devServerOptions, uiCompiler).start();
+			scriptCompiler.watch({}, compilerCallback);
 		} else {
-			this.logger.info(`Building FiveM resource...\n`);
-			compiler.run(compilerCallback);
+			uiCompiler.run((error, stats) => {
+				uiCompiler.close((closeErr) => {
+					if (closeErr) this.logger.error(closeErr.toString());
+					compilerCallback(error, stats);
+				});
+			});
+			scriptCompiler.run((error, stats) => {
+				scriptCompiler.close((closeErr) => {
+					if (closeErr) this.logger.error(closeErr.toString());
+					compilerCallback(error, stats);
+				});
+			});
 		}
 	}
 	async _parseOptions() {
 		const { flags } = await this.parse(FivemBuildCommand);
-		const env = flags.env ?? (flags.watch ? "development" : "production");
 		const resourceName = flags.resourceName ?? path.basename(process.cwd());
 		let rconOptions;
 		if (flags.autoReload) {
@@ -162,7 +172,6 @@ var FivemBuildCommand = class FivemBuildCommand extends Command {
 			};
 		}
 		return {
-			env,
 			resourceName,
 			rconOptions,
 			watch: flags.watch

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["timeoutId: NodeJS.Timeout","rconOptions: RconOptions | undefined"],"sources":["../src/fivem-rcon.ts","../src/fivem-build-command.ts","../src/index.ts"],"sourcesContent":["import dgram from 'node:dgram';\n\nimport { getErrMsg } from '@jpp-toolkit/utils';\n\nexport type RconOptions = {\n    readonly host: string;\n    readonly port: number;\n    readonly password: string;\n    readonly timeout?: number | undefined;\n};\n\nfunction buildCommand(command: string, password: string): Buffer {\n    const buffer = Buffer.alloc(11 + password.length + command.length);\n    buffer.writeUInt32LE(0xffffffff, 0);\n    buffer.write('rcon ', 4);\n    buffer.write(password, 9, password.length);\n    buffer.write(' ', 9 + password.length, 1);\n    buffer.write(command, 10 + password.length, command.length);\n    buffer.write('\\n', 10 + password.length + command.length, 1);\n    return buffer;\n}\n\nexport async function sendFivemRcon(command: string, options: RconOptions): Promise<string> {\n    const socket = dgram.createSocket('udp4');\n\n    return new Promise<string>((resolve, reject) => {\n        let timeoutId: NodeJS.Timeout;\n\n        const handleError = (err?: Error | string | null) => {\n            if (!err) return;\n            clearTimeout(timeoutId);\n            const msg = getErrMsg(err);\n            reject(new Error(`Failed to send command to ${options.host}:${options.port}: ${msg}`));\n        };\n\n        const handleMessage = (msg: Buffer) => {\n            clearTimeout(timeoutId);\n            const res = msg.toString('ascii').slice(4).trim();\n            if (res.includes('Invalid password')) return void handleError('Invalid password');\n            resolve(res);\n        };\n\n        timeoutId = setTimeout(\n            () => handleError(`Timeout after ${options.timeout}ms`),\n            options.timeout ?? 5000,\n        );\n\n        socket.once('error', handleError);\n        socket.once('message', handleMessage);\n\n        const cmd = buildCommand(command, options.password);\n        socket.send(cmd, 0, cmd.length, options.port, options.host, handleError);\n    }).finally(() => {\n        socket.close();\n    });\n}\n\nexport async function refreshAndEnsureFivemResource(\n    resourceName: string,\n    options: RconOptions,\n): Promise<void> {\n    const res = await sendFivemRcon(`refresh; ensure ${resourceName}`, options);\n    if (res.includes(\"Couldn't find resource\"))\n        throw new Error(`Resource \"${resourceName}\" not found`);\n    if (!res.includes('Started resource'))\n        throw new Error(`Failed to start resource \"${resourceName}\"`);\n}\n","import path from 'node:path';\n\nimport { Command } from '@jpp-toolkit/core';\nimport { createFivemRspackConfig } from '@jpp-toolkit/rspack-config';\nimport { getErrMsg } from '@jpp-toolkit/utils';\nimport { Flags } from '@oclif/core';\nimport type { MultiStats } from '@rspack/core';\nimport { rspack } from '@rspack/core';\n\nimport { refreshAndEnsureFivemResource } from './fivem-rcon';\nimport type { RconOptions } from './fivem-rcon';\n\ntype Environment = 'development' | 'production';\n\ntype FivemBuildCommandOptions = {\n    readonly env: Environment;\n    readonly resourceName: string;\n    readonly rconOptions?: RconOptions | undefined;\n    readonly watch: boolean;\n};\n\nexport class FivemBuildCommand extends Command {\n    static override summary = 'Build the FiveM resource using predefined config.';\n\n    static override flags = {\n        watch: Flags.boolean({\n            char: 'w',\n            description: 'Watch files for changes and rebuild automatically.',\n            default: false,\n        }),\n        env: Flags.string({\n            char: 'e',\n            description: 'Set the build environment (development or production).',\n            options: ['development', 'production'],\n            required: false,\n        }),\n        autoReload: Flags.boolean({\n            char: 'r',\n            description: 'Automatically reload FiveM resource after build.',\n            default: false,\n        }),\n        server: Flags.string({\n            char: 's',\n            description: 'Server \"ip:port\" to connect for reloading FiveM resource after build.',\n            default: '127.0.0.1:30120',\n            required: false,\n        }),\n        password: Flags.string({\n            char: 'p',\n            description: 'RCON password for the FiveM server to reload resource after build.',\n            required: false,\n        }),\n        resourceName: Flags.string({\n            char: 'n',\n            description:\n                'Name of the FiveM resource to reload. If not provided, the name of the folder containing the resource will be used.',\n            required: false,\n        }),\n    };\n\n    static override examples = [\n        {\n            description: 'Build the FiveM resource.',\n            command: '<%= config.bin %> <%= command.id %>',\n        },\n        {\n            description: 'Build the FiveM resource in watch mode.',\n            command: '<%= config.bin %> <%= command.id %> --watch',\n        },\n        {\n            description: 'Build the FiveM resource in production environment.',\n            command: '<%= config.bin %> <%= command.id %> --env=production',\n        },\n        {\n            description:\n                'Build the FiveM resource and automatically reload it on the server after build.',\n            command:\n                '<%= config.bin %> <%= command.id %> --auto-reload --password your_rcon_password',\n        },\n        {\n            description:\n                'Build the FiveM resource in watch mode and automatically reload it on the server after each build.',\n            command:\n                '<%= config.bin %> <%= command.id %> --watch --auto-reload --password your_rcon_password',\n        },\n        {\n            description:\n                'Build the FiveM resource and connect to a specific server for auto-reload.',\n            command:\n                '<%= config.bin %> <%= command.id %> --auto-reload --server=127.0.0.1:30120 --password your_rcon_password',\n        },\n    ];\n\n    public async run(): Promise<void> {\n        const { env, resourceName, rconOptions, watch } = await this._parseOptions();\n\n        const config = createFivemRspackConfig({ environment: env, resourceName });\n        const compiler = rspack(config);\n\n        const reloadFivemResource = async () => {\n            if (!rconOptions) return;\n            this.logger.info(`Reloading FiveM resource \"${resourceName}\"...`);\n            try {\n                await refreshAndEnsureFivemResource(resourceName, rconOptions);\n                this.logger.success(`FiveM resource reloaded successfully.\\n`);\n            } catch (error) {\n                this.logger.error(`Failed to reload FiveM resource: ${getErrMsg(error)}\\n`);\n            }\n        };\n\n        const compilerCallback = (err: Error | null, stats: MultiStats | undefined) => {\n            if (err) {\n                this.logger.error(getErrMsg(err));\n                if ('details' in err) this.logger.error(err.details as string);\n                if ('stack' in err) this.logger.error(err.stack);\n                return;\n            }\n\n            if (stats) this.logger.log(stats.toString(true), '\\n');\n\n            void reloadFivemResource();\n        };\n\n        if (watch) {\n            this.logger.info(`Building FiveM resource in watch mode...\\n`);\n            compiler.watch({}, compilerCallback);\n        } else {\n            this.logger.info(`Building FiveM resource...\\n`);\n            compiler.run(compilerCallback);\n        }\n    }\n\n    private async _parseOptions(): Promise<FivemBuildCommandOptions> {\n        const { flags } = await this.parse(FivemBuildCommand);\n\n        const env = (flags.env ?? (flags.watch ? 'development' : 'production')) as Environment;\n        const resourceName = flags.resourceName ?? path.basename(process.cwd());\n\n        let rconOptions: RconOptions | undefined;\n\n        if (flags.autoReload) {\n            if (!flags.password) {\n                throw new Error(\n                    'RCON password is required for auto-reload. Please provide it using the --password flag.',\n                );\n            }\n\n            const match = /^(?<host>[^:]+):(?<port>\\d+)$/u.exec(flags.server);\n            const { host, port } = match?.groups ?? {};\n\n            if (!host || !port) {\n                throw new Error(\n                    `Invalid server address format: ${flags.server}. Expected format is \"ip:port\".`,\n                );\n            }\n\n            rconOptions = {\n                host,\n                port: parseInt(port),\n                password: flags.password,\n            };\n        }\n\n        return { env, resourceName, rconOptions, watch: flags.watch };\n    }\n}\n","import { FivemBuildCommand } from './fivem-build-command';\n\nexport const commands = {\n    'build:fivem': FivemBuildCommand,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["timeoutId: NodeJS.Timeout","rconOptions: RconOptions | undefined"],"sources":["../src/fivem-rcon.ts","../src/fivem-build-command.ts","../src/index.ts"],"sourcesContent":["import dgram from 'node:dgram';\n\nimport { getErrMsg } from '@jpp-toolkit/utils';\n\nexport type RconOptions = {\n    readonly host: string;\n    readonly port: number;\n    readonly password: string;\n    readonly timeout?: number | undefined;\n};\n\nfunction buildCommand(command: string, password: string): Buffer {\n    const buffer = Buffer.alloc(11 + password.length + command.length);\n    buffer.writeUInt32LE(0xffffffff, 0);\n    buffer.write('rcon ', 4);\n    buffer.write(password, 9, password.length);\n    buffer.write(' ', 9 + password.length, 1);\n    buffer.write(command, 10 + password.length, command.length);\n    buffer.write('\\n', 10 + password.length + command.length, 1);\n    return buffer;\n}\n\nexport async function sendFivemRcon(command: string, options: RconOptions): Promise<string> {\n    const socket = dgram.createSocket('udp4');\n\n    return new Promise<string>((resolve, reject) => {\n        let timeoutId: NodeJS.Timeout;\n\n        const handleError = (err?: Error | string | null) => {\n            if (!err) return;\n            clearTimeout(timeoutId);\n            const msg = getErrMsg(err);\n            reject(new Error(`Failed to send command to ${options.host}:${options.port}: ${msg}`));\n        };\n\n        const handleMessage = (msg: Buffer) => {\n            clearTimeout(timeoutId);\n            const res = msg.toString('ascii').slice(4).trim();\n            if (res.includes('Invalid password')) return void handleError('Invalid password');\n            resolve(res);\n        };\n\n        timeoutId = setTimeout(\n            () => handleError(`Timeout after ${options.timeout}ms`),\n            options.timeout ?? 5000,\n        );\n\n        socket.once('error', handleError);\n        socket.once('message', handleMessage);\n\n        const cmd = buildCommand(command, options.password);\n        socket.send(cmd, 0, cmd.length, options.port, options.host, handleError);\n    }).finally(() => {\n        socket.close();\n    });\n}\n\nexport async function refreshAndEnsureFivemResource(\n    resourceName: string,\n    options: RconOptions,\n): Promise<void> {\n    const res = await sendFivemRcon(`refresh; ensure ${resourceName}`, options);\n    if (res.includes(\"Couldn't find resource\"))\n        throw new Error(`Resource \"${resourceName}\" not found`);\n    if (!res.includes('Started resource'))\n        throw new Error(`Failed to start resource \"${resourceName}\"`);\n}\n","import path from 'node:path';\n\nimport { Command } from '@jpp-toolkit/core';\nimport {\n    createFivemScriptRspackConfig,\n    createFivemUiRspackConfig,\n} from '@jpp-toolkit/rspack-config';\nimport { debounce } from '@jpp-toolkit/utils';\nimport { Flags } from '@oclif/core';\nimport type { MultiStats, Stats } from '@rspack/core';\nimport { rspack } from '@rspack/core';\nimport { RspackDevServer } from '@rspack/dev-server';\n\nimport { refreshAndEnsureFivemResource } from './fivem-rcon';\nimport type { RconOptions } from './fivem-rcon';\n\ntype FivemBuildCommandOptions = {\n    readonly resourceName: string;\n    readonly rconOptions?: RconOptions | undefined;\n    readonly watch: boolean;\n};\n\nexport class FivemBuildCommand extends Command {\n    static override summary = 'Build the FiveM resource using predefined config.';\n\n    static override flags = {\n        watch: Flags.boolean({\n            char: 'w',\n            description: 'Watch files for changes and rebuild automatically.',\n            default: false,\n        }),\n        autoReload: Flags.boolean({\n            char: 'r',\n            description: 'Automatically reload FiveM resource after build.',\n            default: false,\n        }),\n        server: Flags.string({\n            char: 's',\n            description: 'Server \"ip:port\" to connect for reloading FiveM resource after build.',\n            default: '127.0.0.1:30120',\n            required: false,\n        }),\n        password: Flags.string({\n            char: 'p',\n            description: 'RCON password for the FiveM server to reload resource after build.',\n            required: false,\n        }),\n        resourceName: Flags.string({\n            char: 'n',\n            description:\n                'Name of the FiveM resource to reload. If not provided, the name of the folder containing the resource will be used.',\n            required: false,\n        }),\n    };\n\n    static override examples = [\n        {\n            description: 'Build the FiveM resource.',\n            command: '<%= config.bin %> <%= command.id %>',\n        },\n        {\n            description: 'Build the FiveM resource in watch mode.',\n            command: '<%= config.bin %> <%= command.id %> --watch',\n        },\n        {\n            description:\n                'Build the FiveM resource and automatically reload it on the server after build.',\n            command:\n                '<%= config.bin %> <%= command.id %> --auto-reload --password your_rcon_password',\n        },\n        {\n            description:\n                'Build the FiveM resource in watch mode and automatically reload it on the server after each build.',\n            command:\n                '<%= config.bin %> <%= command.id %> --watch --auto-reload --password your_rcon_password',\n        },\n        {\n            description:\n                'Build the FiveM resource and connect to a specific server for auto-reload.',\n            command:\n                '<%= config.bin %> <%= command.id %> --auto-reload --server=127.0.0.1:30120 --password your_rcon_password',\n        },\n    ];\n\n    public async run(): Promise<void> {\n        const { resourceName, rconOptions, watch } = await this._parseOptions();\n\n        const scriptConfig = createFivemScriptRspackConfig(undefined, {\n            isProduction: !watch,\n        })({\n            RSPACK_BUILD: !watch,\n            RSPACK_WATCH: watch,\n        });\n        const scriptCompiler = rspack(scriptConfig);\n\n        const uiConfig = createFivemUiRspackConfig(\n            { resourceName },\n            { isProduction: !watch },\n        )({\n            RSPACK_BUILD: !watch,\n            RSPACK_SERVE: watch,\n        });\n        const uiCompiler = rspack(uiConfig);\n\n        const reloadFivemResource = debounce(async () => {\n            if (!rconOptions) return;\n            this.logger.log('');\n            this.logger.info(`Reloading FiveM resource \"${resourceName}\"...`);\n            try {\n                await refreshAndEnsureFivemResource(resourceName, rconOptions);\n                this.logger.success(`FiveM resource reloaded successfully.\\n`);\n            } catch (error) {\n                this.logger.error(`Failed to reload FiveM resource: ${error}\\n`);\n            }\n        }, 500);\n\n        const compilerCallback = (err: Error | null, stats: Stats | MultiStats | undefined) => {\n            if (err) {\n                this.logger.error(err.toString());\n                return;\n            }\n            if (!stats) return;\n            this.logger.log(stats.toString({ preset: 'normal', colors: true }), '\\n');\n            void reloadFivemResource();\n        };\n\n        if (watch) {\n            const devServerOptions = uiConfig.devServer ?? {};\n            devServerOptions.hot = true;\n            const devServer = new RspackDevServer(devServerOptions, uiCompiler);\n            await devServer.start();\n            scriptCompiler.watch({}, compilerCallback);\n        } else {\n            uiCompiler.run((error: Error | null, stats: Stats | MultiStats | undefined) => {\n                uiCompiler.close((closeErr) => {\n                    if (closeErr) this.logger.error(closeErr.toString());\n                    compilerCallback(error, stats);\n                });\n            });\n            scriptCompiler.run((error: Error | null, stats: Stats | MultiStats | undefined) => {\n                scriptCompiler.close((closeErr) => {\n                    if (closeErr) this.logger.error(closeErr.toString());\n                    compilerCallback(error, stats);\n                });\n            });\n        }\n    }\n\n    private async _parseOptions(): Promise<FivemBuildCommandOptions> {\n        const { flags } = await this.parse(FivemBuildCommand);\n\n        const resourceName = flags.resourceName ?? path.basename(process.cwd());\n\n        let rconOptions: RconOptions | undefined;\n\n        if (flags.autoReload) {\n            if (!flags.password) {\n                throw new Error(\n                    'RCON password is required for auto-reload. Please provide it using the --password flag.',\n                );\n            }\n\n            const match = /^(?<host>[^:]+):(?<port>\\d+)$/u.exec(flags.server);\n            const { host, port } = match?.groups ?? {};\n\n            if (!host || !port) {\n                throw new Error(\n                    `Invalid server address format: ${flags.server}. Expected format is \"ip:port\".`,\n                );\n            }\n\n            rconOptions = {\n                host,\n                port: parseInt(port),\n                password: flags.password,\n            };\n        }\n\n        return { resourceName, rconOptions, watch: flags.watch };\n    }\n}\n","import { FivemBuildCommand } from './fivem-build-command';\n\nexport const commands = {\n    'build:fivem': FivemBuildCommand,\n};\n"],"mappings":"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"}

package/oclif.manifest.json

@@ -12,10 +12,6 @@
           "description": "Build the FiveM resource in watch mode.",
           "command": "<%= config.bin %> <%= command.id %> --watch"
         },
-        {
-          "description": "Build the FiveM resource in production environment.",
-          "command": "<%= config.bin %> <%= command.id %> --env=production"
-        },
         {
           "description": "Build the FiveM resource and automatically reload it on the server after build.",
           "command": "<%= config.bin %> <%= command.id %> --auto-reload --password your_rcon_password"
@@ -37,19 +33,6 @@
           "allowNo": false,
           "type": "boolean"
         },
-        "env": {
-          "char": "e",
-          "description": "Set the build environment (development or production).",
-          "name": "env",
-          "required": false,
-          "hasDynamicHelp": false,
-          "multiple": false,
-          "options": [
-            "development",
-            "production"
-          ],
-          "type": "option"
-        },
         "autoReload": {
           "char": "r",
           "description": "Automatically reload FiveM resource after build.",
@@ -96,5 +79,5 @@
       "summary": "Build the FiveM resource using predefined config."
     }
   },
-  "version": "0.0.18"
+  "version": "0.0.20"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jpp-toolkit/plugin-build-fivem",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Plugin that add the fivem build command to the jpp cli.",
   "keywords": [
     "jpp",
@@ -36,9 +36,10 @@
   "dependencies": {
     "@oclif/core": "4.8.0",
     "@rspack/core": "1.6.8",
-    "@jpp-toolkit/core": "0.0.17",
-    "@jpp-toolkit/rspack-config": "0.0.7",
-    "@jpp-toolkit/utils": "0.0.15"
+    "@rspack/dev-server": "1.1.4",
+    "@jpp-toolkit/core": "0.0.19",
+    "@jpp-toolkit/rspack-config": "0.0.9",
+    "@jpp-toolkit/utils": "0.0.17"
   },
   "devDependencies": {
     "oclif": "4.22.57"

package/src/fivem-build-command.ts

@@ -1,19 +1,20 @@
 import path from 'node:path';
 
 import { Command } from '@jpp-toolkit/core';
-import { createFivemRspackConfig } from '@jpp-toolkit/rspack-config';
-import { getErrMsg } from '@jpp-toolkit/utils';
+import {
+    createFivemScriptRspackConfig,
+    createFivemUiRspackConfig,
+} from '@jpp-toolkit/rspack-config';
+import { debounce } from '@jpp-toolkit/utils';
 import { Flags } from '@oclif/core';
-import type { MultiStats } from '@rspack/core';
+import type { MultiStats, Stats } from '@rspack/core';
 import { rspack } from '@rspack/core';
+import { RspackDevServer } from '@rspack/dev-server';
 
 import { refreshAndEnsureFivemResource } from './fivem-rcon';
 import type { RconOptions } from './fivem-rcon';
 
-type Environment = 'development' | 'production';
-
 type FivemBuildCommandOptions = {
-    readonly env: Environment;
     readonly resourceName: string;
     readonly rconOptions?: RconOptions | undefined;
     readonly watch: boolean;
@@ -28,12 +29,6 @@ export class FivemBuildCommand extends Command {
             description: 'Watch files for changes and rebuild automatically.',
             default: false,
         }),
-        env: Flags.string({
-            char: 'e',
-            description: 'Set the build environment (development or production).',
-            options: ['development', 'production'],
-            required: false,
-        }),
         autoReload: Flags.boolean({
             char: 'r',
             description: 'Automatically reload FiveM resource after build.',
@@ -67,10 +62,6 @@ export class FivemBuildCommand extends Command {
             description: 'Build the FiveM resource in watch mode.',
             command: '<%= config.bin %> <%= command.id %> --watch',
         },
-        {
-            description: 'Build the FiveM resource in production environment.',
-            command: '<%= config.bin %> <%= command.id %> --env=production',
-        },
         {
             description:
                 'Build the FiveM resource and automatically reload it on the server after build.',
@@ -92,48 +83,72 @@ export class FivemBuildCommand extends Command {
     ];
 
     public async run(): Promise<void> {
-        const { env, resourceName, rconOptions, watch } = await this._parseOptions();
-
-        const config = createFivemRspackConfig({ environment: env, resourceName });
-        const compiler = rspack(config);
-
-        const reloadFivemResource = async () => {
+        const { resourceName, rconOptions, watch } = await this._parseOptions();
+
+        const scriptConfig = createFivemScriptRspackConfig(undefined, {
+            isProduction: !watch,
+        })({
+            RSPACK_BUILD: !watch,
+            RSPACK_WATCH: watch,
+        });
+        const scriptCompiler = rspack(scriptConfig);
+
+        const uiConfig = createFivemUiRspackConfig(
+            { resourceName },
+            { isProduction: !watch },
+        )({
+            RSPACK_BUILD: !watch,
+            RSPACK_SERVE: watch,
+        });
+        const uiCompiler = rspack(uiConfig);
+
+        const reloadFivemResource = debounce(async () => {
             if (!rconOptions) return;
+            this.logger.log('');
             this.logger.info(`Reloading FiveM resource "${resourceName}"...`);
             try {
                 await refreshAndEnsureFivemResource(resourceName, rconOptions);
                 this.logger.success(`FiveM resource reloaded successfully.\n`);
             } catch (error) {
-                this.logger.error(`Failed to reload FiveM resource: ${getErrMsg(error)}\n`);
+                this.logger.error(`Failed to reload FiveM resource: ${error}\n`);
             }
-        };
+        }, 500);
 
-        const compilerCallback = (err: Error | null, stats: MultiStats | undefined) => {
+        const compilerCallback = (err: Error | null, stats: Stats | MultiStats | undefined) => {
             if (err) {
-                this.logger.error(getErrMsg(err));
-                if ('details' in err) this.logger.error(err.details as string);
-                if ('stack' in err) this.logger.error(err.stack);
+                this.logger.error(err.toString());
                 return;
             }
-
-            if (stats) this.logger.log(stats.toString(true), '\n');
-
+            if (!stats) return;
+            this.logger.log(stats.toString({ preset: 'normal', colors: true }), '\n');
             void reloadFivemResource();
         };
 
         if (watch) {
-            this.logger.info(`Building FiveM resource in watch mode...\n`);
-            compiler.watch({}, compilerCallback);
+            const devServerOptions = uiConfig.devServer ?? {};
+            devServerOptions.hot = true;
+            const devServer = new RspackDevServer(devServerOptions, uiCompiler);
+            await devServer.start();
+            scriptCompiler.watch({}, compilerCallback);
         } else {
-            this.logger.info(`Building FiveM resource...\n`);
-            compiler.run(compilerCallback);
+            uiCompiler.run((error: Error | null, stats: Stats | MultiStats | undefined) => {
+                uiCompiler.close((closeErr) => {
+                    if (closeErr) this.logger.error(closeErr.toString());
+                    compilerCallback(error, stats);
+                });
+            });
+            scriptCompiler.run((error: Error | null, stats: Stats | MultiStats | undefined) => {
+                scriptCompiler.close((closeErr) => {
+                    if (closeErr) this.logger.error(closeErr.toString());
+                    compilerCallback(error, stats);
+                });
+            });
         }
     }
 
     private async _parseOptions(): Promise<FivemBuildCommandOptions> {
         const { flags } = await this.parse(FivemBuildCommand);
 
-        const env = (flags.env ?? (flags.watch ? 'development' : 'production')) as Environment;
         const resourceName = flags.resourceName ?? path.basename(process.cwd());
 
         let rconOptions: RconOptions | undefined;
@@ -161,6 +176,6 @@ export class FivemBuildCommand extends Command {
             };
         }
 
-        return { env, resourceName, rconOptions, watch: flags.watch };
+        return { resourceName, rconOptions, watch: flags.watch };
     }
 }