@tramvai/module-child-app 4.41.98 → 4.41.100

package/lib/server/module-federation/best-loaded-shared-modules.d.ts

@@ -0,0 +1,15 @@
+import { SharedModule, SharedScopeItem } from './utils';
+export type SharedModuleWithChunks = {
+    shareKey: string;
+    from: string;
+    version: string;
+    eager: boolean;
+    childAppName?: string;
+    childAppVersion?: string;
+    chunks?: string[];
+};
+export declare function resolveBestLoadedSharedModules({ sharedModules, sharedScopeItems, }: {
+    sharedModules: SharedModule[];
+    sharedScopeItems: SharedScopeItem[];
+}): SharedModuleWithChunks[];
+//# sourceMappingURL=best-loaded-shared-modules.d.ts.map

package/lib/server/module-federation/best-loaded-shared-modules.es.js

@@ -0,0 +1,26 @@
+function resolveBestLoadedSharedModules({ sharedModules, sharedScopeItems, }) {
+    const result = [];
+    for (const sharedScopeItem of sharedScopeItems) {
+        const { shareKey, from, eager, loaded } = sharedScopeItem;
+        // we need only Child Apps deps, host app shared modules is always loaded on the client
+        // and we need to get only used shared modules, `loaded` flag means that module was required by MF runtime
+        // https://github.com/webpack/webpack/blob/97d4961cd1de9c69dba0f050a63f3b56bb64fab2/lib/sharing/ConsumeSharedRuntimeModule.js#L104
+        if (from.startsWith('child-app') && !!loaded) {
+            const sharedModule = sharedModules.find((m) => { var _a, _b; return m.from === from && ((_b = (_a = m.provides) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.shareKey) === shareKey; });
+            if (sharedModule) {
+                result.push({
+                    shareKey,
+                    from: sharedScopeItem.from,
+                    eager,
+                    version: sharedScopeItem.version,
+                    childAppName: sharedModule === null || sharedModule === void 0 ? void 0 : sharedModule.childAppName,
+                    childAppVersion: sharedModule === null || sharedModule === void 0 ? void 0 : sharedModule.childAppVersion,
+                    chunks: sharedModule === null || sharedModule === void 0 ? void 0 : sharedModule.chunks,
+                });
+            }
+        }
+    }
+    return result;
+}
+
+export { resolveBestLoadedSharedModules };

package/lib/server/module-federation/best-loaded-shared-modules.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function resolveBestLoadedSharedModules({ sharedModules, sharedScopeItems, }) {
+    const result = [];
+    for (const sharedScopeItem of sharedScopeItems) {
+        const { shareKey, from, eager, loaded } = sharedScopeItem;
+        // we need only Child Apps deps, host app shared modules is always loaded on the client
+        // and we need to get only used shared modules, `loaded` flag means that module was required by MF runtime
+        // https://github.com/webpack/webpack/blob/97d4961cd1de9c69dba0f050a63f3b56bb64fab2/lib/sharing/ConsumeSharedRuntimeModule.js#L104
+        if (from.startsWith('child-app') && !!loaded) {
+            const sharedModule = sharedModules.find((m) => { var _a, _b; return m.from === from && ((_b = (_a = m.provides) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.shareKey) === shareKey; });
+            if (sharedModule) {
+                result.push({
+                    shareKey,
+                    from: sharedScopeItem.from,
+                    eager,
+                    version: sharedScopeItem.version,
+                    childAppName: sharedModule === null || sharedModule === void 0 ? void 0 : sharedModule.childAppName,
+                    childAppVersion: sharedModule === null || sharedModule === void 0 ? void 0 : sharedModule.childAppVersion,
+                    chunks: sharedModule === null || sharedModule === void 0 ? void 0 : sharedModule.chunks,
+                });
+            }
+        }
+    }
+    return result;
+}
+
+exports.resolveBestLoadedSharedModules = resolveBestLoadedSharedModules;

package/lib/server/module-federation/best-shared-modules.d.ts

@@ -0,0 +1,15 @@
+import type { SharedModule, SharedScopeItem } from './utils';
+export type SharedModuleWithChunks = {
+    shareKey: string;
+    from: string;
+    version: string;
+    eager: boolean;
+    childAppName?: string;
+    childAppVersion?: string;
+    chunks?: string[];
+};
+export declare function resolveBestSharedModules({ sharedModules, sharedScopeItems, }: {
+    sharedModules: SharedModule[];
+    sharedScopeItems: SharedScopeItem[];
+}): SharedModuleWithChunks[];
+//# sourceMappingURL=best-shared-modules.d.ts.map

package/lib/server/module-federation/utils.d.ts

@@ -0,0 +1,18 @@
+import type { ChildAppFinalConfig } from '@tramvai/tokens-child-app';
+import type { ModuleFederationSharedModule, ModuleFederationSharedScope, ModuleFederationSharedScopeItem } from '../../shared/webpack/moduleFederation';
+import type { ServerLoader } from '../loader';
+export type SharedScopeItem = ModuleFederationSharedScopeItem & {
+    shareKey: string;
+    version: string;
+};
+export type SharedModule = ModuleFederationSharedModule & {
+    from: string;
+    childAppName: string;
+    childAppVersion: string;
+};
+export declare function getFlatSharedScopeItemsList(sharedScope: ModuleFederationSharedScope): SharedScopeItem[];
+export declare function getFlatSharedModulesList({ preloadedConfigs, loader, }: {
+    preloadedConfigs: ChildAppFinalConfig[];
+    loader: ServerLoader;
+}): SharedModule[];
+//# sourceMappingURL=utils.d.ts.map

package/lib/server/module-federation/utils.es.js

@@ -0,0 +1,38 @@
+function getFlatSharedScopeItemsList(sharedScope) {
+    // flat list of all shared items initialized in shared scope
+    const sharedScopeItems = [];
+    for (const shareKey in sharedScope) {
+        const sharedDependency = sharedScope[shareKey];
+        for (const version in sharedDependency) {
+            const sharedScopeItem = sharedDependency[version];
+            sharedScopeItems.push({
+                ...sharedScopeItem,
+                shareKey,
+                version,
+            });
+        }
+    }
+    return sharedScopeItems;
+}
+function getFlatSharedModulesList({ preloadedConfigs, loader, }) {
+    const sharedModules = [];
+    for (const config of preloadedConfigs) {
+        const stats = 'getStats' in loader ? loader.getStats(config) : undefined;
+        const from = `child-app:${config.name}:${config.version}`;
+        if (stats && stats.federatedModules) {
+            for (const federatedModule of stats.federatedModules) {
+                for (const sharedModule of federatedModule.sharedModules) {
+                    sharedModules.push({
+                        ...sharedModule,
+                        from,
+                        childAppName: config.name,
+                        childAppVersion: config.version,
+                    });
+                }
+            }
+        }
+    }
+    return sharedModules;
+}
+
+export { getFlatSharedModulesList, getFlatSharedScopeItemsList };

package/lib/server/module-federation/utils.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function getFlatSharedScopeItemsList(sharedScope) {
+    // flat list of all shared items initialized in shared scope
+    const sharedScopeItems = [];
+    for (const shareKey in sharedScope) {
+        const sharedDependency = sharedScope[shareKey];
+        for (const version in sharedDependency) {
+            const sharedScopeItem = sharedDependency[version];
+            sharedScopeItems.push({
+                ...sharedScopeItem,
+                shareKey,
+                version,
+            });
+        }
+    }
+    return sharedScopeItems;
+}
+function getFlatSharedModulesList({ preloadedConfigs, loader, }) {
+    const sharedModules = [];
+    for (const config of preloadedConfigs) {
+        const stats = 'getStats' in loader ? loader.getStats(config) : undefined;
+        const from = `child-app:${config.name}:${config.version}`;
+        if (stats && stats.federatedModules) {
+            for (const federatedModule of stats.federatedModules) {
+                for (const sharedModule of federatedModule.sharedModules) {
+                    sharedModules.push({
+                        ...sharedModule,
+                        from,
+                        childAppName: config.name,
+                        childAppVersion: config.version,
+                    });
+                }
+            }
+        }
+    }
+    return sharedModules;
+}
+
+exports.getFlatSharedModulesList = getFlatSharedModulesList;
+exports.getFlatSharedScopeItemsList = getFlatSharedScopeItemsList;

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

@@ -1,10 +1,11 @@
 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';
+import { getFlatSharedScopeItemsList, getFlatSharedModulesList } from './module-federation/utils.es.js';
+import { resolveBestLoadedSharedModules } from './module-federation/best-loaded-shared-modules.es.js';
 
 const asyncScriptAttrs = {
     defer: null,
@@ -25,7 +26,9 @@ const entryAttrs = {
 const chunkAttrs = {
     onerror: `this.remove()`,
 };
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => async () => {
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => 
+// eslint-disable-next-line max-statements
+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
@@ -64,37 +67,26 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
     };
     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 });
-            }
-        }
-    }
+    const preloadedConfigs = Array.from(preloadedList)
+        .map((requestConfig) => {
+        return resolveFullConfig(requestConfig);
+    })
+        .filter(Boolean);
+    // flat list of all shared items initialized in shared scope
+    const sharedScopeItems = getFlatSharedScopeItemsList(sharedScope);
+    // flat list of all preloaded Child Apps shared modules
+    const sharedModules = getFlatSharedModulesList({
+        preloadedConfigs,
+        loader: loader,
+    });
+    // optimal shared dependencies for preloaded Child Apps
+    const bestSharedModules = resolveBestLoadedSharedModules({
+        sharedModules,
+        sharedScopeItems,
+    });
     // eslint-disable-next-line max-statements
-    preloadedList.forEach((requestConfig) => {
-        var _a, _b, _c, _d;
-        const config = resolveFullConfig(requestConfig);
-        if (!config) {
-            return;
-        }
+    preloadedConfigs.forEach((config) => {
+        var _a, _b, _c;
         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();
@@ -122,21 +114,6 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                 for (const file of files) {
                     addChunk(resolve(config.client.baseUrl, file));
                 }
-                for (const sharedModule of federatedModule.sharedModules) {
-                    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) {
-                        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) {
@@ -151,10 +128,49 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
         catch (error) {
             log.error({
                 event: 'get-slots-failed',
-                config: requestConfig,
+                childApp: {
+                    name: config.name,
+                    version: config.version,
+                    tag: config.tag,
+                },
             });
         }
     });
+    // shared chunks deduplication
+    const addedSharedChunks = new Set();
+    // preloaded chunks we need to pass to client
+    const serializableSharedModules = [];
+    bestSharedModules.forEach(({ shareKey, version, chunks, childAppName, childAppVersion }) => {
+        const childAppConfig = preloadedConfigs.find((config) => {
+            return config.name === childAppName && config.version === childAppVersion;
+        });
+        // if it is application shared dependency, we don't have any extra chunks
+        if (childAppConfig && chunks) {
+            for (const chunk of chunks) {
+                if (!addedSharedChunks.has(chunk)) {
+                    addedSharedChunks.add(chunk);
+                    addChunk(resolve(childAppConfig.client.baseUrl, chunk));
+                    const containerName = `child-app__${childAppConfig.client.entry}`;
+                    serializableSharedModules.push({
+                        containerName,
+                        shareKey,
+                        version,
+                        childAppName: childAppName,
+                        childAppVersion: childAppVersion,
+                    });
+                }
+            }
+        }
+    });
+    result.push({
+        type: ResourceType.inlineScript,
+        slot: ResourceSlot.HEAD_POLYFILLS,
+        payload: `window.__webpack_share_preloaded__ = [
+${serializableSharedModules.map((m) => {
+            return `${JSON.stringify(m)}`;
+        })}
+];`,
+    });
     result.map((item) => resourcesRegistry.register(item));
 };
 

package/lib/server/render-slots.js

@@ -3,12 +3,13 @@
 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 tokensChildApp = require('@tramvai/tokens-child-app');
 var tokensRender = require('@tramvai/tokens-render');
 var moduleFederation = require('../shared/webpack/moduleFederation.js');
+var utils = require('./module-federation/utils.js');
+var bestLoadedSharedModules = require('./module-federation/best-loaded-shared-modules.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,7 +34,9 @@ const entryAttrs = {
 const chunkAttrs = {
     onerror: `this.remove()`,
 };
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => async () => {
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => 
+// eslint-disable-next-line max-statements
+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
@@ -72,37 +75,26 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
     };
     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 });
-            }
-        }
-    }
+    const preloadedConfigs = Array.from(preloadedList)
+        .map((requestConfig) => {
+        return resolveFullConfig(requestConfig);
+    })
+        .filter(Boolean);
+    // flat list of all shared items initialized in shared scope
+    const sharedScopeItems = utils.getFlatSharedScopeItemsList(sharedScope);
+    // flat list of all preloaded Child Apps shared modules
+    const sharedModules = utils.getFlatSharedModulesList({
+        preloadedConfigs,
+        loader: loader,
+    });
+    // optimal shared dependencies for preloaded Child Apps
+    const bestSharedModules = bestLoadedSharedModules.resolveBestLoadedSharedModules({
+        sharedModules,
+        sharedScopeItems,
+    });
     // eslint-disable-next-line max-statements
-    preloadedList.forEach((requestConfig) => {
-        var _a, _b, _c, _d;
-        const config = resolveFullConfig(requestConfig);
-        if (!config) {
-            return;
-        }
+    preloadedConfigs.forEach((config) => {
+        var _a, _b, _c;
         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();
@@ -130,21 +122,6 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                 for (const file of files) {
                     addChunk(url.resolve(config.client.baseUrl, file));
                 }
-                for (const sharedModule of federatedModule.sharedModules) {
-                    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) {
-                        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) {
@@ -159,10 +136,49 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
         catch (error) {
             log.error({
                 event: 'get-slots-failed',
-                config: requestConfig,
+                childApp: {
+                    name: config.name,
+                    version: config.version,
+                    tag: config.tag,
+                },
             });
         }
     });
+    // shared chunks deduplication
+    const addedSharedChunks = new Set();
+    // preloaded chunks we need to pass to client
+    const serializableSharedModules = [];
+    bestSharedModules.forEach(({ shareKey, version, chunks, childAppName, childAppVersion }) => {
+        const childAppConfig = preloadedConfigs.find((config) => {
+            return config.name === childAppName && config.version === childAppVersion;
+        });
+        // if it is application shared dependency, we don't have any extra chunks
+        if (childAppConfig && chunks) {
+            for (const chunk of chunks) {
+                if (!addedSharedChunks.has(chunk)) {
+                    addedSharedChunks.add(chunk);
+                    addChunk(url.resolve(childAppConfig.client.baseUrl, chunk));
+                    const containerName = `child-app__${childAppConfig.client.entry}`;
+                    serializableSharedModules.push({
+                        containerName,
+                        shareKey,
+                        version,
+                        childAppName: childAppName,
+                        childAppVersion: childAppVersion,
+                    });
+                }
+            }
+        }
+    });
+    result.push({
+        type: tokensRender.ResourceType.inlineScript,
+        slot: tokensRender.ResourceSlot.HEAD_POLYFILLS,
+        payload: `window.__webpack_share_preloaded__ = [
+${serializableSharedModules.map((m) => {
+            return `${JSON.stringify(m)}`;
+        })}
+];`,
+    });
     result.map((item) => resourcesRegistry.register(item));
 };
 

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

@@ -1,4 +1,5 @@
 const initModuleFederation = async (container, scope = 'default') => {
+    var _a;
     if (container) {
         await container.init(__webpack_share_scopes__[scope]);
         return;
@@ -8,6 +9,48 @@ const initModuleFederation = async (container, scope = 'default') => {
         // to implement the same logic for loading child-app as UniversalModuleFederation
         global.__remote_scope__ = global.__remote_scope__ || { _config: {} };
     }
+    else {
+        // for easy debugging
+        if (process.env.NODE_ENV === 'development') {
+            window.__webpack_share_scopes__ = __webpack_share_scopes__;
+        }
+        // iterate over server-side preloaded shared modules
+        (_a = window.__webpack_share_preloaded__) === null || _a === void 0 ? void 0 : _a.forEach((preloaded) => {
+            // Child Apps entries will register itself in the global scope with unique name after loading
+            // @ts-expect-error
+            const containerForPreloaded = window[preloaded.containerName];
+            if (containerForPreloaded) {
+                // early init to register all container shared modules in share scope
+                containerForPreloaded.init(__webpack_share_scopes__[scope]);
+                //
+                // For example, at server-side we preload two Child Apps - "base" and "router",
+                // with the same shared dependency "@tramvai/core@3.4.5", and host has uncompatible "@tramvai/core@4.0.0".
+                //
+                // It means that MF can share any of shared "@tramvai/core@3.4.5" instance between this two Child Apps.
+                //
+                // But MF share scope is a singleton at server, and we can't predict which Child App will be loaded first,
+                // or "base" can be resolved first at different page, and which dependency will be registered at share scope.
+                //
+                // When we preload used at server-side shared dependency script to prevent client-side waterfalls,
+                // it can be "base/@tramvai/core@3.4.5.js" or "router/@tramvai/core@3.4.5.js"
+                //
+                // And here is the problem - client-side runtime logic will don't know which shared dependency was preloaded,
+                // because "loaded = 1" flag is set to 1 only when the module is required from Child App entry.
+                //
+                // Shared dependencies registration logic described here:
+                // https://github.com/webpack/webpack/blob/97d4961cd1de9c69dba0f050a63f3b56bb64fab2/lib/sharing/ShareRuntimeModule.js#L100
+                // For our example it means that "@tramvai/core" from "router" will have priority, because of names comparsion - "router" > "base",
+                // and "loaded" flag is absent.
+                //
+                // So, even if the "base/@tramvai/core@3.4.5.js" was preloaded on the server, an additional request for the "router/@tramvai/core@3.4.5.js" will occur on the client.
+                // To prevent this, manually mark "base/@tramvai/core@3.4.5.js" as loaded in share scope immediately after registration.
+                //
+                __webpack_share_scopes__[scope][preloaded.shareKey][preloaded.version].loaded = 1;
+            }
+        });
+        // cleanup
+        window.__webpack_share_preloaded__ = [];
+    }
     await __webpack_init_sharing__('default');
     // 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

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

@@ -1,18 +1,26 @@
 declare global {
     var __webpack_init_sharing__: (name: string) => Promise<void>;
     var __webpack_share_scopes__: ModuleFederationSharedScopes;
+    var __webpack_share_preloaded__: {
+        containerName: string;
+        shareKey: string;
+        version: string;
+        childAppName: string;
+        childAppVersion: string;
+    }[];
     var __remote_scope__: {
         _config: Record<string, string>;
     };
 }
-interface ModuleFederationSharedScope {
+export interface ModuleFederationSharedScopeItem {
+    get: Function;
+    from: string;
+    eager: boolean;
+    loaded: 0 | 1 | boolean;
+}
+export interface ModuleFederationSharedScope {
     [packageName: string]: {
-        [version: string]: {
-            get: Function;
-            from: string;
-            eager: boolean;
-            loaded: 0 | 1 | boolean;
-        };
+        [version: string]: ModuleFederationSharedScopeItem;
     };
 }
 interface ModuleFederationSharedScopes {
@@ -23,22 +31,23 @@ export interface ModuleFederationContainer {
     init(scope: ModuleFederationSharedScopes[string]): Promise<void>;
     get<T = unknown>(name: string): Promise<T>;
 }
+export interface ModuleFederationSharedModule {
+    chunks: string[];
+    provides: Array<{
+        shareScope: string;
+        shareKey: string;
+        requiredVersion: string;
+        strictVersion: boolean;
+        singleton: boolean;
+        eager: boolean;
+    }>;
+}
 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;
-            }>;
-        }>;
+        sharedModules: Array<ModuleFederationSharedModule>;
         exposes: Record<string, Array<Record<string, string[]>>>;
     }>;
 }

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

@@ -2,6 +2,7 @@ const getSharedScope = (scope = 'default') => {
     return __webpack_share_scopes__[scope];
 };
 const initModuleFederation = async (container, scope = 'default') => {
+    var _a;
     if (container) {
         await container.init(__webpack_share_scopes__[scope]);
         return;
@@ -11,6 +12,48 @@ const initModuleFederation = async (container, scope = 'default') => {
         // to implement the same logic for loading child-app as UniversalModuleFederation
         global.__remote_scope__ = global.__remote_scope__ || { _config: {} };
     }
+    else {
+        // for easy debugging
+        if (process.env.NODE_ENV === 'development') {
+            window.__webpack_share_scopes__ = __webpack_share_scopes__;
+        }
+        // iterate over server-side preloaded shared modules
+        (_a = window.__webpack_share_preloaded__) === null || _a === void 0 ? void 0 : _a.forEach((preloaded) => {
+            // Child Apps entries will register itself in the global scope with unique name after loading
+            // @ts-expect-error
+            const containerForPreloaded = window[preloaded.containerName];
+            if (containerForPreloaded) {
+                // early init to register all container shared modules in share scope
+                containerForPreloaded.init(__webpack_share_scopes__[scope]);
+                //
+                // For example, at server-side we preload two Child Apps - "base" and "router",
+                // with the same shared dependency "@tramvai/core@3.4.5", and host has uncompatible "@tramvai/core@4.0.0".
+                //
+                // It means that MF can share any of shared "@tramvai/core@3.4.5" instance between this two Child Apps.
+                //
+                // But MF share scope is a singleton at server, and we can't predict which Child App will be loaded first,
+                // or "base" can be resolved first at different page, and which dependency will be registered at share scope.
+                //
+                // When we preload used at server-side shared dependency script to prevent client-side waterfalls,
+                // it can be "base/@tramvai/core@3.4.5.js" or "router/@tramvai/core@3.4.5.js"
+                //
+                // And here is the problem - client-side runtime logic will don't know which shared dependency was preloaded,
+                // because "loaded = 1" flag is set to 1 only when the module is required from Child App entry.
+                //
+                // Shared dependencies registration logic described here:
+                // https://github.com/webpack/webpack/blob/97d4961cd1de9c69dba0f050a63f3b56bb64fab2/lib/sharing/ShareRuntimeModule.js#L100
+                // For our example it means that "@tramvai/core" from "router" will have priority, because of names comparsion - "router" > "base",
+                // and "loaded" flag is absent.
+                //
+                // So, even if the "base/@tramvai/core@3.4.5.js" was preloaded on the server, an additional request for the "router/@tramvai/core@3.4.5.js" will occur on the client.
+                // To prevent this, manually mark "base/@tramvai/core@3.4.5.js" as loaded in share scope immediately after registration.
+                //
+                __webpack_share_scopes__[scope][preloaded.shareKey][preloaded.version].loaded = 1;
+            }
+        });
+        // cleanup
+        window.__webpack_share_preloaded__ = [];
+    }
     await __webpack_init_sharing__('default');
     // 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

package/lib/shared/webpack/moduleFederation.js

@@ -6,6 +6,7 @@ const getSharedScope = (scope = 'default') => {
     return __webpack_share_scopes__[scope];
 };
 const initModuleFederation = async (container, scope = 'default') => {
+    var _a;
     if (container) {
         await container.init(__webpack_share_scopes__[scope]);
         return;
@@ -15,6 +16,48 @@ const initModuleFederation = async (container, scope = 'default') => {
         // to implement the same logic for loading child-app as UniversalModuleFederation
         global.__remote_scope__ = global.__remote_scope__ || { _config: {} };
     }
+    else {
+        // for easy debugging
+        if (process.env.NODE_ENV === 'development') {
+            window.__webpack_share_scopes__ = __webpack_share_scopes__;
+        }
+        // iterate over server-side preloaded shared modules
+        (_a = window.__webpack_share_preloaded__) === null || _a === void 0 ? void 0 : _a.forEach((preloaded) => {
+            // Child Apps entries will register itself in the global scope with unique name after loading
+            // @ts-expect-error
+            const containerForPreloaded = window[preloaded.containerName];
+            if (containerForPreloaded) {
+                // early init to register all container shared modules in share scope
+                containerForPreloaded.init(__webpack_share_scopes__[scope]);
+                //
+                // For example, at server-side we preload two Child Apps - "base" and "router",
+                // with the same shared dependency "@tramvai/core@3.4.5", and host has uncompatible "@tramvai/core@4.0.0".
+                //
+                // It means that MF can share any of shared "@tramvai/core@3.4.5" instance between this two Child Apps.
+                //
+                // But MF share scope is a singleton at server, and we can't predict which Child App will be loaded first,
+                // or "base" can be resolved first at different page, and which dependency will be registered at share scope.
+                //
+                // When we preload used at server-side shared dependency script to prevent client-side waterfalls,
+                // it can be "base/@tramvai/core@3.4.5.js" or "router/@tramvai/core@3.4.5.js"
+                //
+                // And here is the problem - client-side runtime logic will don't know which shared dependency was preloaded,
+                // because "loaded = 1" flag is set to 1 only when the module is required from Child App entry.
+                //
+                // Shared dependencies registration logic described here:
+                // https://github.com/webpack/webpack/blob/97d4961cd1de9c69dba0f050a63f3b56bb64fab2/lib/sharing/ShareRuntimeModule.js#L100
+                // For our example it means that "@tramvai/core" from "router" will have priority, because of names comparsion - "router" > "base",
+                // and "loaded" flag is absent.
+                //
+                // So, even if the "base/@tramvai/core@3.4.5.js" was preloaded on the server, an additional request for the "router/@tramvai/core@3.4.5.js" will occur on the client.
+                // To prevent this, manually mark "base/@tramvai/core@3.4.5.js" as loaded in share scope immediately after registration.
+                //
+                __webpack_share_scopes__[scope][preloaded.shareKey][preloaded.version].loaded = 1;
+            }
+        });
+        // cleanup
+        window.__webpack_share_preloaded__ = [];
+    }
     await __webpack_init_sharing__('default');
     // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "4.41.98",
+  "version": "4.41.100",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
@@ -33,24 +33,24 @@
     "@tinkoff/env-validators": "0.3.3",
     "@tinkoff/module-loader-client": "0.6.7",
     "@tinkoff/module-loader-server": "0.7.7",
-    "@tramvai/module-common": "4.41.98",
+    "@tramvai/module-common": "4.41.100",
     "@tinkoff/url": "0.10.3",
     "@tinkoff/errors": "0.5.3",
-    "@tramvai/child-app-core": "4.41.98",
+    "@tramvai/child-app-core": "4.41.100",
     "@tramvai/safe-strings": "0.7.9",
-    "@tramvai/tokens-child-app": "4.41.98"
+    "@tramvai/tokens-child-app": "4.41.100"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.10.11",
-    "@tinkoff/router": "0.4.233",
+    "@tinkoff/router": "0.4.235",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "4.41.98",
-    "@tramvai/state": "4.41.98",
-    "@tramvai/react": "4.41.98",
-    "@tramvai/tokens-common": "4.41.98",
-    "@tramvai/tokens-render": "4.41.98",
-    "@tramvai/tokens-router": "4.41.98",
+    "@tramvai/core": "4.41.100",
+    "@tramvai/state": "4.41.100",
+    "@tramvai/react": "4.41.100",
+    "@tramvai/tokens-common": "4.41.100",
+    "@tramvai/tokens-render": "4.41.100",
+    "@tramvai/tokens-router": "4.41.100",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",