@tramvai/module-child-app 3.4.1 → 3.4.5

package/lib/server/providers.es.js

@@ -1,8 +1,8 @@
 import { combineValidators, isUrl, endsWith } from '@tinkoff/env-validators';
-import { Scope } from '@tinkoff/dippy';
+import { Scope, optional } from '@tinkoff/dippy';
 import { provide, commandLineListTokens } from '@tramvai/core';
 import { ENV_USED_TOKEN, LOGGER_TOKEN, CREATE_CACHE_TOKEN, STORE_TOKEN } from '@tramvai/tokens-common';
-import { RESOURCES_REGISTRY, RENDER_SLOTS, ResourceType, ResourceSlot, EXTEND_RENDER } from '@tramvai/tokens-render';
+import { RESOURCES_REGISTRY, RENDER_SLOTS, ResourceType, ResourceSlot, REACT_SERVER_RENDER_MODE, EXTEND_RENDER } from '@tramvai/tokens-render';
 import { CHILD_APP_LOADER_TOKEN, CHILD_APP_STATE_MANAGER_TOKEN, CHILD_APP_DI_MANAGER_TOKEN, CHILD_APP_PRELOAD_MANAGER_TOKEN, CHILD_APP_COMMAND_LINE_RUNNER_TOKEN, CHILD_APP_RESOLUTION_CONFIG_MANAGER_TOKEN, CHILD_APP_RESOLVE_CONFIG_TOKEN, CHILD_APP_RENDER_MANAGER_TOKEN } from '@tramvai/tokens-child-app';
 import { safeStringify } from '@tramvai/safe-strings';
 import { ServerLoader } from './loader.es.js';
@@ -81,6 +81,7 @@ const serverProviders = [
             resolveFullConfig: CHILD_APP_RESOLVE_CONFIG_TOKEN,
             loader: CHILD_APP_LOADER_TOKEN,
             preloadManager: CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            renderMode: optional(REACT_SERVER_RENDER_MODE),
         },
     }),
     provide({

package/lib/server/providers.js

@@ -85,6 +85,7 @@ const serverProviders = [
             resolveFullConfig: tokensChildApp.CHILD_APP_RESOLVE_CONFIG_TOKEN,
             loader: tokensChildApp.CHILD_APP_LOADER_TOKEN,
             preloadManager: tokensChildApp.CHILD_APP_PRELOAD_MANAGER_TOKEN,
+            renderMode: dippy.optional(tokensRender.REACT_SERVER_RENDER_MODE),
         },
     }),
     core.provide({

package/lib/server/render-slots.d.ts

@@ -1,13 +1,14 @@
 import type { ExtractDependencyType } from '@tinkoff/dippy';
 import type { ChildAppDiManager, ChildAppLoader, ChildAppPreloadManager, CHILD_APP_RESOLVE_CONFIG_TOKEN } from '@tramvai/tokens-child-app';
 import type { LOGGER_TOKEN } from '@tramvai/tokens-common';
-import type { PageResource } from '@tramvai/tokens-render';
+import type { PageResource, REACT_SERVER_RENDER_MODE } from '@tramvai/tokens-render';
 import type { ServerLoader } from './loader';
-export declare const registerChildAppRenderSlots: ({ logger, diManager, resolveFullConfig, preloadManager, loader, }: {
+export declare const registerChildAppRenderSlots: ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, }: {
     logger: ExtractDependencyType<typeof LOGGER_TOKEN>;
     diManager: ChildAppDiManager;
     resolveFullConfig: ExtractDependencyType<typeof CHILD_APP_RESOLVE_CONFIG_TOKEN>;
     preloadManager: ChildAppPreloadManager;
     loader: ChildAppLoader | ServerLoader;
+    renderMode: typeof REACT_SERVER_RENDER_MODE | null;
 }) => PageResource[];
 //# sourceMappingURL=render-slots.d.ts.map

package/lib/server/render-slots.es.js

@@ -5,16 +5,26 @@ import { resolve } from '@tinkoff/url';
 import { RENDER_SLOTS, ResourceType, ResourceSlot } from '@tramvai/tokens-render';
 import { getSharedScope } from '../shared/webpack/moduleFederation.es.js';
 
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, }) => {
+const asyncScriptAttrs = {
+    defer: null,
+    async: 'async',
+};
+const deferScriptAttrs = {
+    defer: 'defer',
+    async: null,
+};
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, }) => {
     const log = logger('child-app:render:slots');
     const result = [];
+    // defer scripts is not suitable for React streaming, we need to ability to run them as early as possible
+    // https://github.com/reactwg/react-18/discussions/114
+    const scriptTypeAttr = renderMode === 'streaming' ? asyncScriptAttrs : deferScriptAttrs;
     const addChunk = (entry) => {
         if (!entry) {
             return;
         }
         const extension = extname(entry);
         switch (extension) {
-            // @todo async scripts for streaming
             case '.js':
                 result.push({
                     type: ResourceType.script,
@@ -22,6 +32,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                     payload: entry,
                     attrs: {
                         'data-critical': 'true',
+                        ...scriptTypeAttr,
                     },
                 });
                 break;

package/lib/server/render-slots.js

@@ -13,16 +13,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 
-const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, }) => {
+const asyncScriptAttrs = {
+    defer: null,
+    async: 'async',
+};
+const deferScriptAttrs = {
+    defer: 'defer',
+    async: null,
+};
+const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, preloadManager, loader, renderMode, }) => {
     const log = logger('child-app:render:slots');
     const result = [];
+    // defer scripts is not suitable for React streaming, we need to ability to run them as early as possible
+    // https://github.com/reactwg/react-18/discussions/114
+    const scriptTypeAttr = renderMode === 'streaming' ? asyncScriptAttrs : deferScriptAttrs;
     const addChunk = (entry) => {
         if (!entry) {
             return;
         }
         const extension = path.extname(entry);
         switch (extension) {
-            // @todo async scripts for streaming
             case '.js':
                 result.push({
                     type: tokensRender.ResourceType.script,
@@ -30,6 +40,7 @@ const registerChildAppRenderSlots = ({ logger, diManager, resolveFullConfig, pre
                     payload: entry,
                     attrs: {
                         'data-critical': 'true',
+                        ...scriptTypeAttr,
                     },
                 });
                 break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-child-app",
-  "version": "3.4.1",
+  "version": "3.4.5",
   "description": "Module for child apps",
   "browser": {
     "./lib/server.js": "./lib/browser.js",
@@ -31,21 +31,21 @@
     "@tinkoff/module-loader-client": "0.5.1",
     "@tinkoff/module-loader-server": "0.6.1",
     "@tinkoff/url": "0.9.1",
-    "@tramvai/child-app-core": "3.4.1",
+    "@tramvai/child-app-core": "3.4.5",
     "@tramvai/safe-strings": "0.6.1",
-    "@tramvai/tokens-child-app": "3.4.1"
+    "@tramvai/tokens-child-app": "3.4.5"
   },
   "devDependencies": {},
   "peerDependencies": {
     "@tinkoff/dippy": "0.9.1",
     "@tinkoff/router": "0.3.1",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/core": "3.4.1",
-    "@tramvai/state": "3.4.1",
-    "@tramvai/react": "3.4.1",
-    "@tramvai/tokens-common": "3.4.1",
-    "@tramvai/tokens-render": "3.4.1",
-    "@tramvai/tokens-router": "3.4.1",
+    "@tramvai/core": "3.4.5",
+    "@tramvai/state": "3.4.5",
+    "@tramvai/react": "3.4.5",
+    "@tramvai/tokens-common": "3.4.5",
+    "@tramvai/tokens-render": "3.4.5",
+    "@tramvai/tokens-router": "3.4.5",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "object-assign": "^4.1.1",