@tramvai/module-child-app 2.70.1 → 2.72.3

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

@@ -0,0 +1,104 @@
+import { jsx } from 'react/jsx-runtime';
+import noop from '@tinkoff/utils/function/noop';
+import { memo, Suspense, useContext, useMemo, useState, useEffect } from 'react';
+import { CHILD_APP_INTERNAL_RENDER_TOKEN } from '@tramvai/tokens-child-app';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
+import { UniversalErrorBoundary, useDi } from '@tramvai/react';
+import { useUrl } from '@tramvai/module-router';
+import { RenderContext } from './render-context.browser.js';
+
+const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallback }, }) => {
+    const logger = useDi(LOGGER_TOKEN);
+    const log = logger('child-app:render');
+    // On client-side hydration errors will be handled in `hydrateRoot` `onRecoverableError` property,
+    // and update errors will be handled in Error Boundaries.
+    //
+    // Also, this component never be rendered at client-side, and we check environment only for safety
+    // (server errors logic described here https://github.com/reactjs/rfcs/blob/main/text/0215-server-errors-in-react-18.md).
+    //
+    // On server-side, we still use `renderToString`,
+    // and need to manually log render errors for components, wrapped in Suspense Boundaries.
+    if (typeof window === 'undefined') {
+        log.error({
+            event: 'failed-render',
+            message: 'child-app failed to render, will try to recover during hydration',
+            name,
+            version,
+            tag,
+        });
+    }
+    return Fallback ? jsx(Fallback, {}) : null;
+};
+const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
+    const renderManager = useContext(RenderContext);
+    const logger = useDi(LOGGER_TOKEN);
+    const log = logger('child-app:render');
+    const [maybeDi, maybePromiseDi] = useMemo(() => {
+        return renderManager.getChildDi({ name, version, tag });
+    }, [name, version, tag, renderManager]);
+    const [di, setDi] = useState(maybeDi);
+    const [promiseDi, setPromiseDi] = useState(maybePromiseDi);
+    useEffect(() => {
+        if (!di && promiseDi) {
+            // any errors with loading child-app should be handled in some other place
+            promiseDi
+                .then(setDi)
+                .finally(() => setPromiseDi(undefined))
+                .catch(noop);
+        }
+    }, [di, promiseDi]);
+    if (!di && promiseDi) {
+        // in case child-app was not rendered on ssr
+        // and we have to wait before it's loading
+        return Fallback ? jsx(Fallback, {}) : null;
+    }
+    if (!di) {
+        log.error({
+            event: 'not-found',
+            name,
+            version,
+            tag,
+            message: 'child-app was not initialized',
+        });
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES || typeof window !== 'undefined') {
+            throw new Error(`Child-app was not initialized, check the loading error for child-app "${name}"`);
+        }
+        return Fallback ? jsx(Fallback, {}) : null;
+    }
+    try {
+        const Cmp = di.get({ token: CHILD_APP_INTERNAL_RENDER_TOKEN, optional: true });
+        if (!Cmp) {
+            log.error({
+                event: 'empty-render',
+                message: 'Child-app does not provide render token',
+                name,
+                version,
+                tag,
+            });
+            return null;
+        }
+        return jsx(Cmp, { di: di, props: props });
+    }
+    catch (error) {
+        log.error({
+            event: 'get-render',
+            message: 'Cannot get render token from child-app',
+            error,
+            name,
+            version,
+            tag,
+        });
+        return null;
+    }
+};
+const ChildApp = memo((config) => {
+    const { fallback } = config;
+    const url = useUrl();
+    const result = (jsx(UniversalErrorBoundary, { url: url, fallback: fallback, children: jsx(ChildAppWrapper, { ...config }) }));
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        return jsx(Suspense, { fallback: jsx(FailedChildAppFallback, { config: config }), children: result });
+    }
+    return result;
+});
+
+export { ChildApp };

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

@@ -0,0 +1,104 @@
+import { jsx } from 'react/jsx-runtime';
+import noop from '@tinkoff/utils/function/noop';
+import { memo, Suspense, useContext, useMemo, useState, useEffect } from 'react';
+import { CHILD_APP_INTERNAL_RENDER_TOKEN } from '@tramvai/tokens-child-app';
+import { LOGGER_TOKEN } from '@tramvai/tokens-common';
+import { UniversalErrorBoundary, useDi } from '@tramvai/react';
+import { useUrl } from '@tramvai/module-router';
+import { RenderContext } from './render-context.es.js';
+
+const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallback }, }) => {
+    const logger = useDi(LOGGER_TOKEN);
+    const log = logger('child-app:render');
+    // On client-side hydration errors will be handled in `hydrateRoot` `onRecoverableError` property,
+    // and update errors will be handled in Error Boundaries.
+    //
+    // Also, this component never be rendered at client-side, and we check environment only for safety
+    // (server errors logic described here https://github.com/reactjs/rfcs/blob/main/text/0215-server-errors-in-react-18.md).
+    //
+    // On server-side, we still use `renderToString`,
+    // and need to manually log render errors for components, wrapped in Suspense Boundaries.
+    if (typeof window === 'undefined') {
+        log.error({
+            event: 'failed-render',
+            message: 'child-app failed to render, will try to recover during hydration',
+            name,
+            version,
+            tag,
+        });
+    }
+    return Fallback ? jsx(Fallback, {}) : null;
+};
+const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
+    const renderManager = useContext(RenderContext);
+    const logger = useDi(LOGGER_TOKEN);
+    const log = logger('child-app:render');
+    const [maybeDi, maybePromiseDi] = useMemo(() => {
+        return renderManager.getChildDi({ name, version, tag });
+    }, [name, version, tag, renderManager]);
+    const [di, setDi] = useState(maybeDi);
+    const [promiseDi, setPromiseDi] = useState(maybePromiseDi);
+    useEffect(() => {
+        if (!di && promiseDi) {
+            // any errors with loading child-app should be handled in some other place
+            promiseDi
+                .then(setDi)
+                .finally(() => setPromiseDi(undefined))
+                .catch(noop);
+        }
+    }, [di, promiseDi]);
+    if (!di && promiseDi) {
+        // in case child-app was not rendered on ssr
+        // and we have to wait before it's loading
+        return Fallback ? jsx(Fallback, {}) : null;
+    }
+    if (!di) {
+        log.error({
+            event: 'not-found',
+            name,
+            version,
+            tag,
+            message: 'child-app was not initialized',
+        });
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES || typeof window !== 'undefined') {
+            throw new Error(`Child-app was not initialized, check the loading error for child-app "${name}"`);
+        }
+        return Fallback ? jsx(Fallback, {}) : null;
+    }
+    try {
+        const Cmp = di.get({ token: CHILD_APP_INTERNAL_RENDER_TOKEN, optional: true });
+        if (!Cmp) {
+            log.error({
+                event: 'empty-render',
+                message: 'Child-app does not provide render token',
+                name,
+                version,
+                tag,
+            });
+            return null;
+        }
+        return jsx(Cmp, { di: di, props: props });
+    }
+    catch (error) {
+        log.error({
+            event: 'get-render',
+            message: 'Cannot get render token from child-app',
+            error,
+            name,
+            version,
+            tag,
+        });
+        return null;
+    }
+};
+const ChildApp = memo((config) => {
+    const { fallback } = config;
+    const url = useUrl();
+    const result = (jsx(UniversalErrorBoundary, { url: url, fallback: fallback, children: jsx(ChildAppWrapper, { ...config }) }));
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        return jsx(Suspense, { fallback: jsx(FailedChildAppFallback, { config: config }), children: result });
+    }
+    return result;
+});
+
+export { ChildApp };

package/lib/shared/react/component.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var noop = require('@tinkoff/utils/function/noop');
+var react = require('react');
+var tokensChildApp = require('@tramvai/tokens-child-app');
+var tokensCommon = require('@tramvai/tokens-common');
+var react$1 = require('@tramvai/react');
+var moduleRouter = require('@tramvai/module-router');
+var renderContext = require('./render-context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+
+const FailedChildAppFallback = ({ config: { name, version, tag, fallback: Fallback }, }) => {
+    const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
+    const log = logger('child-app:render');
+    // On client-side hydration errors will be handled in `hydrateRoot` `onRecoverableError` property,
+    // and update errors will be handled in Error Boundaries.
+    //
+    // Also, this component never be rendered at client-side, and we check environment only for safety
+    // (server errors logic described here https://github.com/reactjs/rfcs/blob/main/text/0215-server-errors-in-react-18.md).
+    //
+    // On server-side, we still use `renderToString`,
+    // and need to manually log render errors for components, wrapped in Suspense Boundaries.
+    if (typeof window === 'undefined') {
+        log.error({
+            event: 'failed-render',
+            message: 'child-app failed to render, will try to recover during hydration',
+            name,
+            version,
+            tag,
+        });
+    }
+    return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
+};
+const ChildAppWrapper = ({ name, version, tag, props, fallback: Fallback, }) => {
+    const renderManager = react.useContext(renderContext.RenderContext);
+    const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
+    const log = logger('child-app:render');
+    const [maybeDi, maybePromiseDi] = react.useMemo(() => {
+        return renderManager.getChildDi({ name, version, tag });
+    }, [name, version, tag, renderManager]);
+    const [di, setDi] = react.useState(maybeDi);
+    const [promiseDi, setPromiseDi] = react.useState(maybePromiseDi);
+    react.useEffect(() => {
+        if (!di && promiseDi) {
+            // any errors with loading child-app should be handled in some other place
+            promiseDi
+                .then(setDi)
+                .finally(() => setPromiseDi(undefined))
+                .catch(noop__default["default"]);
+        }
+    }, [di, promiseDi]);
+    if (!di && promiseDi) {
+        // in case child-app was not rendered on ssr
+        // and we have to wait before it's loading
+        return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
+    }
+    if (!di) {
+        log.error({
+            event: 'not-found',
+            name,
+            version,
+            tag,
+            message: 'child-app was not initialized',
+        });
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES || typeof window !== 'undefined') {
+            throw new Error(`Child-app was not initialized, check the loading error for child-app "${name}"`);
+        }
+        return Fallback ? jsxRuntime.jsx(Fallback, {}) : null;
+    }
+    try {
+        const Cmp = di.get({ token: tokensChildApp.CHILD_APP_INTERNAL_RENDER_TOKEN, optional: true });
+        if (!Cmp) {
+            log.error({
+                event: 'empty-render',
+                message: 'Child-app does not provide render token',
+                name,
+                version,
+                tag,
+            });
+            return null;
+        }
+        return jsxRuntime.jsx(Cmp, { di: di, props: props });
+    }
+    catch (error) {
+        log.error({
+            event: 'get-render',
+            message: 'Cannot get render token from child-app',
+            error,
+            name,
+            version,
+            tag,
+        });
+        return null;
+    }
+};
+const ChildApp = react.memo((config) => {
+    const { fallback } = config;
+    const url = moduleRouter.useUrl();
+    const result = (jsxRuntime.jsx(react$1.UniversalErrorBoundary, { url: url, fallback: fallback, children: jsxRuntime.jsx(ChildAppWrapper, { ...config }) }));
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        return jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(FailedChildAppFallback, { config: config }), children: result });
+    }
+    return result;
+});
+
+exports.ChildApp = ChildApp;

package/lib/shared/react/render-context.browser.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const RenderContext = createContext(null);
+
+export { RenderContext };

package/lib/shared/react/render-context.es.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const RenderContext = createContext(null);
+
+export { RenderContext };

package/lib/shared/react/render-context.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const RenderContext = react.createContext(null);
+
+exports.RenderContext = RenderContext;

package/lib/shared/render.browser.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { RenderContext } from './react/render-context.browser.js';
+
+const extendRender = ({ renderManager, }) => {
+    return (render) => {
+        return jsx(RenderContext.Provider, { value: renderManager, children: render });
+    };
+};
+
+export { extendRender };

package/lib/shared/render.es.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { RenderContext } from './react/render-context.es.js';
+
+const extendRender = ({ renderManager, }) => {
+    return (render) => {
+        return jsx(RenderContext.Provider, { value: renderManager, children: render });
+    };
+};
+
+export { extendRender };

package/lib/shared/render.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var renderContext = require('./react/render-context.js');
+
+const extendRender = ({ renderManager, }) => {
+    return (render) => {
+        return jsxRuntime.jsx(renderContext.RenderContext.Provider, { value: renderManager, children: render });
+    };
+};
+
+exports.extendRender = extendRender;

package/lib/shared/resolutionConfigManager.browser.js

@@ -0,0 +1,58 @@
+import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
+import flatten from '@tinkoff/utils/array/flatten';
+
+class ChildAppResolutionConfigManager {
+    constructor({ configs, logger, }) {
+        this.hasInitialized = false;
+        this.rawConfigs = configs !== null && configs !== void 0 ? configs : [];
+        this.mapping = new Map();
+        this.log = logger('child-app:resolution-config');
+    }
+    async init() {
+        if (this.hasInitialized) {
+            return;
+        }
+        if (this.initPromise) {
+            return this.initPromise;
+        }
+        this.initPromise = (async () => {
+            const configs = await Promise.all(this.rawConfigs.map((rawConfig) => {
+                return Promise.resolve()
+                    .then(() => {
+                    return applyOrReturn([], rawConfig);
+                })
+                    .catch((error) => {
+                    this.log.error(error, 'Failed while resolving resolution config');
+                });
+            }));
+            flatten(configs).forEach((config) => {
+                if (config) {
+                    this.mapping.set(config.name, config);
+                }
+            });
+            this.hasInitialized = true;
+        })();
+        return this.initPromise;
+    }
+    resolve({ name, version, tag = 'latest' }) {
+        var _a;
+        const fromMapping = this.mapping.get(name);
+        if (!fromMapping) {
+            return;
+        }
+        const cfg = fromMapping.byTag[tag];
+        if (process.env.NODE_ENV === 'development' && tag === 'debug' && !cfg) {
+            return {
+                baseUrl: 'http://localhost:4040/',
+                version: '0.0.0-stub',
+            };
+        }
+        return {
+            ...cfg,
+            baseUrl: (_a = cfg.baseUrl) !== null && _a !== void 0 ? _a : fromMapping.baseUrl,
+            version: version !== null && version !== void 0 ? version : cfg.version,
+        };
+    }
+}
+
+export { ChildAppResolutionConfigManager };

package/lib/shared/resolutionConfigManager.es.js

@@ -0,0 +1,58 @@
+import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
+import flatten from '@tinkoff/utils/array/flatten';
+
+class ChildAppResolutionConfigManager {
+    constructor({ configs, logger, }) {
+        this.hasInitialized = false;
+        this.rawConfigs = configs !== null && configs !== void 0 ? configs : [];
+        this.mapping = new Map();
+        this.log = logger('child-app:resolution-config');
+    }
+    async init() {
+        if (this.hasInitialized) {
+            return;
+        }
+        if (this.initPromise) {
+            return this.initPromise;
+        }
+        this.initPromise = (async () => {
+            const configs = await Promise.all(this.rawConfigs.map((rawConfig) => {
+                return Promise.resolve()
+                    .then(() => {
+                    return applyOrReturn([], rawConfig);
+                })
+                    .catch((error) => {
+                    this.log.error(error, 'Failed while resolving resolution config');
+                });
+            }));
+            flatten(configs).forEach((config) => {
+                if (config) {
+                    this.mapping.set(config.name, config);
+                }
+            });
+            this.hasInitialized = true;
+        })();
+        return this.initPromise;
+    }
+    resolve({ name, version, tag = 'latest' }) {
+        var _a;
+        const fromMapping = this.mapping.get(name);
+        if (!fromMapping) {
+            return;
+        }
+        const cfg = fromMapping.byTag[tag];
+        if (process.env.NODE_ENV === 'development' && tag === 'debug' && !cfg) {
+            return {
+                baseUrl: 'http://localhost:4040/',
+                version: '0.0.0-stub',
+            };
+        }
+        return {
+            ...cfg,
+            baseUrl: (_a = cfg.baseUrl) !== null && _a !== void 0 ? _a : fromMapping.baseUrl,
+            version: version !== null && version !== void 0 ? version : cfg.version,
+        };
+    }
+}
+
+export { ChildAppResolutionConfigManager };

package/lib/shared/resolutionConfigManager.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var applyOrReturn = require('@tinkoff/utils/function/applyOrReturn');
+var flatten = require('@tinkoff/utils/array/flatten');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var applyOrReturn__default = /*#__PURE__*/_interopDefaultLegacy(applyOrReturn);
+var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
+
+class ChildAppResolutionConfigManager {
+    constructor({ configs, logger, }) {
+        this.hasInitialized = false;
+        this.rawConfigs = configs !== null && configs !== void 0 ? configs : [];
+        this.mapping = new Map();
+        this.log = logger('child-app:resolution-config');
+    }
+    async init() {
+        if (this.hasInitialized) {
+            return;
+        }
+        if (this.initPromise) {
+            return this.initPromise;
+        }
+        this.initPromise = (async () => {
+            const configs = await Promise.all(this.rawConfigs.map((rawConfig) => {
+                return Promise.resolve()
+                    .then(() => {
+                    return applyOrReturn__default["default"]([], rawConfig);
+                })
+                    .catch((error) => {
+                    this.log.error(error, 'Failed while resolving resolution config');
+                });
+            }));
+            flatten__default["default"](configs).forEach((config) => {
+                if (config) {
+                    this.mapping.set(config.name, config);
+                }
+            });
+            this.hasInitialized = true;
+        })();
+        return this.initPromise;
+    }
+    resolve({ name, version, tag = 'latest' }) {
+        var _a;
+        const fromMapping = this.mapping.get(name);
+        if (!fromMapping) {
+            return;
+        }
+        const cfg = fromMapping.byTag[tag];
+        if (process.env.NODE_ENV === 'development' && tag === 'debug' && !cfg) {
+            return {
+                baseUrl: 'http://localhost:4040/',
+                version: '0.0.0-stub',
+            };
+        }
+        return {
+            ...cfg,
+            baseUrl: (_a = cfg.baseUrl) !== null && _a !== void 0 ? _a : fromMapping.baseUrl,
+            version: version !== null && version !== void 0 ? version : cfg.version,
+        };
+    }
+}
+
+exports.ChildAppResolutionConfigManager = ChildAppResolutionConfigManager;

package/lib/shared/singletonDi.browser.js

@@ -0,0 +1,95 @@
+import flatten from '@tinkoff/utils/array/flatten';
+import { Container } from '@tinkoff/dippy';
+import { walkOfModules, getModuleParameters } from '@tramvai/core';
+import { CHILD_APP_INTERNAL_CONFIG_TOKEN, IS_CHILD_APP_DI_TOKEN, CHILD_APP_INTERNAL_ACTION_TOKEN, CHILD_APP_INTERNAL_ROOT_DI_BORROW_TOKEN } from '@tramvai/tokens-child-app';
+import { getChildProviders } from './child/singletonProviders.browser.js';
+import { commonModuleStubs } from './child/stubs.browser.js';
+import { validateChildAppProvider } from './child/validate.browser.js';
+
+class SingletonDiManager {
+    constructor({ logger, appDi, loader, }) {
+        this.cache = new Map();
+        this.log = logger('child-app:singleton-di-manager');
+        this.appDi = appDi;
+        this.loader = loader;
+    }
+    getChildDi(config) {
+        const { key, tag } = config;
+        if (this.cache.has(key)) {
+            return this.cache.get(key);
+        }
+        try {
+            const di = this.resolveDi(config);
+            if (di && tag !== 'debug') {
+                this.cache.set(key, di);
+            }
+            return di;
+        }
+        catch (error) {
+            this.log.error({
+                event: 'resolve-di-fail',
+                error,
+                config,
+            });
+        }
+    }
+    forEachChildDi(cb) {
+        this.cache.forEach((di) => {
+            cb(di);
+        });
+    }
+    resolveDi(config) {
+        const children = this.loader.get(config);
+        if (!children) {
+            return;
+        }
+        const di = new Container([
+            {
+                provide: CHILD_APP_INTERNAL_CONFIG_TOKEN,
+                useValue: config,
+            },
+            {
+                provide: IS_CHILD_APP_DI_TOKEN,
+                useValue: true,
+            },
+        ], this.appDi);
+        const { modules = [], providers = [], actions = [] } = children;
+        // add providers on the Singleton Level to make it possible to reuse providers from the root-app Container
+        const childProviders = getChildProviders(this.appDi);
+        childProviders.forEach((provider) => {
+            di.register(provider);
+        });
+        const resolvedModules = walkOfModules(modules);
+        resolvedModules.forEach((mod) => {
+            const moduleParameters = getModuleParameters(mod);
+            moduleParameters.providers.forEach((provider) => {
+                di.register(provider);
+            });
+        });
+        providers.forEach((provider) => {
+            if (process.env.NODE_ENV === 'development') {
+                validateChildAppProvider(provider);
+            }
+            di.register(provider);
+        });
+        di.register({
+            provide: CHILD_APP_INTERNAL_ACTION_TOKEN,
+            multi: true,
+            useValue: actions,
+        });
+        const borrowTokens = di.get({ token: CHILD_APP_INTERNAL_ROOT_DI_BORROW_TOKEN, optional: true });
+        if (borrowTokens) {
+            flatten(borrowTokens).forEach((token) => {
+                di.borrowToken(this.appDi, token);
+            });
+        }
+        commonModuleStubs.forEach((stub) => {
+            if (!di.has(stub.provide)) {
+                di.register(stub);
+            }
+        });
+        return di;
+    }
+}
+
+export { SingletonDiManager };