@tramvai/module-client-hints 2.125.4 → 2.130.6

package/README.md

@@ -1,6 +1,6 @@
 # Client Hints
 
-Modules provides various parameters from the client device, e.g. type of the device, screen size, etc.
+Module provides various parameters from the client device, e.g. type of the device, screen size, etc.
 
 ## Installation
 
@@ -10,7 +10,7 @@ First, install `@tramvai/module-client-hints`
 npm i --save @tramvai/module-client-hints
 ```
 
-Then add `ClientHintsModule` to the modules list
+Then add `ClientHintsModule` to the modules list:
 
 ```tsx
 import { createApp } from '@tramvai/core';
@@ -21,25 +21,49 @@ createApp({
 });
 ```
 
+It will enable server side user agent parsing. If you are using [CSR fallback](03-features/010-rendering/05-csr.md#csr-fallback) feature, then you should use `ClientHintsCSRModule` from this package instead.
+
 ## Explanation
 
-### User agent details parsing
+### The problem with media on server and on client
+
+One of the SSR problem is render of the component which depends on current screen size, e.g. image carousel that should render specific number of images depending on screen width. By default, the exact screen size can be figured out only on client-side and we can't render such content on server identical to the client render. If this content is not important for the SEO we can use skeletons and spinners, but they are not suitable for every case.
+
+Client Hints modules provides the way to solve this problem in some way. It stores data about client devices in cookies and then use these cookies on server in next page loading.
+
+### Server-side rendering
 
-Parsing is implemented with library [@tinkoff/user-agent](../libs/user-agent.md) that may use either user-agent header or client-hints headers.
+Module will parse client hints/user agent only on the server by default. Parsing is implemented with library [@tinkoff/user-agent](../libs/user-agent.md) that may use either user-agent header or client-hints headers.
 
 If there is a `sec-ch-ua` header in request than user agent parsing will be based on [Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) headers. If there is no such header than old school parsing of user-agent string will be used.
 
 This logic implies next things worth to mention:
+
 - by default, only part of client-hints is sent by browser and you can get only partial info about user browser (no cpu spec, platform version or device model). Although, we send an additional header `accept-ch` with response from server to request this data from client - on first request from current browser there will be no such data in any case and they will appear only on subsequent requests
 - if you need to use additional info, you may specify the header [`accept-ch`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-CH) in your app with `REQUEST_MANAGER_TOKEN`
 - client-hints is mostly more performant way to parse browser info and this is way it used if it's possible
 - currently only chromium based browsers support client hints, so for other browsers and bots user-agent header will be used to gather browser info
 
-### The problem with media on server and on client
+### Client-side rendering
 
-One of the SSR problem is render of the component which depends of current screen size, e.g. image carousel that should render specific number of images depending of screen width. By default, the exact screen size can be figured out only on client-side and we can't render such content on server identical to the client render. If this content is not important for the SEO we can use skeletons and spinners, but they are not suitable for every case.
+If you want to parse user agent [on the client](03-features/010-rendering/05-csr.md#csr-fallback), then you should use `ClientHintsCSRModule`:
 
-Client Hints modules provides the way to solve this problem in some way. It stores data about client devices in cookies and then use this cookies on server in next page loading.
+```tsx
+import { createApp } from '@tramvai/core';
+import { ClientHintsCSRModule } from '@tramvai/module-client-hints';
+
+createApp({
+  modules: [ClientHintsCSRModule],
+  // Also, there will be no conflict with ClientHintsModule, but ClientHintsCSRModule must be registered after ClientHintsModule strictly.
+  // modules: [ClientHintsModule, ClientHintsCSRModule],
+});
+```
+
+:::warning
+
+Usage of `ClientHintsCSRModule` will increase bundle size for ~ 18kb raw and 8kb gzip
+
+:::
 
 ### How does media work
 
@@ -52,6 +76,7 @@ When user enters the app for the first time, information about **real** device s
 :::
 
 This module tries to determine type of the user device using user-agent string, and separates the devices into three groups:
+
 - `mobile`
 - `tablet`
 - `desktop`
@@ -104,7 +129,7 @@ const state = {
 
 #### Use ClientHints in component
 
-If some component if depend of screen size:
+If some component depends on the screen size:
 
 1. When user loads app for the first time **is not possible** to guarantee the same exact render on server and client
 2. On first app load you may show some skeleton to the user by checking `supposed: true` property

package/lib/browser/loadUserAgent.browser.js

@@ -0,0 +1,24 @@
+import { parse, parseClientHintsUserAgentData } from '@tinkoff/user-agent';
+
+const getFromUserAgentData = () => {
+    try {
+        // @ts-expect-error. We are handling error here, that's why we can force TS
+        const { brands, mobile, platform } = window.navigator.userAgentData;
+        // chrome User-Agent emulation doesn't sync with `navigator.userAgentData`,
+        // and `navigator.userAgentData` return incorrect object for Safari User-Agents instead of `undefined`
+        // example of this problem with Playwright tests - https://github.com/microsoft/playwright/issues/14361
+        if (brands && brands.length === 0 && platform === '') {
+            return null;
+        }
+        return parseClientHintsUserAgentData({ brands, mobile, platform });
+    }
+    catch (error) {
+        return null;
+    }
+};
+function loadUserAgent() {
+    const fromUserAgentData = getFromUserAgentData();
+    return fromUserAgentData !== null && fromUserAgentData !== void 0 ? fromUserAgentData : parse(navigator.userAgent);
+}
+
+export { loadUserAgent };

package/lib/browser/loadUserAgent.d.ts

@@ -0,0 +1,2 @@
+import type { UserAgent } from '@tinkoff/user-agent';
+export declare function loadUserAgent(): UserAgent;

package/lib/browser.d.ts

@@ -3,6 +3,8 @@ export * from './shared/stores/mediaCheckers';
 export * from './shared/stores/mediaSelectors';
 export * from './shared/stores/media';
 export * from './shared/stores/userAgent';
-export { ClientHintsChildAppModule } from './child-app/module';
-export declare class ClientHintsModule {
-}
+export { ClientHintsChildAppModule } from './modules/child-app/module';
+export { ClientHintsCSRModule } from './modules/csr/browser';
+export declare const ClientHintsModule: import("@tinkoff/dippy/lib/modules/module.h").ModuleClass & Partial<import("@tinkoff/dippy/lib/modules/module.h").ModuleSecretParameters> & {
+    [x: string]: (...args: any[]) => import("@tramvai/core").ModuleType<import("@tinkoff/dippy/lib/modules/module.h").ModuleClass>;
+};

package/lib/browser.js

@@ -1,44 +1,16 @@
-import { __decorate } from 'tslib';
-import { Module, provide, commandLineListTokens } from '@tramvai/core';
-import { STORE_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
-import { COOKIE_MANAGER_TOKEN } from '@tramvai/tokens-cookie';
-import { USER_AGENT_TOKEN } from './tokens.browser.js';
+import { declareModule } from '@tramvai/core';
+import { browserProviders } from './shared/providers.browser.browser.js';
 export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_TOKEN } from './tokens.browser.js';
-import { matchMediaCommand } from './browser/matchMedia.browser.js';
-import { providers } from './shared/providers.browser.js';
-import { UserAgentStore } from './shared/stores/userAgent.browser.js';
-export { UserAgentStore, setUserAgent } from './shared/stores/userAgent.browser.js';
 export { fromClientHints, isRetina, isSupposed } from './shared/stores/mediaCheckers.browser.js';
 export { useFromClientHints, useIsRetina, useIsSupposed, useMedia } from './shared/stores/mediaSelectors.browser.js';
 export { MediaStore, setMedia } from './shared/stores/media.browser.js';
-export { ClientHintsChildAppModule } from './child-app/module.browser.js';
+export { UserAgentStore, setUserAgent } from './shared/stores/userAgent.browser.js';
+export { ClientHintsChildAppModule } from './modules/child-app/module.browser.js';
+export { ClientHintsCSRModule } from './modules/csr/browser.browser.js';
 
-let ClientHintsModule = class ClientHintsModule {
-};
-ClientHintsModule = __decorate([
-    Module({
-        providers: [
-            ...providers,
-            provide({
-                provide: USER_AGENT_TOKEN,
-                useFactory: ({ store }) => {
-                    return store.getState(UserAgentStore);
-                },
-                deps: {
-                    store: STORE_TOKEN,
-                },
-            }),
-            provide({
-                provide: commandLineListTokens.clear,
-                multi: true,
-                useFactory: matchMediaCommand,
-                deps: {
-                    context: CONTEXT_TOKEN,
-                    cookieManager: COOKIE_MANAGER_TOKEN,
-                },
-            }),
-        ],
-    })
-], ClientHintsModule);
+const ClientHintsModule = /* @__PURE__ */ declareModule({
+    name: 'ClientHintsModule',
+    providers: browserProviders,
+});
 
 export { ClientHintsModule };

package/lib/{child-app → modules/child-app}/module.browser.js

@@ -1,8 +1,8 @@
 import { __decorate } from 'tslib';
 import { Module } from '@tramvai/core';
 import { CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN } from '@tramvai/tokens-child-app';
-import { MediaStore } from '../shared/stores/media.browser.js';
-import { UserAgentStore } from '../shared/stores/userAgent.browser.js';
+import { MediaStore } from '../../shared/stores/media.browser.js';
+import { UserAgentStore } from '../../shared/stores/userAgent.browser.js';
 
 let ClientHintsChildAppModule = class ClientHintsChildAppModule {
 };

package/lib/{child-app → modules/child-app}/module.es.js

@@ -1,8 +1,8 @@
 import { __decorate } from 'tslib';
 import { Module } from '@tramvai/core';
 import { CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN } from '@tramvai/tokens-child-app';
-import { MediaStore } from '../shared/stores/media.es.js';
-import { UserAgentStore } from '../shared/stores/userAgent.es.js';
+import { MediaStore } from '../../shared/stores/media.es.js';
+import { UserAgentStore } from '../../shared/stores/userAgent.es.js';
 
 let ClientHintsChildAppModule = class ClientHintsChildAppModule {
 };

package/lib/{child-app → modules/child-app}/module.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var core = require('@tramvai/core');
 var tokensChildApp = require('@tramvai/tokens-child-app');
-var media = require('../shared/stores/media.js');
-var userAgent = require('../shared/stores/userAgent.js');
+var media = require('../../shared/stores/media.js');
+var userAgent = require('../../shared/stores/userAgent.js');
 
 exports.ClientHintsChildAppModule = class ClientHintsChildAppModule {
 };

package/lib/modules/csr/browser.browser.js

@@ -0,0 +1,30 @@
+import { declareModule, provide } from '@tinkoff/dippy';
+import { STORE_TOKEN, ENV_MANAGER_TOKEN } from '@tramvai/tokens-common';
+import { browserProviders } from '../../shared/providers.browser.browser.js';
+import { setUserAgent, UserAgentStore } from '../../shared/stores/userAgent.browser.js';
+import { loadUserAgent } from '../../browser/loadUserAgent.browser.js';
+import { USER_AGENT_TOKEN } from '../../tokens.browser.js';
+
+const ClientHintsCSRModule = /* @__PURE__ */ declareModule({
+    name: 'ClientHintsCSRModule',
+    providers: [
+        ...browserProviders,
+        provide({
+            provide: USER_AGENT_TOKEN,
+            useFactory: ({ store, envManager }) => {
+                if (envManager.get('TRAMVAI_FORCE_CLIENT_SIDE_RENDERING') === 'true') {
+                    const userAgent = loadUserAgent();
+                    store.dispatch(setUserAgent(userAgent));
+                    return userAgent;
+                }
+                return store.getState(UserAgentStore);
+            },
+            deps: {
+                store: STORE_TOKEN,
+                envManager: ENV_MANAGER_TOKEN,
+            },
+        }),
+    ],
+});
+
+export { ClientHintsCSRModule };

package/lib/modules/csr/browser.d.ts

@@ -0,0 +1,3 @@
+export declare const ClientHintsCSRModule: import("@tinkoff/dippy/lib/modules/module.h").ModuleClass & Partial<import("@tinkoff/dippy/lib/modules/module.h").ModuleSecretParameters> & {
+    [x: string]: (...args: any[]) => import("@tinkoff/dippy").ModuleType<import("@tinkoff/dippy/lib/modules/module.h").ModuleClass>;
+};

package/lib/modules/csr/server.d.ts

@@ -0,0 +1,3 @@
+export declare const ClientHintsCSRModule: import("@tinkoff/dippy/lib/modules/module.h").ModuleClass & Partial<import("@tinkoff/dippy/lib/modules/module.h").ModuleSecretParameters> & {
+    [x: string]: (...args: any[]) => import("@tinkoff/dippy").ModuleType<import("@tinkoff/dippy/lib/modules/module.h").ModuleClass>;
+};

package/lib/modules/csr/server.es.js

@@ -0,0 +1,9 @@
+import { declareModule } from '@tinkoff/dippy';
+import { serverProviders } from '../../shared/providers.server.es.js';
+
+const ClientHintsCSRModule = /* @__PURE__ */ declareModule({
+    name: 'ClientHintsCSRModule',
+    providers: serverProviders,
+});
+
+export { ClientHintsCSRModule };

package/lib/modules/csr/server.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dippy = require('@tinkoff/dippy');
+var providers_server = require('../../shared/providers.server.js');
+
+const ClientHintsCSRModule = /* @__PURE__ */ dippy.declareModule({
+    name: 'ClientHintsCSRModule',
+    providers: providers_server.serverProviders,
+});
+
+exports.ClientHintsCSRModule = ClientHintsCSRModule;

package/lib/server/parseUserAgentWithCache.d.ts

@@ -0,0 +1,6 @@
+import type { Cache } from '@tramvai/tokens-common';
+import type { UserAgent } from '@tinkoff/user-agent';
+export declare const parseUserAgentWithCache: (cache: Cache, userAgent: string, metrics: {
+    hit: Function;
+    miss: Function;
+}) => UserAgent;

package/lib/server/parseUserAgentWithCache.es.js

@@ -0,0 +1,14 @@
+import { parse } from '@tinkoff/user-agent';
+
+const parseUserAgentWithCache = (cache, userAgent, metrics) => {
+    if (cache.has(userAgent)) {
+        metrics.hit();
+        return cache.get(userAgent);
+    }
+    metrics.miss();
+    const result = parse(userAgent);
+    cache.set(userAgent, result);
+    return result;
+};
+
+export { parseUserAgentWithCache };

package/lib/server/parseUserAgentWithCache.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var userAgent = require('@tinkoff/user-agent');
+
+const parseUserAgentWithCache = (cache, userAgent$1, metrics) => {
+    if (cache.has(userAgent$1)) {
+        metrics.hit();
+        return cache.get(userAgent$1);
+    }
+    metrics.miss();
+    const result = userAgent.parse(userAgent$1);
+    cache.set(userAgent$1, result);
+    return result;
+};
+
+exports.parseUserAgentWithCache = parseUserAgentWithCache;

package/lib/server/userAgent.d.ts

@@ -1,2 +1,2 @@
 import type { Provider } from '@tramvai/core';
-export declare const userAgentProviders: Provider[];
+export declare const serverUserAgentProviders: Provider[];

package/lib/server/userAgent.es.js

@@ -1,65 +1,113 @@
 import { provide, Scope, commandLineListTokens } from '@tramvai/core';
-import { CREATE_CACHE_TOKEN, STORE_TOKEN, RESPONSE_MANAGER_TOKEN, REQUEST_MANAGER_TOKEN } from '@tramvai/tokens-common';
-import { parseClientHints, parseUserAgentHeader } from '@tinkoff/user-agent';
+import { ENV_MANAGER_TOKEN, ENV_USED_TOKEN, CREATE_CACHE_TOKEN, RESPONSE_MANAGER_TOKEN, REQUEST_MANAGER_TOKEN, STORE_TOKEN } from '@tramvai/tokens-common';
+import { METRICS_MODULE_TOKEN } from '@tramvai/module-metrics';
+import { parseClientHints } from '@tinkoff/user-agent';
+import noop from '@tinkoff/utils/function/noop';
+import { isNumber } from '@tinkoff/env-validators';
 import { USER_AGENT_TOKEN, PARSER_CLIENT_HINTS_ENABLED } from '../tokens.es.js';
 import { setUserAgent } from '../shared/stores/userAgent.es.js';
+import { parseUserAgentWithCache } from './parseUserAgentWithCache.es.js';
 
-const userAgentProviders = [
+const serverUserAgentProviders = [
     provide({
-        provide: 'userAgentLruCache',
-        scope: Scope.SINGLETON,
-        useFactory: ({ createCache }) => {
-            return createCache('memory', { max: 50 });
-        },
+        provide: 'userAgentCacheType',
+        useFactory: ({ envManager }) => envManager.get('TRAMVAI_USER_AGENT_CACHE_TYPE'),
         deps: {
-            createCache: CREATE_CACHE_TOKEN,
+            envManager: ENV_MANAGER_TOKEN,
         },
     }),
     provide({
-        provide: commandLineListTokens.customerStart,
-        multi: true,
-        useFactory: ({ store, userAgent }) => {
-            return function initUserAgent() {
-                return store.dispatch(setUserAgent(userAgent));
-            };
+        provide: ENV_USED_TOKEN,
+        useValue: [
+            {
+                key: 'TRAMVAI_USER_AGENT_CACHE_TYPE',
+                value: 'memory',
+                optional: true,
+                validator: (value) => value === 'memory' || value === 'memory-lfu',
+                dehydrate: false,
+            },
+            {
+                key: 'TRAMVAI_USER_AGENT_CACHE_MAX',
+                value: '50',
+                optional: true,
+                validator: isNumber,
+                dehydrate: false,
+            },
+        ],
+    }),
+    provide({
+        provide: 'userAgentMemoryCache',
+        scope: Scope.SINGLETON,
+        useFactory: ({ createCache, envManager, cacheType }) => {
+            return createCache(cacheType, {
+                max: Number(envManager.get('TRAMVAI_USER_AGENT_CACHE_MAX')),
+            });
         },
         deps: {
-            userAgent: USER_AGENT_TOKEN,
-            store: STORE_TOKEN,
+            createCache: CREATE_CACHE_TOKEN,
+            envManager: ENV_MANAGER_TOKEN,
+            cacheType: 'userAgentCacheType',
         },
     }),
     provide({
         provide: commandLineListTokens.customerStart,
         multi: true,
-        useFactory: ({ responseManager }) => {
+        useFactory: ({ responseManager, envManager }) => {
+            if (envManager.get('TRAMVAI_FORCE_CLIENT_SIDE_RENDERING') === 'true') {
+                return noop;
+            }
             return function setClientHintsHeaders() {
                 responseManager.setHeader('Accept-CH', 'Sec-CH-UA-Platform-Version, Sec-CH-UA-Arch, Sec-CH-UA-Model');
             };
         },
         deps: {
             responseManager: RESPONSE_MANAGER_TOKEN,
+            envManager: ENV_MANAGER_TOKEN,
         },
     }),
     provide({
         provide: USER_AGENT_TOKEN,
-        useFactory: ({ requestManager, cache, parserClientHintsEnabled }) => {
-            if (parserClientHintsEnabled && requestManager.getHeader('sec-ch-ua')) {
-                return parseClientHints(requestManager.getHeaders());
-            }
-            const userAgentHeader = requestManager.getHeader('user-agent');
-            if (cache.has(userAgentHeader)) {
-                return cache.get(userAgentHeader);
-            }
-            const result = parseUserAgentHeader(userAgentHeader);
-            cache.set(userAgentHeader, result);
-            return result;
+        useFactory: ({ requestManager, cache, parserClientHintsEnabled, store, metrics }) => {
+            const userAgent = parserClientHintsEnabled && requestManager.getHeader('sec-ch-ua')
+                ? parseClientHints(requestManager.getHeaders())
+                : parseUserAgentWithCache(cache, requestManager.getHeader('user-agent'), metrics);
+            store.dispatch(setUserAgent(userAgent));
+            return userAgent;
         },
         deps: {
             requestManager: REQUEST_MANAGER_TOKEN,
             parserClientHintsEnabled: PARSER_CLIENT_HINTS_ENABLED,
-            cache: 'userAgentLruCache',
+            store: STORE_TOKEN,
+            cache: 'userAgentMemoryCache',
+            metrics: 'userAgentCacheMetrics',
+        },
+    }),
+    provide({
+        provide: 'userAgentCacheMetrics',
+        scope: Scope.SINGLETON,
+        useFactory: ({ metrics }) => {
+            const getCounter = metrics.counter({
+                name: 'user_agent_cache_gets',
+                help: 'Total attempts to get user agent parsed results from cache',
+                labelNames: ['result'],
+            });
+            return {
+                hit() {
+                    getCounter.inc({
+                        result: 'hit',
+                    });
+                },
+                miss() {
+                    getCounter.inc({
+                        result: 'miss',
+                    });
+                },
+            };
+        },
+        deps: {
+            metrics: METRICS_MODULE_TOKEN,
         },
     }),
 ];
 
-export { userAgentProviders };
+export { serverUserAgentProviders };

package/lib/server/userAgent.js

@@ -4,66 +4,118 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@tramvai/core');
 var tokensCommon = require('@tramvai/tokens-common');
-var userAgent$1 = require('@tinkoff/user-agent');
+var moduleMetrics = require('@tramvai/module-metrics');
+var userAgent = require('@tinkoff/user-agent');
+var noop = require('@tinkoff/utils/function/noop');
+var envValidators = require('@tinkoff/env-validators');
 var tokens = require('../tokens.js');
-var userAgent = require('../shared/stores/userAgent.js');
+var userAgent$1 = require('../shared/stores/userAgent.js');
+var parseUserAgentWithCache = require('./parseUserAgentWithCache.js');
 
-const userAgentProviders = [
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
+
+const serverUserAgentProviders = [
     core.provide({
-        provide: 'userAgentLruCache',
-        scope: core.Scope.SINGLETON,
-        useFactory: ({ createCache }) => {
-            return createCache('memory', { max: 50 });
-        },
+        provide: 'userAgentCacheType',
+        useFactory: ({ envManager }) => envManager.get('TRAMVAI_USER_AGENT_CACHE_TYPE'),
         deps: {
-            createCache: tokensCommon.CREATE_CACHE_TOKEN,
+            envManager: tokensCommon.ENV_MANAGER_TOKEN,
         },
     }),
     core.provide({
-        provide: core.commandLineListTokens.customerStart,
-        multi: true,
-        useFactory: ({ store, userAgent: userAgent$1 }) => {
-            return function initUserAgent() {
-                return store.dispatch(userAgent.setUserAgent(userAgent$1));
-            };
+        provide: tokensCommon.ENV_USED_TOKEN,
+        useValue: [
+            {
+                key: 'TRAMVAI_USER_AGENT_CACHE_TYPE',
+                value: 'memory',
+                optional: true,
+                validator: (value) => value === 'memory' || value === 'memory-lfu',
+                dehydrate: false,
+            },
+            {
+                key: 'TRAMVAI_USER_AGENT_CACHE_MAX',
+                value: '50',
+                optional: true,
+                validator: envValidators.isNumber,
+                dehydrate: false,
+            },
+        ],
+    }),
+    core.provide({
+        provide: 'userAgentMemoryCache',
+        scope: core.Scope.SINGLETON,
+        useFactory: ({ createCache, envManager, cacheType }) => {
+            return createCache(cacheType, {
+                max: Number(envManager.get('TRAMVAI_USER_AGENT_CACHE_MAX')),
+            });
         },
         deps: {
-            userAgent: tokens.USER_AGENT_TOKEN,
-            store: tokensCommon.STORE_TOKEN,
+            createCache: tokensCommon.CREATE_CACHE_TOKEN,
+            envManager: tokensCommon.ENV_MANAGER_TOKEN,
+            cacheType: 'userAgentCacheType',
         },
     }),
     core.provide({
         provide: core.commandLineListTokens.customerStart,
         multi: true,
-        useFactory: ({ responseManager }) => {
+        useFactory: ({ responseManager, envManager }) => {
+            if (envManager.get('TRAMVAI_FORCE_CLIENT_SIDE_RENDERING') === 'true') {
+                return noop__default["default"];
+            }
             return function setClientHintsHeaders() {
                 responseManager.setHeader('Accept-CH', 'Sec-CH-UA-Platform-Version, Sec-CH-UA-Arch, Sec-CH-UA-Model');
             };
         },
         deps: {
             responseManager: tokensCommon.RESPONSE_MANAGER_TOKEN,
+            envManager: tokensCommon.ENV_MANAGER_TOKEN,
         },
     }),
     core.provide({
         provide: tokens.USER_AGENT_TOKEN,
-        useFactory: ({ requestManager, cache, parserClientHintsEnabled }) => {
-            if (parserClientHintsEnabled && requestManager.getHeader('sec-ch-ua')) {
-                return userAgent$1.parseClientHints(requestManager.getHeaders());
-            }
-            const userAgentHeader = requestManager.getHeader('user-agent');
-            if (cache.has(userAgentHeader)) {
-                return cache.get(userAgentHeader);
-            }
-            const result = userAgent$1.parseUserAgentHeader(userAgentHeader);
-            cache.set(userAgentHeader, result);
-            return result;
+        useFactory: ({ requestManager, cache, parserClientHintsEnabled, store, metrics }) => {
+            const userAgent$2 = parserClientHintsEnabled && requestManager.getHeader('sec-ch-ua')
+                ? userAgent.parseClientHints(requestManager.getHeaders())
+                : parseUserAgentWithCache.parseUserAgentWithCache(cache, requestManager.getHeader('user-agent'), metrics);
+            store.dispatch(userAgent$1.setUserAgent(userAgent$2));
+            return userAgent$2;
         },
         deps: {
             requestManager: tokensCommon.REQUEST_MANAGER_TOKEN,
             parserClientHintsEnabled: tokens.PARSER_CLIENT_HINTS_ENABLED,
-            cache: 'userAgentLruCache',
+            store: tokensCommon.STORE_TOKEN,
+            cache: 'userAgentMemoryCache',
+            metrics: 'userAgentCacheMetrics',
+        },
+    }),
+    core.provide({
+        provide: 'userAgentCacheMetrics',
+        scope: core.Scope.SINGLETON,
+        useFactory: ({ metrics }) => {
+            const getCounter = metrics.counter({
+                name: 'user_agent_cache_gets',
+                help: 'Total attempts to get user agent parsed results from cache',
+                labelNames: ['result'],
+            });
+            return {
+                hit() {
+                    getCounter.inc({
+                        result: 'hit',
+                    });
+                },
+                miss() {
+                    getCounter.inc({
+                        result: 'miss',
+                    });
+                },
+            };
+        },
+        deps: {
+            metrics: moduleMetrics.METRICS_MODULE_TOKEN,
         },
     }),
 ];
 
-exports.userAgentProviders = userAgentProviders;
+exports.serverUserAgentProviders = serverUserAgentProviders;

package/lib/server.d.ts

@@ -3,6 +3,8 @@ export * from './shared/stores/mediaCheckers';
 export * from './shared/stores/mediaSelectors';
 export * from './shared/stores/media';
 export * from './shared/stores/userAgent';
-export { ClientHintsChildAppModule } from './child-app/module';
-export declare class ClientHintsModule {
-}
+export { ClientHintsChildAppModule } from './modules/child-app/module';
+export { ClientHintsCSRModule } from './modules/csr/server';
+export declare const ClientHintsModule: import("@tinkoff/dippy/lib/modules/module.h").ModuleClass & Partial<import("@tinkoff/dippy/lib/modules/module.h").ModuleSecretParameters> & {
+    [x: string]: (...args: any[]) => import("@tramvai/core").ModuleType<import("@tinkoff/dippy/lib/modules/module.h").ModuleClass>;
+};

package/lib/server.es.js

@@ -1,40 +1,25 @@
-import { __decorate } from 'tslib';
-import { Module, provide, commandLineListTokens } from '@tramvai/core';
-import { CONTEXT_TOKEN } from '@tramvai/tokens-common';
-import { COOKIE_MANAGER_TOKEN } from '@tramvai/tokens-cookie';
-import { readMediaCommand } from './server/readMedia.es.js';
-import { providers } from './shared/providers.es.js';
-import { userAgentProviders } from './server/userAgent.es.js';
+import { declareModule, provide } from '@tramvai/core';
+import { serverProviders } from './shared/providers.server.es.js';
+import { serverUserAgentProviders } from './server/userAgent.es.js';
 import { PARSER_CLIENT_HINTS_ENABLED } from './tokens.es.js';
 export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_TOKEN } from './tokens.es.js';
 export { fromClientHints, isRetina, isSupposed } from './shared/stores/mediaCheckers.es.js';
 export { useFromClientHints, useIsRetina, useIsSupposed, useMedia } from './shared/stores/mediaSelectors.es.js';
 export { MediaStore, setMedia } from './shared/stores/media.es.js';
 export { UserAgentStore, setUserAgent } from './shared/stores/userAgent.es.js';
-export { ClientHintsChildAppModule } from './child-app/module.es.js';
+export { ClientHintsChildAppModule } from './modules/child-app/module.es.js';
+export { ClientHintsCSRModule } from './modules/csr/server.es.js';
 
-let ClientHintsModule = class ClientHintsModule {
-};
-ClientHintsModule = __decorate([
-    Module({
-        providers: [
-            ...providers,
-            ...userAgentProviders,
-            provide({
-                provide: commandLineListTokens.resolveUserDeps,
-                multi: true,
-                useFactory: readMediaCommand,
-                deps: {
-                    context: CONTEXT_TOKEN,
-                    cookieManager: COOKIE_MANAGER_TOKEN,
-                },
-            }),
-            provide({
-                provide: PARSER_CLIENT_HINTS_ENABLED,
-                useValue: true,
-            }),
-        ],
-    })
-], ClientHintsModule);
+const ClientHintsModule = /* @__PURE__ */ declareModule({
+    name: 'ClientHintsModule',
+    providers: [
+        ...serverProviders,
+        ...serverUserAgentProviders,
+        provide({
+            provide: PARSER_CLIENT_HINTS_ENABLED,
+            useValue: true,
+        }),
+    ],
+});
 
 export { ClientHintsModule };

package/lib/server.js

@@ -2,43 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var core = require('@tramvai/core');
-var tokensCommon = require('@tramvai/tokens-common');
-var tokensCookie = require('@tramvai/tokens-cookie');
-var readMedia = require('./server/readMedia.js');
-var providers = require('./shared/providers.js');
+var providers_server = require('./shared/providers.server.js');
 var userAgent$1 = require('./server/userAgent.js');
 var tokens = require('./tokens.js');
 var mediaCheckers = require('./shared/stores/mediaCheckers.js');
 var mediaSelectors = require('./shared/stores/mediaSelectors.js');
 var media = require('./shared/stores/media.js');
 var userAgent = require('./shared/stores/userAgent.js');
-var module$1 = require('./child-app/module.js');
+var module$1 = require('./modules/child-app/module.js');
+var server = require('./modules/csr/server.js');
 
-exports.ClientHintsModule = class ClientHintsModule {
-};
-exports.ClientHintsModule = tslib.__decorate([
-    core.Module({
-        providers: [
-            ...providers.providers,
-            ...userAgent$1.userAgentProviders,
-            core.provide({
-                provide: core.commandLineListTokens.resolveUserDeps,
-                multi: true,
-                useFactory: readMedia.readMediaCommand,
-                deps: {
-                    context: tokensCommon.CONTEXT_TOKEN,
-                    cookieManager: tokensCookie.COOKIE_MANAGER_TOKEN,
-                },
-            }),
-            core.provide({
-                provide: tokens.PARSER_CLIENT_HINTS_ENABLED,
-                useValue: true,
-            }),
-        ],
-    })
-], exports.ClientHintsModule);
+const ClientHintsModule = /* @__PURE__ */ core.declareModule({
+    name: 'ClientHintsModule',
+    providers: [
+        ...providers_server.serverProviders,
+        ...userAgent$1.serverUserAgentProviders,
+        core.provide({
+            provide: tokens.PARSER_CLIENT_HINTS_ENABLED,
+            useValue: true,
+        }),
+    ],
+});
 
 exports.PARSER_CLIENT_HINTS_ENABLED = tokens.PARSER_CLIENT_HINTS_ENABLED;
 exports.USER_AGENT_TOKEN = tokens.USER_AGENT_TOKEN;
@@ -57,3 +42,5 @@ Object.defineProperty(exports, 'ClientHintsChildAppModule', {
     enumerable: true,
     get: function () { return module$1.ClientHintsChildAppModule; }
 });
+exports.ClientHintsCSRModule = server.ClientHintsCSRModule;
+exports.ClientHintsModule = ClientHintsModule;

package/lib/shared/providers.browser.browser.js

@@ -0,0 +1,32 @@
+import { provide } from '@tinkoff/dippy';
+import { commandLineListTokens } from '@tramvai/core';
+import { CONTEXT_TOKEN, STORE_TOKEN } from '@tramvai/tokens-common';
+import { COOKIE_MANAGER_TOKEN } from '@tramvai/tokens-cookie';
+import { matchMediaCommand } from '../browser/matchMedia.browser.js';
+import { USER_AGENT_TOKEN } from '../tokens.browser.js';
+import { UserAgentStore } from './stores/userAgent.browser.js';
+import { commonProviders } from './providers.browser.js';
+
+const browserProviders = [
+    ...commonProviders,
+    provide({
+        provide: commandLineListTokens.clear,
+        multi: true,
+        useFactory: matchMediaCommand,
+        deps: {
+            context: CONTEXT_TOKEN,
+            cookieManager: COOKIE_MANAGER_TOKEN,
+        },
+    }),
+    provide({
+        provide: USER_AGENT_TOKEN,
+        useFactory: ({ store }) => {
+            return store.getState(UserAgentStore);
+        },
+        deps: {
+            store: STORE_TOKEN,
+        },
+    }),
+];
+
+export { browserProviders };

package/lib/shared/providers.browser.d.ts

@@ -0,0 +1,2 @@
+import type { Provider } from '@tinkoff/dippy';
+export declare const browserProviders: Provider[];

package/lib/shared/providers.browser.js

@@ -1,9 +1,14 @@
+import { provide } from '@tramvai/core';
 import { COMBINE_REDUCERS } from '@tramvai/tokens-common';
 import { UserAgentStore } from './stores/userAgent.browser.js';
 import { MediaStore } from './stores/media.browser.js';
 
-const providers = [
-    { provide: COMBINE_REDUCERS, multi: true, useValue: [UserAgentStore, MediaStore] },
+const commonProviders = [
+    provide({
+        provide: COMBINE_REDUCERS,
+        multi: true,
+        useValue: [UserAgentStore, MediaStore],
+    }),
 ];
 
-export { providers };
+export { commonProviders };

package/lib/shared/providers.d.ts

@@ -1,2 +1,2 @@
 import type { Provider } from '@tramvai/core';
-export declare const providers: Provider[];
+export declare const commonProviders: Provider[];

package/lib/shared/providers.es.js

@@ -1,9 +1,14 @@
+import { provide } from '@tramvai/core';
 import { COMBINE_REDUCERS } from '@tramvai/tokens-common';
 import { UserAgentStore } from './stores/userAgent.es.js';
 import { MediaStore } from './stores/media.es.js';
 
-const providers = [
-    { provide: COMBINE_REDUCERS, multi: true, useValue: [UserAgentStore, MediaStore] },
+const commonProviders = [
+    provide({
+        provide: COMBINE_REDUCERS,
+        multi: true,
+        useValue: [UserAgentStore, MediaStore],
+    }),
 ];
 
-export { providers };
+export { commonProviders };

package/lib/shared/providers.js

@@ -2,12 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var core = require('@tramvai/core');
 var tokensCommon = require('@tramvai/tokens-common');
 var userAgent = require('./stores/userAgent.js');
 var media = require('./stores/media.js');
 
-const providers = [
-    { provide: tokensCommon.COMBINE_REDUCERS, multi: true, useValue: [userAgent.UserAgentStore, media.MediaStore] },
+const commonProviders = [
+    core.provide({
+        provide: tokensCommon.COMBINE_REDUCERS,
+        multi: true,
+        useValue: [userAgent.UserAgentStore, media.MediaStore],
+    }),
 ];
 
-exports.providers = providers;
+exports.commonProviders = commonProviders;

package/lib/shared/providers.server.d.ts

@@ -0,0 +1,2 @@
+import type { Provider } from '@tinkoff/dippy';
+export declare const serverProviders: Provider[];

package/lib/shared/providers.server.es.js

@@ -0,0 +1,21 @@
+import { provide } from '@tinkoff/dippy';
+import { commandLineListTokens } from '@tramvai/core';
+import { CONTEXT_TOKEN } from '@tramvai/tokens-common';
+import { COOKIE_MANAGER_TOKEN } from '@tramvai/tokens-cookie';
+import { readMediaCommand } from '../server/readMedia.es.js';
+import { commonProviders } from './providers.es.js';
+
+const serverProviders = [
+    ...commonProviders,
+    provide({
+        provide: commandLineListTokens.resolveUserDeps,
+        multi: true,
+        useFactory: readMediaCommand,
+        deps: {
+            context: CONTEXT_TOKEN,
+            cookieManager: COOKIE_MANAGER_TOKEN,
+        },
+    }),
+];
+
+export { serverProviders };

package/lib/shared/providers.server.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dippy = require('@tinkoff/dippy');
+var core = require('@tramvai/core');
+var tokensCommon = require('@tramvai/tokens-common');
+var tokensCookie = require('@tramvai/tokens-cookie');
+var readMedia = require('../server/readMedia.js');
+var providers = require('./providers.js');
+
+const serverProviders = [
+    ...providers.commonProviders,
+    dippy.provide({
+        provide: core.commandLineListTokens.resolveUserDeps,
+        multi: true,
+        useFactory: readMedia.readMediaCommand,
+        deps: {
+            context: tokensCommon.CONTEXT_TOKEN,
+            cookieManager: tokensCookie.COOKIE_MANAGER_TOKEN,
+        },
+    }),
+];
+
+exports.serverProviders = serverProviders;

package/lib/shared/stores/userAgent.browser.js

@@ -1,8 +1,6 @@
 import { createEvent, createReducer } from '@tramvai/state';
 
 const setUserAgent = createEvent('setUserAgent');
-const UserAgentStore = createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
-    return userAgent;
-});
+const UserAgentStore = createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => userAgent);
 
 export { UserAgentStore, setUserAgent };

package/lib/shared/stores/userAgent.es.js

@@ -1,8 +1,6 @@
 import { createEvent, createReducer } from '@tramvai/state';
 
 const setUserAgent = createEvent('setUserAgent');
-const UserAgentStore = createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
-    return userAgent;
-});
+const UserAgentStore = createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => userAgent);
 
 export { UserAgentStore, setUserAgent };

package/lib/shared/stores/userAgent.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var state = require('@tramvai/state');
 
 const setUserAgent = state.createEvent('setUserAgent');
-const UserAgentStore = state.createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
-    return userAgent;
-});
+const UserAgentStore = state.createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => userAgent);
 
 exports.UserAgentStore = UserAgentStore;
 exports.setUserAgent = setUserAgent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-client-hints",
-  "version": "2.125.4",
+  "version": "2.130.6",
   "description": "",
   "main": "lib/server.js",
   "module": "lib/server.es.js",
@@ -19,17 +19,21 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@tinkoff/user-agent": "0.4.365",
+    "@tinkoff/user-agent": "0.4.380",
     "@tinkoff/utils": "^2.1.2",
+    "@tinkoff/env-validators": "0.1.6",
     "@tramvai/safe-strings": "0.5.10",
-    "@tramvai/tokens-common": "2.125.4",
-    "@tramvai/tokens-cookie": "2.125.4",
-    "@tramvai/tokens-child-app": "2.125.4"
+    "@tramvai/module-metrics": "2.130.6",
+    "@tramvai/tokens-child-app": "2.130.6",
+    "@tramvai/tokens-common": "2.130.6",
+    "@tramvai/tokens-cookie": "2.130.6",
+    "user-agent-data-types": "^0.3.1"
   },
   "peerDependencies": {
-    "@tramvai/core": "2.125.4",
-    "@tramvai/state": "2.125.4",
     "@tinkoff/dippy": "0.8.15",
+    "@tinkoff/logger": "0.10.65",
+    "@tramvai/core": "2.130.6",
+    "@tramvai/state": "2.130.6",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "tslib": "^2.4.0"