@tramvai/module-render 4.3.0 → 4.4.1

package/lib/server/PageBuilder.es.js

@@ -65,7 +65,7 @@ class PageBuilder {
         });
     }
     async fetchChunksInfo(extractor) {
-        const { modern } = this;
+        const { modern, renderMode } = this;
         const { bundle, pageComponent } = this.pageService.getConfig();
         this.resourcesRegistry.register(await bundleResource({
             bundle,
@@ -79,6 +79,7 @@ class PageBuilder {
             condition: this.polyfillCondition,
             modern,
             fetchWebpackStats: this.fetchWebpackStats,
+            renderMode,
         }));
     }
     preloadBlock() {

package/lib/server/PageBuilder.js

@@ -73,7 +73,7 @@ class PageBuilder {
         });
     }
     async fetchChunksInfo(extractor) {
-        const { modern } = this;
+        const { modern, renderMode } = this;
         const { bundle, pageComponent } = this.pageService.getConfig();
         this.resourcesRegistry.register(await bundleResource.bundleResource({
             bundle,
@@ -87,6 +87,7 @@ class PageBuilder {
             condition: this.polyfillCondition,
             modern,
             fetchWebpackStats: this.fetchWebpackStats,
+            renderMode,
         }));
     }
     preloadBlock() {

package/lib/server/blocks/polyfill.d.ts

@@ -1,7 +1,8 @@
-import type { PageResource, FETCH_WEBPACK_STATS_TOKEN } from '@tramvai/tokens-render';
-export declare const polyfillResources: ({ condition, modern, fetchWebpackStats, }: {
+import type { PageResource, FETCH_WEBPACK_STATS_TOKEN, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
+export declare const polyfillResources: ({ condition, modern, fetchWebpackStats, renderMode, }: {
     condition: string;
     modern: boolean;
     fetchWebpackStats: typeof FETCH_WEBPACK_STATS_TOKEN;
+    renderMode: typeof REACT_SERVER_RENDER_MODE;
 }) => Promise<PageResource[]>;
 //# sourceMappingURL=polyfill.d.ts.map

package/lib/server/blocks/polyfill.es.js

@@ -1,7 +1,7 @@
 import { ResourceType, ResourceSlot } from '@tramvai/tokens-render';
 import { flushFiles } from './utils/flushFiles.es.js';
 
-const polyfillResources = async ({ condition, modern, fetchWebpackStats, }) => {
+const polyfillResources = async ({ condition, modern, fetchWebpackStats, renderMode, }) => {
     const webpackStats = await fetchWebpackStats({ modern });
     const { publicPath } = webpackStats;
     // получает файл полифилла из stats.json\stats.modern.json.
@@ -17,6 +17,9 @@ const polyfillResources = async ({ condition, modern, fetchWebpackStats, }) => {
         result.push({
             type: ResourceType.inlineScript,
             slot: ResourceSlot.HEAD_POLYFILLS,
+            // all scripts are "async" for streaming, so we need to guarantee that polyfills will be loaded before.
+            // will hurt performance, because polufills will block page rendering
+            // todo: research solution to use "async" for polyfills and wait this script in the application entry point
             payload: `(function (){
   var con;
   try {
@@ -24,7 +27,7 @@ const polyfillResources = async ({ condition, modern, fetchWebpackStats, }) => {
   } catch (e) {
     con = true;
   }
-  if (con) { document.write('<script defer="defer" charset="utf-8" data-critical="true" crossorigin="anonymous" src="${href}"><\\/script>')}
+  if (con) { document.write('<script${renderMode === 'streaming' ? '' : ' defer="defer"'} charset="utf-8" data-critical="true" crossorigin="anonymous" src="${href}"><\\/script>')}
 })()`,
         });
     });

package/lib/server/blocks/polyfill.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tokensRender = require('@tramvai/tokens-render');
 var flushFiles = require('./utils/flushFiles.js');
 
-const polyfillResources = async ({ condition, modern, fetchWebpackStats, }) => {
+const polyfillResources = async ({ condition, modern, fetchWebpackStats, renderMode, }) => {
     const webpackStats = await fetchWebpackStats({ modern });
     const { publicPath } = webpackStats;
     // получает файл полифилла из stats.json\stats.modern.json.
@@ -21,6 +21,9 @@ const polyfillResources = async ({ condition, modern, fetchWebpackStats, }) => {
         result.push({
             type: tokensRender.ResourceType.inlineScript,
             slot: tokensRender.ResourceSlot.HEAD_POLYFILLS,
+            // all scripts are "async" for streaming, so we need to guarantee that polyfills will be loaded before.
+            // will hurt performance, because polufills will block page rendering
+            // todo: research solution to use "async" for polyfills and wait this script in the application entry point
             payload: `(function (){
   var con;
   try {
@@ -28,7 +31,7 @@ const polyfillResources = async ({ condition, modern, fetchWebpackStats, }) => {
   } catch (e) {
     con = true;
   }
-  if (con) { document.write('<script defer="defer" charset="utf-8" data-critical="true" crossorigin="anonymous" src="${href}"><\\/script>')}
+  if (con) { document.write('<script${renderMode === 'streaming' ? '' : ' defer="defer"'} charset="utf-8" data-critical="true" crossorigin="anonymous" src="${href}"><\\/script>')}
 })()`,
         });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "4.3.0",
+  "version": "4.4.1",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -26,13 +26,13 @@
     "@tinkoff/layout-factory": "0.5.1",
     "@tinkoff/errors": "0.5.1",
     "@tinkoff/url": "0.10.1",
-    "@tinkoff/user-agent": "0.6.10",
-    "@tramvai/module-client-hints": "4.3.0",
-    "@tramvai/module-router": "4.3.0",
-    "@tramvai/react": "4.3.0",
+    "@tinkoff/user-agent": "0.6.13",
+    "@tramvai/module-client-hints": "4.4.1",
+    "@tramvai/module-router": "4.4.1",
+    "@tramvai/react": "4.4.1",
     "@tramvai/safe-strings": "0.7.1",
-    "@tramvai/tokens-render": "4.3.0",
-    "@tramvai/experiments": "4.3.0",
+    "@tramvai/tokens-render": "4.4.1",
+    "@tramvai/experiments": "4.4.1",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -40,14 +40,14 @@
     "@tinkoff/dippy": "0.10.2",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.3.1",
-    "@tramvai/cli": "4.3.0",
-    "@tramvai/core": "4.3.0",
-    "@tramvai/module-common": "4.3.0",
-    "@tramvai/state": "4.3.0",
-    "@tramvai/test-helpers": "4.3.0",
-    "@tramvai/tokens-common": "4.3.0",
-    "@tramvai/tokens-router": "4.3.0",
-    "@tramvai/tokens-server-private": "4.3.0",
+    "@tramvai/cli": "4.4.1",
+    "@tramvai/core": "4.4.1",
+    "@tramvai/module-common": "4.4.1",
+    "@tramvai/state": "4.4.1",
+    "@tramvai/test-helpers": "4.4.1",
+    "@tramvai/tokens-common": "4.4.1",
+    "@tramvai/tokens-router": "4.4.1",
+    "@tramvai/tokens-server-private": "4.4.1",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",