@tramvai/module-client-hints 7.2.2 → 7.3.0

package/README.md

@@ -225,7 +225,7 @@ const App = () => {
 
 Object as a result of parsing user-agent headers or string with [@tinkoff/user-agent](../libs/user-agent.md). Parsing happens only on server-side and parsed info is reused on client-side. If header info is unavailable then takes user-agent and parse it with ua-parser-js lib.
 
-### Example of usage
+#### Example
 
 Here userAgent is used to determine the mobile device.
 
@@ -260,6 +260,23 @@ export const IS_MOBILE_BANNER = createToken<boolean>('IS_MOBILE_BANNER');
 export class BannerModule {}
 ```
 
+### `USER_LANGUAGE_TOKEN`:
+
+`USER_LANGUAGE_TOKEN` is responsible for determining the user's preferred languages based on this algorithm:
+
+- **Server:** Parses `Accept-Language` header from the HTTP request
+- **Client:** Reads `navigator.languages` array
+
+Example `Accept-Language` header:
+
+```
+Accept-Language: en-US,en;q=0.9,ru;q=0.8
+```
+
+Parsed to: `['en-US', 'en', 'ru']`
+
+The language detection algorithm checks these values against `availableLanguages` to find the best match.
+
 ## Env variables
 
 ### TRAMVAI_USER_AGENT_CACHE_MAX

package/lib/browser/language.browser.js

@@ -0,0 +1,19 @@
+import uniq from '@tinkoff/utils/array/uniq';
+import { provide } from '@tramvai/core';
+import { USER_LANGUAGE_TOKEN } from '../tokens.browser.js';
+
+const browserUserLanguageProvider = provide({
+    provide: USER_LANGUAGE_TOKEN,
+    useFactory: () => {
+        if (typeof navigator === 'undefined' || !navigator.languages) {
+            return ['ru'];
+        }
+        const languages = Array.from(navigator.languages).map((lang) => {
+            // Normalize language codes to ISO-639-1
+            return lang.toLowerCase().split('-')[0];
+        });
+        return uniq(languages);
+    },
+});
+
+export { browserUserLanguageProvider };

package/lib/browser/language.d.ts

@@ -0,0 +1,4 @@
+export declare const browserUserLanguageProvider: import("@tramvai/core").Provider<unknown, string[] & {
+    __type?: "base token" | undefined;
+}>;
+//# sourceMappingURL=language.d.ts.map

package/lib/browser.js

@@ -1,6 +1,6 @@
 import { declareModule } from '@tramvai/core';
 import { browserProviders } from './shared/providers.browser.browser.js';
-export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN } from './tokens.browser.js';
+export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN, USER_LANGUAGE_TOKEN } from './tokens.browser.js';
 export { displayMode, fromClientHints, isRetina, isSupposed } from './shared/stores/mediaCheckers.browser.js';
 export { useDisplayMode, useFromClientHints, useIsRetina, useIsSupposed, useMedia } from './shared/stores/mediaSelectors.browser.js';
 export { MediaStore, setMedia } from './shared/stores/media.browser.js';

package/lib/server/language.d.ts

@@ -0,0 +1,8 @@
+export declare const serverUserLanguageProvider: import("@tramvai/core").Provider<{
+    requestManager: import("@tramvai/tokens-common").RequestManager & {
+        __type?: "base token" | undefined;
+    };
+}, string[] & {
+    __type?: "base token" | undefined;
+}>;
+//# sourceMappingURL=language.d.ts.map

package/lib/server/language.es.js

@@ -0,0 +1,36 @@
+import uniq from '@tinkoff/utils/array/uniq';
+import { provide } from '@tramvai/core';
+import { REQUEST_MANAGER_TOKEN } from '@tramvai/tokens-common';
+import { USER_LANGUAGE_TOKEN } from '../tokens.es.js';
+
+/**
+ * Parse Accept-Language header into array of language codes, normalized to ISO-639-1
+ * Format: "en-US,en;q=0.9,ru;q=0.8" => ["en", "ru"]
+ */
+function parseAcceptLanguage(header) {
+    return header
+        .split(',')
+        .filter(Boolean)
+        .map((langAndQuality) => {
+        const [lang, qualityStr = 'q=1.0'] = langAndQuality.trim().split(';');
+        const [_, quality] = qualityStr.split('=');
+        return { lang: lang.trim(), quality: parseFloat(quality) };
+    })
+        .sort((a, b) => b.quality - a.quality)
+        .map((item) => item.lang.toLowerCase().split('-')[0]);
+}
+const serverUserLanguageProvider = provide({
+    provide: USER_LANGUAGE_TOKEN,
+    useFactory: ({ requestManager }) => {
+        const acceptLanguage = requestManager.getHeader('accept-language');
+        if (typeof acceptLanguage !== 'string') {
+            return ['ru'];
+        }
+        return uniq(parseAcceptLanguage(acceptLanguage));
+    },
+    deps: {
+        requestManager: REQUEST_MANAGER_TOKEN,
+    },
+});
+
+export { serverUserLanguageProvider };

package/lib/server/language.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var uniq = require('@tinkoff/utils/array/uniq');
+var core = require('@tramvai/core');
+var tokensCommon = require('@tramvai/tokens-common');
+var tokens = require('../tokens.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
+
+/**
+ * Parse Accept-Language header into array of language codes, normalized to ISO-639-1
+ * Format: "en-US,en;q=0.9,ru;q=0.8" => ["en", "ru"]
+ */
+function parseAcceptLanguage(header) {
+    return header
+        .split(',')
+        .filter(Boolean)
+        .map((langAndQuality) => {
+        const [lang, qualityStr = 'q=1.0'] = langAndQuality.trim().split(';');
+        const [_, quality] = qualityStr.split('=');
+        return { lang: lang.trim(), quality: parseFloat(quality) };
+    })
+        .sort((a, b) => b.quality - a.quality)
+        .map((item) => item.lang.toLowerCase().split('-')[0]);
+}
+const serverUserLanguageProvider = core.provide({
+    provide: tokens.USER_LANGUAGE_TOKEN,
+    useFactory: ({ requestManager }) => {
+        const acceptLanguage = requestManager.getHeader('accept-language');
+        if (typeof acceptLanguage !== 'string') {
+            return ['ru'];
+        }
+        return uniq__default["default"](parseAcceptLanguage(acceptLanguage));
+    },
+    deps: {
+        requestManager: tokensCommon.REQUEST_MANAGER_TOKEN,
+    },
+});
+
+exports.serverUserLanguageProvider = serverUserLanguageProvider;

package/lib/server.es.js

@@ -2,7 +2,7 @@ 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_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN } from './tokens.es.js';
+export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN, USER_LANGUAGE_TOKEN } from './tokens.es.js';
 export { displayMode, fromClientHints, isRetina, isSupposed } from './shared/stores/mediaCheckers.es.js';
 export { useDisplayMode, useFromClientHints, useIsRetina, useIsSupposed, useMedia } from './shared/stores/mediaSelectors.es.js';
 export { MediaStore, setMedia } from './shared/stores/media.es.js';

package/lib/server.js

@@ -28,6 +28,7 @@ const ClientHintsModule = /* @__PURE__ */ core.declareModule({
 exports.PARSER_CLIENT_HINTS_ENABLED = tokens.PARSER_CLIENT_HINTS_ENABLED;
 exports.USER_AGENT_PARSER_EXTENSIONS_TOKEN = tokens.USER_AGENT_PARSER_EXTENSIONS_TOKEN;
 exports.USER_AGENT_TOKEN = tokens.USER_AGENT_TOKEN;
+exports.USER_LANGUAGE_TOKEN = tokens.USER_LANGUAGE_TOKEN;
 exports.displayMode = mediaCheckers.displayMode;
 exports.fromClientHints = mediaCheckers.fromClientHints;
 exports.isRetina = mediaCheckers.isRetina;

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

@@ -3,12 +3,14 @@ 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 { browserUserLanguageProvider } from '../browser/language.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,
+    browserUserLanguageProvider,
     provide({
         provide: commandLineListTokens.clear,
         multi: true,

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

@@ -3,10 +3,12 @@ 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 { serverUserLanguageProvider } from '../server/language.es.js';
 import { commonProviders } from './providers.es.js';
 
 const serverProviders = [
     ...commonProviders,
+    serverUserLanguageProvider,
     provide({
         provide: commandLineListTokens.resolveUserDeps,
         multi: true,

package/lib/shared/providers.server.js

@@ -7,10 +7,12 @@ var core = require('@tramvai/core');
 var tokensCommon = require('@tramvai/tokens-common');
 var tokensCookie = require('@tramvai/tokens-cookie');
 var readMedia = require('../server/readMedia.js');
+var language = require('../server/language.js');
 var providers = require('./providers.js');
 
 const serverProviders = [
     ...providers.commonProviders,
+    language.serverUserLanguageProvider,
     dippy.provide({
         provide: core.commandLineListTokens.resolveUserDeps,
         multi: true,

package/lib/tokens.browser.js

@@ -3,5 +3,12 @@ import { createToken } from '@tinkoff/dippy';
 const USER_AGENT_TOKEN = createToken('userAgent');
 const USER_AGENT_PARSER_EXTENSIONS_TOKEN = createToken('userAgentParserExtensions', { multi: true });
 const PARSER_CLIENT_HINTS_ENABLED = createToken('client-hints parserClientHints enabled');
+/**
+ * Token for user language preferences
+ * On server: parsed from Accept-Language header
+ * On client: from navigator.languages
+ * Returns array of language codes in order of preference and normalized to ISO-639-1
+ */
+const USER_LANGUAGE_TOKEN = createToken('user language');
 
-export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN };
+export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN, USER_LANGUAGE_TOKEN };

package/lib/tokens.d.ts

@@ -10,4 +10,13 @@ export declare const PARSER_CLIENT_HINTS_ENABLED: (false & {
 }) | (true & {
     __type?: "base token" | undefined;
 });
+/**
+ * Token for user language preferences
+ * On server: parsed from Accept-Language header
+ * On client: from navigator.languages
+ * Returns array of language codes in order of preference and normalized to ISO-639-1
+ */
+export declare const USER_LANGUAGE_TOKEN: string[] & {
+    __type?: "base token" | undefined;
+};
 //# sourceMappingURL=tokens.d.ts.map

package/lib/tokens.es.js

@@ -3,5 +3,12 @@ import { createToken } from '@tinkoff/dippy';
 const USER_AGENT_TOKEN = createToken('userAgent');
 const USER_AGENT_PARSER_EXTENSIONS_TOKEN = createToken('userAgentParserExtensions', { multi: true });
 const PARSER_CLIENT_HINTS_ENABLED = createToken('client-hints parserClientHints enabled');
+/**
+ * Token for user language preferences
+ * On server: parsed from Accept-Language header
+ * On client: from navigator.languages
+ * Returns array of language codes in order of preference and normalized to ISO-639-1
+ */
+const USER_LANGUAGE_TOKEN = createToken('user language');
 
-export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN };
+export { PARSER_CLIENT_HINTS_ENABLED, USER_AGENT_PARSER_EXTENSIONS_TOKEN, USER_AGENT_TOKEN, USER_LANGUAGE_TOKEN };

package/lib/tokens.js

@@ -7,7 +7,15 @@ var dippy = require('@tinkoff/dippy');
 const USER_AGENT_TOKEN = dippy.createToken('userAgent');
 const USER_AGENT_PARSER_EXTENSIONS_TOKEN = dippy.createToken('userAgentParserExtensions', { multi: true });
 const PARSER_CLIENT_HINTS_ENABLED = dippy.createToken('client-hints parserClientHints enabled');
+/**
+ * Token for user language preferences
+ * On server: parsed from Accept-Language header
+ * On client: from navigator.languages
+ * Returns array of language codes in order of preference and normalized to ISO-639-1
+ */
+const USER_LANGUAGE_TOKEN = dippy.createToken('user language');
 
 exports.PARSER_CLIENT_HINTS_ENABLED = PARSER_CLIENT_HINTS_ENABLED;
 exports.USER_AGENT_PARSER_EXTENSIONS_TOKEN = USER_AGENT_PARSER_EXTENSIONS_TOKEN;
 exports.USER_AGENT_TOKEN = USER_AGENT_TOKEN;
+exports.USER_LANGUAGE_TOKEN = USER_LANGUAGE_TOKEN;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-client-hints",
-  "version": "7.2.2",
+  "version": "7.3.0",
   "description": "",
   "main": "lib/server.js",
   "module": "lib/server.es.js",
@@ -20,21 +20,21 @@
   },
   "dependencies": {
     "@tinkoff/env-validators": "0.6.1",
-    "@tinkoff/user-agent": "0.9.7",
+    "@tinkoff/user-agent": "0.9.9",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/module-metrics": "7.2.2",
+    "@tramvai/module-metrics": "7.3.0",
     "@tramvai/safe-strings": "0.10.1",
-    "@tramvai/tokens-child-app": "7.2.2",
-    "@tramvai/tokens-common": "7.2.2",
-    "@tramvai/tokens-cookie": "7.2.2",
-    "@tramvai/tokens-render": "7.2.2",
+    "@tramvai/tokens-child-app": "7.3.0",
+    "@tramvai/tokens-common": "7.3.0",
+    "@tramvai/tokens-cookie": "7.3.0",
+    "@tramvai/tokens-render": "7.3.0",
     "user-agent-data-types": "^0.3.1"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "0.13.1",
     "@tinkoff/logger": "^0.10.516",
-    "@tramvai/core": "7.2.2",
-    "@tramvai/state": "7.2.2",
+    "@tramvai/core": "7.3.0",
+    "@tramvai/state": "7.3.0",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "tslib": "^2.4.0"