@tramvai/module-child-app 2.27.0 → 2.28.0

package/README.md

@@ -323,3 +323,18 @@ You may specify a full config to debug to a specific child-app:
    });
    ```
 2. Run root-app with `CHILD_APP_DEBUG` environment variable with value of child-app names needed to debug
+
+## Known issues
+
+### This Suspense boundary received an update before it finished hydrating
+
+When `React` >= `18` version is used, child-app will be wrapped in `Suspense` boundary for [Selective Hydration](https://github.com/reactwg/react-18/discussions/130).
+This optimization can significantly decrease Total Blocking Time metric of the page.
+
+There is one drawback of this optimization - if you will try rerender child-app during selective hydration, `React` will switch to deopt mode and made full client-rendering of the child-app component.
+Potential ways to fix this problem [described here](https://github.com/facebook/react/issues/24476#issuecomment-1127800350).
+`ChildApp` component already wrapped in `React.memo`.
+
+Few advices to avoid this problem:
+- Memoize object, passed to child-app `props` property
+- Prevent pass to child-app properties, which can be changed during hydration, for example at cliend-side in page actions

package/lib/server.browser.js

@@ -11,7 +11,7 @@ import flatten from '@tinkoff/utils/array/flatten';
 import noop from '@tinkoff/utils/function/noop';
 import { Subscription, ChildDispatcherContext, createEvent, createReducer } from '@tramvai/state';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useState, useEffect, createElement } from 'react';
+import { createContext, memo, useContext, useMemo, useState, useEffect, createElement, Suspense } from 'react';
 import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
 import { loadModule } from '@tinkoff/module-loader-client';
 
@@ -936,7 +936,27 @@ const browserProviders = [
     }),
 ];
 
-const ChildApp = ({ name, version, tag, props }) => {
+const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback, }) => {
+    // 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') {
+        logger.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 ChildApp = memo(({ name, version, tag, props, fallback }) => {
     const renderManager = useContext(RenderContext);
     const resolveExternalConfig = useDi(CHILD_APP_RESOLVE_CONFIG_TOKEN);
     const logger = useDi(LOGGER_TOKEN);
@@ -973,10 +993,14 @@ const ChildApp = ({ name, version, tag, props }) => {
             });
             return null;
         }
-        return createElement(Cmp, {
+        const result = createElement(Cmp, {
             di,
             props,
         });
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+            return (jsx(Suspense, { fallback: jsx(FailedChildAppFallback, { name: name, version: version, tag: tag, logger: log, fallback: fallback }), children: result }));
+        }
+        return result;
     }
     catch (error) {
         log.error({
@@ -989,7 +1013,7 @@ const ChildApp = ({ name, version, tag, props }) => {
         });
         return null;
     }
-};
+});
 
 let ChildAppModule = class ChildAppModule {
 };

package/lib/server.es.js

@@ -10,7 +10,7 @@ import { resolveLazyComponent, useDi } from '@tramvai/react';
 import flatten from '@tinkoff/utils/array/flatten';
 import { ChildDispatcherContext, createEvent, createReducer } from '@tramvai/state';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useState, useEffect, createElement } from 'react';
+import { createContext, memo, useContext, useMemo, useState, useEffect, createElement, Suspense } from 'react';
 import applyOrReturn from '@tinkoff/utils/function/applyOrReturn';
 import { combineValidators, isUrl, endsWith } from '@tinkoff/env-validators';
 import { safeStringify } from '@tramvai/safe-strings';
@@ -955,7 +955,27 @@ const serverProviders = [
     }),
 ];
 
-const ChildApp = ({ name, version, tag, props }) => {
+const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback, }) => {
+    // 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') {
+        logger.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 ChildApp = memo(({ name, version, tag, props, fallback }) => {
     const renderManager = useContext(RenderContext);
     const resolveExternalConfig = useDi(CHILD_APP_RESOLVE_CONFIG_TOKEN);
     const logger = useDi(LOGGER_TOKEN);
@@ -992,10 +1012,14 @@ const ChildApp = ({ name, version, tag, props }) => {
             });
             return null;
         }
-        return createElement(Cmp, {
+        const result = createElement(Cmp, {
             di,
             props,
         });
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+            return (jsx(Suspense, { fallback: jsx(FailedChildAppFallback, { name: name, version: version, tag: tag, logger: log, fallback: fallback }), children: result }));
+        }
+        return result;
     }
     catch (error) {
         log.error({
@@ -1008,7 +1032,7 @@ const ChildApp = ({ name, version, tag, props }) => {
         });
         return null;
     }
-};
+});
 
 let ChildAppModule = class ChildAppModule {
 };

package/lib/server.js

@@ -964,7 +964,27 @@ const serverProviders = [
     }),
 ];
 
-const ChildApp = ({ name, version, tag, props }) => {
+const FailedChildAppFallback = ({ name, version, tag, logger, fallback: Fallback, }) => {
+    // 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') {
+        logger.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 ChildApp = react.memo(({ name, version, tag, props, fallback }) => {
     const renderManager = react.useContext(RenderContext);
     const resolveExternalConfig = react$1.useDi(tokensChildApp.CHILD_APP_RESOLVE_CONFIG_TOKEN);
     const logger = react$1.useDi(tokensCommon.LOGGER_TOKEN);
@@ -1001,10 +1021,14 @@ const ChildApp = ({ name, version, tag, props }) => {
             });
             return null;
         }
-        return react.createElement(Cmp, {
+        const result = react.createElement(Cmp, {
             di,
             props,
         });
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+            return (jsxRuntime.jsx(react.Suspense, { fallback: jsxRuntime.jsx(FailedChildAppFallback, { name: name, version: version, tag: tag, logger: log, fallback: fallback }), children: result }));
+        }
+        return result;
     }
     catch (error) {
         log.error({
@@ -1017,7 +1041,7 @@ const ChildApp = ({ name, version, tag, props }) => {
         });
         return null;
     }
-};
+});
 
 exports.ChildAppModule = class ChildAppModule {
 };

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

@@ -1,2 +1,2 @@
 import type { ChildAppReactConfig } from '@tramvai/tokens-child-app';
-export declare const ChildApp: ({ name, version, tag, props }: ChildAppReactConfig) => import("react").ReactElement<import("@tramvai/tokens-child-app").WrapperProps<any>, string | import("react").JSXElementConstructor<any>>;
+export declare const ChildApp: import("react").MemoExoticComponent<({ name, version, tag, props, fallback }: ChildAppReactConfig) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
@@ -31,20 +31,20 @@
     "@tinkoff/env-validators": "0.1.3",
     "@tinkoff/module-loader-client": "0.4.3",
     "@tinkoff/module-loader-server": "0.5.3",
-    "@tramvai/child-app-core": "2.27.0",
+    "@tramvai/child-app-core": "2.28.0",
     "@tramvai/safe-strings": "0.5.4",
-    "@tramvai/tokens-child-app": "2.27.0"
+    "@tramvai/tokens-child-app": "2.28.0"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.8.6",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "2.27.0",
-    "@tramvai/state": "2.27.0",
-    "@tramvai/react": "2.27.0",
-    "@tramvai/tokens-common": "2.27.0",
-    "@tramvai/tokens-render": "2.27.0",
-    "@tramvai/tokens-router": "2.27.0",
+    "@tramvai/core": "2.28.0",
+    "@tramvai/state": "2.28.0",
+    "@tramvai/react": "2.28.0",
+    "@tramvai/tokens-common": "2.28.0",
+    "@tramvai/tokens-render": "2.28.0",
+    "@tramvai/tokens-router": "2.28.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",