dojo
diff --git a/‎examples/routing/ambigious-matches.ts
Copy file name to clipboard
+19-14Lines changed: 19 additions & 14 deletions b/‎examples/routing/ambigious-matches.ts
Copy file name to clipboard
+19-14Lines changed: 19 additions & 14 deletions
diff --git a/‎examples/routing/basic.ts
Copy file name to clipboard
+28-20Lines changed: 28 additions & 20 deletions b/‎examples/routing/basic.ts
Copy file name to clipboard
+28-20Lines changed: 28 additions & 20 deletions
diff --git a/‎examples/routing/main.ts
Copy file name to clipboard
+22-6Lines changed: 22 additions & 6 deletions b/‎examples/routing/main.ts
Copy file name to clipboard
+22-6Lines changed: 22 additions & 6 deletions
diff --git a/‎examples/routing/url-parameters.ts
Copy file name to clipboard
+7-10Lines changed: 7 additions & 10 deletions b/‎examples/routing/url-parameters.ts
Copy file name to clipboard
+7-10Lines changed: 7 additions & 10 deletions
diff --git a/‎src/routing/Outlet.ts
Copy file name to clipboard
+70-73Lines changed: 70 additions & 73 deletions b/‎src/routing/Outlet.ts
Copy file name to clipboard
+70-73Lines changed: 70 additions & 73 deletions
@@ -1,9 +1,9 @@
 import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
 import { v, w } from '@dojo/framework/widget-core/d';
-import { MapParamsOptions } from '@dojo/framework/routing/interfaces';
 
 import { Link } from '@dojo/framework/routing/Link';
 import { Outlet } from '@dojo/framework/routing/Outlet';
+import { MatchDetails } from '@dojo/framework/routing/interfaces';
 
 export interface ChildProperties {
 	name: string;
@@ -31,14 +31,6 @@ export class User extends WidgetBase<UserProperties> {
 	}
 }
 
-export const AboutOutlet = Outlet(About, 'about-us');
-export const CompanyOutlet = Outlet(Company, 'company');
-export const UserOutlet = Outlet(User, 'user', {
-	mapParams: ({ params }: MapParamsOptions) => {
-		return { name: params.user };
-	}
-});
-
 export class App extends WidgetBase {
 	protected render() {
 		return v('div', [
@@ -48,9 +40,24 @@ export class App extends WidgetBase {
 				v('li', [w(Link, { key: '3', to: 'user', params: { user: 'kim' } }, ['Kim (dynamic)'])]),
 				v('li', [w(Link, { key: '4', to: 'user', params: { user: 'chris' } }, ['Chris (dynamic)'])])
 			]),
-			w(AboutOutlet, {}),
-			w(CompanyOutlet, {}),
-			w(UserOutlet, {})
+			w(Outlet, {
+				outlet: 'about-us',
+				renderer: () => {
+					return w(About, {});
+				}
+			}),
+			w(Outlet, {
+				outlet: 'company',
+				renderer: () => {
+					return w(Company, {});
+				}
+			}),
+			w(Outlet, {
+				outlet: 'user',
+				renderer: ({ params }: MatchDetails) => {
+					return w(User, { name: params.user });
+				}
+			})
 		]);
 	}
 }
@@ -73,5 +80,3 @@ export const AmbiguousMatchesRouteConfig = {
 		}
 	]
 };
-
-export const AmbiguousMatchesOutlet = Outlet(App, 'ambiguous-matches');
 
@@ -3,7 +3,7 @@ import { v, w } from '@dojo/framework/widget-core/d';
 
 import { Outlet } from '@dojo/framework/routing/Outlet';
 import { Link } from '@dojo/framework/routing/Link';
-import { MapParamsOptions } from '@dojo/framework/routing/interfaces';
+import { MatchDetails } from '@dojo/framework/routing/interfaces';
 
 export interface ChildProperties {
 	name: string;
@@ -39,7 +39,15 @@ export class Topics extends WidgetBase<TopicsProperties> {
 				v('li', [w(Link, { key: 'props', to: 'topic', params: { topic: 'props-v-state' } }, ['Props v State'])])
 			]),
 			showHeading ? v('h3', ['Please select a topic.']) : null,
-			w(TopicOutlet, {})
+			w(Outlet, {
+				outlet: 'topic',
+				renderer({ params, type }: MatchDetails) {
+					if (type === 'error') {
+						return w(ErrorWidget, {});
+					}
+					return w(Topic, { topic: params.topic });
+				}
+			})
 		]);
 	}
 }
@@ -60,19 +68,6 @@ class ErrorWidget extends WidgetBase {
 	}
 }
 
-export const AboutOutlet = Outlet(About, 'about');
-export const HomeOutlet = Outlet({ index: Home }, 'home');
-export const TopicsOutlet = Outlet(Topics, 'topics', {
-	mapParams: ({ type }: MapParamsOptions) => {
-		return { showHeading: type === 'index' };
-	}
-});
-export const TopicOutlet = Outlet({ main: Topic, error: ErrorWidget }, 'topic', {
-	mapParams: ({ params }) => {
-		return { topic: params.topic };
-	}
-});
-
 export class App extends WidgetBase {
 	protected render() {
 		return v('div', [
@@ -81,9 +76,24 @@ export class App extends WidgetBase {
 				v('li', [w(Link, { key: 'about', to: 'about' }, ['About'])]),
 				v('li', [w(Link, { key: 'topics', to: 'topics' }, ['Topics'])])
 			]),
-			w(AboutOutlet, {}),
-			w(HomeOutlet, {}),
-			w(TopicsOutlet, {})
+			w(Outlet, {
+				outlet: 'about',
+				renderer() {
+					return w(About, {});
+				}
+			}),
+			w(Outlet, {
+				outlet: 'home',
+				renderer() {
+					return w(Home, {});
+				}
+			}),
+			w(Outlet, {
+				outlet: 'topics',
+				renderer({ type }: MatchDetails) {
+					return w(Topics, { showHeading: type === 'index' });
+				}
+			})
 		]);
 	}
 }
@@ -112,5 +122,3 @@ export const BasicAppRouteConfig = {
 		}
 	]
 };
-
-export const BasicAppOutlet = Outlet(App, 'basic');
 
@@ -6,9 +6,10 @@ import { Registry } from '@dojo/framework/widget-core/Registry';
 import { RouteConfig } from '@dojo/framework/routing/interfaces';
 import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector';
 import { Link } from '@dojo/framework/routing/Link';
-import { BasicAppOutlet, BasicAppRouteConfig } from './basic';
-import { UrlParametersAppOutlet, UrlParametersRouteConfig } from './url-parameters';
-import { AmbiguousMatchesOutlet, AmbiguousMatchesRouteConfig } from './ambigious-matches';
+import { App as BasicApp, BasicAppRouteConfig } from './basic';
+import { App as UrlParametersApp, UrlParametersRouteConfig } from './url-parameters';
+import { App as AmbiguousMatchesApp, AmbiguousMatchesRouteConfig } from './ambigious-matches';
+import { Outlet } from '@dojo/framework/routing/Outlet';
 
 const applicationRoutes: RouteConfig[] = [BasicAppRouteConfig, UrlParametersRouteConfig, AmbiguousMatchesRouteConfig];
 
@@ -76,9 +77,24 @@ class App extends WidgetBase {
 				])
 			]),
 			v('div', { styles: contentStyles }, [
-				w(BasicAppOutlet, {}),
-				w(UrlParametersAppOutlet, {}),
-				w(AmbiguousMatchesOutlet, {})
+				w(Outlet, {
+					outlet: 'ambiguous-matches',
+					renderer() {
+						return w(AmbiguousMatchesApp, {});
+					}
+				}),
+				w(Outlet, {
+					outlet: 'basic',
+					renderer() {
+						return w(BasicApp, {});
+					}
+				}),
+				w(Outlet, {
+					outlet: 'url-parameters',
+					renderer() {
+						return w(UrlParametersApp, {});
+					}
+				})
 			])
 		]);
 	}
 
@@ -1,9 +1,9 @@
 import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
 import { v, w } from '@dojo/framework/widget-core/d';
-import { MapParamsOptions } from '@dojo/framework/routing/interfaces';
 
 import { Link } from '@dojo/framework/routing/Link';
 import { Outlet } from '@dojo/framework/routing/Outlet';
+import { MatchDetails } from '@dojo/framework/routing/interfaces';
 
 export interface ChildProperties {
 	name: string;
@@ -15,12 +15,6 @@ export class Child extends WidgetBase<ChildProperties> {
 	}
 }
 
-export const ChildOutlet = Outlet(Child, 'child', {
-	mapParams: ({ params }: MapParamsOptions) => {
-		return { name: params.id };
-	}
-});
-
 export class App extends WidgetBase {
 	protected render() {
 		return v('div', [
@@ -31,7 +25,12 @@ export class App extends WidgetBase {
 				v('li', [w(Link, { key: '3', to: 'child', params: { id: 'yahoo' } }, ['Yahoo'])]),
 				v('li', [w(Link, { key: '4', to: 'child', params: { id: 'modus-create' } }, ['Modus Create'])])
 			]),
-			w(ChildOutlet, {})
+			w(Outlet, {
+				outlet: 'child',
+				renderer: (details: MatchDetails) => {
+					return w(Child, { name: details.params.id });
+				}
+			})
 		]);
 	}
 }
@@ -46,5 +45,3 @@ export const UrlParametersRouteConfig = {
 		}
 	]
 };
-
-export const UrlParametersAppOutlet = Outlet(App, 'url-parameters');
@@ -1,100 +1,97 @@
-import { DNode, WidgetBaseInterface } from '../widget-core/interfaces';
+import { DNode } from '../widget-core/interfaces';
 import { WidgetBase } from '../widget-core/WidgetBase';
-import { w } from '../widget-core/d';
-import { inject } from '../widget-core/decorators/inject';
 import { alwaysRender } from '../widget-core/decorators/alwaysRender';
-import { OnEnter, Component, OutletOptions, OutletComponents, Outlet, Params, OutletContext } from './interfaces';
+import { MatchDetails, OnExit, OutletContext, OnEnter, Params } from './interfaces';
 import { Router } from './Router';
+import { diffProperty } from '../widget-core/decorators/diffProperty';
+import { Handle } from '../core/Destroyable';
 
-export function isComponent<W extends WidgetBaseInterface>(value: any): value is Component<W> {
-	return Boolean(value && (typeof value === 'string' || typeof value === 'function' || typeof value === 'symbol'));
+export interface OutletProperties {
+	renderer: (matchDetails: MatchDetails) => DNode | DNode[];
+	id: string;
+	routerKey?: string;
 }
 
-export function getProperties(router: Router, properties: any) {
-	return { router };
-}
+@alwaysRender()
+export class Outlet extends WidgetBase<OutletProperties> {
+	private _handle: Handle | undefined;
+	private _matched = false;
+	private _matchedParams: Params = {};
+	private _onExit?: OnExit;
 
-export function Outlet<W extends WidgetBaseInterface, F extends WidgetBaseInterface, E extends WidgetBaseInterface>(
-	outletComponents: Component<W> | OutletComponents<W, F, E>,
-	outlet: string,
-	options: OutletOptions = {}
-): Outlet<W, F, E> {
-	const indexComponent = isComponent(outletComponents) ? undefined : outletComponents.index;
-	const mainComponent = isComponent(outletComponents) ? outletComponents : outletComponents.main;
-	const errorComponent = isComponent(outletComponents) ? undefined : outletComponents.error;
-	const { mapParams, key = 'router' } = options;
+	@diffProperty('routerKey')
+	protected onRouterKeyChange(current: OutletProperties, next: OutletProperties) {
+		const { routerKey = 'router' } = next;
+		const item = this.registry.getInjector<Router>(routerKey);
+		if (this._handle) {
+			this._handle.destroy();
+			this._handle = undefined;
+		}
+		if (item) {
+			this._handle = item.invalidator.on('invalidate', () => {
+				this.invalidate();
+			});
+			this.own(this._handle);
+		}
+	}
 
-	@inject({ name: key, getProperties })
-	@alwaysRender()
-	class OutletComponent extends WidgetBase<Partial<W['properties']> & { router: Router }, null> {
-		private _matched = false;
-		private _matchedParams: Params = {};
-		private _onExit?: () => void;
+	protected onDetach() {
+		this._onExit && this._onExit();
+	}
 
-		private _hasRouteChanged(params: Params): boolean {
-			if (!this._matched) {
-				return true;
-			}
-			const newParamKeys = Object.keys(params);
-			for (let i = 0; i < newParamKeys.length; i++) {
-				const key = newParamKeys[i];
-				if (this._matchedParams[key] !== params[key]) {
-					return true;
-				}
-			}
-			return false;
+	protected onAttach() {
+		if (!this._handle) {
+			this.onRouterKeyChange(this.properties, this.properties);
 		}
+	}
 
-		private _onEnter(outletContext: OutletContext, onEnterCallback?: OnEnter) {
-			const { params, type } = outletContext;
-			if (this._hasRouteChanged(params)) {
-				onEnterCallback && onEnterCallback(params, type);
-				this._matched = true;
-				this._matchedParams = params;
+	private _hasRouteChanged(params: Params): boolean {
+		if (!this._matched) {
+			return true;
+		}
+		const newParamKeys = Object.keys(params);
+		for (let i = 0; i < newParamKeys.length; i++) {
+			const key = newParamKeys[i];
+			if (this._matchedParams[key] !== params[key]) {
+				return true;
 			}
 		}
+		return false;
+	}
 
-		protected onDetach() {
-			if (this._matched) {
-				this._onExit && this._onExit();
-				this._matched = false;
-			}
+	private _onEnter(outletContext: OutletContext, onEnterCallback?: OnEnter) {
+		const { params, type } = outletContext;
+		if (this._hasRouteChanged(params)) {
+			onEnterCallback && onEnterCallback(params, type);
+			this._matched = true;
+			this._matchedParams = params;
 		}
+	}
 
-		protected render(): DNode {
-			let { router, ...properties } = this.properties;
+	protected render(): DNode | DNode[] {
+		const { renderer, id, routerKey = 'router' } = this.properties;
+		const item = this.registry.getInjector<Router>(routerKey);
 
-			const outletContext = router.getOutlet(outlet);
+		if (item) {
+			const router = item.injector();
+			const outletContext = router.getOutlet(id);
 			if (outletContext) {
-				const { queryParams, params, type, onEnter, onExit } = outletContext;
+				const { queryParams, params, type, onEnter, onExit, isError, isExact } = outletContext;
 				this._onExit = onExit;
-				if (mapParams) {
-					properties = { ...properties, ...mapParams({ queryParams, params, type, router }) };
-				}
-
-				if (type === 'index' && indexComponent) {
-					this._onEnter(outletContext, onEnter);
-					return w(indexComponent, properties, this.children);
-				} else if (type === 'error' && errorComponent) {
+				const result = renderer({ queryParams, params, type, isError, isExact, router });
+				if (result) {
 					this._onEnter(outletContext, onEnter);
-					return w(errorComponent, properties, this.children);
-				} else if (type === 'error' && indexComponent) {
-					this._onEnter(outletContext, onEnter);
-					return w(indexComponent, properties, this.children);
-				} else if (type !== 'error' && mainComponent) {
-					this._onEnter(outletContext, onEnter);
-					return w(mainComponent, properties, this.children);
+					return result;
 				}
 			}
-
-			if (this._matched) {
-				this._onExit && this._onExit();
-				this._matched = false;
-			}
-			return null;
 		}
+		if (this._matched) {
+			this._onExit && this._onExit();
+			this._onExit = undefined;
+			this._matched = false;
+		}
+		return null;
 	}
-	return OutletComponent;
 }
 
 export default Outlet;