Skip to content

Commit 3e99534

Browse files
brandyscarneybrandyscarney
committed
refactor(app): move the majority of the bootstrapping to global
1 parent 35b1a45 commit 3e99534

File tree

2 files changed

+80
-70
lines changed

2 files changed

+80
-70
lines changed

‎core/src/components/app/app.tsx‎

Lines changed: 2 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import type { ComponentInterface } from '@stencil/core';
22
import { Build, Component, Element, Host, Method, h } from '@stencil/core';
33
import type { FocusVisibleUtility } from '@utils/focus-visible';
4-
import { shouldUseCloseWatcher } from '@utils/hardware-back-button';
5-
import { printIonWarning } from '@utils/logging';
6-
import { isPlatform } from '@utils/platform';
74

85
import { config } from '../../global/config';
9-
import { getIonMode } from '../../global/ionic-global';
6+
import { getIonMode, rIC } from '../../global/ionic-global';
107

118
@Component({
129
tag: 'ion-app',
@@ -18,43 +15,9 @@ export class App implements ComponentInterface {
1815
@Element() el!: HTMLElement;
1916

2017
componentDidLoad() {
18+
// TODO can we move focus visible to global
2119
if (Build.isBrowser) {
2220
rIC(async () => {
23-
const isHybrid = isPlatform(window, 'hybrid');
24-
if (!config.getBoolean('_testing')) {
25-
import('../../utils/tap-click').then((module) => module.startTapClick(config));
26-
}
27-
if (config.getBoolean('statusTap', isHybrid)) {
28-
import('../../utils/status-tap').then((module) => module.startStatusTap());
29-
}
30-
if (config.getBoolean('inputShims', needInputShims())) {
31-
/**
32-
* needInputShims() ensures that only iOS and Android
33-
* platforms proceed into this block.
34-
*/
35-
const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
36-
import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
37-
}
38-
const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
39-
const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
40-
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
41-
hardwareBackButtonModule.startHardwareBackButton();
42-
} else {
43-
/**
44-
* If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
45-
* then the close watcher will not be used.
46-
*/
47-
if (shouldUseCloseWatcher()) {
48-
printIonWarning(
49-
'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
50-
);
51-
}
52-
53-
hardwareBackButtonModule.blockHardwareBackButton();
54-
}
55-
if (typeof (window as any) !== 'undefined') {
56-
import('../../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
57-
}
5821
import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
5922
});
6023
}
@@ -90,33 +53,3 @@ export class App implements ComponentInterface {
9053
);
9154
}
9255
}
93-
94-
const needInputShims = () => {
95-
/**
96-
* iOS always needs input shims
97-
*/
98-
const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
99-
if (needsShimsIOS) {
100-
return true;
101-
}
102-
103-
/**
104-
* Android only needs input shims when running
105-
* in the browser and only if the browser is using the
106-
* new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
107-
*/
108-
const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
109-
if (isAndroidMobileWeb) {
110-
return true;
111-
}
112-
113-
return false;
114-
};
115-
116-
const rIC = (callback: () => void) => {
117-
if ('requestIdleCallback' in window) {
118-
(window as any).requestIdleCallback(callback);
119-
} else {
120-
setTimeout(callback, 32);
121-
}
122-
};

‎core/src/global/ionic-global.ts‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import { getMode, setMode, setPlatformHelpers } from '@stencil/core';
1+
import { Build, getMode, setMode, setPlatformHelpers } from '@stencil/core';
22

33
import type { IonicConfig, Mode } from '../interface';
4+
import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
5+
import { printIonWarning } from '../utils/logging';
46
import { isPlatform, setupPlatforms } from '../utils/platform';
57

68
import { config, configFromSession, configFromURL, saveConfig } from './config';
@@ -13,6 +15,36 @@ export const getIonMode = (ref?: any): Mode => {
1315
return (ref && getMode(ref)) || defaultMode;
1416
};
1517

18+
export const rIC = (callback: () => void) => {
19+
if ('requestIdleCallback' in window) {
20+
(window as any).requestIdleCallback(callback);
21+
} else {
22+
setTimeout(callback, 32);
23+
}
24+
};
25+
26+
export const needInputShims = () => {
27+
/**
28+
* iOS always needs input shims
29+
*/
30+
const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
31+
if (needsShimsIOS) {
32+
return true;
33+
}
34+
35+
/**
36+
* Android only needs input shims when running
37+
* in the browser and only if the browser is using the
38+
* new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
39+
*/
40+
const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
41+
if (isAndroidMobileWeb) {
42+
return true;
43+
}
44+
45+
return false;
46+
};
47+
1648
export const initialize = (userConfig: IonicConfig = {}) => {
1749
if (typeof (window as any) === 'undefined') {
1850
return;
@@ -86,6 +118,51 @@ export const initialize = (userConfig: IonicConfig = {}) => {
86118
}
87119
return defaultMode;
88120
});
121+
122+
// `IonApp` code
123+
// ----------------------------------------------
124+
125+
if (Build.isBrowser) {
126+
rIC(async () => {
127+
const isHybrid = isPlatform(window, 'hybrid');
128+
if (!config.getBoolean('_testing')) {
129+
import('../utils/tap-click').then((module) => module.startTapClick(config));
130+
}
131+
if (config.getBoolean('statusTap', isHybrid)) {
132+
import('../utils/status-tap').then((module) => module.startStatusTap());
133+
}
134+
if (config.getBoolean('inputShims', needInputShims())) {
135+
/**
136+
* needInputShims() ensures that only iOS and Android
137+
* platforms proceed into this block.
138+
*/
139+
const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
140+
import('../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
141+
}
142+
const hardwareBackButtonModule = await import('../utils/hardware-back-button');
143+
const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
144+
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
145+
hardwareBackButtonModule.startHardwareBackButton();
146+
} else {
147+
/**
148+
* If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
149+
* then the close watcher will not be used.
150+
*/
151+
if (shouldUseCloseWatcher()) {
152+
printIonWarning(
153+
'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
154+
);
155+
}
156+
157+
hardwareBackButtonModule.blockHardwareBackButton();
158+
}
159+
if (typeof (window as any) !== 'undefined') {
160+
import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
161+
}
162+
// TODO
163+
// import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
164+
});
165+
}
89166
};
90167

91168
export default initialize;

0 commit comments

Comments
 (0)