fix(): update to Stencil One 🎉🎊

.gitignore

@@ -15,6 +15,7 @@ log.txt
 coverage/
 collection/
 dist/
+dist-transpiled/
 node_modules/
 tmp/
 temp/
@@ -49,10 +50,16 @@ demos/src/**/*.ngfactory.ts
 demos/src/**/*.d.ts
 demos/src/**/*.metadata.json
 demos/src/**/*.css.shim.ts
+prerender.html
+prerender-domino.html
+prerender-hydrated.html
+prerender-static.html
 
 # stencil
 angular/css/
 core/css/
+core/hydrated/
 core/loader/
+core/www/
 .stencil/
 angular/build/

.scripts/release-dev.js

@@ -7,6 +7,7 @@ const fs = require('fs-extra');
 
 const common = require('./common');
 
+const DIST_NPM_TAG = 'dev';
 const DIST_TAG = 'dev';
 
 async function main() {
@@ -37,7 +38,7 @@ async function main() {
     packages.forEach(package => {
       common.prepareDevPackage(tasks, package, devVersion);
     });
-    common.publishPackages(tasks, packages, devVersion, DIST_TAG);
+    common.publishPackages(tasks, packages, devVersion, DIST_NPM_TAG);
 
     const listr = new Listr(tasks);
     await listr.run();

angular/scripts/rollup.config.js

@@ -7,10 +7,6 @@ export default {
     format: 'es'
   },
   external: (id) => {
-    // inline @ionic/core deps
-    if (id === '@ionic/core') {
-      return false;
-    }
     // anything else is external
     // Windows: C:\xxxxxx\xxx
     const colonPosition = 1;

angular/src/app-initialize.ts

@@ -1,4 +1,4 @@
-import { defineCustomElements } from '@ionic/core/loader';
+import { applyPolyfills, defineCustomElements } from '@ionic/core/loader';
 
 import { Config } from './providers/config';
 import { IonicWindow } from './types/interfaces';
@@ -10,26 +10,27 @@ export function appInitialize(config: Config, doc: Document) {
       const Ionic = win.Ionic = win.Ionic || {};
 
       Ionic.config = config;
-      Ionic.asyncQueue = false;
-
-      Ionic.ael = (elm, eventName, cb, opts) => {
-        if (elm.__zone_symbol__addEventListener && skipZone(eventName)) {
-          elm.__zone_symbol__addEventListener(eventName, cb, opts);
-        } else {
-          elm.addEventListener(eventName, cb, opts);
-        }
-      };
-
-      Ionic.rel = (elm, eventName, cb, opts) => {
-        if (elm.__zone_symbol__removeEventListener && skipZone(eventName)) {
-          elm.__zone_symbol__removeEventListener(eventName, cb, opts);
-        } else {
-          elm.removeEventListener(eventName, cb, opts);
-        }
-      };
-
-      return defineCustomElements(win, {
-        exclude: ['ion-tabs', 'ion-tab']
+
+      return applyPolyfills().then(() => {
+        return defineCustomElements(win, {
+          exclude: ['ion-tabs', 'ion-tab'],
+          syncQueue: true,
+          raf: h => (win.__zone_symbol__requestAnimationFrame) ? win.__zone_symbol__requestAnimationFrame(h) : requestAnimationFrame(h),
+          ael(elm, eventName, cb, opts) {
+            if ((elm as any).__zone_symbol__addEventListener && skipZone(eventName)) {
+              (elm as any).__zone_symbol__addEventListener(eventName, cb, opts);
+            } else {
+              elm.addEventListener(eventName, cb, opts);
+            }
+          },
+          rel(elm, eventName, cb, opts) {
+            if ((elm as any).__zone_symbol__removeEventListener && skipZone(eventName)) {
+              (elm as any).__zone_symbol__removeEventListener(eventName, cb, opts);
+            } else {
+              elm.removeEventListener(eventName, cb, opts);
+            }
+          }
+        });
       });
     }
   };

angular/src/directives/navigation/ion-router-outlet.ts

@@ -94,7 +94,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     if ((this.nativeEl as any).componentOnReady) {
       this.nativeEl.componentOnReady().then(() => {
         if (this._swipeGesture === undefined) {
-          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', this.nativeEl.mode === 'ios');
+          this.swipeGesture = this.config.getBoolean('swipeBackEnabled', (this.nativeEl as any).mode === 'ios');
         }
       });
     }

angular/src/providers/action-sheet-controller.ts

@@ -1,14 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { ActionSheetOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { ActionSheetOptions, actionSheetController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ActionSheetController extends OverlayBaseController<ActionSheetOptions, HTMLIonActionSheetElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-action-sheet-controller', doc);
+  constructor() {
+    super(actionSheetController);
   }
 }

angular/src/providers/alert-controller.ts

@@ -1,14 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { AlertOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { AlertOptions, alertController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AlertController extends OverlayBaseController<AlertOptions, HTMLIonAlertElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-alert-controller', doc);
+  constructor() {
+    super(alertController);
   }
 }

angular/src/providers/loading-controller.ts

@@ -1,14 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { LoadingOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { LoadingOptions, loadingController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
 @Injectable({
   providedIn: 'root',
 })
 export class LoadingController extends OverlayBaseController<LoadingOptions, HTMLIonLoadingElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-loading-controller', doc);
+  constructor() {
+    super(loadingController);
   }
 }

angular/src/providers/modal-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
-import { ModalOptions } from '@ionic/core';
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { ModalOptions, modalController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -13,9 +12,8 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    @Inject(DOCUMENT) doc: any
   ) {
-    super('ion-modal-controller', doc);
+    super(modalController);
   }
 
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {

angular/src/providers/picker-controller.ts

@@ -1,14 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { PickerOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { PickerOptions, pickerController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
 @Injectable({
   providedIn: 'root',
 })
 export class PickerController extends OverlayBaseController<PickerOptions, HTMLIonPickerElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-picker-controller', doc);
+  constructor() {
+    super(pickerController);
   }
 }

angular/src/providers/popover-controller.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common';
-import { ComponentFactoryResolver, Inject, Injectable, Injector } from '@angular/core';
-import { PopoverOptions } from '@ionic/core';
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { PopoverOptions, popoverController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
@@ -13,9 +12,8 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    @Inject(DOCUMENT) doc: any
   ) {
-    super('ion-popover-controller', doc);
+    super(popoverController);
   }
 
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {

angular/src/providers/toast-controller.ts

@@ -1,14 +1,13 @@
-import { DOCUMENT } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { ToastOptions } from '@ionic/core';
+import { Injectable } from '@angular/core';
+import { ToastOptions, toastController } from '@ionic/core';
 
 import { OverlayBaseController } from '../util/overlay';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ToastController extends OverlayBaseController<ToastOptions, HTMLIonToastElement> {
-  constructor(@Inject(DOCUMENT) doc: any) {
-    super('ion-toast-controller', doc);
+  constructor() {
+    super(toastController);
   }
 }

angular/src/types/interfaces.ts

@@ -1,13 +1,15 @@
 
 export interface IonicGlobal {
   config?: any;
-  ael?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
-  raf?: (ts: number) => void;
-  rel?: (elm: any, eventName: string, cb: (ev: Event) => void, opts: any) => void;
   asyncQueue?: boolean;
 }
 
 export interface IonicWindow extends Window {
   Ionic: IonicGlobal;
-  __zone_symbol__requestAnimationFrame: (ts: number) => void;
+  __zone_symbol__requestAnimationFrame?: (ts: FrameRequestCallback) => number;
+}
+
+export interface HTMLStencilElement extends HTMLElement {
+  componentOnReady(): Promise<this>;
+  forceUpdate(): void;
 }

angular/src/util/overlay.ts

@@ -1,26 +1,31 @@
-import { proxyMethod } from './util';
 
-export class OverlayBaseController<Opts, Overlay> {
-  constructor(private ctrl: string, private doc: Document) {}
+interface ControllerShape<Opts, HTMLElm> {
+  create(options: Opts): Promise<HTMLElm>;
+  dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
+  getTop(): Promise<HTMLElm | undefined>;
+}
+
+export class OverlayBaseController<Opts, Overlay> implements ControllerShape<Opts, Overlay> {
+  constructor(private ctrl: ControllerShape<Opts, Overlay>) {}
 
   /**
    * Creates a new overlay
    */
-  create(opts?: Opts): Promise<Overlay> {
-    return proxyMethod(this.ctrl, this.doc, 'create', opts);
+  create(opts: Opts) {
+    return this.ctrl.create(opts);
   }
 
   /**
    * When `id` is not provided, it dismisses the top overlay.
    */
-  dismiss(data?: any, role?: string, id?: string): Promise<void> {
-    return proxyMethod(this.ctrl, this.doc, 'dismiss', data, role, id);
+  dismiss(data?: any, role?: string, id?: string) {
+    return this.ctrl.dismiss(data, role, id);
   }
 
   /**
    * Returns the top overlay.
    */
-  getTop(): Promise<Overlay | undefined> {
-    return proxyMethod(this.ctrl, this.doc, 'getTop');
+  getTop() {
+    return this.ctrl.getTop();
   }
 }

angular/src/util/util.ts

@@ -1,3 +1,4 @@
+import { HTMLStencilElement } from '../types/interfaces';
 
 export function proxyMethod(ctrlName: string, doc: Document, methodName: string, ...args: any[]) {
   const controller = ensureElementInBody(ctrlName, doc);

angular/test/test-app/e2e/src/router-link.e2e-spec.ts

@@ -1,43 +1,44 @@
 import { browser, element, by, protractor } from 'protractor';
 import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
-import { HttpUrlEncodingCodec } from '@angular/common/http';
 
 const EC = protractor.ExpectedConditions;
 
 describe('router-link params and fragments', () => {
   const queryParam = 'A&=#Y';
   const fragment = 'myDiv1';
   const id = 'MyPageID==';
-  
+
   afterEach(() => {
     handleErrorMessages();
   });
-  
+
   it('should go to a page with properly encoded values', async () => {
     await browser.get('/router-link?ionic:_testing=true');
     await element(by.css('#queryParamsFragment')).click();
-    
+
     const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
 
     browser.wait(EC.urlContains(expectedRoute), 5000);
   });
-  
+
   it('should return to a page with preserved query param and fragment', async () => {
     await browser.get('/router-link?ionic:_testing=true');
     await element(by.css('#queryParamsFragment')).click();
-    await element(by.css('#goToPage3')).click(); 
-
+    await waitTime(200);
+    await element(by.css('#goToPage3')).click();
+
     browser.wait(EC.urlContains('router-link-page3'), 5000);
-
-    await element(by.css('#goBackFromPage3')).click(); 
-
+    await waitTime(200);
+
+    await element(by.css('#goBackFromPage3')).click();
+
     const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
     browser.wait(EC.urlContains(expectedRoute), 5000);
   });
-  
+
   it('should preserve query param and fragment with defaultHref string', async () => {
     await browser.get('/router-link-page3?ionic:_testing=true');
-    
+
     await element(by.css('#goBackFromPage3')).click();
 
     const expectedRoute = '?token=ABC#fragment';

angular/test/test-app/e2e/src/tabs.e2e-spec.ts

@@ -140,6 +140,7 @@ describe('tabs', () => {
       const tab = await getSelectedTab();
       await tab.$('#goto-nested-page1').click();
 
+      await waitTime(600);
       await testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
 
       const nestedOutlet = await element(by.css('app-nested-outlet'));