fix(tabs): lazy loading, using ion-nav

packages/core/package.json

@@ -10,7 +10,7 @@
     "dist/"
   ],
   "devDependencies": {
-    "@stencil/core": "0.0.8-9",
+    "@stencil/core": "0.0.8-10",
     "@stencil/dev-server": "0.0.18-0",
     "@stencil/utils": "latest",
     "@types/jest": "^21.1.6",

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

@@ -9,7 +9,6 @@ import {
   PublicNav,
   PublicViewController,
   RouterEntries,
-  RouterEntry,
   ViewController
 } from '../../index';
 import {
@@ -56,17 +55,9 @@ export class Nav implements PublicNav {
     this.navId = getNextNavId();
   }
 
-  @Listen('ionRouteAdded')
-  routeAdded(ev: CustomEvent) {
-    this.addRoute(ev.detail);
-  }
-
-  @Listen('ionRouteRemoved')
-  routeRemoved(ev: CustomEvent) {
-    this.removeRoute(ev.detail);
-  }
-
   componentWillLoad() {
+    this.routes = Array.from(this.element.querySelectorAll('ion-route'))
+      .map(child => child.getRoute());
     this.useRouter = this.config.getBoolean('useRouter', false);
   }
 
@@ -169,16 +160,6 @@ export class Nav implements PublicNav {
     navInitializedImpl(this, event);
   }
 
-  @Method()
-  addRoute(route: RouterEntry) {
-    this.routes.push(route);
-  }
-
-  @Method()
-  removeRoute(_: RouterEntry) {
-    throw 'not implemented';
-  }
-
   @Method()
   getState(): NavState {
     assert(this.useRouter, 'routing is disabled');

packages/core/src/components/nav/readme.md

@@ -49,9 +49,6 @@ any
 
 ## Methods
 
-#### addRoute()
-
-
 #### canGoBack()
 
 
@@ -94,9 +91,6 @@ any
 #### removeIndex()
 
 
-#### removeRoute()
-
-
 #### removeView()
 
 

packages/core/src/components/range/range.scss

@@ -3,13 +3,13 @@
 // Range
 // --------------------------------------------------
 
-.item .item-inner {
+.item ion-range .item-inner {
   overflow: visible;
 
   width: 100%;
 }
 
-.item .input-wrapper {
+.item ion-range .input-wrapper {
   overflow: visible;
 
   flex-direction: column;

packages/core/src/components/route/readme.md

@@ -39,12 +39,9 @@ string
 any
 
 
-## Events
+## Methods
 
-#### ionRouteAdded
+#### getRoute()
-
-
-#### ionRouteRemoved
 
 
 

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

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, Method, Prop } from '@stencil/core';
 import { RouterEntry, parseURL } from '../router-controller/router-utils';
 
 
@@ -11,19 +11,13 @@ export class Route {
   @Prop() component: string;
   @Prop() props: any = {};
 
-  @Event() ionRouteAdded: EventEmitter<RouterEntry>;
+  @Method()
-  @Event() ionRouteRemoved: EventEmitter<string>;
+  getRoute(): RouterEntry {
-
+    return {
-  componentDidLoad() {
-    this.ionRouteAdded.emit({
       path: this.path,
       segments: parseURL(this.path),
       id: this.component,
       props: this.props
-    });
+    };
-  }
-
-  componentDidUnload() {
-    this.ionRouteRemoved.emit(this.path);
   }
 }

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

@@ -45,6 +45,7 @@ export class RouterController {
     if (this.isBlocked()) {
       return;
     }
+    debugger;
     console.debug('[IN] nav changed -> update URL');
     const { stack, pivot } = this.readNavState();
     if (pivot) {
@@ -91,7 +92,7 @@ export class RouterController {
   }
 
   private isHash() {
-    return this.basePrefix.length > 0 && this.basePrefix[0];
+    return this.basePrefix.length > 0 && this.basePrefix[0] === '#';
   }
 
   private readURL(): string[] {

packages/core/src/components/tab/readme.md

@@ -80,6 +80,16 @@ string
 string
 
 
+#### root
+
+string
+
+
+#### rootParams
+
+any
+
+
 #### selected
 
 boolean
@@ -132,6 +142,16 @@ string
 string
 
 
+#### root
+
+string
+
+
+#### rootParams
+
+any
+
+
 #### selected
 
 boolean
@@ -168,6 +188,9 @@ string
 #### getNav()
 
 
+#### getPath()
+
+
 #### goToRoot()
 
 

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

@@ -15,6 +15,16 @@ export class Tab {
   @State() init = false;
   @State() active = false;
 
+  /**
+   * @input {Page} Set the root page for this tab.
+   */
+  @Prop() root: string;
+
+  /**
+   * @input {object} Any nav-params to pass to the root page of this tab.
+   */
+  @Prop() rootParams: any;
+
   /**
    * @input {string} Set the root page for this tab.
    */
@@ -83,24 +93,42 @@ export class Tab {
   protected componentDidUpdate() {
     if (this.init && this.resolveNav) {
       const nav = this.el.querySelector('ion-nav') as any as StencilElement;
-      if (nav) {
       nav.componentOnReady(this.resolveNav);
-      } else {
-        this.resolveNav(null);
-      }
       this.resolveNav = null;
     }
   }
 
   @Method()
-  _setActive(active: boolean): Promise<any> {
+  _setActive(shouldActive: boolean): Promise<any> {
-    if (this.active === active) {
+    if (this.active === shouldActive) {
       return Promise.resolve();
     }
-    this.active = active;
+    this.active = shouldActive;
-    this.selected = active;
+    this.selected = shouldActive;
 
-    return Promise.resolve();
+    const needsLifecycle = this.init;
+    if (shouldActive) {
+      this.init = true;
+    }
+    if (needsLifecycle) {
+      if (shouldActive) {
+        // lifecycle didEnter
+      } else {
+        // lifecycle didLeave
+      }
+    }
+    return this.nav;
+  }
+
+  @Method()
+  getPath(): string {
+    if (this.path != null) {
+      return this.path;
+    }
+    if (this.title) {
+      return this.title.toLowerCase();
+    }
+    return '';
   }
 
   @Method()
@@ -129,4 +157,11 @@ export class Tab {
       }
     };
   }
+
+  render() {
+    if (this.init) {
+      return <ion-nav><slot></slot></ion-nav>;
+    }
+    return null;
+  }
 }

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

@@ -78,7 +78,7 @@ export class Tabs {
   }
 
   @Listen('ionTabbarClick')
-  @Listen('ionSelect')
+  // @Listen('ionSelect')
   protected tabChange(ev: CustomEvent) {
     const selectedTab = ev.detail as HTMLIonTabElement;
     this.select(selectedTab);
@@ -102,6 +102,7 @@ export class Tabs {
     }
     selectedTab.selected = true;
 
+    console.log('HEY');
     // The same selected was selected
     // we need to set root in the nested ion-nav if it exist
     if (this.selectedTab === selectedTab) {
@@ -157,19 +158,21 @@ export class Tabs {
       return null;
     }
     return {
-      path: selectedTab.path,
+      path: selectedTab.getPath(),
       focusNode: selectedTab
     };
   }
 
   @Method()
   getRoutes(): RouterEntries {
-    return this.tabs.map(t => {
+    debugger;
+    const a = this.tabs.map(t => {
       return {
-        path: t.path,
+        path: t.getPath(),
         id: t
       };
     });
+    return a;
   }
 
   @Method()

packages/core/src/components/tabs/test/basic/index.html

@@ -14,27 +14,21 @@
   <ion-app>
     <ion-tabs>
       <ion-tab title="Plain List" icon="star" path="">
-        <page-tab class="ion-page"></page-tab>
+        <ion-route path="" component="page-tab"></ion-route>
       </ion-tab>
 
       <ion-tab title="Schedule" icon="globe" path="tab2">
-        <ion-nav root="page-two">
         <ion-route path="" component="page-two"></ion-route>
         <ion-route path="path/to/page/three" component="page-three"></ion-route>
-        </ion-nav>
       </ion-tab>
 
       <ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
-        <ion-nav root="page-three">
         <ion-route path="/" component="page-three"></ion-route>
-        </ion-nav>
       </ion-tab>
 
       <ion-tab title="Messages" icon="chatboxes" path="tab4">
-        <ion-nav root="page-tab">
         <ion-route component="page-one"></ion-route>
         <ion-route path="paginaaaa-two" component="page-two"></ion-route>
-        </ion-nav>
       </ion-tab>
     </ion-tabs>
 

packages/core/src/components/tabs/test/translucent/index.html

@@ -13,32 +13,26 @@
 
   <ion-app>
     <ion-tabs color="primary" translucent>
-      <ion-tab title="Today" icon="calendar" path="">
+      <ion-tab title="Today" icon="calendar" path="" root="translucent-page-tab">
-        <translucent-page-tab class="ion-page"></translucent-page-tab>
+        <ion-route path="" component="translucent-page-tab"></ion-route>
       </ion-tab>
 
-      <ion-tab title="Games" icon="planet" path="tab2">
+      <ion-tab title="Games" icon="planet" root="page-two">
-        <ion-nav root="page-two">
         <ion-route path="" component="page-two"></ion-route>
         <ion-route path="path/to/page/three" component="page-three"></ion-route>
-        </ion-nav>
       </ion-tab>
 
-      <ion-tab title="Apps" icon="logo-buffer" path="tab3">
+      <ion-tab title="Apps" icon="logo-buffer" root="page-three">
-        <ion-nav root="page-three">
           <ion-route path="/" component="page-three"></ion-route>
-        </ion-nav>
       </ion-tab>
 
-      <ion-tab title="Updates" icon="download" path="tab4" badge="7" badge-style="danger">
+      <ion-tab title="Updates" icon="download" badge="7" badge-style="danger" root="translucent-page-tab">
-        <ion-nav root="translucent-page-tab">
           <ion-route component="page-one"></ion-route>
           <ion-route path="paginaaaa-two" component="page-two"></ion-route>
-        </ion-nav>
       </ion-tab>
 
-      <ion-tab title="Search" icon="search" path="tab5">
+      <ion-tab title="Search" icon="search">
-        <translucent-page-tab class="ion-page"></translucent-page-tab>
+        <ion-route path="" component="translucent-page-tab"></ion-route>
       </ion-tab>
     </ion-tabs>