@gravity-ui/app-builder 0.29.3 → 0.30.1

package/README.md

@@ -330,3 +330,141 @@ worker.onmessage = ({data: {result}}) => {
 
 worker.postMessage({a: 1, b: 2});
 ```
+
+##### Module Federation
+
+Module Federation is a Webpack 5 feature that enables micro-frontend architecture, where JavaScript applications can dynamically load code from each other at runtime.
+
+`app-builder` uses `@module-federation/enhanced` for advanced Module Federation support.
+
+- `moduleFederation` (`object`) — Module Federation configuration
+  - `name` (`string`) — unique name of the application in the Module Federation ecosystem. Required parameter.
+  - `version` (`string`) — application version. When specified, the entry file will be named `entry-{version}.js` instead of `entry.js`.
+  - `publicPath` (`string`) — base URL for loading resources of this micro-frontend. Required parameter.
+  - `remotes` (`string[]`) — list of remote application names that this application can load. Simplified alternative to `originalRemotes`.
+  - `originalRemotes` (`RemotesObject`) — full configuration of remote applications in Module Federation Plugin format.
+  - `remotesRuntimeVersioning` (`boolean`) — enables runtime versioning for remote applications.
+  - `isolateStyles` (`object`) — CSS style isolation settings to prevent conflicts between micro-frontends.
+    - `getPrefix` (`(entryName: string) => string`) — function to generate CSS class prefix.
+    - `prefixSelector` (`(prefix: string, selector: string, prefixedSelector: string, filePath: string) => string`) — function to add prefix to CSS selectors.
+  - Also supports all standard options from [@module-federation/enhanced](https://module-federation.io/), except `name` and `remotes`, such as:
+    - `filename` — entry file name (default `remoteEntry.js`)
+    - `exposes` — modules that this application exports
+    - `shared` — shared dependencies between applications
+    - `runtimePlugins` — plugins for Module Federation runtime
+
+**Host Application Configuration Example:**
+
+Host applications consume remote modules from other micro-frontends:
+
+```ts
+export default defineConfig({
+  client: {
+    moduleFederation: {
+      name: 'shell',
+      publicPath: 'https://cdn.example.com/my-app/',
+      // Simple remotes configuration
+      remotes: ['header', 'footer', 'sidebar'],
+      shared: {
+        react: {singleton: true, requiredVersion: '^18.0.0'},
+        'react-dom': {singleton: true, requiredVersion: '^18.0.0'},
+        lodash: {singleton: true},
+      },
+    },
+  },
+});
+```
+
+**Advanced Host Configuration:**
+
+```ts
+export default defineConfig({
+  client: {
+    moduleFederation: {
+      name: 'main-shell',
+      version: '2.1.0',
+      publicPath: 'https://cdn.example.com/my-app/',
+      // Detailed remotes configuration
+      originalRemotes: {
+        header: 'header@https://cdn.example.com/header/remoteEntry.js',
+        footer: 'footer@https://cdn.example.com/footer/remoteEntry.js',
+        userProfile: 'userProfile@https://cdn.example.com/user-profile/remoteEntry.js',
+      },
+      remotesRuntimeVersioning: true,
+      isolateStyles: {
+        getPrefix: (entryName) => `.app-${entryName}`,
+        prefixSelector: (prefix, selector, prefixedSelector, filePath) => {
+          if (
+            [prefix, ':root', 'html', 'body', '.g-root', '.remote-app'].some((item) =>
+              selector.startsWith(item),
+            ) ||
+            filePath.includes('@gravity-ui/chartkit')
+          ) {
+            return selector;
+          }
+          return prefixedSelector;
+        },
+      },
+      shared: {
+        react: {singleton: true, requiredVersion: '^18.0.0'},
+        'react-dom': {singleton: true, requiredVersion: '^18.0.0'},
+        lodash: {singleton: true},
+      },
+    },
+  },
+});
+```
+
+**Remote Application Configuration Example:**
+
+Remote applications expose their modules for consumption by host applications:
+
+```ts
+export default defineConfig({
+  client: {
+    moduleFederation: {
+      name: 'header',
+      publicPath: 'https://cdn.example.com/my-app/',
+      // Expose modules for other applications
+      exposes: {
+        './Header': './src/components/Header',
+        './Navigation': './src/components/Navigation',
+        './UserMenu': './src/components/UserMenu',
+      },
+      shared: {
+        react: {singleton: true, requiredVersion: '^18.0.0'},
+        'react-dom': {singleton: true, requiredVersion: '^18.0.0'},
+        lodash: {singleton: true},
+      },
+    },
+  },
+});
+```
+
+**Bidirectional Configuration Example:**
+
+Applications can be both host and remote simultaneously:
+
+```ts
+export default defineConfig({
+  client: {
+    moduleFederation: {
+      name: 'dashboard',
+      version: '1.5.0',
+      publicPath: 'https://cdn.example.com/my-app/',
+      // Consume remote modules
+      remotes: ['charts', 'notifications'],
+      // Expose own modules
+      exposes: {
+        './DashboardLayout': './src/layouts/DashboardLayout',
+        './DataTable': './src/components/DataTable',
+      },
+      shared: {
+        react: {singleton: true, requiredVersion: '^18.0.0'},
+        'react-dom': {singleton: true, requiredVersion: '^18.0.0'},
+        lodash: {singleton: true},
+      },
+    },
+  },
+});
+```

package/dist/cli.js

@@ -15,17 +15,17 @@ const { version } = process;
 if (!semver_1.default.satisfies(version, `>=${MIN_NODE_VERSION}`, {
     includePrerelease: true,
 })) {
-    logger_1.default.panic((0, common_tags_1.stripIndent)(`
+    logger_1.default.panic((0, common_tags_1.stripIndent) `
             App-builder requires Node.js ${MIN_NODE_VERSION} or higher (you have ${version}).
             Upgrade Node to the latest stable release.
-        `));
+        `);
 }
 if (semver_1.default.prerelease(version)) {
-    logger_1.default.warning((0, common_tags_1.stripIndent)(`
+    logger_1.default.warning((0, common_tags_1.stripIndent) `
             You are currently using a prerelease version of Node (${version}), which is not supported.
             You can use this for testing, but we do not recommend it in production.
             Before reporting any bugs, please test with a supported version of Node (>=${MIN_NODE_VERSION}).
-        `));
+        `);
 }
 process.on('unhandledRejection', (reason) => {
     // This will exit the process in newer Node anyway so lets be consistent

package/dist/commands/build/build-service/server.js

@@ -38,7 +38,7 @@ const logger = new Logger('server', ${config.verbose});
 compile(ts, {logger, projectPath: ${JSON.stringify(paths_1.default.appServer)}});`;
 }
 function buildServer(config) {
-    (0, utils_1.createRunFolder)();
+    (0, utils_1.createRunFolder)(config);
     return new Promise((resolve, reject) => {
         const build = new controllable_script_1.ControllableScript(config.server.compiler === 'swc'
             ? createSWCBuildScript(config)

package/dist/commands/dev/client.js

@@ -152,7 +152,7 @@ async function buildDevServer(config) {
     };
     const listenOn = options.port || options.ipc;
     if (!listenOn) {
-        options.ipc = path.resolve(paths_1.default.appDist, 'run/client.sock');
+        options.ipc = path.resolve((0, utils_1.getAppRunPath)(config), 'client.sock');
     }
     const proxy = options.proxy || [];
     if (config.client.lazyCompilation && bundler !== 'rspack') {

package/dist/commands/dev/index.js

@@ -39,13 +39,14 @@ async function default_1(config) {
     process.env.NODE_ENV = 'development';
     const shouldCompileClient = (0, utils_1.shouldCompileTarget)(config.target, 'client');
     const shouldCompileServer = (0, utils_1.shouldCompileTarget)(config.target, 'server');
+    const appRunPath = (0, utils_1.getAppRunPath)(config);
     if (shouldCompileClient && shouldCompileServer) {
         try {
-            fs.accessSync(paths_1.default.appRun, fs.constants.W_OK | fs.constants.X_OK); // eslint-disable-line no-bitwise
-            rimraf_1.rimraf.sync(paths_1.default.appRun);
+            fs.accessSync(appRunPath, fs.constants.W_OK | fs.constants.X_OK); // eslint-disable-line no-bitwise
+            rimraf_1.rimraf.sync(appRunPath);
         }
         catch (error) {
-            logger_1.default.warning(`Failed to remove appRun path [${paths_1.default.appRun}]: ${error}`);
+            logger_1.default.warning(`Failed to remove appRun path [${appRunPath}]: ${error}`);
         }
     }
     let clientCompiled = !shouldCompileClient;

package/dist/commands/dev/server.js

@@ -79,7 +79,7 @@ watch(
 async function watchServerCompilation(config) {
     const serverPath = path.resolve(paths_1.default.appDist, 'server');
     rimraf_1.rimraf.sync(serverPath);
-    (0, utils_1.createRunFolder)();
+    (0, utils_1.createRunFolder)(config);
     const build = new controllable_script_1.ControllableScript(config.server.compiler === 'swc'
         ? createSWCBuildScript(config)
         : createTypescriptBuildScript(config), null);

package/dist/common/config.js

@@ -22,14 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getProjectConfig = getProjectConfig;
 exports.normalizeConfig = normalizeConfig;
 const path = __importStar(require("node:path"));
 const cosmiconfig_1 = require("cosmiconfig");
 const cosmiconfig_typescript_loader_1 = require("cosmiconfig-typescript-loader");
+const common_tags_1 = require("common-tags");
 const models_1 = require("./models");
 const utils_1 = require("./utils");
+const logger_1 = __importDefault(require("./logger"));
 function splitPaths(paths) {
     return (Array.isArray(paths) ? paths : [paths]).flatMap((p) => p.split(','));
 }
@@ -183,6 +188,18 @@ async function normalizeConfig(userConfig, mode) {
     return config;
 }
 async function normalizeClientConfig(client, mode) {
+    let publicPath = client.publicPath || path.normalize(`${client.publicPathPrefix || ''}/build/`);
+    if (client.moduleFederation) {
+        publicPath = path.normalize(`${publicPath}${client.moduleFederation.name}/`);
+    }
+    let transformCssWithLightningCss = Boolean(client.transformCssWithLightningCss);
+    if (client.moduleFederation?.isolateStyles && transformCssWithLightningCss) {
+        transformCssWithLightningCss = false;
+        logger_1.default.warning((0, common_tags_1.stripIndent) `
+                transformCssWithLightningCss option is disabled because moduleFederation.isolateStyles is enabled.
+                postcss loader will be used instead.
+            `);
+    }
     const normalizedConfig = {
         ...client,
         forkTsChecker: client.disableForkTsChecker ? false : client.forkTsChecker,
@@ -190,14 +207,18 @@ async function normalizeClientConfig(client, mode) {
             ? false
             : (client.reactRefresh ?? ((options) => options)),
         newJsxTransform: client.newJsxTransform ?? true,
-        publicPath: client.publicPath || path.normalize(`${client.publicPathPrefix || ''}/build/`),
-        assetsManifestFile: client.assetsManifestFile || 'assets-manifest.json',
+        publicPath,
+        assetsManifestFile: client.assetsManifestFile ||
+            (client.moduleFederation?.version
+                ? `assets-manifest-${client.moduleFederation.version}.json`
+                : 'assets-manifest.json'),
         modules: client.modules && remapPaths(client.modules),
         includes: client.includes && remapPaths(client.includes),
         images: client.images && remapPaths(client.images),
         hiddenSourceMap: client.hiddenSourceMap ?? true,
         svgr: client.svgr ?? {},
         entryFilter: client.entryFilter && splitPaths(client.entryFilter),
+        transformCssWithLightningCss,
         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,

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

@@ -16,6 +16,7 @@ import type { WebpackMode } from '../webpack/config';
 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';
+import type { moduleFederationPlugin } from '@module-federation/enhanced';
 type Bundler = 'webpack' | 'rspack';
 type JavaScriptLoader = 'babel' | 'swc';
 type ServerCompiler = 'typescript' | 'swc';
@@ -59,6 +60,64 @@ interface LazyCompilationConfig {
      */
     entries?: boolean;
 }
+export type ModuleFederationConfig = Omit<moduleFederationPlugin.ModuleFederationPluginOptions, 'name' | 'remotes'> & {
+    /**
+     * Unique name of the application in the Module Federation ecosystem
+     * Used as an identifier for this micro-frontend
+     */
+    name: string;
+    /**
+     * Application version, appended to the entry file name
+     * When specified, the file will be named `entry-{version}.js`
+     * @default undefined (file will be named `entry.js`)
+     */
+    version?: string;
+    /**
+     * Base URL for loading resources of this micro-frontend
+     * Should point to a publicly accessible URL where the files will be hosted
+     * @example 'https://cdn.example.com/my-app/'
+     */
+    publicPath: string;
+    /**
+     * List of remote application names that this application can load
+     * Simplified alternative to originalRemotes - only names are specified
+     * @example ['header', 'footer', 'navigation']
+     */
+    remotes?: string[];
+    /**
+     * Full configuration of remote applications in Module Federation format
+     * Allows more detailed configuration of each remote application
+     * @example { header: 'header@https://header.example.com/remoteEntry.js' }
+     */
+    originalRemotes?: moduleFederationPlugin.ModuleFederationPluginOptions['remotes'];
+    /**
+     * Enables runtime versioning for remote applications
+     * When enabled, remote applications will be loaded with version in the filename
+     * @default false
+     */
+    remotesRuntimeVersioning?: boolean;
+    /**
+     * CSS style isolation settings to prevent conflicts
+     * between styles of different micro-frontends
+     */
+    isolateStyles?: {
+        /**
+         * Function to generate CSS class prefix
+         * @param entryName - Application entry name
+         * @returns Prefix string for CSS classes
+         */
+        getPrefix: (entryName: string) => string;
+        /**
+         * Function to add prefix to CSS selectors
+         * @param prefix - Prefix to add
+         * @param selector - Original CSS selector
+         * @param prefixedSelector - Selector with added prefix
+         * @param filePath - Path to the styles file
+         * @returns Modified CSS selector
+         */
+        prefixSelector: (prefix: string, selector: string, prefixedSelector: string, filePath: string) => string;
+    };
+};
 export interface ClientConfig {
     modules?: string[];
     /**
@@ -248,6 +307,11 @@ export interface ClientConfig {
     };
     bundler?: Bundler;
     javaScriptLoader?: JavaScriptLoader;
+    /**
+     * Module Federation configuration for building micro-frontends
+     * @see https://module-federation.io/
+     */
+    moduleFederation?: ModuleFederationConfig;
 }
 export interface CdnUploadConfig {
     bucket: string;
@@ -281,7 +345,7 @@ export interface ServiceConfig {
     verbose?: boolean;
     configPath?: string;
 }
-export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'publicPath' | 'assetsManifestFile' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh'> & {
+export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'publicPath' | 'assetsManifestFile' | 'hiddenSourceMap' | 'svgr' | 'lazyCompilation' | 'devServer' | 'disableForkTsChecker' | 'disableReactRefresh' | 'transformCssWithLightningCss'> & {
     bundler: Bundler;
     javaScriptLoader: JavaScriptLoader;
     publicPath: string;
@@ -294,6 +358,7 @@ export type NormalizedClientConfig = Omit<ClientConfig, 'publicPathPrefix' | 'pu
         server?: ServerConfiguration;
     };
     verbose?: boolean;
+    transformCssWithLightningCss: boolean;
     webpack: (config: Configuration, options: {
         configType: `${WebpackMode}`;
         isSsr: boolean;

package/dist/common/s3-upload/create-plugin.js

@@ -1,6 +1,30 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createS3UploadPlugins = createS3UploadPlugins;
+const path = __importStar(require("node:path"));
 const webpack_plugin_1 = require("./webpack-plugin");
 function createS3UploadPlugins(config, logger) {
     const plugins = [];
@@ -26,6 +50,10 @@ function createS3UploadPlugins(config, logger) {
                 secretAccessKey,
             };
         }
+        let targetPath = cdn.prefix;
+        if (config.moduleFederation && targetPath !== undefined) {
+            targetPath = path.join(targetPath, config.moduleFederation.name);
+        }
         plugins.push(new webpack_plugin_1.S3UploadPlugin({
             exclude: config.hiddenSourceMap ? /\.map$/ : undefined,
             compress: cdn.compress,
@@ -36,7 +64,7 @@ function createS3UploadPlugins(config, logger) {
             },
             s3UploadOptions: {
                 bucket: cdn.bucket,
-                targetPath: cdn.prefix,
+                targetPath,
                 cacheControl: cdn.cacheControl,
             },
             additionalPattern: cdn.additionalPattern,

package/dist/common/utils.d.ts

@@ -1,4 +1,6 @@
-export declare function createRunFolder(): void;
+import type { NormalizedServiceConfig } from './models';
+export declare function getAppRunPath(config: NormalizedServiceConfig): string;
+export declare function createRunFolder(config: NormalizedServiceConfig): void;
 export declare function shouldCompileTarget(target: 'client' | 'server' | undefined, targetName: string): boolean;
 export declare function getCacheDir(): Promise<string>;
 export declare function getPort({ port }: {

package/dist/common/utils.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppRunPath = getAppRunPath;
 exports.createRunFolder = createRunFolder;
 exports.shouldCompileTarget = shouldCompileTarget;
 exports.getCacheDir = getCacheDir;
@@ -10,11 +11,15 @@ exports.getPort = getPort;
 exports.deferredPromise = deferredPromise;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_os_1 = __importDefault(require("node:os"));
+const node_path_1 = __importDefault(require("node:path"));
 const paths_1 = __importDefault(require("./paths"));
-function createRunFolder() {
-    const runPath = paths_1.default.appRun;
-    if (!node_fs_1.default.existsSync(runPath)) {
-        node_fs_1.default.mkdirSync(runPath, { recursive: true });
+function getAppRunPath(config) {
+    return node_path_1.default.resolve(paths_1.default.appRun, config.client.moduleFederation?.name || '');
+}
+function createRunFolder(config) {
+    const appRunPath = getAppRunPath(config);
+    if (!node_fs_1.default.existsSync(appRunPath)) {
+        node_fs_1.default.mkdirSync(appRunPath, { recursive: true });
     }
 }
 function shouldCompileTarget(target, targetName) {

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

@@ -9,8 +9,6 @@ export interface HelperOptions {
     isEnvProduction: boolean;
     configType: `${WebpackMode}`;
     buildDirectory: string;
-    assetsManifestFile: string;
-    entry?: string | string[] | Record<string, string | string[]>;
     entriesDirectory: string;
     isSsr: boolean;
     configPath?: string;

package/dist/common/webpack/config.js

@@ -62,15 +62,17 @@ const fontSizeLimit = 8192;
 function getHelperOptions({ webpackMode, config, logger, isSsr = false, configPath, }) {
     const isEnvDevelopment = webpackMode === "development" /* WebpackMode.Dev */;
     const isEnvProduction = webpackMode === "production" /* WebpackMode.Prod */;
+    let buildDirectory = config.outputPath || (isSsr ? paths_1.default.appSsrBuild : paths_1.default.appBuild);
+    if (config.moduleFederation) {
+        buildDirectory = path.resolve(buildDirectory, config.moduleFederation.name);
+    }
     return {
         config,
         logger,
         isEnvDevelopment,
         isEnvProduction,
         configType: webpackMode,
-        buildDirectory: config.outputPath || (isSsr ? paths_1.default.appSsrBuild : paths_1.default.appBuild),
-        assetsManifestFile: config.assetsManifestFile,
-        entry: config.entry,
+        buildDirectory,
         entriesDirectory: isSsr ? paths_1.default.appSsrEntry : paths_1.default.appEntry,
         isSsr,
         configPath,
@@ -91,13 +93,21 @@ function configureExternals({ config, isSsr }) {
 }
 function configureWebpackCache(options) {
     const { config } = options;
-    if (typeof config.cache === 'object' && config.cache.type === 'filesystem') {
-        return {
-            ...config.cache,
+    let cache = config.cache;
+    if (typeof cache === 'object' && cache.type === 'filesystem') {
+        cache = {
+            ...cache,
             buildDependencies: getCacheBuildDependencies(options),
         };
+        if (config.moduleFederation) {
+            cache = {
+                name: config.moduleFederation.name,
+                version: config.moduleFederation.version,
+                ...cache,
+            };
+        }
     }
-    return config.cache;
+    return cache;
 }
 async function webpackConfigFactory(options) {
     const { config } = options;
@@ -340,6 +350,10 @@ function configureResolve({ isEnvProduction, config }) {
         fallback: config.fallback,
     };
 }
+function isModuleFederationEntry(entryName, fileName) {
+    // Ignore bootstrap file for module federation entries
+    return entryName === fileName || `${entryName}-bootstrap` === fileName;
+}
 function createEntryArray(entry) {
     if (typeof entry === 'string') {
         return [require.resolve('./public-path'), entry];
@@ -352,24 +366,44 @@ function addEntry(entry, file) {
         [path.parse(file).name]: createEntryArray(file),
     };
 }
-function configureEntry({ config, entry, entriesDirectory }) {
-    if (typeof entry === 'string' || Array.isArray(entry)) {
-        return createEntryArray(entry);
+function configureEntry({ config, entriesDirectory }) {
+    if (typeof config.entry === 'string' || Array.isArray(config.entry)) {
+        return createEntryArray(config.entry);
     }
-    if (typeof entry === 'object') {
-        return Object.entries(entry).reduce((acc, [key, value]) => ({
+    if (typeof config.entry === 'object') {
+        return Object.entries(config.entry).reduce((acc, [key, value]) => ({
             ...acc,
             [key]: createEntryArray(value),
         }), {});
     }
-    let entries = fs.readdirSync(entriesDirectory).filter((file) => /\.[jt]sx?$/.test(file));
+    let entryFiles = fs.readdirSync(entriesDirectory).filter((file) => /\.[jt]sx?$/.test(file));
+    let result = {};
+    if (config.moduleFederation) {
+        const { name, remotes } = config.moduleFederation;
+        const entryFile = entryFiles.find((item) => path.parse(item).name === name);
+        if (!entryFile) {
+            throw new Error(`Entry "${name}" not found`);
+        }
+        // If remotes are not defined, it means that we are a remote
+        if (!remotes) {
+            return path.resolve(entriesDirectory, entryFile);
+        }
+        entryFiles = entryFiles.filter((file) => {
+            const fileName = path.parse(file).name;
+            return (!isModuleFederationEntry(name, fileName) &&
+                remotes.every((remote) => !isModuleFederationEntry(remote, fileName)));
+        });
+        result = {
+            main: createEntryArray(path.resolve(entriesDirectory, entryFile)),
+        };
+    }
     if (Array.isArray(config.entryFilter) && config.entryFilter.length) {
-        entries = entries.filter((file) => config.entryFilter?.includes(file.split('.')[0] ?? ''));
+        entryFiles = entryFiles.filter((file) => config.entryFilter?.includes(path.parse(file).name));
     }
-    if (!entries.length) {
+    if (!entryFiles.length) {
         throw new Error('No entries were found after applying entry filter');
     }
-    return entries.reduce((acc, file) => addEntry(acc, path.resolve(entriesDirectory, file)), {});
+    return entryFiles.reduce((acc, file) => addEntry(acc, path.resolve(entriesDirectory, file)), result);
 }
 function getFileNames({ isEnvProduction, isSsr, config }) {
     let ext = 'js';
@@ -384,18 +418,25 @@ function getFileNames({ isEnvProduction, isSsr, config }) {
     };
 }
 function configureOutput(options) {
-    let ssrOptions;
+    let ssrOptions, moduleFederationOptions;
     if (options.isSsr) {
         ssrOptions = {
             library: { type: options.config.ssr?.moduleType === 'esm' ? 'module' : 'commonjs2' },
             chunkFormat: false,
         };
     }
+    if (options.config.moduleFederation) {
+        moduleFederationOptions = {
+            publicPath: 'auto',
+            uniqueName: options.config.moduleFederation.name,
+        };
+    }
     return {
         ...getFileNames(options),
         path: options.buildDirectory,
         pathinfo: options.isEnvDevelopment,
         ...ssrOptions,
+        ...moduleFederationOptions,
     };
 }
 async function createJavaScriptLoader({ isEnvProduction, isEnvDevelopment, configType, config, isSsr, }) {
@@ -594,15 +635,27 @@ function getCssLoaders({ isEnvDevelopment, isEnvProduction, config, isSsr }, add
     const isRspack = config.bundler === 'rspack';
     const loaders = [];
     if (!config.transformCssWithLightningCss) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const postcssPlugins = [
+            [require.resolve('postcss-preset-env'), { enableClientSidePolyfills: false }],
+        ];
+        if (config.moduleFederation?.isolateStyles) {
+            const { name, isolateStyles } = config.moduleFederation;
+            postcssPlugins.push([
+                require.resolve('postcss-prefix-selector'),
+                {
+                    prefix: isolateStyles.getPrefix(name),
+                    transform: isolateStyles.prefixSelector,
+                },
+            ]);
+        }
         loaders.push({
             loader: require.resolve('postcss-loader'),
             options: {
                 sourceMap: !config.disableSourceMapGeneration,
                 postcssOptions: {
                     config: false,
-                    plugins: [
-                        [require.resolve('postcss-preset-env'), { enableClientSidePolyfills: false }],
-                    ],
+                    plugins: postcssPlugins,
                 },
             },
         });
@@ -908,6 +961,32 @@ function configureCommonPlugins(options, bundlerPlugins) {
             }));
         }
         plugins.push(createMomentTimezoneDataPlugin(config.momentTz));
+        if (config.moduleFederation) {
+            const { name, version, publicPath, remotes, originalRemotes, remotesRuntimeVersioning, runtimePlugins, ...restOptions } = config.moduleFederation;
+            let actualRemotes = originalRemotes;
+            if (remotes) {
+                actualRemotes = remotes.reduce((acc, remoteName) => {
+                    const remoteFilename = remotesRuntimeVersioning
+                        ? 'entry-[version].js'
+                        : 'entry.js';
+                    // eslint-disable-next-line no-param-reassign
+                    acc[remoteName] =
+                        `${remoteName}@${publicPath}${remoteName}/${remoteFilename}`;
+                    return acc;
+                }, {});
+            }
+            const actualRuntimePlugins = runtimePlugins || [];
+            if (remotesRuntimeVersioning) {
+                actualRuntimePlugins.push(require.resolve('./runtime-versioning-plugin'));
+            }
+            plugins.push(new bundlerPlugins.ModuleFederationPlugin({
+                name,
+                filename: version ? `entry-${version}.js` : 'entry.js',
+                remotes: actualRemotes,
+                runtimePlugins: actualRuntimePlugins,
+                ...restOptions,
+            }));
+        }
     }
     if (isEnvProduction) {
         if (config.analyzeBundle === 'true') {
@@ -955,18 +1034,20 @@ function configureWebpackPlugins(options) {
         TsCheckerPlugin: fork_ts_checker_webpack_plugin_1.default,
         CSSExtractPlugin: mini_css_extract_plugin_1.default,
         RSDoctorPlugin: require('@rsdoctor/webpack-plugin').RsdoctorWebpackPlugin,
+        ModuleFederationPlugin: require('@module-federation/enhanced/webpack')
+            .ModuleFederationPlugin,
     };
     const webpackPlugins = [
         ...configureCommonPlugins(options, plugins),
         new webpack_assets_manifest_1.default(isEnvProduction
             ? {
                 entrypoints: true,
-                output: options.assetsManifestFile,
+                output: config.assetsManifestFile,
             }
             : {
                 entrypoints: true,
                 writeToDisk: true,
-                output: path.resolve(options.buildDirectory, options.assetsManifestFile),
+                output: path.resolve(options.buildDirectory, config.assetsManifestFile),
             }),
         ...(process.env.WEBPACK_PROFILE === 'true' ? [new webpack.debug.ProfilingPlugin()] : []),
     ];
@@ -991,13 +1072,15 @@ function configureRspackPlugins(options) {
         TsCheckerPlugin: ts_checker_rspack_plugin_1.TsCheckerRspackPlugin,
         CSSExtractPlugin: core_1.rspack.CssExtractRspackPlugin,
         RSDoctorPlugin: require('@rsdoctor/rspack-plugin').RsdoctorRspackPlugin,
+        ModuleFederationPlugin: require('@module-federation/enhanced/rspack')
+            .ModuleFederationPlugin,
     };
     const rspackPlugins = [
         ...configureCommonPlugins(options, plugins),
         new rspack_manifest_plugin_1.RspackManifestPlugin({
             fileName: isEnvProduction
-                ? options.assetsManifestFile
-                : path.resolve(options.buildDirectory, options.assetsManifestFile),
+                ? config.assetsManifestFile
+                : path.resolve(options.buildDirectory, config.assetsManifestFile),
             writeToFileEmit: true,
             useLegacyEmit: true,
             publicPath: '',
@@ -1183,7 +1266,7 @@ function configureRspackOptimization(helperOptions) {
     }
     const optimization = {
         splitChunks: getOptimizationSplitChunks(helperOptions),
-        runtimeChunk: 'single',
+        runtimeChunk: helperOptions.config.moduleFederation ? false : 'single',
         minimizer: [new core_1.rspack.SwcJsMinimizerRspackPlugin(swcMinifyOptions), cssMinimizer],
     };
     return optimization;

package/dist/common/webpack/public-path.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable camelcase, no-implicit-globals */
 Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-expect-error
 __webpack_public_path__ = globalThis.__PUBLIC_PATH__ ?? '/build/';

package/dist/common/webpack/runtime-versioning-plugin.d.ts

@@ -0,0 +1,5 @@
+export default RuntimeVersioningPlugin;
+declare function RuntimeVersioningPlugin(): {
+    name: string;
+    beforeRequest: (args: any) => any;
+};

package/dist/common/webpack/runtime-versioning-plugin.js

@@ -0,0 +1,22 @@
+"use strict";
+/* global window */
+Object.defineProperty(exports, "__esModule", { value: true });
+const RuntimeVersioningPlugin = () => {
+    return {
+        name: 'runtime-versioning-plugin',
+        beforeRequest: (args) => {
+            if (typeof window.__REMOTE_VERSIONS__ !== 'object') {
+                return args;
+            }
+            args.options.remotes.forEach((remote) => {
+                const remoteVersion = window.__REMOTE_VERSIONS__[remote.name];
+                if (remoteVersion) {
+                    // eslint-disable-next-line no-param-reassign
+                    remote.entry = remote.entry.replace('[version]', remoteVersion);
+                }
+            });
+            return args;
+        },
+    };
+};
+exports.default = RuntimeVersioningPlugin;

package/dist/common/webpack/storybook.js

@@ -113,8 +113,6 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
         config: config.client,
         configType: mode,
         buildDirectory: config.client.outputPath || paths_1.default.appBuild,
-        assetsManifestFile: config.client.assetsManifestFile,
-        entry: config.client.entry,
         entriesDirectory: paths_1.default.appEntry,
         isSsr: false,
     };

package/dist/common/webpack/worker/public-path.worker.js

@@ -1,3 +1,5 @@
 "use strict";
+/* eslint-disable no-implicit-globals, camelcase */
 Object.defineProperty(exports, "__esModule", { value: true });
+// @ts-expect-error
 __webpack_public_path__ = self.__PUBLIC_PATH__;

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export * from './common/s3-upload';
 export { createTransformPathsToLocalModules } from './common/typescript/transformers';
 export { defineConfig } from './common/models';
 export { babelPreset } from './common/babel';
-export type { ProjectConfig, ServiceConfig, LibraryConfig, ProjectFileConfig } from './common/models';
+export type { ProjectConfig, ServiceConfig, LibraryConfig, ModuleFederationConfig, ProjectFileConfig, } from './common/models';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.29.3",
+  "version": "0.30.1",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -68,6 +68,7 @@
     "@babel/preset-react": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@babel/runtime": "^7.26.0",
+    "@module-federation/enhanced": "^0.18.0",
     "@okikio/sharedworker": "^1.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@rsdoctor/rspack-plugin": "^1.0.2",
@@ -117,6 +118,7 @@
     "pino-pretty": "^11.2.0",
     "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
+    "postcss-prefix-selector": "^2.1.1",
     "postcss-preset-env": "^9.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",