Skip to content

Commit 34dfc3c

Browse files
manucorporatmanucorporat
authored
refactor(all): updating to newest stencil apis (ionic-team#18578)
* chore(): update ionicons * refactor(all): updating to newest stencil apis * fix lint issues * more changes * moreee * fix treeshaking * fix config * fix checkbox * fix stuff * chore(): update ionicons * fix linting errors
1 parent 78e477b commit 34dfc3c

File tree

112 files changed

+1229
-1233
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+1229
-1233
lines changed

‎angular/test/test-app/src/app/providers/providers.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component } from '@angular/core';
22
import {
3-
Platform, Config, ModalController, AlertController, ActionSheetController,
4-
PopoverController, ToastController, Events, PickerController, MenuController,
5-
LoadingController, NavController, DomController
3+
Platform, ModalController, AlertController, ActionSheetController,
4+
PopoverController, ToastController, Events, PickerController, MenuController,
5+
LoadingController, NavController, DomController, Config
66
} from '@ionic/angular';
77

88
@Component({

‎core/package.json‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,32 +30,31 @@
3030
"loader/"
3131
],
3232
"dependencies": {
33-
"ionicons": "4.5.10-0",
33+
"ionicons": "4.5.10-1",
3434
"tslib": "^1.10.0"
3535
},
3636
"devDependencies": {
3737
"@stencil/core": "1.0.7",
38-
"@stencil/sass": "latest",
39-
"@stencil/utils": "latest",
38+
"@stencil/sass": "1.0.0",
4039
"@types/jest": "24.0.13",
4140
"@types/node": "10.12.18",
4241
"@types/puppeteer": "1.12.4",
4342
"@types/swiper": "4.4.1",
4443
"aws-sdk": "^2.320.0",
4544
"chromedriver": "^2.38.3",
4645
"clean-css-cli": "^4.1.11",
47-
"fs-extra": "^7.0.0",
46+
"fs-extra": "^8.0.1",
4847
"jest": "24.8.0",
4948
"jest-cli": "24.8.0",
5049
"np": "^3.0.4",
5150
"pixelmatch": "4.0.2",
5251
"puppeteer": "1.17.0",
53-
"rollup": "1.1.2",
54-
"rollup-plugin-node-resolve": "4.0.0",
52+
"rollup": "1.15.2",
53+
"rollup-plugin-node-resolve": "5.0.2",
5554
"rollup-plugin-virtual": "^1.0.1",
56-
"sass": "^1.20.1",
57-
"stylelint": "9.10.1",
58-
"stylelint-order": "2.0.0",
55+
"sass": "^1.21.0",
56+
"stylelint": "10.1.0",
57+
"stylelint-order": "3.0.0",
5958
"swiper": "4.4.6",
6059
"tslint": "^5.10.0",
6160
"tslint-ionic-rules": "0.0.21",

‎core/src/components/action-sheet-controller/action-sheet-controller.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
1+
import { Component, ComponentInterface, Method } from '@stencil/core';
22

33
import { ActionSheetOptions, OverlayController } from '../../interface';
44
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,8 +8,6 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
88
})
99
export class ActionSheetController implements ComponentInterface, OverlayController {
1010

11-
@Prop({ context: 'document' }) doc!: Document;
12-
1311
/**
1412
* Create an action sheet overlay with action sheet options.
1513
*

‎core/src/components/action-sheet/action-sheet.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';
22

33
import { getIonMode } from '../../global/ionic-global';
4-
import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
4+
import { ActionSheetButton, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
55
import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
66
import { getClassMap } from '../../utils/theme';
77

@@ -29,7 +29,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
2929

3030
@Element() el!: HTMLElement;
3131

32-
@Prop({ context: 'config' }) config!: Config;
3332
/** @internal */
3433
@Prop() overlayIndex!: number;
3534

@@ -204,7 +203,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
204203
zIndex: 20000 + this.overlayIndex,
205204
},
206205
class: {
207-
[`${mode}`]: true,
206+
[mode]: true,
208207

209208
...getClassMap(this.cssClass),
210209
'action-sheet-translucent': this.translucent

‎core/src/components/alert-controller/alert-controller.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
1+
import { Component, ComponentInterface, Method } from '@stencil/core';
22

33
import { AlertOptions, OverlayController } from '../../interface';
44
import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,8 +8,6 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
88
})
99
export class AlertController implements ComponentInterface, OverlayController {
1010

11-
@Prop({ context: 'document' }) doc!: Document;
12-
1311
/**
1412
* Create an alert overlay with alert options.
1513
*

‎core/src/components/alert/alert.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch, h } from '@stencil/core';
22

33
import { getIonMode } from '../../global/ionic-global';
4-
import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
4+
import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
55
import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
66
import { sanitizeDOMString } from '../../utils/sanitization';
77
import { getClassMap } from '../../utils/theme';
@@ -35,8 +35,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
3535

3636
@Element() el!: HTMLIonAlertElement;
3737

38-
@Prop({ context: 'config' }) config!: Config;
39-
4038
/** @internal */
4139
@Prop() overlayIndex!: number;
4240

@@ -406,7 +404,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
406404
},
407405
class: {
408406
...getClassMap(this.cssClass),
409-
[`${mode}`]: true,
407+
[mode]: true,
410408
'alert-translucent': this.translucent
411409
}
412410
};

‎core/src/components/anchor/anchor.tsx‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ComponentInterface, Listen, Prop, h } from '@stencil/core';
1+
import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
22

33
import { getIonMode } from '../../global/ionic-global';
44
import { Color, RouterDirection } from '../../interface';
@@ -12,8 +12,6 @@ import { createColorClasses, openURL } from '../../utils/theme';
1212
})
1313
export class Anchor implements ComponentInterface, AnchorInterface {
1414

15-
@Prop({ context: 'window' }) win!: Window;
16-
1715
/**
1816
* The color to use from your application's color palette.
1917
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -54,35 +52,31 @@ export class Anchor implements ComponentInterface, AnchorInterface {
5452
*/
5553
@Prop() target: string | undefined;
5654

57-
@Listen('click')
58-
onClick(ev: Event) {
59-
openURL(this.win, this.href, ev, this.routerDirection);
60-
}
61-
62-
hostData() {
63-
const mode = getIonMode(this);
64-
console.log('anchor', mode);
65-
return {
66-
class: {
67-
...createColorClasses(this.color),
68-
[`${mode}`]: true,
69-
'ion-activatable': true
70-
}
71-
};
55+
private onClick = (ev: Event) => {
56+
openURL(this.href, ev, this.routerDirection);
7257
}
7358

7459
render() {
60+
const mode = getIonMode(this);
7561
const attrs = {
7662
download: this.download,
7763
href: this.href,
7864
rel: this.rel,
7965
target: this.target
8066
};
81-
8267
return (
83-
<a {...attrs}>
84-
<slot></slot>
85-
</a>
68+
<Host
69+
onClick={this.onClick}
70+
class={{
71+
...createColorClasses(this.color),
72+
[mode]: true,
73+
'ion-activatable': true
74+
}}
75+
>
76+
<a {...attrs}>
77+
<slot></slot>
78+
</a>
79+
</Host>
8680
);
8781
}
8882
}

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

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
1+
import { Component, ComponentInterface, Element } from '@stencil/core';
22

3+
import { config } from '../../global/config';
34
import { getIonMode } from '../../global/ionic-global';
4-
import { Config } from '../../interface';
55
import { rIC } from '../../utils/helpers';
66
import { isPlatform } from '../../utils/platform';
77

@@ -13,21 +13,16 @@ export class App implements ComponentInterface {
1313

1414
@Element() el!: HTMLElement;
1515

16-
@Prop({ context: 'window' }) win!: Window;
17-
@Prop({ context: 'config' }) config!: Config;
18-
1916
componentDidLoad() {
2017
rIC(() => {
21-
const { win, config } = this;
22-
2318
if (!config.getBoolean('_testing')) {
24-
importTapClick(win, config);
19+
importTapClick();
2520
}
2621

27-
importInputShims(win, config);
28-
importStatusTap(win, config);
29-
importHardwareBackButton(win, config);
30-
importFocusVisible(win);
22+
importInputShims();
23+
importStatusTap();
24+
importHardwareBackButton();
25+
importFocusVisible();
3126
});
3227
}
3328

@@ -36,43 +31,43 @@ export class App implements ComponentInterface {
3631

3732
return {
3833
class: {
39-
[`${mode}`]: true,
34+
[mode]: true,
4035
'ion-page': true,
41-
'force-statusbar-padding': this.config.getBoolean('_forceStatusbarPadding')
36+
'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding')
4237
}
4338
};
4439
}
4540
}
4641

47-
function importHardwareBackButton(win: Window, config: Config) {
48-
const hardwareBackConfig = config.getBoolean('hardwareBackButton', isPlatform(win, 'hybrid'));
42+
function importHardwareBackButton() {
43+
const hardwareBackConfig = config.getBoolean('hardwareBackButton', isPlatform(window, 'hybrid'));
4944
if (hardwareBackConfig) {
50-
import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton(win));
45+
import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
5146
}
5247
}
5348

54-
function importStatusTap(win: Window, config: Config) {
55-
const statusTap = config.getBoolean('statusTap', isPlatform(win, 'hybrid'));
49+
function importStatusTap() {
50+
const statusTap = config.getBoolean('statusTap', isPlatform(window, 'hybrid'));
5651
if (statusTap) {
57-
import('../../utils/status-tap').then(module => module.startStatusTap(win));
52+
import('../../utils/status-tap').then(module => module.startStatusTap());
5853
}
5954
}
6055

61-
function importFocusVisible(win: Window) {
62-
import('../../utils/focus-visible').then(module => module.startFocusVisible(win.document));
56+
function importFocusVisible() {
57+
import('../../utils/focus-visible').then(module => module.startFocusVisible());
6358
}
6459

65-
function importTapClick(win: Window, config: Config) {
66-
import('../../utils/tap-click').then(module => module.startTapClick(win.document, config));
60+
function importTapClick() {
61+
import('../../utils/tap-click').then(module => module.startTapClick(config));
6762
}
6863

69-
function importInputShims(win: Window, config: Config) {
70-
const inputShims = config.getBoolean('inputShims', needInputShims(win));
64+
function importInputShims() {
65+
const inputShims = config.getBoolean('inputShims', needInputShims());
7166
if (inputShims) {
72-
import('../../utils/input-shims/input-shims').then(module => module.startInputShims(win.document, config));
67+
import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
7368
}
7469
}
7570

76-
function needInputShims(win: Window) {
77-
return isPlatform(win, 'ios') && isPlatform(win, 'mobile');
71+
function needInputShims() {
72+
return isPlatform(window, 'ios') && isPlatform(window, 'mobile');
7873
}

‎core/src/components/avatar/avatar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export class Avatar implements ComponentInterface {
1717

1818
return {
1919
class: {
20-
[`${mode}`]: true,
20+
[mode]: true,
2121
}
2222
};
2323
}

0 commit comments

Comments
 (0)