fix(): update to Stencil One 🎉🎊

core/src/components/refresher/readme.md

@@ -103,20 +103,20 @@ export class RefresherExample {
 
 ```tsx
 import React from 'react';
-
 import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
+import { RefresherEventDetail } from '@ionic/core';
 
-function doRefresh(event: CustomEvent) {
+function doRefresh(event: CustomEvent<RefresherEventDetail>) {
   console.log('Begin async operation');
 
   setTimeout(() => {
     console.log('Async operation has ended');
-    event.target.complete();
+    event.detail.complete();
   }, 2000);
 }
 
-const Example: React.SFC<{}> = () => (
-  <>
+export const RefresherExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Default Refresher --*/}
     <IonContent>
       <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
@@ -142,11 +142,10 @@ const Example: React.SFC<{}> = () => (
         </IonRefresherContent>
       </IonRefresher>
     </IonContent>
-  </>
-  }
+  </IonContent>
 );
 
-export default Example
+```
 
 
 ### Vue
@@ -223,17 +222,17 @@ export default Example
 
 ## Methods
 
-### `cancel() => void`
+### `cancel() => Promise<void>`
 
 Changes the refresher's state from `refreshing` to `cancelling`.
 
 #### Returns
 
-Type: `void`
+Type: `Promise<void>`
 
 
 
-### `complete() => void`
+### `complete() => Promise<void>`
 
 Call `complete()` when your async operation has completed.
 For example, the `refreshing` state is while the app is performing
@@ -245,7 +244,7 @@ the refresher. This method also changes the refresher's state from
 
 #### Returns
 
-Type: `void`
+Type: `Promise<void>`
 
 
 

core/src/components/refresher/refresher.tsx

@@ -1,6 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Gesture, GestureDetail, Mode, RefresherEventDetail } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import { Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
 
 @Component({
   tag: 'ion-refresher',
@@ -17,8 +18,6 @@ export class Refresher implements ComponentInterface {
   private scrollEl?: HTMLElement;
   private gesture?: Gesture;
 
-  mode!: Mode;
-
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'queue' }) queue!: QueueApi;
@@ -115,7 +114,6 @@ export class Refresher implements ComponentInterface {
 
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: this.el.closest('ion-content') as any,
-      queue: this.queue,
       gestureName: 'refresher',
       gesturePriority: 10,
       direction: 'y',
@@ -148,7 +146,7 @@ export class Refresher implements ComponentInterface {
    * `refreshing` to `completing`.
    */
   @Method()
-  complete() {
+  async complete() {
     this.close(RefresherState.Completing, '120ms');
   }
 
@@ -156,7 +154,7 @@ export class Refresher implements ComponentInterface {
    * Changes the refresher's state from `refreshing` to `cancelling`.
    */
   @Method()
-  cancel() {
+  async cancel() {
     this.close(RefresherState.Cancelling, '');
   }
 
@@ -360,13 +358,14 @@ export class Refresher implements ComponentInterface {
   }
 
   hostData() {
+    const mode = getIonMode(this);
     return {
       slot: 'fixed',
       class: {
-        [`${this.mode}`]: true,
+        [`${mode}`]: true,
 
         // Used internally for styling
-        [`refresher-${this.mode}`]: true,
+        [`refresher-${mode}`]: true,
 
         'refresher-active': this.state !== RefresherState.Inactive,
         'refresher-pulling': this.state === RefresherState.Pulling,

core/src/components/refresher/test/basic/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
 
 <body>
   <ion-app>

core/src/components/refresher/test/preview/index.html

@@ -8,8 +8,8 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
 
 <body>
   <ion-app>

core/src/components/refresher/usage/react.md

@@ -1,19 +1,19 @@
 ```tsx
 import React from 'react';
-
 import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
+import { RefresherEventDetail } from '@ionic/core';
 
-function doRefresh(event: CustomEvent) {
+function doRefresh(event: CustomEvent<RefresherEventDetail>) {
   console.log('Begin async operation');
 
   setTimeout(() => {
     console.log('Async operation has ended');
-    event.target.complete();
+    event.detail.complete();
   }, 2000);
 }
 
-const Example: React.SFC<{}> = () => (
-  <>
+export const RefresherExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Default Refresher --*/}
     <IonContent>
       <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
@@ -39,8 +39,7 @@ const Example: React.SFC<{}> = () => (
         </IonRefresherContent>
       </IonRefresher>
     </IonContent>
-  </>
-  }
+  </IonContent>
 );
 
-export default Example
+```