feat: integrate rspack

build/webpack/cache.js

@@ -9,28 +9,24 @@
 'use strict';
 
 const
-	{webpack} = require('@config/config'),
-	{cacheDir} = include('build/helpers');
+	{webpack} = require('@config/config');
 
 /**
  * Returns parameters for `webpack.cache`
  *
  * @param {(number|string)} buildId
  * @returns {(object|boolean)}
+ * @throws {Error}
  */
-module.exports = function cache({buildId}) {
+module.exports = function cache() {
 	switch (webpack.cacheType()) {
 		case 'mem':
 		case 'memory':
-			return {type: 'memory'};
+			return true;
 
 		case 'fs':
 		case 'filesystem':
-			return {
-				name: String(buildId),
-				type: 'filesystem',
-				cacheDirectory: cacheDir
-			};
+			throw new Error('Filesystem cache not supported in rspack');
 
 		default:
 			return false;

build/webpack/custom/options.js

@@ -8,14 +8,15 @@
 
 'use strict';
 
-const {webpack} = require('@config/config');
+// const {webpack} = require('@config/config');
 
 /**
  * Returns options for other webpack options
  * @returns {object}
  */
 module.exports = function other() {
 	return {
-		parallelism: webpack.moduleParallelism()
+		// Unsupported in rspack
+		// parallelism: webpack.moduleParallelism()
 	};
 };

build/webpack/module/rules/js.js

@@ -33,7 +33,7 @@ module.exports = function jsRules() {
 		exclude: isExternalDep,
 		use: [
 			{
-				loader: 'swc-loader',
+				loader: 'builtin:swc-loader',
 				options: swcOptions.js
 			},
 			{

build/webpack/module/rules/ss.js

@@ -29,7 +29,7 @@ module.exports = function ssRules() {
 		test: /\.ss$/,
 		use: [
 			{
-				loader: 'swc-loader',
+				loader: 'builtin:swc-loader',
 				options: swcOptions.ss
 			},
 			{

build/webpack/module/rules/styl.js

@@ -10,7 +10,7 @@
 
 const
 	config = require('@config/config'),
-	MiniCssExtractPlugin = require('mini-css-extract-plugin');
+	rspack = require('@rspack/core');
 
 const
 	{webpack} = config,
@@ -29,7 +29,7 @@ const
  * @returns {import('webpack').RuleSetRule}
  */
 module.exports = function stylRules({plugins}) {
-	plugins.set('extractCSS', new MiniCssExtractPlugin(inherit(config.miniCssExtractPlugin(), {
+	plugins.set('extractCSS', new rspack.CssExtractRspackPlugin(inherit(config.miniCssExtractPlugin(), {
 		filename: `${hash(output, true)}.css`,
 		chunkFilename: '[id].css'
 	})));
@@ -95,7 +95,7 @@ function styleHelperLoaders(isStatic = false) {
 		usePureCSSFiles = isStatic || useLink;
 
 	return [].concat(
-		usePureCSSFiles ? MiniCssExtractPlugin.loader : [],
+		usePureCSSFiles ? rspack.CssExtractRspackPlugin.loader : [],
 
 		[
 			{

build/webpack/module/rules/ts.js

@@ -39,7 +39,7 @@ module.exports = function tsRules() {
 		exclude: isExternalDep,
 		use: [].concat(
 			{
-				loader: 'swc-loader',
+				loader: 'builtin:swc-loader',
 				options: webpack.swc().ts
 			},
 

build/webpack/plugins.js

@@ -13,7 +13,8 @@ const
 
 const
 	config = require('@config/config'),
-	webpack = require('webpack');
+	webpack = require('webpack'),
+	rspack = require('@rspack/core');
 
 /**
  * Returns parameters for `webpack.plugins`
@@ -36,7 +37,7 @@ module.exports = async function plugins({name}) {
 		StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default;
 
 	const plugins = new Map([
-		['globals', new webpack.DefinePlugin(await $C(globals).async.map())],
+		['globals', new rspack.DefinePlugin(await $C(globals).async.map())],
 		['ignoreNotFoundExport', new IgnoreInvalidWarningsPlugin()],
 		['i18nGeneratorPlugin', new I18NGeneratorPlugin()],
 		['invalidateExternalCache', new InvalidateExternalCachePlugin()]

build/webpack/plugins/i18n-plugin/index.js

@@ -16,6 +16,8 @@ const
 const
 	{src, i18n, locale, webpack} = require('@config/config');
 
+const {LANG_KEYSETS} = include('build/globals.webpack.js');
+
 module.exports = class I18NGeneratorPlugin {
 	/**
 	 * This WebPack plugin allows the integration of internationalization files
@@ -35,7 +37,8 @@ module.exports = class I18NGeneratorPlugin {
 					locales = i18n.supportedLocales(),
 					// Extract translates from DefinePlugin
 					// translates declared in build/globals.webpack.js
-					localizations = JSON.parse(compilation.valueCacheVersions.get('webpack/DefinePlugin LANG_KEYSETS'));
+					// NOTE: compilation.valueCacheVersions is private API
+					localizations = JSON.parse(LANG_KEYSETS);
 
 				const htmlFiles = () =>
 					glob.sync(path.normalize(src.clientOutput('*.html')), {

build/webpack/plugins/ignore-invalid-warnings.js

@@ -20,23 +20,24 @@ module.exports = class IgnoreInvalidWarningsPlugin {
 
 		compiler.hooks.infrastructureLog.tap('IgnoreInvalidWarningsPlugin', infrastructureLogHook);
 
-		function doneHook(stats) {
-			stats.compilation.warnings = stats.compilation.warnings.filter((warn) => {
-				switch (warn.constructor.name) {
-					// @see https://github.com/TypeStrong/ts-loader/issues/653
-					// @see https://github.com/jaredwray/keyv/issues/45
-					case 'ModuleDependencyWarning':
-						return !/export '.*'( \(reexported as '.*'\))? was not found in/.test(warn.message) &&
-									!/Critical dependency: the request of a dependency is an expression/.test(warn.message);
-
-					// `require.context` goes fucking crazy :(
-					case 'ModuleNotFoundError':
-						return !/Can't resolve '(?:rc|ode_modules)/.test(warn.message);
-
-					default:
-						return true;
-				}
-			});
+		function doneHook() {
+			// FIXME: unable to modify in rspack
+			// stats.compilation.warnings = stats.compilation.warnings.filter((warn) => {
+			// 	switch (warn.constructor.name) {
+			// 		// @see https://github.com/TypeStrong/ts-loader/issues/653
+			// 		// @see https://github.com/jaredwray/keyv/issues/45
+			// 		case 'ModuleDependencyWarning':
+			// 			return !/export '.*'( \(reexported as '.*'\))? was not found in/.test(warn.message) &&
+			// 						!/Critical dependency: the request of a dependency is an expression/.test(warn.message);
+
+			// 		// `require.context` goes fucking crazy :(
+			// 		case 'ModuleNotFoundError':
+			// 			return !/Can't resolve '(?:rc|ode_modules)/.test(warn.message);
+
+			// 		default:
+			// 			return true;
+			// 	}
+			// });
 		}
 
 		function infrastructureLogHook(origin, type, args) {

build/webpack/plugins/progress-plugin/index.js

@@ -9,7 +9,7 @@
 'use strict';
 
 const
-	webpack = require('webpack');
+	rspack = require('@rspack/core');
 
 const
 	ProgressbarView = include('build/webpack/plugins/progress-plugin/progressbar-view');
@@ -23,10 +23,10 @@ let
  * @param {string} processName
  * @returns {import('webpack').ProgressPlugin}
  */
-module.exports = function createProgressPlugin(processName) {
+module.exports = function createProgressPlugin() {
 	if (logger == null) {
 		logger = new ProgressbarView();
 	}
 
-	return new webpack.ProgressPlugin(logger.getProgressHandler(processName));
+	return new rspack.ProgressPlugin();
 };

config/default.js

@@ -383,7 +383,8 @@ module.exports = config.createConfig({dirs: [__dirname, 'client']}, {
 		 * @returns {?string}
 		 */
 		hashFunction() {
-			return this.mode() !== 'production' || this.fatHTML() ? undefined : this.config.build.hashAlg;
+			// FIXME: only md4 and xxhash64 are suported
+			return this.mode() !== 'production' || this.fatHTML() ? undefined : 'md4';
 		},
 
 		/**
@@ -600,7 +601,8 @@ module.exports = config.createConfig({dirs: [__dirname, 'client']}, {
 		 */
 		externals() {
 			return {
-				vue: this.config.webpack.ssr ? 'vue' : 'root Vue',
+				// FIXME: imports from Vue not working in rspack
+				// vue: this.config.webpack.ssr ? 'vue' : 'root Vue',
 				jsdom: 'jsdom',
 				eventemitter2: 'EventEmitter2',
 				setimmediate: 'setImmediate'

package.json

@@ -33,6 +33,7 @@
     "build:hydration": "npx webpack --env hydration=true",
     "dev": "gulp build:tsconfig && webpack --watch",
     "dev:file": "gulp build:tsconfig && webpack --watch --env public-path",
+    "dev:rspack": "gulp build:tsconfig && cross-env NODE_ENV=development rspack build --watch",
     "test": "yarn test:typescript && yarn test:eslint && yarn test:unit && yarn test:jest",
     "test:server": "cross-env NODE_OPTIONS=\"-r @v4fire/core/build/tsnode.js\" node tests/server",
     "test:unit": "cross-env NODE_OPTIONS=\"-r @v4fire/core/build/tsnode.js\" npx playwright test --config tests/config/unit/index.ts",
@@ -152,6 +153,8 @@
   },
   "devDependencies": {
     "@playwright/test": "1.32.1",
+    "@rspack/cli": "^1.0.0",
+    "@rspack/core": "^1.0.0",
     "@storybook/addon-essentials": "7.0.23",
     "@storybook/addon-interactions": "7.0.23",
     "@storybook/addon-links": "7.0.23",

rspack.config.js

@@ -0,0 +1,106 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+'use strict';
+
+const
+	$C = require('collection.js'),
+	{webpack, build} = require('@config/config');
+
+const
+	{tracer} = include('build/helpers/tracer'),
+	{wrapLoaders} = include('build/webpack/loaders/measure-loader');
+
+/**
+ * Returns WebPack configuration for the specified entry
+ *
+ * @param {object} entry - parameters from `webpack.entry`
+ * @param {(number|string)} buildId
+ * @returns {object}
+ */
+async function buildFactory(entry, buildId) {
+	await include('build/webpack/custom/preconfig');
+
+	const {
+		name,
+		entries,
+		dependencies
+	} = entry;
+
+	const webpackEntry = await $C(entries)
+		.parallel()
+		.map((src, name) => include('build/webpack/entry')(name, src));
+
+	const
+		plugins = await include('build/webpack/plugins')({buildId, name}),
+		modules = await include('build/webpack/module')({buildId, plugins}),
+		target = await include('build/webpack/target');
+
+	/** @type {import('webpack').Configuration} */
+	const config = {
+		name,
+
+		entry: webpackEntry,
+		output: await include('build/webpack/output')({buildId}),
+
+		resolve: await include('build/webpack/resolve'),
+		resolveLoader: await include('build/webpack/resolve-loader'),
+		externals: await include('build/webpack/externals')({buildId}),
+
+		module: {...modules, rules: [...modules.rules.values()]},
+		plugins: [...plugins.values()],
+
+		mode: webpack.mode(),
+		optimization: await include('build/webpack/optimization')({buildId, plugins}),
+
+		devtool: await include('build/webpack/devtool'),
+		cache: await include('build/webpack/cache')({buildId}),
+		watchOptions: include('build/webpack/watch-options'),
+		snapshot: include('build/webpack/snapshot'),
+		stats: include('build/webpack/stats'),
+
+		...await include('build/webpack/custom/options')({buildId})
+	};
+
+	if (build.trace()) {
+		wrapLoaders(config.module.rules);
+	}
+
+	if (target != null) {
+		config.target = target;
+	}
+
+	if (dependencies) {
+		config.dependencies = dependencies;
+	}
+
+	return config;
+}
+
+/**
+ * A list of promises with WebPack configs
+ */
+const tasks = (async () => {
+	await include('build/snakeskin');
+
+	const {processes} = await include('build/graph');
+
+	const done = tracer.measure('Generate webpack config', {cat: ['config']});
+
+	const
+		tasks = await $C(processes).async
+			.filter((item) => !Object.isEmpty(item.entries))
+			.map((el, i) => buildFactory(el, i));
+
+	done();
+
+	globalThis.WEBPACK_CONFIG = tasks;
+	return tasks;
+})();
+
+module.exports = tasks;