fix(router): rename API to match stencil-router

ionic-team · Mar 13, 2018 · e729610 · e729610
1 parent b4f46ee
commit e729610
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 24 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -2601,9 +2601,9 @@ declare global {
   namespace JSXElements {
     export interface IonRouteAttributes extends HTMLAttributes {
       component?: string;
-      params?: {[key: string]: any};
-      path?: string;
+      componentProps?: {[key: string]: any};
       redirectTo?: string;
+      url?: string;
     }
   }
 }

diff --git a/core/src/components/route/readme.md b/core/src/components/route/readme.md
@@ -12,17 +12,17 @@
 string
 
 
-#### params
+#### componentProps
 
 
 
 
-#### path
+#### redirectTo
 
 string
 
 
-#### redirectTo
+#### url
 
 string
 
@@ -34,17 +34,17 @@ string
 string
 
 
-#### params
+#### component-props
 
 
 
 
-#### path
+#### redirect-to
 
 string
 
 
-#### redirect-to
+#### url
 
 string
 

diff --git a/core/src/components/route/route.tsx b/core/src/components/route/route.tsx
@@ -5,8 +5,8 @@ import { Component, Prop } from '@stencil/core';
   tag: 'ion-route'
 })
 export class Route {
-  @Prop() path = '';
+  @Prop() url = '';
   @Prop() component: string;
   @Prop() redirectTo: string;
-  @Prop() params: {[key: string]: any};
+  @Prop() componentProps: {[key: string]: any};
 }
diff --git a/core/src/components/router/test/basic/index.html b/core/src/components/router/test/basic/index.html
@@ -106,16 +106,16 @@
   <ion-app>
 
     <ion-router>
-      <ion-route path="/" component="tab-one"> </ion-route>
+      <ion-route url="/" component="tab-one"> </ion-route>
 
-      <ion-route path="/two" component="tab-two">
+      <ion-route url="/two" component="tab-two">
         <ion-route component="page-one"> </ion-route>
-        <ion-route path="/second-page" component="page-two"> </ion-route>
-        <ion-route path="/three-page" component="page-three"> </ion-route>
+        <ion-route url="/second-page" component="page-two"> </ion-route>
+        <ion-route url="/three-page" component="page-three"> </ion-route>
       </ion-route>
 
-      <ion-route path="/three" component="tab3"> </ion-route>
-      <ion-route path="/four" component="tab4"> </ion-route>
+      <ion-route url="/three" component="tab3"> </ion-route>
+      <ion-route url="/four" component="tab4"> </ion-route>
 
     </ion-router>
 

diff --git a/core/src/components/router/test/parser.spec.tsx b/core/src/components/router/test/parser.spec.tsx
@@ -60,7 +60,7 @@ describe('flattenRouterTree', () => {
 
 export function mockRouteElement(path: string, component: string) {
   const el = mockElement('ion-route');
-  el.setAttribute('path', path);
+  el.setAttribute('url', path);
   (el as any).component = component;
   return el;
 }
diff --git a/core/src/components/router/utils/parser.ts b/core/src/components/router/utils/parser.ts
@@ -10,7 +10,7 @@ export function readRedirects(root: Element): RouteRedirect[] {
       throw new Error('Can\'t mix the component and redirectTo attribute in the same ion-route');
     }
     return {
-      path: parsePath(readProp(el, 'path')),
+      path: parsePath(readProp(el, 'url')),
       to: parsePath(readProp(el, 'redirectTo'))
     };
   });
@@ -20,14 +20,10 @@ export function readRoutes(root: Element): RouteTree {
   return (Array.from(root.children) as HTMLIonRouteElement[])
     .filter(el => el.tagName === 'ION-ROUTE' && el.component)
     .map(el => {
-      const path = parsePath(readProp(el, 'path'));
-      if (path.includes(':id')) {
-        console.warn('Using ":id" is not recommended in `ion-route`, it causes conflicts in the DOM');
-      }
       return {
-        path: path,
+        path: parsePath(readProp(el, 'url')),
         id: readProp(el, 'component').toLowerCase(),
-        params: el.params,
+        params: el.componentProps,
         children: readRoutes(el)
       };
     });