refactor(): minor updates for next stencil version (#20787)

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

@@ -25,7 +25,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: any;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLIonActionSheetElement;
 

core/src/components/alert/alert.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
@@ -30,7 +30,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
   private processedButtons: AlertButton[] = [];
 
   presented = false;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLIonAlertElement;
 
@@ -215,13 +214,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
     }
     this.activeId = selectedInput.id;
     safeCall(selectedInput.handler, selectedInput);
-    this.el.forceUpdate();
+    forceUpdate(this);
   }
 
   private cbClick(selectedInput: AlertInput) {
     selectedInput.checked = !selectedInput.checked;
     safeCall(selectedInput.handler, selectedInput);
-    this.el.forceUpdate();
+    forceUpdate(this);
   }
 
   private buttonClick(button: AlertButton) {

core/src/components/back-button/back-button.tsx

@@ -19,7 +19,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
 
-  mode = getIonMode(this);
   @Element() el!: HTMLElement;
 
   /**
@@ -61,7 +60,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
       return icon;
     }
 
-    if (this.mode === 'ios') {
+    if (getIonMode(this) === 'ios') {
       // default ios back button icon
       return config.get('backButtonIcon', 'chevron-back');
     }
@@ -71,7 +70,7 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   }
 
   get backButtonText() {
-    const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
+    const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
     return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
   }
 
@@ -100,8 +99,9 @@ export class BackButton implements ComponentInterface, ButtonInterface {
   }
 
   render() {
-    const { color, defaultHref, disabled, type, mode, hasIconOnly, backButtonIcon, backButtonText } = this;
+    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText } = this;
     const showBackButton = defaultHref !== undefined;
+    const mode = getIonMode(this);
 
     return (
       <Host

core/src/components/back-button/test/back-button.spec.ts

@@ -1,18 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
 import { BackButton } from "../back-button";
 import { config } from "../../../global/config";
+import { setMode } from '@stencil/core';
 
 
 describe('back button', () => {
-  let bb: BackButton;
-
   beforeEach(() => {
     config.reset({});
-    bb = new BackButton();
   });
 
+  const newBackButton = async (mode: string = 'md'): Promise<BackButton> => {
+    setMode(() => mode);
+    const { rootInstance } = await newSpecPage({
+      components: [BackButton],
+      html: `<ion-back-button></ion-back-button>`
+    })
+    return rootInstance;
+  };
+
+
   describe('backButtonIcon', () => {
 
-    it('set custom icon on the instance, override config', () => {
+    it('set custom icon on the instance, override config', async () => {
+      const bb = await newBackButton();
       bb.icon = 'custom-icon-instance';
       config.reset({
         backButtonIcon: 'custom-icon-config'
@@ -20,24 +30,27 @@ describe('back button', () => {
       expect(bb.backButtonIcon).toBe('custom-icon-instance');
     });
 
-    it('set custom icon in the config', () => {
+    it('set custom icon in the config', async () => {
+      const bb = await newBackButton();
       config.reset({
         backButtonIcon: 'custom-icon-config'
       });
       expect(bb.backButtonIcon).toBe('custom-icon-config');
     });
 
-    it('set custom icon on the instance', () => {
+    it('set custom icon on the instance', async () => {
+      const bb = await newBackButton();
       bb.icon = 'custom-icon-instance';
       expect(bb.backButtonIcon).toBe('custom-icon-instance');
     });
 
-    it('default icon for ios mode', () => {
-      bb.mode = 'ios';
+    it('default icon for ios mode', async () => {
+      const bb = await newBackButton('ios');
       expect(bb.backButtonIcon).toBe('chevron-back');
     });
 
-    it('default icon', () => {
+    it('default icon', async () => {
+      const bb = await newBackButton();
       expect(bb.backButtonIcon).toBe('arrow-back-sharp');
     });
 
@@ -45,12 +58,13 @@ describe('back button', () => {
 
   describe('backButtonText', () => {
 
-    it('default text for ios mode', () => {
-      bb.mode = 'ios';
+    it('default text for ios mode', async () => {
+      const bb = await newBackButton('ios');
       expect(bb.backButtonText).toBe('Back');
     });
 
-    it('default text', () => {
+    it('default text', async () => {
+      const bb = await newBackButton();
       expect(bb.backButtonText).toBe(null);
     });
 

core/src/components/button/button.tsx

@@ -14,8 +14,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
  * @slot start - Content is placed to the left of the button text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the button text in LTR, and to the left in RTL.
  *
- * @part button - The native button or anchor tag that is rendered.
- * @part button-inner - The span inside of the native button or anchor.
+ * @TODOpart button - The native button or anchor tag that is rendered.
+ * @TODOpart button-inner - The span inside of the native button or anchor.
  */
 @Component({
   tag: 'ion-button',

core/src/components/col/col.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Host, Listen, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { matchBreakpoint } from '../../utils/media';
@@ -14,8 +14,6 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 })
 export class Col implements ComponentInterface {
 
-  @Element() el!: HTMLIonColElement;
-
   /**
    * The amount to offset the column, in terms of how many columns it should shift to the end
    * of the total available.
@@ -158,7 +156,7 @@ export class Col implements ComponentInterface {
 
   @Listen('resize', { target: 'window' })
   onResize() {
-    this.el.forceUpdate();
+    forceUpdate(this);
   }
 
   // Loop through all of the breakpoints to see if the media query

core/src/components/content/content.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, h, readTask } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -24,7 +24,6 @@ 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.
@@ -120,7 +119,8 @@ export class Content implements ComponentInterface {
   }
 
   private shouldForceOverscroll() {
-    const { forceOverscroll, mode } = this;
+    const { forceOverscroll } = this;
+    const mode = getIonMode(this);
     return forceOverscroll === undefined
       ? mode === 'ios' && isPlatform('ios')
       : forceOverscroll;
@@ -131,7 +131,7 @@ export class Content implements ComponentInterface {
       readTask(this.readDimensions.bind(this));
     } else if (this.cTop !== 0 || this.cBottom !== 0) {
       this.cTop = this.cBottom = 0;
-      this.el.forceUpdate();
+      forceUpdate(this);
     }
   }
 
@@ -143,7 +143,7 @@ export class Content implements ComponentInterface {
     if (dirty) {
       this.cTop = top;
       this.cBottom = bottom;
-      this.el.forceUpdate();
+      forceUpdate(this);
     }
   }
 

core/src/components/item/item.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Host, Listen, Prop, State, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Host, Listen, Prop, State, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, CssClassMap, RouterDirection, StyleEventDetail } from '../../interface';
@@ -123,7 +123,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     }
     if (hasStyleChange) {
       this.itemStyles.set(tagName, newStyles);
-      this.el.forceUpdate();
+      forceUpdate(this);
     }
   }
 

core/src/components/loading/loading.tsx

@@ -27,7 +27,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
   presented = false;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLIonLoadingElement;
 

core/src/components/menu/menu-interface.ts

@@ -2,7 +2,6 @@ import { Animation, Side } from '../../interface';
 
 export interface MenuI {
   el: HTMLIonMenuElement;
-  mode: string;
   side: Side;
   menuId?: string;
   disabled: boolean;

core/src/components/menu/menu.tsx

@@ -28,11 +28,6 @@ export class Menu implements ComponentInterface, MenuI {
   private gesture?: Gesture;
   private blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
 
-  mode = getIonMode(this);
-
-  private easing: string = this.mode === 'ios' ? iosEasing : mdEasing;
-  private easingReverse: string = this.mode === 'ios' ? iosEasingReverse : mdEasingReverse;
-
   isAnimating = false;
   width!: number; // TODO
   _isOpen = false;
@@ -335,9 +330,12 @@ AFTER:
 
   private async startAnimation(shouldOpen: boolean, animated: boolean): Promise<void> {
     const isReversed = !shouldOpen;
+    const mode = getIonMode(this);
+    const easing = mode === 'ios' ? iosEasing : mdEasing;
+    const easingReverse = mode === 'ios' ? iosEasingReverse : mdEasingReverse;
     const ani = (this.animation as Animation)!
       .direction((isReversed) ? 'reverse' : 'normal')
-      .easing((isReversed) ? this.easingReverse : this.easing)
+      .easing((isReversed) ? easingReverse : easing)
       .onFinish(() => {
         if (ani.getDirection() === 'reverse') {
           ani.direction('normal');
@@ -554,7 +552,8 @@ AFTER:
   }
 
   render() {
-    const { isEndSide, type, disabled, mode, isPaneVisible } = this;
+    const { isEndSide, type, disabled, isPaneVisible } = this;
+    const mode = getIonMode(this);
 
     return (
       <Host

core/src/components/modal/modal.tsx

@@ -35,7 +35,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private gestureAnimationDismissing = false;
   presented = false;
   animation?: Animation;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLIonModalElement;
 

core/src/components/picker/picker.tsx

@@ -22,8 +22,6 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 export class Picker implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
-  mode = getIonMode(this);
-
   @Element() el!: HTMLIonPickerElement;
 
   @State() presented = false;

core/src/components/popover/popover.tsx

@@ -28,7 +28,6 @@ export class Popover implements ComponentInterface, OverlayInterface {
   private usersElement?: HTMLElement;
 
   presented = false;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLIonPopoverElement;
 

core/src/components/reorder-group/test/test.utils.ts

@@ -1,4 +1,4 @@
-import * as pd from '@stencil/core/dist/testing/puppeteer/puppeteer-declarations';
+import * as pd from '@stencil/core/testing';
 
 import { dragElementBy, queryDeep } from '../../../utils/test/utils';
 

core/src/components/router/utils/interface.ts

@@ -2,7 +2,6 @@ import { ComponentProps } from '../../../interface';
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;
-  forceUpdate(): void;
 }
 
 export interface NavOutlet {

core/src/components/searchbar/searchbar.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
@@ -179,7 +179,7 @@ export class Searchbar implements ComponentInterface {
   protected showCancelButtonChanged() {
     requestAnimationFrame(() => {
       this.positionElements();
-      this.el.forceUpdate();
+      forceUpdate(this);
     });
   }
 

core/src/components/select/select.tsx

@@ -12,10 +12,10 @@ import { SelectCompareFn } from './select-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
- * @part placeholder - The text displayed in the select when there is no value.
- * @part text - The displayed value of the select.
- * @part icon - The select icon container.
- * @part icon-inner - The select icon.
+ * @TODOpart placeholder - The text displayed in the select when there is no value.
+ * @TODOpart text - The displayed value of the select.
+ * @TODOpart icon - The select icon container.
+ * @TODOpart icon-inner - The select icon.
  */
 @Component({
   tag: 'ion-select',

core/src/components/toast/toast.tsx

@@ -27,7 +27,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
   presented = false;
-  mode = getIonMode(this);
 
   @Element() el!: HTMLIonToastElement;
 

core/src/components/toolbar/toolbar.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Host, Listen, Prop, h } from '@stencil/core';
+import { Component, ComponentInterface, Element, Host, Listen, Prop, forceUpdate, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import { Color, CssClassMap, StyleEventDetail } from '../../interface';
@@ -76,7 +76,7 @@ export class Toolbar implements ComponentInterface {
 
     if (hasStyleChange) {
       this.childrenStyles.set(tagName, newStyles);
-      this.el.forceUpdate();
+      forceUpdate(this);
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, FunctionalComponent, Host, Listen, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
+import { Component, ComponentInterface, Element, FunctionalComponent, Host, Listen, Method, Prop, State, Watch, forceUpdate, h, readTask, writeTask } from '@stencil/core';
 
 import { Cell, DomRenderFn, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
 
@@ -310,7 +310,7 @@ export class VirtualScroll implements ComponentInterface {
     } else if (this.domRender) {
       this.domRender(this.virtualDom);
     } else if (this.renderItem) {
-      this.el.forceUpdate();
+      forceUpdate(this);
     }
   }
 

core/src/utils/menu-controller/animations/overlay.ts

@@ -1,3 +1,4 @@
+import { getIonMode } from '../../../global/ionic-global';
 import { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -30,7 +31,8 @@ export const menuOverlayAnimation = (menu: MenuI): Animation => {
     .addElement(menu.menuInnerEl!)
     .fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
 
-  const isIos = menu.mode === 'ios';
+  const mode = getIonMode(menu);
+  const isIos = mode === 'ios';
   const opacity = isIos ? 0.2 : 0.25;
 
   backdropAnimation

core/src/utils/menu-controller/animations/push.ts

@@ -1,3 +1,4 @@
+import { getIonMode } from '../../../global/ionic-global';
 import { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -12,6 +13,7 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
   let contentOpenedX: string;
   let menuClosedX: string;
 
+  const mode = getIonMode(menu);
   const width = menu.width;
 
   if (menu.isEndSide) {
@@ -35,5 +37,5 @@ export const menuPushAnimation = (menu: MenuI): Animation => {
     .addElement(menu.backdropEl!)
     .fromTo('opacity', 0.01, 0.32);
 
-  return baseAnimation(menu.mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+  return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
 };

core/src/utils/menu-controller/animations/reveal.ts

@@ -1,3 +1,4 @@
+import { getIonMode } from '../../../global/ionic-global';
 import { Animation, MenuI } from '../../../interface';
 import { createAnimation } from '../../animation/animation';
 
@@ -9,11 +10,11 @@ import { baseAnimation } from './base';
  * The menu itself, which is under the content, does not move.
  */
 export const menuRevealAnimation = (menu: MenuI): Animation => {
+  const mode = getIonMode(menu);
   const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
-
   const contentOpen = createAnimation()
     .addElement(menu.contentEl!) // REVIEW
     .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
 
-  return baseAnimation(menu.mode === 'ios').addAnimation(contentOpen);
+  return baseAnimation(mode === 'ios').addAnimation(contentOpen);
 };

core/src/utils/overlays-interface.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from '@stencil/core';
-import { HTMLStencilElement } from '@stencil/core/internal';
 
-import { AnimationBuilder, Mode } from '../interface';
+import { AnimationBuilder, HTMLStencilElement } from '../interface';
 
 export interface OverlayEventDetail<T = any> {
   data?: T;
@@ -9,7 +8,6 @@ export interface OverlayEventDetail<T = any> {
 }
 
 export interface OverlayInterface {
-  mode: Mode;
   el: HTMLElement;
   animated: boolean;
   keyboardClose: boolean;

core/src/utils/overlays.ts

@@ -1,4 +1,5 @@
 import { config } from '../global/config';
+import { getIonMode } from '../global/ionic-global';
 import { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, BackButtonEvent, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
 
 import { OVERLAY_BACK_BUTTON_PRIORITY } from './hardware-back-button';
@@ -128,10 +129,11 @@ export const present = async (
   overlay.presented = true;
   overlay.willPresent.emit();
 
+  const mode = getIonMode(overlay);
   // get the user's animation fn if one was provided
   const animationBuilder = (overlay.enterAnimation)
     ? overlay.enterAnimation
-    : config.get(name, overlay.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
+    : config.get(name, mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
   const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
   if (completed) {
@@ -155,10 +157,10 @@ export const dismiss = async (
 
   try {
     overlay.willDismiss.emit({ data, role });
-
+    const mode = getIonMode(overlay);
     const animationBuilder = (overlay.leaveAnimation)
       ? overlay.leaveAnimation
-      : config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
+      : config.get(name, mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
     // If dismissed via gesture, no need to play leaving animation again
     if (role !== 'gesture') {

core/src/utils/transition/index.ts

@@ -1,4 +1,4 @@
-import { writeTask } from '@stencil/core';
+import { Build, writeTask } from '@stencil/core';
 
 import { LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '../../components/nav/constants';
 import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../../interface';
@@ -44,7 +44,7 @@ const beforeTransition = (opts: TransitionOptions) => {
 const runTransition = async (opts: TransitionOptions): Promise<TransitionResult> => {
   const animationBuilder = await getAnimationBuilder(opts);
 
-  const ani = (animationBuilder)
+  const ani = (animationBuilder && Build.isBrowser)
     ? animation(animationBuilder, opts)
     : noAnimation(opts); // fast path for no animation