@tramvai/module-child-app 2.76.2 → 2.77.0

package/README.md

@@ -62,7 +62,7 @@ This section will explain how the child-app are loaded and executed.
 
 ### DI
 
-Every child-app has its own DI-hierarchy which is isolated from other child app and partially from root-app. The only way communicate fpr DIs it's getting providers from root-app di inside child-app.
+Every child-app has its own DI-hierarchy which is isolated from other child app and partially from root-app. The only way communicate for DIs it's getting providers from root-app DI inside child-app.
 
 Next picture shows connection between DI-containers in `root-app` and `child-app`s
 
@@ -80,6 +80,16 @@ How does it work when we trying to get provider from DI in `child-app`:
    1. If it exists then return it
    2. Throw error otherwise
 
+There is a list of providers - exceptions, for which only factories will be borrowed, not instances, and new instances will be created in current Child-App DI:
+- `COMMAND_LINE_RUNNER_TOKEN`
+- `ACTION_EXECUTION_TOKEN`
+- `ACTION_PAGE_RUNNER_TOKEN`
+- `DISPATCHER_TOKEN`
+- `STORE_TOKEN`
+- `CONTEXT_TOKEN`
+- `CREATE_CACHE_TOKEN`
+- `CLEAR_CACHE_TOKEN`
+
 ### CommandLineRunner
 
 Each `child-app` has its own CommandLineRunner instance which allows to `child-app` make some preparations before the actual page render. This CommandLineRunner has almost identical lines as `root-app` to simplicity, but it is actually completely other line which are independent from lines in `root-app`
@@ -164,6 +174,39 @@ This token is considered undesirable to use as it leads to high coupling with st
 
 :::
 
+### Module Federation sharing dependencies
+
+Child-apps utilizes [Module Federation](https://webpack.js.org/concepts/module-federation/) feature of webpack.
+
+That allows child-apps:
+- share dependencies between child-apps and root-app
+- fallbacks to loading dependencies on request if implementation for dependency was not provided before or version of the dependency not satisfies request
+
+The list of default shared dependencies is very short as it can increase bundle size in cases when child-apps are not used.
+
+The following dependencies are shared by default:
+- react core packages (react, react-dom, react/jsx-runtime)
+- @tramvai/react
+- @tinkoff/dippy
+- @tramvai/core
+
+To add additional dependency follow [instructions](#add-dependency-to-shared-list)
+
+#### FAQ about shared dependencies
+
+- **How shared dependencies look like?**. It mostly the implementation details but some info below might be useful for understanding:
+  - if shared dependency is provided in root-app the dependency will built in the initial chunk of root-app and dependency will be available without any additional network requests (these dependencies are marked as `eager` in moduleFederation config)
+  - if shared dependency is missing in the root-app then additional network request will be executed to some of child-app static files to load dependency code (the highest available version of dependency from all of child-apps will be loaded) i.e. additional js file with the name of shared dependency will be loaded on child-app usage.
+- **How does shared dependencies affects root-app build?**. Using shared dependency slightly increases the generated bundle size. So it is preferred to make the list of shared dependencies as small as possible.
+- **How versions of shared dependencies are resolved?**. Module federation will prefer to use the highest available version for the dependency but only if it satisfies the semver constraints of the all consumers. So it is preferred to use higher versions of the dependencies in the root-app and do not upgrade dependency versions in the child-apps without special need.
+- **Dependency is added to list of shared but is not used by the app code**. Such dependency will not be provided and will not be available for consumption by other apps in that case.
+- **How css is shared?**. Currently css are fully separated between root-app and child-app and child-app buid generates only single css file for the whole child-app
+- **If two modules are using same shared dependency and root-app doesn't provide this dependency will the code for dep be loaded twice?**. It depends. On the client-side module federation will try to make only single network request, but with SSR it becomes a little more complicated and it is hard to resolve everything properly on server-side so sometimes it may lead to two network requests for different versions of the same dependency.
+- **If version in child-app and root-app are not semver compatible**. Then child-app will load it's own version in that case as root-app cannot provide compatible version
+- **Can I make sure the shared dependency is initialized only once across consumers?**. Yes, you can pass an object with `singleton` property instead of bare string in the tramvai.json config for shared dependency.
+- **Should I add only high level wrapper of the dependencies I need to provide the list of all dependencies that I want to share?**. Better try different setups and see the output bundle size as it depends. The main rule is provide all of modules that might be imported by app code and that use the same low-level libraries. E.g. to share react-query integration add `@tramvai/module-react-query` and `@tramvai/react-query` to the shared dependencies
+- **When building child-app I see two chunks related to the same package**. It happens due to some of caveats how module federation works. But anyway most of the time only single chunk will be used for the package, so just ignore the fact that in generated files you see two chunks.
+
 ### Error handling
 
 #### Error while loading child-app configs
@@ -359,6 +402,56 @@ const PageCmp: PageComponent = () => {
 PageCmp.childApps = [{ name: '[name]' }];
 ```
 
+### Add dependency to shared list
+
+:::tip
+
+To get most of the sharing dependencies add dependency both for root-apps that uses child-apps with the dependency and child-apps that uses the dependency
+
+:::
+
+In tramvai.json add new `shared` field
+
+```json
+{
+  "projects": {
+    "root-app": {
+      "name": "root-app",
+      "root": "root-app",
+      "type": "application",
+      "hotRefresh": {
+        "enabled": true
+      },
+      "shared": {
+        "deps": [
+          "@tramvai/react-query",
+          "@tramvai/module-react-query",
+          { "name": "@tramvai/state", "singleton": true }
+        ]
+      }
+    },
+    "child-app": {
+      "name": "child-app",
+      "root": "child-app",
+      "type": "child-app",
+      "shared": {
+        "deps": [
+          "@tramvai/react-query",
+          "@tramvai/module-react-query",
+          { "name": "@tramvai/state", "singleton": true },
+        ]
+      }
+    }
+  }
+}
+```
+
+In order to choose what dependencies should be shared:
+- use `tramvai analyze` command to explore the output bundle and how different options affects it
+- try different dependencies and see what is loading on the page when child-app is used
+- validate how adding shared dependency affects root-app bundle size through `trmavai analyze`
+
+
 ### Debug child-app problems
 
 If your are facing any problems while developing or using child-app use next instructions first.
@@ -441,3 +534,26 @@ Few advices to avoid this problem:
 
 - Memoize object, passed to child-app `props` property
 - Prevent pass to child-app properties, which can be changed during hydration, for example at client-side in page actions
+
+### Shared dependency are still loaded although the root-app shares it
+
+Refer to the [FAQ](#faq-about-shared-dependencies) about the details. In summary:
+- it is more reliable to provide shared dependency from the root-app than relying on sharing between several child-apps
+- make sure all versions of the shared dependencies are semver compatible
+
+### Token with name already created!
+
+The issue happens when `@tinkoff/dippy` library is shared due to fact that root-app and child-apps will have separate instances of the same tokens packages with the same naming.
+
+For now, just ignore that kind of warnings during development. In producation these warnings won't be shown
+
+### Possible problems with shared dependency
+
+#### react-query: No QueryClient set, use QueryClientProvider to set one
+
+The issue may happen if there are different instances of `@tramvai/module-react-query` and `@tramvai/react-query` and therefore internal code inside `@tramvai/react-query` resolves React Context that differs from the QueryClient Provided inside `@tramvai/module-react-query`
+
+To resolve the issue:
+- when defining shared dependencies add both `@tramvai/module-react-query` and `@tramvai/module-react-query`
+- make sure that both packages are used in the root-app (or none) as both instances should resolve to one place and if it isn't apply then for example `@tramvai/react-query` might instantiate with different React Context
+- another option would be to add underlying library `@tanstack/react-query` to both child-app and root-app shared dependencies to make sure that required React Context is created only in single instance

package/lib/server/loader.d.ts

@@ -2,10 +2,12 @@ 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 { Loader } from '../shared/loader';
+import type { ModuleFederationStats } from '../shared/webpack/moduleFederation';
 export declare class ServerLoader extends Loader {
     private readonly loader;
     private readonly initializedMap;
     private internalLoadCache;
+    private log;
     constructor({ logger, createCache, }: {
         logger: typeof LOGGER_TOKEN;
         createCache: typeof CREATE_CACHE_TOKEN;
@@ -13,4 +15,5 @@ export declare class ServerLoader extends Loader {
     load(config: ChildAppFinalConfig): Promise<ChildApp | void>;
     init(config: ChildAppFinalConfig): Promise<void>;
     get(config: ChildAppFinalConfig): ChildApp | void;
+    getStats(config: ChildAppFinalConfig): ModuleFederationStats | void;
 }

package/lib/server/loader.es.js

@@ -11,17 +11,28 @@ class ServerLoader extends Loader {
             max: 20,
         });
         this.internalLoadCache = cache;
+        this.log = logger('child-app:loader');
         this.loader = new ServerLoader$1({
             cache,
-            log: logger('child-app:loader'),
+            log: this.log,
         });
     }
     async load(config) {
-        await this.loader.resolveByUrl(config.server.entry, {
-            codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
-            displayName: config.name,
-            kind: 'child-app',
-        });
+        await Promise.all([
+            this.loader.resolveByUrl(config.server.entry, {
+                codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
+                displayName: config.name,
+                kind: 'child-app',
+            }),
+            this.loader
+                .resolveByUrl(config.client.stats, {
+                type: 'json',
+                kind: 'child-app stats',
+                displayName: config.name,
+            })
+                // we can live without stats
+                .catch(() => { }),
+        ]);
         await this.init(config);
         if (config.tag === 'debug') {
             setTimeout(() => {
@@ -32,16 +43,30 @@ class ServerLoader extends Loader {
     }
     async init(config) {
         const container = this.loader.getByUrl(config.server.entry);
-        if (container) {
+        if (!container) {
+            return;
+        }
+        try {
             await initModuleFederation(container, 'default');
+            // copy some logic from https://github.com/module-federation/universe/blob/02221527aa684d2a37773c913bf341748fd34ecf/packages/node/src/plugins/loadScript.ts#L66
+            // to implement the same logic for loading child-app as UniversalModuleFederation
+            global.__remote_scope__._config[config.name] = config.server.entry;
             const factory = (await getModuleFederation(container, 'entry'));
             const entry = factory();
             this.initializedMap.set(container, entry);
         }
+        catch (err) {
+            this.log.error(err);
+            throw err;
+        }
     }
     get(config) {
         const container = this.loader.getByUrl(config.server.entry);
-        return container && this.resolve(this.initializedMap.get(container));
+        const entry = container && this.initializedMap.get(container);
+        return entry && this.resolve(entry);
+    }
+    getStats(config) {
+        return this.loader.getByUrl(config.client.stats);
     }
 }
 

package/lib/server/loader.js

@@ -15,17 +15,28 @@ class ServerLoader extends loader.Loader {
             max: 20,
         });
         this.internalLoadCache = cache;
+        this.log = logger('child-app:loader');
         this.loader = new moduleLoaderServer.ServerLoader({
             cache,
-            log: logger('child-app:loader'),
+            log: this.log,
         });
     }
     async load(config) {
-        await this.loader.resolveByUrl(config.server.entry, {
-            codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
-            displayName: config.name,
-            kind: 'child-app',
-        });
+        await Promise.all([
+            this.loader.resolveByUrl(config.server.entry, {
+                codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
+                displayName: config.name,
+                kind: 'child-app',
+            }),
+            this.loader
+                .resolveByUrl(config.client.stats, {
+                type: 'json',
+                kind: 'child-app stats',
+                displayName: config.name,
+            })
+                // we can live without stats
+                .catch(() => { }),
+        ]);
         await this.init(config);
         if (config.tag === 'debug') {
             setTimeout(() => {
@@ -36,16 +47,30 @@ class ServerLoader extends loader.Loader {
     }
     async init(config) {
         const container = this.loader.getByUrl(config.server.entry);
-        if (container) {
+        if (!container) {
+            return;
+        }
+        try {
             await moduleFederation.initModuleFederation(container, 'default');
+            // copy some logic from https://github.com/module-federation/universe/blob/02221527aa684d2a37773c913bf341748fd34ecf/packages/node/src/plugins/loadScript.ts#L66
+            // to implement the same logic for loading child-app as UniversalModuleFederation
+            global.__remote_scope__._config[config.name] = config.server.entry;
             const factory = (await moduleFederation.getModuleFederation(container, 'entry'));
             const entry = factory();
             this.initializedMap.set(container, entry);
         }
+        catch (err) {
+            this.log.error(err);
+            throw err;
+        }
     }
     get(config) {
         const container = this.loader.getByUrl(config.server.entry);
-        return container && this.resolve(this.initializedMap.get(container));
+        const entry = container && this.initializedMap.get(container);
+        return entry && this.resolve(entry);
+    }
+    getStats(config) {
+        return this.loader.getByUrl(config.client.stats);
     }
 }
 

package/lib/server/providers.es.js

@@ -79,6 +79,7 @@ const serverProviders = [
             logger: LOGGER_TOKEN,
             diManager: CHILD_APP_DI_MANAGER_TOKEN,
             resolveFullConfig: CHILD_APP_RESOLVE_CONFIG_TOKEN,
+            loader: CHILD_APP_LOADER_TOKEN,
             preloadManager: CHILD_APP_PRELOAD_MANAGER_TOKEN,
         },
     }),

package/lib/server/providers.js

@@ -83,6 +83,7 @@ const serverProviders = [
             logger: tokensCommon.LOGGER_TOKEN,
             diManager: tokensChildApp.CHILD_APP_DI_MANAGER_TOKEN,
             resolveFullConfig: tokensChildApp.CHILD_APP_RESOLVE_CONFIG_TOKEN,
+            loader: tokensChildApp.CHILD_APP_LOADER_TOKEN,
             preloadManager: tokensChildApp.CHILD_APP_PRELOAD_MANAGER_TOKEN,
         },
     }),

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

@@ -1,9 +1,12 @@
 import type { ExtractDependencyType } from '@tinkoff/dippy';
-import type { ChildAppDiManager, ChildAppPreloadManager, CHILD_APP_RESOLVE_CONFIG_TOKEN } from '@tramvai/tokens-child-app';
+import type { ChildAppDiManager, ChildAppLoader, ChildAppPreloadManager, CHILD_APP_RESOLVE_CONFIG_TOKEN } from '@tramvai/tokens-child-app';
 import type { LOGGER_TOKEN } from '@tramvai/tokens-common';
-export declare const registerChildAppRenderSlots: ({ logger, diManager, resolveFullConfig, preloadManager, }: {
+import type { PageResource } from '@tramvai/tokens-render';
+import type { ServerLoader } from './loader';
+export declare const registerChildAppRenderSlots: ({ logger, diManager, resolveFullConfig, preloadManager, loader, }: {
     logger: ExtractDependencyType<typeof LOGGER_TOKEN>;
     diManager: ChildAppDiManager;
     resolveFullConfig: ExtractDependencyType<typeof CHILD_APP_RESOLVE_CONFIG_TOKEN>;
     preloadManager: ChildAppPreloadManager;
-}) => import("@tramvai/tokens-render").PageResource[];
+    loader: ChildAppLoader | ServerLoader;
+}) => PageResource[];

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

@@ -1,32 +1,109 @@
-import { ResourceType, ResourceSlot, RENDER_SLOTS } from '@tramvai/tokens-render';
+import { extname } from 'path';
+import { gt, eq } from 'semver';
+import flatten from '@tinkoff/utils/array/flatten';
+import { resolve } from '@tinkoff/url';
+import { RENDER_SLOTS, ResourceType, ResourceSlot } from '@tramvai/tokens-render';
+import { getSharedScope } from '../shared/webpack/moduleFederation.es.js';
 
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, }) => {
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, }) => {
     const log = logger('child-app:render:slots');
     const result = [];
-    preloadManager.getPreloadedList().forEach((requestConfig) => {
-        var _a;
+    const addChunk = (entry) => {
+        if (!entry) {
+            return;
+        }
+        const extension = extname(entry);
+        switch (extension) {
+            case '.js':
+                result.push({
+                    type: ResourceType.script,
+                    slot: ResourceSlot.HEAD_CORE_SCRIPTS,
+                    payload: entry,
+                    attrs: {
+                        'data-critical': 'true',
+                    },
+                });
+                break;
+            case '.css':
+                result.push({
+                    type: ResourceType.style,
+                    slot: ResourceSlot.HEAD_CORE_STYLES,
+                    payload: entry,
+                    attrs: {
+                        'data-critical': 'true',
+                    },
+                });
+                break;
+        }
+    };
+    const preloadedList = new Set(preloadManager.getPreloadedList());
+    const sharedScope = getSharedScope();
+    const mapSharedToChildApp = new Map();
+    // sharedScope will contain all of the shared chunks that were added
+    // while server is running
+    // but on the page we can use only shared chunks that either provided by the root-app
+    // or one of loaded child-app
+    // so gather all of the available shared modules, check the ones that are available in the currently
+    // preloaded child-apps and figure out the best single version of the dep
+    for (const shareKey in sharedScope) {
+        for (const version in sharedScope[shareKey]) {
+            const dep = sharedScope[shareKey][version];
+            const last = mapSharedToChildApp.get(shareKey);
+            const { eager, from } = dep;
+            const [type, name] = from.split(':');
+            if (!last ||
+                // module federation will pick the highest available version
+                // https://github.com/webpack/webpack/blob/b67626c7b4ffed8737d195b27c8cea1e68d58134/lib/sharing/ConsumeSharedRuntimeModule.js#L144
+                gt(version, last.version) ||
+                // if versions are equal then module federation will pick
+                // the dep with eager prop (it's set in root-app) of with the child-app with highest name in alphabetical order
+                (eq(version, last.version) && (eager !== last.eager ? eager : name > last.name))) {
+                mapSharedToChildApp.set(shareKey, { version, type, name, eager });
+            }
+        }
+    }
+    // eslint-disable-next-line max-statements
+    preloadedList.forEach((requestConfig) => {
+        var _a, _b, _c;
         const config = resolveFullConfig(requestConfig);
         if (!config) {
             return;
         }
+        const stats = 'getStats' in loader ? loader.getStats(config) : undefined;
         const di = diManager.getChildDi(config);
-        result.push({
-            type: ResourceType.script,
-            slot: ResourceSlot.HEAD_CORE_SCRIPTS,
-            payload: config.client.entry,
-            attrs: {
-                'data-critical': 'true',
-            },
-        });
+        addChunk(config.client.entry);
         if (config.css) {
-            result.push({
-                type: ResourceType.style,
-                slot: ResourceSlot.HEAD_CORE_STYLES,
-                payload: (_a = config.css.entry) !== null && _a !== void 0 ? _a : null,
-                attrs: {
-                    'data-critical': 'true',
-                },
-            });
+            addChunk(config.css.entry);
+        }
+        if (stats) {
+            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) => {
+                    for (const key in entry) {
+                        entry[key].forEach((file) => files.add(file));
+                    }
+                });
+                for (const file of files) {
+                    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 { 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) {
+                        for (const chunk of chunks) {
+                            addChunk(resolve(config.client.baseUrl, chunk));
+                        }
+                        // in stats.json federated stats could contain 2 sets of chunks for shared modules
+                        // there usual one and fallback. For shared module there could be used any of this
+                        // and the other one will be useless. So delete entry from map after its usage in order
+                        // to add only single set of chunks for the same shared dep
+                        mapSharedToChildApp.delete(shareKey);
+                    }
+                }
+            }
         }
         if (!di) {
             return;
@@ -34,7 +111,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
         try {
             const renderSlots = di.get({ token: RENDER_SLOTS, optional: true });
             if (renderSlots) {
-                result.push(...renderSlots);
+                result.push(...flatten(renderSlots));
             }
         }
         catch (error) {

package/lib/server/render-slots.js

@@ -2,35 +2,116 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var path = require('path');
+var semver = require('semver');
+var flatten = require('@tinkoff/utils/array/flatten');
+var url = require('@tinkoff/url');
 var tokensRender = require('@tramvai/tokens-render');
+var moduleFederation = require('../shared/webpack/moduleFederation.js');
 
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, }) => {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, }) => {
     const log = logger('child-app:render:slots');
     const result = [];
-    preloadManager.getPreloadedList().forEach((requestConfig) => {
-        var _a;
+    const addChunk = (entry) => {
+        if (!entry) {
+            return;
+        }
+        const extension = path.extname(entry);
+        switch (extension) {
+            case '.js':
+                result.push({
+                    type: tokensRender.ResourceType.script,
+                    slot: tokensRender.ResourceSlot.HEAD_CORE_SCRIPTS,
+                    payload: entry,
+                    attrs: {
+                        'data-critical': 'true',
+                    },
+                });
+                break;
+            case '.css':
+                result.push({
+                    type: tokensRender.ResourceType.style,
+                    slot: tokensRender.ResourceSlot.HEAD_CORE_STYLES,
+                    payload: entry,
+                    attrs: {
+                        'data-critical': 'true',
+                    },
+                });
+                break;
+        }
+    };
+    const preloadedList = new Set(preloadManager.getPreloadedList());
+    const sharedScope = moduleFederation.getSharedScope();
+    const mapSharedToChildApp = new Map();
+    // sharedScope will contain all of the shared chunks that were added
+    // while server is running
+    // but on the page we can use only shared chunks that either provided by the root-app
+    // or one of loaded child-app
+    // so gather all of the available shared modules, check the ones that are available in the currently
+    // preloaded child-apps and figure out the best single version of the dep
+    for (const shareKey in sharedScope) {
+        for (const version in sharedScope[shareKey]) {
+            const dep = sharedScope[shareKey][version];
+            const last = mapSharedToChildApp.get(shareKey);
+            const { eager, from } = dep;
+            const [type, name] = from.split(':');
+            if (!last ||
+                // module federation will pick the highest available version
+                // https://github.com/webpack/webpack/blob/b67626c7b4ffed8737d195b27c8cea1e68d58134/lib/sharing/ConsumeSharedRuntimeModule.js#L144
+                semver.gt(version, last.version) ||
+                // if versions are equal then module federation will pick
+                // the dep with eager prop (it's set in root-app) of with the child-app with highest name in alphabetical order
+                (semver.eq(version, last.version) && (eager !== last.eager ? eager : name > last.name))) {
+                mapSharedToChildApp.set(shareKey, { version, type, name, eager });
+            }
+        }
+    }
+    // eslint-disable-next-line max-statements
+    preloadedList.forEach((requestConfig) => {
+        var _a, _b, _c;
         const config = resolveFullConfig(requestConfig);
         if (!config) {
             return;
         }
+        const stats = 'getStats' in loader ? loader.getStats(config) : undefined;
         const di = diManager.getChildDi(config);
-        result.push({
-            type: tokensRender.ResourceType.script,
-            slot: tokensRender.ResourceSlot.HEAD_CORE_SCRIPTS,
-            payload: config.client.entry,
-            attrs: {
-                'data-critical': 'true',
-            },
-        });
+        addChunk(config.client.entry);
         if (config.css) {
-            result.push({
-                type: tokensRender.ResourceType.style,
-                slot: tokensRender.ResourceSlot.HEAD_CORE_STYLES,
-                payload: (_a = config.css.entry) !== null && _a !== void 0 ? _a : null,
-                attrs: {
-                    'data-critical': 'true',
-                },
-            });
+            addChunk(config.css.entry);
+        }
+        if (stats) {
+            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) => {
+                    for (const key in entry) {
+                        entry[key].forEach((file) => files.add(file));
+                    }
+                });
+                for (const file of files) {
+                    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 { 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) {
+                        for (const chunk of chunks) {
+                            addChunk(url.resolve(config.client.baseUrl, chunk));
+                        }
+                        // in stats.json federated stats could contain 2 sets of chunks for shared modules
+                        // there usual one and fallback. For shared module there could be used any of this
+                        // and the other one will be useless. So delete entry from map after its usage in order
+                        // to add only single set of chunks for the same shared dep
+                        mapSharedToChildApp.delete(shareKey);
+                    }
+                }
+            }
         }
         if (!di) {
             return;
@@ -38,7 +119,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
         try {
             const renderSlots = di.get({ token: tokensRender.RENDER_SLOTS, optional: true });
             if (renderSlots) {
-                result.push(...renderSlots);
+                result.push(...flatten__default["default"](renderSlots));
             }
         }
         catch (error) {

package/lib/shared/providers.browser.js

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

package/lib/shared/providers.es.js

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

package/lib/shared/providers.js

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

package/lib/shared/webpack/moduleFederation.browser.js

@@ -3,16 +3,21 @@ const initModuleFederation = async (container, scope = 'default') => {
         await container.init(__webpack_share_scopes__[scope]);
         return;
     }
+    if (typeof window === 'undefined') {
+        // copy some logic from https://github.com/module-federation/universe/blob/02221527aa684d2a37773c913bf341748fd34ecf/packages/node/src/plugins/loadScript.ts#L66
+        // to implement the same logic for loading child-app as UniversalModuleFederation
+        global.__remote_scope__ = global.__remote_scope__ || { _config: {} };
+    }
     await __webpack_init_sharing__('default');
-    // currently module federation has problems with external modules
-    // and unfourtanelly react and react-dom are marked as externals in defaults
+    // currently module federation has problems with external modules (they are marked as externals in the dev build)
+    // and unfortunately react and react-dom are marked as externals in defaults
     // fill sharedScope manually here
     const shareScope = __webpack_share_scopes__[scope];
     if (!shareScope.react) {
         shareScope.react = {
             '*': {
                 get: () => () => require('react'),
-                from: 'tramvai-mf-fix',
+                from: 'application:tramvai-mf-fix',
                 eager: true,
                 loaded: true,
             },
@@ -22,7 +27,7 @@ const initModuleFederation = async (container, scope = 'default') => {
         shareScope['react-dom'] = {
             '*': {
                 get: () => () => require('react-dom'),
-                from: 'tramvai-mf-fix',
+                from: 'application:tramvai-mf-fix',
                 eager: true,
                 loaded: true,
             },
@@ -34,7 +39,7 @@ const initModuleFederation = async (container, scope = 'default') => {
             shareScope['react/jsx-runtime'] = {
                 '*': {
                     get: () => () => require('react/jsx-runtime'),
-                    from: 'tramvai-mf-fix',
+                    from: 'application:tramvai-mf-fix',
                     eager: true,
                     loaded: true,
                 },

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

@@ -1,15 +1,48 @@
 declare global {
     var __webpack_init_sharing__: (name: string) => Promise<void>;
-    var __webpack_share_scopes__: ModuleFederationSharedScope;
+    var __webpack_share_scopes__: ModuleFederationSharedScopes;
+    var __remote_scope__: {
+        _config: Record<string, string>;
+    };
 }
 interface ModuleFederationSharedScope {
-    default: Record<string, any>;
-    [index: string]: Record<string, any>;
+    [packageName: string]: {
+        [version: string]: {
+            get: Function;
+            from: string;
+            eager: boolean;
+            loaded: 0 | 1 | boolean;
+        };
+    };
+}
+interface ModuleFederationSharedScopes {
+    default: ModuleFederationSharedScope;
+    [scope: string]: ModuleFederationSharedScope;
 }
 export interface ModuleFederationContainer {
-    init(scope: ModuleFederationSharedScope[string]): Promise<void>;
+    init(scope: ModuleFederationSharedScopes[string]): Promise<void>;
     get<T = unknown>(name: string): Promise<T>;
 }
+export interface ModuleFederationStats {
+    sharedModules: any[];
+    federatedModules: Array<{
+        remote: string;
+        entry: string;
+        sharedModules: Array<{
+            chunks: string[];
+            provides: Array<{
+                shareScope: string;
+                shareKey: string;
+                requiredVersion: string;
+                strictVersion: boolean;
+                singleton: boolean;
+                eager: boolean;
+            }>;
+        }>;
+        exposes: Record<string, Array<Record<string, string[]>>>;
+    }>;
+}
+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>;
 export {};

package/lib/shared/webpack/moduleFederation.es.js

@@ -1,18 +1,26 @@
+const getSharedScope = (scope = 'default') => {
+    return __webpack_share_scopes__[scope];
+};
 const initModuleFederation = async (container, scope = 'default') => {
     if (container) {
         await container.init(__webpack_share_scopes__[scope]);
         return;
     }
+    if (typeof window === 'undefined') {
+        // copy some logic from https://github.com/module-federation/universe/blob/02221527aa684d2a37773c913bf341748fd34ecf/packages/node/src/plugins/loadScript.ts#L66
+        // to implement the same logic for loading child-app as UniversalModuleFederation
+        global.__remote_scope__ = global.__remote_scope__ || { _config: {} };
+    }
     await __webpack_init_sharing__('default');
-    // currently module federation has problems with external modules
-    // and unfourtanelly react and react-dom are marked as externals in defaults
+    // currently module federation has problems with external modules (they are marked as externals in the dev build)
+    // and unfortunately react and react-dom are marked as externals in defaults
     // fill sharedScope manually here
     const shareScope = __webpack_share_scopes__[scope];
     if (!shareScope.react) {
         shareScope.react = {
             '*': {
                 get: () => () => require('react'),
-                from: 'tramvai-mf-fix',
+                from: 'application:tramvai-mf-fix',
                 eager: true,
                 loaded: true,
             },
@@ -22,7 +30,7 @@ const initModuleFederation = async (container, scope = 'default') => {
         shareScope['react-dom'] = {
             '*': {
                 get: () => () => require('react-dom'),
-                from: 'tramvai-mf-fix',
+                from: 'application:tramvai-mf-fix',
                 eager: true,
                 loaded: true,
             },
@@ -34,7 +42,7 @@ const initModuleFederation = async (container, scope = 'default') => {
             shareScope['react/jsx-runtime'] = {
                 '*': {
                     get: () => () => require('react/jsx-runtime'),
-                    from: 'tramvai-mf-fix',
+                    from: 'application:tramvai-mf-fix',
                     eager: true,
                     loaded: true,
                 },
@@ -46,4 +54,4 @@ const getModuleFederation = async (container, name = 'entry') => {
     return container.get(name);
 };
 
-export { getModuleFederation, initModuleFederation };
+export { getModuleFederation, getSharedScope, initModuleFederation };

package/lib/shared/webpack/moduleFederation.js

@@ -2,21 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const getSharedScope = (scope = 'default') => {
+    return __webpack_share_scopes__[scope];
+};
 const initModuleFederation = async (container, scope = 'default') => {
     if (container) {
         await container.init(__webpack_share_scopes__[scope]);
         return;
     }
+    if (typeof window === 'undefined') {
+        // copy some logic from https://github.com/module-federation/universe/blob/02221527aa684d2a37773c913bf341748fd34ecf/packages/node/src/plugins/loadScript.ts#L66
+        // to implement the same logic for loading child-app as UniversalModuleFederation
+        global.__remote_scope__ = global.__remote_scope__ || { _config: {} };
+    }
     await __webpack_init_sharing__('default');
-    // currently module federation has problems with external modules
-    // and unfourtanelly react and react-dom are marked as externals in defaults
+    // currently module federation has problems with external modules (they are marked as externals in the dev build)
+    // and unfortunately react and react-dom are marked as externals in defaults
     // fill sharedScope manually here
     const shareScope = __webpack_share_scopes__[scope];
     if (!shareScope.react) {
         shareScope.react = {
             '*': {
                 get: () => () => require('react'),
-                from: 'tramvai-mf-fix',
+                from: 'application:tramvai-mf-fix',
                 eager: true,
                 loaded: true,
             },
@@ -26,7 +34,7 @@ const initModuleFederation = async (container, scope = 'default') => {
         shareScope['react-dom'] = {
             '*': {
                 get: () => () => require('react-dom'),
-                from: 'tramvai-mf-fix',
+                from: 'application:tramvai-mf-fix',
                 eager: true,
                 loaded: true,
             },
@@ -38,7 +46,7 @@ const initModuleFederation = async (container, scope = 'default') => {
             shareScope['react/jsx-runtime'] = {
                 '*': {
                     get: () => () => require('react/jsx-runtime'),
-                    from: 'tramvai-mf-fix',
+                    from: 'application:tramvai-mf-fix',
                     eager: true,
                     loaded: true,
                 },
@@ -51,4 +59,5 @@ const getModuleFederation = async (container, name = 'entry') => {
 };
 
 exports.getModuleFederation = getModuleFederation;
+exports.getSharedScope = getSharedScope;
 exports.initModuleFederation = initModuleFederation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "2.76.2",
+  "version": "2.77.0",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
@@ -29,25 +29,27 @@
   "dependencies": {
     "@tinkoff/env-validators": "0.1.5",
     "@tinkoff/module-loader-client": "0.4.5",
-    "@tinkoff/module-loader-server": "0.5.7",
-    "@tramvai/child-app-core": "2.76.2",
-    "@tramvai/module-router": "2.76.2",
+    "@tinkoff/module-loader-server": "0.5.8",
+    "@tinkoff/url": "0.8.5",
+    "@tramvai/child-app-core": "2.77.0",
+    "@tramvai/module-router": "2.77.0",
     "@tramvai/safe-strings": "0.5.7",
-    "@tramvai/tokens-child-app": "2.76.2"
+    "@tramvai/tokens-child-app": "2.77.0"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.8.13",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "2.76.2",
-    "@tramvai/state": "2.76.2",
-    "@tramvai/react": "2.76.2",
-    "@tramvai/tokens-common": "2.76.2",
-    "@tramvai/tokens-render": "2.76.2",
-    "@tramvai/tokens-router": "2.76.2",
+    "@tramvai/core": "2.77.0",
+    "@tramvai/state": "2.77.0",
+    "@tramvai/react": "2.77.0",
+    "@tramvai/tokens-common": "2.77.0",
+    "@tramvai/tokens-render": "2.77.0",
+    "@tramvai/tokens-router": "2.77.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",
+    "semver": "^7.3.8",
     "tslib": "^2.4.0"
   },
   "module": "lib/server.es.js"