Skip to content

Commit 9be6ad0

Browse files
author
Tanner Reits
committed
refactor(app): move the majority of the bootstrapping to global
1 parent 61876a5 commit 9be6ad0

File tree

2 files changed

+79
-70
lines changed

2 files changed

+79
-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 { getIonTheme } from '../../global/ionic-global';
6+
import { getIonTheme, rIC } from '../../global/ionic-global';
107

118
/**
129
* @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -22,43 +19,9 @@ export class App implements ComponentInterface {
2219
@Element() el!: HTMLElement;
2320

2421
componentDidLoad() {
22+
// TODO can we move focus visible to global
2523
if (Build.isBrowser) {
2624
rIC(async () => {
27-
const isHybrid = isPlatform(window, 'hybrid');
28-
if (!config.getBoolean('_testing')) {
29-
import('../../utils/tap-click').then((module) => module.startTapClick(config));
30-
}
31-
if (config.getBoolean('statusTap', isHybrid)) {
32-
import('../../utils/status-tap').then((module) => module.startStatusTap());
33-
}
34-
if (config.getBoolean('inputShims', needInputShims())) {
35-
/**
36-
* needInputShims() ensures that only iOS and Android
37-
* platforms proceed into this block.
38-
*/
39-
const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
40-
import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
41-
}
42-
const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
43-
const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
44-
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
45-
hardwareBackButtonModule.startHardwareBackButton();
46-
} else {
47-
/**
48-
* If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
49-
* then the close watcher will not be used.
50-
*/
51-
if (shouldUseCloseWatcher()) {
52-
printIonWarning(
53-
'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.'
54-
);
55-
}
56-
57-
hardwareBackButtonModule.blockHardwareBackButton();
58-
}
59-
if (typeof (window as any) !== 'undefined') {
60-
import('../../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
61-
}
6225
import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
6326
});
6427
}
@@ -94,33 +57,3 @@ export class App implements ComponentInterface {
9457
);
9558
}
9659
}
97-
98-
const needInputShims = () => {
99-
/**
100-
* iOS always needs input shims
101-
*/
102-
const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
103-
if (needsShimsIOS) {
104-
return true;
105-
}
106-
107-
/**
108-
* Android only needs input shims when running
109-
* in the browser and only if the browser is using the
110-
* new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
111-
*/
112-
const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
113-
if (isAndroidMobileWeb) {
114-
return true;
115-
}
116-
117-
return false;
118-
};
119-
120-
const rIC = (callback: () => void) => {
121-
if ('requestIdleCallback' in window) {
122-
(window as any).requestIdleCallback(callback);
123-
} else {
124-
setTimeout(callback, 32);
125-
}
126-
};

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

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { getMode, setMode, setPlatformHelpers, getElement } from '@stencil/core';
1+
import { Build, getMode, setMode, setPlatformHelpers, getElement } from '@stencil/core';
22
import { printIonWarning } from '@utils/logging';
33

44
import type { IonicConfig, Mode, Theme } from '../interface';
5+
import { shouldUseCloseWatcher } from '../utils/hardware-back-button';
56
import { isPlatform, setupPlatforms } from '../utils/platform';
67

78
import { config, configFromSession, configFromURL, saveConfig } from './config';
@@ -131,6 +132,36 @@ export const getIonTheme = (ref?: any): Theme => {
131132
return defaultTheme;
132133
};
133134

135+
export const rIC = (callback: () => void) => {
136+
if ('requestIdleCallback' in window) {
137+
(window as any).requestIdleCallback(callback);
138+
} else {
139+
setTimeout(callback, 32);
140+
}
141+
};
142+
143+
export const needInputShims = () => {
144+
/**
145+
* iOS always needs input shims
146+
*/
147+
const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
148+
if (needsShimsIOS) {
149+
return true;
150+
}
151+
152+
/**
153+
* Android only needs input shims when running
154+
* in the browser and only if the browser is using the
155+
* new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
156+
*/
157+
const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
158+
if (isAndroidMobileWeb) {
159+
return true;
160+
}
161+
162+
return false;
163+
};
164+
134165
export const initialize = (userConfig: IonicConfig = {}) => {
135166
if (typeof (window as any) === 'undefined') {
136167
return;
@@ -255,6 +286,51 @@ export const initialize = (userConfig: IonicConfig = {}) => {
255286
}
256287
return defaultTheme;
257288
});
289+
290+
// `IonApp` code
291+
// ----------------------------------------------
292+
293+
if (Build.isBrowser) {
294+
rIC(async () => {
295+
const isHybrid = isPlatform(window, 'hybrid');
296+
if (!config.getBoolean('_testing')) {
297+
import('../utils/tap-click').then((module) => module.startTapClick(config));
298+
}
299+
if (config.getBoolean('statusTap', isHybrid)) {
300+
import('../utils/status-tap').then((module) => module.startStatusTap());
301+
}
302+
if (config.getBoolean('inputShims', needInputShims())) {
303+
/**
304+
* needInputShims() ensures that only iOS and Android
305+
* platforms proceed into this block.
306+
*/
307+
const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
308+
import('../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
309+
}
310+
const hardwareBackButtonModule = await import('../utils/hardware-back-button');
311+
const supportsHardwareBackButtonEvents = isHybrid || shouldUseCloseWatcher();
312+
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
313+
hardwareBackButtonModule.startHardwareBackButton();
314+
} else {
315+
/**
316+
* If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
317+
* then the close watcher will not be used.
318+
*/
319+
if (shouldUseCloseWatcher()) {
320+
printIonWarning(
321+
'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.'
322+
);
323+
}
324+
325+
hardwareBackButtonModule.blockHardwareBackButton();
326+
}
327+
if (typeof (window as any) !== 'undefined') {
328+
import('../utils/keyboard/keyboard').then((module) => module.startKeyboardAssist(window));
329+
}
330+
// TODO
331+
// import('../../utils/focus-visible').then((module) => (this.focusVisible = module.startFocusVisible()));
332+
});
333+
}
258334
};
259335

260336
export default initialize;

0 commit comments

Comments
 (0)