perf(gesture): lazy loaded dynamic ES module

core/src/components/refresher/refresher.tsx

@@ -1,19 +1,8 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { GestureDetail, Mode } from '../../interface';
+import { Gesture, GestureDetail, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
-const enum RefresherState {
-  Inactive = 1 << 0,
-  Pulling = 1 << 1,
-  Ready = 1 << 2,
-  Refreshing = 1 << 3,
-  Cancelling = 1 << 4,
-  Completing = 1 << 5,
-
-  _BUSY_ = Refreshing | Cancelling | Completing,
-}
-
 @Component({
   tag: 'ion-refresher',
   styleUrls: {
@@ -27,6 +16,7 @@ export class Refresher {
   private didStart = false;
   private progress = 0;
   private scrollEl?: HTMLIonScrollElement;
+  private gesture?: Gesture;
 
   mode!: Mode;
 
@@ -40,7 +30,7 @@ export class Refresher {
    * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
    * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
    * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
-   * - `completing` - The `refreshing` state has finished and the refresher is in the process of closing itself. Once closed, the refresher will go back to the `inactive` state.
+   * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
    */
   @State() private state: RefresherState = RefresherState.Inactive;
 
@@ -74,6 +64,12 @@ export class Refresher {
    * If true, the refresher will be hidden. Defaults to `false`.
    */
   @Prop() disabled = false;
+  @Watch('disabled')
+  disabledChanged() {
+    if (this.gesture) {
+      this.gesture.disabled = this.disabled;
+    }
+  }
 
   /**
    * Emitted when the user lets go of the content and has pulled down
@@ -105,6 +101,22 @@ export class Refresher {
     } else {
       console.error('ion-refresher did not attach, make sure the parent is an ion-content.');
     }
+
+    this.gesture = (await import('../../utils/gesture/gesture')).create({
+      el: this.el.closest('ion-content') as any,
+      queue: this.queue,
+      gestureName: 'refresher',
+      gesturePriority: 10,
+      direction: 'y',
+      threshold: 5,
+      passive: false,
+      canStart: this.canStart.bind(this),
+      onStart: this.onStart.bind(this),
+      onMove: this.onMove.bind(this),
+      onEnd: this.onEnd.bind(this),
+    });
+
+    this.disabledChanged();
   }
 
   componentDidUnload() {
@@ -181,7 +193,7 @@ export class Refresher {
     }
 
     // do nothing if it's actively refreshing
-    // or it's in the process of closing
+    // or it's in the way of closing
     // or this was never a startY
     if (this.state & RefresherState._BUSY_) {
       return 2;
@@ -341,21 +353,15 @@ export class Refresher {
       }
     };
   }
+}
 
-  render() {
-    return <ion-gesture
-      canStart={this.canStart.bind(this)}
-      onStart={this.onStart.bind(this)}
-      onMove={this.onMove.bind(this)}
-      onEnd={this.onEnd.bind(this)}
-      gestureName="refresher"
-      gesturePriority={10}
-      passive={false}
-      direction="y"
-      threshold={5}
-      attachTo={this.el.closest('ion-content') as any}
-      disabled={this.disabled}>
-      <slot></slot>
-    </ion-gesture>;
-  }
+const enum RefresherState {
+  Inactive = 1 << 0,
+  Pulling = 1 << 1,
+  Ready = 1 << 2,
+  Refreshing = 1 << 3,
+  Cancelling = 1 << 4,
+  Completing = 1 << 5,
+
+  _BUSY_ = Refreshing | Cancelling | Completing,
 }