refactor(all): updating to newest stencil apis (#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
ionic-team · Jun 23, 2019 · 34dfc3c · 34dfc3c
1 parent 78e477b
commit 34dfc3c
Show file tree

Hide file tree

Showing 112 changed files with 1,229 additions and 1,233 deletions.
diff --git a/angular/test/test-app/src/app/providers/providers.component.ts b/angular/test/test-app/src/app/providers/providers.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import {
-  Platform, Config, ModalController, AlertController, ActionSheetController,
-  PopoverController, ToastController,  Events, PickerController, MenuController,
-  LoadingController, NavController, DomController
+  Platform, ModalController, AlertController, ActionSheetController,
+  PopoverController, ToastController, Events, PickerController, MenuController,
+  LoadingController, NavController, DomController, Config
 } from '@ionic/angular';
 
 @Component({

diff --git a/core/package.json b/core/package.json
@@ -30,32 +30,31 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "4.5.10-0",
+    "ionicons": "4.5.10-1",
     "tslib": "^1.10.0"
   },
   "devDependencies": {
     "@stencil/core": "1.0.7",
-    "@stencil/sass": "latest",
-    "@stencil/utils": "latest",
+    "@stencil/sass": "1.0.0",
     "@types/jest": "24.0.13",
     "@types/node": "10.12.18",
     "@types/puppeteer": "1.12.4",
     "@types/swiper": "4.4.1",
     "aws-sdk": "^2.320.0",
     "chromedriver": "^2.38.3",
     "clean-css-cli": "^4.1.11",
-    "fs-extra": "^7.0.0",
+    "fs-extra": "^8.0.1",
     "jest": "24.8.0",
     "jest-cli": "24.8.0",
     "np": "^3.0.4",
     "pixelmatch": "4.0.2",
     "puppeteer": "1.17.0",
-    "rollup": "1.1.2",
-    "rollup-plugin-node-resolve": "4.0.0",
+    "rollup": "1.15.2",
+    "rollup-plugin-node-resolve": "5.0.2",
     "rollup-plugin-virtual": "^1.0.1",
-    "sass": "^1.20.1",
-    "stylelint": "9.10.1",
-    "stylelint-order": "2.0.0",
+    "sass": "^1.21.0",
+    "stylelint": "10.1.0",
+    "stylelint-order": "3.0.0",
     "swiper": "4.4.6",
     "tslint": "^5.10.0",
     "tslint-ionic-rules": "0.0.21",

diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method } from '@stencil/core';
 
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,8 +8,6 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 })
 export class ActionSheetController implements ComponentInterface, OverlayController {
 
-  @Prop({ context: 'document' }) doc!: Document;
-
   /**
    * Create an action sheet overlay with action sheet options.
    *

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { ActionSheetButton, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
@@ -29,7 +29,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'config' }) config!: Config;
   /** @internal */
   @Prop() overlayIndex!: number;
 
@@ -204,7 +203,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         zIndex: 20000 + this.overlayIndex,
       },
       class: {
-        [`${mode}`]: true,
+        [mode]: true,
 
         ...getClassMap(this.cssClass),
         'action-sheet-translucent': this.translucent

diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method } from '@stencil/core';
 
 import { AlertOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -8,8 +8,6 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 })
 export class AlertController implements ComponentInterface, OverlayController {
 
-  @Prop({ context: 'document' }) doc!: Document;
-
   /**
    * Create an alert overlay with alert options.
    *

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
-import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
+import { AlertButton, AlertInput, Animation, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { sanitizeDOMString } from '../../utils/sanitization';
 import { getClassMap } from '../../utils/theme';
@@ -35,8 +35,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
   @Element() el!: HTMLIonAlertElement;
 
-  @Prop({ context: 'config' }) config!: Config;
-
   /** @internal */
   @Prop() overlayIndex!: number;
 
@@ -406,7 +404,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
       },
       class: {
         ...getClassMap(this.cssClass),
-        [`${mode}`]: true,
+        [mode]: true,
         'alert-translucent': this.translucent
       }
     };

diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Listen, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, RouterDirection } from '../../interface';
@@ -12,8 +12,6 @@ import { createColorClasses, openURL } from '../../utils/theme';
 })
 export class Anchor implements ComponentInterface, AnchorInterface {
 
-  @Prop({ context: 'window' }) win!: Window;
-
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -54,35 +52,31 @@ export class Anchor implements ComponentInterface, AnchorInterface {
    */
   @Prop() target: string | undefined;
 
-  @Listen('click')
-  onClick(ev: Event) {
-    openURL(this.win, this.href, ev, this.routerDirection);
-  }
-
-  hostData() {
-    const mode = getIonMode(this);
-    console.log('anchor', mode);
-    return {
-      class: {
-        ...createColorClasses(this.color),
-        [`${mode}`]: true,
-        'ion-activatable': true
-      }
-    };
+  private onClick = (ev: Event) => {
+    openURL(this.href, ev, this.routerDirection);
   }
 
   render() {
+    const mode = getIonMode(this);
     const attrs = {
       download: this.download,
       href: this.href,
       rel: this.rel,
       target: this.target
     };
-
     return (
-      <a {...attrs}>
-        <slot></slot>
-      </a>
+      <Host
+        onClick={this.onClick}
+        class={{
+          ...createColorClasses(this.color),
+          [mode]: true,
+          'ion-activatable': true
+        }}
+      >
+        <a {...attrs}>
+          <slot></slot>
+        </a>
+      </Host>
     );
   }
 }
diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
@@ -1,7 +1,7 @@
-import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element } from '@stencil/core';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
-import { Config } from '../../interface';
 import { rIC } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
 
@@ -13,21 +13,16 @@ export class App implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'window' }) win!: Window;
-  @Prop({ context: 'config' }) config!: Config;
-
   componentDidLoad() {
     rIC(() => {
-      const { win, config } = this;
-
       if (!config.getBoolean('_testing')) {
-        importTapClick(win, config);
+        importTapClick();
       }
 
-      importInputShims(win, config);
-      importStatusTap(win, config);
-      importHardwareBackButton(win, config);
-      importFocusVisible(win);
+      importInputShims();
+      importStatusTap();
+      importHardwareBackButton();
+      importFocusVisible();
     });
   }
 
@@ -36,43 +31,43 @@ export class App implements ComponentInterface {
 
     return {
       class: {
-        [`${mode}`]: true,
+        [mode]: true,
         'ion-page': true,
-        'force-statusbar-padding': this.config.getBoolean('_forceStatusbarPadding')
+        'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding')
       }
     };
   }
 }
 
-function importHardwareBackButton(win: Window, config: Config) {
-  const hardwareBackConfig = config.getBoolean('hardwareBackButton', isPlatform(win, 'hybrid'));
+function importHardwareBackButton() {
+  const hardwareBackConfig = config.getBoolean('hardwareBackButton', isPlatform(window, 'hybrid'));
   if (hardwareBackConfig) {
-    import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton(win));
+    import('../../utils/hardware-back-button').then(module => module.startHardwareBackButton());
   }
 }
 
-function importStatusTap(win: Window, config: Config) {
-  const statusTap = config.getBoolean('statusTap', isPlatform(win, 'hybrid'));
+function importStatusTap() {
+  const statusTap = config.getBoolean('statusTap', isPlatform(window, 'hybrid'));
   if (statusTap) {
-    import('../../utils/status-tap').then(module => module.startStatusTap(win));
+    import('../../utils/status-tap').then(module => module.startStatusTap());
   }
 }
 
-function importFocusVisible(win: Window) {
-  import('../../utils/focus-visible').then(module => module.startFocusVisible(win.document));
+function importFocusVisible() {
+  import('../../utils/focus-visible').then(module => module.startFocusVisible());
 }
 
-function importTapClick(win: Window, config: Config) {
-  import('../../utils/tap-click').then(module => module.startTapClick(win.document, config));
+function importTapClick() {
+  import('../../utils/tap-click').then(module => module.startTapClick(config));
 }
 
-function importInputShims(win: Window, config: Config) {
-  const inputShims = config.getBoolean('inputShims', needInputShims(win));
+function importInputShims() {
+  const inputShims = config.getBoolean('inputShims', needInputShims());
   if (inputShims) {
-    import('../../utils/input-shims/input-shims').then(module => module.startInputShims(win.document, config));
+    import('../../utils/input-shims/input-shims').then(module => module.startInputShims(config));
   }
 }
 
-function needInputShims(win: Window) {
-  return isPlatform(win, 'ios') && isPlatform(win, 'mobile');
+function needInputShims() {
+  return isPlatform(window, 'ios') && isPlatform(window, 'mobile');
 }
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
@@ -17,7 +17,7 @@ export class Avatar implements ComponentInterface {
 
     return {
       class: {
-        [`${mode}`]: true,
+        [mode]: true,
       }
     };
   }