@tramvai/module-child-app 3.27.5 → 3.31.0

package/lib/server/loader.d.ts

@@ -1,20 +1,22 @@
 import type { ChildApp } from '@tramvai/child-app-core';
 import type { ChildAppFinalConfig } from '@tramvai/tokens-child-app';
-import type { CREATE_CACHE_TOKEN, LOGGER_TOKEN } from '@tramvai/tokens-common';
+import type { CREATE_CACHE_TOKEN, LOGGER_TOKEN, ENV_MANAGER_TOKEN } from '@tramvai/tokens-common';
 import { Loader } from '../shared/loader';
-import type { ModuleFederationStats } from '../shared/webpack/moduleFederation';
+import type { LoadableStats, ModuleFederationStats } from '../shared/webpack/moduleFederation';
 export declare class ServerLoader extends Loader {
     private readonly loader;
     private readonly initializedMap;
     private internalLoadCache;
     private log;
-    constructor({ logger, createCache, }: {
+    constructor({ logger, createCache, envManager, }: {
         logger: typeof LOGGER_TOKEN;
         createCache: typeof CREATE_CACHE_TOKEN;
+        envManager: typeof ENV_MANAGER_TOKEN;
     });
     load(config: ChildAppFinalConfig): Promise<ChildApp | void>;
     init(config: ChildAppFinalConfig): Promise<void>;
     get(config: ChildAppFinalConfig): ChildApp | void;
     getStats(config: ChildAppFinalConfig): ModuleFederationStats | void;
+    getLoadableStats(config: ChildAppFinalConfig): LoadableStats | void;
 }
 //# sourceMappingURL=loader.d.ts.map

package/lib/server/loader.es.js

@@ -1,9 +1,10 @@
+import isNil from '@tinkoff/utils/is/nil';
 import { ServerLoader as ServerLoader$1 } from '@tinkoff/module-loader-server';
 import { Loader } from '../shared/loader.es.js';
 import { initModuleFederation, getModuleFederation } from '../shared/webpack/moduleFederation.es.js';
 
 class ServerLoader extends Loader {
-    constructor({ logger, createCache, }) {
+    constructor({ logger, createCache, envManager, }) {
         super();
         this.initializedMap = new WeakMap();
         const cache = createCache('memory', {
@@ -15,10 +16,13 @@ class ServerLoader extends Loader {
         this.loader = new ServerLoader$1({
             cache,
             log: this.log,
+            requestOptions: {
+                circuitBreakerEnabled: isNil(envManager.get('HTTP_CLIENT_CIRCUIT_BREAKER_DISABLED')),
+            },
         });
     }
     async load(config) {
-        await Promise.all([
+        const promises = [
             this.loader.resolveByUrl(config.server.entry, {
                 codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
                 displayName: config.name,
@@ -32,7 +36,19 @@ class ServerLoader extends Loader {
             })
                 // we can live without stats
                 .catch(() => { }),
-        ]);
+        ];
+        if (config.client.statsLoadable) {
+            promises.push(this.loader
+                .resolveByUrl(config.client.statsLoadable, {
+                type: 'json',
+                kind: 'child-app loadable stats',
+                displayName: config.name,
+            })
+                // we can live without loadable stats, for backward compatibility is ok
+                // but hydration errors will occur when lazy component will loaded at client-side at demand
+                .catch(() => { }));
+        }
+        await Promise.all(promises);
         await this.init(config);
         if (config.tag === 'debug') {
             setTimeout(() => {
@@ -68,6 +84,12 @@ class ServerLoader extends Loader {
     getStats(config) {
         return this.loader.getByUrl(config.client.stats);
     }
+    getLoadableStats(config) {
+        if (!config.client.statsLoadable) {
+            return;
+        }
+        return this.loader.getByUrl(config.client.statsLoadable);
+    }
 }
 
 export { ServerLoader };

package/lib/server/loader.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var isNil = require('@tinkoff/utils/is/nil');
 var moduleLoaderServer = require('@tinkoff/module-loader-server');
 var loader = require('../shared/loader.js');
 var moduleFederation = require('../shared/webpack/moduleFederation.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var isNil__default = /*#__PURE__*/_interopDefaultLegacy(isNil);
+
 class ServerLoader extends loader.Loader {
-    constructor({ logger, createCache, }) {
+    constructor({ logger, createCache, envManager, }) {
         super();
         this.initializedMap = new WeakMap();
         const cache = createCache('memory', {
@@ -19,10 +24,13 @@ class ServerLoader extends loader.Loader {
         this.loader = new moduleLoaderServer.ServerLoader({
             cache,
             log: this.log,
+            requestOptions: {
+                circuitBreakerEnabled: isNil__default["default"](envManager.get('HTTP_CLIENT_CIRCUIT_BREAKER_DISABLED')),
+            },
         });
     }
     async load(config) {
-        await Promise.all([
+        const promises = [
             this.loader.resolveByUrl(config.server.entry, {
                 codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
                 displayName: config.name,
@@ -36,7 +44,19 @@ class ServerLoader extends loader.Loader {
             })
                 // we can live without stats
                 .catch(() => { }),
-        ]);
+        ];
+        if (config.client.statsLoadable) {
+            promises.push(this.loader
+                .resolveByUrl(config.client.statsLoadable, {
+                type: 'json',
+                kind: 'child-app loadable stats',
+                displayName: config.name,
+            })
+                // we can live without loadable stats, for backward compatibility is ok
+                // but hydration errors will occur when lazy component will loaded at client-side at demand
+                .catch(() => { }));
+        }
+        await Promise.all(promises);
         await this.init(config);
         if (config.tag === 'debug') {
             setTimeout(() => {
@@ -72,6 +92,12 @@ class ServerLoader extends loader.Loader {
     getStats(config) {
         return this.loader.getByUrl(config.client.stats);
     }
+    getLoadableStats(config) {
+        if (!config.client.statsLoadable) {
+            return;
+        }
+        return this.loader.getByUrl(config.client.statsLoadable);
+    }
 }
 
 exports.ServerLoader = ServerLoader;

package/lib/server/providers.es.js

@@ -1,8 +1,8 @@
 import { combineValidators, isUrl, endsWith } from '@tinkoff/env-validators';
 import { Scope, optional } from '@tinkoff/dippy';
 import { provide, commandLineListTokens } from '@tramvai/core';
-import { ENV_USED_TOKEN, LOGGER_TOKEN, CREATE_CACHE_TOKEN, STORE_TOKEN } from '@tramvai/tokens-common';
-import { RESOURCES_REGISTRY, RENDER_SLOTS, ResourceType, ResourceSlot, REACT_SERVER_RENDER_MODE, EXTEND_RENDER } from '@tramvai/tokens-render';
+import { ENV_USED_TOKEN, LOGGER_TOKEN, CREATE_CACHE_TOKEN, ENV_MANAGER_TOKEN, STORE_TOKEN } from '@tramvai/tokens-common';
+import { RESOURCES_REGISTRY, RENDER_SLOTS, ResourceType, ResourceSlot, RENDER_FLOW_AFTER_TOKEN, REACT_SERVER_RENDER_MODE, EXTEND_RENDER } from '@tramvai/tokens-render';
 import { CHILD_APP_LOADER_TOKEN, CHILD_APP_STATE_MANAGER_TOKEN, CHILD_APP_DI_MANAGER_TOKEN, CHILD_APP_PRELOAD_MANAGER_TOKEN, CHILD_APP_COMMAND_LINE_RUNNER_TOKEN, CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN, CHILD_APP_RESOLVE_CONFIG_TOKEN, CHILD_APP_RENDER_MANAGER_TOKEN } from '@tramvai/tokens-child-app';
 import { safeStringify } from '@tramvai/safe-strings';
 import { ServerLoader } from './loader.es.js';
@@ -32,6 +32,7 @@ const serverProviders = [
         deps: {
             logger: LOGGER_TOKEN,
             createCache: CREATE_CACHE_TOKEN,
+            envManager: ENV_MANAGER_TOKEN,
         },
     }),
     provide({
@@ -72,10 +73,11 @@ const serverProviders = [
         },
     }),
     provide({
-        provide: RENDER_SLOTS,
+        provide: RENDER_FLOW_AFTER_TOKEN,
         multi: true,
         useFactory: registerChildAppRenderSlots,
         deps: {
+            resourcesRegistry: RESOURCES_REGISTRY,
             logger: LOGGER_TOKEN,
             diManager: CHILD_APP_DI_MANAGER_TOKEN,
             resolveFullConfig: CHILD_APP_RESOLVE_CONFIG_TOKEN,

package/lib/server/providers.js

@@ -36,6 +36,7 @@ const serverProviders = [
         deps: {
             logger: tokensCommon.LOGGER_TOKEN,
             createCache: tokensCommon.CREATE_CACHE_TOKEN,
+            envManager: tokensCommon.ENV_MANAGER_TOKEN,
         },
     }),
     core.provide({
@@ -76,10 +77,11 @@ const serverProviders = [
         },
     }),
     core.provide({
-        provide: tokensRender.RENDER_SLOTS,
+        provide: tokensRender.RENDER_FLOW_AFTER_TOKEN,
         multi: true,
         useFactory: renderSlots.registerChildAppRenderSlots,
         deps: {
+            resourcesRegistry: tokensRender.RESOURCES_REGISTRY,
             logger: tokensCommon.LOGGER_TOKEN,
             diManager: tokensChildApp.CHILD_APP_DI_MANAGER_TOKEN,
             resolveFullConfig: tokensChildApp.CHILD_APP_RESOLVE_CONFIG_TOKEN,

package/lib/server/render-slots.d.ts

@@ -1,14 +1,15 @@
 import type { ExtractDependencyType } from '@tinkoff/dippy';
-import type { ChildAppDiManager, ChildAppLoader, ChildAppPreloadManager, CHILD_APP_RESOLVE_CONFIG_TOKEN } from '@tramvai/tokens-child-app';
+import { type ChildAppDiManager, type ChildAppLoader, type ChildAppPreloadManager, type CHILD_APP_RESOLVE_CONFIG_TOKEN } from '@tramvai/tokens-child-app';
 import type { LOGGER_TOKEN } from '@tramvai/tokens-common';
-import type { PageResource, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
+import type { REACT_SERVER_RENDER_MODE, RESOURCES_REGISTRY } from '@tramvai/tokens-render';
 import type { ServerLoader } from './loader';
-export declare const registerChildAppRenderSlots: ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, }: {
+export declare const registerChildAppRenderSlots: ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }: {
     logger: ExtractDependencyType<typeof LOGGER_TOKEN>;
     diManager: ChildAppDiManager;
     resolveFullConfig: ExtractDependencyType<typeof CHILD_APP_RESOLVE_CONFIG_TOKEN>;
     preloadManager: ChildAppPreloadManager;
     loader: ChildAppLoader | ServerLoader;
     renderMode: typeof REACT_SERVER_RENDER_MODE | null;
-}) => PageResource[];
+    resourcesRegistry: ExtractDependencyType<typeof RESOURCES_REGISTRY>;
+}) => () => Promise<void>;
 //# sourceMappingURL=render-slots.d.ts.map

package/lib/server/render-slots.es.js

@@ -2,6 +2,7 @@ import { extname } from 'path';
 import { gt, eq } from 'semver';
 import flatten from '@tinkoff/utils/array/flatten';
 import { resolve } from '@tinkoff/url';
+import { CHILD_APP_INTERNAL_CHUNK_EXTRACTOR } from '@tramvai/tokens-child-app';
 import { RENDER_SLOTS, ResourceType, ResourceSlot } from '@tramvai/tokens-render';
 import { getSharedScope } from '../shared/webpack/moduleFederation.es.js';
 
@@ -13,7 +14,7 @@ const deferScriptAttrs = {
     defer: 'defer',
     async: null,
 };
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, }) => {
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => async () => {
     const log = logger('child-app:render:slots');
     const result = [];
     // defer scripts is not suitable for React streaming, we need to ability to run them as early as possible
@@ -28,7 +29,8 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
             case '.js':
                 result.push({
                     type: ResourceType.script,
-                    slot: ResourceSlot.HEAD_CORE_SCRIPTS,
+                    // we need to load Child Apps scripts before main application scripts
+                    slot: ResourceSlot.HEAD_DYNAMIC_SCRIPTS,
                     payload: entry,
                     attrs: {
                         'data-critical': 'true',
@@ -76,23 +78,31 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
     }
     // eslint-disable-next-line max-statements
     preloadedList.forEach((requestConfig) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const config = resolveFullConfig(requestConfig);
         if (!config) {
             return;
         }
         const stats = 'getStats' in loader ? loader.getStats(config) : undefined;
         const di = diManager.getChildDi(config);
+        const loadableAssets = (_a = di === null || di === void 0 ? void 0 : di.get(CHILD_APP_INTERNAL_CHUNK_EXTRACTOR)) === null || _a === void 0 ? void 0 : _a.getMainAssets();
         addChunk(config.client.entry);
         if (config.css) {
             addChunk(config.css.entry);
         }
+        loadableAssets === null || loadableAssets === void 0 ? void 0 : loadableAssets.map((asset) => resolve(config.client.baseUrl, asset.filename)).filter((file) => {
+            var _a;
+            // filter entry js and css chunks
+            return config.client.entry !== file && ((_a = config.css) === null || _a === void 0 ? void 0 : _a.entry) !== file;
+        }).forEach((file) => {
+            addChunk(file);
+        });
         if (stats && stats.federatedModules) {
             for (const federatedModule of stats.federatedModules) {
                 // entries are duplicated in the `exposes` field of federated stats for some reason
                 // for now there anyway should be only one exposed entry so took the first available
                 const files = new Set();
-                (_b = (_a = federatedModule === null || federatedModule === void 0 ? void 0 : federatedModule.exposes) === null || _a === void 0 ? void 0 : _a.entry) === null || _b === void 0 ? void 0 : _b.forEach((entry) => {
+                (_c = (_b = federatedModule === null || federatedModule === void 0 ? void 0 : federatedModule.exposes) === null || _b === void 0 ? void 0 : _b.entry) === null || _c === void 0 ? void 0 : _c.forEach((entry) => {
                     for (const key in entry) {
                         entry[key].forEach((file) => files.add(file));
                     }
@@ -101,7 +111,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                     addChunk(resolve(config.client.baseUrl, file));
                 }
                 for (const sharedModule of federatedModule.sharedModules) {
-                    const { shareKey } = (_c = sharedModule.provides) === null || _c === void 0 ? void 0 : _c[0];
+                    const { shareKey } = (_d = sharedModule.provides) === null || _d === void 0 ? void 0 : _d[0];
                     const { chunks } = sharedModule;
                     const bestShared = mapSharedToChildApp.get(shareKey);
                     if (!(bestShared === null || bestShared === void 0 ? void 0 : bestShared.eager) && (bestShared === null || bestShared === void 0 ? void 0 : bestShared.name) === config.name) {
@@ -133,7 +143,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
             });
         }
     });
-    return result;
+    result.map((item) => resourcesRegistry.register(item));
 };
 
 export { registerChildAppRenderSlots };

package/lib/server/render-slots.js

@@ -6,6 +6,7 @@ var path = require('path');
 var semver = require('semver');
 var flatten = require('@tinkoff/utils/array/flatten');
 var url = require('@tinkoff/url');
+var tokensChildApp = require('@tramvai/tokens-child-app');
 var tokensRender = require('@tramvai/tokens-render');
 var moduleFederation = require('../shared/webpack/moduleFederation.js');
 
@@ -21,7 +22,7 @@ const deferScriptAttrs = {
     defer: 'defer',
     async: null,
 };
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, }) => {
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => async () => {
     const log = logger('child-app:render:slots');
     const result = [];
     // defer scripts is not suitable for React streaming, we need to ability to run them as early as possible
@@ -36,7 +37,8 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
             case '.js':
                 result.push({
                     type: tokensRender.ResourceType.script,
-                    slot: tokensRender.ResourceSlot.HEAD_CORE_SCRIPTS,
+                    // we need to load Child Apps scripts before main application scripts
+                    slot: tokensRender.ResourceSlot.HEAD_DYNAMIC_SCRIPTS,
                     payload: entry,
                     attrs: {
                         'data-critical': 'true',
@@ -84,23 +86,31 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
     }
     // eslint-disable-next-line max-statements
     preloadedList.forEach((requestConfig) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const config = resolveFullConfig(requestConfig);
         if (!config) {
             return;
         }
         const stats = 'getStats' in loader ? loader.getStats(config) : undefined;
         const di = diManager.getChildDi(config);
+        const loadableAssets = (_a = di === null || di === void 0 ? void 0 : di.get(tokensChildApp.CHILD_APP_INTERNAL_CHUNK_EXTRACTOR)) === null || _a === void 0 ? void 0 : _a.getMainAssets();
         addChunk(config.client.entry);
         if (config.css) {
             addChunk(config.css.entry);
         }
+        loadableAssets === null || loadableAssets === void 0 ? void 0 : loadableAssets.map((asset) => url.resolve(config.client.baseUrl, asset.filename)).filter((file) => {
+            var _a;
+            // filter entry js and css chunks
+            return config.client.entry !== file && ((_a = config.css) === null || _a === void 0 ? void 0 : _a.entry) !== file;
+        }).forEach((file) => {
+            addChunk(file);
+        });
         if (stats && stats.federatedModules) {
             for (const federatedModule of stats.federatedModules) {
                 // entries are duplicated in the `exposes` field of federated stats for some reason
                 // for now there anyway should be only one exposed entry so took the first available
                 const files = new Set();
-                (_b = (_a = federatedModule === null || federatedModule === void 0 ? void 0 : federatedModule.exposes) === null || _a === void 0 ? void 0 : _a.entry) === null || _b === void 0 ? void 0 : _b.forEach((entry) => {
+                (_c = (_b = federatedModule === null || federatedModule === void 0 ? void 0 : federatedModule.exposes) === null || _b === void 0 ? void 0 : _b.entry) === null || _c === void 0 ? void 0 : _c.forEach((entry) => {
                     for (const key in entry) {
                         entry[key].forEach((file) => files.add(file));
                     }
@@ -109,7 +119,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                     addChunk(url.resolve(config.client.baseUrl, file));
                 }
                 for (const sharedModule of federatedModule.sharedModules) {
-                    const { shareKey } = (_c = sharedModule.provides) === null || _c === void 0 ? void 0 : _c[0];
+                    const { shareKey } = (_d = sharedModule.provides) === null || _d === void 0 ? void 0 : _d[0];
                     const { chunks } = sharedModule;
                     const bestShared = mapSharedToChildApp.get(shareKey);
                     if (!(bestShared === null || bestShared === void 0 ? void 0 : bestShared.eager) && (bestShared === null || bestShared === void 0 ? void 0 : bestShared.name) === config.name) {
@@ -141,7 +151,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
             });
         }
     });
-    return result;
+    result.map((item) => resourcesRegistry.register(item));
 };
 
 exports.registerChildAppRenderSlots = registerChildAppRenderSlots;

package/lib/shared/child/extractorProviders.browser.browser.js

@@ -0,0 +1,3 @@
+const extractorProviders = () => [];
+
+export { extractorProviders };

package/lib/shared/child/extractorProviders.browser.d.ts

@@ -0,0 +1,2 @@
+export declare const extractorProviders: () => never[];
+//# sourceMappingURL=extractorProviders.browser.d.ts.map

package/lib/shared/child/extractorProviders.d.ts

@@ -0,0 +1,6 @@
+import { ChunkExtractor } from '@loadable/server';
+import type { LoadableStats } from '../webpack/moduleFederation';
+export declare const extractorProviders: (loadableStats?: LoadableStats) => import("@tramvai/core").Provider<unknown, ChunkExtractor & {
+    __type?: "base token" | undefined;
+}>[];
+//# sourceMappingURL=extractorProviders.d.ts.map

package/lib/shared/child/extractorProviders.es.js

@@ -0,0 +1,14 @@
+import { provide } from '@tramvai/core';
+import { CHILD_APP_INTERNAL_CHUNK_EXTRACTOR } from '@tramvai/tokens-child-app';
+import { ChunkExtractor } from '@loadable/server';
+
+const extractorProviders = (loadableStats) => [
+    provide({
+        provide: CHILD_APP_INTERNAL_CHUNK_EXTRACTOR,
+        useFactory: () => {
+            return new ChunkExtractor({ stats: loadableStats !== null && loadableStats !== void 0 ? loadableStats : {}, entrypoints: [] });
+        },
+    }),
+];
+
+export { extractorProviders };

package/lib/shared/child/extractorProviders.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@tramvai/core');
+var tokensChildApp = require('@tramvai/tokens-child-app');
+var server = require('@loadable/server');
+
+const extractorProviders = (loadableStats) => [
+    core.provide({
+        provide: tokensChildApp.CHILD_APP_INTERNAL_CHUNK_EXTRACTOR,
+        useFactory: () => {
+            return new server.ChunkExtractor({ stats: loadableStats !== null && loadableStats !== void 0 ? loadableStats : {}, entrypoints: [] });
+        },
+    }),
+];
+
+exports.extractorProviders = extractorProviders;

package/lib/shared/child/providers.browser.js

@@ -3,10 +3,12 @@ import { provide } from '@tramvai/core';
 import { ChildDispatcherContext } from '@tramvai/state';
 import { CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN } from '@tramvai/tokens-child-app';
 import { DISPATCHER_CONTEXT_TOKEN, DISPATCHER_TOKEN, STORE_MIDDLEWARE, INITIAL_APP_STATE_TOKEN } from '@tramvai/tokens-common';
+import { extractorProviders } from './extractorProviders.browser.browser.js';
 
-const getChildProviders = (appDi) => {
+const getChildProviders = (appDi, loadableStats) => {
     const parentDispatcherContext = appDi.get(DISPATCHER_CONTEXT_TOKEN);
     return [
+        ...extractorProviders(),
         provide({
             provide: DISPATCHER_CONTEXT_TOKEN,
             useFactory: ({ dispatcher, middlewares, initialState, parentAllowedStores }) => {

package/lib/shared/child/providers.d.ts

@@ -1,4 +1,5 @@
 import type { Container } from '@tinkoff/dippy';
 import type { Provider } from '@tramvai/core';
-export declare const getChildProviders: (appDi: Container) => Provider[];
+import type { LoadableStats } from '../webpack/moduleFederation';
+export declare const getChildProviders: (appDi: Container, loadableStats?: LoadableStats) => Provider[];
 //# sourceMappingURL=providers.d.ts.map

package/lib/shared/child/providers.es.js

@@ -3,10 +3,12 @@ import { provide } from '@tramvai/core';
 import { ChildDispatcherContext } from '@tramvai/state';
 import { CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN } from '@tramvai/tokens-child-app';
 import { DISPATCHER_CONTEXT_TOKEN, DISPATCHER_TOKEN, STORE_MIDDLEWARE, INITIAL_APP_STATE_TOKEN } from '@tramvai/tokens-common';
+import { extractorProviders } from './extractorProviders.es.js';
 
-const getChildProviders = (appDi) => {
+const getChildProviders = (appDi, loadableStats) => {
     const parentDispatcherContext = appDi.get(DISPATCHER_CONTEXT_TOKEN);
     return [
+        ...extractorProviders(loadableStats),
         provide({
             provide: DISPATCHER_CONTEXT_TOKEN,
             useFactory: ({ dispatcher, middlewares, initialState, parentAllowedStores }) => {

package/lib/shared/child/providers.js

@@ -7,14 +7,16 @@ var core = require('@tramvai/core');
 var state = require('@tramvai/state');
 var tokensChildApp = require('@tramvai/tokens-child-app');
 var tokensCommon = require('@tramvai/tokens-common');
+var extractorProviders = require('./extractorProviders.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 
-const getChildProviders = (appDi) => {
+const getChildProviders = (appDi, loadableStats) => {
     const parentDispatcherContext = appDi.get(tokensCommon.DISPATCHER_CONTEXT_TOKEN);
     return [
+        ...extractorProviders.extractorProviders(loadableStats),
         core.provide({
             provide: tokensCommon.DISPATCHER_CONTEXT_TOKEN,
             useFactory: ({ dispatcher, middlewares, initialState, parentAllowedStores }) => {

package/lib/shared/di.browser.js

@@ -32,6 +32,7 @@ class DiManager {
             return;
         }
         const di = new ChildContainer(singletonDi, this.appDi);
+        'getLoadableStats' in this.loader ? this.loader.getLoadableStats(config) : undefined;
         // add providers on the Request Level to make it possible to reuse providers from the root-app ChildContainer
         const childProviders = getChildProviders(this.appDi);
         childProviders.forEach((provider) => {

package/lib/shared/di.es.js

@@ -32,8 +32,9 @@ class DiManager {
             return;
         }
         const di = new ChildContainer(singletonDi, this.appDi);
+        const statsLoadable = 'getLoadableStats' in this.loader ? this.loader.getLoadableStats(config) : undefined;
         // add providers on the Request Level to make it possible to reuse providers from the root-app ChildContainer
-        const childProviders = getChildProviders(this.appDi);
+        const childProviders = getChildProviders(this.appDi, statsLoadable);
         childProviders.forEach((provider) => {
             di.register(provider);
         });

package/lib/shared/di.js

@@ -36,8 +36,9 @@ class DiManager {
             return;
         }
         const di = new dippy.ChildContainer(singletonDi, this.appDi);
+        const statsLoadable = 'getLoadableStats' in this.loader ? this.loader.getLoadableStats(config) : undefined;
         // add providers on the Request Level to make it possible to reuse providers from the root-app ChildContainer
-        const childProviders = providers.getChildProviders(this.appDi);
+        const childProviders = providers.getChildProviders(this.appDi, statsLoadable);
         childProviders.forEach((provider) => {
             di.register(provider);
         });

package/lib/shared/providers.browser.js

@@ -81,6 +81,7 @@ const sharedProviders = [
                         baseUrl: `${baseUrl}${name}/`,
                         entry: `${baseUrl}${name}/${name}_client@${version}.js`,
                         stats: `${baseUrl}${name}/${name}_stats@${version}.json`,
+                        statsLoadable: `${baseUrl}${name}/${name}_stats_loadable@${version}.json`,
                         ...client,
                     },
                     css: withoutCss

package/lib/shared/providers.es.js

@@ -81,6 +81,7 @@ const sharedProviders = [
                         baseUrl: `${baseUrl}${name}/`,
                         entry: `${baseUrl}${name}/${name}_client@${version}.js`,
                         stats: `${baseUrl}${name}/${name}_stats@${version}.json`,
+                        statsLoadable: `${baseUrl}${name}/${name}_stats_loadable@${version}.json`,
                         ...client,
                     },
                     css: withoutCss

package/lib/shared/providers.js

@@ -85,6 +85,7 @@ const sharedProviders = [
                         baseUrl: `${baseUrl}${name}/`,
                         entry: `${baseUrl}${name}/${name}_client@${version}.js`,
                         stats: `${baseUrl}${name}/${name}_stats@${version}.json`,
+                        statsLoadable: `${baseUrl}${name}/${name}_stats_loadable@${version}.json`,
                         ...client,
                     },
                     css: withoutCss

package/lib/shared/react/component.browser.js

@@ -5,6 +5,7 @@ import { CHILD_APP_INTERNAL_RENDER_TOKEN } from '@tramvai/tokens-child-app';
 import { LOGGER_TOKEN } from '@tramvai/tokens-common';
 import { UniversalErrorBoundary, useDi } from '@tramvai/react';
 import { RenderContext } from './render-context.browser.js';
+import { Extractor } from './extractor.browser.browser.js';
 
 const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallback }, }) => {
     const logger = useDi(LOGGER_TOKEN);
@@ -28,6 +29,7 @@ const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallba
     }
     return Fallback ? jsx(Fallback, {}) : null;
 };
+// eslint-disable-next-line max-statements
 const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
     const renderManager = useContext(RenderContext);
     const logger = useDi(LOGGER_TOKEN);
@@ -76,7 +78,7 @@ const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) =>
             });
             return null;
         }
-        return jsx(Cmp, { di: di, props: props });
+        return (jsx(Extractor, { di: di, children: jsx(Cmp, { di: di, props: props }) }));
     }
     catch (error) {
         log.error({

package/lib/shared/react/component.es.js

@@ -5,6 +5,7 @@ import { CHILD_APP_INTERNAL_RENDER_TOKEN } from '@tramvai/tokens-child-app';
 import { LOGGER_TOKEN } from '@tramvai/tokens-common';
 import { UniversalErrorBoundary, useDi } from '@tramvai/react';
 import { RenderContext } from './render-context.es.js';
+import { Extractor } from './extractor.es.js';
 
 const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallback }, }) => {
     const logger = useDi(LOGGER_TOKEN);
@@ -28,6 +29,7 @@ const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallba
     }
     return Fallback ? jsx(Fallback, {}) : null;
 };
+// eslint-disable-next-line max-statements
 const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
     const renderManager = useContext(RenderContext);
     const logger = useDi(LOGGER_TOKEN);
@@ -76,7 +78,7 @@ const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) =>
             });
             return null;
         }
-        return jsx(Cmp, { di: di, props: props });
+        return (jsx(Extractor, { di: di, children: jsx(Cmp, { di: di, props: props }) }));
     }
     catch (error) {
         log.error({

package/lib/shared/react/component.js

@@ -9,6 +9,7 @@ var tokensChildApp = require('@tramvai/tokens-child-app');
 var tokensCommon = require('@tramvai/tokens-common');
 var react$1 = require('@tramvai/react');
 var renderContext = require('./render-context.js');
+var extractor = require('./extractor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,6 +37,7 @@ const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallba
     }
     return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
 };
+// eslint-disable-next-line max-statements
 const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
     const renderManager = react.useContext(renderContext.RenderContext);
     const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
@@ -84,7 +86,7 @@ const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) =>
             });
             return null;
         }
-        return jsxRuntime.jsx(Cmp, { di: di, props: props });
+        return (jsxRuntime.jsx(extractor.Extractor, { di: di, children: jsxRuntime.jsx(Cmp, { di: di, props: props }) }));
     }
     catch (error) {
         log.error({

package/lib/shared/react/extractor.browser.browser.js

@@ -0,0 +1,5 @@
+const Extractor = ({ children }) => {
+    return children;
+};
+
+export { Extractor };

package/lib/shared/react/extractor.browser.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const Extractor: ({ children }: PropsWithChildren<{}>) => import("react").ReactNode;
+//# sourceMappingURL=extractor.browser.d.ts.map

package/lib/shared/react/extractor.d.ts

@@ -0,0 +1,6 @@
+import { type Container } from '@tinkoff/dippy';
+import type { ComponentType, PropsWithChildren } from 'react';
+export declare const Extractor: ComponentType<PropsWithChildren<{
+    di: Container;
+}>>;
+//# sourceMappingURL=extractor.d.ts.map

package/lib/shared/react/extractor.es.js

@@ -0,0 +1,15 @@
+import { ChunkExtractorManager } from '@loadable/server';
+import { optional } from '@tinkoff/dippy';
+import { CHILD_APP_INTERNAL_CHUNK_EXTRACTOR } from '@tramvai/tokens-child-app';
+import { createElement } from 'react';
+
+// Use `.ts` file, not `.tsx` because `@tramvai/build` expect only `.ts` source files extension if file is used in package.json `browser` field
+const Extractor = ({ children, di, }) => {
+    const extractor = di.get(optional(CHILD_APP_INTERNAL_CHUNK_EXTRACTOR));
+    if (!extractor) {
+        return children;
+    }
+    return createElement(ChunkExtractorManager, { extractor }, children);
+};
+
+export { Extractor };

package/lib/shared/react/extractor.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var server = require('@loadable/server');
+var dippy = require('@tinkoff/dippy');
+var tokensChildApp = require('@tramvai/tokens-child-app');
+var react = require('react');
+
+// Use `.ts` file, not `.tsx` because `@tramvai/build` expect only `.ts` source files extension if file is used in package.json `browser` field
+const Extractor = ({ children, di, }) => {
+    const extractor = di.get(dippy.optional(tokensChildApp.CHILD_APP_INTERNAL_CHUNK_EXTRACTOR));
+    if (!extractor) {
+        return children;
+    }
+    return react.createElement(server.ChunkExtractorManager, { extractor }, children);
+};
+
+exports.Extractor = Extractor;

package/lib/shared/webpack/moduleFederation.d.ts

@@ -42,6 +42,9 @@ export interface ModuleFederationStats {
         exposes: Record<string, Array<Record<string, string[]>>>;
     }>;
 }
+export interface LoadableStats {
+    [key: string]: any;
+}
 export declare const getSharedScope: (scope?: string) => ModuleFederationSharedScope;
 export declare const initModuleFederation: (container?: ModuleFederationContainer, scope?: string) => Promise<void>;
 export declare const getModuleFederation: (container: ModuleFederationContainer, name?: string) => Promise<unknown>;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "3.27.5",
+  "version": "3.31.0",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
     "./lib/server/child/singletonProviders.js": "./lib/browser/child/singletonProviders.js",
     "./lib/server/child/providers.js": "./lib/browser/child/providers.js",
+    "./lib/shared/react/extractor.js": "./lib/shared/react/extractor.browser.js",
+    "./lib/shared/child/extractorProviders.js": "./lib/shared/child/extractorProviders.browser.js",
     "./lib/server.es.js": "./lib/browser.js"
   },
   "main": "lib/server.js",
@@ -27,25 +29,26 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@loadable/server": "^5.15.0",
     "@tinkoff/env-validators": "0.2.1",
     "@tinkoff/module-loader-client": "0.5.1",
-    "@tinkoff/module-loader-server": "0.6.2",
+    "@tinkoff/module-loader-server": "0.6.3",
     "@tinkoff/url": "0.9.2",
-    "@tramvai/child-app-core": "3.27.5",
+    "@tramvai/child-app-core": "3.31.0",
     "@tramvai/safe-strings": "0.6.2",
-    "@tramvai/tokens-child-app": "3.27.5"
+    "@tramvai/tokens-child-app": "3.31.0"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.9.2",
-    "@tinkoff/router": "0.3.52",
+    "@tinkoff/router": "0.3.57",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "3.27.5",
-    "@tramvai/state": "3.27.5",
-    "@tramvai/react": "3.27.5",
-    "@tramvai/tokens-common": "3.27.5",
-    "@tramvai/tokens-render": "3.27.5",
-    "@tramvai/tokens-router": "3.27.5",
+    "@tramvai/core": "3.31.0",
+    "@tramvai/state": "3.31.0",
+    "@tramvai/react": "3.31.0",
+    "@tramvai/tokens-common": "3.31.0",
+    "@tramvai/tokens-render": "3.31.0",
+    "@tramvai/tokens-router": "3.31.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",