honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(router): change recognize to return a router state candidate

This commit is contained in:
vsavkin 2016-06-01 13:29:52 -07:00
parent 46911117f1
commit 63c194b71f
2 changed files with 81 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
modules/@angular/router/src/recognize.ts
View File

@ -1,80 +1,66 @@
import { UrlTree, UrlSegment } from './url_tree'; import { UrlTree, UrlSegment } from './url_tree';
import { flatten, first, merge } from './utils/collection'; import { flatten, first, merge } from './utils/collection';
import { TreeNode, rootNode } from './utils/tree'; import { TreeNode } from './utils/tree';
import { RouterState, ActivatedRoute } from './router_state'; import { RouterStateCandidate, ActivatedRouteCandidate } from './router_state';
import { Params, PRIMARY_OUTLET } from './shared'; import { Params, PRIMARY_OUTLET } from './shared';
import { RouterConfig, Route } from './config'; import { RouterConfig, Route } from './config';
import { Type } from '@angular/core'; import { Type } from '@angular/core';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export function recognize(config: RouterConfig, url: UrlTree, existingState: RouterState): Observable<RouterState> { export function recognize(rootComponentType: Type, config: RouterConfig, url: UrlTree): Observable<RouterStateCandidate> {
try { try {
const match = new MatchResult(existingState.root.component, config, [url.root], {}, rootNode(url).children, [], PRIMARY_OUTLET); const match = new MatchResult(rootComponentType, config, [url.root], {}, url._root.children, [], PRIMARY_OUTLET, null);
(<any>existingState.queryParams).next(url.queryParameters); const roots = constructActivatedRoute(match);
(<any>existingState.fragment).next(url.fragment); const res = new RouterStateCandidate(roots[0], url.queryParameters, url.fragment);
const roots = constructActivatedRoute(match, rootNode(existingState)); return new Observable<RouterStateCandidate>(obs => {
const res = new RouterState(roots[0], existingState.queryParams, existingState.fragment);
return new Observable<RouterState>(obs => {
obs.next(res); obs.next(res);
obs.complete(); obs.complete();
}); });
} catch(e) { } catch(e) {
return new Observable<RouterState>(obs => obs.error(e)); return new Observable<RouterStateCandidate>(obs => obs.error(e));
} }
} }
function constructActivatedRoute(match: MatchResult, existingRoute: TreeNode<ActivatedRoute> | null): TreeNode<ActivatedRoute>[] { function constructActivatedRoute(match: MatchResult): TreeNode<ActivatedRouteCandidate>[] {
const activatedRoute = createOrReuseRoute(match, existingRoute); const activatedRoute = createActivatedRouteCandidate(match);
const existingChildren = existingRoute ? existingRoute.children : [];
if (match.leftOverUrl.length > 0) { if (match.leftOverUrl.length > 0) {
const children = recognizeMany(match.children, match.leftOverUrl, existingChildren); const children = recognizeMany(match.children, match.leftOverUrl);
checkOutletNameUniqueness(children); checkOutletNameUniqueness(children);
return [new TreeNode<ActivatedRoute>(activatedRoute, children)]; children.sort((a, b) => {
if (a.value.outlet === PRIMARY_OUTLET) return -1;
if (b.value.outlet === PRIMARY_OUTLET) return 1;
return a.value.outlet.localeCompare(b.value.outlet)
});
return [new TreeNode<ActivatedRouteCandidate>(activatedRoute, children)];
} else { } else {
return [new TreeNode<ActivatedRoute>(activatedRoute, [])]; return [new TreeNode<ActivatedRouteCandidate>(activatedRoute, [])];
} }
} }
function recognizeMany(config: Route[], urls: TreeNode<UrlSegment>[], function recognizeMany(config: Route[], urls: TreeNode<UrlSegment>[]): TreeNode<ActivatedRouteCandidate>[] {
existingRoutes: TreeNode<ActivatedRoute>[]): TreeNode<ActivatedRoute>[] { return flatten(urls.map(url => recognizeOne(config, url)));
return flatten(urls.map(url => recognizeOne(config, url, existingRoutes)));
} }
function createOrReuseRoute(match: MatchResult, existing: TreeNode<ActivatedRoute> | null): ActivatedRoute { function createActivatedRouteCandidate(match: MatchResult): ActivatedRouteCandidate {
if (existing) { return new ActivatedRouteCandidate(match.consumedUrlSegments, match.parameters, match.outlet, match.component, match.route);
const v = existing.value;
if (v.component === match.component && v.outlet === match.outlet) {
(<any>(v.params)).next(match.parameters);
(<any>(v.urlSegments)).next(match.consumedUrlSegments);
return v;
}
}
return new ActivatedRoute(new BehaviorSubject(match.consumedUrlSegments), new BehaviorSubject(match.parameters), match.outlet, match.component);
} }
function recognizeOne(config: Route[], url: TreeNode<UrlSegment>, function recognizeOne(config: Route[], url: TreeNode<UrlSegment>): TreeNode<ActivatedRouteCandidate>[] {
existingRoutes: TreeNode<ActivatedRoute>[]): TreeNode<ActivatedRoute>[] { const m = match(config, url);
let m = match(config, url); const primary = constructActivatedRoute(m);
const secondary = recognizeMany(config, m.secondary);
const routesWithRightOutlet = existingRoutes.filter(r => r.value.outlet == m.outlet);
const routeWithRightOutlet = routesWithRightOutlet.length > 0 ? routesWithRightOutlet[0] : null;
const primary = constructActivatedRoute(m, routeWithRightOutlet);
const secondary = recognizeMany(config, m.secondary, existingRoutes);
const res = primary.concat(secondary); const res = primary.concat(secondary);
checkOutletNameUniqueness(res); checkOutletNameUniqueness(res);
return res; return res;
} }
function checkOutletNameUniqueness(nodes: TreeNode<ActivatedRoute>[]): TreeNode<ActivatedRoute>[] { function checkOutletNameUniqueness(nodes: TreeNode<ActivatedRouteCandidate>[]): TreeNode<ActivatedRouteCandidate>[] {
let names = {}; let names = {};
nodes.forEach(n => { nodes.forEach(n => {
let routeWithSameOutletName = names[n.value.outlet]; let routeWithSameOutletName = names[n.value.outlet];
if (routeWithSameOutletName) { if (routeWithSameOutletName) {
const p = (<any>routeWithSameOutletName.urlSegments).value.map(s => s.toString()).join("/"); const p = routeWithSameOutletName.urlSegments.map(s => s.toString()).join("/");
const c = (<any>n.value.urlSegments).value.map(s => s.toString()).join("/"); const c = n.value.urlSegments.map(s => s.toString()).join("/");
throw new Error(`Two segments cannot have the same outlet name: '${p}' and '${c}'.`); throw new Error(`Two segments cannot have the same outlet name: '${p}' and '${c}'.`);
} }
names[n.value.outlet] = n.value; names[n.value.outlet] = n.value;
@ -110,7 +96,7 @@ function matchIndex(config: Route[], url: TreeNode<UrlSegment>): MatchResult | n
if (r.index) { if (r.index) {
const outlet = r.outlet ? r.outlet : PRIMARY_OUTLET; const outlet = r.outlet ? r.outlet : PRIMARY_OUTLET;
const children = r.children ? r.children : []; const children = r.children ? r.children : [];
return new MatchResult(r.component, children, [], {}, [url], [], outlet); return new MatchResult(r.component, children, [], {}, [url], [], outlet, r);
} }
} }
return null; return null;
@ -129,7 +115,7 @@ function matchWithParts(route: Route, url: TreeNode<UrlSegment>): MatchResult |
u = first(u.children); u = first(u.children);
} }
const last = consumedUrl[consumedUrl.length - 1]; const last = consumedUrl[consumedUrl.length - 1];
return new MatchResult(route.component, [], consumedUrl, last.parameters, [], [], PRIMARY_OUTLET); return new MatchResult(route.component, [], consumedUrl, last.parameters, [], [], PRIMARY_OUTLET, route);
} }
const parts = path.split("/"); const parts = path.split("/");
@ -174,7 +160,7 @@ function matchWithParts(route: Route, url: TreeNode<UrlSegment>): MatchResult |
const outlet = route.outlet ? route.outlet : PRIMARY_OUTLET; const outlet = route.outlet ? route.outlet : PRIMARY_OUTLET;
return new MatchResult(route.component, children, consumedUrlSegments, parameters, lastSegment.children, return new MatchResult(route.component, children, consumedUrlSegments, parameters, lastSegment.children,
secondarySubtrees, outlet); secondarySubtrees, outlet, route);
} }
class MatchResult { class MatchResult {
@ -184,6 +170,7 @@ class MatchResult {
public parameters: {[key: string]: string}, public parameters: {[key: string]: string},
public leftOverUrl: TreeNode<UrlSegment>[], public leftOverUrl: TreeNode<UrlSegment>[],
public secondary: TreeNode<UrlSegment>[], public secondary: TreeNode<UrlSegment>[],
public outlet: string public outlet: string,
public route: Route
) {} ) {}
} }

120
modules/@angular/router/test/recognize.spec.ts
View File

@ -1,18 +1,16 @@
import {DefaultUrlSerializer} from '../src/url_serializer'; import {DefaultUrlSerializer} from '../src/url_serializer';
import {UrlTree} from '../src/url_tree'; import {UrlTree} from '../src/url_tree';
import {Params, PRIMARY_OUTLET} from '../src/shared'; import {Params, PRIMARY_OUTLET} from '../src/shared';
import {createEmptyState, ActivatedRoute} from '../src/router_state'; import {ActivatedRouteCandidate} from '../src/router_state';
import {recognize} from '../src/recognize'; import {recognize} from '../src/recognize';
describe('recognize', () => { describe('recognize', () => {
const empty = () => createEmptyState(RootComponent);
it('should work', (done) => { it('should work', (done) => {
recognize([ recognize(RootComponent, [
{ {
path: 'a', component: ComponentA path: 'a', component: ComponentA
} }
], tree("a"), empty()).forEach(s => { ], tree("a")).forEach(s => {
checkActivatedRoute(s.root, "", {}, RootComponent); checkActivatedRoute(s.root, "", {}, RootComponent);
checkActivatedRoute(s.firstChild(s.root), "a", {}, ComponentA); checkActivatedRoute(s.firstChild(s.root), "a", {}, ComponentA);
done(); done();
@ -20,40 +18,25 @@ describe('recognize', () => {
}); });
it('should handle position args', () => { it('should handle position args', () => {
recognize([ recognize(RootComponent, [
{ {
path: 'a/:id', component: ComponentA, children: [ path: 'a/:id', component: ComponentA, children: [
{ path: 'b/:id', component: ComponentB} { path: 'b/:id', component: ComponentB}
] ]
} }
], tree("a/paramA/b/paramB"), empty()).forEach(s => { ], tree("a/paramA/b/paramB")).forEach(s => {
checkActivatedRoute(s.root, "", {}, RootComponent); checkActivatedRoute(s.root, "", {}, RootComponent);
checkActivatedRoute(s.firstChild(s.root), "a/paramA", {id: 'paramA'}, ComponentA); checkActivatedRoute(s.firstChild(s.root), "a/paramA", {id: 'paramA'}, ComponentA);
checkActivatedRoute(s.firstChild(<any>s.firstChild(s.root)), "b/paramB", {id: 'paramB'}, ComponentB); checkActivatedRoute(s.firstChild(<any>s.firstChild(s.root)), "b/paramB", {id: 'paramB'}, ComponentB);
}); });
}); });
it('should reuse activated routes', () => {
const config = [{path: 'a/:id', component: ComponentA}];
recognize(config, tree("a/paramA"), empty()).forEach(s => {
const n1 = s.firstChild(s.root);
const recorded = [];
n1!.params.forEach(r => recorded.push(r));
recognize(config, tree("a/paramB"), s).forEach(s2 => {
const n2 = s2.firstChild(s2.root);
expect(n1).toBe(n2);
expect(recorded).toEqual([{id: 'paramA'}, {id: 'paramB'}]);
});
});
});
it('should support secondary routes', () => { it('should support secondary routes', () => {
recognize([ recognize(RootComponent, [
{ path: 'a', component: ComponentA }, { path: 'a', component: ComponentA },
{ path: 'b', component: ComponentB, outlet: 'left' }, { path: 'b', component: ComponentB, outlet: 'left' },
{ path: 'c', component: ComponentC, outlet: 'right' } { path: 'c', component: ComponentC, outlet: 'right' }
], tree("a(left:b//right:c)"), empty()).forEach(s => { ], tree("a(left:b//right:c)")).forEach(s => {
const c = s.children(s.root); const c = s.children(s.root);
checkActivatedRoute(c[0], "a", {}, ComponentA); checkActivatedRoute(c[0], "a", {}, ComponentA);
checkActivatedRoute(c[1], "b", {}, ComponentB, 'left'); checkActivatedRoute(c[1], "b", {}, ComponentB, 'left');
@ -62,11 +45,11 @@ describe('recognize', () => {
}); });
it('should use outlet name when matching secondary routes', () => { it('should use outlet name when matching secondary routes', () => {
recognize([ recognize(RootComponent, [
{ path: 'a', component: ComponentA }, { path: 'a', component: ComponentA },
{ path: 'b', component: ComponentB, outlet: 'left' }, { path: 'b', component: ComponentB, outlet: 'left' },
{ path: 'b', component: ComponentC, outlet: 'right' } { path: 'b', component: ComponentC, outlet: 'right' }
], tree("a(right:b)"), empty()).forEach(s => { ], tree("a(right:b)")).forEach(s => {
const c = s.children(s.root); const c = s.children(s.root);
checkActivatedRoute(c[0], "a", {}, ComponentA); checkActivatedRoute(c[0], "a", {}, ComponentA);
checkActivatedRoute(c[1], "b", {}, ComponentC, 'right'); checkActivatedRoute(c[1], "b", {}, ComponentC, 'right');
@ -74,11 +57,11 @@ describe('recognize', () => {
}); });
it('should handle nested secondary routes', () => { it('should handle nested secondary routes', () => {
recognize([ recognize(RootComponent, [
{ path: 'a', component: ComponentA }, { path: 'a', component: ComponentA },
{ path: 'b', component: ComponentB, outlet: 'left' }, { path: 'b', component: ComponentB, outlet: 'left' },
{ path: 'c', component: ComponentC, outlet: 'right' } { path: 'c', component: ComponentC, outlet: 'right' }
], tree("a(left:b(right:c))"), empty()).forEach(s => { ], tree("a(left:b(right:c))")).forEach(s => {
const c = s.children(s.root); const c = s.children(s.root);
checkActivatedRoute(c[0], "a", {}, ComponentA); checkActivatedRoute(c[0], "a", {}, ComponentA);
checkActivatedRoute(c[1], "b", {}, ComponentB, 'left'); checkActivatedRoute(c[1], "b", {}, ComponentB, 'left');
@ -87,27 +70,40 @@ describe('recognize', () => {
}); });
it('should handle non top-level secondary routes', () => { it('should handle non top-level secondary routes', () => {
recognize([ recognize(RootComponent, [
{ path: 'a', component: ComponentA, children: [ { path: 'a', component: ComponentA, children: [
{ path: 'b', component: ComponentB }, { path: 'b', component: ComponentB },
{ path: 'c', component: ComponentC, outlet: 'left' } { path: 'c', component: ComponentC, outlet: 'left' }
] }, ] },
], tree("a/b(left:c))"), empty()).forEach(s => { ], tree("a/b(left:c))")).forEach(s => {
const c = s.children(<any>s.firstChild(s.root)); const c = s.children(<any>s.firstChild(s.root));
checkActivatedRoute(c[0], "b", {}, ComponentB, PRIMARY_OUTLET); checkActivatedRoute(c[0], "b", {}, ComponentB, PRIMARY_OUTLET);
checkActivatedRoute(c[1], "c", {}, ComponentC, 'left'); checkActivatedRoute(c[1], "c", {}, ComponentC, 'left');
}); });
}); });
it('should sort routes by outlet name', () => {
recognize(RootComponent, [
{ path: 'a', component: ComponentA },
{ path: 'c', component: ComponentC, outlet: 'c' },
{ path: 'b', component: ComponentB, outlet: 'b' }
], tree("a(c:c//b:b)")).forEach(s => {
const c = s.children(s.root);
checkActivatedRoute(c[0], "a", {}, ComponentA);
checkActivatedRoute(c[1], "b", {}, ComponentB, 'b');
checkActivatedRoute(c[2], "c", {}, ComponentC, 'c');
});
});
it('should support matrix parameters', () => { it('should support matrix parameters', () => {
recognize([ recognize(RootComponent, [
{ {
path: 'a', component: ComponentA, children: [ path: 'a', component: ComponentA, children: [
{ path: 'b', component: ComponentB }, { path: 'b', component: ComponentB },
{ path: 'c', component: ComponentC, outlet: 'left' } { path: 'c', component: ComponentC, outlet: 'left' }
] ]
} }
], tree("a;a1=11;a2=22/b;b1=111;b2=222(left:c;c1=1111;c2=2222)"), empty()).forEach(s => { ], tree("a;a1=11;a2=22/b;b1=111;b2=222(left:c;c1=1111;c2=2222)")).forEach(s => {
checkActivatedRoute(s.firstChild(s.root), "a", {a1: '11', a2: '22'}, ComponentA); checkActivatedRoute(s.firstChild(s.root), "a", {a1: '11', a2: '22'}, ComponentA);
const c = s.children(<any>s.firstChild(s.root)); const c = s.children(<any>s.firstChild(s.root));
checkActivatedRoute(c[0], "b", {b1: '111', b2: '222'}, ComponentB); checkActivatedRoute(c[0], "b", {b1: '111', b2: '222'}, ComponentB);
@ -117,15 +113,15 @@ describe('recognize', () => {
describe("index", () => { describe("index", () => {
it("should support index routes", () => { it("should support index routes", () => {
recognize([ recognize(RootComponent, [
{index: true, component: ComponentA} {index: true, component: ComponentA}
], tree(""), empty()).forEach(s => { ], tree("")).forEach(s => {
checkActivatedRoute(s.firstChild(s.root), "a", {}, ComponentA); checkActivatedRoute(s.firstChild(s.root), "a", {}, ComponentA);
}); });
}); });
it("should support index routes with children", () => { it("should support index routes with children", () => {
recognize([ recognize(RootComponent, [
{ {
index: true, component: ComponentA, children: [ index: true, component: ComponentA, children: [
{ index: true, component: ComponentB, children: [ { index: true, component: ComponentB, children: [
@ -134,7 +130,7 @@ describe('recognize', () => {
} }
] ]
} }
], tree("c/10"), empty()).forEach(s => { ], tree("c/10")).forEach(s => {
checkActivatedRoute(s.firstChild(s.root), "", {}, ComponentA); checkActivatedRoute(s.firstChild(s.root), "", {}, ComponentA);
checkActivatedRoute(s.firstChild(<any>s.firstChild(s.root)), "", {}, ComponentB); checkActivatedRoute(s.firstChild(<any>s.firstChild(s.root)), "", {}, ComponentB);
checkActivatedRoute( checkActivatedRoute(
@ -145,9 +141,9 @@ describe('recognize', () => {
describe("wildcards", () => { describe("wildcards", () => {
it("should support simple wildcards", () => { it("should support simple wildcards", () => {
recognize([ recognize(RootComponent, [
{path: '**', component: ComponentA} {path: '**', component: ComponentA}
], tree("a/b/c/d;a1=11"), empty()).forEach(s => { ], tree("a/b/c/d;a1=11")).forEach(s => {
checkActivatedRoute(s.firstChild(s.root), "a/b/c/d", {a1:'11'}, ComponentA); checkActivatedRoute(s.firstChild(s.root), "a/b/c/d", {a1:'11'}, ComponentA);
}); });
}); });
@ -156,16 +152,8 @@ describe('recognize', () => {
describe("query parameters", () => { describe("query parameters", () => {
it("should support query params", () => { it("should support query params", () => {
const config = [{path: 'a', component: ComponentA}]; const config = [{path: 'a', component: ComponentA}];
recognize(config, tree("a?q=11"), empty()).forEach(s => { recognize(RootComponent, config, tree("a?q=11")).forEach(s => {
const q1 = s.queryParams; expect(s.queryParams).toEqual({q: '11'});
const recorded = [];
q1!.forEach(r => recorded.push(r));
recognize(config, tree("a?q=22"), s).forEach(s2 => {
const q2 = s2.queryParams;
expect(q1).toBe(q2);
expect(recorded).toEqual([{q: '11'}, {q: '22'}]);
});
}); });
}); });
}); });
@ -173,62 +161,48 @@ describe('recognize', () => {
describe("fragment", () => { describe("fragment", () => {
it("should support fragment", () => { it("should support fragment", () => {
const config = [{path: 'a', component: ComponentA}]; const config = [{path: 'a', component: ComponentA}];
recognize(config, tree("a#f1"), empty()).forEach(s => { recognize(RootComponent, config, tree("a#f1")).forEach(s => {
const f1 = s.fragment; expect(s.fragment).toEqual("f1");
const recorded = [];
f1!.forEach(r => recorded.push(r));
recognize(config, tree("a#f2"), s).forEach(s2 => {
const f2 = s2.fragment;
expect(f1).toBe(f2);
expect(recorded).toEqual(["f1", "f2"]);
});
}); });
}); });
}); });
describe("error handling", () => { describe("error handling", () => {
it('should error when two routes with the same outlet name got matched', () => { it('should error when two routes with the same outlet name got matched', () => {
recognize([ recognize(RootComponent, [
{ path: 'a', component: ComponentA }, { path: 'a', component: ComponentA },
{ path: 'b', component: ComponentB, outlet: 'aux' }, { path: 'b', component: ComponentB, outlet: 'aux' },
{ path: 'c', component: ComponentC, outlet: 'aux' } { path: 'c', component: ComponentC, outlet: 'aux' }
], tree("a(aux:b//aux:c)"), empty()).subscribe(null, s => { ], tree("a(aux:b//aux:c)")).subscribe(null, s => {
expect(s.toString()).toContain("Two segments cannot have the same outlet name: 'aux:b' and 'aux:c'."); expect(s.toString()).toContain("Two segments cannot have the same outlet name: 'aux:b' and 'aux:c'.");
}); });
}); });
it("should error when no matching routes", () => { it("should error when no matching routes", () => {
recognize([ recognize(RootComponent, [
{ path: 'a', component: ComponentA } { path: 'a', component: ComponentA }
], tree("invalid"), empty()).subscribe(null, s => { ], tree("invalid")).subscribe(null, s => {
expect(s.toString()).toContain("Cannot match any routes"); expect(s.toString()).toContain("Cannot match any routes");
}); });
}); });
it("should error when no matching routes (too short)", () => { it("should error when no matching routes (too short)", () => {
recognize([ recognize(RootComponent, [
{ path: 'a/:id', component: ComponentA } { path: 'a/:id', component: ComponentA }
], tree("a"), empty()).subscribe(null, s => { ], tree("a")).subscribe(null, s => {
expect(s.toString()).toContain("Cannot match any routes"); expect(s.toString()).toContain("Cannot match any routes");
}); });
}); });
}); });
}); });
function checkActivatedRoute(actual: ActivatedRoute | null, url: string, params: Params, cmp: Function, outlet: string = PRIMARY_OUTLET):void { function checkActivatedRoute(actual: ActivatedRouteCandidate | null, url: string, params: Params, cmp: Function, outlet: string = PRIMARY_OUTLET):void {
if (actual === null) { if (actual === null) {
expect(actual).toBeDefined(); expect(actual).toBeDefined();
} else { } else {
let actualUrl; expect(actual.urlSegments.map(s => s.path).join("/")).toEqual(url);
actual.urlSegments.forEach(segments => actualUrl = segments.map(s => s.path).join("/")); expect(actual.params).toEqual(params);
expect(actualUrl).toEqual(url);
let actualParams;
actual.params.forEach(s => actualParams = s);
expect(actualParams).toEqual(params);
expect(actual.component).toBe(cmp); expect(actual.component).toBe(cmp);
expect(actual.outlet).toEqual(outlet); expect(actual.outlet).toEqual(outlet);
} }
} }