@tramvai/module-render 2.5.0 → 2.7.1

package/README.md

@@ -244,6 +244,14 @@ createBundle({
     myCustomLayout: CustomLayout,
   },
 });
+
+const route = {
+  name: 'main',
+  path: '/',
+  config: {
+    layoutComponent: 'myCustomLayout',
+  },
+};
 ```
 
 ##### Replace layoutDefault

package/lib/resourcesInliner/resourcesInliner.d.ts

@@ -6,8 +6,10 @@ export interface ResourcesInlinerType {
 }
 export declare class ResourcesInliner implements ResourcesInlinerType {
     private resourceInlineThreshold?;
+    private internalFilesCache;
     private resourcesRegistryCache;
     private log;
+    private runningRequests;
     private scheduleFileLoad;
     private scheduleFileSizeLoad;
     constructor({ resourcesRegistryCache, resourceInlineThreshold, logger }: {
@@ -15,6 +17,7 @@ export declare class ResourcesInliner implements ResourcesInlinerType {
         resourceInlineThreshold: any;
         logger: any;
     });
+    private getFilesCache;
     shouldAddResource(resource: PageResource): boolean;
     shouldInline(resource: PageResource): boolean;
     inlineResource(resource: PageResource): PageResource[];

package/lib/resourcesInliner/tokens.d.ts

@@ -9,8 +9,7 @@ export declare const RESOURCE_INLINER: import("@tinkoff/dippy/lib/createToken/cr
 export declare type ResourcesRegistryCache = {
     filesCache: Cache;
     sizeCache: Cache;
-    requestsCache: Cache;
-    disabledUrlsCache: any;
+    disabledUrlsCache: Cache;
 };
 /**
  * @description

package/lib/server.d.ts

@@ -1,7 +1,7 @@
 import type { RenderModuleConfig } from './shared/types';
 export * from './shared/pageErrorStore';
 export * from '@tramvai/tokens-render';
-export declare const DEFAULT_POLYFILL_CONDITION = "!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries";
+export declare const DEFAULT_POLYFILL_CONDITION = "!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries || !window.ResizeObserver";
 export declare class RenderModule {
     static forRoot({ polyfillCondition }: RenderModuleConfig): {
         mainModule: typeof RenderModule;

package/lib/server.es.js

@@ -2,7 +2,7 @@ import { __decorate } from 'tslib';
 import { PureComponent, useMemo, createElement } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Module, provide, commandLineListTokens, DI_TOKEN } from '@tramvai/core';
-import { CREATE_CACHE_TOKEN, LOGGER_TOKEN, REQUEST_MANAGER_TOKEN, RESPONSE_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/module-common';
+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, CUSTOM_RENDER, EXTEND_RENDER } from '@tramvai/tokens-render';
@@ -33,7 +33,6 @@ import { jsx } from 'react/jsx-runtime';
 import { createEvent, createReducer, useStore, Provider } from '@tramvai/state';
 import { useRoute, useUrl } from '@tramvai/module-router';
 import { composeLayoutOptions, createLayout } from '@tinkoff/layout-factory';
-import { COMBINE_REDUCERS } from '@tramvai/tokens-common';
 
 const thirtySeconds = 1000 * 30;
 const getFileContentLength = async (url) => {
@@ -75,6 +74,11 @@ const processFile = (resource, file) => {
     return file;
 };
 
+const INTERNAL_CACHE_SIZE = 50;
+const ASSETS_PREFIX = process.env.NODE_ENV === 'development' &&
+    (process.env.ASSETS_PREFIX === 'static' || !process.env.ASSETS_PREFIX)
+    ? `http://localhost:${process.env.PORT_STATIC}/dist/`
+    : process.env.ASSETS_PREFIX;
 const getInlineType = (type) => {
     switch (type) {
         case ResourceType.style:
@@ -95,51 +99,53 @@ const getResourceUrl = (resource) => {
 };
 class ResourcesInliner {
     constructor({ resourcesRegistryCache, resourceInlineThreshold, logger }) {
-        this.scheduleFileLoad = (resource, resourceInlineThreshold) => {
+        this.internalFilesCache = new Map();
+        this.runningRequests = new Set();
+        this.scheduleFileLoad = async (resource, resourceInlineThreshold) => {
             const url = getResourceUrl(resource);
             const requestKey = `file${url}`;
-            const urlIsDisabled = this.resourcesRegistryCache.disabledUrlsCache.get(url);
-            const requestIsInProgress = this.resourcesRegistryCache.requestsCache.get(requestKey);
-            if (!requestIsInProgress && !urlIsDisabled) {
-                const result = this.resourcesRegistryCache.filesCache.get(url);
-                if (result) {
-                    return result;
-                }
-                const getFilePromise = getFile(url)
-                    .then((file) => {
+            const filesCache = this.getFilesCache(url);
+            const result = filesCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(url);
+                try {
+                    const file = await getFile(url);
                     if (file === undefined) {
                         this.resourcesRegistryCache.disabledUrlsCache.set(url, true);
                         return;
                     }
                     const size = file.length;
                     if (size < resourceInlineThreshold) {
-                        this.resourcesRegistryCache.filesCache.set(url, processFile(resource, file));
+                        filesCache.set(url, processFile(resource, file));
                     }
                     this.resourcesRegistryCache.sizeCache.set(url, size);
-                })
-                    .catch((error) => {
+                }
+                catch (error) {
                     this.log.warn({
                         event: 'file-load-failed',
                         url,
                         error,
                     });
-                })
-                    .finally(() => {
-                    this.resourcesRegistryCache.requestsCache.set(requestKey, undefined);
-                });
-                this.resourcesRegistryCache.requestsCache.set(requestKey, getFilePromise);
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
             }
         };
-        this.scheduleFileSizeLoad = (resource, resourceInlineThreshold) => {
+        this.scheduleFileSizeLoad = async (resource, resourceInlineThreshold) => {
             const url = getResourceUrl(resource);
             const requestKey = `size${url}`;
-            if (!this.resourcesRegistryCache.requestsCache.has(requestKey)) {
-                const result = this.resourcesRegistryCache.sizeCache.get(url);
-                if (result) {
-                    return result;
-                }
-                const getFileSizePromise = getFileContentLength(url)
-                    .then((contentLength) => {
+            const result = this.resourcesRegistryCache.sizeCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(requestKey);
+                try {
+                    const contentLength = await getFileContentLength(url);
                     const size = isUndefined(contentLength) ? 0 : +contentLength;
                     if (size) {
                         this.resourcesRegistryCache.sizeCache.set(url, size);
@@ -147,41 +153,48 @@ class ResourcesInliner {
                     if (size < resourceInlineThreshold) {
                         this.scheduleFileLoad(resource, resourceInlineThreshold);
                     }
-                })
-                    .catch((error) => {
+                }
+                catch (error) {
                     this.log.warn({
                         event: 'file-content-length-load-failed',
                         url,
                         error,
                     });
-                })
-                    .finally(() => {
-                    this.resourcesRegistryCache.requestsCache.set(requestKey, undefined);
-                });
-                this.resourcesRegistryCache.requestsCache.set(requestKey, getFileSizePromise);
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
             }
         };
         this.resourcesRegistryCache = resourcesRegistryCache;
         this.resourceInlineThreshold = resourceInlineThreshold;
         this.log = logger('resources-inliner');
     }
-    // Метод проверки, стоит ли добавлять preload-ресурс
+    getFilesCache(url) {
+        if (url.startsWith(ASSETS_PREFIX)) {
+            // internal resources are resources generated by the current app itself
+            // these kind of resources are pretty static and won't be changed while app is running
+            // so we can cache it with bare Map and do not care about how to cleanup cache from outdated entries
+            return this.internalFilesCache;
+        }
+        return this.resourcesRegistryCache.filesCache;
+    }
+    // check that resource's preload-link should be added to render
     shouldAddResource(resource) {
         if (resource.type !== ResourceType.preloadLink) {
-            // Мы фильтруем только preloadLink, если это ресурс другого типа он должен
-            // попасть в итоговую выборку.
+            // only checking preload-links
             return true;
         }
         const url = getResourceUrl(resource);
         if (isUndefined(url)) {
-            // Если у ресурса нет URL'а, в кеше этого файла точно нет
+            // if url is undefined that file is not in cache
             return true;
         }
-        // Если файл лежит в кеше, значит он прошёл все проверки и будет инлайниться =>
-        // нам не нужно добавлять для него preload.
-        return !this.resourcesRegistryCache.filesCache.has(url);
+        // if file is residing in cache that means it will be inlined in page render
+        // therefore no need to have preload-link for the inlined resource
+        return !this.getFilesCache(url).has(url);
     }
-    // Метод проверки, должен ли быть заинлайнен в HTML-страницу ресурс.
+    // method for check is passed resource should be inlined in HTML-page
     shouldInline(resource) {
         var _a;
         if (!(((_a = this.resourceInlineThreshold) === null || _a === void 0 ? void 0 : _a.types) || []).includes(resource.type)) {
@@ -192,7 +205,16 @@ class ResourcesInliner {
             return false;
         }
         const url = getResourceUrl(resource);
-        if (isUndefined(url)) {
+        const filesCache = this.getFilesCache(url);
+        if (isUndefined(url) || this.resourcesRegistryCache.disabledUrlsCache.has(url)) {
+            return false;
+        }
+        if (filesCache.has(url)) {
+            return true;
+        }
+        if (filesCache === this.internalFilesCache &&
+            this.internalFilesCache.size >= INTERNAL_CACHE_SIZE) {
+            // if we've exceeded limits for the internal resources cache ignore any new entries
             return false;
         }
         if (!this.resourcesRegistryCache.sizeCache.has(url)) {
@@ -203,25 +225,22 @@ class ResourcesInliner {
         if (size > resourceInlineThreshold) {
             return false;
         }
-        if (!this.resourcesRegistryCache.filesCache.has(url)) {
-            this.scheduleFileLoad(resource, resourceInlineThreshold);
-            return false;
-        }
-        return true;
+        this.scheduleFileLoad(resource, resourceInlineThreshold);
+        return false;
     }
     inlineResource(resource) {
         const url = getResourceUrl(resource);
         if (isUndefined(url)) {
-            // В теории, такого быть не должно, но добавим проверку на всякий случай
+            // usually, it should not happen but anyway check it for safety
             return [resource];
         }
-        const text = this.resourcesRegistryCache.filesCache.get(url);
+        const text = this.getFilesCache(url).get(url);
         if (isEmpty(text)) {
             return [resource];
         }
         const result = [];
         if (process.env.NODE_ENV === 'development') {
-            // Добавляем html комментарии для упрощения отладки инлайнинга в dev режиме
+            // html comment for debugging inlining in dev mode
             result.push({
                 slot: resource.slot,
                 type: ResourceType.asIs,
@@ -234,11 +253,10 @@ class ResourcesInliner {
             payload: text,
         });
         if (resource.type === ResourceType.style) {
-            // Если не добавить data-href, extract-css-chunks-webpack-plugin
-            // добавит (https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/src/index.js#L346)
-            // в head ссылку на файл и инлайнинг будет бесполезен, т.к. браузер всё равно пойдёт скачивать этот файл.
-            // При этом в случае css-файлов он ищет тэг link, а при инлайнинге мы вставляем style => мы не можем
-            // использовать тэг выше, а приходится генерировать новый.
+            // If we don't add data-href then extract-css-chunks-webpack-plugin
+            // will add link to resources to the html head (https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/src/index.js#L346)
+            // wherein link in case of css files plugin will look for a link tag, but we add a style tag
+            // so we can't use tag from above and have to generate new one
             result.push({
                 slot: resource.slot,
                 type: ResourceType.style,
@@ -736,7 +754,8 @@ const providers = [
 ];
 
 var RenderModule_1;
-const DEFAULT_POLYFILL_CONDITION = '!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries';
+const REQUEST_TTL = 5 * 60 * 1000;
+const DEFAULT_POLYFILL_CONDITION = '!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries || !window.ResizeObserver';
 let RenderModule = RenderModule_1 = class RenderModule {
     static forRoot({ polyfillCondition }) {
         const providers = [];
@@ -768,12 +787,10 @@ RenderModule = RenderModule_1 = __decorate([
                 provide: RESOURCES_REGISTRY_CACHE,
                 scope: Scope.SINGLETON,
                 useFactory: ({ createCache }) => {
-                    const thirtyMinutes = 1000 * 60 * 30;
                     return {
-                        filesCache: createCache('memory', { max: 50, ttl: thirtyMinutes }),
-                        sizeCache: createCache('memory', { max: 100, ttl: thirtyMinutes }),
-                        requestsCache: createCache('memory', { max: 150, ttl: 1000 * 60 * 5 }),
-                        disabledUrlsCache: createCache('memory', { max: 150, ttl: 1000 * 60 * 5 }),
+                        filesCache: createCache('memory', { max: 50 }),
+                        sizeCache: createCache('memory', { max: 100 }),
+                        disabledUrlsCache: createCache('memory', { max: 150, ttl: REQUEST_TTL }),
                     };
                 },
                 deps: {
@@ -782,6 +799,7 @@ RenderModule = RenderModule_1 = __decorate([
             }),
             provide({
                 provide: RESOURCE_INLINER,
+                scope: Scope.SINGLETON,
                 useClass: ResourcesInliner,
                 deps: {
                     resourcesRegistryCache: RESOURCES_REGISTRY_CACHE,
@@ -890,7 +908,7 @@ RenderModule = RenderModule_1 = __decorate([
                 useValue: DEFAULT_POLYFILL_CONDITION,
             }),
             provide({
-                // Включаем инлайнинг CSS-файлов размером до 40кб (до gzip) по умолчанию.
+                // by default, enable inlining for css files with size below 40kb before gzip
                 provide: RESOURCE_INLINE_OPTIONS,
                 useValue: {
                     threshold: 40960,

package/lib/server.js

@@ -6,7 +6,7 @@ var tslib = require('tslib');
 var react = require('react');
 var server$1 = require('react-dom/server');
 var core = require('@tramvai/core');
-var moduleCommon = require('@tramvai/module-common');
+var tokensCommon = require('@tramvai/tokens-common');
 var tokensRouter = require('@tramvai/tokens-router');
 var moduleClientHints = require('@tramvai/module-client-hints');
 var tokensRender = require('@tramvai/tokens-render');
@@ -36,7 +36,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var state = require('@tramvai/state');
 var moduleRouter = require('@tramvai/module-router');
 var layoutFactory = require('@tinkoff/layout-factory');
-var tokensCommon = require('@tramvai/tokens-common');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -111,6 +110,11 @@ const processFile = (resource, file) => {
     return file;
 };
 
+const INTERNAL_CACHE_SIZE = 50;
+const ASSETS_PREFIX = process.env.NODE_ENV === 'development' &&
+    (process.env.ASSETS_PREFIX === 'static' || !process.env.ASSETS_PREFIX)
+    ? `http://localhost:${process.env.PORT_STATIC}/dist/`
+    : process.env.ASSETS_PREFIX;
 const getInlineType = (type) => {
     switch (type) {
         case tokensRender.ResourceType.style:
@@ -131,51 +135,53 @@ const getResourceUrl = (resource) => {
 };
 class ResourcesInliner {
     constructor({ resourcesRegistryCache, resourceInlineThreshold, logger }) {
-        this.scheduleFileLoad = (resource, resourceInlineThreshold) => {
+        this.internalFilesCache = new Map();
+        this.runningRequests = new Set();
+        this.scheduleFileLoad = async (resource, resourceInlineThreshold) => {
             const url = getResourceUrl(resource);
             const requestKey = `file${url}`;
-            const urlIsDisabled = this.resourcesRegistryCache.disabledUrlsCache.get(url);
-            const requestIsInProgress = this.resourcesRegistryCache.requestsCache.get(requestKey);
-            if (!requestIsInProgress && !urlIsDisabled) {
-                const result = this.resourcesRegistryCache.filesCache.get(url);
-                if (result) {
-                    return result;
-                }
-                const getFilePromise = getFile(url)
-                    .then((file) => {
+            const filesCache = this.getFilesCache(url);
+            const result = filesCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(url);
+                try {
+                    const file = await getFile(url);
                     if (file === undefined) {
                         this.resourcesRegistryCache.disabledUrlsCache.set(url, true);
                         return;
                     }
                     const size = file.length;
                     if (size < resourceInlineThreshold) {
-                        this.resourcesRegistryCache.filesCache.set(url, processFile(resource, file));
+                        filesCache.set(url, processFile(resource, file));
                     }
                     this.resourcesRegistryCache.sizeCache.set(url, size);
-                })
-                    .catch((error) => {
+                }
+                catch (error) {
                     this.log.warn({
                         event: 'file-load-failed',
                         url,
                         error,
                     });
-                })
-                    .finally(() => {
-                    this.resourcesRegistryCache.requestsCache.set(requestKey, undefined);
-                });
-                this.resourcesRegistryCache.requestsCache.set(requestKey, getFilePromise);
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
             }
         };
-        this.scheduleFileSizeLoad = (resource, resourceInlineThreshold) => {
+        this.scheduleFileSizeLoad = async (resource, resourceInlineThreshold) => {
             const url = getResourceUrl(resource);
             const requestKey = `size${url}`;
-            if (!this.resourcesRegistryCache.requestsCache.has(requestKey)) {
-                const result = this.resourcesRegistryCache.sizeCache.get(url);
-                if (result) {
-                    return result;
-                }
-                const getFileSizePromise = getFileContentLength(url)
-                    .then((contentLength) => {
+            const result = this.resourcesRegistryCache.sizeCache.get(url);
+            if (result) {
+                return result;
+            }
+            if (!this.runningRequests.has(requestKey)) {
+                this.runningRequests.add(requestKey);
+                try {
+                    const contentLength = await getFileContentLength(url);
                     const size = isUndefined__default["default"](contentLength) ? 0 : +contentLength;
                     if (size) {
                         this.resourcesRegistryCache.sizeCache.set(url, size);
@@ -183,41 +189,48 @@ class ResourcesInliner {
                     if (size < resourceInlineThreshold) {
                         this.scheduleFileLoad(resource, resourceInlineThreshold);
                     }
-                })
-                    .catch((error) => {
+                }
+                catch (error) {
                     this.log.warn({
                         event: 'file-content-length-load-failed',
                         url,
                         error,
                     });
-                })
-                    .finally(() => {
-                    this.resourcesRegistryCache.requestsCache.set(requestKey, undefined);
-                });
-                this.resourcesRegistryCache.requestsCache.set(requestKey, getFileSizePromise);
+                }
+                finally {
+                    this.runningRequests.delete(requestKey);
+                }
             }
         };
         this.resourcesRegistryCache = resourcesRegistryCache;
         this.resourceInlineThreshold = resourceInlineThreshold;
         this.log = logger('resources-inliner');
     }
-    // Метод проверки, стоит ли добавлять preload-ресурс
+    getFilesCache(url) {
+        if (url.startsWith(ASSETS_PREFIX)) {
+            // internal resources are resources generated by the current app itself
+            // these kind of resources are pretty static and won't be changed while app is running
+            // so we can cache it with bare Map and do not care about how to cleanup cache from outdated entries
+            return this.internalFilesCache;
+        }
+        return this.resourcesRegistryCache.filesCache;
+    }
+    // check that resource's preload-link should be added to render
     shouldAddResource(resource) {
         if (resource.type !== tokensRender.ResourceType.preloadLink) {
-            // Мы фильтруем только preloadLink, если это ресурс другого типа он должен
-            // попасть в итоговую выборку.
+            // only checking preload-links
             return true;
         }
         const url = getResourceUrl(resource);
         if (isUndefined__default["default"](url)) {
-            // Если у ресурса нет URL'а, в кеше этого файла точно нет
+            // if url is undefined that file is not in cache
             return true;
         }
-        // Если файл лежит в кеше, значит он прошёл все проверки и будет инлайниться =>
-        // нам не нужно добавлять для него preload.
-        return !this.resourcesRegistryCache.filesCache.has(url);
+        // if file is residing in cache that means it will be inlined in page render
+        // therefore no need to have preload-link for the inlined resource
+        return !this.getFilesCache(url).has(url);
     }
-    // Метод проверки, должен ли быть заинлайнен в HTML-страницу ресурс.
+    // method for check is passed resource should be inlined in HTML-page
     shouldInline(resource) {
         var _a;
         if (!(((_a = this.resourceInlineThreshold) === null || _a === void 0 ? void 0 : _a.types) || []).includes(resource.type)) {
@@ -228,7 +241,16 @@ class ResourcesInliner {
             return false;
         }
         const url = getResourceUrl(resource);
-        if (isUndefined__default["default"](url)) {
+        const filesCache = this.getFilesCache(url);
+        if (isUndefined__default["default"](url) || this.resourcesRegistryCache.disabledUrlsCache.has(url)) {
+            return false;
+        }
+        if (filesCache.has(url)) {
+            return true;
+        }
+        if (filesCache === this.internalFilesCache &&
+            this.internalFilesCache.size >= INTERNAL_CACHE_SIZE) {
+            // if we've exceeded limits for the internal resources cache ignore any new entries
             return false;
         }
         if (!this.resourcesRegistryCache.sizeCache.has(url)) {
@@ -239,25 +261,22 @@ class ResourcesInliner {
         if (size > resourceInlineThreshold) {
             return false;
         }
-        if (!this.resourcesRegistryCache.filesCache.has(url)) {
-            this.scheduleFileLoad(resource, resourceInlineThreshold);
-            return false;
-        }
-        return true;
+        this.scheduleFileLoad(resource, resourceInlineThreshold);
+        return false;
     }
     inlineResource(resource) {
         const url = getResourceUrl(resource);
         if (isUndefined__default["default"](url)) {
-            // В теории, такого быть не должно, но добавим проверку на всякий случай
+            // usually, it should not happen but anyway check it for safety
             return [resource];
         }
-        const text = this.resourcesRegistryCache.filesCache.get(url);
+        const text = this.getFilesCache(url).get(url);
         if (isEmpty__default["default"](text)) {
             return [resource];
         }
         const result = [];
         if (process.env.NODE_ENV === 'development') {
-            // Добавляем html комментарии для упрощения отладки инлайнинга в dev режиме
+            // html comment for debugging inlining in dev mode
             result.push({
                 slot: resource.slot,
                 type: tokensRender.ResourceType.asIs,
@@ -270,11 +289,10 @@ class ResourcesInliner {
             payload: text,
         });
         if (resource.type === tokensRender.ResourceType.style) {
-            // Если не добавить data-href, extract-css-chunks-webpack-plugin
-            // добавит (https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/src/index.js#L346)
-            // в head ссылку на файл и инлайнинг будет бесполезен, т.к. браузер всё равно пойдёт скачивать этот файл.
-            // При этом в случае css-файлов он ищет тэг link, а при инлайнинге мы вставляем style => мы не можем
-            // использовать тэг выше, а приходится генерировать новый.
+            // If we don't add data-href then extract-css-chunks-webpack-plugin
+            // will add link to resources to the html head (https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/blob/master/src/index.js#L346)
+            // wherein link in case of css files plugin will look for a link tag, but we add a style tag
+            // so we can't use tag from above and have to generate new one
             result.push({
                 slot: resource.slot,
                 type: tokensRender.ResourceType.style,
@@ -772,7 +790,8 @@ const providers = [
 ];
 
 var RenderModule_1;
-const DEFAULT_POLYFILL_CONDITION = '!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries';
+const REQUEST_TTL = 5 * 60 * 1000;
+const DEFAULT_POLYFILL_CONDITION = '!window.Promise.prototype.finally || !window.URL || !window.URLSearchParams || !window.AbortController || !window.IntersectionObserver || !Object.fromEntries || !window.ResizeObserver';
 exports.RenderModule = RenderModule_1 = class RenderModule {
     static forRoot({ polyfillCondition }) {
         const providers = [];
@@ -804,25 +823,24 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                 provide: RESOURCES_REGISTRY_CACHE,
                 scope: dippy.Scope.SINGLETON,
                 useFactory: ({ createCache }) => {
-                    const thirtyMinutes = 1000 * 60 * 30;
                     return {
-                        filesCache: createCache('memory', { max: 50, ttl: thirtyMinutes }),
-                        sizeCache: createCache('memory', { max: 100, ttl: thirtyMinutes }),
-                        requestsCache: createCache('memory', { max: 150, ttl: 1000 * 60 * 5 }),
-                        disabledUrlsCache: createCache('memory', { max: 150, ttl: 1000 * 60 * 5 }),
+                        filesCache: createCache('memory', { max: 50 }),
+                        sizeCache: createCache('memory', { max: 100 }),
+                        disabledUrlsCache: createCache('memory', { max: 150, ttl: REQUEST_TTL }),
                     };
                 },
                 deps: {
-                    createCache: moduleCommon.CREATE_CACHE_TOKEN,
+                    createCache: tokensCommon.CREATE_CACHE_TOKEN,
                 },
             }),
             core.provide({
                 provide: RESOURCE_INLINER,
+                scope: dippy.Scope.SINGLETON,
                 useClass: ResourcesInliner,
                 deps: {
                     resourcesRegistryCache: RESOURCES_REGISTRY_CACHE,
                     resourceInlineThreshold: { token: tokensRender.RESOURCE_INLINE_OPTIONS, optional: true },
-                    logger: moduleCommon.LOGGER_TOKEN,
+                    logger: tokensCommon.LOGGER_TOKEN,
                 },
             }),
             core.provide({
@@ -859,11 +877,11 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     };
                 },
                 deps: {
-                    logger: moduleCommon.LOGGER_TOKEN,
-                    requestManager: moduleCommon.REQUEST_MANAGER_TOKEN,
-                    responseManager: moduleCommon.RESPONSE_MANAGER_TOKEN,
+                    logger: tokensCommon.LOGGER_TOKEN,
+                    requestManager: tokensCommon.REQUEST_MANAGER_TOKEN,
+                    responseManager: tokensCommon.RESPONSE_MANAGER_TOKEN,
                     htmlBuilder: 'htmlBuilder',
-                    context: moduleCommon.CONTEXT_TOKEN,
+                    context: tokensCommon.CONTEXT_TOKEN,
                 },
                 multi: true,
             }),
@@ -874,7 +892,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     reactRender: 'reactRender',
                     pageService: tokensRouter.PAGE_SERVICE_TOKEN,
                     resourcesRegistry: tokensRender.RESOURCES_REGISTRY,
-                    context: moduleCommon.CONTEXT_TOKEN,
+                    context: tokensCommon.CONTEXT_TOKEN,
                     htmlPageSchema: 'htmlPageSchema',
                     renderSlots: { token: tokensRender.RENDER_SLOTS, optional: true },
                     polyfillCondition: tokensRender.POLYFILL_CONDITION,
@@ -886,7 +904,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                 provide: 'reactRender',
                 useClass: ReactRenderServer,
                 deps: {
-                    context: moduleCommon.CONTEXT_TOKEN,
+                    context: tokensCommon.CONTEXT_TOKEN,
                     pageService: tokensRouter.PAGE_SERVICE_TOKEN,
                     customRender: { token: tokensRender.CUSTOM_RENDER, optional: true },
                     extendRender: { token: tokensRender.EXTEND_RENDER, optional: true },
@@ -926,7 +944,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                 useValue: DEFAULT_POLYFILL_CONDITION,
             }),
             core.provide({
-                // Включаем инлайнинг CSS-файлов размером до 40кб (до gzip) по умолчанию.
+                // by default, enable inlining for css files with size below 40kb before gzip
                 provide: tokensRender.RESOURCE_INLINE_OPTIONS,
                 useValue: {
                     threshold: 40960,
@@ -959,7 +977,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                 },
                 deps: {
                     RootErrorBoundary: { token: react$1.ROOT_ERROR_BOUNDARY_COMPONENT_TOKEN, optional: true },
-                    logger: moduleCommon.LOGGER_TOKEN,
+                    logger: tokensCommon.LOGGER_TOKEN,
                 },
             }),
             core.provide({
@@ -974,7 +992,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     return result;
                 },
                 deps: {
-                    requestManager: moduleCommon.REQUEST_MANAGER_TOKEN,
+                    requestManager: tokensCommon.REQUEST_MANAGER_TOKEN,
                     userAgent: moduleClientHints.USER_AGENT_TOKEN,
                     cache: 'modernSatisfiesLruCache',
                 },
@@ -986,7 +1004,7 @@ exports.RenderModule = RenderModule_1 = tslib.__decorate([
                     return createCache('memory', { max: 50 });
                 },
                 deps: {
-                    createCache: moduleCommon.CREATE_CACHE_TOKEN,
+                    createCache: tokensCommon.CREATE_CACHE_TOKEN,
                 },
             }),
         ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-render",
-  "version": "2.5.0",
+  "version": "2.7.1",
   "description": "",
   "browser": "lib/browser.js",
   "main": "lib/server.js",
@@ -24,13 +24,13 @@
     "@tinkoff/htmlpagebuilder": "0.4.24",
     "@tinkoff/layout-factory": "0.2.31",
     "@tinkoff/url": "0.7.39",
-    "@tinkoff/user-agent": "0.4.20",
-    "@tramvai/module-client-hints": "2.5.0",
-    "@tramvai/module-router": "2.5.0",
-    "@tramvai/react": "2.5.0",
+    "@tinkoff/user-agent": "0.4.24",
+    "@tramvai/module-client-hints": "2.7.1",
+    "@tramvai/module-router": "2.7.1",
+    "@tramvai/react": "2.7.1",
     "@tramvai/safe-strings": "0.4.5",
-    "@tramvai/tokens-render": "2.5.0",
-    "@tramvai/experiments": "2.5.0",
+    "@tramvai/tokens-render": "2.7.1",
+    "@tramvai/experiments": "2.7.1",
     "@types/loadable__server": "^5.12.6",
     "node-fetch": "^2.6.1"
   },
@@ -38,14 +38,14 @@
     "@tinkoff/dippy": "0.7.44",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/react-hooks": "0.0.27",
-    "@tramvai/cli": "2.5.0",
-    "@tramvai/core": "2.5.0",
-    "@tramvai/module-common": "2.5.0",
-    "@tramvai/state": "2.5.0",
-    "@tramvai/test-helpers": "2.5.0",
-    "@tramvai/tokens-common": "2.5.0",
-    "@tramvai/tokens-router": "2.5.0",
-    "@tramvai/tokens-server-private": "2.5.0",
+    "@tramvai/cli": "2.7.1",
+    "@tramvai/core": "2.7.1",
+    "@tramvai/module-common": "2.7.1",
+    "@tramvai/state": "2.7.1",
+    "@tramvai/test-helpers": "2.7.1",
+    "@tramvai/tokens-common": "2.7.1",
+    "@tramvai/tokens-router": "2.7.1",
+    "@tramvai/tokens-server-private": "2.7.1",
     "express": "^4.17.1",
     "prop-types": "^15.6.2",
     "react": ">=16.14.0",