@tramvai/module-child-app 5.50.0 → 5.53.78

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

@@ -11,6 +11,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
+        window.__webpack_share_preloaded__?.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

@@ -15,6 +15,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
+        window.__webpack_share_preloaded__?.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": "5.50.0",
+  "version": "5.53.78",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.es.js": "./lib/browser.js",
@@ -31,25 +31,25 @@
   "dependencies": {
     "@loadable/server": "^5.15.0",
     "@tinkoff/env-validators": "0.4.2",
-    "@tinkoff/errors": "0.6.2",
-    "@tinkoff/module-loader-client": "0.7.3",
-    "@tinkoff/module-loader-server": "0.8.6",
-    "@tinkoff/url": "0.11.2",
-    "@tramvai/child-app-core": "5.50.0",
-    "@tramvai/module-common": "5.50.0",
+    "@tinkoff/errors": "0.6.3",
+    "@tinkoff/module-loader-client": "0.7.5",
+    "@tinkoff/module-loader-server": "0.8.8",
+    "@tinkoff/url": "0.11.3",
+    "@tramvai/child-app-core": "5.53.78",
+    "@tramvai/module-common": "5.53.78",
     "@tramvai/safe-strings": "0.8.4",
-    "@tramvai/tokens-child-app": "5.50.0"
+    "@tramvai/tokens-child-app": "5.53.78"
   },
   "peerDependencies": {
-    "@tinkoff/dippy": "0.11.4",
-    "@tinkoff/router": "0.5.116",
+    "@tinkoff/dippy": "0.11.5",
+    "@tinkoff/router": "0.5.202",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "5.50.0",
-    "@tramvai/react": "5.50.0",
-    "@tramvai/state": "5.50.0",
-    "@tramvai/tokens-common": "5.50.0",
-    "@tramvai/tokens-render": "5.50.0",
-    "@tramvai/tokens-router": "5.50.0",
+    "@tramvai/core": "5.53.78",
+    "@tramvai/react": "5.53.78",
+    "@tramvai/state": "5.53.78",
+    "@tramvai/tokens-common": "5.53.78",
+    "@tramvai/tokens-render": "5.53.78",
+    "@tramvai/tokens-router": "5.53.78",
     "object-assign": "^4.1.1",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",

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

@@ -1,14 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { CHILD_APP_ERROR_BOUNDARY_TOKEN } from '@tramvai/tokens-child-app';
-import { useDi, UniversalErrorBoundary } from '@tramvai/react';
-
-const ChildAppErrorBoundary = (props) => {
-    const { children, config } = props;
-    const { fallback, name, version, tag } = config;
-    const errorHandlers = useDi({ token: CHILD_APP_ERROR_BOUNDARY_TOKEN, optional: true });
-    const decoratedErrorHandlers = useMemo(() => errorHandlers?.map((errorHandler) => (error, info) => errorHandler(error, info, { name, version, tag })), [errorHandlers, name, version, tag]);
-    return (jsx(UniversalErrorBoundary, { fallback: fallback, errorHandlers: decoratedErrorHandlers, children: children }));
-};
-
-export { ChildAppErrorBoundary };

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

@@ -1,8 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import type { ChildAppReactConfig } from '@tramvai/tokens-child-app';
-type Props = {
-    config: ChildAppReactConfig;
-};
-export declare const ChildAppErrorBoundary: (props: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=childAppErrorBoundary.d.ts.map

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

@@ -1,14 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import { CHILD_APP_ERROR_BOUNDARY_TOKEN } from '@tramvai/tokens-child-app';
-import { useDi, UniversalErrorBoundary } from '@tramvai/react';
-
-const ChildAppErrorBoundary = (props) => {
-    const { children, config } = props;
-    const { fallback, name, version, tag } = config;
-    const errorHandlers = useDi({ token: CHILD_APP_ERROR_BOUNDARY_TOKEN, optional: true });
-    const decoratedErrorHandlers = useMemo(() => errorHandlers?.map((errorHandler) => (error, info) => errorHandler(error, info, { name, version, tag })), [errorHandlers, name, version, tag]);
-    return (jsx(UniversalErrorBoundary, { fallback: fallback, errorHandlers: decoratedErrorHandlers, children: children }));
-};
-
-export { ChildAppErrorBoundary };

package/lib/shared/react/childAppErrorBoundary.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('react');
-var tokensChildApp = require('@tramvai/tokens-child-app');
-var react = require('@tramvai/react');
-
-const ChildAppErrorBoundary = (props) => {
-    const { children, config } = props;
-    const { fallback, name, version, tag } = config;
-    const errorHandlers = react.useDi({ token: tokensChildApp.CHILD_APP_ERROR_BOUNDARY_TOKEN, optional: true });
-    const decoratedErrorHandlers = react$1.useMemo(() => errorHandlers?.map((errorHandler) => (error, info) => errorHandler(error, info, { name, version, tag })), [errorHandlers, name, version, tag]);
-    return (jsxRuntime.jsx(react.UniversalErrorBoundary, { fallback: fallback, errorHandlers: decoratedErrorHandlers, children: children }));
-};
-
-exports.ChildAppErrorBoundary = ChildAppErrorBoundary;