@tramvai/module-client-hints 2.34.0 → 2.35.0

package/README.md

@@ -23,13 +23,25 @@ createApp({
 
 ## Explanation
 
+### User agent details parsing
+
+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
 
 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.
 
 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.
 
-### How does it work
+### How does media work
 
 #### First page loading
 
@@ -104,7 +116,7 @@ If some component if depend of screen size:
 
 #### userAgent
 
-Stores the result of the user-agent string parsing.
+Stores the result of the user-agent string or client-hints headers parsing.
 
 #### media
 

package/lib/browser.js

@@ -8,6 +8,7 @@ import { createEvent, createReducer, useSelector } from '@tramvai/state';
 import { CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN } from '@tramvai/tokens-child-app';
 
 const USER_AGENT_TOKEN = createToken('userAgent');
+const PARSER_CLIENT_HINTS_ENABLED = createToken('client-hints parserClientHints enabled');
 
 const setMedia = createEvent('setMedia');
 const initialState = {
@@ -132,4 +133,4 @@ ClientHintsModule = __decorate([
     })
 ], ClientHintsModule);
 
-export { ClientHintsChildAppModule, ClientHintsModule, MediaStore, USER_AGENT_TOKEN, UserAgentStore, fromClientHints, isRetina, isSupposed, setMedia, setUserAgent, useFromClientHints, useIsRetina, useIsSupposed, useMedia };
+export { ClientHintsChildAppModule, ClientHintsModule, MediaStore, PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_TOKEN, UserAgentStore, fromClientHints, isRetina, isSupposed, setMedia, setUserAgent, useFromClientHints, useIsRetina, useIsSupposed, useMedia };

package/lib/server/userAgent.d.ts

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

package/lib/server.es.js

@@ -1,19 +1,14 @@
 import { __decorate } from 'tslib';
-import { Module, provide, Scope, commandLineListTokens } from '@tramvai/core';
-import { COMBINE_REDUCERS, CREATE_CACHE_TOKEN, REQUEST_MANAGER_TOKEN, STORE_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
+import { provide, Scope, commandLineListTokens, Module } from '@tramvai/core';
+import { COMBINE_REDUCERS, CREATE_CACHE_TOKEN, STORE_TOKEN, RESPONSE_MANAGER_TOKEN, REQUEST_MANAGER_TOKEN, CONTEXT_TOKEN } from '@tramvai/tokens-common';
 import { COOKIE_MANAGER_TOKEN } from '@tramvai/tokens-cookie';
-import { parse } from '@tinkoff/user-agent';
-import { createEvent, createReducer, useSelector } from '@tramvai/state';
 import pathOr from '@tinkoff/utils/object/pathOr';
 import { safeParseJSON } from '@tramvai/safe-strings';
+import { createEvent, createReducer, useSelector } from '@tramvai/state';
+import { parseClientHints, parseUserAgentHeader } from '@tinkoff/user-agent';
 import { createToken } from '@tinkoff/dippy';
 import { CHILD_APP_INTERNAL_ROOT_STATE_ALLOWED_STORE_TOKEN } from '@tramvai/tokens-child-app';
 
-const setUserAgent = createEvent('setUserAgent');
-const UserAgentStore = createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
-    return userAgent;
-});
-
 const COOKIE_NAME_MEDIA_INFO = 'mediaInfo';
 
 const setMedia = createEvent('setMedia');
@@ -31,6 +26,11 @@ const MediaStore = createReducer('media', initialState).on(setMedia, (state, med
     };
 });
 
+const setUserAgent = createEvent('setUserAgent');
+const UserAgentStore = createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
+    return userAgent;
+});
+
 const SUPPOSED_MEDIA = {
     mobile: {
         width: 300,
@@ -71,12 +71,71 @@ const readMediaCommand = ({ context, cookieManager, }) => {
     };
 };
 
-const USER_AGENT_TOKEN = createToken('userAgent');
-
 const providers = [
     { provide: COMBINE_REDUCERS, multi: true, useValue: [UserAgentStore, MediaStore] },
 ];
 
+const USER_AGENT_TOKEN = createToken('userAgent');
+const PARSER_CLIENT_HINTS_ENABLED = createToken('client-hints parserClientHints enabled');
+
+const userAgentProviders = [
+    provide({
+        provide: 'userAgentLruCache',
+        scope: Scope.SINGLETON,
+        useFactory: ({ createCache }) => {
+            return createCache('memory', { max: 50 });
+        },
+        deps: {
+            createCache: CREATE_CACHE_TOKEN,
+        },
+    }),
+    provide({
+        provide: commandLineListTokens.customerStart,
+        multi: true,
+        useFactory: ({ store, userAgent }) => {
+            return function initUserAgent() {
+                return store.dispatch(setUserAgent(userAgent));
+            };
+        },
+        deps: {
+            userAgent: USER_AGENT_TOKEN,
+            store: STORE_TOKEN,
+        },
+    }),
+    provide({
+        provide: commandLineListTokens.customerStart,
+        multi: true,
+        useFactory: ({ responseManager }) => {
+            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,
+        },
+    }),
+    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;
+        },
+        deps: {
+            requestManager: REQUEST_MANAGER_TOKEN,
+            parserClientHintsEnabled: PARSER_CLIENT_HINTS_ENABLED,
+            cache: 'userAgentLruCache',
+        },
+    }),
+];
+
 function fromClientHints(media) {
     return !!media.synchronized;
 }
@@ -120,46 +179,8 @@ ClientHintsModule = __decorate([
     Module({
         providers: [
             ...providers,
+            ...userAgentProviders,
             provide({
-                provide: 'userAgentLruCache',
-                scope: Scope.SINGLETON,
-                useFactory: ({ createCache }) => {
-                    return createCache('memory', { max: 50 });
-                },
-                deps: {
-                    createCache: CREATE_CACHE_TOKEN,
-                },
-            }),
-            {
-                provide: USER_AGENT_TOKEN,
-                useFactory: ({ requestManager, cache }) => {
-                    const reqUserAgent = requestManager.getHeader('user-agent');
-                    if (cache.has(reqUserAgent)) {
-                        return cache.get(reqUserAgent);
-                    }
-                    const result = parse(reqUserAgent);
-                    cache.set(reqUserAgent, result);
-                    return result;
-                },
-                deps: {
-                    requestManager: REQUEST_MANAGER_TOKEN,
-                    cache: 'userAgentLruCache',
-                },
-            },
-            {
-                provide: commandLineListTokens.customerStart,
-                multi: true,
-                useFactory: ({ store, userAgent }) => {
-                    return function initUserAgent() {
-                        return store.dispatch(setUserAgent(userAgent));
-                    };
-                },
-                deps: {
-                    userAgent: USER_AGENT_TOKEN,
-                    store: STORE_TOKEN,
-                },
-            },
-            {
                 provide: commandLineListTokens.resolveUserDeps,
                 multi: true,
                 useFactory: readMediaCommand,
@@ -167,9 +188,13 @@ ClientHintsModule = __decorate([
                     context: CONTEXT_TOKEN,
                     cookieManager: COOKIE_MANAGER_TOKEN,
                 },
-            },
+            }),
+            provide({
+                provide: PARSER_CLIENT_HINTS_ENABLED,
+                useValue: true,
+            }),
         ],
     })
 ], ClientHintsModule);
 
-export { ClientHintsChildAppModule, ClientHintsModule, MediaStore, USER_AGENT_TOKEN, UserAgentStore, fromClientHints, isRetina, isSupposed, setMedia, setUserAgent, useFromClientHints, useIsRetina, useIsSupposed, useMedia };
+export { ClientHintsChildAppModule, ClientHintsModule, MediaStore, PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_TOKEN, UserAgentStore, fromClientHints, isRetina, isSupposed, setMedia, setUserAgent, useFromClientHints, useIsRetina, useIsSupposed, useMedia };

package/lib/server.js

@@ -6,10 +6,10 @@ var tslib = require('tslib');
 var core = require('@tramvai/core');
 var tokensCommon = require('@tramvai/tokens-common');
 var tokensCookie = require('@tramvai/tokens-cookie');
-var userAgent = require('@tinkoff/user-agent');
-var state = require('@tramvai/state');
 var pathOr = require('@tinkoff/utils/object/pathOr');
 var safeStrings = require('@tramvai/safe-strings');
+var state = require('@tramvai/state');
+var userAgent = require('@tinkoff/user-agent');
 var dippy = require('@tinkoff/dippy');
 var tokensChildApp = require('@tramvai/tokens-child-app');
 
@@ -17,11 +17,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var pathOr__default = /*#__PURE__*/_interopDefaultLegacy(pathOr);
 
-const setUserAgent = state.createEvent('setUserAgent');
-const UserAgentStore = state.createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
-    return userAgent;
-});
-
 const COOKIE_NAME_MEDIA_INFO = 'mediaInfo';
 
 const setMedia = state.createEvent('setMedia');
@@ -39,6 +34,11 @@ const MediaStore = state.createReducer('media', initialState).on(setMedia, (stat
     };
 });
 
+const setUserAgent = state.createEvent('setUserAgent');
+const UserAgentStore = state.createReducer('userAgent', null).on(setUserAgent, (state, userAgent) => {
+    return userAgent;
+});
+
 const SUPPOSED_MEDIA = {
     mobile: {
         width: 300,
@@ -79,12 +79,71 @@ const readMediaCommand = ({ context, cookieManager, }) => {
     };
 };
 
-const USER_AGENT_TOKEN = dippy.createToken('userAgent');
-
 const providers = [
     { provide: tokensCommon.COMBINE_REDUCERS, multi: true, useValue: [UserAgentStore, MediaStore] },
 ];
 
+const USER_AGENT_TOKEN = dippy.createToken('userAgent');
+const PARSER_CLIENT_HINTS_ENABLED = dippy.createToken('client-hints parserClientHints enabled');
+
+const userAgentProviders = [
+    core.provide({
+        provide: 'userAgentLruCache',
+        scope: core.Scope.SINGLETON,
+        useFactory: ({ createCache }) => {
+            return createCache('memory', { max: 50 });
+        },
+        deps: {
+            createCache: tokensCommon.CREATE_CACHE_TOKEN,
+        },
+    }),
+    core.provide({
+        provide: core.commandLineListTokens.customerStart,
+        multi: true,
+        useFactory: ({ store, userAgent }) => {
+            return function initUserAgent() {
+                return store.dispatch(setUserAgent(userAgent));
+            };
+        },
+        deps: {
+            userAgent: USER_AGENT_TOKEN,
+            store: tokensCommon.STORE_TOKEN,
+        },
+    }),
+    core.provide({
+        provide: core.commandLineListTokens.customerStart,
+        multi: true,
+        useFactory: ({ responseManager }) => {
+            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,
+        },
+    }),
+    core.provide({
+        provide: USER_AGENT_TOKEN,
+        useFactory: ({ requestManager, cache, parserClientHintsEnabled }) => {
+            if (parserClientHintsEnabled && requestManager.getHeader('sec-ch-ua')) {
+                return userAgent.parseClientHints(requestManager.getHeaders());
+            }
+            const userAgentHeader = requestManager.getHeader('user-agent');
+            if (cache.has(userAgentHeader)) {
+                return cache.get(userAgentHeader);
+            }
+            const result = userAgent.parseUserAgentHeader(userAgentHeader);
+            cache.set(userAgentHeader, result);
+            return result;
+        },
+        deps: {
+            requestManager: tokensCommon.REQUEST_MANAGER_TOKEN,
+            parserClientHintsEnabled: PARSER_CLIENT_HINTS_ENABLED,
+            cache: 'userAgentLruCache',
+        },
+    }),
+];
+
 function fromClientHints(media) {
     return !!media.synchronized;
 }
@@ -128,46 +187,8 @@ exports.ClientHintsModule = tslib.__decorate([
     core.Module({
         providers: [
             ...providers,
+            ...userAgentProviders,
             core.provide({
-                provide: 'userAgentLruCache',
-                scope: core.Scope.SINGLETON,
-                useFactory: ({ createCache }) => {
-                    return createCache('memory', { max: 50 });
-                },
-                deps: {
-                    createCache: tokensCommon.CREATE_CACHE_TOKEN,
-                },
-            }),
-            {
-                provide: USER_AGENT_TOKEN,
-                useFactory: ({ requestManager, cache }) => {
-                    const reqUserAgent = requestManager.getHeader('user-agent');
-                    if (cache.has(reqUserAgent)) {
-                        return cache.get(reqUserAgent);
-                    }
-                    const result = userAgent.parse(reqUserAgent);
-                    cache.set(reqUserAgent, result);
-                    return result;
-                },
-                deps: {
-                    requestManager: tokensCommon.REQUEST_MANAGER_TOKEN,
-                    cache: 'userAgentLruCache',
-                },
-            },
-            {
-                provide: core.commandLineListTokens.customerStart,
-                multi: true,
-                useFactory: ({ store, userAgent }) => {
-                    return function initUserAgent() {
-                        return store.dispatch(setUserAgent(userAgent));
-                    };
-                },
-                deps: {
-                    userAgent: USER_AGENT_TOKEN,
-                    store: tokensCommon.STORE_TOKEN,
-                },
-            },
-            {
                 provide: core.commandLineListTokens.resolveUserDeps,
                 multi: true,
                 useFactory: readMediaCommand,
@@ -175,12 +196,17 @@ exports.ClientHintsModule = tslib.__decorate([
                     context: tokensCommon.CONTEXT_TOKEN,
                     cookieManager: tokensCookie.COOKIE_MANAGER_TOKEN,
                 },
-            },
+            }),
+            core.provide({
+                provide: PARSER_CLIENT_HINTS_ENABLED,
+                useValue: true,
+            }),
         ],
     })
 ], exports.ClientHintsModule);
 
 exports.MediaStore = MediaStore;
+exports.PARSER_CLIENT_HINTS_ENABLED = PARSER_CLIENT_HINTS_ENABLED;
 exports.USER_AGENT_TOKEN = USER_AGENT_TOKEN;
 exports.UserAgentStore = UserAgentStore;
 exports.fromClientHints = fromClientHints;

package/lib/tokens.d.ts

@@ -1,2 +1,3 @@
 import type { UserAgent } from '@tinkoff/user-agent';
 export declare const USER_AGENT_TOKEN: import("@tinkoff/dippy").BaseTokenInterface<UserAgent>;
+export declare const PARSER_CLIENT_HINTS_ENABLED: import("@tinkoff/dippy").BaseTokenInterface<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-client-hints",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "description": "",
   "main": "lib/server.js",
   "module": "lib/server.es.js",
@@ -20,16 +20,16 @@
     "build-for-publish": "true"
   },
   "dependencies": {
-    "@tinkoff/user-agent": "0.4.77",
+    "@tinkoff/user-agent": "0.4.78",
     "@tinkoff/utils": "^2.1.2",
     "@tramvai/safe-strings": "0.5.5",
-    "@tramvai/tokens-common": "2.34.0",
-    "@tramvai/tokens-cookie": "2.34.0",
-    "@tramvai/tokens-child-app": "2.34.0"
+    "@tramvai/tokens-common": "2.35.0",
+    "@tramvai/tokens-cookie": "2.35.0",
+    "@tramvai/tokens-child-app": "2.35.0"
   },
   "peerDependencies": {
-    "@tramvai/core": "2.34.0",
-    "@tramvai/state": "2.34.0",
+    "@tramvai/core": "2.35.0",
+    "@tramvai/state": "2.35.0",
     "@tinkoff/dippy": "0.8.8",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",