@gravity-ui/app-builder 0.15.1-beta.7 → 0.16.1

package/README.md

@@ -191,9 +191,13 @@ With this `{rootDir}/src/ui/tsconfig.json`:
 - `excludeFromClean` (`string[]`) — do not clean provided paths before build.
 - `forkTsCheker` (`false | ForkTsCheckerWebpackPluginOptions`) - config for ForkTsCheckerWebpackPlugin [more](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options). If `false`, ForkTsCheckerWebpackPlugin will be disabled.
 - `cache` (`boolean | FileCacheOptions | MemoryCacheOptions`) — Cache the generated webpack modules and chunks to improve build speed. [more](https://webpack.js.org/configuration/cache/)
-- `babelCacheDirectory` (`boolean | string`) — Set directory for babel-loader cache (`default: node_modules/.cache/babel-loader``)
+- `bundler` (`'webpack' | 'rspack'`) - Option to choose a bundler.
+- `javaScriptLoader` (`'babel' | 'swc'`) - Option to choose a JavaScript loader.
 - `babel` (`(config: babel.TransformOptions, options: {configType: 'development' | 'production'; isSsr: boolean}) => babel.TransformOptions | Promise<babel.TransformOptions>`) - Allow override the default babel transform options.
-- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'; isSsr: boolean}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default configuration.
+- `babelCacheDirectory` (`boolean | string`) — Set directory for babel-loader cache (`default: node_modules/.cache/babel-loader``)
+- `swc` (`(config: SwcConfig, options: {configType: 'development' | 'production'; isSsr: boolean}) => SwcConfig | Promise<SwcConfig>`) - Allow override the default swc configuration.
+- `webpack` (`(config: webpack.Configuration, options: {configType: 'development' | 'production'; isSsr: boolean}) => webpack.Configuration | Promise<webpack.Configuration>`) - Allow override the default webpack configuration.
+- `rspack` (`(config: rspack.Configuration, options: {configType: 'development' | 'production'; isSsr: boolean}) => rspack.Configuration | Promise<rspack.Configuration>`) - Allow override the default rspack configuration.
 - `ssr` - build SSR bundle. The SSR entries should be inside `src/ui/ssr` directory and match the client entries.
   - `noExternal` (`string | RegExp | (string | RegExp)[] | true`) - prevent listed dependencies from being externalized for SSR. By default, all dependencies are externalized.
   - `moduleType`: (`'commonjs' | 'esm'`) - library type for the SSR bundle, by default `commonjs`.

package/dist/common/config.js

@@ -199,9 +199,11 @@ async function normalizeClientConfig(client, mode) {
         webpack: typeof client.webpack === 'function' ? client.webpack : (config) => config,
         rspack: typeof client.rspack === 'function' ? client.rspack : (config) => config,
         babel: typeof client.babel === 'function' ? client.babel : (config) => config,
+        swc: typeof client.swc === 'function' ? client.swc : (config) => config,
         devServer: undefined,
         lazyCompilation: undefined,
         bundler: client.bundler || 'webpack',
+        javaScriptLoader: client.javaScriptLoader || 'babel',
     };
     if (mode === 'dev') {
         if (client.lazyCompilation) {

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

@@ -2,9 +2,10 @@ 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, DefinePlugin, FileCacheOptions, MemoryCacheOptions } from 'webpack';
 import type { Configuration as RspackConfiguration } from '@rspack/core';
 import type * as Babel from '@babel/core';
+import type * as Swc from '@swc/types';
 import type { ServerConfiguration } from 'webpack-dev-server';
 import type { Options as CircularDependenciesOptions } from 'circular-dependency-plugin';
 import type { Config as SvgrConfig } from '@svgr/core';
@@ -16,6 +17,8 @@ import type { UploadOptions } from '../s3-upload/upload';
 import type { TerserOptions } from 'terser-webpack-plugin';
 import type { ReactRefreshPluginOptions } from '@pmmmwh/react-refresh-webpack-plugin/types/lib/types';
 type Bundler = 'webpack' | 'rspack';
+type JavaScriptLoader = 'babel' | 'swc';
+export type SwcConfig = Swc.Config & Pick<Swc.Options, 'isModule'>;
 export interface Entities<T> {
     data: Record<string, T>;
     keys: string[];
@@ -111,7 +114,9 @@ export interface ClientConfig {
     /**
      * Redirect module requests when normal resolving fails.
      */
-    fallback?: ResolveOptions['fallback'];
+    fallback?: {
+        [index: string]: string | false | string[];
+    };
     /**
      * Follow symbolic links while looking for a file. [more](https://webpack.js.org/configuration/resolve/#resolvesymlinks)
      */
@@ -198,6 +203,13 @@ export interface ClientConfig {
         configType: `${WebpackMode}`;
         isSsr: boolean;
     }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
+    /**
+     * Modify or return a custom SWC config.
+     */
+    swc?: (config: SwcConfig, options: {
+        configType: `${WebpackMode}`;
+        isSsr: boolean;
+    }) => SwcConfig | Promise<SwcConfig>;
     /**
      * Modify or return a custom [Terser options](https://github.com/terser/terser#minify-options).
      */
@@ -207,6 +219,7 @@ export interface ClientConfig {
         moduleType?: 'commonjs' | 'esm';
     };
     bundler?: Bundler;
+    javaScriptLoader?: JavaScriptLoader;
 }
 export interface CdnUploadConfig {
     bucket: string;
@@ -236,6 +249,7 @@ export interface ServiceConfig {
 }
 export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
     bundler: Bundler;
+    javaScriptLoader: JavaScriptLoader;
     publicPathPrefix: string;
     hiddenSourceMap: boolean;
     svgr: NonNullable<ClientConfig['svgr']>;
@@ -257,6 +271,10 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'hi
         configType: `${WebpackMode}`;
         isSsr: boolean;
     }) => Babel.TransformOptions | Promise<Babel.TransformOptions>;
+    swc: (config: SwcConfig, options: {
+        configType: `${WebpackMode}`;
+        isSsr: boolean;
+    }) => SwcConfig | Promise<SwcConfig>;
     reactRefresh: NonNullable<ClientConfig['reactRefresh']>;
 };
 export type NormalizedServerConfig = Omit<ServerConfig, 'port' | 'inspect' | 'inspectBrk'> & {

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

@@ -1,5 +1,5 @@
 import * as webpack from 'webpack';
-import { Configuration as RspackConfiguration } from '@rspack/core';
+import type * as Rspack from '@rspack/core';
 import type { NormalizedClientConfig } from '../models';
 import type { Logger } from '../logger';
 export interface HelperOptions {
@@ -23,9 +23,19 @@ type ClientFactoryOptions = {
     isSsr?: boolean;
 };
 export declare function webpackConfigFactory(options: ClientFactoryOptions): Promise<webpack.Configuration>;
-export declare function rspackConfigFactory(options: ClientFactoryOptions): Promise<RspackConfiguration>;
-export declare function configureModuleRules(helperOptions: HelperOptions, additionalRules?: NonNullable<webpack.RuleSetRule['oneOf']>): webpack.RuleSetRule[];
-export declare function configureResolve({ isEnvProduction, config }: HelperOptions): webpack.ResolveOptions;
+export declare function rspackConfigFactory(options: ClientFactoryOptions): Promise<Rspack.Configuration>;
+export declare function configureModuleRules(helperOptions: HelperOptions, additionalRules?: NonNullable<webpack.RuleSetRule['oneOf']>): Promise<webpack.RuleSetRule[]>;
+export declare function configureResolve({ isEnvProduction, config }: HelperOptions): {
+    alias: {
+        [x: string]: string | string[];
+    };
+    modules: string[];
+    extensions: string[];
+    symlinks: boolean | undefined;
+    fallback: {
+        [index: string]: string | false | string[];
+    } | undefined;
+};
 type Optimization = NonNullable<webpack.Configuration['optimization']>;
 export declare function configureOptimization(helperOptions: HelperOptions): Optimization;
 export {};

package/dist/common/webpack/config.js

@@ -101,7 +101,7 @@ async function webpackConfigFactory(options) {
         output: configureOutput(helperOptions),
         resolve: configureResolve(helperOptions),
         module: {
-            rules: configureModuleRules(helperOptions),
+            rules: await configureModuleRules(helperOptions),
         },
         plugins: configureWebpackPlugins(helperOptions),
         optimization: configureOptimization(helperOptions),
@@ -144,9 +144,9 @@ async function rspackConfigFactory(options) {
         devtool: configureDevTool(helperOptions),
         entry: configureEntry(helperOptions),
         output: configureOutput(helperOptions),
-        resolve: configureRspackResolve(helperOptions),
+        resolve: configureResolve(helperOptions),
         module: {
-            rules: configureModuleRules(helperOptions),
+            rules: (await configureModuleRules(helperOptions)),
         },
         plugins: configureRspackPlugins(helperOptions),
         optimization: configureRspackOptimization(helperOptions),
@@ -172,13 +172,13 @@ async function rspackConfigFactory(options) {
     }
     return rspackConfig;
 }
-function configureModuleRules(helperOptions, additionalRules = []) {
-    const jsLoader = createJavaScriptLoader(helperOptions);
+async function configureModuleRules(helperOptions, additionalRules = []) {
+    const jsLoader = await createJavaScriptLoader(helperOptions);
     return [
         ...createSourceMapRules(!helperOptions.config.disableSourceMapGeneration),
         {
             oneOf: [
-                createWorkerRule(helperOptions),
+                await createWorkerRule(helperOptions),
                 createJavaScriptRule(helperOptions, jsLoader),
                 createStylesRule(helperOptions),
                 createSassStylesRule(helperOptions),
@@ -313,16 +313,6 @@ function configureResolve({ isEnvProduction, config }) {
         fallback: config.fallback,
     };
 }
-function configureRspackResolve(helperOptions) {
-    const { alias, modules, extensions, symlinks, fallback } = configureResolve(helperOptions);
-    return {
-        alias: Array.isArray(alias) ? undefined : alias,
-        modules,
-        extensions,
-        symlinks,
-        fallback: Array.isArray(fallback) ? undefined : fallback,
-    };
-}
 function createEntryArray(entry) {
     return [require.resolve('./public-path'), entry];
 }
@@ -369,7 +359,61 @@ function configureOutput(options) {
         ...ssrOptions,
     };
 }
-function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, isSsr, }) {
+async function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, isSsr, }) {
+    if (config.javaScriptLoader === 'swc') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const plugins = [];
+        if (!isSsr && isEnvProduction) {
+            plugins.push([
+                require.resolve('@swc/plugin-transform-imports'),
+                {
+                    lodash: { transform: 'lodash/{{member}}' },
+                },
+            ]);
+        }
+        const swcConfig = await config.swc({
+            module: {
+                type: 'es6',
+            },
+            env: {
+                targets: isSsr ? { node: process.versions.node } : require('browserslist')(),
+                mode: 'usage',
+                coreJs: '3.40',
+                bugfixes: true,
+            },
+            isModule: 'unknown',
+            jsc: {
+                parser: {
+                    syntax: 'typescript',
+                    tsx: true,
+                },
+                transform: {
+                    react: {
+                        runtime: config.newJsxTransform ? 'automatic' : 'classic',
+                        development: isEnvDevelopment,
+                        refresh: !isSsr && isEnvDevelopment && config.reactRefresh !== false,
+                        useBuiltins: true,
+                    },
+                    optimizer: isEnvProduction
+                        ? {
+                            simplify: true,
+                            jsonify: { minCost: 1024 },
+                        }
+                        : undefined,
+                },
+                assumptions: {
+                    privateFieldsAsProperties: true,
+                    setPublicClassFields: true,
+                },
+                experimental: { plugins },
+            },
+            sourceMaps: !config.disableSourceMapGeneration,
+        }, { configType, isSsr });
+        return {
+            loader: config.bundler === 'rspack' ? 'builtin:swc-loader' : require.resolve('swc-loader'),
+            options: swcConfig,
+        };
+    }
     const plugins = [];
     if (!isSsr) {
         if (isEnvDevelopment && config.reactRefresh !== false) {
@@ -391,7 +435,7 @@ function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType,
             ]);
         }
     }
-    const transformOptions = config.babel({
+    const babelTransformOptions = await config.babel({
         presets: [(0, babel_1.babelPreset)({ newJsxTransform: config.newJsxTransform, isSsr })],
         plugins,
     }, { configType, isSsr });
@@ -399,7 +443,7 @@ function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType,
         loader: require.resolve('babel-loader'),
         options: {
             sourceType: 'unambiguous',
-            ...transformOptions,
+            ...babelTransformOptions,
             babelrc: false,
             configFile: false,
             compact: isEnvProduction,
@@ -436,7 +480,7 @@ function createSourceMapRules(shouldUseSourceMap) {
     }
     return [];
 }
-function createWorkerRule(options) {
+async function createWorkerRule(options) {
     return {
         test: /\.worker\.[jt]sx?$/,
         exclude: /node_modules/,
@@ -453,7 +497,7 @@ function createWorkerRule(options) {
                         inline: 'no-fallback',
                     },
                 },
-            createJavaScriptLoader(options),
+            await createJavaScriptLoader(options),
         ],
     };
 }
@@ -470,7 +514,7 @@ function createSassStylesRule(options) {
             options: {
                 sourceMap: true, // must be always true for work with resolve-url-loader
                 sassOptions: {
-                    loadPaths: [paths_1.default.app, paths_1.default.appClient],
+                    loadPaths: [paths_1.default.appClient],
                 },
             },
         },
@@ -531,14 +575,16 @@ function getCssLoaders({ isEnvDevelopment, isEnvProduction, config, isSsr }, add
     });
     if (isEnvProduction) {
         loaders.unshift({
-            loader: isRspack ? core_1.CssExtractRspackPlugin.loader : mini_css_extract_plugin_1.default.loader,
+            loader: isRspack ? core_1.rspack.CssExtractRspackPlugin.loader : mini_css_extract_plugin_1.default.loader,
             options: { emit: !isSsr },
         });
     }
     if (isEnvDevelopment) {
         if (isSsr || config.ssr) {
             loaders.unshift({
-                loader: isRspack ? core_1.CssExtractRspackPlugin.loader : mini_css_extract_plugin_1.default.loader,
+                loader: isRspack
+                    ? core_1.rspack.CssExtractRspackPlugin.loader
+                    : mini_css_extract_plugin_1.default.loader,
                 options: { emit: !isSsr },
             });
         }
@@ -751,40 +797,9 @@ 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,
-    },
-    TsCheckerPlugin: {
-        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) {
+function configureCommonPlugins(options, bundlerPlugins) {
     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({
@@ -795,17 +810,13 @@ function configureCommonPlugins(options) {
                 ...excludeFromClean,
             ],
         }),
-        new commonBundlerPlugins['ManifestPlugin'][bundler]({
+        new bundlerPlugins.ManifestPlugin({
             writeToFileEmit: true,
             publicPath: '',
         }),
-        new commonBundlerPlugins['DefinePlugin'][bundler](getDefinitions(options)),
-        ...(options.logger
-            ? [new commonBundlerPlugins['ProgressPlugin'][bundler]({ logger: options.logger })]
-            : []),
-        ...(forkTsCheckerOptions
-            ? [new commonBundlerPlugins['TsCheckerPlugin'][bundler](forkTsCheckerOptions)]
-            : []),
+        new bundlerPlugins.DefinePlugin(getDefinitions(options)),
+        ...(options.logger ? [new bundlerPlugins.ProgressPlugin({ logger: options.logger })] : []),
+        ...(forkTsCheckerOptions ? [new bundlerPlugins.TsCheckerPlugin(forkTsCheckerOptions)] : []),
     ];
     if (config.detectCircularDependencies) {
         let circularPluginOptions = {
@@ -817,23 +828,14 @@ function configureCommonPlugins(options) {
         }
         plugins.push(new circular_dependency_plugin_1.default(circularPluginOptions));
     }
-    if (isEnvProduction) {
-        if (config.analyzeBundle === 'true') {
-            plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
-                openAnalyzer: false,
-                analyzerMode: 'static',
-                reportFilename: 'stats.html',
-            }));
-        }
-    }
     if (isEnvProduction || isSsr || config.ssr) {
-        plugins.push(new commonBundlerPlugins['CSSExtractPlugin'][bundler](getCssExtractPluginOptions(options)));
+        plugins.push(new bundlerPlugins.CSSExtractPlugin(getCssExtractPluginOptions(options)));
     }
     if (!isSsr) {
         const contextReplacements = getContextReplacements(options);
-        contextReplacements.forEach(({ resourceRegExp, newResource }) => plugins.push(new commonBundlerPlugins['ContextReplacementPlugin'][bundler](resourceRegExp, newResource)));
+        contextReplacements.forEach(({ resourceRegExp, newResource }) => plugins.push(new bundlerPlugins.ContextReplacementPlugin(resourceRegExp, newResource)));
         if (config.polyfill?.process) {
-            plugins.push(new commonBundlerPlugins['ProvidePlugin'][bundler]({
+            plugins.push(new bundlerPlugins.ProvidePlugin({
                 process: 'process/browser.js',
             }));
         }
@@ -850,6 +852,13 @@ function configureCommonPlugins(options) {
         plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
     }
     if (isEnvProduction) {
+        if (config.analyzeBundle === 'true') {
+            plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
+                openAnalyzer: false,
+                analyzerMode: 'static',
+                reportFilename: 'stats.html',
+            }));
+        }
         if (config.analyzeBundle === 'statoscope') {
             const customStatoscopeConfig = config.statoscopeConfig || {};
             plugins.push(new webpack_plugin_1.default({
@@ -862,6 +871,11 @@ function configureCommonPlugins(options) {
                 ...customStatoscopeConfig,
             }));
         }
+        if (config.analyzeBundle === 'rsdoctor') {
+            plugins.push(new bundlerPlugins.RSDoctorPlugin({
+                mode: 'brief',
+            }));
+        }
         if (config.sentryConfig) {
             const sentryPlugin = require('@sentry/webpack-plugin').sentryWebpackPlugin;
             plugins.push(sentryPlugin({ ...config.sentryConfig }));
@@ -874,8 +888,18 @@ function configureCommonPlugins(options) {
 }
 function configureWebpackPlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config, isSsr } = options;
+    const plugins = {
+        DefinePlugin: webpack.DefinePlugin,
+        ContextReplacementPlugin: webpack.ContextReplacementPlugin,
+        ProvidePlugin: webpack.ProvidePlugin,
+        ProgressPlugin: (0, progress_plugin_1.createProgressPlugin)(webpack.ProgressPlugin),
+        ManifestPlugin: webpack_manifest_plugin_1.WebpackManifestPlugin,
+        TsCheckerPlugin: fork_ts_checker_webpack_plugin_1.default,
+        CSSExtractPlugin: mini_css_extract_plugin_1.default,
+        RSDoctorPlugin: require('@rsdoctor/webpack-plugin').RsdoctorWebpackPlugin,
+    };
     const webpackPlugins = [
-        ...configureCommonPlugins(options),
+        ...configureCommonPlugins(options, plugins),
         new webpack_assets_manifest_1.default(isEnvProduction
             ? {
                 entrypoints: true,
@@ -888,14 +912,6 @@ function configureWebpackPlugins(options) {
             }),
         ...(process.env.WEBPACK_PROFILE === 'true' ? [new webpack.debug.ProfilingPlugin()] : []),
     ];
-    if (isEnvProduction) {
-        if (config.analyzeBundle === 'rsdoctor') {
-            const { RsdoctorWebpackPlugin } = require('@rsdoctor/webpack-plugin');
-            webpackPlugins.push(new RsdoctorWebpackPlugin({
-                mode: 'brief',
-            }));
-        }
-    }
     if (!isSsr && isEnvDevelopment && config.reactRefresh !== false) {
         const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
         const reactRefreshConfig = config.reactRefresh({
@@ -908,8 +924,18 @@ function configureWebpackPlugins(options) {
 }
 function configureRspackPlugins(options) {
     const { isEnvDevelopment, isEnvProduction, config, isSsr } = options;
+    const plugins = {
+        DefinePlugin: core_1.rspack.DefinePlugin,
+        ContextReplacementPlugin: core_1.rspack.ContextReplacementPlugin,
+        ProvidePlugin: core_1.rspack.ProvidePlugin,
+        ProgressPlugin: (0, progress_plugin_1.createProgressPlugin)(core_1.rspack.ProgressPlugin),
+        ManifestPlugin: rspack_manifest_plugin_1.RspackManifestPlugin,
+        TsCheckerPlugin: ts_checker_rspack_plugin_1.TsCheckerRspackPlugin,
+        CSSExtractPlugin: core_1.rspack.CssExtractRspackPlugin,
+        RSDoctorPlugin: require('@rsdoctor/rspack-plugin').RsdoctorRspackPlugin,
+    };
     const rspackPlugins = [
-        ...configureCommonPlugins(options),
+        ...configureCommonPlugins(options, plugins),
         new rspack_manifest_plugin_1.RspackManifestPlugin({
             fileName: isEnvProduction
                 ? assetsManifestFile
@@ -920,14 +946,6 @@ function configureRspackPlugins(options) {
             generate: rspack_1.generateAssetsManifest,
         }),
     ];
-    if (isEnvProduction) {
-        if (config.analyzeBundle === 'rsdoctor') {
-            const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin');
-            rspackPlugins.push(new RsdoctorRspackPlugin({
-                mode: 'brief',
-            }));
-        }
-    }
     if (!isSsr && isEnvDevelopment && config.reactRefresh !== false) {
         const { webSocketPath = path.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
         const { overlay, ...reactRefreshConfig } = config.reactRefresh({

package/dist/common/webpack/node-externals.js

@@ -49,8 +49,9 @@ function nodeExternals({ noExternal = [], module }) {
             return `commonjs ${request}`;
         }
         if (dependencyType === 'commonjs' ||
-            // lodash/something without extension can't be imported so always require it
-            (moduleName === 'lodash' && request.match(/^lodash\/[\w_]+($|\/[\w_]+$)/))) {
+            // lodash and lodash/something without extension can't be imported so always require it
+            (moduleName === 'lodash' &&
+                (request === 'lodash' || request.match(/^lodash\/[\w_]+($|\/[\w_]+$)/)))) {
             return `node-commonjs ${request}`;
         }
         return `module-import ${request}`;

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

@@ -1,10 +1,11 @@
+import type * as Rspack from '@rspack/core';
 import type * as Webpack from 'webpack';
 import type { Logger } from '../logger';
 interface State {
     done?: boolean;
     start?: bigint;
 }
-export declare const WebpackProgressPlugin: {
+export declare function createProgressPlugin<T extends typeof Webpack.ProgressPlugin | typeof Rspack.ProgressPlugin>(BaseClass: T): {
     new ({ logger }: {
         logger: Logger;
     }): {
@@ -13,15 +14,5 @@ export declare const WebpackProgressPlugin: {
         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;
-    };
-};
+} & T;
 export {};

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

@@ -1,12 +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.RspackProgressPlugin = exports.WebpackProgressPlugin = void 0;
-const webpack_1 = __importDefault(require("webpack"));
+exports.createProgressPlugin = createProgressPlugin;
 const pretty_time_1 = require("../logger/pretty-time");
-const core_1 = require("@rspack/core");
 function createProgressPlugin(BaseClass) {
     return class ProgressPlugin extends BaseClass {
         logger;
@@ -51,5 +46,3 @@ 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/storybook.d.ts

@@ -8,7 +8,17 @@ export declare function configureWebpackConfigForStorybook(mode: Mode, userConfi
     module: {
         rules: Webpack.RuleSetRule[];
     };
-    resolve: Webpack.ResolveOptions;
+    resolve: {
+        alias: {
+            [x: string]: string | string[];
+        };
+        modules: string[];
+        extensions: string[];
+        symlinks: boolean | undefined;
+        fallback: {
+            [index: string]: string | false | string[];
+        } | undefined;
+    };
     plugins: (false | "" | 0 | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | Webpack.WebpackPluginInstance | null | undefined)[];
     optimization: {
         minimizer: (false | "" | 0 | Webpack.WebpackPluginInstance | "..." | ((this: Webpack.Compiler, compiler: Webpack.Compiler) => void) | null | undefined)[] | undefined;

package/dist/common/webpack/storybook.js

@@ -50,6 +50,11 @@ async function configureServiceWebpackConfig(mode, storybookConfig) {
     else {
         options = serviceConfig.client;
     }
+    options = {
+        ...options,
+        // TODO support rspack for storybook
+        bundler: 'webpack',
+    };
     const webpackConfig = await configureWebpackConfigForStorybook(mode, options, storybookConfig.module?.rules);
     let devtool = storybookConfig.devtool;
     // storybook uses `cheap-module-source-map` and it's incompatible with `CssMinimizerWebpackPlugin`
@@ -97,6 +102,8 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
     const config = await (0, config_2.normalizeConfig)({
         client: {
             ...userConfig,
+            // TODO support rspack for storybook
+            bundler: 'webpack',
             includes: (userConfig.includes ?? []).concat(['.storybook']),
         },
     });
@@ -111,7 +118,7 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
     };
     return {
         module: {
-            rules: (0, config_1.configureModuleRules)(helperOptions, storybookModuleRules.filter((rule) => rule !== '...')),
+            rules: await (0, config_1.configureModuleRules)(helperOptions, storybookModuleRules.filter((rule) => rule !== '...')),
         },
         resolve: (0, config_1.configureResolve)(helperOptions),
         plugins: configurePlugins(helperOptions),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.15.1-beta.7",
+  "version": "0.16.1",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -79,6 +79,8 @@
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
+    "@swc/plugin-transform-imports": "^6.4.0",
+    "@swc/types": "^0.1.17",
     "babel-loader": "^9.2.1",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -88,6 +90,7 @@
     "circular-dependency-plugin": "^5.2.2",
     "clean-webpack-plugin": "^4.0.0",
     "common-tags": "^1.8.2",
+    "core-js": "~3.40.0",
     "cosmiconfig": "^8.3.6",
     "cosmiconfig-typescript-loader": "^5.0.0",
     "css-loader": "^7.1.2",
@@ -124,6 +127,7 @@
     "strip-ansi": "^6.0.1",
     "style-loader": "^4.0.0",
     "svgo": "^3.3.2",
+    "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "5.3.10",
     "ts-checker-rspack-plugin": "^1.1.1",
     "ts-node": "10.9.2",