@jpp-toolkit/rspack-config 0.0.3 → 0.0.4

package/dist/index.d.mts

@@ -1,10 +1,19 @@
 import { RspackOptions } from "@rspack/core";
 
-//#region src/create-fivem-rspack-config.d.ts
-declare function createFivemRspackConfig(overrides?: RspackOptions): RspackOptions;
+//#region src/enums/environment.d.ts
+declare const Environment: {
+  readonly DEVELOPMENT: "development";
+  readonly PRODUCTION: "production";
+};
+type Environment = (typeof Environment)[keyof typeof Environment];
 //#endregion
-//#region src/utils/merge-config.d.ts
-declare const mergeConfig: (firstConfiguration: object | object[], ...configurations: object[]) => object;
+//#region src/create-fivem-rspack-config.d.ts
+type CreateFivemRspackConfigOptions = {
+  readonly resourceName?: string | undefined;
+  readonly environment?: Environment | undefined;
+  readonly cwd?: string | undefined;
+};
+declare function createFivemRspackConfig(options?: CreateFivemRspackConfigOptions): RspackOptions[];
 //#endregion
-export { createFivemRspackConfig, mergeConfig };
+export { CreateFivemRspackConfigOptions, createFivemRspackConfig };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -1,52 +1,57 @@
-import { existsSync } from "node:fs";
 import path from "node:path";
-import { mergeWithRules } from "webpack-merge";
+import { rspack } from "@rspack/core";
+import { existsSync } from "node:fs";
 
-//#region src/utils/merge-config.ts
-const mergeConfig = mergeWithRules({ module: { rules: {
-	test: "match",
-	use: {
-		loader: "match",
-		options: "merge"
-	}
-} } });
+//#region src/enums/environment.ts
+const Environment = {
+	DEVELOPMENT: "development",
+	PRODUCTION: "production"
+};
+
+//#endregion
+//#region src/enums/fivem-entry-type.ts
+const FivemEntryType = {
+	CLIENT: "client",
+	SERVER: "server",
+	SHARED: "shared",
+	UI: "ui"
+};
+
+//#endregion
+//#region src/utils/find-first-existing-path.ts
+function findFirstExistingPath(possiblePaths) {
+	for (const p of possiblePaths) if (existsSync(p)) return p;
+}
 
 //#endregion
 //#region src/create-fivem-rspack-config.ts
-function createFivemRspackConfig(overrides = {}) {
-	const cwd = overrides.context ?? process.cwd();
-	const mode = overrides.mode ?? (process.env.NODE_ENV === "production" ? "production" : "development");
-	const isProduction = mode === "production";
-	const entries = {};
-	for (const name of [
-		"client",
-		"server",
-		"shared"
-	]) for (const file of [`src/${name}/index.ts`, `src/${name}.ts`]) {
-		const entryPath = path.resolve(cwd, file);
-		if (existsSync(entryPath)) {
-			entries[name] = entryPath;
-			break;
-		}
-	}
-	return mergeConfig({
-		name: "fivem",
+function buildConfig(options) {
+	const { cwd, entry, entryType, resourceName, environment } = options;
+	const htmlTemplateFile = findFirstExistingPath([path.resolve(cwd, `src/${entryType}/index.html`), path.resolve(cwd, `src/${entryType}.html`)]);
+	const publicPath = `https://cfx-nui-${resourceName}/dist/${entryType}/`;
+	const isProduction = environment === "production";
+	const isUi = entryType === FivemEntryType.UI;
+	return {
+		name: `fivem-${entryType}`,
 		context: cwd,
-		target: "node16",
+		target: isUi ? "web" : "node16",
 		devtool: false,
-		mode,
-		entry: entries,
+		mode: environment,
+		entry,
 		output: {
 			clean: true,
-			path: path.resolve(cwd, "dist")
+			path: path.resolve(cwd, "dist", entryType),
+			...isUi ? { publicPath } : {}
 		},
 		optimization: { minimize: isProduction },
 		resolve: {
 			extensions: [
 				".js",
+				".jsx",
+				".ts",
+				".tsx",
 				".json",
-				".wasm",
-				".ts"
+				".wasm"
 			],
 			extensionAlias: {
 				".js": [".ts", ".js"],
@@ -56,13 +61,16 @@ function createFivemRspackConfig(overrides = {}) {
 			tsConfig: path.resolve(cwd, "tsconfig.json")
 		},
 		node: {
-			global: false,
-			__filename: false,
-			__dirname: false
+			global: isUi,
+			__filename: isUi,
+			__dirname: isUi
+		},
+		externalsPresets: {
+			node: !isUi,
+			web: isUi
 		},
-		externalsPresets: { node: true },
 		module: { rules: [{
-			test: /\.(?:ts|cts|mts)$/iu,
+			test: /\.(?:ts|tsx|cts|mts)$/iu,
 			type: "javascript/auto",
 			exclude: [/dist\//u, /node_modules\//u],
 			loader: "builtin:swc-loader",
@@ -70,14 +78,28 @@ function createFivemRspackConfig(overrides = {}) {
 				minify: isProduction,
 				module: { type: "nodenext" },
 				jsc: {
-					target: "es2021",
-					parser: { syntax: "typescript" },
-					transform: { useDefineForClassFields: true },
+					target: isUi ? "es5" : "es2021",
+					parser: {
+						syntax: "typescript",
+						tsx: true
+					},
+					transform: {
+						react: { runtime: "automatic" },
+						useDefineForClassFields: true
+					},
 					keepClassNames: true,
 					externalHelpers: false
 				}
 			}
-		}] },
+		}, ...isUi ? [{
+			test: /\.(?:jpe?g|png|gif|svg)$/iu,
+			type: "asset/resource"
+		}] : []] },
+		...isUi ? { experiments: { css: true } } : {},
+		...isUi && htmlTemplateFile ? { plugins: [new rspack.HtmlRspackPlugin({
+			template: htmlTemplateFile,
+			publicPath
+		})] } : {},
 		watchOptions: {
 			aggregateTimeout: 200,
 			ignored: [
@@ -90,9 +112,29 @@ function createFivemRspackConfig(overrides = {}) {
 				"**/tmp"
 			]
 		}
-	}, overrides);
+	};
+}
+function createFivemRspackConfig(options = {}) {
+	const environment = options.environment ?? (process.env.NODE_ENV === Environment.PRODUCTION ? Environment.PRODUCTION : Environment.DEVELOPMENT);
+	const cwd = options.cwd ?? process.cwd();
+	const resourceName = options.resourceName ?? path.basename(cwd);
+	const configs = [];
+	for (const entryType of Object.values(FivemEntryType)) {
+		const entry = findFirstExistingPath([path.resolve(cwd, `src/${entryType}/index.ts`), path.resolve(cwd, `src/${entryType}.ts`)]);
+		if (!entry) continue;
+		const config = buildConfig({
+			cwd,
+			entry,
+			entryType,
+			environment,
+			resourceName
+		});
+		configs.push(config);
+	}
+	if (configs.length === 0) throw new Error("No valid FiveM resource entries found.");
+	return configs;
 }
 
 //#endregion
-export { createFivemRspackConfig, mergeConfig };
+export { createFivemRspackConfig };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["entries: Record<string, string>"],"sources":["../src/utils/merge-config.ts","../src/create-fivem-rspack-config.ts"],"sourcesContent":["import { mergeWithRules } from 'webpack-merge';\n\nexport const mergeConfig = mergeWithRules({\n    module: {\n        rules: {\n            test: 'match',\n            use: {\n                loader: 'match',\n                options: 'merge',\n            },\n        },\n    },\n});\n","import { existsSync } from 'node:fs';\nimport path from 'node:path';\n\nimport type { RspackOptions } from '@rspack/core';\n\nimport { mergeConfig } from './utils/merge-config';\n\nexport function createFivemRspackConfig(overrides: RspackOptions = {}): RspackOptions {\n    const cwd = overrides.context ?? process.cwd();\n    const mode =\n        overrides.mode ?? (process.env.NODE_ENV === 'production' ? 'production' : 'development');\n    const isProduction = mode === 'production';\n\n    const entries: Record<string, string> = {};\n\n    for (const name of ['client', 'server', 'shared']) {\n        for (const file of [`src/${name}/index.ts`, `src/${name}.ts`]) {\n            const entryPath = path.resolve(cwd, file);\n            if (existsSync(entryPath)) {\n                entries[name] = entryPath;\n                break;\n            }\n        }\n    }\n\n    const config: RspackOptions = {\n        name: 'fivem',\n\n        context: cwd,\n\n        target: 'node16',\n        devtool: false,\n        mode,\n\n        entry: entries,\n\n        output: {\n            clean: true,\n            path: path.resolve(cwd, 'dist'),\n        },\n\n        optimization: {\n            minimize: isProduction,\n        },\n\n        resolve: {\n            extensions: ['.js', '.json', '.wasm', '.ts'],\n            extensionAlias: {\n                '.js': ['.ts', '.js'],\n                '.cjs': ['.cts', '.cjs'],\n                '.mjs': ['.mts', '.mjs'],\n            },\n            tsConfig: path.resolve(cwd, 'tsconfig.json'),\n        },\n\n        node: {\n            global: false,\n            __filename: false,\n            __dirname: false,\n        },\n\n        externalsPresets: {\n            node: true,\n        },\n\n        module: {\n            rules: [\n                {\n                    test: /\\.(?:ts|cts|mts)$/iu,\n                    type: 'javascript/auto',\n                    exclude: [/dist\\//u, /node_modules\\//u],\n                    loader: 'builtin:swc-loader',\n                    options: {\n                        minify: isProduction,\n                        module: {\n                            type: 'nodenext',\n                        },\n                        jsc: {\n                            target: 'es2021',\n                            parser: {\n                                syntax: 'typescript',\n                            },\n                            transform: {\n                                useDefineForClassFields: true,\n                            },\n                            keepClassNames: true,\n                            externalHelpers: false,\n                        },\n                    },\n                },\n            ],\n        },\n\n        watchOptions: {\n            aggregateTimeout: 200,\n            ignored: [\n                '**/.git',\n                '**/.turbo',\n                '**/coverage',\n                '**/dist',\n                '**/generated',\n                '**/old',\n                '**/tmp',\n            ],\n        },\n    };\n\n    return mergeConfig(config, overrides);\n}\n"],"mappings":";;;;;AAEA,MAAa,cAAc,eAAe,EACtC,QAAQ,EACJ,OAAO;CACH,MAAM;CACN,KAAK;EACD,QAAQ;EACR,SAAS;EACZ;CACJ,EACJ,EACJ,CAAC;;;;ACLF,SAAgB,wBAAwB,YAA2B,EAAE,EAAiB;CAClF,MAAM,MAAM,UAAU,WAAW,QAAQ,KAAK;CAC9C,MAAM,OACF,UAAU,SAAS,QAAQ,IAAI,aAAa,eAAe,eAAe;CAC9E,MAAM,eAAe,SAAS;CAE9B,MAAMA,UAAkC,EAAE;AAE1C,MAAK,MAAM,QAAQ;EAAC;EAAU;EAAU;EAAS,CAC7C,MAAK,MAAM,QAAQ,CAAC,OAAO,KAAK,YAAY,OAAO,KAAK,KAAK,EAAE;EAC3D,MAAM,YAAY,KAAK,QAAQ,KAAK,KAAK;AACzC,MAAI,WAAW,UAAU,EAAE;AACvB,WAAQ,QAAQ;AAChB;;;AAuFZ,QAAO,YAlFuB;EAC1B,MAAM;EAEN,SAAS;EAET,QAAQ;EACR,SAAS;EACT;EAEA,OAAO;EAEP,QAAQ;GACJ,OAAO;GACP,MAAM,KAAK,QAAQ,KAAK,OAAO;GAClC;EAED,cAAc,EACV,UAAU,cACb;EAED,SAAS;GACL,YAAY;IAAC;IAAO;IAAS;IAAS;IAAM;GAC5C,gBAAgB;IACZ,OAAO,CAAC,OAAO,MAAM;IACrB,QAAQ,CAAC,QAAQ,OAAO;IACxB,QAAQ,CAAC,QAAQ,OAAO;IAC3B;GACD,UAAU,KAAK,QAAQ,KAAK,gBAAgB;GAC/C;EAED,MAAM;GACF,QAAQ;GACR,YAAY;GACZ,WAAW;GACd;EAED,kBAAkB,EACd,MAAM,MACT;EAED,QAAQ,EACJ,OAAO,CACH;GACI,MAAM;GACN,MAAM;GACN,SAAS,CAAC,WAAW,kBAAkB;GACvC,QAAQ;GACR,SAAS;IACL,QAAQ;IACR,QAAQ,EACJ,MAAM,YACT;IACD,KAAK;KACD,QAAQ;KACR,QAAQ,EACJ,QAAQ,cACX;KACD,WAAW,EACP,yBAAyB,MAC5B;KACD,gBAAgB;KAChB,iBAAiB;KACpB;IACJ;GACJ,CACJ,EACJ;EAED,cAAc;GACV,kBAAkB;GAClB,SAAS;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACH;GACJ;EACJ,EAE0B,UAAU"}
+{"version":3,"file":"index.mjs","names":["configs: RspackOptions[]"],"sources":["../src/enums/environment.ts","../src/enums/fivem-entry-type.ts","../src/utils/find-first-existing-path.ts","../src/create-fivem-rspack-config.ts"],"sourcesContent":["export const Environment = {\n    DEVELOPMENT: 'development',\n    PRODUCTION: 'production',\n} as const;\nexport type Environment = (typeof Environment)[keyof typeof Environment];\n","export const FivemEntryType = {\n    CLIENT: 'client',\n    SERVER: 'server',\n    SHARED: 'shared',\n    UI: 'ui',\n} as const;\nexport type FivemEntryType = (typeof FivemEntryType)[keyof typeof FivemEntryType];\n","import { existsSync } from 'node:fs';\n\nexport function findFirstExistingPath(possiblePaths: string[]): string | undefined {\n    for (const p of possiblePaths) if (existsSync(p)) return p;\n    return undefined;\n}\n","import path from 'node:path';\n\nimport { rspack } from '@rspack/core';\nimport type { RspackOptions } from '@rspack/core';\n\nimport { Environment, FivemEntryType } from './enums';\nimport { findFirstExistingPath } from './utils/find-first-existing-path';\n\ntype BuildConfigOptions = {\n    readonly cwd: string;\n    readonly entry: string;\n    readonly entryType: FivemEntryType;\n    readonly resourceName: string;\n    readonly environment: Environment;\n};\n\nfunction buildConfig(options: BuildConfigOptions): RspackOptions {\n    const { cwd, entry, entryType, resourceName, environment } = options;\n\n    const htmlTemplateFile = findFirstExistingPath([\n        path.resolve(cwd, `src/${entryType}/index.html`),\n        path.resolve(cwd, `src/${entryType}.html`),\n    ]);\n    const publicPath = `https://cfx-nui-${resourceName}/dist/${entryType}/`;\n\n    const isProduction = environment === 'production';\n    const isUi = entryType === FivemEntryType.UI;\n\n    const config: RspackOptions = {\n        name: `fivem-${entryType}`,\n\n        context: cwd,\n\n        target: isUi ? 'web' : 'node16',\n        devtool: false,\n        mode: environment,\n\n        entry,\n\n        output: {\n            clean: true,\n            path: path.resolve(cwd, 'dist', entryType),\n            ...(isUi ? { publicPath } : {}),\n        },\n\n        optimization: {\n            minimize: isProduction,\n        },\n\n        resolve: {\n            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.wasm'],\n            extensionAlias: {\n                '.js': ['.ts', '.js'],\n                '.cjs': ['.cts', '.cjs'],\n                '.mjs': ['.mts', '.mjs'],\n            },\n            tsConfig: path.resolve(cwd, 'tsconfig.json'),\n        },\n\n        node: {\n            global: isUi,\n            __filename: isUi,\n            __dirname: isUi,\n        },\n\n        externalsPresets: {\n            node: !isUi,\n            web: isUi,\n        },\n\n        module: {\n            rules: [\n                {\n                    test: /\\.(?:ts|tsx|cts|mts)$/iu,\n                    type: 'javascript/auto',\n                    exclude: [/dist\\//u, /node_modules\\//u],\n                    loader: 'builtin:swc-loader',\n                    options: {\n                        minify: isProduction,\n                        module: { type: 'nodenext' },\n                        jsc: {\n                            target: isUi ? 'es5' : 'es2021',\n                            parser: {\n                                syntax: 'typescript',\n                                tsx: true,\n                            },\n                            transform: {\n                                react: { runtime: 'automatic' },\n                                useDefineForClassFields: true,\n                            },\n                            keepClassNames: true,\n                            externalHelpers: false,\n                        },\n                    },\n                },\n                ...(isUi ?\n                    [\n                        {\n                            test: /\\.(?:jpe?g|png|gif|svg)$/iu,\n                            type: 'asset/resource',\n                        },\n                    ]\n                :   []),\n            ],\n        },\n\n        ...(isUi ? { experiments: { css: true } } : {}),\n\n        ...(isUi && htmlTemplateFile ?\n            { plugins: [new rspack.HtmlRspackPlugin({ template: htmlTemplateFile, publicPath })] }\n        :   {}),\n\n        watchOptions: {\n            aggregateTimeout: 200,\n            ignored: [\n                '**/.git',\n                '**/.turbo',\n                '**/coverage',\n                '**/dist',\n                '**/generated',\n                '**/old',\n                '**/tmp',\n            ],\n        },\n    };\n\n    return config;\n}\n\nexport type CreateFivemRspackConfigOptions = {\n    readonly resourceName?: string | undefined;\n    readonly environment?: Environment | undefined;\n    readonly cwd?: string | undefined;\n};\n\nexport function createFivemRspackConfig(\n    options: CreateFivemRspackConfigOptions = {},\n): RspackOptions[] {\n    const environment =\n        options.environment\n        ?? (process.env.NODE_ENV === Environment.PRODUCTION ?\n            Environment.PRODUCTION\n        :   Environment.DEVELOPMENT);\n    const cwd = options.cwd ?? process.cwd();\n    const resourceName = options.resourceName ?? path.basename(cwd);\n\n    const configs: RspackOptions[] = [];\n\n    for (const entryType of Object.values(FivemEntryType)) {\n        const entry = findFirstExistingPath([\n            path.resolve(cwd, `src/${entryType}/index.ts`),\n            path.resolve(cwd, `src/${entryType}.ts`),\n        ]);\n\n        if (!entry) continue;\n\n        const config = buildConfig({ cwd, entry, entryType, environment, resourceName });\n        configs.push(config);\n    }\n\n    if (configs.length === 0) throw new Error('No valid FiveM resource entries found.');\n\n    return configs;\n}\n"],"mappings":";;;;;AAAA,MAAa,cAAc;CACvB,aAAa;CACb,YAAY;CACf;;;;ACHD,MAAa,iBAAiB;CAC1B,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,IAAI;CACP;;;;ACHD,SAAgB,sBAAsB,eAA6C;AAC/E,MAAK,MAAM,KAAK,cAAe,KAAI,WAAW,EAAE,CAAE,QAAO;;;;;ACa7D,SAAS,YAAY,SAA4C;CAC7D,MAAM,EAAE,KAAK,OAAO,WAAW,cAAc,gBAAgB;CAE7D,MAAM,mBAAmB,sBAAsB,CAC3C,KAAK,QAAQ,KAAK,OAAO,UAAU,aAAa,EAChD,KAAK,QAAQ,KAAK,OAAO,UAAU,OAAO,CAC7C,CAAC;CACF,MAAM,aAAa,mBAAmB,aAAa,QAAQ,UAAU;CAErE,MAAM,eAAe,gBAAgB;CACrC,MAAM,OAAO,cAAc,eAAe;AAoG1C,QAlG8B;EAC1B,MAAM,SAAS;EAEf,SAAS;EAET,QAAQ,OAAO,QAAQ;EACvB,SAAS;EACT,MAAM;EAEN;EAEA,QAAQ;GACJ,OAAO;GACP,MAAM,KAAK,QAAQ,KAAK,QAAQ,UAAU;GAC1C,GAAI,OAAO,EAAE,YAAY,GAAG,EAAE;GACjC;EAED,cAAc,EACV,UAAU,cACb;EAED,SAAS;GACL,YAAY;IAAC;IAAO;IAAQ;IAAO;IAAQ;IAAS;IAAQ;GAC5D,gBAAgB;IACZ,OAAO,CAAC,OAAO,MAAM;IACrB,QAAQ,CAAC,QAAQ,OAAO;IACxB,QAAQ,CAAC,QAAQ,OAAO;IAC3B;GACD,UAAU,KAAK,QAAQ,KAAK,gBAAgB;GAC/C;EAED,MAAM;GACF,QAAQ;GACR,YAAY;GACZ,WAAW;GACd;EAED,kBAAkB;GACd,MAAM,CAAC;GACP,KAAK;GACR;EAED,QAAQ,EACJ,OAAO,CACH;GACI,MAAM;GACN,MAAM;GACN,SAAS,CAAC,WAAW,kBAAkB;GACvC,QAAQ;GACR,SAAS;IACL,QAAQ;IACR,QAAQ,EAAE,MAAM,YAAY;IAC5B,KAAK;KACD,QAAQ,OAAO,QAAQ;KACvB,QAAQ;MACJ,QAAQ;MACR,KAAK;MACR;KACD,WAAW;MACP,OAAO,EAAE,SAAS,aAAa;MAC/B,yBAAyB;MAC5B;KACD,gBAAgB;KAChB,iBAAiB;KACpB;IACJ;GACJ,EACD,GAAI,OACA,CACI;GACI,MAAM;GACN,MAAM;GACT,CACJ,GACD,EAAE,CACT,EACJ;EAED,GAAI,OAAO,EAAE,aAAa,EAAE,KAAK,MAAM,EAAE,GAAG,EAAE;EAE9C,GAAI,QAAQ,mBACR,EAAE,SAAS,CAAC,IAAI,OAAO,iBAAiB;GAAE,UAAU;GAAkB;GAAY,CAAC,CAAC,EAAE,GACtF,EAAE;EAEN,cAAc;GACV,kBAAkB;GAClB,SAAS;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACH;GACJ;EACJ;;AAWL,SAAgB,wBACZ,UAA0C,EAAE,EAC7B;CACf,MAAM,cACF,QAAQ,gBACJ,QAAQ,IAAI,aAAa,YAAY,aACrC,YAAY,aACZ,YAAY;CACpB,MAAM,MAAM,QAAQ,OAAO,QAAQ,KAAK;CACxC,MAAM,eAAe,QAAQ,gBAAgB,KAAK,SAAS,IAAI;CAE/D,MAAMA,UAA2B,EAAE;AAEnC,MAAK,MAAM,aAAa,OAAO,OAAO,eAAe,EAAE;EACnD,MAAM,QAAQ,sBAAsB,CAChC,KAAK,QAAQ,KAAK,OAAO,UAAU,WAAW,EAC9C,KAAK,QAAQ,KAAK,OAAO,UAAU,KAAK,CAC3C,CAAC;AAEF,MAAI,CAAC,MAAO;EAEZ,MAAM,SAAS,YAAY;GAAE;GAAK;GAAO;GAAW;GAAa;GAAc,CAAC;AAChF,UAAQ,KAAK,OAAO;;AAGxB,KAAI,QAAQ,WAAW,EAAG,OAAM,IAAI,MAAM,yCAAyC;AAEnF,QAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jpp-toolkit/rspack-config",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Rspack configurations for JS/TS projects.",
   "keywords": [
     "jpp",
@@ -31,9 +31,6 @@
     "src"
   ],
   "dependencies": {
-    "webpack-merge": "6.0.1"
-  },
-  "devDependencies": {
     "@rspack/core": "1.6.7"
   },
   "engines": {

package/src/create-fivem-rspack-config.ts

@@ -1,42 +1,46 @@
-import { existsSync } from 'node:fs';
 import path from 'node:path';
 
+import { rspack } from '@rspack/core';
 import type { RspackOptions } from '@rspack/core';
 
-import { mergeConfig } from './utils/merge-config';
+import { Environment, FivemEntryType } from './enums';
+import { findFirstExistingPath } from './utils/find-first-existing-path';
 
-export function createFivemRspackConfig(overrides: RspackOptions = {}): RspackOptions {
-    const cwd = overrides.context ?? process.cwd();
-    const mode =
-        overrides.mode ?? (process.env.NODE_ENV === 'production' ? 'production' : 'development');
-    const isProduction = mode === 'production';
+type BuildConfigOptions = {
+    readonly cwd: string;
+    readonly entry: string;
+    readonly entryType: FivemEntryType;
+    readonly resourceName: string;
+    readonly environment: Environment;
+};
 
-    const entries: Record<string, string> = {};
+function buildConfig(options: BuildConfigOptions): RspackOptions {
+    const { cwd, entry, entryType, resourceName, environment } = options;
 
-    for (const name of ['client', 'server', 'shared']) {
-        for (const file of [`src/${name}/index.ts`, `src/${name}.ts`]) {
-            const entryPath = path.resolve(cwd, file);
-            if (existsSync(entryPath)) {
-                entries[name] = entryPath;
-                break;
-            }
-        }
-    }
+    const htmlTemplateFile = findFirstExistingPath([
+        path.resolve(cwd, `src/${entryType}/index.html`),
+        path.resolve(cwd, `src/${entryType}.html`),
+    ]);
+    const publicPath = `https://cfx-nui-${resourceName}/dist/${entryType}/`;
+
+    const isProduction = environment === 'production';
+    const isUi = entryType === FivemEntryType.UI;
 
     const config: RspackOptions = {
-        name: 'fivem',
+        name: `fivem-${entryType}`,
 
         context: cwd,
 
-        target: 'node16',
+        target: isUi ? 'web' : 'node16',
         devtool: false,
-        mode,
+        mode: environment,
 
-        entry: entries,
+        entry,
 
         output: {
             clean: true,
-            path: path.resolve(cwd, 'dist'),
+            path: path.resolve(cwd, 'dist', entryType),
+            ...(isUi ? { publicPath } : {}),
         },
 
         optimization: {
@@ -44,7 +48,7 @@ export function createFivemRspackConfig(overrides: RspackOptions = {}): RspackOp
         },
 
         resolve: {
-            extensions: ['.js', '.json', '.wasm', '.ts'],
+            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.wasm'],
             extensionAlias: {
                 '.js': ['.ts', '.js'],
                 '.cjs': ['.cts', '.cjs'],
@@ -54,33 +58,34 @@ export function createFivemRspackConfig(overrides: RspackOptions = {}): RspackOp
         },
 
         node: {
-            global: false,
-            __filename: false,
-            __dirname: false,
+            global: isUi,
+            __filename: isUi,
+            __dirname: isUi,
         },
 
         externalsPresets: {
-            node: true,
+            node: !isUi,
+            web: isUi,
         },
 
         module: {
             rules: [
                 {
-                    test: /\.(?:ts|cts|mts)$/iu,
+                    test: /\.(?:ts|tsx|cts|mts)$/iu,
                     type: 'javascript/auto',
                     exclude: [/dist\//u, /node_modules\//u],
                     loader: 'builtin:swc-loader',
                     options: {
                         minify: isProduction,
-                        module: {
-                            type: 'nodenext',
-                        },
+                        module: { type: 'nodenext' },
                         jsc: {
-                            target: 'es2021',
+                            target: isUi ? 'es5' : 'es2021',
                             parser: {
                                 syntax: 'typescript',
+                                tsx: true,
                             },
                             transform: {
+                                react: { runtime: 'automatic' },
                                 useDefineForClassFields: true,
                             },
                             keepClassNames: true,
@@ -88,9 +93,23 @@ export function createFivemRspackConfig(overrides: RspackOptions = {}): RspackOp
                         },
                     },
                 },
+                ...(isUi ?
+                    [
+                        {
+                            test: /\.(?:jpe?g|png|gif|svg)$/iu,
+                            type: 'asset/resource',
+                        },
+                    ]
+                :   []),
             ],
         },
 
+        ...(isUi ? { experiments: { css: true } } : {}),
+
+        ...(isUi && htmlTemplateFile ?
+            { plugins: [new rspack.HtmlRspackPlugin({ template: htmlTemplateFile, publicPath })] }
+        :   {}),
+
         watchOptions: {
             aggregateTimeout: 200,
             ignored: [
@@ -105,5 +124,41 @@ export function createFivemRspackConfig(overrides: RspackOptions = {}): RspackOp
         },
     };
 
-    return mergeConfig(config, overrides);
+    return config;
+}
+
+export type CreateFivemRspackConfigOptions = {
+    readonly resourceName?: string | undefined;
+    readonly environment?: Environment | undefined;
+    readonly cwd?: string | undefined;
+};
+
+export function createFivemRspackConfig(
+    options: CreateFivemRspackConfigOptions = {},
+): RspackOptions[] {
+    const environment =
+        options.environment
+        ?? (process.env.NODE_ENV === Environment.PRODUCTION ?
+            Environment.PRODUCTION
+        :   Environment.DEVELOPMENT);
+    const cwd = options.cwd ?? process.cwd();
+    const resourceName = options.resourceName ?? path.basename(cwd);
+
+    const configs: RspackOptions[] = [];
+
+    for (const entryType of Object.values(FivemEntryType)) {
+        const entry = findFirstExistingPath([
+            path.resolve(cwd, `src/${entryType}/index.ts`),
+            path.resolve(cwd, `src/${entryType}.ts`),
+        ]);
+
+        if (!entry) continue;
+
+        const config = buildConfig({ cwd, entry, entryType, environment, resourceName });
+        configs.push(config);
+    }
+
+    if (configs.length === 0) throw new Error('No valid FiveM resource entries found.');
+
+    return configs;
 }

package/src/enums/environment.ts

@@ -0,0 +1,5 @@
+export const Environment = {
+    DEVELOPMENT: 'development',
+    PRODUCTION: 'production',
+} as const;
+export type Environment = (typeof Environment)[keyof typeof Environment];

package/src/enums/fivem-entry-type.ts

@@ -0,0 +1,7 @@
+export const FivemEntryType = {
+    CLIENT: 'client',
+    SERVER: 'server',
+    SHARED: 'shared',
+    UI: 'ui',
+} as const;
+export type FivemEntryType = (typeof FivemEntryType)[keyof typeof FivemEntryType];

package/src/enums/index.ts

@@ -0,0 +1,2 @@
+export * from './environment';
+export * from './fivem-entry-type';

package/src/index.ts

@@ -1,2 +1 @@
 export * from './create-fivem-rspack-config';
-export * from './utils/merge-config';

package/src/utils/find-first-existing-path.ts

@@ -0,0 +1,6 @@
+import { existsSync } from 'node:fs';
+
+export function findFirstExistingPath(possiblePaths: string[]): string | undefined {
+    for (const p of possiblePaths) if (existsSync(p)) return p;
+    return undefined;
+}

package/src/utils/merge-config.ts

@@ -1,13 +0,0 @@
-import { mergeWithRules } from 'webpack-merge';
-
-export const mergeConfig = mergeWithRules({
-    module: {
-        rules: {
-            test: 'match',
-            use: {
-                loader: 'match',
-                options: 'merge',
-            },
-        },
-    },
-});