@tramvai/module-render 1.79.0 → 1.81.0

package/README.md

@@ -32,20 +32,16 @@ createApp({
 
 ## Explanation
 
-### Different React rendering modes
+### React Strict Mode
 
-More information about rendering modes can be found in the [official documentation](https://reactjs.org/docs/concurrent-mode-adoption.html), `RenderModule` has support for all rendering types and you can choose the right one for your application.
+More information about Strict Mode can be found in the [official documentation](https://reactjs.org/docs/strict-mode.html).
 
-To set the mode, you must pass the `mode` parameter when initializing the `RenderModule`.
+To set the mode, you must pass the `useStrictMode` parameter when initializing the `RenderModule`.
 
 ```typescript
-RenderModule.forRoot({ mode: 'concurrent' });
+RenderModule.forRoot({ useStrictMode: true });
 ```
 
-Available modes: `'legacy' | 'strict' | 'blocking' | 'concurrent'`
-
-[Gradual concurrent mode adoption](#gradual-concurrent-mode-adoption)
-
 ### Application static assets
 
 For static assets (JS, CSS, fonts, etc.) we create special resources registry module, which allow to provide in DI list of resources, and then render them to specifics slots in final HTML.
@@ -283,56 +279,20 @@ Example:
 </details>
 </p>
 
-### Gradual concurrent mode adoption
-
-React allows a gradual migration of an application
-
-**Stages of migration:**
-
-1. [Strict Mode](https://reactjs.org/docs/strict-mode.html) - strict mode, in which React warns about using the legacy API
-
-To connect, you must configure the `RenderModule`
-
-```js
-modules: [
-  RenderModule.forRoot({ mode: 'strict' })
-]
-```
+### React 18 concurrent features
 
-Then you need to fix any new warnings, such as using legacy lifecycle methods and string refs.
+`tramvai` will automatically detect React version, and use hydrateRoot API on the client for 18+ version.
 
-2. [Blocking Mode](https://reactjs.org/docs/concurrent-mode-adoption.html#migration-step-blocking-mode) - adds some Concurrent Mode features, such as Suspense on the server. Suitable for gradual migration to Concurrent Mode.
+Before switch to React 18, we recommended to activate [Strict Mode](https://reactjs.org/docs/strict-mode.html) in your application.
+In Strict Mode which React warns about using the legacy API.
 
-To connect, install an experimental version of React and configure the `RenderModule`
-
-```bash npm2yarn
-npm install react@experimental react-dom@experimental
-```
+To connect, you must configure the `RenderModule`:
 
 ```js
 modules: [
-  RenderModule.forRoot({ mode: 'blocking' })
+  RenderModule.forRoot({ useStrictMode: true })
 ]
 ```
-
-At this stage, you need to check the performance of the application, and you can try new APIs, for example [SuspenseList](https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist)
-
-3. Concurrent Mode
-
-To connect, install an experimental version of React and configure the `RenderModule`
-
-```bash npm2yarn
-npm install react@experimental react-dom@experimental
-```
-
-```js
-modules: [
-  RenderModule.forRoot({ mode: 'concurrent' })
-]
-```
-
-At this stage, you need to check the performance of the application, and you can try new APIs, for example [useTransition](https://reactjs.org/docs/concurrent-mode-patterns.html#transitions)
-
 ### Testing
 
 #### Testing render extensions via RENDER_SLOTS or RESOURCES_REGISTRY tokens

package/lib/browser.d.ts

@@ -3,7 +3,7 @@ export * from './shared/pageErrorStore';
 export * from '@tramvai/tokens-render';
 export declare const DEFAULT_POLYFILL_CONDITION = "";
 export declare class RenderModule {
-    static forRoot({ mode }: RenderModuleConfig): {
+    static forRoot({ mode, useStrictMode }: RenderModuleConfig): {
         mainModule: typeof RenderModule;
         providers: any[];
     };

package/lib/browser.js

@@ -1,15 +1,15 @@
 import { __decorate } from 'tslib';
 import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
 import { STORE_TOKEN, LOGGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/module-common';
-import { DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, RENDER_MODE } from '@tramvai/tokens-render';
+import { DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, CUSTOM_RENDER, EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE, RENDER_MODE } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { ROUTER_TOKEN, PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import each from '@tinkoff/utils/array/each';
-import React, { PureComponent, useMemo, createElement, StrictMode, useEffect } from 'react';
+import React, { PureComponent, useMemo, createElement, StrictMode } from 'react';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
 import { useDi, ERROR_BOUNDARY_TOKEN, ERROR_BOUNDARY_FALLBACK_COMPONENT_TOKEN, UniversalErrorBoundary, DIContext } from '@tramvai/react';
 import { useRoute, useUrl } from '@tramvai/module-router';
-import ReactDOM, { hydrate } from 'react-dom';
+import { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
 import { COMBINE_REDUCERS } from '@tramvai/tokens-common';
 
@@ -72,76 +72,62 @@ function renderReact({ pageService, di }, context) {
             React.createElement(Root, { pageService: pageService }))));
 }
 
-const legacyRenderer = ({ element, container, callback }) => hydrate(element, container, callback);
-
-const strictRenderer = (params) => {
-    const element = createElement(StrictMode, null, params.element);
-    return legacyRenderer({ ...params, element });
-};
-
-const WARNING_TEXT = '\n--->\n-->\n->\nInstall experemental version of React and ReactDOM for blocking and concurrent modes!\n->\n-->\n--->';
 const ExecuteRenderCallback = ({ children, callback }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(callback, []);
+    useIsomorphicLayoutEffect(callback, []);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return children;
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const rendererFactory = (createRoot) => ({ element, container, callback, log }) => {
-    if (process.env.NODE_ENV === 'development' && !createRoot) {
-        log.error(WARNING_TEXT);
+const renderer = ({ element, container, callback }) => {
+    if (process.env.__TRAMVAI_CONCURRENT_FEATURES) {
+        const wrappedElement = createElement(ExecuteRenderCallback, { callback }, element);
+        // eslint-disable-next-line import/no-unresolved, import/extensions
+        const { hydrateRoot } = require('react-dom/client');
+        return hydrateRoot(container, wrappedElement);
     }
-    const wrappedElement = createElement(ExecuteRenderCallback, { callback }, element);
-    return createRoot(container, { hydrate: true }).render(wrappedElement);
+    const { hydrate } = require('react-dom');
+    return hydrate(element, container, callback);
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const blockingRenderer = rendererFactory(ReactDOM.createBlockingRoot);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const concurrentRenderer = rendererFactory(ReactDOM.createRoot);
 
-function rendering({ pageService, log, consumerContext, customRender, extendRender, di, mode, rendererCallback, }) {
-    let renderResult = renderReact({ pageService, di }, consumerContext);
-    if (extendRender) {
-        each((render) => {
-            renderResult = render(renderResult);
-        }, extendRender);
-    }
-    if (customRender) {
-        return customRender(renderResult);
-    }
-    const container = document.querySelector('.application');
-    const executeRendererCallbacks = (renderErr) => rendererCallback === null || rendererCallback === void 0 ? void 0 : rendererCallback.forEach((cb) => {
+function rendering({ pageService, log, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }) {
+    return new Promise((resolve, reject) => {
+        let renderResult = renderReact({ pageService, di }, consumerContext);
+        if (extendRender) {
+            each((render) => {
+                renderResult = render(renderResult);
+            }, extendRender);
+        }
+        if (customRender) {
+            return customRender(renderResult);
+        }
+        if (useStrictMode) {
+            renderResult = createElement(StrictMode, null, renderResult);
+        }
+        const container = document.querySelector('.application');
+        const executeRendererCallbacks = (renderErr) => rendererCallback === null || rendererCallback === void 0 ? void 0 : rendererCallback.forEach((cb) => {
+            try {
+                cb(renderErr);
+            }
+            catch (cbError) {
+                // eslint-disable-next-line no-console
+                console.error(cbError);
+            }
+        });
+        const callback = () => {
+            log.debug('App rendering');
+            document.querySelector('html').classList.remove('no-js');
+            executeRendererCallbacks();
+            resolve();
+        };
+        const params = { element: renderResult, container, callback, log };
         try {
-            cb(renderErr);
+            renderer(params);
         }
-        catch (cbError) {
-            // eslint-disable-next-line no-console
-            console.error(cbError);
+        catch (e) {
+            executeRendererCallbacks(e);
+            reject(e);
         }
     });
-    const callback = () => {
-        log.debug('App rendering');
-        document.querySelector('html').classList.remove('no-js');
-        executeRendererCallbacks();
-    };
-    const params = { element: renderResult, container, callback, log };
-    try {
-        switch (mode) {
-            case 'strict':
-                return strictRenderer(params);
-            case 'blocking':
-                return blockingRenderer(params);
-            case 'concurrent':
-                return concurrentRenderer(params);
-            case 'legacy':
-            default:
-                return legacyRenderer(params);
-        }
-    }
-    catch (e) {
-        executeRendererCallbacks(e);
-        throw e;
-    }
 }
 
 let LayoutModule = class LayoutModule {
@@ -193,12 +179,12 @@ const throwErrorInDev = (logger) => {
     }
 };
 let RenderModule = RenderModule_1 = class RenderModule {
-    static forRoot({ mode }) {
+    static forRoot({ mode, useStrictMode }) {
         const providers = [];
-        if (typeof mode === 'string') {
+        if (typeof mode === 'string' || typeof useStrictMode === 'boolean') {
             providers.push({
-                provide: RENDER_MODE,
-                useValue: mode,
+                provide: USE_REACT_STRICT_MODE,
+                useValue: useStrictMode !== null && useStrictMode !== void 0 ? useStrictMode : mode === 'strict',
             });
         }
         return {
@@ -247,7 +233,7 @@ RenderModule = RenderModule_1 = __decorate([
                 useFactory: (deps) => {
                     return function renderClientCommand() {
                         window.contextExternal = deps.consumerContext;
-                        return Promise.resolve(rendering(deps));
+                        return rendering(deps);
                     };
                 },
                 deps: {
@@ -258,10 +244,22 @@ RenderModule = RenderModule_1 = __decorate([
                     rendererCallback: { token: RENDERER_CALLBACK, optional: true },
                     consumerContext: CONTEXT_TOKEN,
                     di: DI_TOKEN,
-                    mode: RENDER_MODE,
+                    useStrictMode: USE_REACT_STRICT_MODE,
                 },
                 multi: true,
             }),
+            provide({
+                provide: USE_REACT_STRICT_MODE,
+                useFactory: ({ deprecatedMode }) => {
+                    if (deprecatedMode === 'strict') {
+                        return true;
+                    }
+                    return false;
+                },
+                deps: {
+                    deprecatedMode: RENDER_MODE,
+                },
+            }),
             provide({
                 provide: RENDER_MODE,
                 useValue: 'legacy',

package/lib/client/index.d.ts

@@ -1,12 +1,12 @@
-import type { EXTEND_RENDER, RenderMode, RENDERER_CALLBACK } from '@tramvai/tokens-render';
+import type { EXTEND_RENDER, RENDERER_CALLBACK, USE_REACT_STRICT_MODE } from '@tramvai/tokens-render';
 import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
-export declare function rendering({ pageService, log, consumerContext, customRender, extendRender, di, mode, rendererCallback, }: {
+export declare function rendering({ pageService, log, consumerContext, customRender, extendRender, di, useStrictMode, rendererCallback, }: {
     pageService: typeof PAGE_SERVICE_TOKEN;
     log: any;
     consumerContext: any;
     extendRender?: typeof EXTEND_RENDER;
     customRender?: any;
     di: any;
-    mode: RenderMode;
+    useStrictMode: typeof USE_REACT_STRICT_MODE;
     rendererCallback?: typeof RENDERER_CALLBACK;
-}): any;
+}): Promise<void>;

package/lib/client/renderer.d.ts

@@ -0,0 +1,3 @@
+import type { Renderer } from './types';
+declare const renderer: Renderer;
+export { renderer };

package/lib/shared/types.d.ts

@@ -1,5 +1,10 @@
 declare type RenderModuleConfig = {
     polyfillCondition?: string;
+    /**
+     * @deprecated tramvai will automatically detect React version, and use hydrateRoot API for 18+ version
+     * For Strict Mode, use options `useStrictMode`
+     */
     mode?: 'legacy' | 'strict' | 'blocking' | 'concurrent';
+    useStrictMode?: boolean;
 };
 export { RenderModuleConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "1.79.0",
+  "version": "1.81.0",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -24,27 +24,28 @@
     "@tinkoff/htmlpagebuilder": "0.4.22",
     "@tinkoff/layout-factory": "0.2.28",
     "@tinkoff/url": "0.7.37",
-    "@tinkoff/user-agent": "0.3.279",
-    "@tramvai/module-client-hints": "1.79.0",
-    "@tramvai/module-router": "1.79.0",
-    "@tramvai/react": "1.79.0",
+    "@tinkoff/user-agent": "0.3.281",
+    "@tramvai/module-client-hints": "1.81.0",
+    "@tramvai/module-router": "1.81.0",
+    "@tramvai/react": "1.81.0",
     "@tramvai/safe-strings": "0.4.3",
-    "@tramvai/tokens-render": "1.79.0",
-    "@tramvai/experiments": "1.79.0",
+    "@tramvai/tokens-render": "1.81.0",
+    "@tramvai/experiments": "1.81.0",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "0.7.39",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/cli": "1.79.0",
-    "@tramvai/core": "1.79.0",
-    "@tramvai/module-common": "1.79.0",
-    "@tramvai/state": "1.79.0",
-    "@tramvai/test-helpers": "1.79.0",
-    "@tramvai/tokens-common": "1.79.0",
-    "@tramvai/tokens-router": "1.79.0",
-    "@tramvai/tokens-server": "1.79.0",
+    "@tinkoff/react-hooks": "0.0.24",
+    "@tramvai/cli": "1.81.0",
+    "@tramvai/core": "1.81.0",
+    "@tramvai/module-common": "1.81.0",
+    "@tramvai/state": "1.81.0",
+    "@tramvai/test-helpers": "1.81.0",
+    "@tramvai/tokens-common": "1.81.0",
+    "@tramvai/tokens-router": "1.81.0",
+    "@tramvai/tokens-server": "1.81.0",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.8.0",

package/lib/client/concurrent.d.ts

@@ -1,4 +0,0 @@
-import type { Renderer } from './types';
-declare const blockingRenderer: Renderer;
-declare const concurrentRenderer: Renderer;
-export { blockingRenderer, concurrentRenderer };

package/lib/client/legacy.d.ts

@@ -1,3 +0,0 @@
-import type { Renderer } from './types';
-declare const legacyRenderer: Renderer;
-export { legacyRenderer };

package/lib/client/strict.d.ts

@@ -1,3 +0,0 @@
-import type { Renderer } from './types';
-declare const strictRenderer: Renderer;
-export { strictRenderer };