@tramvai/module-render 2.33.3 → 2.34.0

package/lib/server/ReactRenderServer.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractDependencyType } from '@tinkoff/dippy';
 import type { DI_TOKEN } from '@tramvai/core';
-import type { CONTEXT_TOKEN } from '@tramvai/module-common';
-import type { EXTEND_RENDER, CUSTOM_RENDER } from '@tramvai/tokens-render';
+import type { CONTEXT_TOKEN, LOGGER_TOKEN } from '@tramvai/module-common';
+import type { EXTEND_RENDER, CUSTOM_RENDER, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
 import type { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import type { ChunkExtractor } from '@loadable/server';
 export declare class ReactRenderServer {
@@ -10,12 +10,16 @@ export declare class ReactRenderServer {
     context: typeof CONTEXT_TOKEN;
     pageService: typeof PAGE_SERVICE_TOKEN;
     di: typeof DI_TOKEN;
-    constructor({ pageService, context, customRender, extendRender, di }: {
+    log: ReturnType<typeof LOGGER_TOKEN>;
+    renderMode: typeof REACT_SERVER_RENDER_MODE;
+    constructor({ pageService, context, customRender, extendRender, di, renderMode, logger }: {
         pageService: any;
         context: any;
         customRender: any;
         extendRender: any;
         di: any;
+        renderMode: any;
+        logger: any;
     });
     render(extractor: ChunkExtractor): Promise<string>;
 }

package/lib/server.es.js

@@ -5,7 +5,7 @@ import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core'
 import { COMBINE_REDUCERS, CREATE_CACHE_TOKEN, LOGGER_TOKEN, REQUEST_MANAGER_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
 import { ClientHintsModule, USER_AGENT_TOKEN } from '@tramvai/module-client-hints';
-import { ResourceType, ResourceSlot, DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, MODERN_SATISFIES_TOKEN, RENDER_FLOW_AFTER_TOKEN, CUSTOM_RENDER, EXTEND_RENDER } from '@tramvai/tokens-render';
+import { ResourceType, ResourceSlot, DEFAULT_LAYOUT_COMPONENT, LAYOUT_OPTIONS, DEFAULT_FOOTER_COMPONENT, DEFAULT_HEADER_COMPONENT, TRAMVAI_RENDER_MODE, RESOURCES_REGISTRY, RESOURCE_INLINE_OPTIONS, RENDER_SLOTS, POLYFILL_CONDITION, HTML_ATTRS, MODERN_SATISFIES_TOKEN, RENDER_FLOW_AFTER_TOKEN, CUSTOM_RENDER, EXTEND_RENDER, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
 export * from '@tramvai/tokens-render';
 import { createToken, Scope } from '@tinkoff/dippy';
 import { WEB_FASTIFY_APP_BEFORE_ERROR_TOKEN } from '@tramvai/tokens-server-private';
@@ -29,6 +29,7 @@ import * as path from 'path';
 import each from '@tinkoff/utils/array/each';
 import path$1 from '@tinkoff/utils/object/path';
 import { o as onload } from './server_inline.inline.es.js';
+import { Writable } from 'stream';
 import { jsx } from 'react/jsx-runtime';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
 import { useRoute, useUrl } from '@tramvai/module-router';
@@ -702,13 +703,35 @@ function renderReact({ pageService, di }, context) {
     return (jsx(Provider, { context: context, serverState: serverState, children: jsx(DIContext.Provider, { value: di, children: jsx(PageErrorBoundary, { pageService: pageService, children: jsx(Root, { pageService: pageService }) }) }) }));
 }
 
+const RENDER_TIMEOUT = 500;
+class HtmlWritable extends Writable {
+    constructor() {
+        super(...arguments);
+        this.chunks = [];
+        this.html = '';
+    }
+    getHtml() {
+        return this.html;
+    }
+    _write(chunk, encoding, callback) {
+        this.chunks.push(chunk);
+        callback();
+    }
+    _final(callback) {
+        this.html = Buffer.concat(this.chunks).toString();
+        callback();
+    }
+}
 class ReactRenderServer {
-    constructor({ pageService, context, customRender, extendRender, di }) {
+    // eslint-disable-next-line sort-class-members/sort-class-members
+    constructor({ pageService, context, customRender, extendRender, di, renderMode, logger }) {
         this.pageService = pageService;
         this.context = context;
         this.customRender = customRender;
         this.extendRender = extendRender;
         this.di = di;
+        this.renderMode = renderMode;
+        this.log = logger('module-render');
     }
     render(extractor) {
         var _a;
@@ -720,6 +743,46 @@ class ReactRenderServer {
         if (this.customRender) {
             return this.customRender(renderResult);
         }
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES && this.renderMode === 'streaming') {
+            return new Promise((resolve, reject) => {
+                const { renderToPipeableStream } = require('react-dom/server');
+                const htmlWritable = new HtmlWritable();
+                htmlWritable.on('finish', () => {
+                    resolve(htmlWritable.getHtml());
+                });
+                const start = Date.now();
+                const { log } = this;
+                log.info({
+                    event: 'streaming-render:start',
+                });
+                const { pipe, abort } = renderToPipeableStream(renderResult, {
+                    onAllReady() {
+                        log.info({
+                            event: 'streaming-render:complete',
+                            duration: Date.now() - start,
+                        });
+                        // here `write` will be called only once
+                        pipe(htmlWritable);
+                    },
+                    onError(error) {
+                        // error can be inside Suspense boundaries, this is not critical, continue rendering
+                        log.error({
+                            event: 'streaming-render:error',
+                            error,
+                        });
+                    },
+                    onShellError(error) {
+                        // always critical error, abort rendering
+                        reject(error);
+                    },
+                });
+                setTimeout(() => {
+                    abort();
+                    reject(new Error('React renderToPipeableStream timeout exceeded'));
+                }, RENDER_TIMEOUT);
+            });
+        }
+        const { renderToString } = require('react-dom/server');
         return Promise.resolve(renderToString(renderResult));
     }
 }
@@ -906,6 +969,8 @@ RenderModule = RenderModule_1 = __decorate([
                     customRender: { token: CUSTOM_RENDER, optional: true },
                     extendRender: { token: EXTEND_RENDER, optional: true },
                     di: DI_TOKEN,
+                    renderMode: { token: REACT_SERVER_RENDER_MODE, optional: true },
+                    logger: LOGGER_TOKEN,
                 },
             }),
             provide({

package/lib/server.js

@@ -32,6 +32,7 @@ var path = require('path');
 var each = require('@tinkoff/utils/array/each');
 var path$1 = require('@tinkoff/utils/object/path');
 var inline_inline = require('./server_inline.inline.js');
+var stream = require('stream');
 var jsxRuntime = require('react/jsx-runtime');
 var state = require('@tramvai/state');
 var moduleRouter = require('@tramvai/module-router');
@@ -738,13 +739,35 @@ function renderReact({ pageService, di }, context) {
     return (jsxRuntime.jsx(state.Provider, { context: context, serverState: serverState, children: jsxRuntime.jsx(react$1.DIContext.Provider, { value: di, children: jsxRuntime.jsx(PageErrorBoundary, { pageService: pageService, children: jsxRuntime.jsx(Root, { pageService: pageService }) }) }) }));
 }
 
+const RENDER_TIMEOUT = 500;
+class HtmlWritable extends stream.Writable {
+    constructor() {
+        super(...arguments);
+        this.chunks = [];
+        this.html = '';
+    }
+    getHtml() {
+        return this.html;
+    }
+    _write(chunk, encoding, callback) {
+        this.chunks.push(chunk);
+        callback();
+    }
+    _final(callback) {
+        this.html = Buffer.concat(this.chunks).toString();
+        callback();
+    }
+}
 class ReactRenderServer {
-    constructor({ pageService, context, customRender, extendRender, di }) {
+    // eslint-disable-next-line sort-class-members/sort-class-members
+    constructor({ pageService, context, customRender, extendRender, di, renderMode, logger }) {
         this.pageService = pageService;
         this.context = context;
         this.customRender = customRender;
         this.extendRender = extendRender;
         this.di = di;
+        this.renderMode = renderMode;
+        this.log = logger('module-render');
     }
     render(extractor) {
         var _a;
@@ -756,7 +779,47 @@ class ReactRenderServer {
         if (this.customRender) {
             return this.customRender(renderResult);
         }
-        return Promise.resolve(server$1.renderToString(renderResult));
+        if (process.env.__TRAMVAI_CONCURRENT_FEATURES && this.renderMode === 'streaming') {
+            return new Promise((resolve, reject) => {
+                const { renderToPipeableStream } = require('react-dom/server');
+                const htmlWritable = new HtmlWritable();
+                htmlWritable.on('finish', () => {
+                    resolve(htmlWritable.getHtml());
+                });
+                const start = Date.now();
+                const { log } = this;
+                log.info({
+                    event: 'streaming-render:start',
+                });
+                const { pipe, abort } = renderToPipeableStream(renderResult, {
+                    onAllReady() {
+                        log.info({
+                            event: 'streaming-render:complete',
+                            duration: Date.now() - start,
+                        });
+                        // here `write` will be called only once
+                        pipe(htmlWritable);
+                    },
+                    onError(error) {
+                        // error can be inside Suspense boundaries, this is not critical, continue rendering
+                        log.error({
+                            event: 'streaming-render:error',
+                            error,
+                        });
+                    },
+                    onShellError(error) {
+                        // always critical error, abort rendering
+                        reject(error);
+                    },
+                });
+                setTimeout(() => {
+                    abort();
+                    reject(new Error('React renderToPipeableStream timeout exceeded'));
+                }, RENDER_TIMEOUT);
+            });
+        }
+        const { renderToString } = require('react-dom/server');
+        return Promise.resolve(renderToString(renderResult));
     }
 }
 
@@ -942,6 +1005,8 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     customRender: { token: tokensRender.CUSTOM_RENDER, optional: true },
                     extendRender: { token: tokensRender.EXTEND_RENDER, optional: true },
                     di: core.DI_TOKEN,
+                    renderMode: { token: tokensRender.REACT_SERVER_RENDER_MODE, optional: true },
+                    logger: tokensCommon.LOGGER_TOKEN,
                 },
             }),
             core.provide({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.33.3",
+  "version": "2.34.0",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -26,13 +26,13 @@
     "@tinkoff/htmlpagebuilder": "0.5.5",
     "@tinkoff/layout-factory": "0.3.4",
     "@tinkoff/url": "0.8.4",
-    "@tinkoff/user-agent": "0.4.76",
-    "@tramvai/module-client-hints": "2.33.3",
-    "@tramvai/module-router": "2.33.3",
-    "@tramvai/react": "2.33.3",
+    "@tinkoff/user-agent": "0.4.77",
+    "@tramvai/module-client-hints": "2.34.0",
+    "@tramvai/module-router": "2.34.0",
+    "@tramvai/react": "2.34.0",
     "@tramvai/safe-strings": "0.5.5",
-    "@tramvai/tokens-render": "2.33.3",
-    "@tramvai/experiments": "2.33.3",
+    "@tramvai/tokens-render": "2.34.0",
+    "@tramvai/experiments": "2.34.0",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -40,14 +40,14 @@
     "@tinkoff/dippy": "0.8.8",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.1.4",
-    "@tramvai/cli": "2.33.3",
-    "@tramvai/core": "2.33.3",
-    "@tramvai/module-common": "2.33.3",
-    "@tramvai/state": "2.33.3",
-    "@tramvai/test-helpers": "2.33.3",
-    "@tramvai/tokens-common": "2.33.3",
-    "@tramvai/tokens-router": "2.33.3",
-    "@tramvai/tokens-server-private": "2.33.3",
+    "@tramvai/cli": "2.34.0",
+    "@tramvai/core": "2.34.0",
+    "@tramvai/module-common": "2.34.0",
+    "@tramvai/state": "2.34.0",
+    "@tramvai/test-helpers": "2.34.0",
+    "@tramvai/tokens-common": "2.34.0",
+    "@tramvai/tokens-router": "2.34.0",
+    "@tramvai/tokens-server-private": "2.34.0",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",