From 4776aef8a805ed66c3e0a66c40b10513ca6ccca1 Mon Sep 17 00:00:00 2001 From: willmartindev Date: Fri, 10 Sep 2021 23:46:18 -0400 Subject: [PATCH 1/7] feat(platform): add ability to override platform detection methods --- core/src/global/ionic-global.ts | 6 +++--- core/src/utils/config.ts | 6 ++++++ core/src/utils/platform.ts | 12 ++++++++++-- packages/react-router/test-app/src/index.tsx | 11 +++++++++++ 4 files changed, 30 insertions(+), 5 deletions(-) diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts index f9b27de523f..ac3ac4fd4b4 100644 --- a/core/src/global/ionic-global.ts +++ b/core/src/global/ionic-global.ts @@ -21,9 +21,6 @@ export const initialize = (userConfig: IonicConfig = {}) => { Context.config = config; const Ionic = (win as any).Ionic = (win as any).Ionic || {}; - // Setup platforms - setupPlatforms(win); - const platformHelpers: any = {}; if (userConfig._ael) { platformHelpers.ael = userConfig._ael; @@ -51,6 +48,9 @@ export const initialize = (userConfig: IonicConfig = {}) => { saveConfig(win, configObj); } + // Setup platforms + setupPlatforms(win); + // first see if the mode was set as an attribute on // which could have been set by the user, or by pre-rendering // otherwise get the mode via config settings, and fallback to md diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts index 97ddab103a5..d3717333a6c 100644 --- a/core/src/utils/config.ts +++ b/core/src/utils/config.ts @@ -1,4 +1,5 @@ import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface'; +import { PlatformDetectionConfig } from './platform'; export interface IonicConfig { /** @@ -175,6 +176,11 @@ export interface IonicConfig { */ sanitizerEnabled?: boolean; + /** + * Overrides the default platform detection methods. + */ + platformDetection?: PlatformDetectionConfig; + // PRIVATE configs keyboardHeight?: number; inputShims?: boolean; diff --git a/core/src/utils/platform.ts b/core/src/utils/platform.ts index f292f3eab09..e1d60ab7e38 100644 --- a/core/src/utils/platform.ts +++ b/core/src/utils/platform.ts @@ -1,3 +1,4 @@ +import { config } from "../global/config"; export type Platforms = keyof typeof PLATFORMS_MAP; @@ -29,8 +30,13 @@ export const setupPlatforms = (win: any = window) => { return platforms; }; -const detectPlatforms = (win: Window) => - (Object.keys(PLATFORMS_MAP) as Platforms[]).filter(p => PLATFORMS_MAP[p](win)); +const detectPlatforms = (win: Window) => { + const customPlatformMethods = config.get('platformDetection'); + return (Object.keys(PLATFORMS_MAP) as Platforms[]).filter(p => { + const customMethod = customPlatformMethods && customPlatformMethods[p]; + return typeof customMethod === 'function' ? customMethod(win) : PLATFORMS_MAP[p](win); + }); +} const isMobileWeb = (win: Window): boolean => isMobile(win) && !isHybrid(win); @@ -117,6 +123,8 @@ export const testUserAgent = (win: Window, expr: RegExp) => const matchMedia = (win: Window, query: string): boolean => win.matchMedia && win.matchMedia(query).matches; +export type PlatformDetectionConfig = Partial; + const PLATFORMS_MAP = { 'ipad': isIpad, 'iphone': isIphone, diff --git a/packages/react-router/test-app/src/index.tsx b/packages/react-router/test-app/src/index.tsx index 82c1a6b6e14..c0526f08258 100644 --- a/packages/react-router/test-app/src/index.tsx +++ b/packages/react-router/test-app/src/index.tsx @@ -1,8 +1,19 @@ +import { setupConfig, isPlatform } from '@ionic/react'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; +setupConfig({ + platformDetection: { + 'cordova': (win: any) => { + const isCordova = !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); + console.log('Checking if platform is "cordova" with a custom detection method: ', isCordova); + return isCordova; + }, + } +}); + ReactDOM.render(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change From 4b03c067bf9b8b4249839c95e5f219f3fb001ec3 Mon Sep 17 00:00:00 2001 From: willmartindev Date: Mon, 13 Sep 2021 01:00:10 -0400 Subject: [PATCH 2/7] style: run lint --- core/src/utils/config.ts | 3 ++- core/src/utils/platform.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts index d3717333a6c..7dd91b43a34 100644 --- a/core/src/utils/config.ts +++ b/core/src/utils/config.ts @@ -1,5 +1,6 @@ import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface'; -import { PlatformDetectionConfig } from './platform'; + +import type { PlatformDetectionConfig } from './platform'; export interface IonicConfig { /** diff --git a/core/src/utils/platform.ts b/core/src/utils/platform.ts index e1d60ab7e38..038a9f33d81 100644 --- a/core/src/utils/platform.ts +++ b/core/src/utils/platform.ts @@ -1,4 +1,4 @@ -import { config } from "../global/config"; +import { config } from '../global/config'; export type Platforms = keyof typeof PLATFORMS_MAP; From 3f2e3a6a1a668c46a6026328cf35fe790e90ad8f Mon Sep 17 00:00:00 2001 From: willmartindev Date: Mon, 13 Sep 2021 09:07:05 -0400 Subject: [PATCH 3/7] fix: fix import --- core/src/utils/config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts index 7dd91b43a34..c8c5dc47b9e 100644 --- a/core/src/utils/config.ts +++ b/core/src/utils/config.ts @@ -1,6 +1,6 @@ import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface'; -import type { PlatformDetectionConfig } from './platform'; +import { PlatformDetectionConfig } from './platform'; export interface IonicConfig { /** From 7b55ced76ca26033a843ea6fb6c8c47644bdb608 Mon Sep 17 00:00:00 2001 From: willmartindev Date: Tue, 14 Sep 2021 03:15:09 -0400 Subject: [PATCH 4/7] test(config): add config e2e test for platform override --- core/src/utils/config.ts | 4 +-- core/src/utils/platform.ts | 4 +-- core/src/utils/test/config/e2e.ts | 13 ++++++++ core/src/utils/test/config/index.html | 46 +++++++++++++++++++++++++++ 4 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 core/src/utils/test/config/e2e.ts create mode 100644 core/src/utils/test/config/index.html diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts index c8c5dc47b9e..944bc7cfdae 100644 --- a/core/src/utils/config.ts +++ b/core/src/utils/config.ts @@ -1,6 +1,6 @@ import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface'; -import { PlatformDetectionConfig } from './platform'; +import { PlatformConfig } from './platform'; export interface IonicConfig { /** @@ -180,7 +180,7 @@ export interface IonicConfig { /** * Overrides the default platform detection methods. */ - platformDetection?: PlatformDetectionConfig; + platform?: PlatformConfig; // PRIVATE configs keyboardHeight?: number; diff --git a/core/src/utils/platform.ts b/core/src/utils/platform.ts index 038a9f33d81..4950e3c29d5 100644 --- a/core/src/utils/platform.ts +++ b/core/src/utils/platform.ts @@ -31,7 +31,7 @@ export const setupPlatforms = (win: any = window) => { }; const detectPlatforms = (win: Window) => { - const customPlatformMethods = config.get('platformDetection'); + const customPlatformMethods = config.get('platform'); return (Object.keys(PLATFORMS_MAP) as Platforms[]).filter(p => { const customMethod = customPlatformMethods && customPlatformMethods[p]; return typeof customMethod === 'function' ? customMethod(win) : PLATFORMS_MAP[p](win); @@ -123,7 +123,7 @@ export const testUserAgent = (win: Window, expr: RegExp) => const matchMedia = (win: Window, query: string): boolean => win.matchMedia && win.matchMedia(query).matches; -export type PlatformDetectionConfig = Partial; +export type PlatformConfig = Partial; const PLATFORMS_MAP = { 'ipad': isIpad, diff --git a/core/src/utils/test/config/e2e.ts b/core/src/utils/test/config/e2e.ts new file mode 100644 index 00000000000..c549ba344a4 --- /dev/null +++ b/core/src/utils/test/config/e2e.ts @@ -0,0 +1,13 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('config', async () => { + const page = await newE2EPage({ + url: '/src/utils/test/config?ionic:_testing=true' + }); + + let platforms = await page.evaluate(() => (window as any).Ionic.platforms); + + expect(platforms.includes('cordova')).toEqual(true); + expect(platforms.includes('electron')).toEqual(true); + expect(platforms.includes('pwa')).toEqual(false); +}); diff --git a/core/src/utils/test/config/index.html b/core/src/utils/test/config/index.html new file mode 100644 index 00000000000..05422dc621b --- /dev/null +++ b/core/src/utils/test/config/index.html @@ -0,0 +1,46 @@ + + + + + + Config + + + + + + + + + + + + + + + Config + + + + +

Hello world!

+ + + + + From c981a33ea59fce21ad19f0cb5444d737b3e27f5e Mon Sep 17 00:00:00 2001 From: willmartindev Date: Tue, 14 Sep 2021 11:52:24 -0400 Subject: [PATCH 5/7] test(platform): remove e2e and add spec test --- core/src/utils/test/config/e2e.ts | 13 ------ core/src/utils/test/config/index.html | 46 -------------------- core/src/utils/test/platform.spec.ts | 23 +++++++++- packages/react-router/test-app/src/index.tsx | 4 +- 4 files changed, 23 insertions(+), 63 deletions(-) delete mode 100644 core/src/utils/test/config/e2e.ts delete mode 100644 core/src/utils/test/config/index.html diff --git a/core/src/utils/test/config/e2e.ts b/core/src/utils/test/config/e2e.ts deleted file mode 100644 index c549ba344a4..00000000000 --- a/core/src/utils/test/config/e2e.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('config', async () => { - const page = await newE2EPage({ - url: '/src/utils/test/config?ionic:_testing=true' - }); - - let platforms = await page.evaluate(() => (window as any).Ionic.platforms); - - expect(platforms.includes('cordova')).toEqual(true); - expect(platforms.includes('electron')).toEqual(true); - expect(platforms.includes('pwa')).toEqual(false); -}); diff --git a/core/src/utils/test/config/index.html b/core/src/utils/test/config/index.html deleted file mode 100644 index 05422dc621b..00000000000 --- a/core/src/utils/test/config/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - Config - - - - - - - - - - - - - - - Config - - - - -

Hello world!

- - - - - diff --git a/core/src/utils/test/platform.spec.ts b/core/src/utils/test/platform.spec.ts index 478961c2705..31e606ef40c 100644 --- a/core/src/utils/test/platform.spec.ts +++ b/core/src/utils/test/platform.spec.ts @@ -1,3 +1,5 @@ +import initialize from '../../global/ionic-global'; + import { testUserAgent, getPlatforms, isPlatform } from '../platform'; import { PlatformConfiguration, configureBrowser } from './platform.utils'; @@ -122,7 +124,7 @@ describe('Platform Tests', () => { expect(isPlatform(win, 'pwa')).toEqual(true); expect(isPlatform(win, 'cordova')).toEqual(false); }); - + it('should return true for "ios", "ipad", and "tablet" and false for "iphone" and "android"', () => { const win = configureBrowser(PlatformConfiguration.iPadOS); expect(isPlatform(win, 'ios')).toEqual(true); @@ -132,4 +134,21 @@ describe('Platform Tests', () => { expect(isPlatform(win, 'android')).toEqual(false); }); }) -}); \ No newline at end of file + + describe('Custom Platform Config', () => { + it('should use custom platform detection methods', () => { + const win = configureBrowser(PlatformConfiguration.DesktopSafari); + + initialize({ + 'platform': { + 'desktop': (win) => false, + 'cordova': (win) => true + } + }); + + expect(isPlatform(win, 'desktop')).toEqual(false); + expect(isPlatform(win, 'cordova')).toEqual(true); + expect(getPlatforms(win).includes('cordova')).toEqual(true); + }); + }) +}); diff --git a/packages/react-router/test-app/src/index.tsx b/packages/react-router/test-app/src/index.tsx index c0526f08258..5451d9c12ee 100644 --- a/packages/react-router/test-app/src/index.tsx +++ b/packages/react-router/test-app/src/index.tsx @@ -1,11 +1,11 @@ -import { setupConfig, isPlatform } from '@ionic/react'; +import { setupConfig } from '@ionic/react'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; setupConfig({ - platformDetection: { + platform: { 'cordova': (win: any) => { const isCordova = !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); console.log('Checking if platform is "cordova" with a custom detection method: ', isCordova); From 7778f4e5fe377eaf031f40d8619b2c431cf2148e Mon Sep 17 00:00:00 2001 From: willmartindev Date: Tue, 14 Sep 2021 13:38:15 -0400 Subject: [PATCH 6/7] fix: export PlatformConfig type --- angular/src/index.ts | 2 +- core/src/index.ts | 2 +- packages/react/src/components/index.ts | 1 + packages/vue/src/index.ts | 2 +- 4 files changed, 4 insertions(+), 3 deletions(-) diff --git a/angular/src/index.ts b/angular/src/index.ts index 51b6264f0c4..ea02877f802 100644 --- a/angular/src/index.ts +++ b/angular/src/index.ts @@ -45,7 +45,7 @@ export * from './types/ionic-lifecycle-hooks'; export { IonicModule } from './ionic-module'; // UTILS -export { IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper } from '@ionic/core'; +export { PlatformConfig, IonicSafeString, getPlatforms, isPlatform, createAnimation, IonicSwiper } from '@ionic/core'; // CORE TYPES export { diff --git a/core/src/index.ts b/core/src/index.ts index f493a61802b..d6940bd4e90 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -7,7 +7,7 @@ export { getTimeGivenProgression } from './utils/animation/cubic-bezier'; export { createGesture } from './utils/gesture'; export { initialize } from './global/ionic-global'; export { componentOnReady } from './utils/helpers'; -export { isPlatform, Platforms, getPlatforms } from './utils/platform'; +export { isPlatform, Platforms, PlatformConfig, getPlatforms } from './utils/platform'; export { IonicSafeString } from './utils/sanitization'; export { IonicConfig, getMode, setupConfig } from './utils/config'; export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD } from './components/nav/constants'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 6ab65c6985b..70f375c0cbe 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -35,6 +35,7 @@ export { NavComponentWithProps, setupConfig, IonicSwiper, + PlatformConfig, SpinnerTypes, diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 9e37d05ac1d..8b7010b7d3b 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -41,7 +41,7 @@ export { IonicSafeString, // Platform - isPlatform, Platforms, getPlatforms, + isPlatform, Platforms, PlatformConfig, getPlatforms, // Gesture Gesture, From 5fe56bb02b4e12fb60404e3195167374636ede34 Mon Sep 17 00:00:00 2001 From: willmartindev Date: Tue, 14 Sep 2021 15:15:45 -0400 Subject: [PATCH 7/7] revert(react-router): remove setupConfig in test-app --- packages/react-router/test-app/src/index.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/react-router/test-app/src/index.tsx b/packages/react-router/test-app/src/index.tsx index 5451d9c12ee..82c1a6b6e14 100644 --- a/packages/react-router/test-app/src/index.tsx +++ b/packages/react-router/test-app/src/index.tsx @@ -1,19 +1,8 @@ -import { setupConfig } from '@ionic/react'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; -setupConfig({ - platform: { - 'cordova': (win: any) => { - const isCordova = !!(win['cordova'] || win['phonegap'] || win['PhoneGap']); - console.log('Checking if platform is "cordova" with a custom detection method: ', isCordova); - return isCordova; - }, - } -}); - ReactDOM.render(, document.getElementById('root')); // If you want your app to work offline and load faster, you can change