From 9f3e7997b97b47a60b767d369c90ebe8342df63c Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Tue, 12 Sep 2023 18:42:43 +0200 Subject: [PATCH 1/3] Init device capabilities migration --- .../{index.native.js => index.native.ts} | 0 .../canUseTouchScreen/{index.js => index.ts} | 10 +++++----- src/libs/DeviceCapabilities/canUseTouchScreen/types.ts | 3 +++ .../{index.native.js => index.native.ts} | 0 .../hasHoverSupport/{index.js => index.ts} | 0 src/libs/DeviceCapabilities/hasHoverSupport/types.ts | 0 src/libs/DeviceCapabilities/{index.js => index.ts} | 0 7 files changed, 8 insertions(+), 5 deletions(-) rename src/libs/DeviceCapabilities/canUseTouchScreen/{index.native.js => index.native.ts} (100%) rename src/libs/DeviceCapabilities/canUseTouchScreen/{index.js => index.ts} (85%) create mode 100644 src/libs/DeviceCapabilities/canUseTouchScreen/types.ts rename src/libs/DeviceCapabilities/hasHoverSupport/{index.native.js => index.native.ts} (100%) rename src/libs/DeviceCapabilities/hasHoverSupport/{index.js => index.ts} (100%) create mode 100644 src/libs/DeviceCapabilities/hasHoverSupport/types.ts rename src/libs/DeviceCapabilities/{index.js => index.ts} (100%) diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.js b/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts similarity index 100% rename from src/libs/DeviceCapabilities/canUseTouchScreen/index.native.js rename to src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.js b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts similarity index 85% rename from src/libs/DeviceCapabilities/canUseTouchScreen/index.js rename to src/libs/DeviceCapabilities/canUseTouchScreen/index.ts index 17dcc9dffd73..e35dadf312be 100644 --- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.js +++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts @@ -1,16 +1,16 @@ +import CanUseTouchScreen from './types'; + /** * Allows us to identify whether the platform has a touchscreen. * * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent - * - * @returns {Boolean} */ -function canUseTouchScreen() { +const canUseTouchScreen: CanUseTouchScreen = () => { let hasTouchScreen = false; if ('maxTouchPoints' in navigator) { hasTouchScreen = navigator.maxTouchPoints > 0; } else if ('msMaxTouchPoints' in navigator) { - hasTouchScreen = navigator.msMaxTouchPoints > 0; + hasTouchScreen = (navigator as Navigator)?.msMaxTouchPoints > 0; } else { const mQ = window.matchMedia && matchMedia('(pointer:coarse)'); if (mQ && mQ.media === '(pointer:coarse)') { @@ -24,6 +24,6 @@ function canUseTouchScreen() { } } return hasTouchScreen; -} +}; export default canUseTouchScreen; diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/types.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/types.ts new file mode 100644 index 000000000000..6b71ecffeb05 --- /dev/null +++ b/src/libs/DeviceCapabilities/canUseTouchScreen/types.ts @@ -0,0 +1,3 @@ +type CanUseTouchScreen = () => boolean; + +export default CanUseTouchScreen; diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.native.js b/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts similarity index 100% rename from src/libs/DeviceCapabilities/hasHoverSupport/index.native.js rename to src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.js b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts similarity index 100% rename from src/libs/DeviceCapabilities/hasHoverSupport/index.js rename to src/libs/DeviceCapabilities/hasHoverSupport/index.ts diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/types.ts b/src/libs/DeviceCapabilities/hasHoverSupport/types.ts new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/libs/DeviceCapabilities/index.js b/src/libs/DeviceCapabilities/index.ts similarity index 100% rename from src/libs/DeviceCapabilities/index.js rename to src/libs/DeviceCapabilities/index.ts From a842d93b5d3b1a00942146455202aa4e5662ecbc Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 13 Sep 2023 11:02:31 +0200 Subject: [PATCH 2/3] [TS migration] Migrate 'DeviceCapabilities' lib to TypeScript --- .../canUseTouchScreen/index.native.ts | 6 +++--- .../DeviceCapabilities/canUseTouchScreen/index.ts | 15 ++++++++++++--- .../hasHoverSupport/index.native.ts | 7 +++---- .../DeviceCapabilities/hasHoverSupport/index.ts | 8 +++----- .../DeviceCapabilities/hasHoverSupport/types.ts | 3 +++ 5 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts index 4306b0cff3f6..60980801e73c 100644 --- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts +++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.native.ts @@ -1,5 +1,5 @@ -function canUseTouchScreen() { - return true; -} +import CanUseTouchScreen from './types'; + +const canUseTouchScreen: CanUseTouchScreen = () => true; export default canUseTouchScreen; diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts index e35dadf312be..72798159e36c 100644 --- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts +++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts @@ -1,5 +1,8 @@ +import {Merge} from 'type-fest'; import CanUseTouchScreen from './types'; +type ExtendedNavigator = Merge; + /** * Allows us to identify whether the platform has a touchscreen. * @@ -7,19 +10,25 @@ import CanUseTouchScreen from './types'; */ const canUseTouchScreen: CanUseTouchScreen = () => { let hasTouchScreen = false; + + // TypeScript removed support for msMaxTouchPoints, this doesn't mean however that + // this property doesn't exist - hence the use of ExtendedNavigator to ensure + // that the functionality doesn't change + // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1029 if ('maxTouchPoints' in navigator) { hasTouchScreen = navigator.maxTouchPoints > 0; } else if ('msMaxTouchPoints' in navigator) { - hasTouchScreen = (navigator as Navigator)?.msMaxTouchPoints > 0; + hasTouchScreen = (navigator as ExtendedNavigator).msMaxTouchPoints > 0; } else { - const mQ = window.matchMedia && matchMedia('(pointer:coarse)'); + // Same case as for Navigator - TypeScript thinks that matchMedia is obligatory property of window although it may not be + const mQ = (window as Partial).matchMedia && matchMedia('(pointer:coarse)'); if (mQ && mQ.media === '(pointer:coarse)') { hasTouchScreen = !!mQ.matches; } else if ('orientation' in window) { hasTouchScreen = true; // deprecated, but good fallback } else { // Only as a last resort, fall back to user agent sniffing - const UA = navigator.userAgent; + const UA = (navigator as ExtendedNavigator).userAgent; hasTouchScreen = /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) || /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA); } } diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts b/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts index d77fcc17448a..097b3b0cbba1 100644 --- a/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts +++ b/src/libs/DeviceCapabilities/hasHoverSupport/index.native.ts @@ -1,9 +1,8 @@ +import HasHoverSupport from './types'; + /** * Allows us to identify whether the platform is hoverable. - * - * @returns {Boolean} */ - -const hasHoverSupport = () => false; +const hasHoverSupport: HasHoverSupport = () => false; export default hasHoverSupport; diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts index 84a3fbbc5ed1..df62e6681548 100644 --- a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts +++ b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts @@ -1,10 +1,8 @@ +import HasHoverSupport from './types'; + /** * Allows us to identify whether the platform is hoverable. - * - * @returns {Boolean} */ -function hasHoverSupport() { - return window.matchMedia('(hover: hover) and (pointer: fine)').matches; -} +const hasHoverSupport: HasHoverSupport = () => window.matchMedia('(hover: hover) and (pointer: fine)').matches; export default hasHoverSupport; diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/types.ts b/src/libs/DeviceCapabilities/hasHoverSupport/types.ts index e69de29bb2d1..b8fe944cf88e 100644 --- a/src/libs/DeviceCapabilities/hasHoverSupport/types.ts +++ b/src/libs/DeviceCapabilities/hasHoverSupport/types.ts @@ -0,0 +1,3 @@ +type HasHoverSupport = () => boolean; + +export default HasHoverSupport; From de9f1e5cae388819947af025d1079bc3e3efe122 Mon Sep 17 00:00:00 2001 From: Bartosz Grajdek Date: Wed, 20 Sep 2023 23:44:01 +0200 Subject: [PATCH 3/3] Improve handling for window.matches --- src/libs/DeviceCapabilities/canUseTouchScreen/index.ts | 2 +- src/libs/DeviceCapabilities/hasHoverSupport/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts index 72798159e36c..9e21f5a42b5d 100644 --- a/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts +++ b/src/libs/DeviceCapabilities/canUseTouchScreen/index.ts @@ -21,7 +21,7 @@ const canUseTouchScreen: CanUseTouchScreen = () => { hasTouchScreen = (navigator as ExtendedNavigator).msMaxTouchPoints > 0; } else { // Same case as for Navigator - TypeScript thinks that matchMedia is obligatory property of window although it may not be - const mQ = (window as Partial).matchMedia && matchMedia('(pointer:coarse)'); + const mQ = window.matchMedia?.('(pointer:coarse)'); if (mQ && mQ.media === '(pointer:coarse)') { hasTouchScreen = !!mQ.matches; } else if ('orientation' in window) { diff --git a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts index df62e6681548..1ff0f461db69 100644 --- a/src/libs/DeviceCapabilities/hasHoverSupport/index.ts +++ b/src/libs/DeviceCapabilities/hasHoverSupport/index.ts @@ -3,6 +3,6 @@ import HasHoverSupport from './types'; /** * Allows us to identify whether the platform is hoverable. */ -const hasHoverSupport: HasHoverSupport = () => window.matchMedia('(hover: hover) and (pointer: fine)').matches; +const hasHoverSupport: HasHoverSupport = () => window.matchMedia?.('(hover: hover) and (pointer: fine)').matches; export default hasHoverSupport;