feat(Ionic): import Ionic for controllers and config

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

@@ -1,5 +1,5 @@
 import { Component, Element, Prop } from '@stencil/core';
-import { Scroll, ScrollDetail } from '../../index';
+import { Ionic, Scroll, ScrollDetail } from '../../index';
 import { createThemedClasses } from '../../utils/theme';
 import { getParentElement, getToolbarHeight } from '../../utils/helpers';
 

packages/core/src/components/fixed/fixed.tsx

@@ -1,5 +1,6 @@
 import { Component, Element } from '@stencil/core';
 import { getParentElement, getToolbarHeight } from '../../utils/helpers';
+import { Ionic } from '../../index';
 
 
 @Component({

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

@@ -2,6 +2,7 @@ import { applyStyles, getElementReference, pointerCoordX, pointerCoordY } from '
 import { BlockerDelegate } from './gesture-controller';
 import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
 import { GestureController, GestureDelegate, BLOCK_ALL } from './gesture-controller';
+import { Ionic } from '../../index';
 import { PanRecognizer } from './recognizers';
 
 
@@ -49,6 +50,9 @@ export class Gesture {
 
 
   ionViewDidLoad() {
+    // 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
     this.ctrl = Ionic.controllers.gesture = (Ionic.controllers.gesture || new GestureController());
 
     this.gesture = this.ctrl.createGesture(this.gestureName, this.gesturePriority, this.disableScroll);

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

@@ -1,4 +1,5 @@
 import { Component, Listen } from '@stencil/core';
+import { Ionic } from '../../index';
 import { LoadingEvent, LoadingOptions, Loading, IonicControllerApi } from '../../index';
 
 
@@ -15,7 +16,7 @@ export class LoadingController implements IonicControllerApi {
 
   ionViewDidLoad() {
     this.appRoot = document.querySelector('ion-app') || document.body;
-    Ionic.loadController('loading', this);
+    Ionic.registerController('loading', this);
   }
 
 

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

@@ -1,4 +1,5 @@
 import { Component, Listen } from '@stencil/core';
+import { Ionic } from '../../index';
 import { ModalEvent, ModalOptions, Modal, IonicControllerApi } from '../../index';
 
 
@@ -15,7 +16,7 @@ export class ModalController implements IonicControllerApi {
 
   ionViewDidLoad() {
     this.appRoot = document.querySelector('ion-app') || document.body;
-    Ionic.loadController('modal', this);
+    Ionic.registerController('modal', this);
   }
 
 
@@ -44,8 +45,8 @@ export class ModalController implements IonicControllerApi {
 
 
   @Listen('body:ionModalDidLoad')
-  viewDidLoad(ev: ModalEvent) {
+  modalDidLoad(ev: ModalEvent) {
-    const modal = ev.modal;
+    const modal = ev.detail.modal;
     const modalResolve = this.modalResolves[modal.id];
     if (modalResolve) {
       modalResolve(modal);
@@ -55,14 +56,14 @@ export class ModalController implements IonicControllerApi {
 
 
   @Listen('body:ionModalWillPresent')
-  willPresent(ev: ModalEvent) {
+  modalWillPresent(ev: ModalEvent) {
-    this.modals.push(ev.modal);
+    this.modals.push(ev.detail.modal);
   }
 
 
   @Listen('body:ionModalWillDismiss, body:ionModalDidUnload')
-  willDismiss(ev: ModalEvent) {
+  modalWillDismiss(ev: ModalEvent) {
-    const index = this.modals.indexOf(ev.modal);
+    const index = this.modals.indexOf(ev.detail.modal);
     if (index > -1) {
       this.modals.splice(index, 1);
     }

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

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
-import { AnimationBuilder, Animation } from '../../index';
+import { AnimationBuilder, Animation, Ionic } from '../../index';
 import { createThemedClasses } from '../../utils/theme';
 
 import iOSEnterAnimation from './animations/ios.enter';
@@ -63,7 +63,7 @@ export class Modal {
       this.animation = null;
     }
 
-    this.ionModalWillPresent.emit({ modal: this } as ModalEvent);
+    this.ionModalWillPresent.emit({ modal: this });
 
     // get the user's animation fn if one was provided
     let animationBuilder = this.enterAnimation;
@@ -75,14 +75,16 @@ export class Modal {
       animationBuilder = iOSEnterAnimation;
     }
 
+    Ionic.controller('animation').then(Animation => {
       // build the animation and kick it off
-    this.animation = animationBuilder(this.el);
+      this.animation = animationBuilder(Animation, this.el);
 
       this.animation.onFinish((a: any) => {
         a.destroy();
         this.ionModalDidPresent.emit({ modal: this });
         resolve();
       }).play();
+    });
   }
 
   dismiss() {
@@ -105,7 +107,8 @@ export class Modal {
       }
 
       // build the animation and kick it off
-      this.animation = animationBuilder(this.el);
+      Ionic.controller('animation').then(Animation => {
+        this.animation = animationBuilder(Animation, this.el);
         this.animation.onFinish((a: any) => {
           a.destroy();
           this.ionModalDidDismiss.emit({ modal: this });
@@ -116,6 +119,7 @@ export class Modal {
           resolve();
         }).play();
       });
+    });
   }
 
   ionViewDidUnload() {
@@ -176,6 +180,8 @@ export interface ModalOptions {
 }
 
 
-export interface ModalEvent {
+export interface ModalEvent extends Event {
+  detail: {
     modal: Modal;
+  }
 }

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

@@ -1,6 +1,7 @@
 import { Component, Element, Listen, Prop } from '@stencil/core';
 import { GestureDetail } from '../../index';
 import { GestureController, GestureDelegate } from '../gesture/gesture-controller';
+import { Ionic } from '../../index';
 
 
 @Component({

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

@@ -1,5 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
+import { Ionic } from '../../index';
 import { SPINNERS, SpinnerConfig } from './spinner-configs';
 
 

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

@@ -1,5 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
+import { Ionic } from '../../index';
 
 
 /**

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

@@ -1,5 +1,6 @@
 import { Component, Element } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
+import { Ionic } from '../../index';
 
 
 /**

packages/core/src/global/ionic-global.ts

@@ -4,28 +4,16 @@ import { IonicControllerApi, IonicGlobal } from '../index';
 
 
 // create the Ionic global (if one doesn't exist)
-const Ionic: IonicGlobal = (window as any)['Ionic'] = (window as any)['Ionic'] || {};
+const Ionic: IonicGlobal = (window as any).Ionic = (window as any).Ionic || {};
-
-// create the Ionic.config from raw config object (if it exists)
-// and convert Ionic.config into a ConfigApi that has a get() fn
-Ionic.config = createConfigController(
-  Ionic.config,
-  detectPlatforms(window.location.href, window.navigator.userAgent, PLATFORM_CONFIGS, 'core')
-);
-
-// get the mode via config settings and set it to
-// both Ionic and the Core global
-Core.mode = Ionic.mode = Ionic.config.get('mode', 'md');
-
 
 // used to store the queued controller promises to
 // be resolved when the controller finishes loading
 const queuedCtrlResolves: {[ctrlName: string]: any[]} = {};
 
-
 // create a container for all of the controllers that get loaded
 Ionic.controllers = {};
 
+// create the public method to load controllers
 Ionic.controller = (ctrlName: string, opts?: any) => {
   // loading a controller is always async so return a promise
   return new Promise<any>((resolve: Function) => {
@@ -59,8 +47,8 @@ Ionic.controller = (ctrlName: string, opts?: any) => {
   });
 };
 
-
+// create the method controllers will call once their instance has loaded
-Ionic.loadController = (ctrlName: string, ctrl: IonicControllerApi) => {
+Ionic.registerController = (ctrlName: string, ctrl: IonicControllerApi) => {
   // this method is called when the singleton
   // instance of our controller initially loads
 
@@ -97,3 +85,16 @@ function resolveController(ctrl: IonicControllerApi, resolve: Function, opts: an
     resolve(ctrl);
   }
 }
+
+
+// create the Ionic.config from raw config object (if it exists)
+// and convert Ionic.config into a ConfigApi that has a get() fn
+Ionic.config = createConfigController(
+  Ionic.config,
+  detectPlatforms(window.location.href, window.navigator.userAgent, PLATFORM_CONFIGS, 'core')
+);
+
+
+// get the mode via config settings and set it to
+// both Ionic and the Core global
+Core.mode = Ionic.mode = Ionic.config.get('mode', 'md');

packages/core/src/index.ts

@@ -1,4 +1,5 @@
-import { Animation, AnimationBuilder } from './animations/interfaces';
+import { AnimationController } from './components/animation-controller/animation-controller';
+import { Animation, AnimationBuilder } from './components/animation-controller/animation-interface';
 import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading';
 import { LoadingController } from './components/loading-controller/loading-controller';
 import { GestureDetail, GestureCallback } from './components/gesture/gesture';
@@ -13,22 +14,20 @@ import { SegmentButton, SegmentButtonEvent } from './components/segment-button/s
 import * as Stencil from '@stencil/core';
 
 
-declare global {
+export const Ionic: IonicGlobal = (window as any).Ionic;
-  const Ionic: IonicGlobal;
-}
 
 
 export interface IonicGlobal extends Stencil.AppGlobal {
-  Animation?: Animation;
   controllers?: {[ctrlName: string]: any};
   controller?: IonicController;
   config: ConfigApi;
-  loadController?: (ctrlName: string, ctrl: any) => void;
+  registerController?: (ctrlName: string, ctrl: any) => void;
   mode: string;
 }
 
 
 export interface IonicController {
+  <AnimationController>(ctrlName: 'animation'): Promise<Animation>;
   <LoadingController>(ctrlName: 'loading', opts: LoadingOptions): Promise<Loading>;
   <MenuController>(ctrlName: 'menu'): Promise<MenuController>;
   <ModalController>(ctrlName: 'modal', opts: ModalOptions): Promise<Modal>;
@@ -70,6 +69,8 @@ export interface BooleanInputComponent extends BaseInputComponent {
 export {
   Animation,
   AnimationBuilder,
+  AnimationController,
+  GestureCallback,
   GestureDetail,
   Loading,
   LoadingOptions,
@@ -79,6 +80,7 @@ export {
   MenuController,
   MenuType,
   Modal,
+  ModalController,
   ModalOptions,
   ModalEvent,
   Scroll,