@gravity-ui/app-builder 0.15.1-beta.3 → 0.15.1-beta.5

package/dist/commands/dev/client.js

@@ -64,7 +64,7 @@ async function buildDevServer(config) {
             }),
         ];
         if (isSsr) {
-            const ssrLogger = new logger_1.Logger('webpack(SSR)', config.verbose);
+            const ssrLogger = new logger_1.Logger('client(SSR)', config.verbose);
             webpackConfigs.push(await (0, config_1.webpackConfigFactory)({
                 webpackMode: "development" /* WebpackMode.Dev */,
                 config: normalizedConfig,
@@ -82,7 +82,7 @@ async function buildDevServer(config) {
             }),
         ];
         if (isSsr) {
-            const ssrLogger = new logger_1.Logger('rspack(SSR)', config.verbose);
+            const ssrLogger = new logger_1.Logger('client(SSR)', config.verbose);
             rspackConfigs.push(await (0, config_1.rspackConfigFactory)({
                 webpackMode: "development" /* WebpackMode.Dev */,
                 config: normalizedConfig,

package/dist/common/library/index.js

@@ -129,7 +129,6 @@ function compileStyles(inputDir, outputDir, onFinish, additionalGlobs = []) {
                 const sassTransformed = sass_1.default.compile(scssFile, {
                     sourceMap: true,
                     sourceMapIncludeSources: true,
-                    silenceDeprecations: ['legacy-js-api'],
                     importers: [
                         {
                             findFileUrl(url) {

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

@@ -207,6 +207,7 @@ export interface ClientConfig {
         moduleType?: 'commonjs' | 'esm';
     };
     bundler?: Bundler;
+    codeLoader?: 'babel' | 'swc';
 }
 export interface CdnUploadConfig {
     bucket: string;

package/dist/common/webpack/compile.js

@@ -9,7 +9,6 @@ const core_1 = require("@rspack/core");
 const logger_1 = require("../logger");
 const config_1 = require("./config");
 const utils_1 = require("./utils");
-const rspack_1 = require("./rspack");
 async function clientCompile(config) {
     const logger = new logger_1.Logger('client', config.verbose);
     const webpackConfigs = [];
@@ -41,13 +40,12 @@ async function clientCompile(config) {
     }
     logger.verbose('Config created');
     return new Promise((resolve) => {
+        const compilerHandler = (0, utils_1.compilerHandlerFactory)(logger, async () => {
+            resolve();
+        });
         const compiler = config.bundler === 'rspack'
-            ? (0, core_1.rspack)(rspackConfigs, (0, rspack_1.rspackCompilerHandlerFactory)(logger, async () => {
-                resolve();
-            }))
-            : (0, webpack_1.default)(webpackConfigs, (0, utils_1.webpackCompilerHandlerFactory)(logger, async () => {
-                resolve();
-            }));
+            ? (0, core_1.rspack)(rspackConfigs, compilerHandler)
+            : (0, webpack_1.default)(webpackConfigs, compilerHandler);
         process.on('SIGINT', async () => {
             compiler?.close(() => {
                 process.exit(1);

package/dist/common/webpack/config.js

@@ -40,12 +40,12 @@ const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checke
 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 rspack_manifest_plugin_1 = require("rspack-manifest-plugin");
 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 webpack_plugin_1 = __importDefault(require("@statoscope/webpack-plugin"));
 const circular_dependency_plugin_1 = __importDefault(require("circular-dependency-plugin"));
 const core_1 = require("@rspack/core");
-const rspack_manifest_plugin_1 = require("rspack-manifest-plugin");
 const rspack_1 = require("./rspack");
 const ts_checker_rspack_plugin_1 = require("ts-checker-rspack-plugin");
 const plugin_react_refresh_1 = __importDefault(require("@rspack/plugin-react-refresh"));
@@ -87,18 +87,6 @@ function configureExternals({ config, isSsr }) {
     }
     return externals;
 }
-function prepareRspackExternals(externals) {
-    if (Array.isArray(externals)) {
-        const rspackExternals = {};
-        for (const ext of externals) {
-            if (typeof ext === 'object' && ext !== null) {
-                Object.assign(rspackExternals, ext);
-            }
-        }
-        return rspackExternals;
-    }
-    return externals;
-}
 async function webpackConfigFactory(options) {
     const { config } = options;
     const helperOptions = getHelperOptions(options);
@@ -155,14 +143,14 @@ async function rspackConfigFactory(options) {
         target: isSsr ? 'node' : undefined,
         devtool: configureDevTool(helperOptions),
         entry: configureEntry(helperOptions),
-        output: configureRspackOutput(helperOptions),
+        output: configureOutput(helperOptions),
         resolve: configureRspackResolve(helperOptions),
         module: {
             rules: (0, rspack_1.prepareRspackRules)(configureModuleRules(helperOptions)),
         },
         plugins: configureRspackPlugins(helperOptions),
         optimization: configureRspackOptimization(helperOptions),
-        externals: prepareRspackExternals(configureExternals(helperOptions)),
+        externals: configureExternals(helperOptions),
         node: config.node,
         watchOptions: configureWatchOptions(helperOptions),
         ignoreWarnings: [/Failed to parse source map/],
@@ -381,19 +369,54 @@ function configureOutput(options) {
         ...ssrOptions,
     };
 }
-function configureRspackOutput(options) {
-    const { filename, chunkFilename, library, chunkFormat, path, pathinfo } = configureOutput(options);
-    return {
-        filename: typeof filename === 'string' ? filename : undefined,
-        chunkFilename: typeof chunkFilename === 'string' ? chunkFilename : undefined,
-        library,
-        chunkFormat,
-        path,
-        pathinfo,
-        clean: false,
-    };
-}
 function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, isSsr, }) {
+    if (config.codeLoader === 'swc') {
+        return {
+            loader: 'builtin:swc-loader',
+            options: {
+                sourceMaps: !config.disableSourceMapGeneration,
+                env: {
+                    loose: true,
+                    bugfixes: true,
+                },
+                module: {
+                    type: 'es6',
+                },
+                assumptions: {
+                    setPublicClassFields: true,
+                    privateFieldsAsProperties: true,
+                },
+                jsc: {
+                    parser: {
+                        syntax: 'typescript',
+                        tsx: true,
+                    },
+                    transform: {
+                        react: {
+                            runtime: config.newJsxTransform ? 'automatic' : 'classic',
+                            development: isEnvDevelopment,
+                            refresh: !isSsr && isEnvDevelopment && config.reactRefresh !== false,
+                            useBuiltIns: true,
+                        },
+                    },
+                    experimental: {
+                        plugins: !isSsr && isEnvProduction
+                            ? [
+                                [
+                                    '@swc/plugin-transform-imports',
+                                    {
+                                        lodash: {
+                                            transform: 'lodash/{{member}}',
+                                        },
+                                    },
+                                ],
+                            ]
+                            : [],
+                    },
+                },
+            },
+        };
+    }
     const plugins = [];
     if (!isSsr) {
         if (isEnvDevelopment && config.reactRefresh !== false) {
@@ -470,9 +493,7 @@ function createWorkerRule(options) {
                     loader: require.resolve('./worker/worker-loader'),
                 }
                 : {
-                    loader: require.resolve(options.config.bundler === 'rspack'
-                        ? 'worker-rspack-loader'
-                        : 'worker-loader'),
+                    loader: require.resolve('worker-rspack-loader'),
                     // currently workers located on cdn are not working properly, so we are enforcing loading workers from
                     // service instead
                     options: {
@@ -518,7 +539,7 @@ function createStylesRule(options) {
 function getCssLoaders({ isEnvDevelopment, isEnvProduction, config, isSsr }, additionalRules) {
     const isRspack = config.bundler === 'rspack';
     const loaders = [];
-    if (!config.transformCssWithLightningCss) {
+    if (!config.transformCssWithLightningCss && config.bundler !== 'rspack') {
         loaders.push({
             loader: require.resolve('postcss-loader'),
             options: {
@@ -777,9 +798,41 @@ function getCssExtractPluginOptions({ isEnvProduction }) {
         ignoreOrder: true,
     };
 }
+const commonBundlerPlugins = {
+    DefinePlugin: {
+        rspack: core_1.rspack.DefinePlugin,
+        webpack: webpack.DefinePlugin,
+    },
+    ContextReplacementPlugin: {
+        rspack: core_1.rspack.ContextReplacementPlugin,
+        webpack: webpack.ContextReplacementPlugin,
+    },
+    ProvidePlugin: {
+        rspack: core_1.rspack.ProvidePlugin,
+        webpack: webpack.ProvidePlugin,
+    },
+    ProgressPlugin: {
+        rspack: progress_plugin_1.RspackProgressPlugin,
+        webpack: progress_plugin_1.WebpackProgressPlugin,
+    },
+    ManifestPlugin: {
+        rspack: rspack_manifest_plugin_1.RspackManifestPlugin,
+        webpack: webpack_manifest_plugin_1.WebpackManifestPlugin,
+    },
+    TsCheckerRspackPlugin: {
+        rspack: ts_checker_rspack_plugin_1.TsCheckerRspackPlugin,
+        webpack: fork_ts_checker_webpack_plugin_1.default,
+    },
+    CSSExtractPlugin: {
+        rspack: core_1.CssExtractRspackPlugin,
+        webpack: mini_css_extract_plugin_1.default,
+    },
+};
 function configureCommonPlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config, isSsr } = options;
     const excludeFromClean = config.excludeFromClean || [];
+    const bundler = config.bundler;
+    const forkTsCheckerOptions = getForkTsCheckerOptions(options);
     const plugins = [
         new clean_webpack_plugin_1.CleanWebpackPlugin({
             verbose: config.verbose,
@@ -789,6 +842,17 @@ function configureCommonPlugins(options) {
                 ...excludeFromClean,
             ],
         }),
+        new commonBundlerPlugins['ManifestPlugin'][bundler]({
+            writeToFileEmit: true,
+            publicPath: '',
+        }),
+        new commonBundlerPlugins['DefinePlugin'][bundler](getDefinitions(options)),
+        ...(options.logger
+            ? [new commonBundlerPlugins['ProgressPlugin'][bundler]({ logger: options.logger })]
+            : []),
+        ...(forkTsCheckerOptions
+            ? [new commonBundlerPlugins['TsCheckerRspackPlugin'][bundler](forkTsCheckerOptions)]
+            : []),
     ];
     if (config.detectCircularDependencies) {
         let circularPluginOptions = {
@@ -809,7 +873,17 @@ function configureCommonPlugins(options) {
             }));
         }
     }
+    if (isEnvProduction || isSsr || config.ssr) {
+        plugins.push(new commonBundlerPlugins['CSSExtractPlugin'][bundler](getCssExtractPluginOptions(options)));
+    }
     if (!isSsr) {
+        const contextReplacements = getContextReplacements(options);
+        contextReplacements.forEach(({ resourceRegExp, newResource }) => plugins.push(new commonBundlerPlugins['ContextReplacementPlugin'][bundler](resourceRegExp, newResource)));
+        if (config.polyfill?.process) {
+            plugins.push(new commonBundlerPlugins['ProvidePlugin'][bundler]({
+                process: 'process/browser.js',
+            }));
+        }
         if (config.monaco) {
             const MonacoEditorWebpackPlugin = require('monaco-editor-webpack-plugin');
             plugins.push(new MonacoEditorWebpackPlugin({
@@ -823,6 +897,18 @@ function configureCommonPlugins(options) {
         plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
     }
     if (isEnvProduction) {
+        if (config.analyzeBundle === 'statoscope') {
+            const customStatoscopeConfig = config.statoscopeConfig || {};
+            plugins.push(new webpack_plugin_1.default({
+                saveReportTo: path.resolve(options.buildDirectory, 'report.html'),
+                saveStatsTo: path.resolve(options.buildDirectory, 'stats.json'),
+                open: false,
+                statsOptions: {
+                    all: true,
+                },
+                ...customStatoscopeConfig,
+            }));
+        }
         if (config.sentryConfig) {
             const sentryPlugin = require('@sentry/webpack-plugin').sentryWebpackPlugin;
             plugins.push(sentryPlugin({ ...config.sentryConfig }));
@@ -835,15 +921,8 @@ function configureCommonPlugins(options) {
 }
 function configureWebpackPlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config, isSsr } = options;
-    const forkTsCheckerOptions = getForkTsCheckerOptions(options);
     const webpackPlugins = [
         ...configureCommonPlugins(options),
-        ...(options.logger ? [new progress_plugin_1.ProgressPlugin({ logger: options.logger })] : []),
-        new webpack.DefinePlugin(getDefinitions(options)),
-        new webpack_manifest_plugin_1.WebpackManifestPlugin({
-            writeToFileEmit: true,
-            publicPath: '',
-        }),
         new webpack_assets_manifest_1.default(isEnvProduction
             ? {
                 entrypoints: true,
@@ -855,24 +934,8 @@ function configureWebpackPlugins(options) {
                 output: path.resolve(options.buildDirectory, assetsManifestFile),
             }),
         ...(process.env.WEBPACK_PROFILE === 'true' ? [new webpack.debug.ProfilingPlugin()] : []),
-        ...(forkTsCheckerOptions ? [new fork_ts_checker_webpack_plugin_1.default(forkTsCheckerOptions)] : []),
     ];
-    if (isEnvProduction || isSsr || config.ssr) {
-        webpackPlugins.push(new mini_css_extract_plugin_1.default(getCssExtractPluginOptions(options)));
-    }
     if (isEnvProduction) {
-        if (config.analyzeBundle === 'statoscope') {
-            const customStatoscopeConfig = config.statoscopeConfig || {};
-            webpackPlugins.push(new webpack_plugin_1.default({
-                saveReportTo: path.resolve(options.buildDirectory, 'report.html'),
-                saveStatsTo: path.resolve(options.buildDirectory, 'stats.json'),
-                open: false,
-                statsOptions: {
-                    all: true,
-                },
-                ...customStatoscopeConfig,
-            }));
-        }
         if (config.analyzeBundle === 'rsdoctor') {
             const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
             webpackPlugins.push(new RsdoctorWebpackPlugin({
@@ -880,44 +943,30 @@ function configureWebpackPlugins(options) {
             }));
         }
     }
-    if (!isSsr) {
-        const contextReplacements = getContextReplacements(options);
-        contextReplacements.forEach(({ resourceRegExp, newResource }) => webpackPlugins.push(new webpack.ContextReplacementPlugin(resourceRegExp, newResource)));
-        if (isEnvDevelopment && config.reactRefresh !== false) {
-            const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`), } = config.devServer || {};
-            const reactRefreshConfig = config.reactRefresh({
-                overlay: { sockPath: webSocketPath },
-                exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
-            });
-            webpackPlugins.push(new react_refresh_webpack_plugin_1.default(reactRefreshConfig));
-        }
-        if (config.polyfill?.process) {
-            webpackPlugins.push(new webpack.ProvidePlugin({ process: 'process/browser.js' }));
-        }
+    if (!isSsr && isEnvDevelopment && config.reactRefresh !== false) {
+        const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
+        const reactRefreshConfig = config.reactRefresh({
+            overlay: { sockPath: webSocketPath },
+            exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
+        });
+        webpackPlugins.push(new react_refresh_webpack_plugin_1.default(reactRefreshConfig));
     }
     return webpackPlugins;
 }
 function configureRspackPlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config, isSsr } = options;
-    const forkTsCheckerOptions = getForkTsCheckerOptions(options);
     const rspackPlugins = [
         ...configureCommonPlugins(options),
-        ...(options.logger ? [new rspack_1.RspackProgressPlugin({ logger: options.logger })] : []),
-        new core_1.rspack.DefinePlugin(getDefinitions(options)),
         new rspack_manifest_plugin_1.RspackManifestPlugin({
             fileName: isEnvProduction
                 ? assetsManifestFile
-                : path.resolve(paths_1.default.appBuild, assetsManifestFile),
+                : path.resolve(options.buildDirectory, assetsManifestFile),
             writeToFileEmit: true,
             useLegacyEmit: true,
             publicPath: '',
             generate: rspack_1.generateAssetsManifest,
         }),
-        ...(forkTsCheckerOptions ? [new ts_checker_rspack_plugin_1.TsCheckerRspackPlugin(forkTsCheckerOptions)] : []),
     ];
-    if (isEnvProduction || isSsr || config.ssr) {
-        rspackPlugins.push(new core_1.CssExtractRspackPlugin(getCssExtractPluginOptions(options)));
-    }
     if (isEnvProduction) {
         if (config.analyzeBundle === 'rsdoctor') {
             const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
@@ -926,35 +975,26 @@ function configureRspackPlugins(options) {
             }));
         }
     }
-    if (!isSsr) {
-        const contextReplacements = getContextReplacements(options);
-        contextReplacements.forEach(({ resourceRegExp, newResource }) => rspackPlugins.push(new core_1.rspack.ContextReplacementPlugin(resourceRegExp, newResource)));
-        if (isEnvDevelopment && config.reactRefresh !== false) {
-            const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`), } = config.devServer || {};
-            const { overlay, ...reactRefreshConfig } = config.reactRefresh({
-                overlay: { sockPath: webSocketPath },
-                exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
-            });
-            rspackPlugins.push(new plugin_react_refresh_1.default({
-                ...reactRefreshConfig,
-                overlay: typeof overlay === 'object'
-                    ? {
-                        entry: typeof overlay.entry === 'string' ? overlay.entry : undefined,
-                        module: typeof overlay.module === 'string'
-                            ? overlay.module
-                            : undefined,
-                        sockPath: overlay.sockPath,
-                        sockHost: overlay.sockHost,
-                        sockPort: overlay.sockPort?.toString(),
-                        sockProtocol: overlay.sockProtocol,
-                        sockIntegration: overlay.sockIntegration === 'wds' ? 'wds' : undefined,
-                    }
-                    : undefined,
-            }));
-        }
-        if (config.polyfill?.process) {
-            rspackPlugins.push(new core_1.rspack.ProvidePlugin({ process: 'process/browser.js' }));
-        }
+    if (!isSsr && isEnvDevelopment && config.reactRefresh !== false) {
+        const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
+        const { overlay, ...reactRefreshConfig } = config.reactRefresh({
+            overlay: { sockPath: webSocketPath },
+            exclude: [/node_modules/, /\.worker\.[jt]sx?$/],
+        });
+        rspackPlugins.push(new plugin_react_refresh_1.default({
+            ...reactRefreshConfig,
+            overlay: typeof overlay === 'object'
+                ? {
+                    entry: typeof overlay.entry === 'string' ? overlay.entry : undefined,
+                    module: typeof overlay.module === 'string' ? overlay.module : undefined,
+                    sockPath: overlay.sockPath,
+                    sockHost: overlay.sockHost,
+                    sockPort: overlay.sockPort?.toString(),
+                    sockProtocol: overlay.sockProtocol,
+                    sockIntegration: overlay.sockIntegration === 'wds' ? 'wds' : undefined,
+                }
+                : undefined,
+        }));
     }
     return rspackPlugins;
 }

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

@@ -1,12 +1,27 @@
-import webpack from 'webpack';
 import type * as Webpack from 'webpack';
 import type { Logger } from '../logger';
-export declare class ProgressPlugin extends webpack.ProgressPlugin {
-    private _logger;
-    private _state;
-    constructor({ logger }: {
-        logger: Logger;
-    });
-    handler: (percent: number, message: string, ...details: string[]) => void;
-    apply(compiler: Webpack.Compiler): void;
+interface State {
+    done?: boolean;
+    start?: bigint;
 }
+export declare const WebpackProgressPlugin: {
+    new ({ logger }: {
+        logger: Logger;
+    }): {
+        logger: Logger;
+        state: State;
+        handler: (percent: number, message: string, ...details: string[]) => void;
+        apply(compiler: Webpack.Compiler): void;
+    };
+};
+export declare const RspackProgressPlugin: {
+    new ({ logger }: {
+        logger: Logger;
+    }): {
+        logger: Logger;
+        state: State;
+        handler: (percent: number, message: string, ...details: string[]) => void;
+        apply(compiler: Webpack.Compiler): void;
+    };
+};
+export {};

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

@@ -3,49 +3,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressPlugin = void 0;
+exports.RspackProgressPlugin = exports.WebpackProgressPlugin = void 0;
 const webpack_1 = __importDefault(require("webpack"));
 const pretty_time_1 = require("../logger/pretty-time");
-class ProgressPlugin extends webpack_1.default.ProgressPlugin {
-    _logger;
-    _state = {};
-    constructor({ logger }) {
-        super();
-        this._logger = logger;
-    }
-    handler = (percent, message, ...details) => {
-        const progress = Math.floor(percent * 100);
-        this._logger.status(`${this._logger.colors.green(`${progress}%`)} - ${this._logger.colors.yellow(message)}${details.length > 0 ? `: ${this._logger.colors.dim(...details)}` : ''}`);
+const core_1 = require("@rspack/core");
+function createProgressPlugin(BaseClass) {
+    return class ProgressPlugin extends BaseClass {
+        logger;
+        state = {};
+        constructor({ logger }) {
+            super();
+            this.logger = logger;
+        }
+        handler = (percent, message, ...details) => {
+            const progress = Math.floor(percent * 100);
+            this.logger.status(`${this.logger.colors.green(`${progress}%`)} - ${this.logger.colors.yellow(message)}${details.length > 0 ? `: ${this.logger.colors.dim(...details)}` : ''}`);
+        };
+        apply(compiler) {
+            super.apply(compiler);
+            hook(compiler, 'compile', () => {
+                this.logger.message('Start compilation');
+                if ('rspackVersion' in compiler.webpack) {
+                    this.logger.message(`Rspack v${compiler.webpack.rspackVersion}`);
+                }
+                else {
+                    this.logger.message(`Webpack v${compiler.webpack.version}`);
+                }
+                this.state.start = process.hrtime.bigint();
+            });
+            hook(compiler, 'invalid', (fileName, changeTime) => {
+                this.logger.verbose(`Invalidate file: ${fileName} at ${changeTime}`);
+            });
+            hook(compiler, 'done', (stats) => {
+                const time = this.state.start ? ' in ' + (0, pretty_time_1.elapsedTime)(this.state.start) : '';
+                const hasErrors = stats.hasErrors();
+                if (hasErrors) {
+                    this.logger.error('Compiled with some errors' + time);
+                }
+                else {
+                    this.logger.success('Compiled successfully' + time);
+                }
+            });
+        }
     };
-    apply(compiler) {
-        super.apply(compiler);
-        hook(compiler, 'compile', () => {
-            this._logger.message('Start compilation');
-            if ('rspackVersion' in compiler.webpack) {
-                this._logger.message(`Rspack v${compiler.webpack.rspackVersion}`);
-            }
-            else {
-                this._logger.message(`Webpack v${compiler.webpack.version}`);
-            }
-            this._state.start = process.hrtime.bigint();
-        });
-        hook(compiler, 'invalid', (fileName, changeTime) => {
-            this._logger.verbose(`Invalidate file: ${fileName} at ${changeTime}`);
-        });
-        hook(compiler, 'done', (stats) => {
-            const time = this._state.start ? ' in ' + (0, pretty_time_1.elapsedTime)(this._state.start) : '';
-            const hasErrors = stats.hasErrors();
-            if (hasErrors) {
-                this._logger.error('Compiled with some errors' + time);
-            }
-            else {
-                this._logger.success('Compiled successfully' + time);
-            }
-        });
-    }
 }
-exports.ProgressPlugin = ProgressPlugin;
 function hook(compiler, hookName, callback) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     compiler.hooks[hookName].tap(`app-builder: ${hookName}`, callback);
 }
+exports.WebpackProgressPlugin = createProgressPlugin(webpack_1.default.ProgressPlugin);
+exports.RspackProgressPlugin = createProgressPlugin(core_1.rspack.ProgressPlugin);

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

@@ -1,18 +1,7 @@
 import { ManifestPluginOptions } from 'rspack-manifest-plugin';
 import type { RuleSetRule as WebpackRuleSetRule } from 'webpack';
-import { Compiler, MultiStats, rspack } from '@rspack/core';
 import type { Configuration, RuleSetRule as RspackRuleSetRule } from '@rspack/core';
 import type { Logger } from '../logger';
 export declare function clearCacheDirectory(config: Configuration, logger: Logger): void;
 export declare const generateAssetsManifest: ManifestPluginOptions['generate'];
 export declare function prepareRspackRules(webpackRules: (undefined | null | false | '' | 0 | WebpackRuleSetRule | '...')[]): (RspackRuleSetRule | '...')[];
-export declare class RspackProgressPlugin extends rspack.ProgressPlugin {
-    private _logger;
-    private _state;
-    constructor({ logger }: {
-        logger: Logger;
-    });
-    handler: (percent: number, message: string, ...details: string[]) => void;
-    apply(compiler: Compiler): void;
-}
-export declare function rspackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: MultiStats) => Promise<void>;

package/dist/common/webpack/rspack.js

@@ -26,14 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RspackProgressPlugin = exports.generateAssetsManifest = void 0;
+exports.generateAssetsManifest = void 0;
 exports.clearCacheDirectory = clearCacheDirectory;
 exports.prepareRspackRules = prepareRspackRules;
-exports.rspackCompilerHandlerFactory = rspackCompilerHandlerFactory;
-const core_1 = require("@rspack/core");
 const fs = __importStar(require("node:fs"));
 const path = __importStar(require("node:path"));
-const pretty_time_1 = require("../logger/pretty-time");
 const paths_1 = __importDefault(require("../../common/paths"));
 function clearCacheDirectory(config, logger) {
     if (!config.cache) {
@@ -112,79 +109,3 @@ function prepareRspackRules(webpackRules) {
     }
     return rspackRules;
 }
-class RspackProgressPlugin extends core_1.rspack.ProgressPlugin {
-    _logger;
-    _state = {};
-    constructor({ logger }) {
-        super();
-        this._logger = logger;
-    }
-    handler = (percent, message, ...details) => {
-        const progress = Math.floor(percent * 100);
-        this._logger.status(`${this._logger.colors.green(`${progress}%`)} - ${this._logger.colors.yellow(message)}${details.length > 0 ? `: ${this._logger.colors.dim(...details)}` : ''}`);
-    };
-    apply(compiler) {
-        super.apply(compiler);
-        hook(compiler, 'compile', () => {
-            this._logger.message('Start compilation');
-            this._logger.message(`rspack v${compiler.rspack.rspackVersion}`);
-            this._state.start = process.hrtime.bigint();
-        });
-        hook(compiler, 'invalid', (fileName, changeTime) => {
-            this._logger.verbose(`Invalidate file: ${fileName} at ${changeTime}`);
-        });
-        hook(compiler, 'done', (stats) => {
-            const time = this._state.start ? ' in ' + (0, pretty_time_1.elapsedTime)(this._state.start) : '';
-            const hasErrors = stats.hasErrors();
-            if (hasErrors) {
-                this._logger.error('Compiled with some errors' + time);
-            }
-            else {
-                this._logger.success('Compiled successfully' + time);
-            }
-        });
-    }
-}
-exports.RspackProgressPlugin = RspackProgressPlugin;
-function hook(compiler, hookName, callback) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    compiler.hooks[hookName].tap(`app-builder: ${hookName}`, callback);
-}
-function rspackCompilerHandlerFactory(logger, onCompilationEnd) {
-    return async (err, stats) => {
-        if (err) {
-            logger.panic(err.message, err);
-        }
-        if (stats) {
-            logger.message('Stats:\n' +
-                stats.toString({
-                    preset: 'errors-warnings',
-                    colors: process.stdout.isTTY,
-                    assets: logger.isVerbose,
-                    modules: logger.isVerbose,
-                    entrypoints: logger.isVerbose,
-                    timings: logger.isVerbose,
-                }));
-            if (stats.hasErrors()) {
-                process.exit(1);
-            }
-        }
-        if (onCompilationEnd) {
-            await onCompilationEnd();
-        }
-        const [clientStats, ssrStats] = stats?.stats ?? [];
-        if (clientStats) {
-            const { startTime = 0, endTime = 0 } = clientStats;
-            const time = endTime - startTime;
-            logger.success(`Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
-        }
-        if (ssrStats) {
-            const { startTime = 0, endTime = 0 } = ssrStats;
-            const time = endTime - startTime;
-            logger.success(`SSR: Client was successfully compiled in ${(0, pretty_time_1.prettyTime)(BigInt(time) * BigInt(1_000_000))}`);
-        }
-        if (!clientStats && !ssrStats) {
-            logger.success(`Client was successfully compiled`);
-        }
-    };
-}

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

@@ -1,6 +1,7 @@
 import type * as Webpack from 'webpack';
 import type { Logger } from '../logger';
-export declare function webpackCompilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: Webpack.MultiStats) => Promise<void>;
+import { MultiStats } from '@rspack/core';
+export declare function compilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: Webpack.MultiStats | MultiStats) => Promise<void>;
 export declare function resolveTsConfigPathsToAlias(projectPath: string, filename?: string): {
     aliases?: undefined;
     modules?: undefined;

package/dist/common/webpack/utils.js

@@ -23,13 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.webpackCompilerHandlerFactory = webpackCompilerHandlerFactory;
+exports.compilerHandlerFactory = compilerHandlerFactory;
 exports.resolveTsConfigPathsToAlias = resolveTsConfigPathsToAlias;
 const path = __importStar(require("node:path"));
 const ts = __importStar(require("typescript"));
 const pretty_time_1 = require("../logger/pretty-time");
 const utils_1 = require("../typescript/utils");
-function webpackCompilerHandlerFactory(logger, onCompilationEnd) {
+function compilerHandlerFactory(logger, onCompilationEnd) {
     return async (err, stats) => {
         if (err) {
             logger.panic(err.message, err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.15.1-beta.3",
+  "version": "0.15.1-beta.5",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -79,6 +79,7 @@
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@swc/plugin-transform-imports": "^6.1.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-inline-react-svg": "^2.0.2",