@tramvai/module-client-hints 2.160.2 → 2.160.10

package/README.md

@@ -92,6 +92,7 @@ const state = {
   // desktop - false, tablet - true, mobile - true
   isTouch: false,
   retina: false,
+  displayMode: 'browser',
   supposed: true,
   synchronized: false,
 };
@@ -105,6 +106,7 @@ const state = {
   height: 1080,
   isTouch: false,
   retina: true,
+  displayMode: 'browser',
   supposed: false,
   synchronized: false,
 };
@@ -122,6 +124,7 @@ const state = {
   height: 1080,
   isTouch: false,
   retina: true,
+  displayMode: 'browser',
   supposed: false,
   synchronized: true,
 };
@@ -157,6 +160,7 @@ type Media = {
   height: number;
   isTouch: boolean;
   retina: boolean;
+  displayMode: 'browser' | 'standalone' | 'unknown';
   supposed?: boolean;
   synchronized?: boolean;
 };
@@ -176,6 +180,12 @@ type Media = {
 
 `useIsRetina(): boolean` - calculates isRetina
 
+`useDisplayMode(): boolean` - calculates displayMode. It indicates the mode in which the application is opened. The possible values are:
+
+- browser: The application is opened in a browser
+- standalone: The application is opened as a Progressive Web App (PWA)
+- unknown: The application mode could not be determined
+
 ## How to
 
 ### Render skeleton only when user loads pages first time
@@ -225,4 +235,4 @@ You can increase it for better cache hit rate and server performance.
 
 ## Metrics
 
-- `user_agent_cache_gets` counter - User-Agent header parsing count, with labels `hit` and `miss` 
+- `user_agent_cache_gets` counter - User-Agent header parsing count, with labels `hit` and `miss`

package/lib/browser/getDisplayMode.browser.js

@@ -0,0 +1,11 @@
+const getDisplayMode = () => {
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+        return 'standalone';
+    }
+    if (window.matchMedia('(display-mode: browser)').matches) {
+        return 'browser';
+    }
+    return 'unknown';
+};
+
+export { getDisplayMode };

package/lib/browser/getDisplayMode.d.ts

@@ -0,0 +1,2 @@
+export declare const getDisplayMode: () => "browser" | "standalone" | "unknown";
+//# sourceMappingURL=getDisplayMode.d.ts.map

package/lib/browser/matchMedia.browser.js

@@ -2,13 +2,16 @@ import debounce from '@tinkoff/utils/function/debounce';
 import { setMedia } from '../shared/stores/media.browser.js';
 import { COOKIE_NAME_MEDIA_INFO } from '../shared/constants.browser.js';
 import { mediaBreakpoints } from '../shared/mediaBreakpoints.browser.js';
+import { getDisplayMode } from './getDisplayMode.browser.js';
 
 const isTouch = !!('ontouchstart' in window ||
     (window.DocumentTouch && document instanceof window.DocumentTouch));
+const displayMode = getDisplayMode();
 const getMediaInfo = () => ({
     width: window.innerWidth,
     height: window.innerHeight,
     isTouch,
+    displayMode,
     retina: window.matchMedia(mediaBreakpoints.retina).matches,
 });
 const matchMediaCommand = ({ context, cookieManager, }) => {

package/lib/browser.js

@@ -1,8 +1,8 @@
 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';
-export { fromClientHints, isRetina, isSupposed } from './shared/stores/mediaCheckers.browser.js';
-export { useFromClientHints, useIsRetina, useIsSupposed, useMedia } from './shared/stores/mediaSelectors.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';
 export { UserAgentStore, setUserAgent } from './shared/stores/userAgent.browser.js';
 export { ClientHintsChildAppModule } from './modules/child-app/module.browser.js';

package/lib/server/readMedia.es.js

@@ -10,18 +10,21 @@ const SUPPOSED_MEDIA = {
         height: 500,
         isTouch: true,
         retina: false,
+        displayMode: 'browser',
     },
     tablet: {
         width: 600,
         height: 800,
         isTouch: true,
         retina: false,
+        displayMode: 'browser',
     },
     desktop: {
         width: 1024,
         height: 768,
         isTouch: false,
         retina: false,
+        displayMode: 'browser',
     },
 };
 const readMediaCommand = ({ context, cookieManager, }) => {

package/lib/server/readMedia.js

@@ -18,18 +18,21 @@ const SUPPOSED_MEDIA = {
         height: 500,
         isTouch: true,
         retina: false,
+        displayMode: 'browser',
     },
     tablet: {
         width: 600,
         height: 800,
         isTouch: true,
         retina: false,
+        displayMode: 'browser',
     },
     desktop: {
         width: 1024,
         height: 768,
         isTouch: false,
         retina: false,
+        displayMode: 'browser',
     },
 };
 const readMediaCommand = ({ context, cookieManager, }) => {

package/lib/server.es.js

@@ -3,8 +3,8 @@ 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 { 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';
 export { UserAgentStore, setUserAgent } from './shared/stores/userAgent.es.js';
 export { ClientHintsChildAppModule } from './modules/child-app/module.es.js';

package/lib/server.js

@@ -27,9 +27,11 @@ const ClientHintsModule = /* @__PURE__ */ core.declareModule({
 
 exports.PARSER_CLIENT_HINTS_ENABLED = tokens.PARSER_CLIENT_HINTS_ENABLED;
 exports.USER_AGENT_TOKEN = tokens.USER_AGENT_TOKEN;
+exports.displayMode = mediaCheckers.displayMode;
 exports.fromClientHints = mediaCheckers.fromClientHints;
 exports.isRetina = mediaCheckers.isRetina;
 exports.isSupposed = mediaCheckers.isSupposed;
+exports.useDisplayMode = mediaSelectors.useDisplayMode;
 exports.useFromClientHints = mediaSelectors.useFromClientHints;
 exports.useIsRetina = mediaSelectors.useIsRetina;
 exports.useIsSupposed = mediaSelectors.useIsSupposed;

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

@@ -7,6 +7,7 @@ const initialState = {
     isTouch: false,
     retina: false,
     synchronized: false,
+    displayMode: 'unknown',
 };
 const MediaStore = createReducer('media', initialState).on(setMedia, (state, media) => {
     return {

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

@@ -7,6 +7,7 @@ const initialState = {
     isTouch: false,
     retina: false,
     synchronized: false,
+    displayMode: 'unknown',
 };
 const MediaStore = createReducer('media', initialState).on(setMedia, (state, media) => {
     return {

package/lib/shared/stores/media.js

@@ -11,6 +11,7 @@ const initialState = {
     isTouch: false,
     retina: false,
     synchronized: false,
+    displayMode: 'unknown',
 };
 const MediaStore = state.createReducer('media', initialState).on(setMedia, (state, media) => {
     return {

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

@@ -1,6 +1,9 @@
 function fromClientHints(media) {
     return !!media.synchronized;
 }
+function displayMode(media) {
+    return media.displayMode;
+}
 function isSupposed(media) {
     return !!media.supposed;
 }
@@ -8,4 +11,4 @@ function isRetina(media) {
     return !!media.retina;
 }
 
-export { fromClientHints, isRetina, isSupposed };
+export { displayMode, fromClientHints, isRetina, isSupposed };

package/lib/shared/stores/mediaCheckers.d.ts

@@ -1,5 +1,7 @@
+import type { DisplayMode } from '../../types';
 import type { Media } from './media';
 export declare function fromClientHints(media: Media): boolean;
+export declare function displayMode(media: Media): DisplayMode;
 export declare function isSupposed(media: Media): boolean;
 export declare function isRetina(media: Media): boolean;
 //# sourceMappingURL=mediaCheckers.d.ts.map

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

@@ -1,6 +1,9 @@
 function fromClientHints(media) {
     return !!media.synchronized;
 }
+function displayMode(media) {
+    return media.displayMode;
+}
 function isSupposed(media) {
     return !!media.supposed;
 }
@@ -8,4 +11,4 @@ function isRetina(media) {
     return !!media.retina;
 }
 
-export { fromClientHints, isRetina, isSupposed };
+export { displayMode, fromClientHints, isRetina, isSupposed };

package/lib/shared/stores/mediaCheckers.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function fromClientHints(media) {
     return !!media.synchronized;
 }
+function displayMode(media) {
+    return media.displayMode;
+}
 function isSupposed(media) {
     return !!media.supposed;
 }
@@ -12,6 +15,7 @@ function isRetina(media) {
     return !!media.retina;
 }
 
+exports.displayMode = displayMode;
 exports.fromClientHints = fromClientHints;
 exports.isRetina = isRetina;
 exports.isSupposed = isSupposed;

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

@@ -1,5 +1,5 @@
 import { useSelector } from '@tramvai/state';
-import { fromClientHints, isSupposed, isRetina } from './mediaCheckers.browser.js';
+import { fromClientHints, isSupposed, isRetina, displayMode } from './mediaCheckers.browser.js';
 
 function useMedia() {
     return useSelector('media', ({ media }) => media);
@@ -13,5 +13,8 @@ function useIsSupposed() {
 function useIsRetina() {
     return isRetina(useMedia());
 }
+function useDisplayMode() {
+    return displayMode(useMedia());
+}
 
-export { useFromClientHints, useIsRetina, useIsSupposed, useMedia };
+export { useDisplayMode, useFromClientHints, useIsRetina, useIsSupposed, useMedia };

package/lib/shared/stores/mediaSelectors.d.ts

@@ -1,6 +1,8 @@
 import type { Media } from './media';
+import type { DisplayMode } from '../../types';
 export declare function useMedia(): Media;
 export declare function useFromClientHints(): boolean;
 export declare function useIsSupposed(): boolean;
 export declare function useIsRetina(): boolean;
+export declare function useDisplayMode(): DisplayMode;
 //# sourceMappingURL=mediaSelectors.d.ts.map

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

@@ -1,5 +1,5 @@
 import { useSelector } from '@tramvai/state';
-import { fromClientHints, isSupposed, isRetina } from './mediaCheckers.es.js';
+import { fromClientHints, isSupposed, isRetina, displayMode } from './mediaCheckers.es.js';
 
 function useMedia() {
     return useSelector('media', ({ media }) => media);
@@ -13,5 +13,8 @@ function useIsSupposed() {
 function useIsRetina() {
     return isRetina(useMedia());
 }
+function useDisplayMode() {
+    return displayMode(useMedia());
+}
 
-export { useFromClientHints, useIsRetina, useIsSupposed, useMedia };
+export { useDisplayMode, useFromClientHints, useIsRetina, useIsSupposed, useMedia };

package/lib/shared/stores/mediaSelectors.js

@@ -17,7 +17,11 @@ function useIsSupposed() {
 function useIsRetina() {
     return mediaCheckers.isRetina(useMedia());
 }
+function useDisplayMode() {
+    return mediaCheckers.displayMode(useMedia());
+}
 
+exports.useDisplayMode = useDisplayMode;
 exports.useFromClientHints = useFromClientHints;
 exports.useIsRetina = useIsRetina;
 exports.useIsSupposed = useIsSupposed;

package/lib/types.d.ts

@@ -3,5 +3,7 @@ export interface MediaInfo {
     height: number;
     isTouch: boolean;
     retina: boolean;
+    displayMode: DisplayMode;
 }
+export type DisplayMode = 'browser' | 'standalone' | 'unknown';
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/module-client-hints",
-  "version": "2.160.2",
+  "version": "2.160.10",
   "description": "",
   "main": "lib/server.js",
   "module": "lib/server.es.js",
@@ -19,22 +19,22 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@tinkoff/user-agent": "0.4.465",
+    "@tinkoff/user-agent": "0.4.473",
     "@tinkoff/utils": "^2.1.2",
     "@tinkoff/env-validators": "0.1.6",
     "@tramvai/safe-strings": "0.5.12",
-    "@tramvai/module-metrics": "2.160.2",
-    "@tramvai/tokens-child-app": "2.160.2",
-    "@tramvai/tokens-common": "2.160.2",
-    "@tramvai/tokens-cookie": "2.160.2",
-    "@tramvai/tokens-render": "2.160.2",
+    "@tramvai/module-metrics": "2.160.10",
+    "@tramvai/tokens-child-app": "2.160.10",
+    "@tramvai/tokens-common": "2.160.10",
+    "@tramvai/tokens-cookie": "2.160.10",
+    "@tramvai/tokens-render": "2.160.10",
     "user-agent-data-types": "^0.3.1"
   },
   "peerDependencies": {
     "@tinkoff/dippy": "0.8.16",
     "@tinkoff/logger": "0.10.67",
-    "@tramvai/core": "2.160.2",
-    "@tramvai/state": "2.160.2",
+    "@tramvai/core": "2.160.10",
+    "@tramvai/state": "2.160.10",
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
     "tslib": "^2.4.0"