fix(all): component reusage

Author: manucorporat

core/src/components/backdrop/backdrop.tsx

@@ -39,14 +39,14 @@ export class Backdrop implements ComponentInterface {
    */
   @Event() ionBackdropTap!: EventEmitter<void>;
 
-  componentDidLoad() {
+  connectedCallback() {
     if (this.stopPropagation) {
       this.blocker.block();
     }
   }
 
-  componentDidUnload() {
-    this.blocker.destroy();
+  disconnectedCallback() {
+    this.blocker.unblock();
   }
 
   @Listen('touchstart', { passive: false, capture: true })

core/src/components/content/content.tsx

@@ -24,6 +24,7 @@ export class Content implements ComponentInterface {
   private cTop = -1;
   private cBottom = -1;
   private scrollEl!: HTMLElement;
+  private mode = getIonMode(this);
 
   // Detail is used in a hot loop in the scroll event, by allocating it here
   // V8 will be able to inline any read/write to it since it's a monomorphic class.
@@ -102,18 +103,11 @@ export class Content implements ComponentInterface {
    */
   @Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
 
-  componentWillLoad() {
-    if (this.forceOverscroll === undefined) {
-      const mode = getIonMode(this);
-      this.forceOverscroll = mode === 'ios' && isPlatform(window, 'mobile');
-    }
-  }
-
   componentDidLoad() {
     this.resize();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.onScrollEnd();
   }
 
@@ -125,6 +119,13 @@ export class Content implements ComponentInterface {
     }
   }
 
+  private shouldForceOverscroll() {
+    const { forceOverscroll, mode } = this;
+    return forceOverscroll === undefined
+      ? mode === 'ios' && isPlatform(window, 'mobile')
+      : forceOverscroll;
+  }
+
   private resize() {
     if (this.fullscreen) {
       readTask(this.readDimensions.bind(this));
@@ -299,9 +300,9 @@ export class Content implements ComponentInterface {
   }
 
   render() {
+    const { scrollX, scrollY } = this;
     const mode = getIonMode(this);
-    const { scrollX, scrollY, forceOverscroll } = this;
-
+    const forceOverscroll = this.shouldForceOverscroll();
     const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', false));
 
     this.resize();
@@ -312,7 +313,7 @@ export class Content implements ComponentInterface {
           ...createColorClasses(this.color),
           [mode]: true,
           'content-sizing': hostContext('ion-popover', this.el),
-          'overscroll': !!this.forceOverscroll,
+          'overscroll': forceOverscroll,
         }}
         style={{
           '--offset-top': `${this.cTop}px`,
@@ -324,7 +325,7 @@ export class Content implements ComponentInterface {
             'inner-scroll': true,
             'scroll-x': scrollX,
             'scroll-y': scrollY,
-            'overscroll': (scrollX || scrollY) && !!forceOverscroll
+            'overscroll': (scrollX || scrollY) && forceOverscroll
           }}
           ref={el => this.scrollEl = el!}
           onScroll={ev => this.onScroll(ev)}

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -76,7 +76,7 @@ export class InfiniteScroll implements ComponentInterface {
    */
   @Event() ionInfinite!: EventEmitter<void>;
 
-  async componentDidLoad() {
+  async connectedCallback() {
     const contentEl = this.el.closest('ion-content');
     if (contentEl) {
       this.scrollEl = await contentEl.getScrollElement();
@@ -92,7 +92,7 @@ export class InfiniteScroll implements ComponentInterface {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.enableScrollEvents(false);
     this.scrollEl = undefined;
   }

core/src/components/input/input.tsx

@@ -66,7 +66,7 @@ export class Input implements ComponentInterface {
   /**
    * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
    */
-  @Prop({ mutable: true }) clearOnEdit?: boolean;
+  @Prop() clearOnEdit?: boolean;
 
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
@@ -217,22 +217,18 @@ export class Input implements ComponentInterface {
    */
   @Event() ionStyle!: EventEmitter<StyleEventDetail>;
 
-  componentWillLoad() {
-    // By default, password inputs clear after focus when they have content
-    if (this.clearOnEdit === undefined && this.type === 'password') {
-      this.clearOnEdit = true;
-    }
+  connectedCallback() {
     this.emitStyle();
-  }
-
-  componentDidLoad() {
     this.debounceChanged();
-
-    this.ionInputDidLoad.emit();
+    document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
+      detail: this.el
+    }));
   }
 
-  componentDidUnload() {
-    this.ionInputDidUnload.emit();
+  disconnectedCallback() {
+    document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
+      detail: this.el
+    }));
   }
 
   /**
@@ -254,6 +250,13 @@ export class Input implements ComponentInterface {
     return Promise.resolve(this.nativeInput!);
   }
 
+  private shouldClearOnEdit() {
+    const { type, clearOnEdit } = this;
+    return (clearOnEdit === undefined)
+      ? type === 'password'
+      : clearOnEdit;
+  }
+
   private getValue(): string {
     return this.value || '';
   }
@@ -294,7 +297,7 @@ export class Input implements ComponentInterface {
   }
 
   private onKeydown = () => {
-    if (this.clearOnEdit) {
+    if (this.shouldClearOnEdit()) {
       // Did the input value change after it was blurred and edited?
       if (this.didBlurAfterEdit && this.hasValue()) {
         // Clear the input
@@ -326,7 +329,7 @@ export class Input implements ComponentInterface {
 
   private focusChanged() {
     // If clearOnEdit is enabled and the input blurred but has a value, set a flag
-    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
+    if (this.shouldClearOnEdit() && !this.hasFocus && this.hasValue()) {
       this.didBlurAfterEdit = true;
     }
   }

core/src/components/item-sliding/item-sliding.tsx

@@ -64,7 +64,7 @@ export class ItemSliding implements ComponentInterface {
    */
   @Event() ionDrag!: EventEmitter;
 
-  async componentDidLoad() {
+  async connectedCallback() {
     this.item = this.el.querySelector('ion-item');
     await this.updateOptions();
 
@@ -81,7 +81,7 @@ export class ItemSliding implements ComponentInterface {
     this.disabledChanged();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;

core/src/components/menu/menu.tsx

@@ -137,7 +137,7 @@ export class Menu implements ComponentInterface, MenuI {
    */
   @Event() protected ionMenuChange!: EventEmitter<MenuChangeEventDetail>;
 
-  async componentWillLoad() {
+  async connectedCallback() {
     if (this.type === undefined) {
       this.type = config.get('menuType', this.mode === 'ios' ? 'reveal' : 'overlay');
     }
@@ -170,6 +170,8 @@ export class Menu implements ComponentInterface, MenuI {
     // register this menu with the app's menu controller
     menuCtrl!._register(this);
 
+    this.updateState();
+
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: document,
       gestureName: 'menu-swipe',
@@ -181,14 +183,13 @@ export class Menu implements ComponentInterface, MenuI {
       onMove: ev => this.onMove(ev),
       onEnd: ev => this.onEnd(ev),
     });
-    this.updateState();
   }
 
-  componentDidLoad() {
+  async componentDidLoad() {
     this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.blocker.destroy();
     this.menuCtrl!._unregister(this);
     if (this.animation) {

core/src/components/picker-column/picker-column.tsx

@@ -47,7 +47,7 @@ export class PickerColumnCmp implements ComponentInterface {
     this.refresh();
   }
 
-  componentWillLoad() {
+  async connectedCallback() {
     let pickerRotateFactor = 0;
     let pickerScaleFactor = 0.81;
 
@@ -60,9 +60,7 @@ export class PickerColumnCmp implements ComponentInterface {
 
     this.rotateFactor = pickerRotateFactor;
     this.scaleFactor = pickerScaleFactor;
-  }
 
-  async componentDidLoad() {
     // get the height of one option
     const colEl = this.optsEl;
     if (colEl) {
@@ -88,7 +86,7 @@ export class PickerColumnCmp implements ComponentInterface {
     }, 250);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     cancelAnimationFrame(this.rafId);
     clearTimeout(this.tmrId);
     if (this.gesture) {