arui-scripts 15.4.1 → 15.5.1

package/.turbo/turbo-test.log

@@ -1,4 +1,4 @@
-PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts (21.526 s)
+PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts (14.362 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:        28.222 s
+Time:        15.75 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # [15.3.0](https://github.com/core-ds/arui-scripts/compare/v15.2.0...v15.3.0) (2023-06-30)
 
+## 15.5.1
+
+### Patch Changes
+
+- [#64](https://github.com/core-ds/arui-scripts/pull/64) [`82b0587`](https://github.com/core-ds/arui-scripts/commit/82b0587b9333193a6eaad3ed29b2d3a32745479c) Thanks [@heymdall-legal](https://github.com/heymdall-legal)! - Always load custom media variables, remove css vars when keepCssVars set to false
+
+## 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

package/README.md

@@ -95,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

@@ -68,6 +68,9 @@ function getDefaultAppConfig() {
         // CSS
         componentsTheme: null,
         keepCssVars: false,
+        // Modules
+        compatModules: null,
+        modules: null,
     };
 }
 exports.getDefaultAppConfig = getDefaultAppConfig;

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/postcss.config.js

@@ -28,9 +28,9 @@ exports.postcssPlugins = [
     'postcss-mixins',
     'postcss-for',
     'postcss-each',
-    (app_configs_1.default.componentsTheme || app_configs_1.default.keepCssVars) && '@csstools/postcss-global-data',
-    app_configs_1.default.keepCssVars && 'postcss-custom-media',
-    app_configs_1.default.componentsTheme && 'postcss-custom-properties',
+    '@csstools/postcss-global-data',
+    'postcss-custom-media',
+    !app_configs_1.default.keepCssVars && 'postcss-custom-properties',
     'postcss-strip-units',
     'postcss-calc',
     'postcss-color-function',
@@ -46,7 +46,7 @@ exports.postcssPluginsOptions = {
     },
     '@csstools/postcss-global-data': {
         files: [
-            app_configs_1.default.keepCssVars && path_1.default.join(__dirname, 'mq.css'),
+            path_1.default.join(__dirname, 'mq.css'),
             app_configs_1.default.componentsTheme
         ].filter(Boolean),
     },

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');
@@ -382,6 +383,20 @@ const createSingleClientWebpackConfig = (mode, entry, configName) => (Object.ass
     } }));
 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;