4.0.0-alpha.14

CHANGELOG.md

@@ -1,3 +1,15 @@
+<a name="4.0.0-alpha.14"></a>
+# [4.0.0-alpha.14](https://github.com/ionic-team/ionic/compare/v4.0.0-alpha.13...v4.0.0-alpha.14) (2018-07-25)
+
+
+### Bug Fixes
+
+* **angular:** hide pages properly ([a44b844](https://github.com/ionic-team/ionic/commit/a44b844))
+* **angular:** make pages invisible before they are rendered ([a589816](https://github.com/ionic-team/ionic/commit/a589816))
+* **transition:** make sure hidden is removed ([f52dece](https://github.com/ionic-team/ionic/commit/f52dece))
+
+
+
 <a name="4.0.0-alpha.13"></a>
 # [4.0.0-alpha.13](https://github.com/ionic-team/ionic/compare/v4.0.0-alpha.12...v4.0.0-alpha.13) (2018-07-24)
 

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "4.0.0-alpha.13",
+  "version": "4.0.0-alpha.14",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "4.0.0-alpha.13"
+    "@ionic/core": "4.0.0-alpha.14"
   },
   "devDependencies": {
     "@angular/common": "^6.0.9",

angular/src/directives/navigation/router-controller.ts

@@ -21,11 +21,12 @@ export class StackController {
       ref: enteringRef,
       element: (enteringRef && enteringRef.location && enteringRef.location.nativeElement) as HTMLElement,
       url: this.getUrl(route),
+      fullpath: document.location.pathname,
       deactivatedId: -1
     };
   }
 
-  getExistingView(activatedRoute: ActivatedRoute): RouteView|null {
+  getExistingView(activatedRoute: ActivatedRoute): RouteView | undefined {
     const activatedUrlKey = this.getUrl(activatedRoute);
     return this.views.find(vw => vw.url === activatedUrlKey);
   }
@@ -74,23 +75,28 @@ export class StackController {
   }
 
   private cleanup() {
+    const views = this.views;
     this.viewsSnapshot
-      .filter(view => !this.views.includes(view))
+      .filter(view => !views.includes(view))
       .forEach(view => destroyView(view));
 
-    for (let i = 0; i < this.views.length - 1; i++) {
-      this.views[i].element.hidden = true;
+    for (let i = 0; i < views.length - 1; i++) {
+      const element = views[i].element;
+      element.setAttribute('aria-hidden', 'true');
+      element.classList.add('ion-page-hidden');
     }
-    this.viewsSnapshot = this.views.slice();
+
+    this.viewsSnapshot = views.slice();
   }
 
-  getActive(): RouteView | null {
-    return this.views.length > 0 ? this.views[this.views.length - 1] : null;
+  getActive(): RouteView | undefined {
+    const views = this.views;
+    return views.length > 0 ? views[views.length - 1] : undefined;
   }
 
   private async transition(
-    enteringView: RouteView,
-    leavingView: RouteView,
+    enteringView: RouteView | undefined,
+    leavingView: RouteView | undefined,
     direction: number,
     animated: boolean,
     showGoBack: boolean
@@ -99,7 +105,7 @@ export class StackController {
     const leavingEl = leavingView ? leavingView.element : undefined;
     const containerEl = this.containerEl;
     if (enteringEl && enteringEl !== leavingEl) {
-      enteringEl.classList.add('ion-page', 'hide-page');
+      enteringEl.classList.add('ion-page', 'ion-page-invisible');
       containerEl.appendChild(enteringEl);
 
       await containerEl.componentOnReady();
@@ -140,6 +146,7 @@ export function getLastDeactivatedRef(views: RouteView[]) {
 
 export interface RouteView {
   url: string;
+  fullpath: string;
   element: HTMLElement;
   ref: ComponentRef<any>;
   deactivatedId: number;

angular/src/directives/virtual-scroll/virtual-scroll.ts

@@ -41,18 +41,18 @@ export class VirtualScroll {
     ]);
   }
 
-  private nodeRender(el: HTMLElement|null, cell: any, index?: number) {
+  private nodeRender(el: HTMLElement|null, cell: any, index: number) {
     if (!el) {
       const node = this.itmTmp.viewContainer.createEmbeddedView(
         this.getComponent(cell.type),
-        new VirtualContext(null, null, null),
+        { $implicit: null, index },
         index
       );
       el = getElement(node);
       (el as any)['$ionView'] = node;
     }
     const node = (el as any)['$ionView'];
-    const ctx = node.context;
+    const ctx = node.context as VirtualContext;
     ctx.$implicit = cell.value;
     ctx.index = cell.index;
     node.detectChanges();
@@ -65,11 +65,11 @@ export class VirtualScroll {
       case 1: return this.hdrTmp.templateRef;
       case 2: return this.ftrTmp.templateRef;
     }
-    return null;
+    throw new Error('template for virtual item was not provided');
   }
 }
 
-function getElement(view: EmbeddedViewRef<VirtualContext>): HTMLElement {
+function getElement(view: EmbeddedViewRef<VirtualContext>): HTMLElement | null {
   const rootNodes = view.rootNodes;
   for (let i = 0; i < rootNodes.length; i++) {
     if (rootNodes[i].nodeType === 1) {

angular/src/directives/virtual-scroll/virtual-utils.ts

@@ -1,14 +1,5 @@
 
-export class VirtualContext {
-
-  constructor(public $implicit: any, public index: number, public count: number) { }
-
-  get first(): boolean { return this.index === 0; }
-
-  get last(): boolean { return this.index === this.count - 1; }
-
-  get even(): boolean { return this.index % 2 === 0; }
-
-  get odd(): boolean { return !this.even; }
-
+export interface VirtualContext {
+  $implicit: any;
+  index: number;
 }

angular/src/providers/angular-delegate.ts

@@ -28,7 +28,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   constructor(
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    private location: ViewContainerRef,
+    private location: ViewContainerRef | undefined,
     private appRef: ApplicationRef,
     private zone: NgZone,
   ) {}
@@ -62,10 +62,10 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
 export function attachView(
   resolver: ComponentFactoryResolver,
   injector: Injector,
-  location: ViewContainerRef|undefined,
+  location: ViewContainerRef | undefined,
   appRef: ApplicationRef,
   elRefMap: WeakMap<HTMLElement, any>,
-  container: any, component: any, params: any, cssClasses: string[]
+  container: any, component: any, params: any, cssClasses: string[] | undefined
 ) {
   const factory = resolver.resolveComponentFactory(component);
   const childInjector = Injector.create(getProviders(params), injector);
@@ -78,8 +78,10 @@ export function attachView(
   if (params) {
     Object.assign(instance, params);
   }
-  for (const clazz of cssClasses) {
-    hostElement.classList.add(clazz);
+  if (cssClasses) {
+    for (const clazz of cssClasses) {
+      hostElement.classList.add(clazz);
+    }
   }
   bindLifecycleEvents(instance, hostElement);
   container.appendChild(hostElement);
@@ -103,8 +105,8 @@ const LIFECYCLES = [
 
 export function bindLifecycleEvents(instance: any, element: HTMLElement) {
   LIFECYCLES.forEach(eventName => {
-    element.addEventListener(eventName, (ev: CustomEvent) => {
-      if (typeof instance[eventName] === 'function') {
+    element.addEventListener(eventName, (ev: any) => {
+      if (typeof instance[eventName] === 'function' && ev.detail) {
         instance[eventName](ev.detail);
       }
     });

angular/src/providers/config.ts

@@ -18,7 +18,7 @@ export class Config {
     if (c) {
       return c.getBoolean(key, fallback);
     }
-    return null;
+    return false;
   }
 
   getNumber(key: string, fallback?: number): number {
@@ -26,7 +26,7 @@ export class Config {
     if (c) {
       return c.getNumber(key, fallback);
     }
-    return null;
+    return 0;
   }
 
   set(key: string, value?: any) {
@@ -39,7 +39,7 @@ export class Config {
 
 export const ConfigToken = new InjectionToken<any>('USERCONFIG');
 
-function getConfig(): CoreConfig {
+function getConfig(): CoreConfig | null {
   const win: IonicWindow = window as any;
   if (typeof win !== 'undefined') {
     const Ionic = win.Ionic;

angular/src/providers/events.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class Events {
-  private c: {[topic: string]: Function[]} = [] as any;
+  private c = new Map<string, Function[]>();
 
   /**
    * Subscribe to an event topic. Events that get posted to that topic will trigger the provided handler.
@@ -12,12 +12,11 @@ export class Events {
    * @param {function} handler the event handler
    */
   subscribe(topic: string, ...handlers: Function[]) {
-    if (!this.c[topic]) {
-      this.c[topic] = [];
+    let topics = this.c.get(topic);
+    if (!topics) {
+      topics = [];
     }
-    handlers.forEach((handler) => {
-      this.c[topic].push(handler);
-    });
+    topics.push(...handlers);
   }
 
   /**
@@ -28,34 +27,27 @@ export class Events {
    *
    * @return true if a handler was removed
    */
-  unsubscribe(topic: string, handler: Function = null) {
-    const t = this.c[topic];
-    if (!t) {
-      // Wasn't found, wasn't removed
-      return false;
+  unsubscribe(topic: string, handler?: Function): boolean {
+    if (!handler) {
+      return this.c.delete(topic);
     }
 
-    if (!handler) {
-      // Remove all handlers for this topic
-      delete this.c[topic];
-      return true;
+    const topics = this.c.get(topic);
+    if (!topics) {
+      return false;
     }
 
     // We need to find and remove a specific handler
-    const i = t.indexOf(handler);
+    const index = topics.indexOf(handler);
 
-    if (i < 0) {
+    if (index < 0) {
       // Wasn't found, wasn't removed
       return false;
     }
-
-    t.splice(i, 1);
-
-    // If the channel is empty now, remove it from the channel map
-    if (!t.length) {
-      delete this.c[topic];
+    topics.splice(index, 1);
+    if (topics.length === 0) {
+      this.c.delete(topic);
     }
-
     return true;
   }
 
@@ -65,17 +57,12 @@ export class Events {
    * @param {string} topic the topic to publish to
    * @param {any} eventData the data to send as the event
    */
-  publish(topic: string, ...args: any[]) {
-    const t = this.c[topic];
-    if (!t) {
+  publish(topic: string, ...args: any[]): any[] | null {
+    const topics = this.c.get(topic);
+    if (!topics) {
       return null;
     }
-
-    const responses: any[] = [];
-    t.forEach((handler: any) => {
-      responses.push(handler(...args));
-    });
-    return responses;
+    return topics.map((handler => handler(...args)));
   }
 }
 

angular/src/providers/modal-controller.ts

@@ -14,7 +14,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     super('ion-modal-controller');
   }
 
-  create(opts?: ModalOptions): Promise<HTMLIonModalElement> {
+  create(opts: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
       delegate: this.angularDelegate.create(this.resolver, this.injector)

angular/src/providers/nav-controller.ts

@@ -21,17 +21,17 @@ export class NavController {
 
   goForward(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
     this.setIntent(NavIntent.Forward, animated);
-    return this.router.navigateByUrl(url, extras);
+    return this.router!.navigateByUrl(url, extras);
   }
 
   goBack(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
     this.setIntent(NavIntent.Back, animated);
-    return this.router.navigateByUrl(url, extras);
+    return this.router!.navigateByUrl(url, extras);
   }
 
   goRoot(url: string | UrlTree, animated?: boolean, extras?: NavigationExtras) {
     this.setIntent(NavIntent.Root, animated);
-    return this.router.navigateByUrl(url, extras);
+    return this.router!.navigateByUrl(url, extras);
   }
 
   setIntent(intent: NavIntent, animated?: boolean) {

angular/src/providers/platform.ts

@@ -49,7 +49,7 @@ export class Platform {
         readyResolve('cordova');
       }, {once: true});
     } else {
-      readyResolve('dom');
+      readyResolve!('dom');
     }
   }
 
@@ -169,7 +169,7 @@ export class Platform {
   /**
    * Get the query string parameter
    */
-  getQueryParam(key: string): string {
+  getQueryParam(key: string): string | null {
     return readQueryParam(window.location.href, key);
   }
 

angular/src/providers/popover-controller.ts

@@ -14,7 +14,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     super('ion-popover-controller');
   }
 
-  create(opts?: PopoverOptions): Promise<HTMLIonPopoverElement> {
+  create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
       delegate: this.angularDelegate.create(this.resolver, this.injector)

angular/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "alwaysStrict": true,
-    "strict": false,
+    "strict": true,
     "allowSyntheticDefaultImports": true,
     "allowUnreachableCode": false,
     "declaration": true,

core/README.md

@@ -20,7 +20,7 @@ The Ionic Core package contains the Web Components that make up the reusable UI
 
 Easiest way to start using Ionic Core is by adding a script tag to the CDN:
 
-    <script src="https://unpkg.com/@ionic/core@4.0.0-alpha.13/dist/ionic.js"></script>
+    <script src="https://unpkg.com/@ionic/core@4.0.0-alpha.14/dist/ionic.js"></script>
 
 Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`.
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "4.0.0-alpha.13",
+  "version": "4.0.0-alpha.14",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/src/utils/transition.ts

@@ -56,6 +56,7 @@ export function setPageHidden(el: HTMLElement, hidden: boolean) {
     el.setAttribute('aria-hidden', 'true');
     el.classList.add('ion-page-hidden');
   } else {
+    el.hidden = false;
     el.removeAttribute('aria-hidden');
     el.classList.remove('ion-page-hidden');
   }