From c1b61d0fee9d8733ab8f395f070e32683abd8566 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Sun, 29 Jul 2018 23:10:26 +0200
Subject: [PATCH] chore(): update to ionic-rules/strict

---
 .../action-sheet-controller.tsx               |  1 +
 .../action-sheet/action-sheet-interface.ts    |  1 -
 .../components/action-sheet/action-sheet.tsx  | 81 +++++++++----------
 .../alert-controller/alert-controller.tsx     |  1 +
 core/src/components/alert/alert.tsx           |  5 +-
 core/src/components/anchor/anchor.tsx         |  4 +-
 .../animation-controller.tsx                  |  5 +-
 .../animation-interface.tsx                   |  3 -
 .../animation-controller/animator.tsx         | 54 ++++++-------
 .../animation-controller/transition-end.ts    |  7 +-
 core/src/components/app/app.tsx               |  1 +
 core/src/components/avatar/avatar.tsx         |  1 -
 .../components/back-button/back-button.tsx    |  4 +-
 core/src/components/backdrop/backdrop.tsx     |  1 +
 core/src/components/badge/badge.tsx           |  1 +
 core/src/components/button/button.tsx         |  3 +-
 .../components/card-content/card-content.tsx  |  1 +
 .../components/card-header/card-header.tsx    |  1 +
 .../card-subtitle/card-subtitle.tsx           |  1 +
 core/src/components/card-title/card-title.tsx |  1 +
 core/src/components/card/card.tsx             |  1 +
 core/src/components/checkbox/checkbox.tsx     |  3 +-
 .../components/chip-button/chip-button.tsx    |  2 +-
 core/src/components/chip-icon/chip-icon.tsx   |  1 +
 core/src/components/chip/chip.tsx             |  2 +-
 core/src/components/col/col.tsx               |  1 +
 core/src/components/content/content.tsx       |  3 +-
 core/src/components/datetime/datetime-util.ts | 22 +----
 core/src/components/datetime/datetime.tsx     |  8 +-
 core/src/components/fab-button/fab-button.tsx |  1 +
 core/src/components/fab-list/fab-list.tsx     |  2 -
 core/src/components/fab/fab.tsx               |  1 -
 core/src/components/footer/footer.tsx         |  1 +
 .../gesture-controller/gesture-controller.tsx |  6 +-
 .../test/gesture-controller.spec.tsx          |  5 --
 core/src/components/gesture/gesture.tsx       |  2 +
 core/src/components/grid/grid.tsx             |  1 -
 core/src/components/header/header.tsx         |  1 +
 core/src/components/hide-when/hide-when.tsx   |  2 +-
 core/src/components/img/img.tsx               |  3 +-
 .../infinite-scroll-content.tsx               |  1 +
 .../infinite-scroll/infinite-scroll.tsx       |  2 -
 core/src/components/input/input-base.tsx      |  1 +
 core/src/components/input/input.tsx           |  5 +-
 .../components/item-divider/item-divider.tsx  |  1 +
 core/src/components/item-group/item-group.tsx |  2 +-
 .../components/item-option/item-option.tsx    |  1 +
 .../components/item-options/item-options.tsx  |  1 +
 .../components/item-sliding/item-sliding.tsx  | 12 +--
 core/src/components/item/item.tsx             | 21 +++--
 core/src/components/label/label.tsx           |  1 +
 .../components/list-header/list-header.tsx    |  1 +
 core/src/components/list/list.tsx             |  1 +
 .../loading-controller/loading-controller.tsx |  2 +-
 .../loading/animations/ios.enter.ts           |  1 -
 .../loading/animations/ios.leave.ts           |  2 -
 core/src/components/loading/loading.tsx       |  2 +-
 .../components/menu-button/menu-button.tsx    |  1 +
 .../menu-controller/animations/overlay.ts     |  4 +-
 .../menu-controller/animations/push.ts        |  6 +-
 .../menu-controller/animations/reveal.ts      |  1 +
 .../menu-controller/menu-controller.ts        |  1 +
 core/src/components/menu/menu.tsx             | 21 +++--
 .../modal-controller/modal-controller.tsx     |  2 +-
 .../components/modal/animations/ios.enter.ts  |  4 -
 .../components/modal/animations/ios.leave.ts  |  1 -
 core/src/components/modal/modal.tsx           | 14 +---
 core/src/components/nav-push/nav-push.tsx     |  1 +
 .../components/nav-set-root/nav-set-root.tsx  |  1 +
 core/src/components/nav/nav.tsx               | 10 ++-
 .../nav/test/nav-controller.spec.ts           | 25 +-----
 core/src/components/nav/view-controller.ts    |  1 -
 core/src/components/note/note.tsx             |  1 +
 .../picker-column/picker-column.tsx           |  8 +-
 .../picker-controller/picker-controller.tsx   |  2 +-
 .../components/picker/animations/ios.enter.ts |  1 -
 .../components/picker/animations/ios.leave.ts |  1 -
 core/src/components/picker/picker.tsx         | 28 +++----
 .../popover-controller/popover-controller.tsx |  1 +
 core/src/components/popover/popover.tsx       |  7 +-
 .../components/radio-group/radio-group.tsx    |  2 +-
 core/src/components/radio/radio.tsx           |  3 +-
 core/src/components/range-knob/range-knob.tsx |  1 +
 core/src/components/range/range.tsx           |  4 +-
 .../refresher-content/refresher-content.tsx   |  2 +-
 core/src/components/refresher/refresher.tsx   |  3 +-
 .../reorder-group/reorder-group.tsx           |  2 +-
 core/src/components/reorder/reorder.tsx       |  1 +
 .../ripple-effect/ripple-effect.tsx           |  5 +-
 .../components/router-outlet/route-outlet.tsx |  2 +-
 core/src/components/router/router.tsx         | 12 ++-
 core/src/components/router/test/e2e.spec.tsx  |  4 +-
 .../components/router/test/matching.spec.tsx  |  4 -
 .../components/router/test/parser.spec.tsx    |  2 +-
 core/src/components/router/test/path.spec.tsx |  5 --
 core/src/components/router/utils/dom.ts       |  3 +-
 core/src/components/router/utils/interface.ts |  1 -
 core/src/components/router/utils/matching.ts  |  5 --
 core/src/components/router/utils/parser.ts    |  1 -
 core/src/components/router/utils/path.ts      |  2 +-
 core/src/components/scroll/scroll.tsx         |  3 +-
 core/src/components/searchbar/searchbar.tsx   |  3 +-
 .../segment-button/segment-button.tsx         |  1 +
 core/src/components/segment/segment.tsx       |  2 +-
 .../select-option/select-option.tsx           |  1 -
 .../select-popover/select-popover.tsx         |  8 +-
 core/src/components/select/select.tsx         |  4 +-
 core/src/components/show-when/show-when.tsx   |  5 +-
 core/src/components/slide/slide.tsx           |  1 -
 core/src/components/slides/slides.tsx         |  9 ++-
 .../src/components/spinner/spinner-configs.ts |  2 -
 core/src/components/spinner/spinner.tsx       |  6 +-
 core/src/components/split-pane/split-pane.tsx | 15 ++--
 core/src/components/tab-button/tab-button.tsx |  2 +-
 core/src/components/tab/tab.tsx               |  1 +
 core/src/components/tabbar/tabbar.tsx         | 31 +++----
 core/src/components/tabs/tabs.tsx             |  4 +-
 core/src/components/tap-click/tap-click.tsx   |  2 +-
 core/src/components/text/text.tsx             |  2 +-
 core/src/components/textarea/textarea.tsx     |  4 +-
 core/src/components/thumbnail/thumbnail.tsx   |  2 +-
 core/src/components/title/title.tsx           |  1 +
 .../toast-controller/toast-controller.tsx     |  2 +-
 core/src/components/toast/toast.tsx           |  3 +-
 .../src/components/toggle/test/toggle.spec.ts |  1 +
 core/src/components/toggle/toggle.tsx         |  3 +-
 core/src/components/toolbar/toolbar.tsx       |  1 +
 .../test/virtual-scroll-utils.spec.ts         |  5 --
 .../virtual-scroll/virtual-scroll-utils.tsx   | 13 ++-
 .../virtual-scroll/virtual-scroll.tsx         |  5 +-
 core/src/global/ionic-global.ts               |  3 +-
 core/src/utils/animations/ios.transition.ts   |  1 -
 core/src/utils/config.ts                      |  1 -
 core/src/utils/framework-delegate.ts          |  8 +-
 core/src/utils/haptic.ts                      | 24 ++++--
 core/src/utils/helpers.ts                     |  1 +
 core/src/utils/input-interface.ts             |  7 --
 core/src/utils/input-shims/hacks/common.ts    |  1 -
 .../src/utils/input-shims/hacks/hide-caret.ts |  9 ++-
 .../utils/input-shims/hacks/scroll-assist.ts  |  2 +-
 .../utils/input-shims/hacks/scroll-data.ts    |  1 -
 core/src/utils/input-shims/input-shims.ts     | 13 ++-
 core/src/utils/overlays.ts                    | 10 ++-
 core/src/utils/show-hide-when-utils.ts        |  3 +-
 core/src/utils/status-tap.ts                  |  9 +--
 core/src/utils/theme.ts                       |  5 +-
 core/src/utils/transition.ts                  |  4 +-
 core/tslint.json                              |  9 ++-
 148 files changed, 354 insertions(+), 407 deletions(-)

diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
index 0e2f6de07a..26b5093012 100644
--- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx
+++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -1,4 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { ActionSheetOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index c059d1bf60..6d4128dddd 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -15,4 +15,3 @@ export interface ActionSheetButton {
   cssClass?: string | string[];
   handler?: () => boolean | void;
 }
-
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
index 82f5133488..deb9e3de56 100644
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@@ -1,13 +1,14 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+
 import { ActionSheetButton, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createColorClasses, getClassMap } from '../../utils/theme';
+
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
-
 @Component({
   tag: 'ion-action-sheet',
   styleUrls: {
@@ -115,7 +116,6 @@ export class ActionSheet implements OverlayInterface {
    */
   @Event({ eventName: 'ionActionSheetDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-
   componentDidLoad() {
     this.ionActionSheetDidLoad.emit();
   }
@@ -174,7 +174,7 @@ export class ActionSheet implements OverlayInterface {
     return eventMethod(this.el, 'ionActionSheetWillDismiss', callback);
   }
 
-  protected buttonClick(button: ActionSheetButton) {
+  private buttonClick(button: ActionSheetButton) {
     const role = button.role;
     if (isCancel(role)) {
       this.dismiss(undefined, role);
@@ -190,9 +190,13 @@ export class ActionSheet implements OverlayInterface {
     if (button && button.handler) {
       // a handler has been provided, execute it
       // pass the handler the values from the inputs
-      if (button.handler() === false) {
-        // if the return value of the handler is false then do not dismiss
-        return false;
+      try {
+        if (button.handler() === false) {
+          // if the return value of the handler is false then do not dismiss
+          return false;
+        }
+      } catch (e) {
+        console.error(e);
       }
     }
     return true;
@@ -212,14 +216,11 @@ export class ActionSheet implements OverlayInterface {
   }
 
   render() {
+    // TODO: move to processedButtons
     const allButtons = this.buttons.map(b => {
-      if (typeof b === 'string') {
-        b = { text: b };
-      }
-      if (!b.cssClass) {
-        b.cssClass = '';
-      }
-      return b;
+      return (typeof b === 'string')
+        ? { text: b }
+        : b;
     });
     const cancelButton = allButtons.find(b => b.role === 'cancel');
     const buttons = allButtons.filter(b => b.role !== 'cancel');
@@ -229,14 +230,12 @@ export class ActionSheet implements OverlayInterface {
       <div class="action-sheet-wrapper" role="dialog">
         <div class="action-sheet-container">
           <div class="action-sheet-group">
-            {this.header
-              ? <div class="action-sheet-title">
+            {this.header &&
+              <div class="action-sheet-title">
                 {this.header}
-                {this.subHeader
-                ? <div class="action-sheet-sub-title">{this.subHeader}</div>
-                : null}
+                {this.subHeader && <div class="action-sheet-sub-title">{this.subHeader}</div>}
               </div>
-              : null}
+            }
             {buttons.map(b =>
               <button class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                 <span class="action-sheet-button-inner">
@@ -246,25 +245,25 @@ export class ActionSheet implements OverlayInterface {
               </button>
             )}
           </div>
-          {cancelButton
-            ? <div class="action-sheet-group action-sheet-group-cancel">
-                <button
-                  class={buttonClass(cancelButton)}
-                  onClick={() => this.buttonClick(cancelButton)}
-                >
-                  <span class="action-sheet-button-inner">
-                    {cancelButton.icon &&
-                      <ion-icon
-                        icon={cancelButton.icon}
-                        lazy={false}
-                        class="action-sheet-icon"
-                      />}
-                    {cancelButton.text}
-                  </span>
-                </button>
 
-              </div>
-            : null}
+          {cancelButton &&
+            <div class="action-sheet-group action-sheet-group-cancel">
+              <button
+                class={buttonClass(cancelButton)}
+                onClick={() => this.buttonClick(cancelButton)}
+              >
+                <span class="action-sheet-button-inner">
+                  {cancelButton.icon &&
+                    <ion-icon
+                      icon={cancelButton.icon}
+                      lazy={false}
+                      class="action-sheet-icon"
+                    />}
+                  {cancelButton.text}
+                </span>
+              </button>
+            </div>
+          }
         </div>
       </div>
     ];
@@ -272,13 +271,9 @@ export class ActionSheet implements OverlayInterface {
 }
 
 function buttonClass(button: ActionSheetButton): CssClassMap {
-  const buttonClasses: any = {
+  return {
     'action-sheet-button': true,
+    [`action-sheet-${button.role}`]: !!button.role,
     ...getClassMap(button.cssClass),
   };
-  if (button.role) {
-    buttonClasses[`action-sheet-${button.role}`] = true;
-  }
-  return buttonClasses;
 }
-
diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx
index 305781b506..7bbe01ac16 100644
--- a/core/src/components/alert-controller/alert-controller.tsx
+++ b/core/src/components/alert-controller/alert-controller.tsx
@@ -1,4 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { AlertOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index d27869b3d4..08bc99dc7b 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
+
 import { AlertButton, AlertInput, Animation, AnimationBuilder, Color, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createColorClasses, getClassMap } from '../../utils/theme';
@@ -312,7 +313,7 @@ export class Alert implements OverlayInterface {
     }
     return (
       <div class="alert-checkbox-group" aria-labelledby={labelledby}>
-        { inputs.map((i) => (
+        { inputs.map(i => (
           <button
             onClick={() => this.cbClick(i)}
             aria-checked={i.checked ? 'true' : null}
@@ -342,7 +343,7 @@ export class Alert implements OverlayInterface {
     }
     return (
       <div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
-        { inputs.map((i) => (
+        { inputs.map(i => (
           <button
             onClick={() => this.rbClick(i)}
             aria-checked={i.checked ? 'true' : null}
diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
index e2812d3b0d..575f076665 100644
--- a/core/src/components/anchor/anchor.tsx
+++ b/core/src/components/anchor/anchor.tsx
@@ -1,8 +1,8 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, RouterDirection } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-anchor',
   styleUrl: 'anchor.scss',
@@ -41,7 +41,7 @@ export class Anchor {
     return (
       <a
         href={this.href}
-        onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
+        onClick={ev => openURL(this.win, this.href, ev, this.routerDirection)}>
           <slot></slot>
       </a>
     );
diff --git a/core/src/components/animation-controller/animation-controller.tsx b/core/src/components/animation-controller/animation-controller.tsx
index 779c796cc9..7f1314cc0b 100644
--- a/core/src/components/animation-controller/animation-controller.tsx
+++ b/core/src/components/animation-controller/animation-controller.tsx
@@ -1,7 +1,8 @@
 import { Component, Method } from '@stencil/core';
-import { Animation, AnimationBuilder, AnimationController } from '../../interface';
-import { Animator } from './animator';
 
+import { Animation, AnimationBuilder, AnimationController } from '../../interface';
+
+import { Animator } from './animator';
 
 /** @hidden */
 @Component({
diff --git a/core/src/components/animation-controller/animation-interface.tsx b/core/src/components/animation-controller/animation-interface.tsx
index 8fec71d415..a1b74cfb9b 100644
--- a/core/src/components/animation-controller/animation-interface.tsx
+++ b/core/src/components/animation-controller/animation-interface.tsx
@@ -42,7 +42,6 @@ export interface Animation {
   hasCompleted: boolean;
 }
 
-
 export type AnimationBuilder = (Animation: Animation, baseEl: HTMLElement, opts?: any) => Promise<Animation>;
 
 export interface PlayOptions {
@@ -50,7 +49,6 @@ export interface PlayOptions {
   promise?: boolean;
 }
 
-
 export interface EffectProperty {
   effectName: string;
   trans: boolean;
@@ -60,7 +58,6 @@ export interface EffectProperty {
   [state: string]: any;
 }
 
-
 export interface EffectState {
   val: any;
   num: number;
diff --git a/core/src/components/animation-controller/animator.tsx b/core/src/components/animation-controller/animator.tsx
index 6330527082..8c103ee382 100644
--- a/core/src/components/animation-controller/animator.tsx
+++ b/core/src/components/animation-controller/animator.tsx
@@ -2,7 +2,6 @@ import { EffectProperty, EffectState, PlayOptions } from './animation-interface'
 import { CSS_PROP, CSS_VALUE_REGEX, DURATION_MIN, TRANSITION_END_FALLBACK_PADDING_MS } from './constants';
 import { transitionEnd } from './transition-end';
 
-
 export const TRANSFORM_PROPS: {[key: string]: number} = {
   'translateX': 1,
   'translateY': 1,
@@ -270,8 +269,8 @@ export class Animator {
    */
   beforeClearStyles(propertyNames: string[]): Animator {
     this._beforeStyles = this._beforeStyles || {};
-    for (let i = 0; i < propertyNames.length; i++) {
-      this._beforeStyles[propertyNames[i]] = '';
+    for (const prop of propertyNames) {
+      this._beforeStyles[prop] = '';
     }
     return this;
   }
@@ -652,8 +651,12 @@ export class Animator {
    * NO RECURSION
    */
   _clearAsync() {
-    this._unregisterTrnsEnd && this._unregisterTrnsEnd();
-    this._timerId && clearTimeout(this._timerId);
+    if (this._unregisterTrnsEnd) {
+      this._unregisterTrnsEnd();
+    }
+    if (this._timerId) {
+      clearTimeout(this._timerId);
+    }
     this._timerId = this._unregisterTrnsEnd = undefined;
   }
 
@@ -839,9 +842,9 @@ export class Animator {
 
       // inline styles to add before the animation
       if (this._beforeStyles) {
-        for (const prop in this._beforeStyles) {
+        for (const [key, value] of Object.entries(this._beforeStyles)) {
           // ******** DOM WRITE ****************
-          (el as any).style[prop] = this._beforeStyles[prop];
+          el.style.setProperty(key, value);
         }
       }
     }
@@ -895,18 +898,12 @@ export class Animator {
    * DOM WRITE
    */
   _setAfterStyles() {
-    let i: number, j: number;
-    let el: HTMLElement;
-    let elementClassList: DOMTokenList;
     const elements = this._elements;
     if (!elements) {
       return;
     }
-    let prop: string;
-
-    for (i = 0; i < elements.length; i++) {
-      el = elements[i];
-      elementClassList = el.classList;
+    for (const el of elements) {
+      const elementClassList = el.classList;
 
       // remove the transition duration/easing
       // ******** DOM WRITE ****************
@@ -918,27 +915,25 @@ export class Animator {
         // css classes that were added before the animation should be removed
         const beforeAddClasses = this._beforeAddClasses;
         if (beforeAddClasses) {
-          for (j = 0; j < beforeAddClasses.length; j++) {
-            // ******** DOM WRITE ****************
-            elementClassList.remove(beforeAddClasses[j]);
+          for (const c of beforeAddClasses) {
+            elementClassList.remove(c);
           }
         }
 
         // css classes that were removed before the animation should be added
         const beforeRemoveClasses = this._beforeRemoveClasses;
         if (beforeRemoveClasses) {
-          for (j = 0; j < beforeRemoveClasses.length; j++) {
-            // ******** DOM WRITE ****************
-            elementClassList.add(beforeRemoveClasses[j]);
+          for (const c of beforeRemoveClasses) {
+            elementClassList.add(c);
           }
         }
 
         // inline styles that were added before the animation should be removed
         const beforeStyles = this._beforeStyles;
         if (beforeStyles) {
-          for (prop in beforeStyles) {
+          for (const propName of Object.keys(beforeStyles)) {
             // ******** DOM WRITE ****************
-            (el as any).style[prop] = '';
+            el.style.removeProperty(propName);
           }
         }
 
@@ -948,27 +943,26 @@ export class Animator {
         // css classes to add after the animation
         const afterAddClasses = this._afterAddClasses;
         if (afterAddClasses) {
-          for (j = 0; j < afterAddClasses.length; j++) {
+          for (const c of afterAddClasses) {
             // ******** DOM WRITE ****************
-            elementClassList.add(afterAddClasses[j]);
+            elementClassList.add(c);
           }
         }
 
         // css classes to remove after the animation
         const afterRemoveClasses = this._afterRemoveClasses;
         if (afterRemoveClasses) {
-          for (j = 0; j < afterRemoveClasses.length; j++) {
+          for (const c of afterRemoveClasses) {
             // ******** DOM WRITE ****************
-            elementClassList.remove(afterRemoveClasses[j]);
+            elementClassList.remove(c);
           }
         }
 
         // inline styles to add after the animation
         const afterStyles = this._afterStyles;
         if (afterStyles) {
-          for (prop in afterStyles) {
-            // ******** DOM WRITE ****************
-            (el as any).style[prop] = afterStyles[prop];
+          for (const [key, value] of Object.entries(afterStyles)) {
+            el.style.setProperty(key, value);
           }
         }
       }
diff --git a/core/src/components/animation-controller/transition-end.ts b/core/src/components/animation-controller/transition-end.ts
index b2a25bfb17..9568cb103d 100644
--- a/core/src/components/animation-controller/transition-end.ts
+++ b/core/src/components/animation-controller/transition-end.ts
@@ -1,11 +1,12 @@
 
-
 export function transitionEnd(el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) {
-  let unRegTrans: () => void;
+  let unRegTrans: (() => void) | undefined;
   const opts: any = { passive: true };
 
   function unregister() {
-    unRegTrans && unRegTrans();
+    if (unRegTrans) {
+      unRegTrans();
+    }
   }
 
   function onTransitionEnd(ev: Event) {
diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index 5ac1b5e738..11963979bd 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
+
 import { Config } from '../../interface';
 import { isDevice, isHybrid, needInputShims } from '../../utils/platform';
 
diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
index f3368b1d33..5aa2c105c7 100644
--- a/core/src/components/avatar/avatar.tsx
+++ b/core/src/components/avatar/avatar.tsx
@@ -1,6 +1,5 @@
 import { Component } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-avatar',
   styleUrls: {
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 0a96b31f11..f5c57d8916 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
+
 import { Color, Config, Mode } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
@@ -45,7 +46,6 @@ export class BackButton {
    */
   @Prop() text?: string;
 
-
   private async onClick(ev: Event) {
     const nav = this.el.closest('ion-nav');
     if (nav && nav.canGoBack()) {
@@ -78,7 +78,7 @@ export class BackButton {
     return (
       <button
         class="back-button-native"
-        onClick={(ev) => this.onClick(ev)}>
+        onClick={ev => this.onClick(ev)}>
         <span class="back-button-inner">
           { backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}/> }
           { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx
index 3cee969072..1f04063490 100644
--- a/core/src/components/backdrop/backdrop.tsx
+++ b/core/src/components/backdrop/backdrop.tsx
@@ -1,4 +1,5 @@
 import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
+
 import { now } from '../../utils/helpers';
 
 @Component({
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 3b23dae77a..89e4f90a8d 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 27c55b2f67..a936f54185 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
+
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { getParentNode, openURL } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-button',
   styleUrls: {
@@ -191,7 +191,6 @@ export class Button {
   }
 }
 
-
 /**
  * Get the classes based on the button type
  * e.g. alert-button, action-sheet-button
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
index b75e6fbea5..565ef08ddc 100644
--- a/core/src/components/card-content/card-content.tsx
+++ b/core/src/components/card-content/card-content.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index 9ce76899c2..862d549159 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index 7deac1c587..40e485a35b 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
index 42a8e4a3db..a9e5d069e0 100644
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
index 637911cadd..4d527116e3 100644
--- a/core/src/components/card/card.tsx
+++ b/core/src/components/card/card.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index cdac2e4752..80f8428eae 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,9 +1,9 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+
 import { CheckboxInput, CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-checkbox',
   styleUrls: {
@@ -74,7 +74,6 @@ export class Checkbox implements CheckboxInput {
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
-
   componentWillLoad() {
     this.emitStyle();
   }
diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx
index 88a94f475b..03b148c5d9 100644
--- a/core/src/components/chip-button/chip-button.tsx
+++ b/core/src/components/chip-button/chip-button.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
@@ -39,7 +40,6 @@ export class ChipButton {
    */
   @Prop() href?: string;
 
-
   hostData() {
     return {
       class: {
diff --git a/core/src/components/chip-icon/chip-icon.tsx b/core/src/components/chip-icon/chip-icon.tsx
index 71818a998f..8e3f80cfe2 100644
--- a/core/src/components/chip-icon/chip-icon.tsx
+++ b/core/src/components/chip-icon/chip-icon.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index a4afeca8cf..6905756d37 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -1,8 +1,8 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-chip',
   styleUrls: {
diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
index ae08db84a6..b2ec85dfb9 100644
--- a/core/src/components/col/col.tsx
+++ b/core/src/components/col/col.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
+
 import { isMatch } from '../../utils/media';
 
 const SUPPORTS_VARS = !!(CSS && CSS.supports && CSS.supports('--a', '0'));
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index cfefe165f0..43d7d8b0b0 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, Listen, Method, Prop, QueueApi } from '@stencil/core';
+
 import { Color, Config, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-content',
   styleUrls: {
@@ -70,7 +70,6 @@ export class Content {
     return this.scrollEl!;
   }
 
-
   private resize() {
     if (!this.scrollEl) {
       return;
diff --git a/core/src/components/datetime/datetime-util.ts b/core/src/components/datetime/datetime-util.ts
index e6f5da6631..b73e60c9b0 100644
--- a/core/src/components/datetime/datetime-util.ts
+++ b/core/src/components/datetime/datetime-util.ts
@@ -32,7 +32,6 @@ export function renderDatetime(template: string, value: DatetimeData, locale: Lo
   return template;
 }
 
-
 export function renderTextFormat(format: string, value: any, date: DatetimeData | null, locale: LocaleData): string {
 
   if ((format === FORMAT_DDDD || format === FORMAT_DDD)) {
@@ -97,7 +96,6 @@ export function renderTextFormat(format: string, value: any, date: DatetimeData
   return value.toString();
 }
 
-
 export function dateValueRange(format: string, min: DatetimeData, max: DatetimeData): any[] {
   const opts: any[] = [];
 
@@ -172,7 +170,6 @@ export function isLeapYear(year: number): boolean {
   return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
 }
 
-
 const ISO_8601_REGEXP = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
 const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
 
@@ -231,7 +228,6 @@ export function parseDate(val: any): DatetimeData | null {
   };
 }
 
-
 export function updateDate(existingData: DatetimeData, newData: any): boolean {
   if (newData && newData !== '') {
 
@@ -258,9 +254,7 @@ export function updateDate(existingData: DatetimeData, newData: any): boolean {
 
       // merge new values from the picker's selection
       // to the existing DatetimeData values
-      for (const k in newData) {
-        (existingData as any)[k] = newData[k].value;
-      }
+      Object.assign(existingData, newData);
 
       return true;
     }
@@ -271,13 +265,14 @@ export function updateDate(existingData: DatetimeData, newData: any): boolean {
   } else {
     // blank data, clear everything out
     for (const k in existingData) {
-      delete (existingData as any)[k];
+      if (existingData.hasOwnProperty(k)) {
+        delete (existingData as any)[k];
+      }
     }
   }
   return false;
 }
 
-
 export function parseTemplate(template: string): string[] {
   const formats: string[] = [];
 
@@ -311,7 +306,6 @@ export function parseTemplate(template: string): string[] {
   return formats;
 }
 
-
 export function getValueFromFormat(date: DatetimeData, format: string) {
   if (format === FORMAT_A || format === FORMAT_a) {
     return (date.hour! < 12 ? 'am' : 'pm');
@@ -322,7 +316,6 @@ export function getValueFromFormat(date: DatetimeData, format: string) {
   return (date as any)[convertFormatToKey(format)!];
 }
 
-
 export function convertFormatToKey(format: string): string | null {
   for (const k in FORMAT_KEYS) {
     if (FORMAT_KEYS[k].f === format) {
@@ -332,7 +325,6 @@ export function convertFormatToKey(format: string): string | null {
   return null;
 }
 
-
 export function convertDataToISO(data: DatetimeData): string {
   // https://www.w3.org/TR/NOTE-datetime
   let rtn = '';
@@ -390,7 +382,6 @@ export function convertDataToISO(data: DatetimeData): string {
   return rtn;
 }
 
-
 /**
  * Use to convert a string of comma separated strings or
  * an array of strings, and clean up any user input
@@ -419,7 +410,6 @@ export function convertToArrayOfStrings(input: string | string[] | undefined | n
   return values;
 }
 
-
 /**
  * Use to convert a string of comma separated numbers or
  * an array of numbers, and clean up any user input
@@ -448,7 +438,6 @@ export function convertToArrayOfNumbers(input: any[] | string | number, type: st
   return values;
 }
 
-
 function twoDigit(val: number | undefined): string {
   return ('0' + (val ? Math.abs(val) : '0')).slice(-2);
 }
@@ -461,7 +450,6 @@ function fourDigit(val: number | undefined): string {
   return ('000' + (val ? Math.abs(val) : '0')).slice(-4);
 }
 
-
 export interface DatetimeData {
   [key: string]: any;
   year?: number;
@@ -474,7 +462,6 @@ export interface DatetimeData {
   tzOffset?: number;
 }
 
-
 export interface LocaleData {
   monthNames?: string[];
   monthShortNames?: string[];
@@ -482,7 +469,6 @@ export interface LocaleData {
   dayShortNames?: string[];
 }
 
-
 const FORMAT_YYYY = 'YYYY';
 const FORMAT_YY = 'YY';
 const FORMAT_MMMM = 'MMMM';
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index dae1acc4ff..a284dfdd65 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1,11 +1,10 @@
 import { Component, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
-
 import { CssClassMap, PickerColumn, PickerOptions, StyleEvent } from '../../interface';
 import { clamp, deferEvent } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 
+import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
 @Component({
   tag: 'ion-datetime',
@@ -199,7 +198,6 @@ export class Datetime {
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
-
   componentWillLoad() {
     // first see if locale names were provided in the inputs
     // then check to see if they're in the config
@@ -235,8 +233,6 @@ export class Datetime {
   }
 
   private buildPicker(pickerOptions: PickerOptions) {
-    console.debug('Build Datetime: Picker with', pickerOptions);
-
     // If the user has not passed in picker buttons,
     // add a cancel and ok button to the picker
     const buttons = pickerOptions.buttons;
@@ -257,7 +253,6 @@ export class Datetime {
 
     const picker = this.pickerCtrl.create(pickerOptions);
 
-    console.debug('Built Datetime: Picker with', pickerOptions);
     return picker;
   }
 
@@ -489,7 +484,6 @@ export class Datetime {
     return 0;
   }
 
-
   private divyColumns(columns: PickerColumn[]): PickerColumn[] {
     const pickerColumns = columns;
     const columnsWidth: number[] = [];
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 0407881c78..021a719e4b 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
+
 import { Color, CssClassMap, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx
index 4cda8d377d..c8dab4d45d 100644
--- a/core/src/components/fab-list/fab-list.tsx
+++ b/core/src/components/fab-list/fab-list.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Prop, Watch } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-fab-list',
   styleUrl: 'fab-list.scss',
@@ -30,7 +29,6 @@ export class FabList {
    */
   @Prop() side: 'start' | 'end' | 'top' | 'bottom' = 'bottom';
 
-
   hostData() {
     return {
       class: {
diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
index 0e9ca72617..f4cf73e53e 100644
--- a/core/src/components/fab/fab.tsx
+++ b/core/src/components/fab/fab.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-fab',
   styleUrl: 'fab.scss',
diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
index 70bf83d097..251232e264 100644
--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
diff --git a/core/src/components/gesture-controller/gesture-controller.tsx b/core/src/components/gesture-controller/gesture-controller.tsx
index e63a2db444..4b78b84c8b 100644
--- a/core/src/components/gesture-controller/gesture-controller.tsx
+++ b/core/src/components/gesture-controller/gesture-controller.tsx
@@ -1,5 +1,7 @@
 import { Component, Event, EventEmitter, Method } from '@stencil/core';
+
 import { BlockerConfig, BlockerDelegate, GestureConfig, GestureDelegate } from '../../interface';
+
 import { BlockerDelegate as BD, GestureDelegate as GD } from './gesture-controller-utils';
 
 @Component({
@@ -70,7 +72,9 @@ export class GestureController {
     if (maxPriority === priority) {
       this.capturedId = id;
       requestedStart.clear();
-      this.ionGestureCaptured && this.ionGestureCaptured.emit(gestureName);
+      if (this.ionGestureCaptured) {
+        this.ionGestureCaptured.emit(gestureName);
+      }
       return true;
     }
     requestedStart.delete(id);
diff --git a/core/src/components/gesture-controller/test/gesture-controller.spec.tsx b/core/src/components/gesture-controller/test/gesture-controller.spec.tsx
index 08e1bf80db..20c455a2e9 100644
--- a/core/src/components/gesture-controller/test/gesture-controller.spec.tsx
+++ b/core/src/components/gesture-controller/test/gesture-controller.spec.tsx
@@ -69,7 +69,6 @@ describe('gesture controller', () => {
     }
   });
 
-
   it('should test if canStart', () => {
     const c = new GestureController();
     expect(c.canStart('event')).toEqual(true);
@@ -108,7 +107,6 @@ describe('gesture controller', () => {
     expect(g2['id']).toEqual(2);
   });
 
-
   it('should initialize a delegate with options', async () => {
     const c = new GestureController();
     const g = await c.create({
@@ -159,7 +157,6 @@ describe('gesture controller', () => {
     expect(c['requestedStart']).toEqual(expected3);
   });
 
-
   it('should test if several gestures try to capture at the same time', async () => {
     const c = new GestureController();
     const g1 = await c.create({ name: 'swipe1' });
@@ -261,7 +258,6 @@ describe('gesture controller', () => {
       expect(b2['ctrl']).toEqual(c);
       expect(b2['id']).toEqual(2);
 
-
       expect(c.isDisabled('event1')).toBeFalsy();
       expect(c.isDisabled('event2')).toBeFalsy();
       expect(c.isDisabled('event3')).toBeFalsy();
@@ -305,7 +301,6 @@ describe('gesture controller', () => {
       expect(c.isDisabled('event5')).toBeFalsy();
     });
 
-
     it('should disable some events', async () => {
       const c = new GestureController();
 
diff --git a/core/src/components/gesture/gesture.tsx b/core/src/components/gesture/gesture.tsx
index 9e571bca0c..0583ced8a6 100644
--- a/core/src/components/gesture/gesture.tsx
+++ b/core/src/components/gesture/gesture.tsx
@@ -1,6 +1,8 @@
 import { Component, EventListenerEnable, Listen, Prop, QueueApi, Watch } from '@stencil/core';
+
 import { GestureCallback, GestureDelegate, GestureDetail } from '../../interface';
 import { assert, now } from '../../utils/helpers';
+
 import { PanRecognizer } from './recognizers';
 
 @Component({
diff --git a/core/src/components/grid/grid.tsx b/core/src/components/grid/grid.tsx
index 384908a717..62aa6a33de 100644
--- a/core/src/components/grid/grid.tsx
+++ b/core/src/components/grid/grid.tsx
@@ -1,6 +1,5 @@
 import { Component, Prop } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-grid',
   styleUrl: 'grid.scss',
diff --git a/core/src/components/header/header.tsx b/core/src/components/header/header.tsx
index fcd7060475..2ae35a3412 100644
--- a/core/src/components/header/header.tsx
+++ b/core/src/components/header/header.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
diff --git a/core/src/components/hide-when/hide-when.tsx b/core/src/components/hide-when/hide-when.tsx
index 23a560dd67..25b90b95f6 100644
--- a/core/src/components/hide-when/hide-when.tsx
+++ b/core/src/components/hide-when/hide-when.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
-import { Config, Mode } from '../../interface';
 
+import { Config, Mode } from '../../interface';
 import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
 
 @Component({
diff --git a/core/src/components/img/img.tsx b/core/src/components/img/img.tsx
index 165e1067c1..cfad44950f 100644
--- a/core/src/components/img/img.tsx
+++ b/core/src/components/img/img.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-img',
   styleUrl: 'img.scss',
@@ -43,7 +42,7 @@ export class Img {
     }
     if ('IntersectionObserver' in window) {
       this.removeIO();
-      this.io = new IntersectionObserver((data) => {
+      this.io = new IntersectionObserver(data => {
         // because there will only ever be one instance
         // of the element we are observing
         // we can just use data[0]
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 73702f6ef5..736f9e0a1a 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Config, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
diff --git a/core/src/components/infinite-scroll/infinite-scroll.tsx b/core/src/components/infinite-scroll/infinite-scroll.tsx
index c63924a46d..99f3b1e5da 100644
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -42,7 +42,6 @@ export class InfiniteScroll {
     }
   }
 
-
   /**
    * If true, the infinite scroll will be hidden and scroll event listeners
    * will be removed.
@@ -74,7 +73,6 @@ export class InfiniteScroll {
    */
   @Event() ionInfinite!: EventEmitter<void>;
 
-
   async componentDidLoad() {
     const contentEl = this.el.closest('ion-content');
     if (contentEl) {
diff --git a/core/src/components/input/input-base.tsx b/core/src/components/input/input-base.tsx
index 2e7d14fc3a..0090c17e3a 100644
--- a/core/src/components/input/input-base.tsx
+++ b/core/src/components/input/input-base.tsx
@@ -1,6 +1,7 @@
 // Shared Interfaces
 
 import { EventEmitter } from '@stencil/core';
+
 import { StyleEvent } from '../../interface';
 
 export interface InputBaseComponent {
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 3d568ca093..3c4be0f50b 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -1,9 +1,10 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+
 import { Color, InputChangeEvent, Mode, StyleEvent, TextFieldTypes } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
-import { InputComponent } from './input-base';
 
+import { InputComponent } from './input-base';
 
 @Component({
   tag: 'ion-input',
@@ -19,7 +20,6 @@ export class Input implements InputComponent {
   private inputId = `ion-input-${inputIds++}`;
   didBlurAfterEdit = false;
 
-
   @State() hasFocus = false;
 
   @Element() el!: HTMLElement;
@@ -212,7 +212,6 @@ export class Input implements InputComponent {
    */
   @Prop({ mutable: true }) value = '';
 
-
   /**
    * Update the native input element when the value changes
    */
diff --git a/core/src/components/item-divider/item-divider.tsx b/core/src/components/item-divider/item-divider.tsx
index 87a091fa37..0a8e4d4535 100644
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/item-group/item-group.tsx b/core/src/components/item-group/item-group.tsx
index 7ee9e29154..7a3c26e54d 100644
--- a/core/src/components/item-group/item-group.tsx
+++ b/core/src/components/item-group/item-group.tsx
@@ -1,8 +1,8 @@
 import { Component } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-item-group',
   styleUrls: {
diff --git a/core/src/components/item-option/item-option.tsx b/core/src/components/item-option/item-option.tsx
index 6c5d80600e..81f6a1efca 100644
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/item-options/item-options.tsx b/core/src/components/item-options/item-options.tsx
index 00aed1b3c5..e0eb273a6e 100644
--- a/core/src/components/item-options/item-options.tsx
+++ b/core/src/components/item-options/item-options.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+
 import { Side } from '../../interface';
 import { isEndSide } from '../../utils/helpers';
 
diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx
index 56606c6e50..9b75ebfca0 100644
--- a/core/src/components/item-sliding/item-sliding.tsx
+++ b/core/src/components/item-sliding/item-sliding.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, State } from '@stencil/core';
-import { GestureDetail } from '../../interface';
 
+import { GestureDetail } from '../../interface';
 
 const SWIPE_MARGIN = 30;
 const ELASTIC_FACTOR = 0.55;
@@ -22,7 +22,6 @@ const enum SlidingState {
   SwipeStart = 1 << 6,
 }
 
-
 @Component({
   tag: 'ion-item-sliding',
   styleUrl: 'item-sliding.scss'
@@ -88,7 +87,6 @@ export class ItemSliding {
     }
   }
 
-
   /**
    * Close the sliding item. Items can also be closed from the [List](../../list/List).
    */
@@ -138,7 +136,9 @@ export class ItemSliding {
   }
 
   private onDragStart() {
-    this.list && this.list.setOpenItem(this.el);
+    if (this.list) {
+      this.list.setOpenItem(this.el);
+    }
 
     if (this.tmr) {
       clearTimeout(this.tmr);
@@ -247,7 +247,9 @@ export class ItemSliding {
         this.state = SlidingState.Disabled;
         this.tmr = undefined;
       }, 600);
-      this.list && this.list.setOpenItem(undefined);
+      if (this.list) {
+        this.list.setOpenItem(undefined);
+      }
       style.transform = '';
       return;
     }
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 81fd223946..c52f139930 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
+
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
@@ -11,7 +12,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
   shadow: true
 })
 export class Item {
-  private itemStyles: { [key: string]: CssClassMap } = {};
+  private itemStyles = new Map<string, CssClassMap>();
 
   @Element() el!: HTMLStencilElement;
 
@@ -78,7 +79,6 @@ export class Item {
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
-
   @Listen('ionStyle')
   itemStyle(ev: UIEvent) {
     ev.stopPropagation();
@@ -87,7 +87,7 @@ export class Item {
     const updatedStyles = ev.detail as any;
     const updatedKeys = Object.keys(ev.detail);
     const newStyles = {} as any;
-    const childStyles = this.itemStyles[tagName] || {};
+    const childStyles = this.itemStyles.get(tagName) || {};
     let hasStyleChange = false;
     for (const key of updatedKeys) {
       const itemKey = `item-${key}`;
@@ -99,7 +99,7 @@ export class Item {
     }
 
     if (hasStyleChange) {
-      this.itemStyles[tagName] = newStyles;
+      this.itemStyles.set(tagName, newStyles);
       this.el.forceUpdate();
     }
   }
@@ -107,12 +107,11 @@ export class Item {
   componentDidLoad() {
     // Change the button size to small for each ion-button in the item
     // unless the size is explicitly set
-    const buttons = this.el.querySelectorAll('ion-button');
-    for (let i = 0; i < buttons.length; i++) {
-      if (!buttons[i].size) {
-        buttons[i].size = 'small';
+    Array.from(this.el.querySelectorAll('ion-button')).forEach(button => {
+      if (!button.size) {
+        button.size = 'small';
       }
-    }
+    });
   }
 
   private isClickable(): boolean {
@@ -121,8 +120,8 @@ export class Item {
 
   hostData() {
     const childStyles = {};
-    for (const key in this.itemStyles) {
-      Object.assign(childStyles, this.itemStyles[key]);
+    for (const value of this.itemStyles.values()) {
+      Object.assign(childStyles, value);
     }
 
     return {
diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index 87f8b6f2d8..770f03a95f 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
+
 import { Color, Mode, StyleEvent } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/list-header/list-header.tsx b/core/src/components/list-header/list-header.tsx
index e2fac6fd63..49523a2b04 100644
--- a/core/src/components/list-header/list-header.tsx
+++ b/core/src/components/list-header/list-header.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx
index 889fcb0222..6d14bf9a9f 100644
--- a/core/src/components/list/list.tsx
+++ b/core/src/components/list/list.tsx
@@ -1,4 +1,5 @@
 import { Component, Method, Prop } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
diff --git a/core/src/components/loading-controller/loading-controller.tsx b/core/src/components/loading-controller/loading-controller.tsx
index f73eddb908..e163591726 100644
--- a/core/src/components/loading-controller/loading-controller.tsx
+++ b/core/src/components/loading-controller/loading-controller.tsx
@@ -1,8 +1,8 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { LoadingOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
-
 @Component({
   tag: 'ion-loading-controller'
 })
diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts
index a353118383..490b2dbcef 100644
--- a/core/src/components/loading/animations/ios.enter.ts
+++ b/core/src/components/loading/animations/ios.enter.ts
@@ -1,6 +1,5 @@
 import { Animation } from '../../../interface';
 
-
 /**
  * iOS Loading Enter Animation
  */
diff --git a/core/src/components/loading/animations/ios.leave.ts b/core/src/components/loading/animations/ios.leave.ts
index e7c99e8ef0..54920b8f15 100644
--- a/core/src/components/loading/animations/ios.leave.ts
+++ b/core/src/components/loading/animations/ios.leave.ts
@@ -1,6 +1,5 @@
 import { Animation } from '../../../interface';
 
-
 /**
  * iOS Loading Leave Animation
  */
@@ -18,7 +17,6 @@ export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement): P
   wrapperAnimation.fromTo('opacity', 0.99, 0)
                   .fromTo('scale', 1, 0.9);
 
-
   return Promise.resolve(baseAnimation
     .addElement(baseEl)
     .easing('ease-in-out')
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 8f9b68c321..d1e9703fb2 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -1,11 +1,11 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+
 import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
-
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index ab122e3acd..9a8ef9bc3a 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Config, Mode } from '../../interface';
 
 @Component({
diff --git a/core/src/components/menu-controller/animations/overlay.ts b/core/src/components/menu-controller/animations/overlay.ts
index 6bed0d3f3e..f0cdf07c08 100644
--- a/core/src/components/menu-controller/animations/overlay.ts
+++ b/core/src/components/menu-controller/animations/overlay.ts
@@ -1,4 +1,5 @@
 import { Animation, Menu } from '../../../interface';
+
 import { baseAnimation } from './base';
 
 const BOX_SHADOW_WIDTH = 8;
@@ -9,7 +10,8 @@ const BOX_SHADOW_WIDTH = 8;
  * itself, which is under the menu, does not move.
  */
 export function menuOverlayAnimation(AnimationC: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
-  let closedX: string, openedX: string;
+  let closedX: string;
+  let openedX: string;
   const width = menu.width + BOX_SHADOW_WIDTH;
   if (menu.isEndSide) {
     // right side
diff --git a/core/src/components/menu-controller/animations/push.ts b/core/src/components/menu-controller/animations/push.ts
index feb7af96c4..545e3127ff 100644
--- a/core/src/components/menu-controller/animations/push.ts
+++ b/core/src/components/menu-controller/animations/push.ts
@@ -1,4 +1,5 @@
 import { Animation, Menu } from '../../../interface';
+
 import { baseAnimation } from './base';
 
 /**
@@ -9,7 +10,8 @@ import { baseAnimation } from './base';
  */
 export function menuPushAnimation(AnimationC: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
 
-  let contentOpenedX: string, menuClosedX: string;
+  let contentOpenedX: string;
+  let menuClosedX: string;
   const width = menu.width;
 
   if (menu.isEndSide) {
@@ -32,7 +34,7 @@ export function menuPushAnimation(AnimationC: Animation, _: HTMLElement, menu: M
     .addElement(menu.backdropEl)
     .fromTo('opacity', 0.01, 0.2);
 
-  return baseAnimation(AnimationC).then((animation) => {
+  return baseAnimation(AnimationC).then(animation => {
     return animation.add(menuAni)
     .add(backdropAni)
     .add(contentAni);
diff --git a/core/src/components/menu-controller/animations/reveal.ts b/core/src/components/menu-controller/animations/reveal.ts
index 721031cf3d..d809477a4a 100644
--- a/core/src/components/menu-controller/animations/reveal.ts
+++ b/core/src/components/menu-controller/animations/reveal.ts
@@ -1,4 +1,5 @@
 import { Animation, Menu } from '../../../interface';
+
 import { baseAnimation } from './base';
 
 /**
diff --git a/core/src/components/menu-controller/menu-controller.ts b/core/src/components/menu-controller/menu-controller.ts
index c5d4c11bf1..a893667daf 100644
--- a/core/src/components/menu-controller/menu-controller.ts
+++ b/core/src/components/menu-controller/menu-controller.ts
@@ -1,4 +1,5 @@
 import { Build, Component, Method, Prop } from '@stencil/core';
+
 import { Animation, AnimationBuilder, Menu } from '../../interface';
 
 import { menuOverlayAnimation } from './animations/overlay';
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index a1781d7a9e..4aeb94388f 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
+
 import { Animation, Config, GestureDetail, MenuChangeEventDetail, Mode, Side } from '../../interface';
 import { assert, isEndSide as isEnd } from '../../utils/helpers';
 
@@ -172,7 +173,9 @@ export class Menu {
 
   componentDidUnload() {
     this.menuCtrl!._unregister(this);
-    this.animation && this.animation.destroy();
+    if (this.animation) {
+      this.animation.destroy();
+    }
 
     this.animation = undefined;
     this.contentEl = this.backdropEl = this.menuInnerEl = undefined;
@@ -366,7 +369,9 @@ export class Menu {
     // this places the menu into the correct location before it animates in
     // this css class doesn't actually kick off any animations
     this.el.classList.add(SHOW_MENU);
-    this.backdropEl && this.backdropEl.classList.add(SHOW_BACKDROP);
+    if (this.backdropEl) {
+      this.backdropEl.classList.add(SHOW_BACKDROP);
+    }
     this.isAnimating = true;
   }
 
@@ -385,15 +390,21 @@ export class Menu {
 
     if (isOpen) {
       // add css class
-      this.contentEl && this.contentEl.classList.add(MENU_CONTENT_OPEN);
+      if (this.contentEl) {
+        this.contentEl.classList.add(MENU_CONTENT_OPEN);
+      }
 
       // emit open event
       this.ionOpen.emit();
     } else {
       // remove css classes
       this.el.classList.remove(SHOW_MENU);
-      this.contentEl && this.contentEl.classList.remove(MENU_CONTENT_OPEN);
-      this.backdropEl && this.backdropEl.classList.remove(SHOW_BACKDROP);
+      if (this.contentEl) {
+        this.contentEl.classList.remove(MENU_CONTENT_OPEN);
+      }
+      if (this.backdropEl) {
+        this.backdropEl.classList.remove(SHOW_BACKDROP);
+      }
 
       // emit close event
       this.ionClose.emit();
diff --git a/core/src/components/modal-controller/modal-controller.tsx b/core/src/components/modal-controller/modal-controller.tsx
index 09c2155ae7..6c4bf9a8ad 100644
--- a/core/src/components/modal-controller/modal-controller.tsx
+++ b/core/src/components/modal-controller/modal-controller.tsx
@@ -1,8 +1,8 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { ModalOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
-
 @Component({
   tag: 'ion-modal-controller'
 })
diff --git a/core/src/components/modal/animations/ios.enter.ts b/core/src/components/modal/animations/ios.enter.ts
index 392d45ed57..3014af0ba2 100644
--- a/core/src/components/modal/animations/ios.enter.ts
+++ b/core/src/components/modal/animations/ios.enter.ts
@@ -1,6 +1,5 @@
 import { Animation } from '../../../interface';
 
-
 /**
  * iOS Modal Enter Animation
  */
@@ -34,7 +33,6 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): P
 
 // }
 
-
 // export class ModalSlideOut {
 //   constructor(el: HTMLElement) {
 //     let backdrop = new Animation(this.plt, el.querySelector('ion-backdrop'));
@@ -56,7 +54,6 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): P
 //   }
 // }
 
-
 // export class ModalMDSlideIn {
 //   constructor(el: HTMLElement) {
 //     const backdrop = new Animation(this.plt, el.querySelector('ion-backdrop'));
@@ -74,7 +71,6 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement): P
 //   }
 // }
 
-
 // export class ModalMDSlideOut {
 //   constructor(el: HTMLElement) {
 //     const backdrop = new Animation(this.plt, el.querySelector('ion-backdrop'));
diff --git a/core/src/components/modal/animations/ios.leave.ts b/core/src/components/modal/animations/ios.leave.ts
index 580ac3b10a..3fedaa1571 100644
--- a/core/src/components/modal/animations/ios.leave.ts
+++ b/core/src/components/modal/animations/ios.leave.ts
@@ -1,6 +1,5 @@
 import { Animation } from '../../../interface';
 
-
 /**
  * iOS Modal Leave Animation
  */
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index f6e938ae64..7ab202b87f 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1,13 +1,12 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 
+import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
-
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
@@ -222,14 +221,3 @@ const LIFECYCLE_MAP: any = {
   'ionModalWillDismiss': 'ionViewWillDismiss',
   'ionModalDidDismiss': 'ionViewDidDismiss',
 };
-
-export interface ModalOptions {
-  component: ComponentRef;
-  componentProps?: ComponentProps;
-  showBackdrop?: boolean;
-  enableBackdropDismiss?: boolean;
-  enterAnimation?: AnimationBuilder;
-  leaveAnimation?: AnimationBuilder;
-  cssClass?: string | string[];
-  delegate?: FrameworkDelegate;
-}
diff --git a/core/src/components/nav-push/nav-push.tsx b/core/src/components/nav-push/nav-push.tsx
index 39d6758efc..989253a563 100644
--- a/core/src/components/nav-push/nav-push.tsx
+++ b/core/src/components/nav-push/nav-push.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
+
 import { ComponentProps, NavComponent } from '../../interface';
 
 @Component({
diff --git a/core/src/components/nav-set-root/nav-set-root.tsx b/core/src/components/nav-set-root/nav-set-root.tsx
index 367162e82d..ca50c43df4 100644
--- a/core/src/components/nav-set-root/nav-set-root.tsx
+++ b/core/src/components/nav-set-root/nav-set-root.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
+
 import { ComponentProps, NavComponent } from '../../interface';
 
 @Component({
diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx
index a727f43425..9b4642b778 100644
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@@ -1,8 +1,10 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, QueueApi, Watch } from '@stencil/core';
+
 import { ViewLifecycle } from '../..';
 import { Animation, ComponentProps, Config, FrameworkDelegate, GestureDetail, Mode, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
 import { assert } from '../../utils/helpers';
 import { TransitionOptions, lifecycle, setPageHidden, transition } from '../../utils/transition';
+
 import { ViewState, convertToViews, matches } from './view-controller';
 
 @Component({
@@ -107,7 +109,9 @@ export class Nav implements NavOutlet {
     }
 
     // release swipe back gesture and transition
-    this.sbTrns && this.sbTrns.destroy();
+    if (this.sbTrns) {
+      this.sbTrns.destroy();
+    }
     this.transInstr.length = this.views.length = 0;
     this.sbTrns = undefined;
     this.destroyed = true;
@@ -786,7 +790,9 @@ export class Nav implements NavOutlet {
 
     // this is the root transition
     // it's safe to destroy this transition
-    trans && trans.destroy();
+    if (trans) {
+      trans.destroy();
+    }
 
     return {
       hasCompleted,
diff --git a/core/src/components/nav/test/nav-controller.spec.ts b/core/src/components/nav/test/nav-controller.spec.ts
index 6e3477810d..3a3980666f 100644
--- a/core/src/components/nav/test/nav-controller.spec.ts
+++ b/core/src/components/nav/test/nav-controller.spec.ts
@@ -1,12 +1,11 @@
 import { TestWindow } from '@stencil/core/dist/testing';
+
 import { Config } from '../../../global/config';
 import { AnimationControllerImpl } from '../../animation-controller/animation-controller';
 import { Nav } from '../nav';
 import { NavOptions } from '../nav-interface';
 import { ViewController, ViewState } from '../view-controller';
 
-
-
 describe('NavController', () => {
 
   describe('push and pop', () => {
@@ -164,7 +163,6 @@ describe('NavController', () => {
       );
       expect(nav.length()).toEqual(2);
 
-
     }, 10000);
   });
 
@@ -229,7 +227,7 @@ describe('NavController', () => {
 
     }, 10000);
 
-    it('should not insert if null view', (done) => {
+    it('should not insert if null view', done => {
       mockViews(nav, [mockView(MockView1)]);
 
       nav.insert(-1, null as any, null, null, trnsDone).then(() => {
@@ -290,7 +288,7 @@ describe('NavController', () => {
 
   describe('pop', () => {
 
-    it('should not pop when no views in the stack', (done) => {
+    it('should not pop when no views in the stack', done => {
       nav.pop(null, trnsDone).then(() => {
         fail('it should not succeed');
         done();
@@ -338,7 +336,6 @@ describe('NavController', () => {
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
       expect(nav['isTransitioning']).toEqual(false);
 
-
     }, 10000);
 
   });
@@ -362,7 +359,6 @@ describe('NavController', () => {
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
       expect(nav.getByIndex(1)!.component).toEqual(MockView2);
 
-
     }, 10000);
 
     it('should pop to using an index number', async () => {
@@ -383,7 +379,6 @@ describe('NavController', () => {
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
       expect(nav.getByIndex(1)!.component).toEqual(MockView2);
 
-
     }, 10000);
 
     it('should pop to first using an index number', async () => {
@@ -484,7 +479,6 @@ describe('NavController', () => {
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
 
-
     }, 10000);
 
     it('should not pop first view if it\'s the only view', async () => {
@@ -500,7 +494,6 @@ describe('NavController', () => {
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
 
-
     }, 10000);
 
   });
@@ -553,7 +546,6 @@ describe('NavController', () => {
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView4);
 
-
     }, 10000);
 
     it('should remove two views in the middle', async () => {
@@ -612,7 +604,6 @@ describe('NavController', () => {
       expect(nav.getByIndex(1)!.component).toEqual(MockView2);
       expect(nav.getByIndex(2)!.component).toEqual(MockView5);
 
-
     }, 10000);
 
     it('should remove the last two views at the end', async () => {
@@ -662,7 +653,6 @@ describe('NavController', () => {
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
       expect(nav.getByIndex(1)!.component).toEqual(MockView2);
 
-
     }, 10000);
 
   });
@@ -706,7 +696,6 @@ describe('NavController', () => {
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView3);
 
-
     }, 10000);
 
     it('should set a ViewController as the root when its the middle view, with transition', async () => {
@@ -785,8 +774,6 @@ describe('NavController', () => {
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView1);
 
-
-
     }, 10000);
 
     it('should set a page component as the root, with transition', async () => {
@@ -813,7 +800,6 @@ describe('NavController', () => {
       expect(nav.length()).toEqual(1);
       expect(nav.getByIndex(0)!.component).toEqual(MockView4);
 
-
     }, 10000);
   });
 
@@ -846,7 +832,6 @@ describe('NavController', () => {
       expect(nav.getByIndex(0)!.component).toEqual(MockView4);
       expect(nav.getByIndex(1)!.component).toEqual(MockView5);
 
-
     }, 10000);
 
   });
@@ -874,7 +859,6 @@ describe('NavController', () => {
     });
   });
 
-
   function spyOnLifecycles(view: ViewController) {
     const element = view.element as any;
     Object.assign(element, {
@@ -921,7 +905,6 @@ describe('NavController', () => {
     nav = mockNavController();
   });
 
-
   const MockView = 'mock-view';
   const MockView1 = 'mock-view1';
   const MockView2 = 'mock-view2';
@@ -929,7 +912,6 @@ describe('NavController', () => {
   const MockView4 = 'mock-view4';
   const MockView5 = 'mock-view5';
 
-
   function mockView(component ?: any, data ?: any) {
     if (!component) {
       component = MockView;
@@ -970,4 +952,3 @@ describe('NavController', () => {
     return navI;
   }
 });
-
diff --git a/core/src/components/nav/view-controller.ts b/core/src/components/nav/view-controller.ts
index c9995d62ee..220eb812c0 100644
--- a/core/src/components/nav/view-controller.ts
+++ b/core/src/components/nav/view-controller.ts
@@ -2,7 +2,6 @@ import { ComponentProps, FrameworkDelegate, Nav } from '../../interface';
 import { attachComponent } from '../../utils/framework-delegate';
 import { assert } from '../../utils/helpers';
 
-
 export const enum ViewState {
   New = 1,
   Attached,
diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx
index 16135ec4d1..d6a2f0dc0f 100644
--- a/core/src/components/note/note.tsx
+++ b/core/src/components/note/note.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index 263327a8bb..558cd4350d 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -1,10 +1,10 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
+
 import { GestureDetail, Mode, PickerColumn, PickerColumnOption } from '../../interface';
 import { hapticSelectionChanged } from '../../utils';
 import { clamp } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 
-
 /** @hidden */
 @Component({
   tag: 'ion-picker-column'
@@ -237,8 +237,6 @@ export class PickerColumnCmp {
   }
 
   private onDragStart(detail: GestureDetail): boolean {
-    console.debug('picker, onDragStart', detail, this.startY);
-
     // We have to prevent default in order to block scrolling under the picker
     // but we DO NOT have to stop propagation, since we still want
     // some "click" events to capture
@@ -313,8 +311,6 @@ export class PickerColumnCmp {
       return;
     }
 
-    console.debug('picker, onDragEnd', detail);
-
     this.velocity = 0;
 
     if (this.bounceFrom > 0) {
@@ -431,7 +427,7 @@ export class PickerColumnCmp {
           <button
             class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }}
             disable-activated
-            onClick={(event) => this.optClick(event, index)}>
+            onClick={event => this.optClick(event, index)}>
             {o.text}
           </button>
         )}
diff --git a/core/src/components/picker-controller/picker-controller.tsx b/core/src/components/picker-controller/picker-controller.tsx
index 5eb593ba18..654c9711a7 100644
--- a/core/src/components/picker-controller/picker-controller.tsx
+++ b/core/src/components/picker-controller/picker-controller.tsx
@@ -1,8 +1,8 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { PickerOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
-
 /** @hidden */
 @Component({
   tag: 'ion-picker-controller'
diff --git a/core/src/components/picker/animations/ios.enter.ts b/core/src/components/picker/animations/ios.enter.ts
index d14ce9a5c6..55ed754867 100644
--- a/core/src/components/picker/animations/ios.enter.ts
+++ b/core/src/components/picker/animations/ios.enter.ts
@@ -1,6 +1,5 @@
 import { Animation } from '../../../interface';
 
-
 /**
  * iOS Picker Enter Animation
  */
diff --git a/core/src/components/picker/animations/ios.leave.ts b/core/src/components/picker/animations/ios.leave.ts
index 9a12c441ba..3a4787badf 100644
--- a/core/src/components/picker/animations/ios.leave.ts
+++ b/core/src/components/picker/animations/ios.leave.ts
@@ -1,6 +1,5 @@
 import { Animation } from '../../../interface';
 
-
 /**
  * iOS Picker Leave Animation
  */
diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index dd72ce720b..bdbfcd6e23 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
 
+import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
 import { dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
@@ -26,11 +26,8 @@ export class Picker implements OverlayInterface {
   @State() private showSpinner!: boolean;
   @State() private spinner!: string;
 
-  @Prop({ connect: 'ion-animation-controller' })
-  animationCtrl!: HTMLIonAnimationControllerElement;
-
-  @Prop({ context: 'config' })
-  config!: Config;
+  @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
+  @Prop({ context: 'config' }) config!: Config;
 
   /** @hidden */
   @Prop() overlayId!: number;
@@ -281,6 +278,7 @@ export class Picker implements OverlayInterface {
     return {
       class: {
         ...createThemedClasses(this.mode, 'picker'),
+        ...getClassMap(this.cssClass)
       },
       style: {
         zIndex: 20000 + this.overlayId
@@ -289,19 +287,11 @@ export class Picker implements OverlayInterface {
   }
 
   render() {
-    // TODO: cssClass
-
-    const buttons = this.buttons
-      .map(b => {
-        if (typeof b === 'string') {
-          b = { text: b };
-        }
-        if (!b.cssClass) {
-          b.cssClass = '';
-        }
-        return b;
-      })
-      .filter(b => b !== null);
+    const buttons = this.buttons.map(b => {
+      return (typeof b === 'string')
+        ? { text: b }
+        : b;
+    });
 
     const columns = this.columns;
 
diff --git a/core/src/components/popover-controller/popover-controller.tsx b/core/src/components/popover-controller/popover-controller.tsx
index 1f699d35e7..c24da23592 100644
--- a/core/src/components/popover-controller/popover-controller.tsx
+++ b/core/src/components/popover-controller/popover-controller.tsx
@@ -1,4 +1,5 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { PopoverOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index c719ed52a8..52713b1cf0 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -1,13 +1,12 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 
+import { Animation, AnimationBuilder, Color, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
-
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
@@ -127,7 +126,6 @@ export class Popover implements OverlayInterface {
    */
   @Event({ eventName: 'ionPopoverDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-
   componentDidLoad() {
     this.ionPopoverDidLoad.emit();
   }
@@ -225,8 +223,8 @@ export class Popover implements OverlayInterface {
       'no-router': true,
       class: {
         ...createThemedClasses(this.mode, 'popover'),
-        ...themedClasses,
         ...getClassMap(this.cssClass),
+        ...themedClasses,
       }
     };
   }
@@ -251,7 +249,6 @@ const LIFECYCLE_MAP: any = {
   'ionPopoverDidDismiss': 'ionViewDidDismiss',
 };
 
-
 export const POPOVER_POSITION_PROPERTIES: any = {
   ios: {
     padding: 2,
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index d4dd1406d6..1ed81238ca 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentDidLoad, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
-import { InputChangeEvent, RadioGroupInput } from '../../interface';
 
+import { InputChangeEvent, RadioGroupInput } from '../../interface';
 
 @Component({
   tag: 'ion-radio-group'
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index 93e74842a0..dfd11e61b9 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,9 +1,9 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+
 import { CheckedInputChangeEvent, Color, Mode, RadioButtonInput, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-radio',
   styleUrls: {
@@ -84,7 +84,6 @@ export class Radio implements RadioButtonInput {
    */
   @Event() ionBlur!: EventEmitter<void>;
 
-
   componentWillLoad() {
     this.ionSelect = deferEvent(this.ionSelect);
     this.ionStyle = deferEvent(this.ionStyle);
diff --git a/core/src/components/range-knob/range-knob.tsx b/core/src/components/range-knob/range-knob.tsx
index c7150a097d..b673110986 100644
--- a/core/src/components/range-knob/range-knob.tsx
+++ b/core/src/components/range-knob/range-knob.tsx
@@ -1,4 +1,5 @@
 import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
+
 import { Knob } from '../../interface';
 
 /** @hidden */
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index a96978929a..eb5fe8ad51 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -1,7 +1,9 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';
+
 import { BaseInput, Color, GestureDetail, Mode, RangeInputChangeEvent, StyleEvent } from '../../interface';
 import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
+
 import { Knob, RangeEventDetail, RangeValue } from './range-interface';
 
 @Component({
@@ -332,7 +334,7 @@ export class Range implements BaseInput {
         direction="x"
         threshold={0}
       >
-        <div class="range-slider" ref={(el) => this.rangeSlider = el}>
+        <div class="range-slider" ref={el => this.rangeSlider = el}>
           {ticks.map(t => (
             <div
               style={{ left: t.left }}
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index d942b8dc42..ba3ab0e4bc 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Config } from '../../interface';
 
 @Component({
@@ -28,7 +29,6 @@ export class RefresherContent {
    */
   @Prop() refreshingText?: string;
 
-
   protected componentDidLoad() {
     if (!this.pullingIcon) {
       this.pullingIcon = this.config.get('ionPullIcon', 'arrow-down');
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 0801e30d40..da4e00a9c3 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State } from '@stencil/core';
+
 import { GestureDetail, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
@@ -43,7 +44,6 @@ export class Refresher {
    */
   @State() private state: RefresherState = RefresherState.Inactive;
 
-
   @Element() el!: HTMLElement;
 
   /**
@@ -222,7 +222,6 @@ export class Refresher {
     }
 
     // prevent native scroll events
-    console.debug('preventDefault');
     ev.preventDefault();
 
     // the refresher is actively pulling at this point
diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
index 89ba925b2e..a0e3f19415 100644
--- a/core/src/components/reorder-group/reorder-group.tsx
+++ b/core/src/components/reorder-group/reorder-group.tsx
@@ -1,9 +1,9 @@
 import { Component, Element, Prop, QueueApi, State } from '@stencil/core';
+
 import { GestureDetail, Mode } from '../../interface';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/haptic';
 import { createThemedClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-reorder-group',
   styleUrl: 'reorder-group.scss'
diff --git a/core/src/components/reorder/reorder.tsx b/core/src/components/reorder/reorder.tsx
index 501ef2865c..023ffb67cd 100644
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@@ -1,4 +1,5 @@
 import { Component } from '@stencil/core';
+
 import { Mode } from '../../interface';
 
 @Component({
diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx
index d921aa819e..d583c4b239 100644
--- a/core/src/components/ripple-effect/ripple-effect.tsx
+++ b/core/src/components/ripple-effect/ripple-effect.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, Watch } from '@stencil/core';
+
 import { now } from '../../utils/helpers';
 
 @Component({
@@ -55,7 +56,9 @@ export class RippleEffect {
    */
   @Method()
   addRipple(pageX: number, pageY: number) {
-    let x: number, y: number, size: number;
+    let x: number;
+    let y: number;
+    let size: number;
 
     this.queue.read(() => {
       const rect = this.el.getBoundingClientRect();
diff --git a/core/src/components/router-outlet/route-outlet.tsx b/core/src/components/router-outlet/route-outlet.tsx
index e1726fb12f..d273c6c2ab 100644
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@@ -1,9 +1,9 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
+
 import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavOutlet, RouteID, RouteWrite, RouterOutletOptions } from '../../interface';
 import { transition } from '../../utils';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
-
 @Component({
   tag: 'ion-router-outlet',
   styleUrl: 'route-outlet.scss',
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index b9a9cdbb1e..93cee08ac4 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -1,6 +1,8 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+
 import { Config, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
 import { debounce } from '../../utils/helpers';
+
 import { RouterIntent } from './utils/constants';
 import { printRedirects, printRoutes } from './utils/debug';
 import { readNavState, waitUntilNavNode, writeNavState } from './utils/dom';
@@ -8,7 +10,6 @@ import { routeRedirect, routerIDsToChain, routerPathToChain } from './utils/matc
 import { readRedirects, readRoutes } from './utils/parser';
 import { chainToPath, generatePath, parsePath, readPath, writePath } from './utils/path';
 
-
 @Component({
   tag: 'ion-router'
 })
@@ -198,7 +199,9 @@ export class Router {
 
     // generate route event and emit will change
     const routeEvent = this.routeChangeEvent(path, redirectFrom);
-    routeEvent && this.ionRouteWillChange.emit(routeEvent);
+    if (routeEvent) {
+      this.ionRouteWillChange.emit(routeEvent);
+    }
 
     const changed = await writeNavState(node, chain, intent, index);
     this.busy = false;
@@ -208,8 +211,9 @@ export class Router {
     }
 
     // emit did change
-    routeEvent && this.ionRouteDidChange.emit(routeEvent);
-
+    if (routeEvent) {
+      this.ionRouteDidChange.emit(routeEvent);
+    }
     return changed;
   }
 
diff --git a/core/src/components/router/test/e2e.spec.tsx b/core/src/components/router/test/e2e.spec.tsx
index 8e7843ac5f..860353ce8a 100644
--- a/core/src/components/router/test/e2e.spec.tsx
+++ b/core/src/components/router/test/e2e.spec.tsx
@@ -1,8 +1,10 @@
 import { TestWindow } from '@stencil/core/dist/testing';
+
 import { RouteChain, RouteID } from '../utils/interface';
 import { routerIDsToChain, routerPathToChain } from '../utils/matching';
 import { readRoutes } from '../utils/parser';
 import { chainToPath, generatePath, parsePath } from '../utils/path';
+
 import { mockRouteElement } from './parser.spec';
 
 describe('ionic-conference-app', () => {
@@ -48,7 +50,6 @@ describe('ionic-conference-app', () => {
     win = new TestWindow() as any;
   });
 
-
   function conferenceAppRouting() {
   const p2 = mockRouteElement(win, '/', 'tab-schedule');
   const p3 = mockRouteElement(win, '/', 'PAGE-SCHEDULE');
@@ -75,7 +76,6 @@ describe('ionic-conference-app', () => {
 }
 });
 
-
 export function getRouteIDs(path: string, routes: RouteChain[]): string[] {
   return routerPathToChain(parsePath(path), routes)!.map(r => r.id);
 }
diff --git a/core/src/components/router/test/matching.spec.tsx b/core/src/components/router/test/matching.spec.tsx
index adc95e1221..f13c703d56 100644
--- a/core/src/components/router/test/matching.spec.tsx
+++ b/core/src/components/router/test/matching.spec.tsx
@@ -27,8 +27,6 @@ const CHAIN_3: RouteChain = [
   { id: '4', path: [''], params: undefined },
 ];
 
-
-
 describe('matchesIDs', () => {
   it('should match simple set of ids', () => {
     const chain: RouteChain = CHAIN_1;
@@ -228,7 +226,6 @@ describe('mergeParams', () => {
   });
 });
 
-
 describe('RouterSegments', () => {
   it ('should initialize with empty array', () => {
     const s = new RouterSegments([]);
@@ -265,7 +262,6 @@ describe('matchesRedirect', () => {
     expect(matchesRedirect(['workouts', 'hola'], { from: ['workouts', '*'], to: [''] })).toBeTruthy();
     expect(matchesRedirect(['workouts', 'hola'], { from: ['workouts', 'hola'], to: [''] })).toBeTruthy();
 
-
     expect(matchesRedirect(['workouts'], { from: ['workouts', '*'], to: [''] })).toBeFalsy();
     expect(matchesRedirect(['workouts', 'hola'], { from: ['workouts'], to: [''] })).toBeFalsy();
     expect(matchesRedirect(['workouts', 'hola'], { from: ['workouts', 'adios'], to: [''] })).toBeFalsy();
diff --git a/core/src/components/router/test/parser.spec.tsx b/core/src/components/router/test/parser.spec.tsx
index 014fb9e42b..50fcd066a8 100644
--- a/core/src/components/router/test/parser.spec.tsx
+++ b/core/src/components/router/test/parser.spec.tsx
@@ -1,4 +1,5 @@
 import { TestWindow } from '@stencil/core/dist/testing';
+
 import { RouteRedirect, RouteTree } from '../utils/interface';
 import { flattenRouterTree, readRedirects, readRouteNodes } from '../utils/parser';
 
@@ -107,4 +108,3 @@ export function mockRedirectElement(win: Window, from: string | undefined, to: s
   }
   return el;
 }
-
diff --git a/core/src/components/router/test/path.spec.tsx b/core/src/components/router/test/path.spec.tsx
index e07462e671..6bc2749928 100644
--- a/core/src/components/router/test/path.spec.tsx
+++ b/core/src/components/router/test/path.spec.tsx
@@ -43,7 +43,6 @@ describe('parseURL', () => {
   });
 });
 
-
 describe('generatePath', () => {
   it('should generate an empty URL', () => {
     expect(generatePath([])).toEqual('/');
@@ -68,7 +67,6 @@ describe('generatePath', () => {
   });
 });
 
-
 describe('chainToPath', () => {
   it('should generate a simple URL', () => {
     const chain: RouteChain = [
@@ -193,7 +191,6 @@ describe('writePath', () => {
     expect(history.pushState).toHaveBeenCalledWith(123, '', '/to/schedule');
   });
 
-
   it('should write non root path (no hash)', () => {
     const history = mockHistory();
     writePath(history, '/path', false, [''], RouterIntent.Forward, 2);
@@ -248,11 +245,9 @@ function mockHistory(): History {
   } as any;
 }
 
-
 function mockLocation(pathname: string, hash: string): Location {
   return {
     pathname,
     hash
   } as Location;
 }
-
diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
index 2498e3c963..6028f6b946 100644
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,4 +1,5 @@
 import { NavOutletElement, RouteChain, RouteID } from '../../../interface';
+
 import { RouterIntent } from './constants';
 
 export async function writeNavState(
@@ -70,7 +71,7 @@ export function waitUntilNavNode(win: Window) {
   if (searchNavNode(win.document.body)) {
     return Promise.resolve();
   }
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     win.addEventListener('ionNavWillLoad', resolve, { once: true });
   });
 }
diff --git a/core/src/components/router/utils/interface.ts b/core/src/components/router/utils/interface.ts
index 6259ddb881..dd520aacf3 100644
--- a/core/src/components/router/utils/interface.ts
+++ b/core/src/components/router/utils/interface.ts
@@ -1,5 +1,4 @@
 
-
 export interface NavOutlet {
   setRouteId(id: string, data: any, direction: number): Promise<RouteWrite>;
   getRouteId(): RouteID | undefined;
diff --git a/core/src/components/router/utils/matching.ts b/core/src/components/router/utils/matching.ts
index 371711f6f9..a398e1b788 100644
--- a/core/src/components/router/utils/matching.ts
+++ b/core/src/components/router/utils/matching.ts
@@ -1,6 +1,5 @@
 import { RouteChain, RouteID, RouteRedirect } from './interface';
 
-
 export function matchesRedirect(input: string[], route: RouteRedirect): route is RouteRedirect {
   const { from, to } = route;
   if (to === undefined) {
@@ -27,7 +26,6 @@ export function routeRedirect(path: string[], routes: RouteRedirect[]) {
   return routes.find(route => matchesRedirect(path, route)) as RouteRedirect | undefined;
 }
 
-
 export function matchesIDs(ids: string[], chain: RouteChain): number {
   const len = Math.min(ids.length, chain.length);
   let i = 0;
@@ -96,7 +94,6 @@ export function mergeParams(a: any, b: any): any {
   return undefined;
 }
 
-
 export function routerIDsToChain(ids: RouteID[], chains: RouteChain[]): RouteChain | null {
   let match: RouteChain | null = null;
   let maxMatches = 0;
@@ -118,7 +115,6 @@ export function routerIDsToChain(ids: RouteID[], chains: RouteChain[]): RouteCha
   return null;
 }
 
-
 export function routerPathToChain(path: string[], chains: RouteChain[]): RouteChain | null {
   let match: RouteChain | null = null;
   let matches = 0;
@@ -164,4 +160,3 @@ export class RouterSegments {
     return '';
   }
 }
-
diff --git a/core/src/components/router/utils/parser.ts b/core/src/components/router/utils/parser.ts
index d8383046f2..bac6db7efb 100644
--- a/core/src/components/router/utils/parser.ts
+++ b/core/src/components/router/utils/parser.ts
@@ -1,7 +1,6 @@
 import { RouteChain, RouteNode, RouteRedirect, RouteTree } from './interface';
 import { parsePath } from './path';
 
-
 export function readRedirects(root: Element): RouteRedirect[] {
   return (Array.from(root.children) as HTMLIonRouteRedirectElement[])
     .filter(el => el.tagName === 'ION-ROUTE-REDIRECT')
diff --git a/core/src/components/router/utils/path.ts b/core/src/components/router/utils/path.ts
index 650903ad87..b0c05b6539 100644
--- a/core/src/components/router/utils/path.ts
+++ b/core/src/components/router/utils/path.ts
@@ -1,4 +1,5 @@
 import { RouteChain } from '../../../interface';
+
 import { RouterIntent } from './constants';
 
 export function generatePath(segments: string[]): string {
@@ -88,4 +89,3 @@ export function parsePath(path: string | undefined | null): string[] {
     return segments;
   }
 }
-
diff --git a/core/src/components/scroll/scroll.tsx b/core/src/components/scroll/scroll.tsx
index 43835c84c7..975472980a 100644
--- a/core/src/components/scroll/scroll.tsx
+++ b/core/src/components/scroll/scroll.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+
 import { Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
@@ -24,7 +25,6 @@ export class Scroll {
   /** The mode for component. */
   @Prop() mode!: Mode;
 
-
   /**
    * If true and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
    * If the content exceeds the bounds of ionScroll, nothing will change.
@@ -218,7 +218,6 @@ export class Scroll {
     return promise;
   }
 
-
   private onScrollStart() {
     this.isScrolling = true;
     this.ionScrollStart.emit({
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 9f55a49e07..e6e509e7c9 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -4,7 +4,6 @@ import { Color, InputChangeEvent, Mode } from '../../interface';
 import { debounceEvent } from '../../utils/helpers';
 import { createColorClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-searchbar',
   styleUrls: {
@@ -341,7 +340,7 @@ export class Searchbar {
         { this.mode === 'md' && cancelButton }
         <ion-icon mode={this.mode} icon={searchIcon} lazy={false} class="searchbar-search-icon"></ion-icon>
         <input
-          ref={(el) => this.nativeInput = el as HTMLInputElement}
+          ref={el => this.nativeInput = el as HTMLInputElement}
           class="searchbar-input"
           onInput={this.onInput.bind(this)}
           onBlur={this.onBlur.bind(this)}
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 0e4e0b648d..cdf8bf8425 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 678013ed27..30f51476da 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
+
 import { Color, InputChangeEvent, Mode } from '../../interface';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-segment',
   styleUrls: {
diff --git a/core/src/components/select-option/select-option.tsx b/core/src/components/select-option/select-option.tsx
index f297266670..4c2fb8e7df 100644
--- a/core/src/components/select-option/select-option.tsx
+++ b/core/src/components/select-option/select-option.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-select-option'
 })
diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx
index 6ce4d72b96..e3cabb0581 100644
--- a/core/src/components/select-popover/select-popover.tsx
+++ b/core/src/components/select-popover/select-popover.tsx
@@ -1,8 +1,8 @@
 import { Component, Listen, Prop } from '@stencil/core';
+
 import { Mode, SelectPopoverOption } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-select-popover',
   styleUrl: 'select-popover.scss'
@@ -26,7 +26,9 @@ export class SelectPopover {
   @Listen('ionSelect')
   onSelect(ev: any) {
     const option = this.options.find(o => o.value === ev.target.value);
-    option && option.handler && option.handler();
+    if (option && option.handler) {
+      option.handler();
+    }
   }
 
   hostData() {
@@ -65,5 +67,3 @@ export class SelectPopover {
     );
   }
 }
-
-
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 0f57730b3f..568d1e814b 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1,9 +1,9 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';
+
 import { ActionSheetButton, ActionSheetOptions, AlertInput, AlertOptions, CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent } from '../../interface';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createThemedClasses, hostContext } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-select',
   styleUrls: {
@@ -110,7 +110,6 @@ export class Select {
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
-
   @Watch('disabled')
   disabledChanged() {
     this.emitStyle();
@@ -220,7 +219,6 @@ export class Select {
     });
   }
 
-
   componentWillLoad() {
     if (!this.value) {
       this.value = this.multiple ? [] : undefined;
diff --git a/core/src/components/show-when/show-when.tsx b/core/src/components/show-when/show-when.tsx
index 0b8ae39c7f..6b7248826c 100644
--- a/core/src/components/show-when/show-when.tsx
+++ b/core/src/components/show-when/show-when.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Listen, Prop, State } from '@stencil/core';
-import { Config, Mode } from '../../interface';
 
+import { Config, Mode } from '../../interface';
 import { DisplayWhen, PLATFORM_CONFIGS, PlatformConfig, detectPlatforms, updateTestResults } from '../../utils/show-hide-when-utils';
 
 @Component({
@@ -71,6 +71,3 @@ export class ShowWhen implements DisplayWhen {
   }
 
 }
-
-
-
diff --git a/core/src/components/slide/slide.tsx b/core/src/components/slide/slide.tsx
index 78464100dd..47536a3426 100644
--- a/core/src/components/slide/slide.tsx
+++ b/core/src/components/slide/slide.tsx
@@ -1,6 +1,5 @@
 import { Component } from '@stencil/core';
 
-
 @Component({
   tag: 'ion-slide',
   styleUrl: 'slide.scss'
diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx
index a0674aa53d..f672fae1e4 100644
--- a/core/src/components/slides/slides.tsx
+++ b/core/src/components/slides/slides.tsx
@@ -1,6 +1,8 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
+
 import { Mode } from '../../interface.js';
 import { createThemedClasses } from '../../utils/theme.js';
+
 import { Swiper } from './vendor/swiper.js';
 
 @Component({
@@ -94,7 +96,7 @@ export class Slides {
   @Watch('options')
   updateSwiperOptions() {
     const newOptions = this.normalizeOptions();
-    this.swiper.params = Object.assign({}, this.swiper.params, newOptions);
+    this.swiper.params = { ...this.swiper.params, ...newOptions };
     this.update();
   }
 
@@ -117,7 +119,6 @@ export class Slides {
   }
 
   private initSlides() {
-    console.debug(`ion-slides, init`);
     this.container = (this.el.shadowRoot || this.el).querySelector('.swiper-container') as HTMLElement;
     const finalOptions = this.normalizeOptions();
     // init swiper core
@@ -363,7 +364,7 @@ export class Slides {
     };
 
     // Merge the base, user options, and events together then pas to swiper
-    return Object.assign({}, swiperOptions, this.options, eventOptions);
+    return { ...swiperOptions, ...this.options, ...eventOptions };
   }
 
   hostData() {
@@ -374,7 +375,7 @@ export class Slides {
 
   render() {
     return (
-      <div class="swiper-container" ref={ (el) => this.container = el as HTMLElement }>
+      <div class="swiper-container" ref={el => this.container = el as HTMLElement }>
         <div class="swiper-wrapper">
           <slot></slot>
         </div>
diff --git a/core/src/components/spinner/spinner-configs.ts b/core/src/components/spinner/spinner-configs.ts
index 92c279c773..cfa5ebf2ce 100644
--- a/core/src/components/spinner/spinner-configs.ts
+++ b/core/src/components/spinner/spinner-configs.ts
@@ -1,5 +1,4 @@
 
-
 export const SPINNERS: SpinnerConfigs = {
 
   'lines': {
@@ -99,7 +98,6 @@ export const SPINNERS: SpinnerConfigs = {
   }
 };
 
-
 export interface SpinnerConfigs {
   [spinnerName: string]: SpinnerConfig;
 }
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index 200a388ad0..bc7d51b990 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -1,8 +1,9 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Config, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
-import { SPINNERS, SpinnerConfig } from './spinner-configs';
 
+import { SPINNERS, SpinnerConfig } from './spinner-configs';
 
 @Component({
   tag: 'ion-spinner',
@@ -45,7 +46,6 @@ export class Spinner {
    */
   @Prop() paused = false;
 
-
   private getName(): string {
     let name = this.name || this.config.get('spinner');
     if (!name) {
@@ -101,7 +101,6 @@ export class Spinner {
   }
 }
 
-
 function buildCircle(spinner: SpinnerConfig, duration: number, index: number, total: number) {
   const data = spinner.fn(duration, index, total);
   data.style['animation-duration'] = `${duration}ms`;
@@ -113,7 +112,6 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
   );
 }
 
-
 function buildLine(spinner: SpinnerConfig, duration: number, index: number, total: number) {
   const data = spinner.fn(duration, index, total);
   data.style['animation-duration'] = `${duration}ms`;
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index 652d0a858c..20ffa634d7 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
@@ -13,7 +14,6 @@ const QUERY: { [key: string]: string } = {
   'never': ''
 };
 
-
 @Component({
   tag: 'ion-split-pane',
   styleUrls: {
@@ -68,8 +68,10 @@ export class SplitPane {
   }
 
   componentDidUnload() {
-    this.rmL && this.rmL();
-    this.rmL = null;
+    if (this.rmL) {
+      this.rmL();
+      this.rmL = undefined;
+    }
   }
 
   @Watch('when')
@@ -77,8 +79,10 @@ export class SplitPane {
     if (this.isServer) {
       return;
     }
-    this.rmL && this.rmL();
-    this.rmL = null;
+    if (this.rmL) {
+      this.rmL();
+      this.rmL = undefined;
+    }
 
     // Check if the split-pane is disabled
     if (this.disabled) {
@@ -164,7 +168,6 @@ export class SplitPane {
 
 }
 
-
 function setPaneClass(el: HTMLElement, isMain: boolean) {
   let toAdd;
   let toRemove;
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 4a854b2e77..990b5a8847 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -1,8 +1,8 @@
 import { Component, Element, Prop, State } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-tab-button',
   styleUrls: {
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index ee29fc8c91..a623186940 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -1,4 +1,5 @@
 import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
+
 import { Color, ComponentRef, FrameworkDelegate } from '../../interface';
 import { attachComponent } from '../../utils/framework-delegate';
 
diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx
index 07842c3b33..68ee16fb6e 100644
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
+
 import { Color, Mode, TabbarLayout, TabbarPlacement } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
@@ -49,8 +50,8 @@ export class Tabbar {
 
   @Watch('selectedTab')
   selectedTabChanged() {
-    this.scrollable && this.scrollToSelectedButton();
-    this.highlight && this.updateHighlight();
+    this.scrollToSelectedButton();
+    this.updateHighlight();
   }
 
   /**
@@ -80,12 +81,12 @@ export class Tabbar {
 
   @Listen('window:resize')
   onResize() {
-    this.highlight && this.updateHighlight();
+    this.updateHighlight();
   }
 
   componentDidLoad() {
-    this.scrollable && this.updateBoundaries();
-    this.highlight && this.updateHighlight();
+    this.updateBoundaries();
+    this.updateHighlight();
   }
 
   protected analyzeTabs() {
@@ -118,17 +119,17 @@ export class Tabbar {
   }
 
   protected scrollToSelectedButton() {
-    if (!this.scrollEl) {
+    if (!this.scrollEl || !this.scrollable) {
       return;
     }
     this.queue.read(() => {
       const activeTabButton = this.getSelectedButton();
 
       if (activeTabButton) {
-        const scrollLeft: number = this.scrollEl!.scrollLeft,
-          tabsWidth: number = this.scrollEl!.clientWidth,
-          left: number = activeTabButton.offsetLeft,
-          right: number = left + activeTabButton.offsetWidth;
+        const scrollLeft = this.scrollEl!.scrollLeft;
+        const tabsWidth = this.scrollEl!.clientWidth;
+        const left = activeTabButton.offsetLeft;
+        const right = left + activeTabButton.offsetWidth;
 
         let amount = 0;
 
@@ -164,8 +165,10 @@ export class Tabbar {
   }
 
   private updateBoundaries() {
-    this.canScrollLeft = this.scrollEl!.scrollLeft !== 0;
-    this.canScrollRight = this.scrollEl!.scrollLeft < (this.scrollEl!.scrollWidth - this.scrollEl!.offsetWidth);
+    if (this.scrollEl && this.scrollable) {
+      this.canScrollLeft = this.scrollEl.scrollLeft !== 0;
+      this.canScrollRight = this.scrollEl.scrollLeft < (this.scrollEl.scrollWidth - this.scrollEl.offsetWidth);
+    }
   }
 
   private updateHighlight() {
@@ -213,7 +216,7 @@ export class Tabbar {
       color={this.color}
       aria-hidden={ !tab.show ? 'true' : null }
       class={{ 'tab-hidden': !tab.show }}
-      onClick={(ev) => {
+      onClick={ev => {
         if (!tab.disabled) {
           this.ionTabbarClick.emit(tab);
         }
@@ -228,7 +231,7 @@ export class Tabbar {
           <ion-icon name="arrow-dropleft" lazy={false}/>
         </ion-button>,
 
-        <ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}>
+        <ion-scroll forceOverscroll={false} ref={scrollEl => this.scrollEl = scrollEl as HTMLIonScrollElement}>
           {tabButtons}
           {ionTabbarHighlight}
         </ion-scroll>,
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index f1b5935b6d..32801b77fd 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@@ -1,8 +1,8 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
+
 import { Color, Config, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-tabs',
   styleUrl: 'tabs.scss',
@@ -332,5 +332,3 @@ export class Tabs implements NavOutlet {
 }
 
 let tabIds = -1;
-
-
diff --git a/core/src/components/tap-click/tap-click.tsx b/core/src/components/tap-click/tap-click.tsx
index 90c7c15983..564aa4d1c3 100644
--- a/core/src/components/tap-click/tap-click.tsx
+++ b/core/src/components/tap-click/tap-click.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, EventListenerEnable, Listen, Prop } from '@stencil/core';
-import { now, pointerCoord } from '../../utils/helpers';
 
+import { now, pointerCoord } from '../../utils/helpers';
 
 /** @hidden */
 @Component({
diff --git a/core/src/components/text/text.tsx b/core/src/components/text/text.tsx
index 4a4f3f1299..10acc508a2 100644
--- a/core/src/components/text/text.tsx
+++ b/core/src/components/text/text.tsx
@@ -1,8 +1,8 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-text',
   styleUrl: 'text.scss',
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index c02972c665..495032b80a 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -1,9 +1,9 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+
 import { Color, InputChangeEvent, Mode, StyleEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { TextareaComponent } from '../input/input-base';
 
-
 @Component({
   tag: 'ion-textarea',
   styleUrls: {
@@ -245,7 +245,7 @@ export class Textarea implements TextareaComponent {
     return (
       <textarea
         class="native-textarea"
-        ref={(el) => this.inputEl = el as HTMLTextAreaElement}
+        ref={el => this.inputEl = el as HTMLTextAreaElement}
         autoCapitalize={this.autocapitalize}
         // autoComplete={this.autocomplete}
         autoFocus={this.autofocus}
diff --git a/core/src/components/thumbnail/thumbnail.tsx b/core/src/components/thumbnail/thumbnail.tsx
index 9068381113..50ff2c24a2 100644
--- a/core/src/components/thumbnail/thumbnail.tsx
+++ b/core/src/components/thumbnail/thumbnail.tsx
@@ -1,8 +1,8 @@
 import { Component } from '@stencil/core';
+
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-thumbnail',
   styleUrls: {
diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx
index 285bf32ae4..dec8f792ad 100644
--- a/core/src/components/title/title.tsx
+++ b/core/src/components/title/title.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/toast-controller/toast-controller.tsx b/core/src/components/toast-controller/toast-controller.tsx
index 7dbf8fb348..2ac2227c67 100644
--- a/core/src/components/toast-controller/toast-controller.tsx
+++ b/core/src/components/toast-controller/toast-controller.tsx
@@ -1,8 +1,8 @@
 import { Component, Listen, Method, Prop } from '@stencil/core';
+
 import { ToastOptions } from '../../interface';
 import { OverlayController, createOverlay, dismissOverlay, getTopOverlay, removeLastOverlay } from '../../utils/overlays';
 
-
 @Component({
   tag: 'ion-toast-controller'
 })
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 7212050060..3280747caf 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -1,12 +1,11 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 
+import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
-
 import { mdEnterAnimation } from './animations/md.enter';
 import { mdLeaveAnimation } from './animations/md.leave';
 
diff --git a/core/src/components/toggle/test/toggle.spec.ts b/core/src/components/toggle/test/toggle.spec.ts
index 75eacda08b..d24cfbb8b0 100644
--- a/core/src/components/toggle/test/toggle.spec.ts
+++ b/core/src/components/toggle/test/toggle.spec.ts
@@ -1,4 +1,5 @@
 import { TestWindow, spyOnEvent } from '@stencil/core/testing';
+
 import { Toggle } from '../toggle';
 
 describe('toggle', () => {
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index 62072d68ef..9414824542 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,10 +1,10 @@
 import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+
 import { CheckboxInput, CheckedInputChangeEvent, Color, GestureDetail, Mode, StyleEvent } from '../../interface';
 import { hapticSelection } from '../../utils/haptic';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
 import { createColorClasses, hostContext } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-toggle',
   styleUrls: {
@@ -77,7 +77,6 @@ export class Toggle implements CheckboxInput {
    */
   @Event() ionStyle!: EventEmitter<StyleEvent>;
 
-
   @Watch('checked')
   checkedChanged(isChecked: boolean) {
     this.ionChange.emit({
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index e6f73e0b12..5a5f138a94 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -1,4 +1,5 @@
 import { Component, Prop } from '@stencil/core';
+
 import { Color, Config, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts b/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts
index d7c4a08d4a..e5691417e2 100644
--- a/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts
+++ b/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts
@@ -2,7 +2,6 @@ import { HeaderFn, ItemHeightFn, VirtualNode } from '../../../interface';
 import { CellType } from '../virtual-scroll-interface';
 import { Range, calcCells, calcHeightIndex, getRange, getShouldUpdate, getViewport, positionForIndex, resizeBuffer, updateVDom } from '../virtual-scroll-utils';
 
-
 describe('getViewport', () => {
   it('should return viewport without margin', () => {
     expect(getViewport(0, 100, 0)).toEqual({
@@ -18,7 +17,6 @@ describe('getViewport', () => {
     });
   });
 
-
   it('should return viewport with margin and scrollTop', () => {
     expect(getViewport(150, 100, 150)).toEqual({
       top: 0,
@@ -34,7 +32,6 @@ describe('getViewport', () => {
   });
 });
 
-
 describe('getRange', () => {
   it('should return initial bounds without buffer', () => {
     const heightBuffer = mockHeightBuffer(20, () => 10);
@@ -146,7 +143,6 @@ describe('resizeBuffer', () => {
   });
 });
 
-
 describe('calcCells', () => {
   it('should calculate cells without headers and itemHeight', () => {
     const items = ['0', 2, 'hola', { data: 'hello' }];
@@ -501,7 +497,6 @@ describe('updateVDom', () => {
   });
 });
 
-
 function mockVirtualScroll(
   items: any[],
   itemHeight?: ItemHeightFn,
diff --git a/core/src/components/virtual-scroll/virtual-scroll-utils.tsx b/core/src/components/virtual-scroll/virtual-scroll-utils.tsx
index 6fe1e30201..a21d608370 100644
--- a/core/src/components/virtual-scroll/virtual-scroll-utils.tsx
+++ b/core/src/components/virtual-scroll/virtual-scroll-utils.tsx
@@ -1,4 +1,5 @@
 import { Cell, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
+
 import { CellType, NodeChange } from './virtual-scroll-interface';
 
 export interface Viewport {
@@ -26,7 +27,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
 
   for (let i = range.offset; i < end; i++) {
     const cell = cells[i];
-    const node = dom.find((n) => n.d && n.cell === cell);
+    const node = dom.find(n => n.d && n.cell === cell);
     if (node) {
       const top = heightIndex[i];
       if (top !== node.top) {
@@ -40,7 +41,7 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
   }
 
   // needs to append
-  const pool = dom.filter((n) => n.d);
+  const pool = dom.filter(n => n.d);
 
   for (const cell of toMutate) {
     const node = pool.find(n => n.d && n.cell.type === cell.type);
@@ -61,14 +62,13 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
     }
   }
   dom
-  .filter((n) => n.d && n.top !== -9999)
-  .forEach((n) => {
+  .filter(n => n.d && n.top !== -9999)
+  .forEach(n => {
     n.change = NodeChange.Position;
     n.top = -9999;
   });
 }
 
-
 export function doRender(
   el: HTMLElement,
   nodeRender: ItemRenderFn,
@@ -162,7 +162,6 @@ export function getShouldUpdate(dirtyIndex: number, currentRange: Range, range:
   );
 }
 
-
 export function findCellIndex(cells: Cell[], index: number): number {
   if (index === 0) {
     return 0;
@@ -242,7 +241,6 @@ export function calcCells(
   return cells;
 }
 
-
 export function calcHeightIndex(buf: Uint32Array, cells: Cell[], index: number): number {
   let acum = buf[index];
   for (; index < buf.length; index++) {
@@ -252,7 +250,6 @@ export function calcHeightIndex(buf: Uint32Array, cells: Cell[], index: number):
   return acum;
 }
 
-
 export function resizeBuffer(buf: Uint32Array | undefined, len: number) {
   if (!buf) {
     return new Uint32Array(len);
diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx
index 31d1101161..e1a6e9667f 100644
--- a/core/src/components/virtual-scroll/virtual-scroll.tsx
+++ b/core/src/components/virtual-scroll/virtual-scroll.tsx
@@ -1,10 +1,10 @@
 import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+
 import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
 
 import { CellType } from './virtual-scroll-interface';
 import { Range, calcCells, calcHeightIndex, doRender, findCellIndex, getRange, getShouldUpdate, getViewport, inplaceUpdate, positionForIndex, resizeBuffer, updateVDom } from './virtual-scroll-utils';
 
-
 @Component({
   tag: 'ion-virtual-scroll',
   styleUrl: 'virtual-scroll.scss'
@@ -318,7 +318,6 @@ export class VirtualScroll {
     }
   }
 
-
   private calcCells() {
     if (!this.items) {
       return;
@@ -381,7 +380,7 @@ export class VirtualScroll {
   render() {
     const renderItem = this.renderItem;
     if (renderItem) {
-      return this.virtualDom.map((node) => {
+      return this.virtualDom.map(node => {
         const item = this.renderVirtualNode(node) as any;
         const classes = ['virtual-item'];
         if (!item.vattrs) {
diff --git a/core/src/global/ionic-global.ts b/core/src/global/ionic-global.ts
index e40d1bf2fa..d83b1aebdc 100644
--- a/core/src/global/ionic-global.ts
+++ b/core/src/global/ionic-global.ts
@@ -1,8 +1,9 @@
 import 'ionicons';
+
 import { configFromURL } from '../utils/config';
 import { isIOS } from '../utils/platform';
-import { Config } from './config';
 
+import { Config } from './config';
 
 const Ionic = (window as any)['Ionic'] = (window as any)['Ionic'] || {};
 declare const Context: any;
diff --git a/core/src/utils/animations/ios.transition.ts b/core/src/utils/animations/ios.transition.ts
index 3cd4287ef6..6c35db6299 100644
--- a/core/src/utils/animations/ios.transition.ts
+++ b/core/src/utils/animations/ios.transition.ts
@@ -136,7 +136,6 @@ export function iosTransitionAnimation(AnimationC: Animation, navEl: HTMLElement
         .beforeClearStyles([OPACITY])
         .fromTo(TRANSLATEX, CENTER, (isRTL ? '-100%' : '100%'));
 
-
     } else {
       // leaving content, forward direction
       leavingContent
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index bc0a6789a3..f5d80f465f 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -1,5 +1,4 @@
 
-
 export function setupConfig(config: {[key: string]: any}) {
   const win = window as any;
   const Ionic = win.Ionic;
diff --git a/core/src/utils/framework-delegate.ts b/core/src/utils/framework-delegate.ts
index 9e53e279da..d2cbe67d8f 100644
--- a/core/src/utils/framework-delegate.ts
+++ b/core/src/utils/framework-delegate.ts
@@ -12,8 +12,12 @@ export async function attachComponent(delegate: FrameworkDelegate | undefined, c
     ? container.ownerDocument.createElement(component)
     : component;
 
-  cssClasses && cssClasses.forEach(c => el.classList.add(c));
-  componentProps && Object.assign(el, componentProps);
+  if (cssClasses) {
+    cssClasses.forEach(c => el.classList.add(c));
+  }
+  if (componentProps) {
+    Object.assign(el, componentProps);
+  }
 
   container.appendChild(el);
   if (el.componentOnReady) {
diff --git a/core/src/utils/haptic.ts b/core/src/utils/haptic.ts
index 586d07e5fa..5c0853c355 100644
--- a/core/src/utils/haptic.ts
+++ b/core/src/utils/haptic.ts
@@ -13,7 +13,9 @@ export function hapticAvailable(): boolean {
  */
 export function hapticSelection() {
   const engine = (window as any).TapticEngine;
-  engine && engine.selection();
+  if (engine) {
+    engine.selection();
+  }
 }
 
 /**
@@ -21,7 +23,9 @@ export function hapticSelection() {
  */
 export function hapticSelectionStart() {
   const engine = (window as any).TapticEngine;
-  engine && engine.gestureSelectionStart();
+  if (engine) {
+    engine.gestureSelectionStart();
+  }
 }
 
 /**
@@ -29,7 +33,9 @@ export function hapticSelectionStart() {
  */
 export function hapticSelectionChanged() {
   const engine = (window as any).TapticEngine;
-  engine && engine.gestureSelectionChanged();
+  if (engine) {
+    engine.gestureSelectionChanged();
+  }
 }
 
 /**
@@ -38,7 +44,9 @@ export function hapticSelectionChanged() {
  */
 export function hapticSelectionEnd() {
   const engine = (window as any).TapticEngine;
-  engine && engine.gestureSelectionEnd();
+  if (engine) {
+    engine.gestureSelectionEnd();
+  }
 }
 
 /**
@@ -47,7 +55,9 @@ export function hapticSelectionEnd() {
  */
 export function hapticNotification(options: { type: string }) {
   const engine = (window as any).TapticEngine;
-  engine && engine.notification(options);
+  if (engine) {
+    engine.notification(options);
+  }
 }
 
 /**
@@ -56,5 +66,7 @@ export function hapticNotification(options: { type: string }) {
  */
 export function hapticImpact(options: { style: string }) {
   const engine = (window as any).TapticEngine;
-  engine && engine.impact(options);
+  if (engine) {
+    engine.impact(options);
+  }
 }
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 046970e67c..76938a9db5 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -1,4 +1,5 @@
 import { EventEmitter } from '@stencil/core';
+
 import { Side } from '../interface';
 
 export function reorderArray(array: any[], indexes: {from: number, to: number}): any[] {
diff --git a/core/src/utils/input-interface.ts b/core/src/utils/input-interface.ts
index e87ea07048..a0991bc4fa 100644
--- a/core/src/utils/input-interface.ts
+++ b/core/src/utils/input-interface.ts
@@ -1,6 +1,5 @@
 import { EventEmitter } from '@stencil/core';
 
-
 export interface BaseInput {
 
   /**
@@ -19,7 +18,6 @@ export interface BaseInput {
   name: string;
 }
 
-
 export interface CheckboxInput extends BaseInput {
   /**
    * Reflects the value of the form control.
@@ -55,7 +53,6 @@ export interface CheckboxInput extends BaseInput {
   ionStyle: EventEmitter<StyleEvent>;
 }
 
-
 export interface RadioButtonInput extends BaseInput {
   /**
    * Reflects the value of the form control.
@@ -89,8 +86,6 @@ export interface RadioGroupInput extends BaseInput {
   ionChange: EventEmitter<InputChangeEvent>;
 }
 
-
-
 export interface SelectInput extends BaseInput {
   /**
    * Indicates whether the option is currently selected.
@@ -167,7 +162,6 @@ export interface TextInput extends BaseInput {
   ionStyle: EventEmitter<StyleEvent>;
 }
 
-
 export interface TextMultiLineInput extends TextInput {
   /**
    * The change event is fired when the value of has changed.
@@ -195,7 +189,6 @@ export interface TextMultiLineInput extends TextInput {
   ionStyle: EventEmitter<StyleEvent>;
 }
 
-
 export interface InputChangeEvent {
   value: string | undefined;
 }
diff --git a/core/src/utils/input-shims/hacks/common.ts b/core/src/utils/input-shims/hacks/common.ts
index 8a4a398106..53865b75ea 100644
--- a/core/src/utils/input-shims/hacks/common.ts
+++ b/core/src/utils/input-shims/hacks/common.ts
@@ -32,7 +32,6 @@ export function relocateInput(
   (componentEl as any)[RELOCATED_KEY] = shouldRelocate;
 }
 
-
 export function isFocused(input: HTMLInputElement): boolean {
   return input === input.ownerDocument.activeElement;
 }
diff --git a/core/src/utils/input-shims/hacks/hide-caret.ts b/core/src/utils/input-shims/hacks/hide-caret.ts
index bda5c60bc0..587cd645ca 100644
--- a/core/src/utils/input-shims/hacks/hide-caret.ts
+++ b/core/src/utils/input-shims/hacks/hide-caret.ts
@@ -1,7 +1,6 @@
 import { isFocused, relocateInput } from './common';
 
-
-export function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement, scrollEl: HTMLIonScrollElement) {
+export function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLInputElement | undefined, scrollEl: HTMLIonScrollElement | undefined) {
   if (!scrollEl || !inputEl) {
     return () => { return; };
   }
@@ -18,8 +17,10 @@ export function enableHideCaretOnScroll(componentEl: HTMLElement, inputEl: HTMLI
   const hideCaret = () => scrollHideCaret(true);
   const showCaret = () => scrollHideCaret(false);
 
-  scrollEl && scrollEl.addEventListener('ionScrollStart', hideCaret);
-  scrollEl && scrollEl.addEventListener('ionScrollEnd', showCaret);
+  if (scrollEl) {
+    scrollEl.addEventListener('ionScrollStart', hideCaret);
+    scrollEl.addEventListener('ionScrollEnd', showCaret);
+  }
   inputEl.addEventListener('blur', onBlur);
 
   return () => {
diff --git a/core/src/utils/input-shims/hacks/scroll-assist.ts b/core/src/utils/input-shims/hacks/scroll-assist.ts
index 40b846d74d..9b642ff42b 100644
--- a/core/src/utils/input-shims/hacks/scroll-assist.ts
+++ b/core/src/utils/input-shims/hacks/scroll-assist.ts
@@ -1,8 +1,8 @@
 import { pointerCoord } from '../../../utils/helpers';
+
 import { isFocused, relocateInput } from './common';
 import { getScrollData } from './scroll-data';
 
-
 export function enableScrollAssist(
   componentEl: HTMLElement,
   inputEl: HTMLInputElement,
diff --git a/core/src/utils/input-shims/hacks/scroll-data.ts b/core/src/utils/input-shims/hacks/scroll-data.ts
index 32136f0d22..4f81db476c 100644
--- a/core/src/utils/input-shims/hacks/scroll-data.ts
+++ b/core/src/utils/input-shims/hacks/scroll-data.ts
@@ -27,7 +27,6 @@ export function getScrollData(componentEl: HTMLElement, contentEl: HTMLElement,
   );
 }
 
-
 function calcScrollData(
   inputRect: ClientRect,
   contentRect: ClientRect,
diff --git a/core/src/utils/input-shims/input-shims.ts b/core/src/utils/input-shims/input-shims.ts
index 5307db88d8..4d510b0da9 100644
--- a/core/src/utils/input-shims/input-shims.ts
+++ b/core/src/utils/input-shims/input-shims.ts
@@ -1,5 +1,6 @@
 
 import { Config } from '../../interface';
+
 import { enableHideCaretOnScroll } from './hacks/hide-caret';
 import { enableInputBlurring } from './hacks/input-blurring';
 import { enableScrollAssist } from './hacks/scroll-assist';
@@ -46,13 +47,17 @@ export function startInputShims(
   function unregisterInput(componentEl: HTMLElement) {
     if (HIDE_CARET && hideCaret) {
       const fn = hideCaretMap.get(componentEl);
-      fn && fn();
+      if (fn) {
+        fn();
+      }
       hideCaretMap.delete(componentEl);
     }
 
     if (SCROLL_ASSIST && scrollAssist) {
       const fn = scrollAssistMap.get(componentEl);
-      fn && fn();
+      if (fn) {
+        fn();
+      }
       scrollAssistMap.delete(componentEl);
     }
   }
@@ -73,11 +78,11 @@ export function startInputShims(
     registerInput(input);
   }
 
-  doc.body.addEventListener('ionInputDidLoad', (event) => {
+  doc.body.addEventListener('ionInputDidLoad', event => {
     registerInput(event.target as any);
   });
 
-  doc.body.addEventListener('ionInputDidUnload', (event) => {
+  doc.body.addEventListener('ionInputDidUnload', event => {
     unregisterInput(event.target as any);
   });
 }
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 457f6c3041..896cfa8aa4 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -1,4 +1,5 @@
 import { EventEmitter } from '@stencil/core';
+
 import { Animation, AnimationBuilder, Config, Mode } from '../interface';
 
 let lastId = 1;
@@ -95,7 +96,6 @@ export async function dismiss(
   overlay.el.remove();
 }
 
-
 async function overlayAnimation(
   overlay: OverlayInterface,
   animationBuilder: AnimationBuilder,
@@ -104,7 +104,9 @@ async function overlayAnimation(
 ): Promise<void> {
   if (overlay.keyboardClose) {
     const activeElement = baseEl.ownerDocument.activeElement as HTMLElement;
-    activeElement && activeElement.blur && activeElement.blur();
+    if (activeElement) {
+      activeElement.blur();
+    }
   }
   if (overlay.animation) {
     overlay.animation.destroy();
@@ -138,7 +140,9 @@ export function eventMethod<T>(element: HTMLElement, eventName: string, callback
   const promise = new Promise<T>(r => resolve = r);
   onceEvent(element, eventName, (event: any) => {
     const detail = event.detail;
-    callback && callback(detail);
+    if (callback) {
+      callback(detail);
+    }
     resolve(detail);
   });
   return promise;
diff --git a/core/src/utils/show-hide-when-utils.ts b/core/src/utils/show-hide-when-utils.ts
index cde39905e3..edbf110483 100644
--- a/core/src/utils/show-hide-when-utils.ts
+++ b/core/src/utils/show-hide-when-utils.ts
@@ -1,4 +1,5 @@
 import { Config, Mode } from '../interface';
+
 import { SIZE_TO_MEDIA } from './media';
 import { isAndroid, isCordova, isElectron, isIOS, isIpad, isIphone, isPhablet, isTablet, matchMedia } from './platform';
 
@@ -25,7 +26,6 @@ export function isModeMatch(config: Config, multiModeString: string) {
   return modes.indexOf(currentMode) >= 0;
 }
 
-
 export function isSizeMatch(win: Window, multiSizeString: string) {
   const sizes = multiSizeString.replace(/\s/g, '').split(',');
   for (const size of sizes) {
@@ -84,7 +84,6 @@ export function isPortrait(win: Window): boolean {
   return matchMedia(win, '(orientation: portrait)');
 }
 
-
 // order from most specifc to least specific
 export const PLATFORM_CONFIGS: PlatformConfig[] = [
 
diff --git a/core/src/utils/status-tap.ts b/core/src/utils/status-tap.ts
index 2065295283..b34199a945 100644
--- a/core/src/utils/status-tap.ts
+++ b/core/src/utils/status-tap.ts
@@ -1,7 +1,7 @@
 import { QueueApi } from '@stencil/core';
 
 export function startStatusTap(win: Window, queue: QueueApi) {
-  queue.read(() => {
+  queue.read(async () => {
     const width = win.innerWidth;
     const height = win.innerWidth;
     const el = win.document.elementFromPoint(width / 2, height / 2);
@@ -10,10 +10,9 @@ export function startStatusTap(win: Window, queue: QueueApi) {
     }
     const contentEl = el.closest('ion-content');
     if (contentEl) {
-      contentEl.componentOnReady().then(() => {
-        queue.write(() => {
-          contentEl.getScrollElement().scrollToTop(300);
-        });
+      await contentEl.componentOnReady();
+      queue.write(() => {
+        contentEl.getScrollElement().scrollToTop(300);
       });
     }
   });
diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts
index a4a0c292b0..1a0b230d73 100644
--- a/core/src/utils/theme.ts
+++ b/core/src/utils/theme.ts
@@ -21,7 +21,6 @@ export function createThemedClasses(mode: Mode | undefined, name: string): CssCl
   };
 }
 
-
 export function getClassList(classes: string | string[] | undefined): string[] {
   if (classes) {
     const array = Array.isArray(classes) ? classes : classes.split(' ');
@@ -43,7 +42,9 @@ export async function openURL(win: Window, url: string | undefined, ev: Event, d
   if (url && url[0] !== '#' && url.indexOf('://') === -1) {
     const router = win.document.querySelector('ion-router');
     if (router) {
-      ev && ev.preventDefault();
+      if (ev) {
+        ev.preventDefault();
+      }
       await router.componentOnReady();
       return router.push(url, direction);
     }
diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts
index acac7a37f6..12c45f8af7 100644
--- a/core/src/utils/transition.ts
+++ b/core/src/utils/transition.ts
@@ -1,4 +1,5 @@
 import { QueueApi } from '@stencil/core';
+
 import { ViewLifecycle } from '..';
 import { Animation, AnimationBuilder, NavDirection, NavOptions } from '../interface';
 
@@ -6,7 +7,7 @@ const iosTransitionAnimation = () => import('./animations/ios.transition');
 const mdTransitionAnimation = () => import('./animations/md.transition');
 
 export function transition(opts: TransitionOptions): Promise<Animation | null> {
-  return new Promise((resolve) => {
+  return new Promise(resolve => {
     opts.queue.write(async () => {
       beforeTransition(opts);
 
@@ -111,7 +112,6 @@ async function notifyViewReady(viewIsReady: undefined | ((enteringEl: HTMLElemen
   }
 }
 
-
 function playTransition(trans: Animation, opts: TransitionOptions): Promise<Animation> {
   const progressCallback = opts.progressCallback;
   const promise = new Promise<Animation>(resolve => trans.onFinish(resolve));
diff --git a/core/tslint.json b/core/tslint.json
index c209b2ec3a..bb9a8fca6a 100644
--- a/core/tslint.json
+++ b/core/tslint.json
@@ -1,13 +1,14 @@
 {
-  "extends": "tslint-ionic-rules",
+  "extends": "tslint-ionic-rules/strict",
   "rules": {
     "no-conditional-assignment": false,
     "no-non-null-assertion": false,
     "no-unnecessary-type-assertion": false,
     "prefer-for-of": false,
     "no-import-side-effect": false,
-    "ordered-imports": [true, {
-      "named-imports-order": "lowercase-last"
-    }]
+    "trailing-comma": false,
+    "no-null-keyword": false,
+    "no-console": false,
+    "no-floating-promises": false
   }
 }