@tramvai/module-child-app 4.9.0 → 4.10.1

package/lib/browser/loader.browser.js

@@ -1,4 +1,4 @@
-import { loadModule } from '@tinkoff/module-loader-client';
+import { loadModule, waitModule } from '@tinkoff/module-loader-client';
 import { Loader } from '../shared/loader.browser.js';
 import { initModuleFederation, getModuleFederation } from '../shared/webpack/moduleFederation.browser.js';
 
@@ -52,6 +52,10 @@ class BrowserLoader extends Loader {
     async init(config) {
         const container = getModuleFromGlobal(config.client.entry);
         if (container) {
+            this.log.debug({
+                event: 'init',
+                moduleName: config.name,
+            });
             await initModuleFederation(container);
             const factory = (await getModuleFederation(container, 'entry'));
             const entry = factory();
@@ -63,6 +67,14 @@ class BrowserLoader extends Loader {
         const entry = container && this.initializedMap.get(container);
         return entry && this.resolve(entry);
     }
+    async waitFor(config) {
+        this.log.debug({
+            event: 'wait-for',
+            moduleName: config.name,
+        });
+        // wait for entry chunk
+        await waitModule(config.client.entry);
+    }
 }
 
 export { BrowserLoader, getModuleFromGlobal };

package/lib/browser/loader.d.ts

@@ -13,5 +13,6 @@ export declare class BrowserLoader extends Loader {
     load(config: ChildAppFinalConfig): Promise<ChildApp | void>;
     init(config: ChildAppFinalConfig): Promise<void>;
     get(config: ChildAppFinalConfig): ChildApp | void;
+    waitFor(config: ChildAppFinalConfig): Promise<void>;
 }
 //# sourceMappingURL=loader.d.ts.map

package/lib/browser/preload.browser.js

@@ -77,13 +77,24 @@ class PreloadManager {
         const promises = [];
         this.currentlyPreloaded.forEach((config) => {
             promises.push((async () => {
+                // double check that preloaded Child App entry chunk is already loaded on the client.
+                // in streaming mode with async scripts it may not be loaded yet, and we need to wait this script.
+                // we don't need to load this script, because for server preloaded Child Apps it already been in HTML,
+                // for not preloaded Child Apps we don't want to delay hydration
+                if (!getModuleFromGlobal(config.client.entry)) {
+                    // TODO: current test cases work with `loader.load`, need to be sure that new `loader.waitFor` method is necessary
+                    await this.loader.waitFor(config).catch((e) => {
+                        // it is expected case if entry chunk is not existed or failed
+                    });
+                }
+                // if entry chunk is already loaded, here other Child App chunks will be waited or loaded
                 await this.loader.init(config);
                 // case for client initialization of Child App
                 await this.resolveComponent(config);
                 await this.run('customer', config);
             })());
         });
-        await Promise.all(promises);
+        await Promise.allSettled(promises);
     }
     pageRender() {
         this.pageHasRendered = true;
@@ -112,13 +123,8 @@ class PreloadManager {
             preloaded.forEach((request) => {
                 const config = this.resolveExternalConfig(request);
                 if (config) {
-                    // double check that Child App script is already loaded.
-                    // in streaming mode with async scripts it may not be loaded yet,
-                    // and we will run client initialization flow for this Child App, like it was not preloaded
-                    if (getModuleFromGlobal(config.client.entry)) {
-                        this.currentlyPreloaded.set(config.key, config);
-                        this.hasPreloadBefore.add(config.key);
-                    }
+                    this.currentlyPreloaded.set(config.key, config);
+                    this.hasPreloadBefore.add(config.key);
                 }
             });
             this.hasInitialized = true;
@@ -126,7 +132,7 @@ class PreloadManager {
     }
     async init() {
         await this.resolutionConfigManager.init();
-        this.initServerPreloaded();
+        await this.initServerPreloaded();
     }
     async run(status, config) {
         const childApp = this.loader.get(config);

package/lib/browser/providers.browser.js

@@ -48,17 +48,24 @@ const browserProviders = [
     provide({
         provide: commandLineListTokens.resolvePageDeps,
         multi: true,
-        useFactory: ({ preloader }) => {
+        useFactory: ({ preloader, logger }) => {
             let isSpaNavigation = false;
             return function childAppRunPreloaded() {
                 if (isSpaNavigation)
                     return;
                 isSpaNavigation = true;
-                return preloader.runPreloaded();
+                return preloader.runPreloaded().catch((error) => {
+                    const log = logger('child-app:run-preloaded');
+                    log.error({
+                        event: 'client-failed',
+                        error,
+                    });
+                });
             };
         },
         deps: {
             preloader: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            logger: LOGGER_TOKEN,
         },
     }),
     provide({
@@ -78,7 +85,7 @@ const browserProviders = [
     provide({
         provide: commandLineListTokens.spaTransition,
         multi: true,
-        useFactory: ({ preloader, runner, diManager, pageService }) => {
+        useFactory: ({ preloader, runner, diManager, pageService, logger }) => {
             return async function childAppRunPreloaded() {
                 await runCommand({
                     preloader,
@@ -87,6 +94,7 @@ const browserProviders = [
                     pageService,
                     status: 'spa',
                     forcePreload: false,
+                    logger,
                 });
             };
         },
@@ -95,12 +103,13 @@ const browserProviders = [
             runner: CHILD_APP_COMMAND_LINE_RUNNER_TOKEN,
             diManager: CHILD_APP_DI_MANAGER_TOKEN,
             pageService: PAGE_SERVICE_TOKEN,
+            logger: LOGGER_TOKEN,
         },
     }),
     provide({
         provide: commandLineListTokens.afterSpaTransition,
         multi: true,
-        useFactory: ({ preloader, runner, diManager, pageService }) => {
+        useFactory: ({ preloader, runner, diManager, pageService, logger }) => {
             return async function childAppRunPreloaded() {
                 await runCommand({
                     preloader,
@@ -109,6 +118,7 @@ const browserProviders = [
                     pageService,
                     status: 'afterSpa',
                     forcePreload: true,
+                    logger,
                 });
             };
         },
@@ -117,6 +127,7 @@ const browserProviders = [
             runner: CHILD_APP_COMMAND_LINE_RUNNER_TOKEN,
             diManager: CHILD_APP_DI_MANAGER_TOKEN,
             pageService: PAGE_SERVICE_TOKEN,
+            logger: LOGGER_TOKEN,
         },
     }),
 ];

package/lib/browser/runCommand.browser.js

@@ -1,4 +1,4 @@
-const runCommand = async ({ status, forcePreload, runner, preloader, diManager, pageService, }) => {
+const runCommand = async ({ status, forcePreload, runner, preloader, diManager, pageService, logger, }) => {
     const childApps = preloader.getPreloadedList();
     await Promise.all(childApps.map(async (config) => {
         if (forcePreload) {
@@ -6,7 +6,13 @@ const runCommand = async ({ status, forcePreload, runner, preloader, diManager,
             await preloader.preload(config, pageService.getCurrentRoute());
         }
         return runner.run('client', status, config);
-    }));
+    })).catch((error) => {
+        const log = logger('child-app:run-preloaded');
+        log.error({
+            event: 'spa-failed',
+            error,
+        });
+    });
 };
 
 export { runCommand };

package/lib/browser/runCommand.d.ts

@@ -1,12 +1,14 @@
 import type { CHILD_APP_DI_MANAGER_TOKEN } from '@tramvai/tokens-child-app';
 import { type CHILD_APP_COMMAND_LINE_RUNNER_TOKEN, type CHILD_APP_PRELOAD_MANAGER_TOKEN } from '@tramvai/tokens-child-app';
+import type { LOGGER_TOKEN } from '@tramvai/tokens-common';
 import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
-export declare const runCommand: ({ status, forcePreload, runner, preloader, diManager, pageService, }: {
+export declare const runCommand: ({ status, forcePreload, runner, preloader, diManager, pageService, logger, }: {
     status: string;
     forcePreload: boolean;
     runner: typeof CHILD_APP_COMMAND_LINE_RUNNER_TOKEN;
     preloader: typeof CHILD_APP_PRELOAD_MANAGER_TOKEN;
     diManager: typeof CHILD_APP_DI_MANAGER_TOKEN;
     pageService: typeof PAGE_SERVICE_TOKEN;
+    logger: typeof LOGGER_TOKEN;
 }) => Promise<void>;
 //# sourceMappingURL=runCommand.d.ts.map

package/lib/server/loader.d.ts

@@ -18,5 +18,6 @@ export declare class ServerLoader extends Loader {
     get(config: ChildAppFinalConfig): ChildApp | void;
     getStats(config: ChildAppFinalConfig): ModuleFederationStats | void;
     getLoadableStats(config: ChildAppFinalConfig): LoadableStats | void;
+    waitFor(): Promise<void>;
 }
 //# sourceMappingURL=loader.d.ts.map

package/lib/server/loader.es.js

@@ -90,6 +90,9 @@ class ServerLoader extends Loader {
         }
         return this.loader.getByUrl(config.client.statsLoadable);
     }
+    async waitFor() {
+        throw Error('Method "waitFor" is not implemented for server loader');
+    }
 }
 
 export { ServerLoader };

package/lib/server/loader.js

@@ -98,6 +98,9 @@ class ServerLoader extends loader.Loader {
         }
         return this.loader.getByUrl(config.client.statsLoadable);
     }
+    async waitFor() {
+        throw Error('Method "waitFor" is not implemented for server loader');
+    }
 }
 
 exports.ServerLoader = ServerLoader;

package/lib/server/providers.es.js

@@ -110,13 +110,20 @@ const serverProviders = [
     provide({
         provide: commandLineListTokens.resolvePageDeps,
         multi: true,
-        useFactory: ({ preloader }) => {
+        useFactory: ({ preloader, logger }) => {
             return function childAppRunPreloaded() {
-                return preloader.runPreloaded();
+                return preloader.runPreloaded().catch((error) => {
+                    const log = logger('child-app:run-preloaded');
+                    log.error({
+                        event: 'server-failed',
+                        error,
+                    });
+                });
             };
         },
         deps: {
             preloader: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            logger: LOGGER_TOKEN,
         },
     }),
     provide({

package/lib/server/providers.js

@@ -114,13 +114,20 @@ const serverProviders = [
     core.provide({
         provide: core.commandLineListTokens.resolvePageDeps,
         multi: true,
-        useFactory: ({ preloader }) => {
+        useFactory: ({ preloader, logger }) => {
             return function childAppRunPreloaded() {
-                return preloader.runPreloaded();
+                return preloader.runPreloaded().catch((error) => {
+                    const log = logger('child-app:run-preloaded');
+                    log.error({
+                        event: 'server-failed',
+                        error,
+                    });
+                });
             };
         },
         deps: {
             preloader: tokensChildApp.CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            logger: tokensCommon.LOGGER_TOKEN,
         },
     }),
     core.provide({

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

@@ -20,6 +20,11 @@ const entryAttrs = {
     onload: `this.setAttribute('loaded', 'true')`,
     onerror: `this.setAttribute('loaded', 'false')`,
 };
+// for cases when preloaded chunk loading is failed before webpack add this script loading handlers,
+// we need to remove script and webpack will try to load it itself https://github.com/webpack/webpack/issues/14874
+const chunkAttrs = {
+    onerror: `this.remove()`,
+};
 const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => async () => {
     const log = logger('child-app:render:slots');
     const result = [];
@@ -41,7 +46,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                     attrs: {
                         'data-critical': 'true',
                         ...scriptTypeAttr,
-                        ...(isEntry ? entryAttrs : {}),
+                        ...(isEntry ? entryAttrs : chunkAttrs),
                     },
                 });
                 break;

package/lib/server/render-slots.js

@@ -28,6 +28,11 @@ const entryAttrs = {
     onload: `this.setAttribute('loaded', 'true')`,
     onerror: `this.setAttribute('loaded', 'false')`,
 };
+// for cases when preloaded chunk loading is failed before webpack add this script loading handlers,
+// we need to remove script and webpack will try to load it itself https://github.com/webpack/webpack/issues/14874
+const chunkAttrs = {
+    onerror: `this.remove()`,
+};
 const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, resourcesRegistry, }) => async () => {
     const log = logger('child-app:render:slots');
     const result = [];
@@ -49,7 +54,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                     attrs: {
                         'data-critical': 'true',
                         ...scriptTypeAttr,
-                        ...(isEntry ? entryAttrs : {}),
+                        ...(isEntry ? entryAttrs : chunkAttrs),
                     },
                 });
                 break;

package/lib/shared/loader.d.ts

@@ -5,6 +5,7 @@ export declare abstract class Loader implements ChildAppLoader {
     abstract get(config: ChildAppFinalConfig): ChildApp | void;
     abstract load(config: ChildAppFinalConfig): Promise<ChildApp | void>;
     abstract init(config: ChildAppFinalConfig): Promise<void>;
+    abstract waitFor(config: ChildAppFinalConfig): Promise<void>;
     protected resolve(entry: ChildAppModuleWrapper): ChildApp;
 }
 //# sourceMappingURL=loader.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "4.9.0",
+  "version": "4.10.1",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
@@ -31,25 +31,25 @@
   "dependencies": {
     "@loadable/server": "^5.15.0",
     "@tinkoff/env-validators": "0.3.1",
-    "@tinkoff/module-loader-client": "0.6.2",
+    "@tinkoff/module-loader-client": "0.6.3",
     "@tinkoff/module-loader-server": "0.7.1",
-    "@tramvai/module-common": "4.9.0",
+    "@tramvai/module-common": "4.10.1",
     "@tinkoff/url": "0.10.1",
-    "@tramvai/child-app-core": "4.9.0",
+    "@tramvai/child-app-core": "4.10.1",
     "@tramvai/safe-strings": "0.7.1",
-    "@tramvai/tokens-child-app": "4.9.0"
+    "@tramvai/tokens-child-app": "4.10.1"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.10.2",
-    "@tinkoff/router": "0.4.31",
+    "@tinkoff/router": "0.4.34",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "4.9.0",
-    "@tramvai/state": "4.9.0",
-    "@tramvai/react": "4.9.0",
-    "@tramvai/tokens-common": "4.9.0",
-    "@tramvai/tokens-render": "4.9.0",
-    "@tramvai/tokens-router": "4.9.0",
+    "@tramvai/core": "4.10.1",
+    "@tramvai/state": "4.10.1",
+    "@tramvai/react": "4.10.1",
+    "@tramvai/tokens-common": "4.10.1",
+    "@tramvai/tokens-render": "4.10.1",
+    "@tramvai/tokens-router": "4.10.1",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",