javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-13 23:40:16 +01:00
parent b4f46ee3d2
commit e729610dc8
6 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components.d.ts vendored
View File

@ -2601,9 +2601,9 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonRouteAttributes extends HTMLAttributes { export interface IonRouteAttributes extends HTMLAttributes {
component?: string; component?: string;
params?: {[key: string]: any}; componentProps?: {[key: string]: any};
path?: string;
redirectTo?: string; redirectTo?: string;
url?: string;
} }
} }
} }

12
core/src/components/route/readme.md
View File

@ -12,17 +12,17 @@
string string
#### params #### componentProps
#### path #### redirectTo
string string
#### redirectTo #### url
string string
@ -34,17 +34,17 @@ string
string string
#### params #### component-props
#### path #### redirect-to
string string
#### redirect-to #### url
string string

4
core/src/components/route/route.tsx
View File

@ -5,8 +5,8 @@ import { Component, Prop } from '@stencil/core';
tag: 'ion-route' tag: 'ion-route'
}) })
export class Route { export class Route {
@Prop() path = ''; @Prop() url = '';
@Prop() component: string; @Prop() component: string;
@Prop() redirectTo: string; @Prop() redirectTo: string;
@Prop() params: {[key: string]: any}; @Prop() componentProps: {[key: string]: any};
} }

12
core/src/components/router/test/basic/index.html
View File

@ -106,16 +106,16 @@
<ion-app> <ion-app>
<ion-router> <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 component="page-one"> </ion-route>
<ion-route path="/second-page" component="page-two"> </ion-route> <ion-route url="/second-page" component="page-two"> </ion-route>
<ion-route path="/three-page" component="page-three"> </ion-route> <ion-route url="/three-page" component="page-three"> </ion-route>
</ion-route> </ion-route>
<ion-route path="/three" component="tab3"> </ion-route> <ion-route url="/three" component="tab3"> </ion-route>
<ion-route path="/four" component="tab4"> </ion-route> <ion-route url="/four" component="tab4"> </ion-route>
</ion-router> </ion-router>

2
core/src/components/router/test/parser.spec.tsx
View File

@ -60,7 +60,7 @@ describe('flattenRouterTree', () => {
export function mockRouteElement(path: string, component: string) { export function mockRouteElement(path: string, component: string) {
const el = mockElement('ion-route'); const el = mockElement('ion-route');
el.setAttribute('path', path); el.setAttribute('url', path);
(el as any).component = component; (el as any).component = component;
return el; return el;
} }

10
core/src/components/router/utils/parser.ts
View File

@ -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'); throw new Error('Can\'t mix the component and redirectTo attribute in the same ion-route');
} }
return { return {
path: parsePath(readProp(el, 'path')), path: parsePath(readProp(el, 'url')),
to: parsePath(readProp(el, 'redirectTo')) to: parsePath(readProp(el, 'redirectTo'))
}; };
}); });
@ -20,14 +20,10 @@ export function readRoutes(root: Element): RouteTree {
return (Array.from(root.children) as HTMLIonRouteElement[]) return (Array.from(root.children) as HTMLIonRouteElement[])
.filter(el => el.tagName === 'ION-ROUTE' && el.component) .filter(el => el.tagName === 'ION-ROUTE' && el.component)
.map(el => { .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 { return {
path: path, path: parsePath(readProp(el, 'url')),
id: readProp(el, 'component').toLowerCase(), id: readProp(el, 'component').toLowerCase(),
params: el.params, params: el.componentProps,
children: readRoutes(el) children: readRoutes(el)
}; };
}); });