refactor(components): update components to match stencil style guide

https://github.com/ionic-team/stencil/blob/master/STYLE_GUIDE.md

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

@@ -36,7 +36,7 @@ export class ActionSheetController {
   }
 
   @Listen('body:ionActionSheetDidLoad')
-  protected viewDidLoad(ev: ActionSheetEvent) {
+  protected didLoad(ev: ActionSheetEvent) {
     const actionSheet = ev.detail.actionSheet;
     const actionSheetResolve = this.actionSheetResolves[actionSheet.actionSheetId];
     if (actionSheetResolve) {

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

@@ -91,7 +91,7 @@ export class ActionSheet {
 
       animation.onFinish((a: any) => {
         a.destroy();
-        this.ionViewDidEnter();
+        this.componentDidEnter();
         resolve();
       }).play();
     });
@@ -131,7 +131,15 @@ export class ActionSheet {
     });
   }
 
-  protected ionViewDidUnload() {
+  componentDidLoad() {
+    this.ionActionSheetDidLoad.emit({ actionSheet: this });
+  }
+
+  componentDidEnter() {
+    this.ionActionSheetDidPresent.emit({ actionSheet: this });
+  }
+
+  componentDidUnload() {
     this.ionActionSheetDidUnload.emit({ actionSheet: this });
   }
 
@@ -143,14 +151,6 @@ export class ActionSheet {
     this.dismiss();
   }
 
-  protected ionViewDidLoad() {
-    this.ionActionSheetDidLoad.emit({ actionSheet: this });
-  }
-
-  protected ionViewDidEnter() {
-    this.ionActionSheetDidPresent.emit({ actionSheet: this });
-  }
-
   protected backdropClick() {
     if (this.enableBackdropDismiss) {
       // const opts: NavOptions = {
@@ -172,7 +172,7 @@ export class ActionSheet {
     }
   }
 
-  protected render() {
+  render() {
     let userCssClass = 'action-sheet-content';
     if (this.cssClass) {
       userCssClass += ' ' + this.cssClass;

packages/core/src/components/alert-controller/alert-controller.tsx

@@ -36,7 +36,7 @@ export class AlertController {
   }
 
   @Listen('body:ionAlertDidLoad')
-  protected viewDidLoad(ev: AlertEvent) {
+  protected didLoad(ev: AlertEvent) {
     const alert = ev.detail.alert;
     const alertResolve = this.alertResolves[alert.alertId];
     if (alertResolve) {

packages/core/src/components/alert/alert.tsx

@@ -102,7 +102,7 @@ export class Alert {
           firstInput.focus();
         }
 
-        this.ionViewDidEnter();
+        this.componentDidEnter();
         resolve();
       }).play();
     });
@@ -142,8 +142,15 @@ export class Alert {
     });
   }
 
+  componentDidLoad() {
+    this.ionAlertDidLoad.emit({ alert: this });
+  }
 
-  protected ionViewDidUnload() {
+  componentDidEnter() {
+    this.ionAlertDidPresent.emit({ alert: this });
+  }
+
+  componentDidUnload() {
     this.ionAlertDidUnload.emit({ alert: this });
   }
 
@@ -155,14 +162,6 @@ export class Alert {
     this.dismiss();
   }
 
-  protected ionViewDidLoad() {
-    this.ionAlertDidLoad.emit({ alert: this });
-  }
-
-  protected ionViewDidEnter() {
-    this.ionAlertDidPresent.emit({ alert: this });
-  }
-
   protected backdropClick() {
     if (this.enableBackdropDismiss) {
       // const opts: NavOptions = {
@@ -326,7 +325,7 @@ export class Alert {
     );
   }
 
-  protected render() {
+  render() {
     const hdrId = `${this.alertId}-hdr`;
     const subHdrId = `${this.alertId}-sub-hdr`;
     const msgId = `${this.alertId}-msg`;

packages/core/src/components/app/app.tsx

@@ -71,7 +71,7 @@ export class App {
     return null;
   }
 
-  protected hostData() {
+  hostData() {
     return {
       class: {
         [this.modeCode]: true,
@@ -80,7 +80,7 @@ export class App {
     };
   }
 
-  protected render() {
+  render() {
     const dom = [<slot></slot>];
     if (this.useRouter) {
       dom.push(<ion-router-controller></ion-router-controller>);

packages/core/src/components/avatar/avatar.tsx

@@ -20,7 +20,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Avatar {
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/badge/badge.tsx

@@ -53,7 +53,7 @@ export class Badge {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/button/button.tsx

@@ -166,7 +166,7 @@ export class Button {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     const buttonType = this.buttonType;
     const mode = this.mode;
 

packages/core/src/components/buttons/buttons.tsx

@@ -10,14 +10,14 @@ import { Component, Element } from '@stencil/core';
 export class Buttons {
   @Element() private el: HTMLElement;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     const buttons = this.el.querySelectorAll('ion-button') as any;
     for (var i = 0; i < buttons.length; i++) {
       buttons[i].setAttribute('button-type', 'bar-button');
     }
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-content/card-content.tsx

@@ -25,7 +25,7 @@ export class CardContent {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-header/card-header.tsx

@@ -26,7 +26,7 @@ export class CardHeader {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-subtitle/card-subtitle.tsx

@@ -33,7 +33,7 @@ export class CardSubtitle {
     };
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card-title/card-title.tsx

@@ -33,7 +33,7 @@ export class CardTitle {
     };
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/card/card.tsx

@@ -25,7 +25,7 @@ export class Card {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/checkbox/checkbox.tsx

@@ -131,7 +131,7 @@ export class Checkbox implements BooleanInput {
   @Prop({ mutable: true }) value: string;
 
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     this.emitStyle();
   }
 
@@ -178,7 +178,7 @@ export class Checkbox implements BooleanInput {
     };
   }
 
-  protected render() {
+  render() {
     const checkboxClasses: CssClassMap = {
       'checkbox-icon': true,
       'checkbox-checked': this.checked

packages/core/src/components/chip-button/chip-button.tsx

@@ -87,7 +87,7 @@ export class ChipButton {
     return classList;
   }
 
-  protected render() {
+  render() {
     const buttonType = 'chip-button';
 
     const hostClasses = getElementClassObject(this.el.classList);

packages/core/src/components/chip/chip.tsx

@@ -112,7 +112,7 @@ export class Chip {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/content/content.tsx

@@ -46,12 +46,12 @@ export class Content {
    */
   @Prop() fullscreen: boolean = false;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.scrollEl = this.el.querySelector('ion-scroll') as HTMLIonScrollElement;
     this.resize();
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.scrollEl = null;
   }
 
@@ -115,7 +115,7 @@ export class Content {
     }
   }
 
-  protected render() {
+  render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'content');
     const hostClasses = getElementClassObject(this.el.classList);
 

packages/core/src/components/datetime/datetime.tsx

@@ -443,7 +443,7 @@ export class Datetime {
    */
   @Event() ionCancel: EventEmitter;
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     // first see if locale names were provided in the inputs
     // then check to see if they're in the config
     // if neither were provided then it will use default English names
@@ -819,7 +819,7 @@ export class Datetime {
     };
   }
 
-  protected render() {
+  render() {
     let addPlaceholderClass = false;
 
     // If selected text has been passed in, use that first

packages/core/src/components/fab/fab-container.tsx

@@ -103,7 +103,7 @@ export class FabContainer {
     this.activated = !this.activated;
   }
 
-  protected render() {
+  render() {
     const fab: any = this.el.querySelector('ion-fab-button');
     fab.toggleActive = this.toggleActive;
     fab.activated = this.activated;

packages/core/src/components/fab/fab-list.tsx

@@ -52,7 +52,7 @@ export class FabList {
     };
   }
 
-  protected render() {
+  render() {
     return (
       <slot></slot>
     );

packages/core/src/components/fab/fab.tsx

@@ -90,7 +90,7 @@ export class FabButton {
    */
   @Prop() disabled: boolean = false;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     const parentNode = this.el.parentNode.nodeName;
 
     this.inList = (parentNode === 'ION-FAB-LIST');
@@ -144,7 +144,7 @@ export class FabButton {
     ];
   }
 
-  protected render() {
+  render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'fab');
     const hostClasses = getElementClassObject(this.el.classList);
 

packages/core/src/components/footer/footer.tsx

@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Footer {
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/gesture/gesture.tsx

@@ -69,7 +69,7 @@ export class Gesture {
   @Event() ionPress: EventEmitter;
 
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     // in this case, we already know the GestureController and Gesture are already
     // apart of the same bundle, so it's safe to load it this way
     // only create one instance of GestureController, and reuse the same one later
@@ -445,7 +445,7 @@ export class Gesture {
   }
 
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     if (this.blocker) {
       this.blocker.destroy();
       this.blocker = null;

packages/core/src/components/header/header.tsx

@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Header {
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

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

@@ -22,13 +22,13 @@ export class InfiniteScrollContent {
   @Prop() loadingText: string;
 
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     if (!this.loadingSpinner) {
       this.loadingSpinner = this.config.get('infiniteLoadingSpinner', this.config.get('spinner', 'lines'));
     }
   }
 
-  protected render() {
+  render() {
     return (
       <div class='infinite-loading'>
         {this.loadingSpinner &&

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

@@ -214,14 +214,14 @@ export class InfiniteScroll {
    */
   @Event() ionInfinite: EventEmitter;
 
-  ionViewWillLoad() {
+  componentWillLoad() {
     const scrollEl = this.el.closest('ion-scroll') as StencilElement;
     return scrollEl.componentOnReady().then((el) => {
       this.scrollEl = el as HTMLIonScrollElement;
     });
   }
 
-  ionViewDidLoad() {
+  componentDidLoad() {
     if (this.init) {
       console.warn('instance was already initialized');
       return;
@@ -234,7 +234,7 @@ export class InfiniteScroll {
     }
   }
 
-  ionViewDidUnload() {
+  componentDidUnload() {
     this.enableScrollEvents(false);
     this.scrollEl = null;
   }
@@ -371,7 +371,7 @@ export class InfiniteScroll {
   }
 
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 

packages/core/src/components/input/input.tsx

@@ -199,7 +199,7 @@ export class Input implements InputComponent {
   }
 
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.emitStyle();
 
     // By default, password inputs clear after focus when they have content
@@ -318,7 +318,7 @@ export class Input implements InputComponent {
   }
 
 
-  protected render() {
+  render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 

packages/core/src/components/input/textarea.tsx

@@ -181,7 +181,7 @@ export class Textarea implements TextareaComponent {
     }
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.emitStyle();
   }
 
@@ -297,7 +297,7 @@ export class Textarea implements TextareaComponent {
   }
 
 
-  protected render() {
+  render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'text-input');
     // TODO aria-labelledby={this.item.labelId}
 

packages/core/src/components/item-divider/item-divider.tsx

@@ -27,7 +27,7 @@ export class ItemDivider {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return [
       <slot name='start'></slot>,
       <div class='item-inner'>

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

@@ -50,7 +50,7 @@ export class ItemOption {
     return !!el;
   }
 
-  protected render() {
+  render() {
 
     const TagType = this.href ? 'a' : 'button';
     return [

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

@@ -55,7 +55,7 @@ export class ItemOptions {
     this.ionSwipe.emit(value);
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

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

@@ -192,14 +192,14 @@ export class ItemSliding {
     };
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.item = this.el.querySelector('ion-item');
     this.list = this.el.closest('ion-list') as HTMLIonListElement;
 
     this.updateOptions();
   }
 
-  protected ionViewDidUnLoad() {
+  componentDidUnload() {
     this.item = this.list = this.leftOptions = this.rightOptions = null;
   }
 
@@ -413,7 +413,7 @@ export class ItemSliding {
     this.ionDrag.emit(this);
   }
 
-  protected hostData() {
+  hostData() {
     return {
       class: {
         'item-wrapper': true,
@@ -426,7 +426,7 @@ export class ItemSliding {
     };
   }
 
-  protected render() {
+  render() {
     return (
       <ion-gesture {...this.gestureOptions}>
         <slot></slot>

packages/core/src/components/item/item.tsx

@@ -79,11 +79,11 @@ export class Item {
     return this.label ? this.label.getText() : '';
   }
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     this.itemId = (++itemId).toString();
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     // Add item-button classes to each ion-button in the item
     const buttons = this.el.querySelectorAll('ion-button') as any;
     for (var i = 0; i < buttons.length; i++) {
@@ -119,7 +119,7 @@ export class Item {
     return this.itemId + '-' + (++this.ids);
   }
 
-  protected render() {
+  render() {
     let childStyles = {};
 
     for (var key in this.itemStyles) {

packages/core/src/components/label/label.tsx

@@ -58,7 +58,7 @@ export class Label {
     return this.el.textContent || '';
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.emitStyle();
   }
 
@@ -76,7 +76,7 @@ export class Label {
     });
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/list-header/list-header.tsx

@@ -27,7 +27,7 @@ export class ListHeader {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/list/list.tsx

@@ -36,7 +36,7 @@ export class List {
     return false;
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/loading-controller/loading-controller.tsx

@@ -37,7 +37,7 @@ export class LoadingController {
 
 
   @Listen('body:ionLoadingDidLoad')
-  protected viewDidLoad(ev: LoadingEvent) {
+  protected didLoad(ev: LoadingEvent) {
     const loading = ev.detail.loading;
     const loadingResolve = this.loadingResolves[loading.loadingId];
     if (loadingResolve) {

packages/core/src/components/loading/loading.tsx

@@ -94,7 +94,7 @@ export class Loading {
 
       animation.onFinish((a: any) => {
         a.destroy();
-        this.ionViewDidEnter();
+        this.componentDidEnter();
         resolve();
 
       }).play();
@@ -140,19 +140,7 @@ export class Loading {
     });
   }
 
-  protected ionViewDidUnload() {
-    this.ionLoadingDidUnload.emit({ loading: this });
-  }
-
-  @Listen('ionDismiss')
-  protected onDismiss(ev: UIEvent) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    this.dismiss();
-  }
-
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     if (!this.spinner) {
       let defaultSpinner = 'lines';
 
@@ -169,7 +157,7 @@ export class Loading {
     this.ionLoadingDidLoad.emit({ loading: this });
   }
 
-  protected ionViewDidEnter() {
+  componentDidEnter() {
     // blur the currently active element
     const activeElement: any = document.activeElement;
     activeElement && activeElement.blur && activeElement.blur();
@@ -182,7 +170,19 @@ export class Loading {
     this.ionLoadingDidPresent.emit({ loading: this });
   }
 
-  protected render() {
+  componentDidUnload() {
+    this.ionLoadingDidUnload.emit({ loading: this });
+  }
+
+  @Listen('ionDismiss')
+  protected onDismiss(ev: UIEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.dismiss();
+  }
+
+  render() {
     // TODO: cssClass
 
     const loadingInner: any[] = [];

packages/core/src/components/menu/menu.tsx

@@ -120,13 +120,13 @@ export class Menu {
    */
   @Event() ionClose: EventEmitter;
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     return this.lazyMenuCtrl.componentOnReady().then(menu => {
       this.menuCtrl = menu as HTMLIonMenuControllerElement;
     });
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     assert(!!this.menuCtrl, 'menucontroller was not initialized');
 
     const el = this.el;
@@ -162,7 +162,7 @@ export class Menu {
     this.enabled = isEnabled;
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.menuCtrl._unregister(this);
     this.animation && this.animation.destroy();
 
@@ -424,7 +424,7 @@ export class Menu {
     this.afterAnimation(false);
   }
 
-  protected hostData() {
+  hostData() {
     const typeClass = 'menu-type-' + this.type;
     return {
       role: 'complementary',
@@ -437,7 +437,7 @@ export class Menu {
     };
   }
 
-  protected render() {
+  render() {
     return ([
       <div class='menu-inner page-inner'>
         <slot></slot>

packages/core/src/components/modal/modal.tsx

@@ -143,11 +143,11 @@ export class Modal {
     this.dismiss();
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.ionModalDidLoad.emit({ modal: this });
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.ionModalDidUnload.emit({ modal: this });
   }
 
@@ -160,7 +160,7 @@ export class Modal {
     }
   }
 
-  protected render() {
+  render() {
     const ThisComponent = this.component;
 
     let userCssClasses = 'ion-page';

packages/core/src/components/nav-controller/nav-controller.tsx

@@ -102,7 +102,7 @@ export class NavController {
     });
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/nav/nav.tsx

@@ -182,7 +182,7 @@ export class Nav {
     return this.routes;
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/nav/page-one.tsx

@@ -7,7 +7,7 @@ export class PageOne {
 
   @Element() element: HTMLElement;
 
-  ionViewDidEnter() {
+  componentDidEnter() {
     console.log('page one did enter');
   }
 
@@ -16,7 +16,7 @@ export class PageOne {
     nav.push('page-two');
   }
 
-  protected render() {
+  render() {
     return [
       <ion-header>
         <ion-toolbar>

packages/core/src/components/nav/page-three.tsx

@@ -7,7 +7,7 @@ export class PageThree {
 
   @Element() element: HTMLElement;
 
-  ionViewDidEnter() {
+  componentDidEnter() {
     console.log('page three did enter');
   }
 
@@ -16,7 +16,7 @@ export class PageThree {
     nav.pop();
   }
 
-  protected render() {
+  render() {
     return [<ion-header>
         <ion-toolbar>
         <ion-title>Page Three</ion-title>

packages/core/src/components/nav/page-two.tsx

@@ -7,7 +7,7 @@ export class PageTwo {
 
   @Element() element: HTMLElement;
 
-  ionViewDidEnter() {
+  componentDidEnter() {
     console.log('page two did enter');
   }
 
@@ -21,7 +21,7 @@ export class PageTwo {
     nav.pop();
   }
 
-  protected render() {
+  render() {
     return [<ion-header>
       <ion-toolbar>
         <ion-title>Page Two</ion-title>

packages/core/src/components/note/note.tsx

@@ -54,7 +54,7 @@ export class Note {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/page/page.tsx

@@ -5,7 +5,7 @@ import { Component } from '@stencil/core';
   tag: 'ion-page',
 })
 export class Page {
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/picker-controller/picker-controller.tsx

@@ -37,7 +37,7 @@ export class PickerController {
 
 
   @Listen('body:ionPickerDidLoad')
-  protected viewDidLoad(ev: PickerEvent) {
+  protected didLoad(ev: PickerEvent) {
     const picker = ev.detail.picker;
     const pickerResolve = this.pickerResolves[picker.pickerId];
     if (pickerResolve) {

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

@@ -33,7 +33,7 @@ export class PickerColumnCmp {
 
   @Prop() col: PickerColumn;
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     let pickerRotateFactor = 0;
     let pickerScaleFactor = 0.81;
 
@@ -46,7 +46,7 @@ export class PickerColumnCmp {
     this.scaleFactor = pickerScaleFactor;
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     // get the scrollable element within the column
     let colEle = this.el.querySelector('.picker-opts');
     this.colHeight = colEle.clientHeight;
@@ -60,7 +60,7 @@ export class PickerColumnCmp {
     this.refresh();
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     // TODO block goback-swipe and menu-swipe
     // this.activeBlock = 'goback-swipe menu-swipe';
   }
@@ -396,7 +396,7 @@ export class PickerColumnCmp {
     }
   }
 
-  protected hostData() {
+  hostData() {
     return {
       class: {
         'picker-opts-left': this.col.align === 'left',
@@ -408,7 +408,7 @@ export class PickerColumnCmp {
     };
   }
 
-  protected render() {
+  render() {
     let col = this.col;
 
     let options = this.col.options

packages/core/src/components/picker/picker.tsx

@@ -98,7 +98,7 @@ export class Picker {
 
       animation.onFinish((a: any) => {
         a.destroy();
-        this.ionViewDidEnter();
+        this.componentDidEnter();
         resolve();
 
       }).play();
@@ -144,19 +144,7 @@ export class Picker {
     });
   }
 
-  protected ionViewDidUnload() {
-    this.ionPickerDidUnload.emit({ picker: this });
-  }
-
-  @Listen('ionDismiss')
-  protected onDismiss(ev: UIEvent) {
-    ev.stopPropagation();
-    ev.preventDefault();
-
-    this.dismiss();
-  }
-
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     if (!this.spinner) {
       let defaultSpinner = 'lines';
 
@@ -173,7 +161,7 @@ export class Picker {
     this.ionPickerDidLoad.emit({ picker: this });
   }
 
-  protected ionViewDidEnter() {
+  componentDidEnter() {
     // blur the currently active element
     const activeElement: any = document.activeElement;
     activeElement && activeElement.blur && activeElement.blur();
@@ -186,6 +174,19 @@ export class Picker {
     this.ionPickerDidPresent.emit({ picker: this });
   }
 
+  componentDidUnload() {
+    this.ionPickerDidUnload.emit({ picker: this });
+  }
+
+
+  @Listen('ionDismiss')
+  protected onDismiss(ev: UIEvent) {
+    ev.stopPropagation();
+    ev.preventDefault();
+
+    this.dismiss();
+  }
+
   buttonClick(button: PickerButton) {
     // if (!this.enabled) {
     //   return;
@@ -259,7 +260,7 @@ export class Picker {
     }
   }
 
-  protected render() {
+  render() {
     // TODO: cssClass
 
     let buttons = this.buttons

packages/core/src/components/popover-controller/popover-controller.tsx

@@ -36,7 +36,7 @@ export class PopoverController {
 
 
   @Listen('body:ionPopoverDidLoad')
-  protected viewDidLoad(ev: PopoverEvent) {
+  protected didLoad(ev: PopoverEvent) {
     const popover = ev.detail.popover;
     const popoverResolve = this.popoverResolves[popover.popoverId];
     if (popoverResolve) {

packages/core/src/components/popover/popover.tsx

@@ -218,7 +218,7 @@ export class Popover {
 
       animation.onFinish((a: any) => {
         a.destroy();
-        this.ionViewDidEnter();
+        this.componentDidEnter();
         this.positionPopover();
         resolve();
       }).play();
@@ -259,7 +259,15 @@ export class Popover {
     });
   }
 
-  protected ionViewDidUnload() {
+  componentDidLoad() {
+    this.ionPopoverDidLoad.emit({ popover: this });
+  }
+
+  componentDidEnter() {
+    this.ionPopoverDidPresent.emit({ popover: this });
+  }
+
+  componentDidUnload() {
     this.ionPopoverDidUnload.emit({ popover: this });
   }
 
@@ -271,14 +279,6 @@ export class Popover {
     this.dismiss();
   }
 
-  protected ionViewDidLoad() {
-    this.ionPopoverDidLoad.emit({ popover: this });
-  }
-
-  protected ionViewDidEnter() {
-    this.ionPopoverDidPresent.emit({ popover: this });
-  }
-
   protected backdropClick() {
     if (this.enableBackdropDismiss) {
       // const opts: NavOptions = {
@@ -288,7 +288,7 @@ export class Popover {
     }
   }
 
-  protected render() {
+  render() {
     const ThisComponent = this.component;
 
     const wrapperClasses = createThemedClasses(this.mode, this.color, 'popover-wrapper');

packages/core/src/components/radio/radio-group.tsx

@@ -131,7 +131,7 @@ export class RadioGroup {
     this.value = radio.checked ? radio.value : '';
   }
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     this.radioGroupId = ++radioGroupIds;
 
     // Get the list header if it exists and set the id
@@ -175,7 +175,7 @@ export class RadioGroup {
     };
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/radio/radio.tsx

@@ -115,15 +115,15 @@ export class Radio {
    */
   @Prop({ mutable: true }) value: string;
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     this.emitStyle();
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.ionRadioDidLoad.emit({ radio: this });
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.ionRadioDidUnload.emit({ radio: this });
   }
 
@@ -177,7 +177,7 @@ export class Radio {
     };
   }
 
-  protected render() {
+  render() {
     const radioClasses: CssClassMap = {
       'radio-icon': true,
       'radio-checked': this.checked

packages/core/src/components/range/range-knob.tsx

@@ -55,7 +55,7 @@ export class RangeKnob {
     };
   }
 
-  protected render() {
+  render() {
     if (this.pin) {
       return [
         <div class='range-pin' role='presentation'>{this.val}</div>,

packages/core/src/components/range/range.tsx

@@ -132,7 +132,7 @@ export class Range implements BaseInputComponent {
     this.emitStyle();
   }
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     this.inputUpdated();
     this.createTicks();
     this.emitStyle();
@@ -401,7 +401,7 @@ export class Range implements BaseInputComponent {
     };
   }
 
-  protected render() {
+  render() {
     return [
       <slot name='start'></slot>,
       <ion-gesture

packages/core/src/components/reorder/reorder-group.tsx

@@ -182,12 +182,12 @@ export class ReorderGroup {
     }
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.containerEl = this.el.querySelector('ion-gesture') as HTMLElement;
     this.scrollEl = this.el.closest('ion-scroll') as HTMLElement;
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.onDragEnd();
   }
 
@@ -380,7 +380,7 @@ export class ReorderGroup {
     };
   }
 
-  protected render() {
+  render() {
     return (
       <ion-gesture {...{
         disableScroll: true,

packages/core/src/components/reorder/reorder.tsx

@@ -8,11 +8,11 @@ export class ItemReorder {
   @State() hasContent: boolean = null;
   @Element() private el: HTMLElement;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.hasContent = this.el.childElementCount > 0;
   }
 
-  protected render() {
+  render() {
     // TODO: https://github.com/ionic-team/stencil/issues/171
     if (this.hasContent === true) {
       return <slot></slot>;

packages/core/src/components/router/route-link.tsx

@@ -21,7 +21,7 @@ export class RouteLink {
     */
   }
 
-  protected render() {
+  render() {
     /*
     const router = document.querySelector(this.router);
     const match = router.match

packages/core/src/components/router/route.tsx

@@ -18,7 +18,7 @@ export class Route {
   @Event() ionRouteAdded: EventEmitter<RouterEntry>;
   @Event() ionRouteRemoved: EventEmitter<string>;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.ionRouteAdded.emit({
       path: this.path,
       segments: parseURL(this.path),
@@ -27,7 +27,7 @@ export class Route {
     });
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.ionRouteRemoved.emit(this.path);
   }
 }

packages/core/src/components/router/router-controller.tsx

@@ -13,7 +13,7 @@ export class RouterController {
 
   @Prop({ context: 'config' }) config: Config;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     const enabled = this.enabled = this.config.getBoolean('useRouter', false);
     if (enabled) {
       const base = document.querySelector('head > base');

packages/core/src/components/scroll/scroll.tsx

@@ -49,7 +49,7 @@ export class Scroll {
    */
   @Event() ionScrollEnd: EventEmitter;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     if (Context.isServer) {
       return;
     }
@@ -58,7 +58,7 @@ export class Scroll {
     this.gesture = gestureCtrl.createGesture('scroll', 100, false);
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.gesture && this.gesture.destroy();
     this.gesture = this.detail = this.detail.event = null;
   }
@@ -318,7 +318,7 @@ export class Scroll {
     }
   }
 
-  protected render() {
+  render() {
     return (
       // scroll-inner is used to keep custom user padding
       <div class='scroll-inner'>

packages/core/src/components/searchbar/searchbar.tsx

@@ -147,7 +147,7 @@ export class Searchbar {
   @Prop({ mutable: true }) value: string;
 
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.positionElements();
   }
 
@@ -357,7 +357,7 @@ export class Searchbar {
 
   // TODO remove the ion-buttons and replace with native buttons to remove
   // the button dependency
-  protected render() {
+  render() {
     return [
       <div class='searchbar-input-container'>
         <ion-button

packages/core/src/components/segment-button/segment-button.tsx

@@ -116,7 +116,7 @@ export class SegmentButton {
     return classList;
   }
 
-  protected render() {
+  render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
     const hostClasses = getElementClassObject(this.el.classList);
 

packages/core/src/components/segment/segment.tsx

@@ -109,7 +109,7 @@ export class Segment {
     this.selectButton(val);
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.buttons = this.el.querySelectorAll('ion-segment-button');
 
     for (var i = 0; i < this.buttons.length; i++) {
@@ -154,7 +154,7 @@ export class Segment {
     };
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/select-option/select-option.tsx

@@ -35,7 +35,7 @@ export class SelectOption {
     return this.el.textContent || '';
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 

packages/core/src/components/select/select-popover.tsx

@@ -56,7 +56,7 @@ export class SelectPopover {
     this.dismiss(value);
   }
 
-  protected render() {
+  render() {
     return (
       <ion-list no-lines={this.mode === 'md'}>
         <ion-radio-group value={this.value}>

packages/core/src/components/select/select.tsx

@@ -104,7 +104,7 @@ export class Select {
   @Event() ionCancel: EventEmitter;
 
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     // Get the parent item
     this.item = this.el.closest('ion-item');
 
@@ -368,7 +368,7 @@ export class Select {
     };
   }
 
-  protected render() {
+  render() {
     let addPlaceholderClass = false;
 
     // If selected text has been passed in, use that first

packages/core/src/components/skeleton-text/skeleton-text.tsx

@@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core';
 export class SkeletonText {
   @Prop() width: string = '100%';
 
-  protected render() {
+  render() {
     return <span style={{width: this.width}}>&nbsp;</span>;
   }
 }

packages/core/src/components/slides/slide.tsx

@@ -28,7 +28,7 @@ export class Slide {
     };
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/slides/slides.tsx

@@ -185,7 +185,7 @@ export class Slides {
   @Prop() keyboardControl: boolean;
 
 
-  protected render() {
+  render() {
     return (
       <div class='swiper-container' data-dir='rtl'>
         <div class='swiper-wrapper'>
@@ -386,9 +386,9 @@ export class Slides {
   /**
    * @hidden
    */
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     /**
-     * TODO: This should change because currently ionViewDidLoad fires independent of whether the
+     * TODO: This should change because currently componentDidLoad fires independent of whether the
      * child components are ready.
      */
     setTimeout(() => {
@@ -547,7 +547,7 @@ export class Slides {
   /**
    * @hidden
    */
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this._init = false;
 
     this.swiper.destroy(true, true);

packages/core/src/components/spinner/spinner.tsx

@@ -175,7 +175,7 @@ export class Spinner {
     };
   }
 
-  protected render() {
+  render() {
     const name = this.getName();
 
     const spinner = SPINNERS[name] || SPINNERS['lines'];

packages/core/src/components/split-pane/split-pane.tsx

@@ -167,12 +167,12 @@ export class SplitPane {
    */
   @Event() ionChange: EventEmitter;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this._styleChildren();
     this.whenChanged();
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.rmL && this.rmL();
     this.rmL = null;
   }
@@ -269,7 +269,7 @@ export class SplitPane {
     };
   }
 
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 

packages/core/src/components/tabs/page-tab.tsx

@@ -32,7 +32,7 @@ export class PageTab {
     this.getTabs().tabbarHighlight = value;
   }
 
-  protected render() {
+  render() {
     return [
       <ion-header>
         <ion-toolbar>

packages/core/src/components/tabs/tab-bar.tsx

@@ -28,7 +28,7 @@ export class TabBar {
     }
   }
 
-  protected hostData() {
+  hostData() {
     const layoutClass = `layout-${this.layout}`;
     const placementClass = `placement-${this.placement}`;
     return {
@@ -41,7 +41,7 @@ export class TabBar {
     };
   }
 
-  protected render() {
+  render() {
     const selectedTab = this.selectedTab;
     const dom = this.tabs.map(tab => (
       <ion-tab-button

packages/core/src/components/tabs/tab-button.tsx

@@ -16,7 +16,7 @@ export class TabbarButton {
     ev.stopPropagation();
   }
 
-  protected hostData() {
+  hostData() {
     const selected = this.selected;
     const tab = this.tab;
     const hasTitle = !!tab.title;
@@ -41,7 +41,7 @@ export class TabbarButton {
     };
   }
 
-  protected render() {
+  render() {
     const items = [];
     const tab = this.tab;
 

packages/core/src/components/tabs/tab-highlight.tsx

@@ -22,7 +22,7 @@ export class TabHighlight {
     this.updateTransform();
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.updateTransform();
   }
 
@@ -47,7 +47,7 @@ export class TabHighlight {
       .find(btn => btn.selected);
   }
 
-  protected hostData() {
+  hostData() {
     return {
       style: {
         'transform': this.transform

packages/core/src/components/tabs/tab.tsx

@@ -223,7 +223,7 @@ export class Tab {
     return this.nav;
   }
 
-  protected hostData() {
+  hostData() {
     const visible = this.active && this.selected;
     return {
       'aria-hidden': !visible ? 'true' : null,

packages/core/src/components/tabs/tabs.tsx

@@ -112,7 +112,7 @@ export interface NavOptions { }
  *
  * @ViewChild('myTabs') tabRef: Tabs;
  *
- * ionViewDidEnter() {
+ * componentDidEnter() {
  *   this.tabRef.select(2);
  *  }
  *
@@ -186,7 +186,7 @@ export class Tabs {
   @Event() ionChange: EventEmitter;
   @Event() ionNavChanged: EventEmitter;
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     this.loadConfig('tabsPlacement', 'bottom');
     this.loadConfig('tabsLayout', 'icon-top');
     this.loadConfig('tabsHighlight', true);
@@ -198,7 +198,7 @@ export class Tabs {
     }
   }
 
-  protected ionViewDidUnload() {
+  componentDidUnload() {
     this.tabs = this.selectedTab = null;
   }
 
@@ -338,7 +338,7 @@ export class Tabs {
     }
   }
 
-  protected render() {
+  render() {
     const dom = [
       <div class='tabs-inner'>
         <slot></slot>

packages/core/src/components/thumbnail/thumbnail.tsx

@@ -12,7 +12,7 @@ import { Component } from '@stencil/core';
   }
 })
 export class Thumbnail {
-  protected render() {
+  render() {
     return <slot></slot>;
   }
 }

packages/core/src/components/title/title.tsx

@@ -51,7 +51,7 @@ export class ToolbarTitle {
   mode: string;
   color: string;
 
-  protected render() {
+  render() {
     const themedClasses = createThemedClasses(this.mode, this.color, 'toolbar-title');
 
     return [

packages/core/src/components/toast-controller/toast-controller.tsx

@@ -34,7 +34,7 @@ export class ToastController {
   }
 
   @Listen('body:ionToastDidLoad')
-  protected viewDidLoad(ev: ToastEvent) {
+  protected didLoad(ev: ToastEvent) {
     const toast = ev.detail.toast;
     const toastResolve = this.toastResolves[toast.toastId];
     if (toastResolve) {

packages/core/src/components/toast/toast.tsx

@@ -91,7 +91,7 @@ export class Toast {
 
       animation.onFinish((a: any) => {
         a.destroy();
-        this.ionViewDidEnter();
+        this.componentDidEnter();
         resolve();
       }).play();
     });
@@ -131,7 +131,20 @@ export class Toast {
     });
   }
 
-  protected ionViewDidUnload() {
+  componentDidLoad() {
+    this.ionToastDidLoad.emit({ toast: this });
+  }
+
+  componentDidEnter() {
+    this.ionToastDidPresent.emit({ toast: this });
+    if (this.duration) {
+      setTimeout(() => {
+        this.dismiss();
+      }, this.duration);
+    }
+  }
+
+  componentDidUnload() {
     this.ionToastDidUnload.emit({ toast: this });
   }
 
@@ -143,20 +156,7 @@ export class Toast {
     this.dismiss();
   }
 
-  protected ionViewDidLoad() {
-    this.ionToastDidLoad.emit({ toast: this });
-  }
-
-  protected ionViewDidEnter() {
-    this.ionToastDidPresent.emit({ toast: this });
-    if (this.duration) {
-      setTimeout(() => {
-        this.dismiss();
-      }, this.duration);
-    }
-  }
-
-  protected render() {
+  render() {
     let userCssClass = 'toast-content';
     if (this.cssClass) {
       userCssClass += ' ' + this.cssClass;

packages/core/src/components/toggle/toggle.tsx

@@ -98,7 +98,7 @@ export class Toggle implements BooleanInput {
     };
   }
 
-  protected ionViewWillLoad() {
+  componentWillLoad() {
     this.emitStyle();
   }
 
@@ -175,7 +175,7 @@ export class Toggle implements BooleanInput {
     }
   }
 
-  protected hostData() {
+  hostData() {
     return {
       class: {
         'toggle-activated': this.activated,
@@ -185,7 +185,7 @@ export class Toggle implements BooleanInput {
     };
   }
 
-  protected render() {
+  render() {
     return (
       <ion-gesture {...this.gestureConfig}
         enabled={!this.disabled}>

packages/core/src/components/toolbar/navbar.tsx

@@ -63,7 +63,7 @@ export class Navbar {
     console.log('back button click');
   }
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     const buttons = this.el.querySelectorAll('ion-button');
     for (var i = 0; i < buttons.length; i++) {
       buttons[i].setAttribute('button-type', 'bar-button');
@@ -78,7 +78,7 @@ export class Navbar {
     };
   }
 
-  protected render() {
+  render() {
     const backButtonIcon = this.backButtonIcon || this.config.get('backButtonText', 'Back');
     const backButtonText = this.backButtonText || this.config.get('backButtonIcon', 'Back');
 

packages/core/src/components/toolbar/toolbar.tsx

@@ -119,7 +119,7 @@ export class Toolbar {
    */
   @Prop() mode: 'ios' | 'md';
 
-  protected ionViewDidLoad() {
+  componentDidLoad() {
     const buttons = this.el.querySelectorAll('ion-button') as any;
     for (var i = 0; i < buttons.length; i++) {
       buttons[i].setAttribute('button-type', 'bar-button');
@@ -134,7 +134,7 @@ export class Toolbar {
     };
   }
 
-  protected render() {
+  render() {
     const backgroundCss = createThemedClasses(this.mode, this.color, 'toolbar-background');
     const contentCss = createThemedClasses(this.mode, this.color, 'toolbar-content');