arui-scripts 15.4.0 → 15.5.0

package/.turbo/turbo-test.log

@@ -1,4 +1,4 @@
-PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts (12.976 s)
+PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts (14.006 s)
 PASS src/configs/util/__tests__/get-polyfills.tests.ts
 PASS src/configs/util/__tests__/apply-overrides.tests.ts
 PASS src/configs/app-configs/__tests__/update-with-env.tests.ts
@@ -87,5 +87,5 @@ PASS src/configs/app-configs/__tests__/validate-settings-keys.tests.ts
 Test Suites: 6 passed, 6 total
 Tests:       17 passed, 17 total
 Snapshots:   0 total
-Time:        15.742 s
+Time:        15.427 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # [15.3.0](https://github.com/core-ds/arui-scripts/compare/v15.2.0...v15.3.0) (2023-06-30)
 
+## 15.5.0
+
+### Minor Changes
+
+- [#56](https://github.com/core-ds/arui-scripts/pull/56) [`1c64198`](https://github.com/core-ds/arui-scripts/commit/1c641989791c4ff1e7a20d05c115f8a1d7817e30) Thanks [@heymdall-legal](https://github.com/heymdall-legal)! - Add modules support and various tools to work with them correctly.
+
+  Modules provides a way to define reusable piece of code to consume from different applications.
+  Additional tooling provides a convenient way to consume this modules in applications.
+  Full documentation is available in [separate doc](https://github.com/core-ds/arui-scripts/blob/master/packages/arui-scripts/docs/modules.md).
+
+## 15.4.1
+
+### Patch Changes
+
+- [#57](https://github.com/core-ds/arui-scripts/pull/57) [`3d35ddc`](https://github.com/core-ds/arui-scripts/commit/3d35ddc84a97a5324bdf8172be972826838148a8) Thanks [@vaagnavanesyan](https://github.com/vaagnavanesyan)! - move imagemin plugins to peer deps
+
+- [#60](https://github.com/core-ds/arui-scripts/pull/60) [`2b38d23`](https://github.com/core-ds/arui-scripts/commit/2b38d230032dd8f7b1f1adba805d1dc238c74243) Thanks [@heymdall-legal](https://github.com/heymdall-legal)! - Fix presets loading
+
 ## 15.4.0
 
 ### Minor Changes

package/README.md

@@ -80,7 +80,10 @@ npm install arui-scripts --save-dev
 - `keepCssVars` - отключает `postcss-custom-properties`, css переменные будут оставаться в бандле.
 - `removeDevDependenciesDuringDockerBuild` - отключает удаление devDependencies из node_modules при сборке докер образа. Используется когда вам не нужно удалять devDependencies, т.к. в своём Dockerfile вы не переносите node_modules в докер-контейнер.
 - `dataUrlMaxSize` - ресурсы, не превышающие данный размер (в байтах), будут включены в исходники `inline`, иначе вынесены в отдельный файл. По умолчанию `1536`.
-- `imageMinimizer` - раздел настроек, связанных с оптимизацией графики.
+- `imageMinimizer` - раздел настроек, связанных с оптимизацией графики.<br/><br/>
+:warning: **Внимание!** Если вы планируете использовать любые `imagemin`-плагины, кроме `svgo`, необходимо установить их дополнительно. <br/>
+Так как после установки плагинам необходим прямой доступ в сеть для скачивания утилит (`cjpeg` и пр.), они указаны в `peerDependencies` `arui-scripts`, чтобы не приводить к ошибкам в закрытых контурах.<br/><br/>
+
 - `imageMinimizer.svg.enabled` - включает/отключает оптимизацию `svg`. По умолчанию `true`.
 - `imageMinimizer.gif.enabled` - включает/отключает оптимизацию `gif`. По умолчанию `false`.
 - `imageMinimizer.gif.optimizationLevel` - уровень сжатия `gif`. От `1` до `3`. По умолчанию `1`.
@@ -92,6 +95,8 @@ npm install arui-scripts --save-dev
 - `imageMinimizer.png.colorTypeReduction` - допускает изменение представления изображения (оттенки серого / прозрачность / пр.). По умолчанию `false`. [Подробнее](https://github.com/imagemin/imagemin-optipng#colortypereduction)
 - `imageMinimizer.png.paletteReduction` - допускает уменьшение палитры изображения. По умолчанию `false`. [Подробнее](https://github.com/imagemin/imagemin-optipng#palettereduction)
 - `imageMinimizer.png.interlaced` - потоковый порядок передачи изображение. По умолчанию этот параметр идентичен значению из входного изображения. [Подробнее](https://github.com/imagemin/imagemin-optipng#interlaced)
+- `devServerCors` - включает добавление cors-заголовков в dev-server. Может быть полезным при локальном тестировании модулей.
+- `modules`, `compatModules` - позволяет настраивать работу с модулями, подробнее в разделе [Модули](./docs/modules.md).
 
 В целях отладки все эти настройки можно переопределить не изменяя package.json
 Просто передайте необходимые настройки в environment переменной ARUI_SCRIPTS_CONFIG

package/build/commands/bundle-analyze/index.js

@@ -16,19 +16,20 @@ const webpack_1 = __importDefault(require("webpack"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const make_tmp_dir_1 = __importDefault(require("../util/make-tmp-dir"));
 const webpack_client_prod_1 = __importDefault(require("../../configs/webpack.client.prod"));
+const app_configs_1 = __importDefault(require("../../configs/app-configs"));
 (() => __awaiter(void 0, void 0, void 0, function* () {
     let clientWebpackConfigs = Array.isArray(webpack_client_prod_1.default) ? webpack_client_prod_1.default : [webpack_client_prod_1.default];
-    const promises = clientWebpackConfigs.map((config, i) => __awaiter(void 0, void 0, void 0, function* () {
+    const promises = clientWebpackConfigs.map((webpackConfig, i) => __awaiter(void 0, void 0, void 0, function* () {
         const tmpDir = yield (0, make_tmp_dir_1.default)(i.toString());
-        config.plugins = [
-            ...config.plugins,
+        webpackConfig.plugins = [
+            ...(webpackConfig.plugins || []),
             new webpack_bundle_analyzer_1.BundleAnalyzerPlugin({
                 generateStatsFile: true,
-                statsFilename: config.statsOutputPath,
+                statsFilename: app_configs_1.default.statsOutputPath,
                 analyzerPort: 'auto',
             }),
         ];
-        config.output = Object.assign(Object.assign({}, config.output), { path: tmpDir });
+        webpackConfig.output = Object.assign(Object.assign({}, webpackConfig.output), { path: tmpDir });
     }));
     yield Promise.all(promises);
     (0, webpack_1.default)(clientWebpackConfigs).run(() => { });

package/build/configs/app-configs/calculate-dependent-config.d.ts

@@ -52,6 +52,23 @@ export declare function calculateDependentConfig(config: AppConfigs): {
     } | undefined;
     componentsTheme: string | null;
     keepCssVars: boolean;
+    compatModules: {
+        shared?: {
+            [libraryName: string]: string;
+        } | undefined;
+        exposes?: {
+            [moduleId: string]: {
+                entry: string;
+                externals?: Record<string, string> | undefined;
+                cssPrefix?: string | false | undefined;
+            };
+        } | undefined;
+    } | null;
+    modules: {
+        name?: string | undefined;
+        shared: any;
+        exposes?: Record<string, string> | undefined;
+    } | null;
 };
 /**
  * Обновление контекста в зависимости от ключей конфига

package/build/configs/app-configs/get-defaults.js

@@ -10,6 +10,8 @@ const resolve_1 = require("../util/resolve");
 const CWD = process.cwd();
 const absoluteSrcPath = path_1.default.resolve(CWD, 'src');
 function getDefaultAppConfig() {
+    var _a;
+    const appPackage = getPackageJson();
     return {
         /// general settings
         clientServerPort: 8080,
@@ -18,7 +20,7 @@ function getDefaultAppConfig() {
         devSourceMaps: 'eval',
         devServerCors: false,
         useServerHMR: false,
-        presets: null,
+        presets: ((_a = appPackage.aruiScripts) === null || _a === void 0 ? void 0 : _a.presets) || null,
         // paths
         buildPath: '.build',
         assetsPath: 'assets',
@@ -66,14 +68,21 @@ function getDefaultAppConfig() {
         // CSS
         componentsTheme: null,
         keepCssVars: false,
+        // Modules
+        compatModules: null,
+        modules: null,
     };
 }
 exports.getDefaultAppConfig = getDefaultAppConfig;
-function getDefaultAppContext() {
+function getPackageJson() {
     const appPackage = JSON.parse(fs_1.default.readFileSync(path_1.default.join(CWD, 'package.json'), 'utf8'));
     if (appPackage['arui-scripts']) {
         throw Error('arui-scripts in package.json is not supported. Use aruiScripts instead.');
     }
+    return appPackage;
+}
+function getDefaultAppContext() {
+    const appPackage = getPackageJson();
     const absoluteNodeModulesPath = path_1.default.resolve(CWD, 'node_modules');
     const absoluteNodeModulesBinPath = path_1.default.resolve(absoluteNodeModulesPath, '.bin');
     const projectTsConfigPath = path_1.default.join(CWD, 'tsconfig.json');

package/build/configs/app-configs/types.d.ts

@@ -51,6 +51,27 @@ export type AppConfigs = {
     };
     componentsTheme: string | null;
     keepCssVars: boolean;
+    compatModules: {
+        shared?: {
+            [libraryName: string]: string;
+        };
+        exposes?: {
+            [moduleId: string]: CompatModuleConfigBase;
+        };
+    } | null;
+    modules: {
+        name?: string;
+        shared: any;
+        exposes?: Record<string, string>;
+    } | null;
+};
+type CompatModuleConfigBase = {
+    entry: string;
+    externals?: Record<string, string>;
+    cssPrefix?: false | string;
+};
+export type CompatModuleConfig = CompatModuleConfigBase & {
+    name: string;
 };
 /**
  * Внутренний контекст arui-scripts
@@ -84,3 +105,4 @@ export type AppContext = {
 };
 export type AppContextWithConfigs = AppContext & AppConfigs;
 export type PackageSettings = Partial<AppConfigs>;
+export {};

package/build/configs/dev-server.d.ts

@@ -1,16 +1,2 @@
-declare const devServerConfig: {
-    port: number;
-    liveReload: boolean;
-    client: {
-        overlay: {
-            errors: boolean;
-            warnings: boolean;
-        };
-    };
-    devMiddleware: {
-        publicPath: string;
-    };
-    static: string[];
-    proxy: any;
-};
+declare const devServerConfig: import("webpack-dev-server").Configuration;
 export default devServerConfig;

package/build/configs/dev-server.js

@@ -32,10 +32,17 @@ const devServerConfig = (0, apply_overrides_1.default)('devServer', {
                 const cspHeader = proxyRes.headers['content-security-policy'];
                 if (typeof cspHeader === 'string' && !cspHeader.includes('unsafe-eval')) {
                     proxyRes.headers['content-security-policy'] = cspHeader
-                        .replace(/script-src/, "script-src 'unsafe-eval'");
+                        .replace(/script-src/, 'script-src \'unsafe-eval\'');
                 }
-            }
-        } : {}))
-    })
+            },
+        } : {})),
+    }),
+    headers: app_configs_1.default.devServerCors
+        ? {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Headers': '*',
+            'Access-Control-Allow-Methods': '*',
+        }
+        : {},
 });
 exports.default = devServerConfig;

package/build/configs/modules.d.ts

@@ -0,0 +1,16 @@
+import webpack from 'webpack';
+import { CompatModuleConfig } from './app-configs/types';
+export declare function haveExposedDefaultModules(): Record<string, string> | undefined;
+export declare const MODULES_ENTRY_NAME = "remoteEntry.js";
+export declare function patchMainWebpackConfigForModules(webpackConf: webpack.Configuration): webpack.Configuration;
+export declare function getCssPrefixForModule(module: CompatModuleConfig): string | undefined;
+export declare function getExposeLoadersFormCompatModules(): {
+    test: string;
+    use: {
+        loader: string;
+        options: {
+            exposes: string[];
+        };
+    }[];
+}[];
+export declare function patchWebpackConfigForCompat(module: CompatModuleConfig, webpackConf: webpack.Configuration): webpack.Configuration;

package/build/configs/modules.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchWebpackConfigForCompat = exports.getExposeLoadersFormCompatModules = exports.getCssPrefixForModule = exports.patchMainWebpackConfigForModules = exports.MODULES_ENTRY_NAME = exports.haveExposedDefaultModules = void 0;
+const webpack_1 = __importDefault(require("webpack"));
+const postcss_prefix_selector_1 = __importDefault(require("postcss-prefix-selector"));
+const app_configs_1 = __importDefault(require("./app-configs"));
+const find_loader_1 = require("./util/find-loader");
+function haveExposedDefaultModules() {
+    var _a;
+    return (_a = app_configs_1.default.modules) === null || _a === void 0 ? void 0 : _a.exposes;
+}
+exports.haveExposedDefaultModules = haveExposedDefaultModules;
+exports.MODULES_ENTRY_NAME = 'remoteEntry.js';
+function patchMainWebpackConfigForModules(webpackConf) {
+    // Добавляем expose loader для библиотек, которые мы хотим вынести в глобальную область видимости
+    webpackConf.module.rules.unshift(...getExposeLoadersFormCompatModules());
+    if (!app_configs_1.default.modules || !webpackConf.output || !webpackConf.plugins) {
+        return webpackConf;
+    }
+    webpackConf.output.publicPath = haveExposedDefaultModules()
+        ? 'auto' // Для того чтобы модули могли подключаться из разных мест, нам необходимо использовать auto. Для корректной работы в IE надо подключaть https://github.com/amiller-gh/currentScript-polyfill
+        : app_configs_1.default.publicPath;
+    webpackConf.plugins.push(new webpack_1.default.container.ModuleFederationPlugin({
+        name: app_configs_1.default.modules.name || app_configs_1.default.normalizedName,
+        filename: app_configs_1.default.modules.exposes ? exports.MODULES_ENTRY_NAME : undefined,
+        shared: app_configs_1.default.modules.shared,
+        exposes: app_configs_1.default.modules.exposes,
+    }));
+    return webpackConf;
+}
+exports.patchMainWebpackConfigForModules = patchMainWebpackConfigForModules;
+function getCssPrefixForModule(module) {
+    if (module.cssPrefix) {
+        return module.cssPrefix;
+    }
+    if (module.cssPrefix === false) {
+        return undefined;
+    }
+    return `.module-${module.name}`;
+}
+exports.getCssPrefixForModule = getCssPrefixForModule;
+function getExposeLoadersFormCompatModules() {
+    var _a;
+    const shared = (_a = app_configs_1.default.compatModules) === null || _a === void 0 ? void 0 : _a.shared;
+    if (!shared) {
+        return [];
+    }
+    return Object.keys(shared).map((libraryName) => {
+        const globalVarName = shared[libraryName];
+        return {
+            test: require.resolve(libraryName),
+            use: [
+                {
+                    loader: require.resolve('expose-loader'),
+                    options: {
+                        exposes: [globalVarName],
+                    },
+                },
+            ],
+        };
+    });
+}
+exports.getExposeLoadersFormCompatModules = getExposeLoadersFormCompatModules;
+function addPrefixCssRule(rule, prefix) {
+    if (!rule || !rule.use || !Array.isArray(rule.use)) {
+        return;
+    }
+    const postCssLoader = rule.use.find((loaderConfig) => {
+        var _a;
+        if (typeof loaderConfig === 'string' || typeof loaderConfig === 'function' || !loaderConfig) {
+            return false;
+        }
+        return ((_a = loaderConfig.loader) === null || _a === void 0 ? void 0 : _a.indexOf('postcss-loader')) !== -1;
+    });
+    if (!postCssLoader || typeof postCssLoader !== 'object' || !postCssLoader.options || typeof postCssLoader.options !== 'object') {
+        return;
+    }
+    postCssLoader.options.postcssOptions.plugins = [
+        ...postCssLoader.options.postcssOptions.plugins,
+        (0, postcss_prefix_selector_1.default)({ prefix }),
+    ];
+}
+function patchWebpackConfigForCompat(module, webpackConf) {
+    webpackConf.externals = Object.assign(Object.assign({}, (webpackConf.externals || {})), (module.externals || {}));
+    // Название переменной вебпака, которую он будет использовать для загрузки чанков. Важно чтобы для разных модулей они отличались,
+    // иначе несколько модулей из одного приложения будут конфликтовать между собой
+    webpackConf.output.uniqueName = module.name;
+    const cssPrefix = getCssPrefixForModule(module);
+    if (cssPrefix) {
+        // Добавляем префикс для css-классов, чтобы изолировать стили модуля от стилей основного приложения
+        const cssRule = (0, find_loader_1.findLoader)(webpackConf, '/\\.css$/');
+        const cssModulesRule = (0, find_loader_1.findLoader)(webpackConf, '/\\.module\\.css$/');
+        addPrefixCssRule(cssRule, cssPrefix);
+        addPrefixCssRule(cssModulesRule, `:global(${cssPrefix})`);
+    }
+    return webpackConf;
+}
+exports.patchWebpackConfigForCompat = patchWebpackConfigForCompat;

package/build/configs/process-assets-plugin-output.js

@@ -4,8 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processAssetsPluginOutput = void 0;
+const path_1 = __importDefault(require("path"));
 const app_configs_1 = __importDefault(require("./app-configs"));
+const modules_1 = require("./modules");
 function processAssetsPluginOutput(assets) {
+    var _a;
     let adjustedAssets = assets;
     Object.keys(adjustedAssets).forEach((key) => {
         // заменяем путь к файлам на корректный в случае если в нем есть 'auto/'
@@ -14,6 +17,17 @@ function processAssetsPluginOutput(assets) {
             js: replaceAutoPath(adjustedAssets[key].js),
         };
     });
+    // добавляем в манифест js-файлы для модулей
+    Object.keys(((_a = app_configs_1.default.modules) === null || _a === void 0 ? void 0 : _a.exposes) || {}).forEach((moduleName) => {
+        var _a, _b;
+        if ((_b = (_a = app_configs_1.default.compatModules) === null || _a === void 0 ? void 0 : _a.exposes) === null || _b === void 0 ? void 0 : _b[moduleName]) {
+            throw new Error(`Модуль ${moduleName} определен как module и как compat. Поменяйте название одного из модулей или удалите его`);
+        }
+        adjustedAssets[moduleName] = {
+            mode: 'default',
+            js: path_1.default.join(app_configs_1.default.publicPath, modules_1.MODULES_ENTRY_NAME),
+        };
+    });
     const result = Object.assign(Object.assign({}, adjustedAssets), { __metadata__: {
             version: app_configs_1.default.version,
             name: app_configs_1.default.normalizedName,

package/build/configs/server-externals-exemptions.js

@@ -17,4 +17,5 @@ exports.serverExternalsExemptions = (0, apply_overrides_1.default)('serverExtern
     /^date-fns/,
     /^@corp-front\//,
     /^corp-sign-ui-react/,
+    /^@alfalab\/scripts-/,
 ]);

package/build/configs/util/find-loader.d.ts

@@ -0,0 +1,2 @@
+import webpack from "webpack";
+export declare function findLoader(config: webpack.Configuration, testRule: string): webpack.RuleSetRule | undefined;

package/build/configs/util/find-loader.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findLoader = void 0;
+function findLoader(config, testRule) {
+    var _a;
+    for (const rule of config.module.rules) {
+        if (rule === '...' || !rule) {
+            // Webpack имеет странный тип для rules, который позволяет в него положить строку '...'. Успокаиваем TS
+            continue;
+        }
+        if (rule.test && rule.test.toString() === testRule) {
+            return rule;
+        }
+        if (rule.oneOf) {
+            for (const oneOfRule of rule.oneOf) {
+                if (oneOfRule && oneOfRule.test && ((_a = oneOfRule === null || oneOfRule === void 0 ? void 0 : oneOfRule.test) === null || _a === void 0 ? void 0 : _a.toString()) === testRule) {
+                    return oneOfRule;
+                }
+            }
+        }
+    }
+}
+exports.findLoader = findLoader;

package/build/configs/webpack.client.d.ts

@@ -7,4 +7,4 @@ import { Entry } from './util/get-entry';
  * @param configName Имя конфигурации, если не указано, то используется имя по умолчанию
  */
 export declare const createSingleClientWebpackConfig: (mode: 'dev' | 'prod', entry: Entry, configName?: string) => Configuration;
-export declare const createClientWebpackConfig: (mode: 'dev' | 'prod') => webpack.Configuration;
+export declare const createClientWebpackConfig: (mode: 'dev' | 'prod') => webpack.Configuration | webpack.Configuration[];

package/build/configs/webpack.client.dev.d.ts

@@ -1,2 +1,2 @@
-declare const config: import("webpack").Configuration;
+declare const config: import("webpack").Configuration | import("webpack").Configuration[];
 export default config;

package/build/configs/webpack.client.js

@@ -27,6 +27,7 @@ const webpack_deduplication_plugin_1 = require("webpack-deduplication-plugin");
 const minimizers_1 = require("./config-extras/minimizers");
 const mini_svg_data_uri_1 = __importDefault(require("mini-svg-data-uri"));
 const process_assets_plugin_output_1 = require("./process-assets-plugin-output");
+const modules_1 = require("./modules");
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const noopPath = require.resolve('./util/noop');
@@ -53,16 +54,9 @@ const clientAssetsPlugin = new assets_webpack_plugin_1.default({
  * @param entry Точка входа, любой валидный вход для webpack
  * @param configName Имя конфигурации, если не указано, то используется имя по умолчанию
  */
-const createSingleClientWebpackConfig = (mode, entry, configName) => ({
-    target: 'web',
-    mode: mode === 'dev' ? 'development' : 'production',
-    devtool: mode === 'dev' ? app_configs_1.default.devSourceMaps : 'source-map',
-    entry: (0, get_entry_1.default)(entry, getSingleEntry, mode),
+const createSingleClientWebpackConfig = (mode, entry, configName) => (Object.assign(Object.assign({}, (configName ? { name: configName } : {})), { target: 'web', mode: mode === 'dev' ? 'development' : 'production', devtool: mode === 'dev' ? app_configs_1.default.devSourceMaps : 'source-map', entry: (0, get_entry_1.default)(entry, getSingleEntry, mode), 
     // in production mode we need to fail on first error
-    bail: mode === 'prod',
-    context: app_configs_1.default.cwd,
-    name: configName,
-    output: {
+    bail: mode === 'prod', context: app_configs_1.default.cwd, output: {
         assetModuleFilename: 'static/media/[name].[hash:8][ext]',
         // Add /* filename */ comments to generated require()s in the output.
         pathinfo: mode === 'dev',
@@ -76,8 +70,7 @@ const createSingleClientWebpackConfig = (mode, entry, configName) => ({
         devtoolModuleFilenameTemplate: (info) => path_1.default
             .relative(app_configs_1.default.appSrc, info.absoluteResourcePath)
             .replace(/\\/g, '/'),
-    },
-    optimization: {
+    }, optimization: {
         splitChunks: mode === 'prod'
             ? {
                 chunks: "all",
@@ -153,8 +146,7 @@ const createSingleClientWebpackConfig = (mode, entry, configName) => ({
         // Оптимизации времени билда, см https://webpack.js.org/guides/build-performance/
         removeAvailableModules: mode !== 'dev',
         removeEmptyChunks: mode !== 'dev',
-    },
-    resolve: {
+    }, resolve: {
         // This allows you to set a fallback for where Webpack should look for modules.
         // We placed these paths second because we want `node_modules` to "win"
         // if there are any conflicts. This matches Node resolution mechanism.
@@ -173,21 +165,18 @@ const createSingleClientWebpackConfig = (mode, entry, configName) => ({
                 extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx', '.ts', '.tsx']
             })),
         ].filter(Boolean)),
-    },
-    resolveLoader: {
+    }, resolveLoader: {
         plugins: [
             PnpWebpackPlugin.moduleLoader(module),
         ],
-    },
-    cache: mode === 'dev'
+    }, cache: mode === 'dev'
         ? {
             type: 'filesystem',
             buildDependencies: {
                 config: [__filename],
             },
         }
-        : false,
-    module: {
+        : false, module: {
         // typescript interface will be removed from modules, and we will get an error on correct code
         // see https://github.com/webpack/webpack/issues/7378
         strictExportPresence: !app_configs_1.default.tsconfig,
@@ -320,8 +309,7 @@ const createSingleClientWebpackConfig = (mode, entry, configName) => ({
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before asset modules
         ],
-    },
-    plugins: ([
+    }, plugins: ([
         assetsPlugin,
         clientAssetsPlugin,
         new webpack_1.default.DefinePlugin(Object.assign({ 
@@ -381,22 +369,34 @@ const createSingleClientWebpackConfig = (mode, entry, configName) => ({
         // This should works fine, since proptypes usage should be eliminated in production mode
         mode === 'prod' && !app_configs_1.default.keepPropTypes && new webpack_1.default.NormalModuleReplacementPlugin(/^react-style-proptype$/, noopPath),
         mode === 'prod' && !app_configs_1.default.keepPropTypes && new webpack_1.default.NormalModuleReplacementPlugin(/^thrift-services\/proptypes/, noopPath)
-    ].filter(Boolean)),
-    experiments: {
+    ].filter(Boolean)), experiments: {
         backCompat: app_configs_1.default.webpack4Compatibility,
-    },
+    }, 
     // Без этого комиляция трирегилась на изменение в node_modules и приводила к утечке памяти
     watchOptions: {
         ignored: new RegExp(app_configs_1.default.watchIgnorePath.join('|')),
         aggregateTimeout: 100,
-    },
+    }, 
     // Выключаем performance hints, т.к. размеры бандлов контролируются не в рамках arui-scripts
     performance: {
         hints: false,
-    },
-});
+    } }));
 exports.createSingleClientWebpackConfig = createSingleClientWebpackConfig;
 const createClientWebpackConfig = (mode) => {
-    return (0, exports.createSingleClientWebpackConfig)(mode, app_configs_1.default.clientEntry);
+    var _a;
+    const appWebpackConfig = (0, modules_1.patchMainWebpackConfigForModules)((0, exports.createSingleClientWebpackConfig)(mode, app_configs_1.default.clientEntry));
+    const exposedCompatModules = (_a = app_configs_1.default.compatModules) === null || _a === void 0 ? void 0 : _a.exposes;
+    if (!exposedCompatModules || Object.keys(exposedCompatModules).length === 0) {
+        return appWebpackConfig;
+    }
+    // Добавляем отдельные конфигурации для compat модулей
+    const modulesWebpackConfigs = Object.keys(exposedCompatModules).map((moduleName) => {
+        const module = Object.assign({ name: moduleName }, exposedCompatModules[moduleName]);
+        const config = (0, exports.createSingleClientWebpackConfig)(mode, {
+            [module.name]: module.entry,
+        }, module.name);
+        return (0, modules_1.patchWebpackConfigForCompat)(module, config);
+    });
+    return [appWebpackConfig, ...modulesWebpackConfigs];
 };
 exports.createClientWebpackConfig = createClientWebpackConfig;

package/build/configs/webpack.client.prod.d.ts

@@ -1,2 +1,2 @@
-declare const config: import("webpack").Configuration;
+declare const config: import("webpack").Configuration | import("webpack").Configuration[];
 export default config;