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

angular/src/directives/proxies-list.txt

@@ -2,7 +2,7 @@
 import * as d from './proxies';
 
 export const DIRECTIVES = [
-d.IonApp,
+  d.IonApp,
   d.IonAvatar,
   d.IonBackButton,
   d.IonBackdrop,

angular/src/directives/proxies-utils.ts

@@ -1,29 +1,30 @@
+/* eslint-disable */
 /* tslint:disable */
 import { fromEvent } from 'rxjs';
 
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
   inputs.forEach(item => {
-    Object.defineProperty(Prototype, item, {
-      get() {
-        return this.el[item];
-      },
-      set(val: any) {
-        this.z.runOutsideAngular(() => (this.el[item] = val));
-      }
-    });
+  Object.defineProperty(Prototype, item, {
+    get() {
+    return this.el[item];
+    },
+    set(val: any) {
+    this.z.runOutsideAngular(() => (this.el[item] = val));
+    }
+  });
   });
 };
 
 export const proxyMethods = (Cmp: any, methods: string[]) => {
   const Prototype = Cmp.prototype;
   methods.forEach(methodName => {
-    Prototype[methodName] = function () {
-      const args = arguments;
-      return this.z.runOutsideAngular(() =>
-        this.el[methodName].apply(this.el, args)
-      );
-    };
+  Prototype[methodName] = function () {
+    const args = arguments;
+    return this.z.runOutsideAngular(() =>
+    this.el[methodName].apply(this.el, args)
+    );
+  };
   });
 };
 
@@ -31,16 +32,15 @@ export const proxyOutputs = (instance: any, el: any, events: string[]) => {
   events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
 }
 
-// tslint:disable-next-line: only-arrow-functions
 export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
   const decorator =  function(cls: any){
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
-    }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
-    }
-    return cls;
+  if (opts.inputs) {
+    proxyInputs(cls, opts.inputs);
+  }
+  if (opts.methods) {
+    proxyMethods(cls, opts.methods);
+  }
+  return cls;
   };
   return decorator;
 }

core/package.json

@@ -34,9 +34,9 @@
     "tslib": "^1.10.0"
   },
   "devDependencies": {
-    "@stencil/core": "1.8.11",
-    "@stencil/sass": "1.0.1",
-    "@types/jest": "24.0.21",
+    "@stencil/core": "1.11.2",
+    "@stencil/sass": "1.1.1",
+    "@types/jest": "24.9.0",
     "@types/node": "12.12.3",
     "@types/puppeteer": "1.19.1",
     "@types/swiper": "4.4.4",
@@ -49,7 +49,7 @@
     "np": "^5.0.3",
     "pixelmatch": "4.0.2",
     "puppeteer": "1.20.0",
-    "rollup": "1.19.4",
+    "rollup": "1.32.0",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-virtual": "^1.0.1",
     "sass": "^1.22.9",

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
 

core/stencil.config.ts

@@ -67,8 +67,7 @@ export const config: Config = {
       esmLoaderPath: '../loader'
     },
     // {
-    //   type: 'experimental-dist-module',
-    //   externalRuntime: true,
+    //   type: 'dist-custom-elements-bundle',
     // },
     {
       type: 'docs-readme',
@@ -83,7 +82,7 @@ export const config: Config = {
     },
     apiSpecGenerator({
       file: 'api.txt'
-    }),
+    }) as any,
     // {
     //   type: 'stats',
     //   file: 'stats.json'

core/tsconfig.json

@@ -7,6 +7,7 @@
     "declaration": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
+    "assumeChangesOnlyAffectDirectDependencies": true,
     "jsx": "react",
     "jsxFactory": "h",
     "lib": [
@@ -25,11 +26,10 @@
     "target": "es2017"
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "stencil.config.ts"
+    "src",
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "**/test"
   ]
 }

docs/core.d.ts

@@ -27,8 +27,10 @@ export interface JsonDocsComponent {
     props: JsonDocsProp[];
     methods: JsonDocsMethod[];
     events: JsonDocsEvent[];
+    listeners: JsonDocsListener[];
     styles: JsonDocsStyle[];
     slots: JsonDocsSlot[];
+    parts: JsonDocsPart[];
     dependents: string[];
     dependencies: string[];
     dependencyGraph: JsonDocsDependencyGraph;
@@ -95,10 +97,20 @@ export interface JsonDocsStyle {
     docs: string;
     annotation: string;
 }
+export interface JsonDocsListener {
+    event: string;
+    target?: string;
+    capture: boolean;
+    passive: boolean;
+}
 export interface JsonDocsSlot {
     name: string;
     docs: string;
 }
+export interface JsonDocsPart {
+    name: string;
+    docs: string;
+}
 export interface StyleDoc {
     name: string;
     docs: string;

packages/react-router/package.json

@@ -52,7 +52,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^24.9.0",
     "@types/node": "^12.12.14",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",

packages/react/package.json

@@ -48,12 +48,12 @@
     "react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.9",
+    "@types/jest": "^24.9.0",
     "@types/node": "^12.12.14",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "fs-extra": "^8.1.0",
-    "jest": "^24.8.0",
+    "jest": "^24.9.0",
     "jest-dom": "^3.4.0",
     "np": "^5.0.1",
     "react": "^16.9.0",

packages/react/test/test-app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@ionic/react": "0.0.9",
-    "@types/jest": "24.0.17",
+    "@types/jest": "24.9.0",
     "@types/node": "12.7.0",
     "@types/react": "16.8.24",
     "@types/react-dom": "16.8.5",