@gravity-ui/app-builder 0.11.3 → 0.12.1-beta.0

package/README.md

@@ -205,7 +205,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `options` (`import('https').ServerOptions`) — allow to provide your own certificate.
 - `watchOptions` — a set of options used to customize watch mode, [more](https://webpack.js.org/configuration/watch/#watchoptions)
   - `watchPackages` (`boolean`) - watch all changes in `node_modules`.
-- `disableReactRefresh` (`boolean`) — disable `react-refresh` in dev mode.
+- `reactRefresh` (`false | (options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions`) — disable or configure `react-refresh` in dev mode, [more](https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/API.md#options)
 - `detectCircularDependencies` (`true | CircularDependenciesOptions`) - detect modules with circular dependencies, [more](https://github.com/aackerman/circular-dependency-plugin)
 - `lazyCompilation` (`true | LazyCompilationConfig`) — enable experimental [lazy compilation](https://webpack.js.org/configuration/experiments/#experimentslazycompilation) feature
   - `true` — enable feature
@@ -244,8 +244,8 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 
 - `monaco` (`object`) — use [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin#monaco-editor-webpack-loader-plugin)
 
-  - `fileName` (`string`) — custom filename template for worker scripts
-  - `languages` (`string[]`) - include only a subset of the languages supported.
+  - `fileName` (`string`) — custom filename template for worker scripts.
+  - `languages` (`string[]`) - include only a subset of the languages supported. If you don't need support for all languages, set needed languages explicitly, since it may significantly affect build time.
   - `features` (`string[]`) - include only a subset of the editor features.
   - `customLanguages` (`IFeatureDefinition[]`) - include custom languages (outside of the ones shipped with the `monaco-editor`).
 

package/dist/commands/dev/client.d.ts

@@ -1,3 +1,3 @@
-import WebpackDevServer from 'webpack-dev-server';
+import { RspackDevServer } from '@rspack/dev-server';
 import type { NormalizedServiceConfig } from '../../common/models';
-export declare function watchClientCompilation(config: NormalizedServiceConfig, onCompilationEnd: () => void): Promise<WebpackDevServer>;
+export declare function watchClientCompilation(config: NormalizedServiceConfig, onCompilationEnd: () => void): Promise<RspackDevServer>;

package/dist/commands/dev/client.js

@@ -29,15 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.watchClientCompilation = watchClientCompilation;
 const path = __importStar(require("node:path"));
 const fs = __importStar(require("node:fs"));
-const webpack_1 = __importDefault(require("webpack"));
-const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
-const webpack_manifest_plugin_1 = require("webpack-manifest-plugin");
+const core_1 = require("@rspack/core");
+const dev_server_1 = require("@rspack/dev-server");
+const rspack_manifest_plugin_1 = require("rspack-manifest-plugin");
 const paths_1 = __importDefault(require("../../common/paths"));
 const logger_1 = require("../../common/logger");
 const config_1 = require("../../common/webpack/config");
 async function watchClientCompilation(config, onCompilationEnd) {
     const clientCompilation = await buildWebpackServer(config);
-    const { afterEmit } = (0, webpack_manifest_plugin_1.getCompilerHooks)(clientCompilation.compiler);
+    const { afterEmit } = (0, rspack_manifest_plugin_1.getCompilerHooks)(clientCompilation.compiler);
     afterEmit.tap('app-builder: afterEmit', onCompilationEnd);
     return clientCompilation;
 }
@@ -111,8 +111,8 @@ async function buildWebpackServer(config) {
         });
     }
     options.proxy = proxy;
-    const compiler = (0, webpack_1.default)(webpackConfig);
-    const server = new webpack_dev_server_1.default(options, compiler);
+    const compiler = (0, core_1.rspack)(webpackConfig);
+    const server = new dev_server_1.RspackDevServer(options, compiler);
     try {
         await server.start();
     }

package/dist/common/config.js

@@ -28,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getProjectConfig = getProjectConfig;
 exports.normalizeConfig = normalizeConfig;
+/* eslint-disable complexity */
 const path = __importStar(require("node:path"));
 const lodash_1 = __importDefault(require("lodash"));
 const cosmiconfig_1 = require("cosmiconfig");
@@ -183,6 +184,9 @@ async function normalizeClientConfig(client, mode) {
     const normalizedConfig = {
         ...client,
         forkTsChecker: client.disableForkTsChecker ? false : client.forkTsChecker,
+        reactRefresh: client.disableReactRefresh
+            ? false
+            : client.reactRefresh ?? ((options) => options),
         newJsxTransform: client.newJsxTransform ?? true,
         publicPathPrefix: client.publicPathPrefix || '',
         modules: client.modules && remapPaths(client.modules),

package/dist/common/models/index.d.ts

@@ -2,7 +2,7 @@ import type { EditorLanguage } from 'monaco-editor-webpack-plugin/out/languages'
 import type { EditorFeature } from 'monaco-editor-webpack-plugin/out/features';
 import type { IFeatureDefinition } from 'monaco-editor-webpack-plugin/out/types';
 import type { Options as MomentTzOptions } from 'moment-timezone-data-webpack-plugin';
-import type { Configuration, DefinePlugin, FileCacheOptions, MemoryCacheOptions, ResolveOptions } from 'webpack';
+import type { Configuration, DefinePluginOptions, ResolveOptions } from '@rspack/core';
 import type * as Babel from '@babel/core';
 import type { ServerConfiguration } from 'webpack-dev-server';
 import type { Options as CircularDependenciesOptions } from 'circular-dependency-plugin';
@@ -13,6 +13,7 @@ import type { SentryWebpackPluginOptions } from '@sentry/webpack-plugin';
 import type { WebpackMode } from '../webpack/config';
 import type { UploadOptions } from '../s3-upload/upload';
 import type { TerserOptions } from 'terser-webpack-plugin';
+import type { PluginOptions as ReactRefreshPluginOptions } from '@rspack/plugin-react-refresh';
 export interface Entities<T> {
     data: Record<string, T>;
     keys: string[];
@@ -129,9 +130,13 @@ export interface ClientConfig {
     statoscopeConfig?: Partial<StatoscopeOptions>;
     reactProfiling?: boolean;
     /**
-     *  Disable react-refresh in dev mode
+     * Disable react-refresh in dev mode
+     *
+     * @deprecated use `reactRefresh: false` instead
      */
     disableReactRefresh?: boolean;
+    /** Disable or configure react-refresh in dev mode */
+    reactRefresh?: false | ((options: ReactRefreshPluginOptions) => ReactRefreshPluginOptions);
     /**
      * Detect modules with circular dependencies
      */
@@ -153,7 +158,7 @@ export interface ClientConfig {
     /**
      * Add additional options to DefinePlugin
      */
-    definitions?: DefinePlugin['definitions'];
+    definitions?: DefinePluginOptions;
     watchOptions?: Configuration['watchOptions'] & {
         /**
          * watch changes in node_modules
@@ -166,7 +171,7 @@ export interface ClientConfig {
      */
     newWebWorkerSyntax?: boolean;
     babelCacheDirectory?: boolean | string;
-    cache?: boolean | FileCacheOptions | MemoryCacheOptions;
+    cache?: boolean;
     /** Use [Lighting CSS](https://lightningcss.dev) to transform and minimize css instead of PostCSS and cssnano*/
     transformCssWithLightningCss?: boolean;
     sentryConfig?: SentryWebpackPluginOptions;
@@ -213,7 +218,7 @@ export interface ServiceConfig {
     lib?: never;
     verbose?: boolean;
 }
-export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker'> & {
+export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
     publicPathPrefix: string;
     hiddenSourceMap: boolean;
     svgr: NonNullable<ClientConfig['svgr']>;
@@ -230,6 +235,7 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hi
     babel: (config: Babel.TransformOptions, options: {
         configType: `${WebpackMode}`;
     }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
+    reactRefresh: NonNullable<ClientConfig['reactRefresh']>;
 };
 export type NormalizedServerConfig = Omit<ServerConfig, 'port' | 'inspect' | 'inspectBrk'> & {
     port?: number;

package/dist/common/s3-upload/webpack-plugin.d.ts

@@ -1,4 +1,4 @@
-import type { Compiler } from 'webpack';
+import type { Compiler } from '@rspack/core';
 import type { Logger } from '../logger/index.js';
 import type { UploadOptions } from './upload.js';
 import type { S3ClientOptions } from './s3-client.js';

package/dist/common/s3-upload/webpack-plugin.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.S3UploadPlugin = void 0;
-const webpack_1 = require("webpack");
 const fast_glob_1 = require("fast-glob");
 const upload_js_1 = require("./upload.js");
 class S3UploadPlugin {
@@ -12,7 +11,10 @@ class S3UploadPlugin {
     apply(compiler) {
         compiler.hooks.done.tapPromise('s3-upload-plugin', async (stats) => {
             if (stats.hasErrors()) {
-                stats.compilation.warnings.push(new webpack_1.WebpackError('s3-upload-plugin: skipped upload to s3 due to compilation errors'));
+                stats.compilation.warnings.push({
+                    name: 's3-upload-plugin',
+                    message: 's3-upload-plugin: skipped upload to s3 due to compilation errors',
+                });
                 return;
             }
             let fileNames = Object.keys(stats.compilation.assets);
@@ -39,8 +41,10 @@ class S3UploadPlugin {
                 this.options.logger?.success(`Files successfully uploaded to bucket ${this.options.s3UploadOptions.bucket}`);
             }
             catch (e) {
-                const error = new webpack_1.WebpackError(`s3-upload-plugin: ${e instanceof Error ? e.message : e}`);
-                stats.compilation.errors.push(error);
+                stats.compilation.errors.push({
+                    name: 's3-upload-plugin',
+                    message: `s3-upload-plugin: ${e instanceof Error ? e.message : e}`,
+                });
             }
         });
     }

package/dist/common/webpack/compile.js

@@ -1,10 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.webpackCompile = webpackCompile;
-const webpack_1 = __importDefault(require("webpack"));
+const core_1 = require("@rspack/core");
 const logger_1 = require("../logger");
 const config_1 = require("./config");
 const utils_1 = require("./utils");
@@ -13,16 +10,16 @@ async function webpackCompile(config) {
     const webpackConfig = await (0, config_1.webpackConfigFactory)("production" /* WebpackMode.Prod */, config, { logger });
     logger.verbose('Config created');
     return new Promise((resolve) => {
-        const compiler = (0, webpack_1.default)(webpackConfig, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
+        const compiler = (0, core_1.rspack)(webpackConfig, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
             resolve();
         }));
         process.on('SIGINT', async () => {
-            compiler.close(() => {
+            compiler?.close(() => {
                 process.exit(1);
             });
         });
         process.on('SIGTERM', async () => {
-            compiler.close(() => {
+            compiler?.close(() => {
                 process.exit(1);
             });
         });

package/dist/common/webpack/config.d.ts

@@ -1,6 +1,8 @@
-import * as webpack from 'webpack';
+import { Configuration, ResolveOptions, RuleSetRule } from '@rspack/core';
+import { ManifestPluginOptions } from 'rspack-manifest-plugin';
 import type { NormalizedClientConfig } from '../models';
 import type { Logger } from '../logger';
+export declare const generateManifest: ManifestPluginOptions['generate'];
 export interface HelperOptions {
     config: NormalizedClientConfig;
     logger?: Logger;
@@ -14,9 +16,9 @@ export declare const enum WebpackMode {
 }
 export declare function webpackConfigFactory(webpackMode: WebpackMode, config: NormalizedClientConfig, { logger }?: {
     logger?: Logger;
-}): Promise<webpack.Configuration>;
-export declare function configureModuleRules(helperOptions: HelperOptions, additionalRules?: NonNullable<webpack.RuleSetRule['oneOf']>): webpack.RuleSetRule[];
-export declare function configureResolve({ isEnvProduction, config }: HelperOptions): webpack.ResolveOptions;
-type Optimization = NonNullable<webpack.Configuration['optimization']>;
+}): Promise<Configuration>;
+export declare function configureModuleRules(helperOptions: HelperOptions, additionalRules?: NonNullable<RuleSetRule['oneOf']>): RuleSetRule[];
+export declare function configureResolve({ isEnvProduction, config }: HelperOptions): ResolveOptions;
+type Optimization = NonNullable<Configuration['optimization']>;
 export declare function configureOptimization({ config }: HelperOptions): Optimization;
 export {};

package/dist/common/webpack/config.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateManifest = void 0;
 exports.webpackConfigFactory = webpackConfigFactory;
 exports.configureModuleRules = configureModuleRules;
 exports.configureResolve = configureResolve;
@@ -33,15 +34,11 @@ exports.configureOptimization = configureOptimization;
 /* eslint-disable complexity */
 const path = __importStar(require("node:path"));
 const fs = __importStar(require("node:fs"));
-const webpack = __importStar(require("webpack"));
-const clean_webpack_plugin_1 = require("clean-webpack-plugin");
-const webpack_manifest_plugin_1 = require("webpack-manifest-plugin");
+const core_1 = require("@rspack/core");
 const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
-const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
-const webpack_assets_manifest_1 = __importDefault(require("webpack-assets-manifest"));
-const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
-const moment_timezone_data_webpack_plugin_1 = __importDefault(require("moment-timezone-data-webpack-plugin"));
+const rspack_manifest_plugin_1 = require("rspack-manifest-plugin");
+const plugin_react_refresh_1 = __importDefault(require("@rspack/plugin-react-refresh"));
 const webpack_plugin_1 = __importDefault(require("@statoscope/webpack-plugin"));
 const circular_dependency_plugin_1 = __importDefault(require("circular-dependency-plugin"));
 const paths_1 = __importDefault(require("../paths"));
@@ -53,6 +50,28 @@ const log_config_1 = require("../logger/log-config");
 const utils_2 = require("../typescript/utils");
 const imagesSizeLimit = 2048;
 const fontSizeLimit = 8192;
+const generateManifest = (seed, files, entries) => {
+    const manifestFiles = files.reduce((manifest, file) => {
+        manifest[file.name] = file.path;
+        return manifest;
+    }, seed);
+    const entrypoints = Object.keys(entries).reduce((previous, name) => {
+        return {
+            ...previous,
+            [name]: {
+                assets: {
+                    js: entries[name].filter((file) => file.endsWith('.js')),
+                    css: entries[name].filter((file) => file.endsWith('.css')),
+                },
+            },
+        };
+    }, {});
+    return {
+        files: manifestFiles,
+        entrypoints,
+    };
+};
+exports.generateManifest = generateManifest;
 async function webpackConfigFactory(webpackMode, config, { logger } = {}) {
     const isEnvDevelopment = webpackMode === "development" /* WebpackMode.Dev */;
     const isEnvProduction = webpackMode === "production" /* WebpackMode.Prod */;
@@ -87,9 +106,12 @@ async function webpackConfigFactory(webpackMode, config, { logger } = {}) {
             }
             : undefined,
         experiments: configureExperiments(helperOptions),
+        // TODO не поддерживается?
+        /*
         snapshot: {
             managedPaths: config.watchOptions?.watchPackages ? [] : undefined,
         },
+        */
         cache: config.cache,
     };
     webpackConfig = await config.webpack(webpackConfig, { configType: webpackMode });
@@ -104,7 +126,8 @@ function configureModuleRules(helperOptions, additionalRules = []) {
         ...createSourceMapRules(!helperOptions.config.disableSourceMapGeneration),
         {
             oneOf: [
-                createWorkerRule(helperOptions),
+                // TODO с воркерами разобраться
+                // createWorkerRule(helperOptions),
                 createJavaScriptRule(helperOptions, jsLoader),
                 createStylesRule(helperOptions),
                 createSassStylesRule(helperOptions),
@@ -223,7 +246,7 @@ function configureOutput({ isEnvDevelopment, ...rest }) {
 }
 function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, }) {
     const plugins = [];
-    if (isEnvDevelopment && !config.disableReactRefresh) {
+    if (isEnvDevelopment && config.reactRefresh !== false) {
         plugins.push([
             require.resolve('react-refresh/babel'),
             config.devServer?.webSocketPath
@@ -286,27 +309,29 @@ function createSourceMapRules(shouldUseSourceMap) {
     }
     return [];
 }
-function createWorkerRule(options) {
+/*
+function createWorkerRule(options: HelperOptions): RuleSetRule {
     return {
         test: /\.worker\.[jt]sx?$/,
         exclude: /node_modules/,
         use: [
             options.config.newWebWorkerSyntax
                 ? {
-                    loader: require.resolve('./worker/worker-loader'),
-                }
+                      loader: require.resolve('./worker/worker-loader'),
+                  }
                 : {
-                    loader: require.resolve('worker-loader'),
-                    // currently workers located on cdn are not working properly, so we are enforcing loading workers from
-                    // service instead
-                    options: {
-                        inline: 'no-fallback',
-                    },
-                },
+                      loader: require.resolve('worker-loader'),
+                      // currently workers located on cdn are not working properly, so we are enforcing loading workers from
+                      // service instead
+                      options: {
+                          inline: 'no-fallback',
+                      },
+                  },
             createJavaScriptLoader(options),
         ],
     };
 }
+*/
 function createSassStylesRule(options) {
     const loaders = getCssLoaders(options);
     loaders.push({
@@ -341,7 +366,7 @@ function createStylesRule(options) {
 function getCssLoaders({ isEnvDevelopment, isEnvProduction, config }) {
     const loaders = [];
     if (isEnvProduction) {
-        loaders.push(mini_css_extract_plugin_1.default.loader);
+        loaders.push(core_1.CssExtractRspackPlugin.loader);
     }
     if (isEnvDevelopment) {
         loaders.push({
@@ -506,32 +531,27 @@ function createFallbackRules({ isEnvProduction }) {
     }
     return rules;
 }
-function createMomentTimezoneDataPlugin(options = {}) {
-    const currentYear = new Date().getFullYear();
-    // By default get data for current year only
-    // https://momentjs.com/timezone/docs/#/use-it/webpack/
-    const startYear = options.startYear ?? currentYear;
-    const endYear = options.endYear ?? currentYear;
-    return new moment_timezone_data_webpack_plugin_1.default({ ...options, startYear, endYear });
-}
 function configurePlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config } = options;
-    const excludeFromClean = config.excludeFromClean || [];
+    //    const excludeFromClean = config.excludeFromClean || [];
     const plugins = [
-        new clean_webpack_plugin_1.CleanWebpackPlugin({
-            verbose: config.verbose,
-            cleanOnceBeforeBuildPatterns: [
-                '**/*',
-                ...(isEnvDevelopment ? ['!manifest.json'] : []),
-                ...excludeFromClean,
-            ],
-        }),
-        new webpack_manifest_plugin_1.WebpackManifestPlugin({
-            writeToFileEmit: true,
-            publicPath: '',
-        }),
-        createMomentTimezoneDataPlugin(config.momentTz),
-        new webpack.DefinePlugin({
+        // TODO CleanWebpackPlugin
+        //        new CleanWebpackPlugin({
+        //            verbose: config.verbose,
+        //            cleanOnceBeforeBuildPatterns: [
+        //                '**/*',
+        //                ...(isEnvDevelopment ? ['!manifest.json'] : []),
+        //                ...excludeFromClean,
+        //            ],
+        //        }),
+        // TODO WebpackManifestPlugin
+        // new WebpackManifestPlugin({
+        //    writeToFileEmit: true,
+        //    publicPath: '',
+        // }),
+        // TODO а этот плагин вообще нужен?
+        // createMomentTimezoneDataPlugin(config.momentTz),
+        new core_1.rspack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
             ...config.definitions,
         }),
@@ -539,18 +559,19 @@ function configurePlugins(options) {
     if (options.logger) {
         plugins.push(new progress_plugin_1.ProgressPlugin({ logger: options.logger }));
     }
-    if (process.env.WEBPACK_PROFILE === 'true') {
-        plugins.push(new webpack.debug.ProfilingPlugin());
-    }
+    // TODO ProfilingPlugin
+    //    if (process.env.WEBPACK_PROFILE === 'true') {
+    //        plugins.push(new webpack.debug.ProfilingPlugin());
+    //    }
     const contextReplacement = config.contextReplacement || {};
-    plugins.push(new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, 
+    plugins.push(new core_1.ContextReplacementPlugin(/moment[\\/]locale$/, 
     // eslint-disable-next-line security/detect-non-literal-regexp
     new RegExp(`^\\./(${(contextReplacement.locale || ['ru']).join('|')})$`)));
-    plugins.push(new webpack.ContextReplacementPlugin(/dayjs[\\/]locale$/, 
+    plugins.push(new core_1.ContextReplacementPlugin(/dayjs[\\/]locale$/, 
     // eslint-disable-next-line security/detect-non-literal-regexp
     new RegExp(`^\\./(${(contextReplacement.locale || ['ru']).join('|')})\\.js$`)));
     if (contextReplacement['highlight.js']) {
-        plugins.push(new webpack.ContextReplacementPlugin(/highlight\.js[\\/]lib[\\/]languages$/, 
+        plugins.push(new core_1.ContextReplacementPlugin(/highlight\.js[\\/]lib[\\/]languages$/, 
         // eslint-disable-next-line security/detect-non-literal-regexp
         new RegExp(`^\\./(${contextReplacement['highlight.js'].join('|')})$`)));
     }
@@ -564,12 +585,14 @@ function configurePlugins(options) {
             publicPath: path.normalize(config.publicPathPrefix + '/build/'),
         }));
     }
-    if (isEnvDevelopment && !config.disableReactRefresh) {
-        const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
-        plugins.push(new react_refresh_webpack_plugin_1.default({
-            overlay: { sockPath: webSocketPath },
+    if (isEnvDevelopment && config.reactRefresh !== false) {
+        //const {webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`)} =
+        //    config.devServer || {};
+        plugins.push(new plugin_react_refresh_1.default(config.reactRefresh({
+            // TODO допилить параметры
+            // overlay: {sockPath: webSocketPath},
             exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
-        }));
+        })));
     }
     if (config.detectCircularDependencies) {
         let circularPluginOptions = {
@@ -596,10 +619,10 @@ function configurePlugins(options) {
         }));
     }
     if (config.polyfill?.process) {
-        plugins.push(new webpack.ProvidePlugin({ process: 'process/browser.js' }));
+        plugins.push(new core_1.rspack.ProvidePlugin({ process: 'process/browser.js' }));
     }
     if (isEnvProduction) {
-        plugins.push(new mini_css_extract_plugin_1.default({
+        plugins.push(new core_1.CssExtractRspackPlugin({
             filename: 'css/[name].[contenthash:8].css',
             chunkFilename: 'css/[name].[contenthash:8].chunk.css',
             ignoreOrder: true,
@@ -629,16 +652,12 @@ function configurePlugins(options) {
         }
     }
     const manifestFile = 'assets-manifest.json';
-    plugins.push(new webpack_assets_manifest_1.default(isEnvProduction
-        ? {
-            entrypoints: true,
-            output: manifestFile,
-        }
-        : {
-            entrypoints: true,
-            writeToDisk: true,
-            output: path.resolve(paths_1.default.appBuild, manifestFile),
-        }));
+    plugins.push(new rspack_manifest_plugin_1.RspackManifestPlugin({
+        fileName: manifestFile,
+        writeToFileEmit: true,
+        publicPath: '',
+        generate: exports.generateManifest,
+    }));
     if (config.cdn) {
         let credentialsGlobal;
         if (process.env.FRONTEND_S3_ACCESS_KEY_ID && process.env.FRONTEND_S3_SECRET_ACCESS_KEY) {
@@ -728,49 +747,34 @@ function configureOptimization({ config }) {
         },
         runtimeChunk: 'single',
         minimizer: [
-            (compiler) => {
-                // CssMinimizerWebpackPlugin works with MiniCSSExtractPlugin, so only relevant for production builds.
-                // Lazy load the CssMinimizerPlugin plugin
-                const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-                if (config.transformCssWithLightningCss) {
-                    const lightningCss = require('lightningcss');
-                    const browserslist = require('browserslist');
-                    new CssMinimizerPlugin({
-                        minify: CssMinimizerPlugin.lightningCssMinify,
-                        minimizerOptions: {
-                            targets: lightningCss.browserslistToTargets(browserslist()),
-                        },
-                    }).apply(compiler);
-                }
-                else {
-                    new CssMinimizerPlugin({
-                        minimizerOptions: {
-                            preset: [
-                                'default',
-                                {
-                                    svgo: false,
-                                },
-                            ],
-                        },
-                    }).apply(compiler);
-                }
-            },
-            (compiler) => {
-                // Lazy load the Terser plugin
-                const TerserPlugin = require('terser-webpack-plugin');
-                let terserOptions = {
+            new core_1.rspack.SwcJsMinimizerRspackPlugin({
+                minimizerOptions: {
+                    mangle: !config.reactProfiling,
                     compress: {
                         passes: 2,
                     },
-                    safari10: config.safari10,
-                    mangle: !config.reactProfiling,
-                };
-                const { terser } = config;
-                if (typeof terser === 'function') {
-                    terserOptions = terser(terserOptions);
-                }
-                new TerserPlugin({ terserOptions }).apply(compiler);
-            },
+                    format: {
+                        safari10: config.safari10,
+                    },
+                },
+            }),
+            new core_1.rspack.LightningCssMinimizerRspackPlugin({
+                minimizerOptions: {
+                    // TODO че то не срослось
+                    // targets: browserslist(),
+                    targets: [
+                        'last 2 major versions and last 2 years and fully supports es6 and > 0.05%',
+                        'not dead',
+                        'not op_mini all',
+                        'not and_qq > 0',
+                        'not and_uc > 0',
+                        'Firefox ESR',
+                        'Chrome > 0 and last 2 years and > 0.05%',
+                        'Safari > 0 and last 2 years and > 0.05%',
+                        'Firefox > 0 and last 2 years and > 0.01%',
+                    ],
+                },
+            }),
         ],
     };
     return optimization;

package/dist/common/webpack/progress-plugin.d.ts

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack';
+import * as webpack from '@rspack/core';
 import type { Logger } from '../logger';
 export declare class ProgressPlugin extends webpack.ProgressPlugin {
     private _logger;

package/dist/common/webpack/progress-plugin.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressPlugin = void 0;
-const webpack = __importStar(require("webpack"));
+const webpack = __importStar(require("@rspack/core"));
 const pretty_time_1 = require("../logger/pretty-time");
 class ProgressPlugin extends webpack.ProgressPlugin {
     _logger;

package/dist/common/webpack/storybook.d.ts

@@ -1,17 +1,17 @@
 import { WebpackMode } from './config';
 import type { ClientConfig } from '../models';
-import type * as Webpack from 'webpack';
+import * as rspack from '@rspack/core';
 type Mode = `${WebpackMode}`;
-export declare function configureServiceWebpackConfig(mode: Mode, storybookConfig: Webpack.Configuration): Promise<Webpack.Configuration>;
-type ModuleRule = NonNullable<NonNullable<Webpack.Configuration['module']>['rules']>[number];
+export declare function configureServiceWebpackConfig(mode: Mode, storybookConfig: rspack.Configuration): Promise<rspack.Configuration>;
+type ModuleRule = NonNullable<NonNullable<rspack.Configuration['module']>['rules']>[number];
 export declare function configureWebpackConfigForStorybook(mode: Mode, userConfig?: ClientConfig, storybookModuleRules?: ModuleRule[]): Promise<{
     module: {
-        rules: Webpack.RuleSetRule[];
+        rules: rspack.RuleSetRule[];
     };
-    resolve: Webpack.ResolveOptions;
-    plugins: (false | "" | 0 | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | Webpack.WebpackPluginInstance | null | undefined)[];
+    resolve: rspack.ResolveOptions;
+    plugins: rspack.Plugins;
     optimization: {
-        minimizer: (false | "" | 0 | "..." | Webpack.WebpackPluginInstance | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | null | undefined)[] | undefined;
+        minimizer: ("..." | rspack.Plugin)[] | undefined;
     };
 }>;
 export {};

package/dist/common/webpack/storybook.js

@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.configureServiceWebpackConfig = configureServiceWebpackConfig;
 exports.configureWebpackConfigForStorybook = configureWebpackConfigForStorybook;
 const path = __importStar(require("node:path"));
-const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
 const config_1 = require("./config");
@@ -107,7 +106,7 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
     };
     return {
         module: {
-            rules: (0, config_1.configureModuleRules)(helperOptions, storybookModuleRules.filter((rule) => rule !== '...')),
+            rules: (0, config_1.configureModuleRules)(helperOptions, storybookModuleRules.filter((rule) => rule !== '...' && rule)),
         },
         resolve: (0, config_1.configureResolve)(helperOptions),
         plugins: configurePlugins(helperOptions),
@@ -119,8 +118,8 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
 function configurePlugins({ isEnvDevelopment, isEnvProduction, config }) {
     const plugins = [];
     if (config.definitions) {
-        const webpack = require(path.resolve(process.cwd(), 'node_modules/webpack'));
-        plugins.push(new webpack.DefinePlugin({
+        const rspackLibrary = require(path.resolve(process.cwd(), 'node_modules/@rspack/core'));
+        plugins.push(new rspackLibrary.DefinePlugin({
             ...config.definitions,
         }));
     }
@@ -133,8 +132,9 @@ function configurePlugins({ isEnvDevelopment, isEnvProduction, config }) {
             publicPath: '/',
         }));
     }
-    if (isEnvDevelopment && !config.disableReactRefresh) {
-        plugins.push(new react_refresh_webpack_plugin_1.default());
+    if (isEnvDevelopment && config.reactRefresh !== false) {
+        // TODO поправить типы
+        // plugins.push(new ReactRefreshWebpackPlugin(config.reactRefresh({})));
     }
     if (isEnvProduction) {
         plugins.push(new mini_css_extract_plugin_1.default({

package/dist/common/webpack/utils.d.ts

@@ -1,6 +1,6 @@
-import type webpack from 'webpack';
+import type { Stats } from '@rspack/core';
 import type { Logger } from '../logger';
-export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: webpack.Stats) => Promise<void>;
+export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: Stats) => Promise<void>;
 export declare function resolveTsconfigPathsToAlias(tsConfigPath: string): {
     aliases: Record<string, string[]>;
     modules: string[];

package/dist/common/webpack/utils.js

@@ -51,7 +51,7 @@ function webpackCompilerHandlerFactory(logger, onCompilationEnd) {
             await onCompilationEnd();
         }
         if (stats) {
-            const time = stats.endTime - stats.startTime;
+            const time = (stats.endTime || 0) - (stats.startTime || 0);
             logger.success(`Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
         }
         else {

package/dist/create-cli.d.ts

@@ -4,9 +4,9 @@ export declare function createCli(argv: string[]): {
     verbose: boolean | undefined;
     cdn: string | undefined;
     env: string[] | undefined;
-    target: "client" | "server" | undefined;
-    inspect: number | undefined;
     c: unknown;
+    inspect: number | undefined;
+    target: "server" | "client" | undefined;
     inspectBrk: number | undefined;
     "inspect-brk": number | undefined;
     entryFilter: string[] | undefined;
@@ -32,9 +32,9 @@ export declare function createCli(argv: string[]): {
     verbose: boolean | undefined;
     cdn: string | undefined;
     env: string[] | undefined;
-    target: "client" | "server" | undefined;
-    inspect: number | undefined;
     c: unknown;
+    inspect: number | undefined;
+    target: "server" | "client" | undefined;
     inspectBrk: number | undefined;
     "inspect-brk": number | undefined;
     entryFilter: string[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.11.3",
+  "version": "0.12.1-beta.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -71,6 +71,7 @@
     "@babel/runtime": "^7.24.0",
     "@okikio/sharedworker": "^1.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@rspack/dev-server": "^1.0.7",
     "@statoscope/webpack-plugin": "^5.28.2",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
@@ -109,9 +110,9 @@
     "postcss-preset-env": "^9.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-refresh": "^0.14.2",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "^5.0.7",
+    "rspack-manifest-plugin": "^5.0.1",
     "sass": "^1.77.5",
     "sass-loader": "^14.2.1",
     "semver": "^7.6.2",
@@ -128,7 +129,6 @@
     "webpack-assets-manifest": "^5.2.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-dev-server": "^5.0.4",
-    "webpack-manifest-plugin": "^5.0.0",
     "worker-loader": "^3.0.8",
     "yargs": "^17.7.2"
   },
@@ -138,6 +138,9 @@
     "@gravity-ui/eslint-config": "^3.2.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/tsconfig": "^1.0.0",
+    "@rspack/cli": "^1.2.0",
+    "@rspack/core": "^1.2.0",
+    "@rspack/plugin-react-refresh": "^1.0.0",
     "@sentry/webpack-plugin": "^2.7.1",
     "@types/babel__helper-plugin-utils": "^7.10.3",
     "@types/circular-dependency-plugin": "^5.0.8",
@@ -162,6 +165,7 @@
     "nano-staged": "^0.8.0",
     "npm-run-all": "^4.1.5",
     "prettier": "3.3.2",
+    "react-refresh": "^0.14.2",
     "ts-jest": "^29.1.2"
   },
   "peerDependencies": {