@tramvai/module-child-app 2.70.0 → 2.72.0

package/lib/browser/child/singletonProviders.browser.js

@@ -0,0 +1,91 @@
+import noop from '@tinkoff/utils/function/noop';
+import flatten from '@tinkoff/utils/array/flatten';
+import { provide } from '@tramvai/core';
+import { commandLineListTokens, CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, CHILD_APP_INTERNAL_ACTION_TOKEN } from '@tramvai/tokens-child-app';
+import { CONTEXT_TOKEN, ACTION_PAGE_RUNNER_TOKEN } from '@tramvai/tokens-common';
+import { Subscription } from '@tramvai/state';
+import { ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN } from '@tramvai/tokens-router';
+
+const getChildProviders = (appDi) => {
+    const context = appDi.get(CONTEXT_TOKEN);
+    return [
+        provide({
+            provide: commandLineListTokens.customerStart,
+            multi: true,
+            useFactory: ({ subscriptions }) => {
+                return async function resolveRootStateForChild() {
+                    if (!subscriptions) {
+                        return;
+                    }
+                    const state = context.getState();
+                    return Promise.all(subscriptions.map((sub) => {
+                        const subscription = new Subscription(sub.stores.map(context.getStore));
+                        subscription.setOnStateChange(() => {
+                            sub.listener(context.getState());
+                        });
+                        subscription.trySubscribe();
+                        return sub.listener(state);
+                    }));
+                };
+            },
+            deps: {
+                subscriptions: { token: CHILD_APP_INTERNAL_ROOT_STATE_SUBSCRIPTION_TOKEN, optional: true },
+            },
+        }),
+        provide({
+            provide: commandLineListTokens.clear,
+            multi: true,
+            useFactory: ({ actionRunner, actions }) => {
+                return function childAppRunActions() {
+                    return actionRunner.runActions(flatten(actions));
+                };
+            },
+            deps: {
+                actionRunner: ACTION_PAGE_RUNNER_TOKEN,
+                actions: CHILD_APP_INTERNAL_ACTION_TOKEN,
+            },
+        }),
+        provide({
+            provide: commandLineListTokens.spaTransition,
+            multi: true,
+            useFactory: ({ spaMode, actionRunner, actions }) => {
+                if (spaMode !== 'after') {
+                    return function childAppRunActions() {
+                        return actionRunner.runActions(flatten(actions));
+                    };
+                }
+                return noop;
+            },
+            deps: {
+                actionRunner: ACTION_PAGE_RUNNER_TOKEN,
+                actions: CHILD_APP_INTERNAL_ACTION_TOKEN,
+                spaMode: {
+                    token: ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN,
+                    optional: true,
+                },
+            },
+        }),
+        provide({
+            provide: commandLineListTokens.afterSpaTransition,
+            multi: true,
+            useFactory: ({ spaMode, actionRunner, actions }) => {
+                if (spaMode === 'after') {
+                    return function childAppRunActions() {
+                        return actionRunner.runActions(flatten(actions));
+                    };
+                }
+                return noop;
+            },
+            deps: {
+                actionRunner: ACTION_PAGE_RUNNER_TOKEN,
+                actions: CHILD_APP_INTERNAL_ACTION_TOKEN,
+                spaMode: {
+                    token: ROUTER_SPA_ACTIONS_RUN_MODE_TOKEN,
+                    optional: true,
+                },
+            },
+        }),
+    ];
+};
+
+export { getChildProviders };

package/lib/browser/loader.browser.js

@@ -0,0 +1,64 @@
+import { loadModule } from '@tinkoff/module-loader-client';
+import { Loader } from '../shared/loader.browser.js';
+import { initModuleFederation, getModuleFederation } from '../shared/webpack/moduleFederation.browser.js';
+
+const getModuleFromGlobal = (entry) => {
+    return window[`child-app__${entry}`];
+};
+class BrowserLoader extends Loader {
+    constructor({ logger }) {
+        super();
+        this.initializedMap = new WeakMap();
+        this.log = logger('child-app:loader');
+    }
+    async load(config) {
+        var _a;
+        const moduleName = config.name;
+        const childApp = await this.get(config);
+        if (childApp) {
+            this.log.debug({
+                event: 'load-cache',
+                moduleName,
+            });
+            return childApp;
+        }
+        let container = getModuleFromGlobal(config.client.entry);
+        if (!container) {
+            this.log.debug({
+                event: 'load-fetch',
+                moduleName,
+            });
+            await loadModule(config.client.entry, { cssUrl: (_a = config.css) === null || _a === void 0 ? void 0 : _a.entry });
+            container = getModuleFromGlobal(config.client.entry);
+            if (container) {
+                this.log.debug({
+                    event: 'load-success',
+                    moduleName,
+                });
+                await this.init(config);
+                return this.get(config);
+            }
+        }
+        this.log.error({
+            event: 'load-failed',
+            moduleName,
+        });
+        return Promise.reject(new Error(`Error resolving child-app ${moduleName}`));
+    }
+    async init(config) {
+        const container = getModuleFromGlobal(config.client.entry);
+        if (container) {
+            await initModuleFederation(container);
+            const factory = (await getModuleFederation(container, 'entry'));
+            const entry = factory();
+            this.initializedMap.set(container, entry);
+        }
+    }
+    get(config) {
+        const container = getModuleFromGlobal(config.client.entry);
+        const entry = container && this.initializedMap.get(container);
+        return entry && this.resolve(entry);
+    }
+}
+
+export { BrowserLoader, getModuleFromGlobal };

package/lib/browser/preload.browser.js

@@ -0,0 +1,115 @@
+import { ChildAppStore } from '../shared/store.browser.js';
+
+class PreloadManager {
+    constructor({ loader, runner, resolutionConfigManager, resolveExternalConfig, store, }) {
+        this.pageHasRendered = false;
+        this.pageHasLoaded = false;
+        this.currentlyPreloaded = new Map();
+        this.hasPreloadBefore = new Set();
+        this.hasInitialized = false;
+        this.map = new Map();
+        this.loader = loader;
+        this.runner = runner;
+        this.store = store;
+        this.resolutionConfigManager = resolutionConfigManager;
+        this.resolveExternalConfig = resolveExternalConfig;
+    }
+    async preload(request) {
+        await this.init();
+        const config = this.resolveExternalConfig(request);
+        if (!config) {
+            return;
+        }
+        const { key } = config;
+        if (this.pageHasRendered) {
+            this.currentlyPreloaded.set(key, config);
+        }
+        if (!this.isPreloaded(config)) {
+            if (this.map.has(key)) {
+                return this.map.get(key);
+            }
+            // TODO: remove after dropping support for react@<18 as it can handle hydration errors with Suspense
+            // in case React render yet has not been executed do not load any external child-app app as
+            // as it will lead to markup mismatch on markup hydration
+            if (this.pageHasRendered) {
+                // but in case render has happened load child-app as soon as possible
+                const promise = (async () => {
+                    try {
+                        await this.loader.load(config);
+                        await this.run('customer', config);
+                        await this.run('clear', config);
+                    }
+                    catch (error) { }
+                    this.hasPreloadBefore.add(key);
+                })();
+                this.map.set(key, promise);
+                return promise;
+            }
+        }
+    }
+    isPreloaded(request) {
+        const config = this.resolveExternalConfig(request);
+        return !!config && this.hasPreloadBefore.has(config.key);
+    }
+    async runPreloaded() {
+        await this.init();
+        if (this.pageHasRendered) {
+            return;
+        }
+        const promises = [];
+        this.currentlyPreloaded.forEach((config) => {
+            promises.push((async () => {
+                await this.loader.init(config);
+                await this.run('customer', config);
+            })());
+        });
+        await Promise.all(promises);
+    }
+    pageRender() {
+        this.pageHasRendered = true;
+    }
+    async clearPreloaded() {
+        if (this.pageHasLoaded) {
+            this.currentlyPreloaded.clear();
+            this.map.clear();
+            return;
+        }
+        this.pageHasLoaded = true;
+        const promises = [];
+        this.currentlyPreloaded.forEach((config) => {
+            promises.push(this.run('clear', config));
+        });
+        this.currentlyPreloaded.clear();
+        this.map.clear();
+        await Promise.all(promises);
+    }
+    getPreloadedList() {
+        return Array.from(this.currentlyPreloaded.values());
+    }
+    initServerPreloaded() {
+        if (!this.hasInitialized) {
+            const { preloaded } = this.store.getState(ChildAppStore);
+            preloaded.forEach((request) => {
+                const config = this.resolveExternalConfig(request);
+                if (config) {
+                    this.currentlyPreloaded.set(config.key, config);
+                    this.hasPreloadBefore.add(config.key);
+                }
+            });
+            this.hasInitialized = true;
+        }
+    }
+    async init() {
+        await this.resolutionConfigManager.init();
+        this.initServerPreloaded();
+    }
+    async run(status, config) {
+        const childApp = this.loader.get(config);
+        if (!childApp) {
+            return;
+        }
+        await this.runner.run('client', status, config);
+    }
+}
+
+export { PreloadManager };

package/lib/browser/providers.browser.js

@@ -0,0 +1,113 @@
+import { Scope } from '@tinkoff/dippy';
+import { provide, commandLineListTokens } from '@tramvai/core';
+import { CHILD_APP_LOADER_TOKEN, CHILD_APP_PRELOAD_MANAGER_TOKEN, CHILD_APP_COMMAND_LINE_RUNNER_TOKEN, CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN, CHILD_APP_RESOLVE_CONFIG_TOKEN, CHILD_APP_COMMON_INITIAL_STATE_TOKEN, CHILD_APP_RENDER_MANAGER_TOKEN, CHILD_APP_DI_MANAGER_TOKEN } from '@tramvai/tokens-child-app';
+import { LOGGER_TOKEN, STORE_TOKEN } from '@tramvai/tokens-common';
+import { ROUTER_TOKEN } from '@tramvai/tokens-router';
+import { BrowserLoader } from './loader.browser.js';
+import { PreloadManager } from './preload.browser.js';
+import { RenderManager } from './render.browser.js';
+import { runCommand } from './runCommand.browser.js';
+import { GLOBAL_CHILD_STATE } from '../shared/constants.browser.js';
+
+const browserProviders = [
+    provide({
+        provide: CHILD_APP_LOADER_TOKEN,
+        useClass: BrowserLoader,
+        scope: Scope.SINGLETON,
+        deps: {
+            logger: LOGGER_TOKEN,
+        },
+    }),
+    provide({
+        provide: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+        useClass: PreloadManager,
+        deps: {
+            loader: CHILD_APP_LOADER_TOKEN,
+            runner: CHILD_APP_COMMAND_LINE_RUNNER_TOKEN,
+            resolutionConfigManager: CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN,
+            resolveExternalConfig: CHILD_APP_RESOLVE_CONFIG_TOKEN,
+            store: STORE_TOKEN,
+        },
+    }),
+    provide({
+        provide: CHILD_APP_COMMON_INITIAL_STATE_TOKEN,
+        useFactory: () => { var _a, _b; return JSON.parse((_b = (_a = document.getElementById(GLOBAL_CHILD_STATE)) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '{}'); },
+    }),
+    provide({
+        provide: CHILD_APP_RENDER_MANAGER_TOKEN,
+        useClass: RenderManager,
+        deps: {
+            logger: LOGGER_TOKEN,
+            diManager: CHILD_APP_DI_MANAGER_TOKEN,
+            preloadManager: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            resolutionConfigManager: CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN,
+            resolveExternalConfig: CHILD_APP_RESOLVE_CONFIG_TOKEN,
+        },
+    }),
+    provide({
+        provide: commandLineListTokens.resolvePageDeps,
+        multi: true,
+        useFactory: ({ preloader }) => {
+            let hasCalled = false;
+            return function childAppRunPreloaded() {
+                if (hasCalled)
+                    return;
+                hasCalled = true;
+                return preloader.runPreloaded();
+            };
+        },
+        deps: {
+            preloader: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+        },
+    }),
+    provide({
+        provide: commandLineListTokens.customerStart,
+        multi: true,
+        useFactory: ({ router, preloader }) => {
+            return function childAppRegisterClear() {
+                router.registerHook('beforeNavigate', () => preloader.clearPreloaded());
+                router.registerHook('beforeUpdateCurrent', () => preloader.clearPreloaded());
+            };
+        },
+        deps: {
+            router: ROUTER_TOKEN,
+            preloader: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+        },
+    }),
+    provide({
+        provide: commandLineListTokens.spaTransition,
+        multi: true,
+        useFactory: ({ preloader, runner }) => {
+            return async function childAppRunPreloaded() {
+                await runCommand({
+                    preloader,
+                    runner,
+                    status: 'spa',
+                });
+            };
+        },
+        deps: {
+            preloader: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            runner: CHILD_APP_COMMAND_LINE_RUNNER_TOKEN,
+        },
+    }),
+    provide({
+        provide: commandLineListTokens.afterSpaTransition,
+        multi: true,
+        useFactory: ({ preloader, runner }) => {
+            return async function childAppRunPreloaded() {
+                await runCommand({
+                    preloader,
+                    runner,
+                    status: 'afterSpa',
+                });
+            };
+        },
+        deps: {
+            preloader: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            runner: CHILD_APP_COMMAND_LINE_RUNNER_TOKEN,
+        },
+    }),
+];
+
+export { browserProviders };

package/lib/browser/render.browser.js

@@ -0,0 +1,28 @@
+class RenderManager {
+    constructor({ logger, preloadManager, diManager, resolveExternalConfig, }) {
+        this.log = logger('child-app:render');
+        this.preloadManager = preloadManager;
+        this.diManager = diManager;
+        this.resolveExternalConfig = resolveExternalConfig;
+    }
+    getChildDi(request) {
+        const config = this.resolveExternalConfig(request);
+        if (!config) {
+            throw new Error(`Child app "${request.name}" not found`);
+        }
+        if (this.preloadManager.isPreloaded(request)) {
+            return [this.diManager.getChildDi(config), undefined];
+        }
+        this.log.warn({
+            message: 'Child-app has been used but not preloaded before React render',
+            request,
+        });
+        const promiseDi = this.preloadManager.preload(request).then(() => {
+            return this.diManager.getChildDi(config);
+        });
+        return [undefined, promiseDi];
+    }
+    clear() { }
+}
+
+export { RenderManager };

package/lib/browser/runCommand.browser.js

@@ -0,0 +1,8 @@
+const runCommand = async ({ status, runner, preloader, }) => {
+    const childApps = preloader.getPreloadedList();
+    await Promise.all(childApps.map((config) => {
+        return runner.run('client', status, config);
+    }));
+};
+
+export { runCommand };

package/lib/browser.browser.js

@@ -0,0 +1,17 @@
+import { __decorate } from 'tslib';
+import { Module } from '@tramvai/core';
+import { sharedProviders } from './shared/providers.browser.js';
+import { browserProviders } from './browser/providers.browser.js';
+export * from '@tramvai/tokens-child-app';
+export { ChildApp } from './shared/react/component.browser.js';
+
+let ChildAppModule = class ChildAppModule {
+};
+ChildAppModule = __decorate([
+    Module({
+        imports: [],
+        providers: [...sharedProviders, ...browserProviders],
+    })
+], ChildAppModule);
+
+export { ChildAppModule };

package/lib/server/child/singletonProviders.es.js

@@ -0,0 +1,24 @@
+import flatten from '@tinkoff/utils/array/flatten';
+import { provide } from '@tramvai/core';
+import { commandLineListTokens, CHILD_APP_INTERNAL_ACTION_TOKEN } from '@tramvai/tokens-child-app';
+import { ACTION_PAGE_RUNNER_TOKEN } from '@tramvai/tokens-common';
+
+const getChildProviders = (appDi) => {
+    return [
+        provide({
+            provide: commandLineListTokens.resolvePageDeps,
+            multi: true,
+            useFactory: ({ actionRunner, actions }) => {
+                return function childAppRunActions() {
+                    return actionRunner.runActions(flatten(actions));
+                };
+            },
+            deps: {
+                actionRunner: ACTION_PAGE_RUNNER_TOKEN,
+                actions: CHILD_APP_INTERNAL_ACTION_TOKEN,
+            },
+        }),
+    ];
+};
+
+export { getChildProviders };

package/lib/server/child/singletonProviders.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var flatten = require('@tinkoff/utils/array/flatten');
+var core = require('@tramvai/core');
+var tokensChildApp = require('@tramvai/tokens-child-app');
+var tokensCommon = require('@tramvai/tokens-common');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+const getChildProviders = (appDi) => {
+    return [
+        core.provide({
+            provide: tokensChildApp.commandLineListTokens.resolvePageDeps,
+            multi: true,
+            useFactory: ({ actionRunner, actions }) => {
+                return function childAppRunActions() {
+                    return actionRunner.runActions(flatten__default["default"](actions));
+                };
+            },
+            deps: {
+                actionRunner: tokensCommon.ACTION_PAGE_RUNNER_TOKEN,
+                actions: tokensChildApp.CHILD_APP_INTERNAL_ACTION_TOKEN,
+            },
+        }),
+    ];
+};
+
+exports.getChildProviders = getChildProviders;

package/lib/server/loader.es.js

@@ -0,0 +1,48 @@
+import { ServerLoader as ServerLoader$1 } from '@tinkoff/module-loader-server';
+import { Loader } from '../shared/loader.es.js';
+import { initModuleFederation, getModuleFederation } from '../shared/webpack/moduleFederation.es.js';
+
+class ServerLoader extends Loader {
+    constructor({ logger, createCache, }) {
+        super();
+        this.initializedMap = new WeakMap();
+        const cache = createCache('memory', {
+            ttl: 1000 * 60 * 60 * 24 * 5,
+            max: 20,
+        });
+        this.internalLoadCache = cache;
+        this.loader = new ServerLoader$1({
+            cache,
+            log: logger('child-app:loader'),
+        });
+    }
+    async load(config) {
+        await this.loader.resolveByUrl(config.server.entry, {
+            codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
+            displayName: config.name,
+            kind: 'child-app',
+        });
+        await this.init(config);
+        if (config.tag === 'debug') {
+            setTimeout(() => {
+                this.internalLoadCache.set(config.server.entry, null);
+            }, 10000);
+        }
+        return this.get(config);
+    }
+    async init(config) {
+        const container = this.loader.getByUrl(config.server.entry);
+        if (container) {
+            await initModuleFederation(container, 'default');
+            const factory = (await getModuleFederation(container, 'entry'));
+            const entry = factory();
+            this.initializedMap.set(container, entry);
+        }
+    }
+    get(config) {
+        const container = this.loader.getByUrl(config.server.entry);
+        return container && this.resolve(this.initializedMap.get(container));
+    }
+}
+
+export { ServerLoader };

package/lib/server/loader.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var moduleLoaderServer = require('@tinkoff/module-loader-server');
+var loader = require('../shared/loader.js');
+var moduleFederation = require('../shared/webpack/moduleFederation.js');
+
+class ServerLoader extends loader.Loader {
+    constructor({ logger, createCache, }) {
+        super();
+        this.initializedMap = new WeakMap();
+        const cache = createCache('memory', {
+            ttl: 1000 * 60 * 60 * 24 * 5,
+            max: 20,
+        });
+        this.internalLoadCache = cache;
+        this.loader = new moduleLoaderServer.ServerLoader({
+            cache,
+            log: logger('child-app:loader'),
+        });
+    }
+    async load(config) {
+        await this.loader.resolveByUrl(config.server.entry, {
+            codePrefix: `var ASSETS_PREFIX="${config.client.baseUrl}";`,
+            displayName: config.name,
+            kind: 'child-app',
+        });
+        await this.init(config);
+        if (config.tag === 'debug') {
+            setTimeout(() => {
+                this.internalLoadCache.set(config.server.entry, null);
+            }, 10000);
+        }
+        return this.get(config);
+    }
+    async init(config) {
+        const container = this.loader.getByUrl(config.server.entry);
+        if (container) {
+            await moduleFederation.initModuleFederation(container, 'default');
+            const factory = (await moduleFederation.getModuleFederation(container, 'entry'));
+            const entry = factory();
+            this.initializedMap.set(container, entry);
+        }
+    }
+    get(config) {
+        const container = this.loader.getByUrl(config.server.entry);
+        return container && this.resolve(this.initializedMap.get(container));
+    }
+}
+
+exports.ServerLoader = ServerLoader;

package/lib/server/preload.es.js

@@ -0,0 +1,77 @@
+class PreloadManager {
+    constructor({ loader, runner, stateManager, resolutionConfigManager, resolveFullConfig, }) {
+        this.shouldRunImmediately = false;
+        this.map = new Map();
+        this.preloadMap = new Map();
+        this.loader = loader;
+        this.runner = runner;
+        this.stateManager = stateManager;
+        this.resolutionConfigManager = resolutionConfigManager;
+        this.resolveFullConfig = resolveFullConfig;
+    }
+    async preload(request) {
+        await this.resolutionConfigManager.init();
+        const config = this.resolveFullConfig(request);
+        if (!config) {
+            return;
+        }
+        const { key } = config;
+        if (this.map.has(key)) {
+            await this.map.get(key);
+            return;
+        }
+        const promise = this.loader
+            .load(config)
+            .catch(() => {
+            // Actual error will be logged by the internals of this.loader
+        })
+            .then(() => {
+            if (this.shouldRunImmediately) {
+                return this.run('customer', config);
+            }
+        })
+            .then(() => config);
+        this.map.set(key, promise);
+        this.preloadMap.set(config.key, config);
+        if (this.shouldRunImmediately) {
+            await promise;
+        }
+    }
+    isPreloaded(request) {
+        const config = this.resolveFullConfig(request);
+        return !!config && this.map.has(config.key);
+    }
+    async runPreloaded() {
+        this.shouldRunImmediately = true;
+        const promises = [];
+        this.map.forEach((childAppPromise) => {
+            promises.push((async () => {
+                await this.run('customer', await childAppPromise);
+            })());
+        });
+        await Promise.all(promises);
+    }
+    pageRender() { }
+    async clearPreloaded() {
+        const promises = [];
+        this.map.forEach((childAppPromise) => {
+            promises.push((async () => {
+                await this.run('clear', await childAppPromise);
+            })());
+        });
+        await Promise.all(promises);
+    }
+    getPreloadedList() {
+        return Array.from(this.preloadMap.values());
+    }
+    async run(status, config) {
+        const childApp = this.loader.get(config);
+        if (!childApp) {
+            return;
+        }
+        await this.runner.run('server', status, config);
+        await this.stateManager.registerChildApp(config);
+    }
+}
+
+export { PreloadManager };