arui-scripts 14.4.0 → 14.5.0-feat-modules.1

package/build/configs/modules.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExposeLoadersFormEmbeddedModules = exports.getChunkNamePrefix = exports.getCssPrefixForModule = exports.haveExposedMfModules = exports.processAssetsPluginOutput = void 0;
+const app_configs_1 = __importDefault(require("./app-configs"));
+function processAssetsPluginOutput(assets) {
+    var _a;
+    let adjustedAssets = assets;
+    if (haveExposedMfModules()) { // для mf модулей мы делаем publicPath 'auto', но в самом манифесте нам все равно хочется видеть нормальный путь
+        Object.keys(adjustedAssets).forEach((key) => {
+            adjustedAssets[key] = {
+                css: replaceAutoPath(adjustedAssets[key].css),
+                js: replaceAutoPath(adjustedAssets[key].js),
+            };
+        });
+    }
+    const result = Object.assign(Object.assign({}, adjustedAssets), { __metadata__: {
+            version: app_configs_1.default.version,
+            name: ((_a = app_configs_1.default.mfModules) === null || _a === void 0 ? void 0 : _a.name) || app_configs_1.default.normalizedName,
+        } });
+    return JSON.stringify(result);
+}
+exports.processAssetsPluginOutput = processAssetsPluginOutput;
+function replaceAutoPath(assets) {
+    if (!assets) {
+        return assets;
+    }
+    if (Array.isArray(assets)) {
+        return assets.map((asset) => asset.replace(/^auto\//, app_configs_1.default.publicPath));
+    }
+    return assets.replace(/^auto\//, app_configs_1.default.publicPath);
+}
+function haveExposedMfModules() {
+    var _a;
+    return (_a = app_configs_1.default.mfModules) === null || _a === void 0 ? void 0 : _a.exposes;
+}
+exports.haveExposedMfModules = haveExposedMfModules;
+function getCssPrefixForModule(module) {
+    if (module.cssPrefix) {
+        return module.cssPrefix;
+    }
+    if (module.cssPrefix === false) {
+        return undefined;
+    }
+    return `.module-${module.name}`;
+}
+exports.getCssPrefixForModule = getCssPrefixForModule;
+function getChunkNamePrefix(module) {
+    if (!module) {
+        return '';
+    }
+    return `${module.name}-`;
+}
+exports.getChunkNamePrefix = getChunkNamePrefix;
+function getExposeLoadersFormEmbeddedModules(module) {
+    var _a;
+    const shared = (_a = app_configs_1.default.embeddedModules) === null || _a === void 0 ? void 0 : _a.shared;
+    if (!shared || module) {
+        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.getExposeLoadersFormEmbeddedModules = getExposeLoadersFormEmbeddedModules;

package/build/configs/server-externals-exemptions.d.ts

@@ -1 +1 @@
-export declare const serverExternalsExemptions: (string | RegExp)[];
+export declare const serverExternalsExemptions: RegExp[];

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/,
+    /^arui-sciprts-utils/,
 ]);

package/build/configs/util/apply-overrides.d.ts

@@ -2,14 +2,14 @@ import type { Configuration as WebpackConfiguration, WebpackOptionsNormalized }
 import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { AppConfigs } from '../app-configs/types';
 type Overrides = {
-    webpack: WebpackConfiguration;
-    webpackClient: WebpackConfiguration;
-    webpackDev: WebpackConfiguration;
-    webpackClientDev: WebpackConfiguration;
+    webpack: WebpackConfiguration | WebpackConfiguration[];
+    webpackClient: WebpackConfiguration | WebpackConfiguration[];
+    webpackDev: WebpackConfiguration | WebpackConfiguration[];
+    webpackClientDev: WebpackConfiguration | WebpackConfiguration[];
     webpackServer: WebpackConfiguration;
     webpackServerDev: WebpackConfiguration;
     webpackProd: WebpackConfiguration;
-    webpackClientProd: WebpackConfiguration;
+    webpackClientProd: WebpackConfiguration | WebpackConfiguration[];
     webpackServerProd: WebpackConfiguration;
     devServer: WebpackDevServerConfiguration;
     stats: WebpackOptionsNormalized['stats'];
@@ -36,5 +36,5 @@ export type OverrideFile = {
  * @param {Object} config Конфиг, к которому нужно применить оверрайды
  * @returns {*}
  */
-declare function applyOverrides<Key extends keyof Overrides>(overridesKey: Key | Key[], config: Overrides[Key]): Overrides[Key];
+declare function applyOverrides<T extends Overrides[Key], Key extends keyof Overrides>(overridesKey: Key | Key[], config: T): T;
 export default applyOverrides;

package/build/configs/util/get-entry.d.ts

@@ -1,8 +1,9 @@
+export type Entry = string | string[] | Record<string, string | string[]>;
 /**
  * @param {string|string[]|object} entryPoint Строка, массив строк или объект с энтрипоинтами
  * @param {Function} getSingleEntry Функция, возвращающая конфигурацию для одного entryPoint
  * @param args Дополнительные аргументы, которые будут переданы в getSingleEntry функцию
  * @returns {*}
  */
-declare function getEntry<AdditionalArgs extends unknown[]>(entryPoint: string | string[] | Record<string, string | string[]>, getSingleEntry: (entry: string[], ...args: AdditionalArgs) => string[], ...args: AdditionalArgs): string[] | Record<string, string | string[]>;
+declare function getEntry<AdditionalArgs extends unknown[]>(entryPoint: Entry, getSingleEntry: (entry: string[], ...args: AdditionalArgs) => string[], ...args: AdditionalArgs): string[] | Record<string, string | string[]>;
 export default getEntry;

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

@@ -1,2 +1,5 @@
-import { Configuration } from 'webpack';
-export declare const createClientWebpackConfig: (mode: 'dev' | 'prod') => Configuration;
+import webpack, { Configuration } from 'webpack';
+import { Entry } from './util/get-entry';
+import { EmbeddedModuleConfig } from './app-configs/types';
+export declare const createSingleClientWebpackConfig: (mode: 'dev' | 'prod', entry: Entry, module?: EmbeddedModuleConfig) => 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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createClientWebpackConfig = void 0;
+exports.createClientWebpackConfig = exports.createSingleClientWebpackConfig = void 0;
 const path_1 = __importDefault(require("path"));
 const webpack_1 = __importDefault(require("webpack"));
 const webpack_manifest_plugin_1 = require("webpack-manifest-plugin");
@@ -14,7 +14,7 @@ const compression_webpack_plugin_1 = __importDefault(require("compression-webpac
 const assets_webpack_plugin_1 = __importDefault(require("assets-webpack-plugin"));
 const tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
 const getCSSModuleLocalIdent_1 = __importDefault(require("react-dev-utils/getCSSModuleLocalIdent"));
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const postcss_prefix_selector_1 = __importDefault(require("postcss-prefix-selector"));
 const get_entry_1 = __importDefault(require("./util/get-entry"));
 const app_configs_1 = __importDefault(require("./app-configs"));
 const babel_client_1 = __importDefault(require("./babel-client"));
@@ -24,21 +24,32 @@ const babel_dependencies_1 = require("./babel-dependencies");
 const react_refresh_typescript_1 = __importDefault(require("react-refresh-typescript"));
 const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
 const case_sensitive_paths_webpack_plugin_1 = __importDefault(require("case-sensitive-paths-webpack-plugin"));
+const modules_1 = require("./modules");
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const noopPath = require.resolve('./util/noop');
 function getSingleEntry(entryPoint, mode) {
     return [
         ...(Array.isArray(app_configs_1.default.clientPolyfillsEntry) ? app_configs_1.default.clientPolyfillsEntry : [app_configs_1.default.clientPolyfillsEntry]),
-        mode === 'dev' ? require.resolve('webpack/hot/dev-server') : false,
         ...entryPoint
     ].filter(Boolean);
 }
-// This is the production configuration.
-const createClientWebpackConfig = (mode) => ({
+// Нам важно шарить assets plugin между разными сборками, чтобы файл не перезаписывался
+const assetsPlugin = new assets_webpack_plugin_1.default({
+    path: app_configs_1.default.serverOutputPath,
+    processOutput: modules_1.processAssetsPluginOutput,
+});
+// Этот плагин нужен для того, чтобы клиентский код так же могу получить информацию о сборке.
+// Это позволяет нам делать виджеты, работающие только на клиенте
+const clientAssetsPlugin = new assets_webpack_plugin_1.default({
+    path: app_configs_1.default.clientOutputPath,
+    processOutput: modules_1.processAssetsPluginOutput,
+});
+const createSingleClientWebpackConfig = (mode, entry, module) => ({
     target: 'web',
     mode: mode === 'dev' ? 'development' : 'production',
     devtool: mode === 'dev' ? app_configs_1.default.devSourceMaps : 'source-map',
-    entry: (0, get_entry_1.default)(app_configs_1.default.clientEntry, getSingleEntry, mode),
+    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,
@@ -46,14 +57,21 @@ const createClientWebpackConfig = (mode) => ({
         // Add /* filename */ comments to generated require()s in the output.
         pathinfo: mode === 'dev',
         path: app_configs_1.default.clientOutputPath,
-        publicPath: app_configs_1.default.publicPath,
+        publicPath: (0, modules_1.haveExposedMfModules)()
+            ? 'auto' // Для того чтобы модули могли подключаться из разных мест, нам необходимо использовать auto. Для корректной работы в IE надо подключaть https://github.com/amiller-gh/currentScript-polyfill
+            : app_configs_1.default.publicPath,
         filename: mode === 'dev' ? '[name].js' : '[name].[chunkhash:8].js',
-        chunkFilename: mode === 'dev' ? '[name].js' : '[name].[chunkhash:8].chunk.js',
+        chunkFilename: mode === 'dev'
+            ? `${(0, modules_1.getChunkNamePrefix)(module)}[name].js`
+            : `${(0, modules_1.getChunkNamePrefix)(module)}[name].[chunkhash:8].chunk.js`,
         // Point sourcemap entries to original disk location (format as URL on Windows)
         devtoolModuleFilenameTemplate: (info) => path_1.default
             .relative(app_configs_1.default.appSrc, info.absoluteResourcePath)
             .replace(/\\/g, '/'),
+        // для модулей нам надо переопределять глобальную переменную webpack, чтобы несколько модулей из одного бандла могли работать в одном окружении
+        uniqueName: module ? module.name : undefined
     },
+    externals: Object.assign({}, ((module === null || module === void 0 ? void 0 : module.embeddedConfig) ? module.embeddedConfig : {})),
     optimization: {
         splitChunks: mode === 'prod'
             ? {
@@ -68,7 +86,14 @@ const createClientWebpackConfig = (mode) => ({
                     vendor: {
                         test: /node_modules/,
                         chunks: "initial",
-                        name: "vendor",
+                        name: (_, chunks, cacheGroupKey) => {
+                            if (!module) {
+                                return 'vendor';
+                            }
+                            // Нам нужно сделать так, чтобы у модулей vendor файл назывался иначе, чем просто vendor
+                            const allChunksNames = chunks.map((item) => item.name).join('~');
+                            return `${cacheGroupKey}-${allChunksNames}`;
+                        },
                         priority: 10,
                         enforce: true
                     }
@@ -161,6 +186,7 @@ const createClientWebpackConfig = (mode) => ({
         // see https://github.com/webpack/webpack/issues/7378
         strictExportPresence: !app_configs_1.default.tsconfig,
         rules: [
+            ...(0, modules_1.getExposeLoadersFormEmbeddedModules)(module),
             {
                 // "oneOf" will traverse all following loaders until one will
                 // match the requirements. When no loader matches it will fall
@@ -251,7 +277,11 @@ const createClientWebpackConfig = (mode) => ({
                                     // Necessary for external CSS imports to work
                                     // https://github.com/facebookincubator/create-react-app/issues/2677
                                     ident: 'postcss',
-                                    plugins: () => postcss_1.default,
+                                    plugins: () => {
+                                        const prefix = module ? (0, modules_1.getCssPrefixForModule)(module) : undefined;
+                                        return [...postcss_1.default]
+                                            .concat(prefix ? (0, postcss_prefix_selector_1.default)({ prefix }) : []);
+                                    },
                                 },
                             },
                         ],
@@ -280,7 +310,11 @@ const createClientWebpackConfig = (mode) => ({
                                     // Necessary for external CSS imports to work
                                     // https://github.com/facebookincubator/create-react-app/issues/2677
                                     ident: 'postcss',
-                                    plugins: () => postcss_1.default,
+                                    plugins: () => {
+                                        const prefix = module ? (0, modules_1.getCssPrefixForModule)(module) : undefined;
+                                        return [...postcss_1.default]
+                                            .concat(prefix ? (0, postcss_prefix_selector_1.default)({ prefix: `:global(${prefix})` }) : []);
+                                    },
                                 },
                             },
                         ],
@@ -308,7 +342,8 @@ const createClientWebpackConfig = (mode) => ({
         ],
     },
     plugins: ([
-        new assets_webpack_plugin_1.default({ path: app_configs_1.default.serverOutputPath }),
+        assetsPlugin,
+        clientAssetsPlugin,
         new webpack_1.default.DefinePlugin(Object.assign({ 
             // Tell Webpack to provide empty mocks for process.env.
             'process.env': '{}' }, (mode === 'dev'
@@ -349,7 +384,13 @@ const createClientWebpackConfig = (mode) => ({
         // Ignore prop-types packages in production mode
         // 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)
+        mode === 'prod' && !app_configs_1.default.keepPropTypes && new webpack_1.default.NormalModuleReplacementPlugin(/^thrift-services\/proptypes/, noopPath),
+        app_configs_1.default.mfModules && !module && new webpack_1.default.container.ModuleFederationPlugin({
+            name: app_configs_1.default.mfModules.name || app_configs_1.default.normalizedName,
+            filename: app_configs_1.default.mfModules.exposes ? 'remoteEntry.js' : undefined,
+            shared: app_configs_1.default.mfModules.shared,
+            exposes: app_configs_1.default.mfModules.exposes,
+        }),
     ].filter(Boolean)),
     experiments: {
         backCompat: app_configs_1.default.webpack4Compatibility,
@@ -359,11 +400,24 @@ const createClientWebpackConfig = (mode) => ({
         ignored: new RegExp(app_configs_1.default.watchIgnorePath.join('|')),
         aggregateTimeout: 100,
     },
-    // Turn off performance hints during development because we don't do any
-    // splitting or minification in interest of speed. These warnings become
-    // cumbersome.
+    // Выключаем performance hints, т.к. размеры бандлов контролируются не в рамках arui-scripts
     performance: {
-        hints: mode === 'dev' ? false : 'warning',
+        hints: false,
     },
 });
+exports.createSingleClientWebpackConfig = createSingleClientWebpackConfig;
+const createClientWebpackConfig = (mode) => {
+    var _a;
+    const appWebpackConfig = (0, exports.createSingleClientWebpackConfig)(mode, app_configs_1.default.clientEntry);
+    const exposedModules = (_a = app_configs_1.default.embeddedModules) === null || _a === void 0 ? void 0 : _a.exposes;
+    if (!exposedModules || Object.keys(exposedModules).length === 0) {
+        return appWebpackConfig;
+    }
+    const modulesWebpackConfigs = Object.keys(exposedModules).map((moduleId) => {
+        return (0, exports.createSingleClientWebpackConfig)(mode, {
+            [moduleId]: exposedModules[moduleId].entry,
+        }, Object.assign({ name: moduleId }, exposedModules[moduleId]));
+    });
+    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;

package/build/index.d.ts

@@ -1,4 +1,5 @@
 export type { OverrideFile } from './configs/util/apply-overrides';
-export type { PackageSettings } from './configs/app-configs/available-package-settings';
+export type { AppConfigs, PackageSettings } from './configs/app-configs/types';
 export { prepareFilesForDocker } from './commands/util/docker-build';
 export { getBuildParamsFromArgs } from './commands/util/docker-build';
+export { getDockerBuildCommand } from './commands/util/docker-build';

package/build/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBuildParamsFromArgs = exports.prepareFilesForDocker = void 0;
+exports.getDockerBuildCommand = exports.getBuildParamsFromArgs = exports.prepareFilesForDocker = void 0;
 var docker_build_1 = require("./commands/util/docker-build");
 Object.defineProperty(exports, "prepareFilesForDocker", { enumerable: true, get: function () { return docker_build_1.prepareFilesForDocker; } });
 var docker_build_2 = require("./commands/util/docker-build");
 Object.defineProperty(exports, "getBuildParamsFromArgs", { enumerable: true, get: function () { return docker_build_2.getBuildParamsFromArgs; } });
+var docker_build_3 = require("./commands/util/docker-build");
+Object.defineProperty(exports, "getDockerBuildCommand", { enumerable: true, get: function () { return docker_build_3.getDockerBuildCommand; } });