Merge pull request #279 from core-ds/feat/rspack

feat(*): rspack

.changeset/fresh-pigs-rush.md

@@ -0,0 +1,24 @@
+---
+'arui-scripts': major
+---
+
+- Теперь как основной сборочный инструмент используется rspack.
+
+Для большинства проектов миграция должна пройти максимально незаметно, rspack сохраняет обратную совместимость с webpack
+в большинстве случаев. Подробнее о несовместимых изменениях можно почитать в документации [rspack](https://rspack.dev/guide/migration/webpack).
+Наибольший прирост в производительности можно получить при использовании `swc` как [codeLoader](https://github.com/core-ds/arui-scripts/blob/master/packages/arui-scripts/docs/settings.md#codeLoader).
+
+- Изменен дефолт для настройки `codeLoader`. Теперь по умолчанию используется `swc`. Для возврата к предыдущему поведению используйте `babel`.
+- Изменен дефолт для настройки `jestCodeTransformer`. Теперь по умолчанию используется `swc`.
+- Удалена опция `jestUseTsJest`. Используйте настройку `jestCodeTransformer` со значением `tsc` как замену.
+- Удалена опция `useTscLoader`. Используйте настройку `codeLoader` со значением `tsc` как замену.
+- Изменен формат настройки [`proxy`](https://github.com/core-ds/arui-scripts/blob/master/packages/arui-scripts/docs/settings.md#proxy) - теперь она
+принимает массив объектов, а не объект. arui-scripts попробует преобразовать конфигурацию старого формата в новый, но рекомендуется обновить конфигурацию самостоятельно.
+- Удалена опция `webpack4Compatibility`.
+- Если вы использовали `babel-plugin-istanbul` для сбора code coverage - с настройками по умолчанию это больше не будет работать из-за замены babel на swc.
+Рекомендуется использовать настройку [collectCoverage](https://github.com/core-ds/arui-scripts/blob/master/packages/arui-scripts/docs/settings.md#collectcoverage).
+- Команда [bundle-analyze](https://github.com/core-ds/arui-scripts/blob/master/packages/arui-scripts/docs/commands.md#bundle-analyze) теперь так же запускает [rsdoctor](https://rsdoctor.dev/).
+- Изменен дефолт для `devSourceMaps`, теперь по умолчанию используется `inline-cheap-source-map`.
+
+При активном использовании оверрайдов скорее всего вы столкнетесь с различиями в конфигурациях. Информацию о том, как
+мигрировать с webpack на rspack, и о различиях в их конфигурациях можно найти в [документации rspack](https://rspack.dev/guide/migration/webpack).

packages/arui-scripts/docs/commands.md

@@ -119,7 +119,7 @@ arui-scripts archive-build
 
 ### bundle-analyze
 
-Запускает [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) для анализа размера бандлов.
+Запускает [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) и [rsdoctor](https://rsdoctor.dev/) для анализа бандла и сборки.
 Так же при запуске будет генерироваться [stats-файл](https://webpack.js.org/api/stats/), который можно использовать в
 [сторонних](http://webpack.github.io/analyse/) инструментах, например для понимания почему тот или иной модуль попал в бандл.
 По умолчанию файл будет писаться в `.build/stats.json`, вы можете поменять это через отдельную [настройку statsOutputFilename](settings.md#statsOutputFilename).

packages/arui-scripts/docs/settings.md

@@ -67,7 +67,7 @@ ARUI_SCRIPTS_CONFIG="{\"clientEntry\":{\"mobile\":\"./src/mobile\",\"desktop\":\
 Режим отладки, в котором не выполняются некоторые нежелательные операции и выводится больше сообщений об ошибках, по умолчанию `false`.
 
 #### devSourceMaps
-Какой вид source-map использовать в режиме разработки. По умолчанию `eval`. Эта настройка может сильно влиять на время сборки.
+Какой вид source-map использовать в режиме разработки. По умолчанию `inline-cheap-source-map`. Эта настройка может сильно влиять на время сборки.
 Подробнее можно почитать [здесь](https://webpack.js.org/configuration/devtool/).
 
 :warning: **Внимание**. При использовании любых source-map на основании eval webpack-dev-server будет
@@ -87,7 +87,7 @@ ARUI_SCRIPTS_CONFIG="{\"clientEntry\":{\"mobile\":\"./src/mobile\",\"desktop\":\
 Пресеты, которые будут использоваться для настройки сборки. См. [пресеты](presets.md).
 
 #### proxy
-Позволяет настроить проксирование запросов в dev-режиме. По умолчанию `null`. Так же этот параметр можно задать в `package.json`.
+Позволяет настроить проксирование запросов в dev-режиме. По умолчанию `[]`. Так же этот параметр можно задать в `package.json`.
 
 В случае, если ваш фронт должен обращаться к API, отличному от вашего nodejs сервера, в **дев режиме** вы можете настроить проксирование запросов.
 
@@ -97,21 +97,22 @@ ARUI_SCRIPTS_CONFIG="{\"clientEntry\":{\"mobile\":\"./src/mobile\",\"desktop\":\
 import { PackageSettings } from 'arui-scripts';
 
 const settings: PackageSettings = {
-    proxy: {
-        '/corp-shared-ui': {
+    proxy: [
+        {
+            context: '/corp-shared-ui',
             target: 'http://some-other-host',
             headers: {
                 host: 'some-other-host',
             },
         },
-    }
+    ],
 };
 
 export default settings;
 ```
 
 Такая конфигурация будет проксировать запросы к `http://localhost:8080/corp-shared-ui/` на `http://some-other-host/corp-shared-ui`.
-Подробнее о конфигурации прокси сервера можно почитать в [документации Webpack](https://webpack.js.org/configuration/dev-server/#devserver-proxy).
+Подробнее о конфигурации прокси сервера можно почитать в [документации rspack](https://rspack.dev/guide/features/dev-server#proxy).
 
 :warning: Эта настройка работает только в **дев режиме**.
 
@@ -212,22 +213,8 @@ const settings = {
 - `/^react-style-proptype$/`
 - `/^thrift-services\/proptypes/`
 
-#### useTscLoader
-**Deprecated** Используйте настройку [codeLoader](#codeloader)
-
-Использовать ts-loader вместо babel-loader для обработки ts файлов. **Не рекомендуется к использованию**.
-
-babel-loader является предпочтительным инструментом сборки, его стоят заменять только если в вашем проекте используется неподдерживаемый им синтаксис:
-
-- namespaces
-- Кастинг типов через `<Type>value`
-- enum merging
-- legacy import/export (`import = require('module')`, `export = foo`)
-
-Рекомендуется обновить код проекта до поддерживаемого синтаксиса и использовать babel-loader.
-
 #### codeLoader
-Позволяет выбрать какой инструмент использовать для обработки js и ts кода приложения. По умолчанию `babel`.
+Позволяет выбрать какой инструмент использовать для обработки js и ts кода приложения. По умолчанию `swc`.
 
 Возможные значения:
 - `babel` - для всего кода будет использоваться `babel-loader`;
@@ -238,21 +225,11 @@ babel-loader является предпочтительным инструме
 Использование swc позволяет значительно ускорить сборку (до 2 раз на больших проектах), но не будет создавать полностью идентичный с babel код.
 Итоговый бандл может получиться немного больше, чем при использовании babel, но разница полностью компенсируется при использовании сжатия.
 
-#### webpack4Compatibility
-**Deprecated** Эта настройка будет удалена в будущих версиях скриптов
-
-Включить ли режим совместимости с webpack 4. По умолчанию `false`. Подробнее можно почитать в этом [issue](https://github.com/webpack/webpack/issues/14580).
-
 #### installServerSourceMaps
 Добавлять ли в серверную сборку пакет source-map-support. По умолчанию `false`.
 
-#### jestUseTsJest
-**Deprecated** Используйте настройку [jestCodeTransformer](#jestcodetransformer)
-
-Позволяет использовать `ts-jest` вместо `babel-jest` для обработки `ts` файлов при запуске тестов. По умолчанию `false`.
-
 #### jestCodeTransformer
-Позволяет выбрать какой инструмент использовать для обработки js и ts кода приложения при запуске тестов. По умолчанию `babel`.
+Позволяет выбрать какой инструмент использовать для обработки js и ts кода приложения при запуске тестов. По умолчанию `swc`.
 
 Возможные значения:
 - `babel` - для всего кода будет использоваться `babel-jest`;
@@ -262,7 +239,7 @@ babel-loader является предпочтительным инструме
 
 #### collectCoverage
 Добавлять ли инструменты для сборки coverage при сборке. По умолчанию определяется по env переменным - будет выставлено в `true` если `NODE_ENV = 'cypress'` или `USE_ISTANBUL = 'enabled'`.
-Сбор coverage не будет работать при использовании `useTscLoader=true`.
+Сбор coverage не будет работать при использовании `codeLoader=tsc`.
 
 ### Обработка изображений
 #### dataUrlMaxSize

packages/arui-scripts/package.json

@@ -37,7 +37,12 @@
         "@babel/preset-typescript": "^7.23.3",
         "@babel/runtime": "^7.23.8",
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
-        "@swc/core": "1.7.35",
+        "@rsdoctor/rspack-plugin": "0.4.11",
+        "@rspack/cli": "1.1.5",
+        "@rspack/core": "1.1.5",
+        "@rspack/dev-server": "1.0.9",
+        "@rspack/plugin-react-refresh": "^1.0.0",
+        "@swc/core": "1.10.1",
         "@swc/jest": "^0.2.36",
         "assets-webpack-plugin": "7.1.1",
         "autoprefixer": "^10.3.16",
@@ -92,8 +97,8 @@
         "react-dev-utils": "12.0.1",
         "react-refresh": "0.10.0",
         "react-refresh-typescript": "2.0.2",
-        "reload-server-webpack-plugin": "1.0.1",
         "rimraf": "^2.7.1",
+        "rspack-manifest-plugin": "5.0.1",
         "run-script-webpack-plugin": "0.0.11",
         "semver": "^7.5.4",
         "shelljs": "0.8.5",
@@ -106,11 +111,8 @@
         "ts-jest": "28.0.8",
         "ts-loader": "9.4.4",
         "ts-node": "9.1.1",
-        "tsconfig-paths-webpack-plugin": "3.5.1",
-        "webpack": "5.95.0",
         "webpack-bundle-analyzer": "4.10.2",
         "webpack-deduplication-plugin": "^0.0.8",
-        "webpack-dev-server": "4.15.2",
         "webpack-manifest-plugin": "3.2.0",
         "webpack-node-externals": "3.0.0"
     },

packages/arui-scripts/src/commands/build/build-wrapper.ts

@@ -2,20 +2,20 @@
 /* eslint no-console: 0 */
 
 import chalk from 'chalk';
-import webpack from 'webpack';
+import { rspack, Stats, MultiStats, Configuration } from '@rspack/core';
 import formatWebpackMessages from '../util/format-webpack-messages';
 
 type BuildResult = {
-    stats: webpack.Stats | webpack.MultiStats;
+    stats: Stats | MultiStats;
     warnings: string[];
     previousFileSizes: unknown;
 };
 
 function build(
-    config: webpack.Configuration | webpack.Configuration[],
+    config: Configuration | Configuration[],
     previousFileSizes?: unknown,
 ) {
-    let compiler = webpack(config as webpack.Configuration);
+    let compiler = rspack(config);
     return new Promise<BuildResult>((resolve, reject) => {
         compiler.run((err: any, stats: any) => {
             if (err) {

packages/arui-scripts/src/commands/build/client.ts

@@ -2,11 +2,10 @@
 /* eslint no-console: 0 */
 import chalk from 'chalk';
 import printBuildError from 'react-dev-utils/printBuildError';
-import { Configuration, Stats } from 'webpack';
+import { Configuration, Stats, MultiStats } from '@rspack/core';
 import build from './build-wrapper';
 import { calculateAssetsSizes, printAssetsSizes } from '../util/client-assets-sizes';
 import config from '../../configs/webpack.client.prod';
-import { MultiStats } from 'webpack';
 
 console.log(chalk.magenta('Building client...'));
 
@@ -34,10 +33,10 @@ build(config)
 
         if (Array.isArray(config)) {
             config.forEach((conf, index) =>
-                printOutputSizes(conf, (stats as MultiStats).stats[index]),
+                printOutputSizes(conf as any, (stats as MultiStats).stats[index]),
             );
         } else {
-            printOutputSizes(config, stats as Stats);
+            printOutputSizes(config as any, stats as Stats);
         }
     })
     .catch((err) => {

packages/arui-scripts/src/commands/bundle-analyze/index.ts

@@ -1,6 +1,7 @@
 // TODO: remove eslint-disable
 /* eslint-disable no-param-reassign */
-import webpack from 'webpack';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
+import { rspack, WebpackPluginInstance } from '@rspack/core';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
 import { configs } from '../../configs/app-configs';
@@ -19,7 +20,8 @@ import makeTmpDir from '../util/make-tmp-dir';
                 generateStatsFile: true,
                 statsFilename: configs.statsOutputPath,
                 analyzerPort: 'auto',
-            }) as unknown as webpack.WebpackPluginInstance, // webpack-bundle-analyzer has incorrect types
+            }) as unknown as WebpackPluginInstance, // webpack-bundle-analyzer has incorrect types
+            new RsdoctorRspackPlugin({}),
         ];
         webpackConfig.output = {
             ...webpackConfig.output,
@@ -29,5 +31,5 @@ import makeTmpDir from '../util/make-tmp-dir';
 
     await Promise.all(promises);
 
-    webpack(clientWebpackConfigs).run(() => {});
+    rspack(clientWebpackConfigs).run(() => {});
 })();

packages/arui-scripts/src/commands/util/client-assets-sizes.ts

@@ -2,11 +2,11 @@
 import fs from 'fs';
 import path from 'path';
 
+import { Stats } from '@rspack/core';
 import chalk from 'chalk';
 import filesize from 'filesize';
 import { sync as gzipSize } from 'gzip-size';
 import stripAnsi from 'strip-ansi';
-import { Stats } from 'webpack';
 
 let brotliSize: (content: Buffer) => number = () => NaN;
 

packages/arui-scripts/src/commands/util/run-client-dev-server.ts

@@ -1,13 +1,13 @@
 import { choosePort } from 'react-dev-utils/WebpackDevServerUtils';
-import webpack, { Configuration } from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
+import { Configuration, rspack } from '@rspack/core';
+import { RspackDevServer } from '@rspack/dev-server';
 
 import devServerConfig from '../../configs/dev-server';
 import printCompilerOutput from '../start/print-compiler-output';
 
 export async function runClientDevServer(configuration: Configuration | Configuration[]) {
-    const clientCompiler = webpack(configuration as Configuration); // типы вебпака не умеют выбирать между конфигурациями и массивом конфигураций
-    const clientDevServer = new WebpackDevServer(devServerConfig, clientCompiler as any);
+    const clientCompiler = rspack(configuration);
+    const clientDevServer = new RspackDevServer(devServerConfig, clientCompiler);
 
     clientCompiler.hooks.invalid.tap('client', () => console.log('Compiling client...'));
     clientCompiler.hooks.done.tap('client', (stats: any) => printCompilerOutput('Client', stats));

packages/arui-scripts/src/commands/util/run-server-watch-compiler.ts

@@ -1,10 +1,11 @@
-import webpack from 'webpack';
+import { Configuration,rspack } from '@rspack/core';
 
 import configs from '../../configs/app-configs';
 import printCompilerOutput from '../start/print-compiler-output';
 
-export function runServerWatchCompiler(config: webpack.Configuration) {
-    const serverCompiler = webpack(config);
+export function runServerWatchCompiler(config: Configuration) {
+
+    const serverCompiler = rspack(config);
 
     serverCompiler.hooks.compile.tap('server', () => console.log('Compiling server...'));
     serverCompiler.hooks.invalid.tap('server', () => console.log('Compiling server...'));

packages/arui-scripts/src/configs/app-configs/calculate-dependent-config.ts

@@ -13,8 +13,6 @@ import { AppConfigs, AppContext } from './types';
 export function calculateDependentConfig(config: AppConfigs): AppConfigs {
     return {
         ...config,
-        codeLoader: config.useTscLoader ? 'tsc' : config.codeLoader,
-        jestCodeTransformer: config.jestUseTsJest ? 'tsc' : config.jestCodeTransformer,
         clientPolyfillsEntry: getPolyfills(config),
     };
 }

packages/arui-scripts/src/configs/app-configs/get-defaults.ts

@@ -21,11 +21,11 @@ export function getDefaultAppConfig(): AppConfigs {
         clientServerPort: 8080,
         serverPort: 3000,
         debug: false,
-        devSourceMaps: 'eval',
+        devSourceMaps: 'inline-cheap-source-map', // так получаются нормальные сорсмапы, с eval - они не работают
         devServerCors: false,
         useServerHMR: false,
         presets: configFile?.presets || appPackage?.aruiScripts?.presets || null,
-        proxy: appPackage.proxy || null,
+        proxy: appPackage.proxy || [],
         clientOnly: false,
 
         // paths
@@ -50,13 +50,10 @@ export function getDefaultAppConfig(): AppConfigs {
 
         // build tuning
         keepPropTypes: false,
-        useTscLoader: false,
-        codeLoader: 'babel',
-        webpack4Compatibility: false,
+        codeLoader: 'swc',
         installServerSourceMaps: false,
         disableDevWebpackTypecheck: true,
-        jestUseTsJest: false,
-        jestCodeTransformer: 'babel',
+        jestCodeTransformer: 'swc',
         collectCoverage: process.env.NODE_ENV === 'cypress' || process.env.USE_ISTANBUL === 'enabled',
 
         // image processing