Skip to content

Commit d35c109

Browse files
vsavkinvsavkin
committed
feat(router): update recognize to support aux routes
1 parent fad3b64 commit d35c109

File tree

3 files changed

+186
-43
lines changed

3 files changed

+186
-43
lines changed

‎modules/angular2/src/alt_router/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const DEFAULT_OUTLET_NAME = "__DEFAULT";

‎modules/angular2/src/alt_router/recognize.ts‎

Lines changed: 84 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,130 @@
1-
import {RouteSegment, UrlSegment, Tree} from './segments';
1+
import {RouteSegment, UrlSegment, Tree, TreeNode, rootNode} from './segments';
22
import {RoutesMetadata, RouteMetadata} from './metadata/metadata';
3-
import {Type, isPresent, stringify} from 'angular2/src/facade/lang';
3+
import {Type, isBlank, isPresent, stringify} from 'angular2/src/facade/lang';
4+
import {ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
45
import {PromiseWrapper} from 'angular2/src/facade/promise';
56
import {BaseException} from 'angular2/src/facade/exceptions';
67
import {ComponentResolver} from 'angular2/core';
8+
import {DEFAULT_OUTLET_NAME} from './constants';
79
import {reflector} from 'angular2/src/core/reflection/reflection';
810

911
export function recognize(componentResolver: ComponentResolver, type: Type,
1012
url: Tree<UrlSegment>): Promise<Tree<RouteSegment>> {
11-
return _recognize(componentResolver, type, url, url.root)
12-
.then(nodes => new Tree<RouteSegment>(nodes));
13+
return componentResolver.resolveComponent(type).then(factory => {
14+
let segment =
15+
new RouteSegment([url.root], url.root.parameters, DEFAULT_OUTLET_NAME, type, factory);
16+
return _recognizeMany(componentResolver, type, rootNode(url).children)
17+
.then(children => new Tree<RouteSegment>(new TreeNode<RouteSegment>(segment, children)));
18+
});
1319
}
1420

15-
function _recognize(componentResolver: ComponentResolver, type: Type, url: Tree<UrlSegment>,
16-
current: UrlSegment): Promise<RouteSegment[]> {
17-
let metadata = _readMetadata(type); // should read from the factory instead
21+
function _recognize(componentResolver: ComponentResolver, parentType: Type,
22+
url: TreeNode<UrlSegment>): Promise<TreeNode<RouteSegment>[]> {
23+
let metadata = _readMetadata(parentType); // should read from the factory instead
1824

19-
let matched;
25+
let match;
2026
try {
21-
matched = _match(metadata, url, current);
27+
match = _match(metadata, url);
2228
} catch (e) {
2329
return PromiseWrapper.reject(e, null);
2430
}
2531

32+
let main = _constructSegment(componentResolver, match);
33+
let aux =
34+
_recognizeMany(componentResolver, parentType, match.aux).then(_checkOutletNameUniqueness);
35+
return PromiseWrapper.all([main, aux]).then(ListWrapper.flatten);
36+
}
37+
38+
function _recognizeMany(componentResolver: ComponentResolver, parentType: Type,
39+
urls: TreeNode<UrlSegment>[]): Promise<TreeNode<RouteSegment>[]> {
40+
let recognized = urls.map(u => _recognize(componentResolver, parentType, u));
41+
return PromiseWrapper.all(recognized).then(ListWrapper.flatten);
42+
}
43+
44+
function _constructSegment(componentResolver: ComponentResolver,
45+
matched: _MatchResult): Promise<TreeNode<RouteSegment>[]> {
2646
return componentResolver.resolveComponent(matched.route.component)
2747
.then(factory => {
28-
let segment = new RouteSegment(matched.consumedUrlSegments, matched.parameters, "",
48+
let segment = new RouteSegment(matched.consumedUrlSegments, matched.parameters,
49+
matched.consumedUrlSegments[0].outlet,
2950
matched.route.component, factory);
3051

31-
if (isPresent(matched.leftOver)) {
32-
return _recognize(componentResolver, matched.route.component, url, matched.leftOver)
33-
.then(children => [segment].concat(children));
52+
if (isPresent(matched.leftOverUrl)) {
53+
return _recognize(componentResolver, matched.route.component, matched.leftOverUrl)
54+
.then(children => [new TreeNode<RouteSegment>(segment, children)]);
3455
} else {
35-
return [segment];
56+
return [new TreeNode<RouteSegment>(segment, [])];
3657
}
3758
});
3859
}
3960

40-
function _match(metadata: RoutesMetadata, url: Tree<UrlSegment>,
41-
current: UrlSegment): _MatchingResult {
61+
function _match(metadata: RoutesMetadata, url: TreeNode<UrlSegment>): _MatchResult {
4262
for (let r of metadata.routes) {
43-
let matchingResult = _matchWithParts(r, url, current);
63+
let matchingResult = _matchWithParts(r, url);
4464
if (isPresent(matchingResult)) {
4565
return matchingResult;
4666
}
4767
}
4868
throw new BaseException("Cannot match any routes");
4969
}
5070

51-
function _matchWithParts(route: RouteMetadata, url: Tree<UrlSegment>,
52-
current: UrlSegment): _MatchingResult {
71+
function _matchWithParts(route: RouteMetadata, url: TreeNode<UrlSegment>): _MatchResult {
5372
let parts = route.path.split("/");
54-
let parameters = {};
73+
let positionalParams = {};
5574
let consumedUrlSegments = [];
5675

57-
let u = current;
76+
let lastParent: TreeNode<UrlSegment> = null;
77+
let lastSegment: TreeNode<UrlSegment> = null;
78+
79+
let current = url;
5880
for (let i = 0; i < parts.length; ++i) {
59-
consumedUrlSegments.push(u);
6081
let p = parts[i];
61-
if (p.startsWith(":")) {
62-
let segment = u.segment;
63-
parameters[p.substring(1)] = segment;
64-
} else if (p != u.segment) {
65-
return null;
82+
let isLastSegment = i === parts.length - 1;
83+
let isLastParent = i === parts.length - 2;
84+
let isPosParam = p.startsWith(":");
85+
86+
if (isBlank(current)) return null;
87+
if (!isPosParam && p != current.value.segment) return null;
88+
if (isLastSegment) {
89+
lastSegment = current;
6690
}
67-
u = url.firstChild(u);
91+
if (isLastParent) {
92+
lastParent = current;
93+
}
94+
95+
if (isPosParam) {
96+
positionalParams[p.substring(1)] = current.value.segment;
97+
}
98+
99+
consumedUrlSegments.push(current.value);
100+
101+
current = ListWrapper.first(current.children);
68102
}
69-
return new _MatchingResult(route, consumedUrlSegments, parameters, u);
103+
104+
let parameters = <{[key: string]: string}>StringMapWrapper.merge(lastSegment.value.parameters,
105+
positionalParams);
106+
let axuUrlSubtrees = isPresent(lastParent) ? lastParent.children.slice(1) : [];
107+
return new _MatchResult(route, consumedUrlSegments, parameters, current, axuUrlSubtrees);
108+
}
109+
110+
function _checkOutletNameUniqueness(nodes: TreeNode<RouteSegment>[]): TreeNode<RouteSegment>[] {
111+
let names = {};
112+
nodes.forEach(n => {
113+
let segmentWithSameOutletName = names[n.value.outlet];
114+
if (isPresent(segmentWithSameOutletName)) {
115+
let p = segmentWithSameOutletName.stringifiedUrlSegments;
116+
let c = n.value.stringifiedUrlSegments;
117+
throw new BaseException(`Two segments cannot have the same outlet name: '${p}' and '${c}'.`);
118+
}
119+
names[n.value.outlet] = n.value;
120+
});
121+
return nodes;
70122
}
71123

72-
class _MatchingResult {
124+
class _MatchResult {
73125
constructor(public route: RouteMetadata, public consumedUrlSegments: UrlSegment[],
74-
public parameters: {[key: string]: string}, public leftOver: UrlSegment) {}
126+
public parameters: {[key: string]: string}, public leftOverUrl: TreeNode<UrlSegment>,
127+
public aux: TreeNode<UrlSegment>[]) {}
75128
}
76129

77130
function _readMetadata(componentType: Type) {

‎modules/angular2/test/alt_router/recognize_spec.ts‎

Lines changed: 101 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,111 @@ import {recognize} from 'angular2/src/alt_router/recognize';
1919
import {Routes, Route} from 'angular2/alt_router';
2020
import {provide, Component, ComponentResolver} from 'angular2/core';
2121
import {UrlSegment, Tree} from 'angular2/src/alt_router/segments';
22+
import {DefaultRouterUrlParser} from 'angular2/src/alt_router/router_url_parser';
23+
import {DEFAULT_OUTLET_NAME} from 'angular2/src/alt_router/constants';
2224

2325
export function main() {
2426
describe('recognize', () => {
2527
it('should handle position args',
2628
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
27-
recognize(resolver, ComponentA, tree(["b", "paramB", "c", "paramC"]))
29+
recognize(resolver, ComponentA, tree("b/paramB/c/paramC/d"))
2830
.then(r => {
29-
let b = r.root;
31+
let a = r.root;
32+
expect(stringifyUrl(a.urlSegments)).toEqual([""]);
33+
expect(a.type).toBe(ComponentA);
34+
35+
let b = r.firstChild(r.root);
3036
expect(stringifyUrl(b.urlSegments)).toEqual(["b", "paramB"]);
3137
expect(b.type).toBe(ComponentB);
3238

33-
let c = r.firstChild(r.root);
39+
let c = r.firstChild(r.firstChild(r.root));
3440
expect(stringifyUrl(c.urlSegments)).toEqual(["c", "paramC"]);
3541
expect(c.type).toBe(ComponentC);
3642

43+
let d = r.firstChild(r.firstChild(r.firstChild(r.root)));
44+
expect(stringifyUrl(d.urlSegments)).toEqual(["d"]);
45+
expect(d.type).toBe(ComponentD);
46+
47+
async.done();
48+
});
49+
}));
50+
51+
it('should handle aux routes',
52+
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
53+
recognize(resolver, ComponentA, tree("b/paramB(/d//right:d)"))
54+
.then(r => {
55+
let c = r.children(r.root);
56+
expect(stringifyUrl(c[0].urlSegments)).toEqual(["b", "paramB"]);
57+
expect(c[0].outlet).toEqual(DEFAULT_OUTLET_NAME);
58+
expect(c[0].type).toBe(ComponentB);
59+
60+
expect(stringifyUrl(c[1].urlSegments)).toEqual(["d"]);
61+
expect(c[1].outlet).toEqual("aux");
62+
expect(c[1].type).toBe(ComponentD);
63+
64+
expect(stringifyUrl(c[2].urlSegments)).toEqual(["d"]);
65+
expect(c[2].outlet).toEqual("right");
66+
expect(c[2].type).toBe(ComponentD);
67+
68+
async.done();
69+
});
70+
}));
71+
72+
it("should error when two segments with the same outlet name",
73+
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
74+
recognize(resolver, ComponentA, tree("b/paramB(right:d//right:e)"))
75+
.catch(e => {
76+
expect(e.message).toEqual(
77+
"Two segments cannot have the same outlet name: 'right:d' and 'right:e'.");
78+
async.done();
79+
});
80+
}));
81+
82+
it('should handle nested aux routes',
83+
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
84+
recognize(resolver, ComponentA, tree("b/paramB(/d(right:e))"))
85+
.then(r => {
86+
let c = r.children(r.root);
87+
expect(stringifyUrl(c[0].urlSegments)).toEqual(["b", "paramB"]);
88+
expect(c[0].outlet).toEqual(DEFAULT_OUTLET_NAME);
89+
expect(c[0].type).toBe(ComponentB);
90+
91+
expect(stringifyUrl(c[1].urlSegments)).toEqual(["d"]);
92+
expect(c[1].outlet).toEqual("aux");
93+
expect(c[1].type).toBe(ComponentD);
94+
95+
expect(stringifyUrl(c[2].urlSegments)).toEqual(["e"]);
96+
expect(c[2].outlet).toEqual("right");
97+
expect(c[2].type).toBe(ComponentE);
98+
99+
async.done();
100+
});
101+
}));
102+
103+
it('should handle matrix parameters',
104+
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
105+
recognize(resolver, ComponentA, tree("b/paramB;b1=1;b2=2(/d;d1=1;d2=2)"))
106+
.then(r => {
107+
let c = r.children(r.root);
108+
expect(c[0].parameters).toEqual({'b': 'paramB', 'b1': '1', 'b2': '2'});
109+
expect(c[1].parameters).toEqual({'d1': '1', 'd2': '2'});
110+
37111
async.done();
38112
});
39113
}));
40114

41115
it('should error when no matching routes',
42116
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
43-
recognize(resolver, ComponentA, tree(["invalid"]))
117+
recognize(resolver, ComponentA, tree("invalid"))
118+
.catch(e => {
119+
expect(e.message).toEqual("Cannot match any routes");
120+
async.done();
121+
});
122+
}));
123+
124+
it('should handle no matching routes (too short)',
125+
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
126+
recognize(resolver, ComponentA, tree("b"))
44127
.catch(e => {
45128
expect(e.message).toEqual("Cannot match any routes");
46129
async.done();
@@ -49,7 +132,7 @@ export function main() {
49132

50133
it("should error when a component doesn't have @Routes",
51134
inject([AsyncTestCompleter, ComponentResolver], (async, resolver) => {
52-
recognize(resolver, ComponentA, tree(["d", "invalid"]))
135+
recognize(resolver, ComponentA, tree("d/invalid"))
53136
.catch(e => {
54137
expect(e.message)
55138
.toEqual("Component 'ComponentD' does not have route configuration");
@@ -59,22 +142,27 @@ export function main() {
59142
});
60143
}
61144

62-
function tree(nodes: string[]) {
63-
return new Tree<UrlSegment>(nodes.map(v => new UrlSegment(v, {}, "")));
145+
function tree(url: string): Tree<UrlSegment> {
146+
return new DefaultRouterUrlParser().parse(url);
64147
}
65148

66149
function stringifyUrl(segments: UrlSegment[]): string[] {
67150
return segments.map(s => s.segment);
68151
}
69152

70-
@Component({selector: 'c', template: 't'})
71-
class ComponentC {
72-
}
73-
74153
@Component({selector: 'd', template: 't'})
75154
class ComponentD {
76155
}
77156

157+
@Component({selector: 'e', template: 't'})
158+
class ComponentE {
159+
}
160+
161+
@Component({selector: 'c', template: 't'})
162+
@Routes([new Route({path: "d", component: ComponentD})])
163+
class ComponentC {
164+
}
165+
78166
@Component({selector: 'b', template: 't'})
79167
@Routes([new Route({path: "c/:c", component: ComponentC})])
80168
class ComponentB {
@@ -83,7 +171,8 @@ class ComponentB {
83171
@Component({selector: 'a', template: 't'})
84172
@Routes([
85173
new Route({path: "b/:b", component: ComponentB}),
86-
new Route({path: "d", component: ComponentD})
174+
new Route({path: "d", component: ComponentD}),
175+
new Route({path: "e", component: ComponentE})
87176
])
88177
class ComponentA {
89178
}

0 commit comments

Comments
 (0)