feat(routerify): Add routedComponent API (#218)

Author: jvanbruegge

README.md

@@ -34,21 +34,13 @@ import {makeHistoryDriver} from '@cycle/history';
 import switchPath from 'switch-path';
 
 function main(sources) {
-  const match$ = sources.router.define({
+  const pageSinks$ = sources.router.routedComponent({
     '/': HomeComponent,
     '/other': OtherComponent
-  });
-  
-  const page$ = match$.map(({path, value}) => {
-    return value(Object.assign({}, sources, {
-      router: sources.router.path(path) // notice use of 'router' source name, 
-                                        // which proxies raw 'history' source with 
-                                        // additional functionality
-    }));
-  });
+  })(sources);
 
   return {
-    DOM: page$.map(c => c.DOM).flatten(),
+    DOM: pageSinks$.map(c => c.DOM).flatten(),
     router: xs.of('/other') // Notice use of 'router' sink name, 
                             // which proxies the original 'history' sink
   };

src/RouterSource.ts

@@ -25,7 +25,8 @@ export class RouterSource {
         private _history$: any,
         private _namespace: Pathname[],
         private _createHref: (path: LocationDescriptorObject) => Pathname,
-        private _routeMatcher: RouteMatcher
+        private _routeMatcher: RouteMatcher,
+        private _name: string
     ) {}
 
     history$ = adapt(this._history$);
@@ -45,19 +46,20 @@ export class RouterSource {
             scopedHistory$,
             scopedNamespace,
             createHref,
-            this._routeMatcher
+            this._routeMatcher,
+            this._name
         );
     }
 
-    define(
+    private _define(
         routes: RouteDefinitionsMap | RouteDefinitionsArray,
         routeMatcher?: RouteMatcher
     ): any {
         const namespace = this._namespace;
         const _createHref = this._createHref;
         const createHref = util.makeCreateHref(namespace, _createHref);
 
-        let match$ = this._history$
+        return this._history$
             .map((location: Location) => {
                 const matcher = routeMatcher || this._routeMatcher;
                 const filteredPath = getFilteredPath(
@@ -69,12 +71,37 @@ export class RouterSource {
             })
             .filter(({ path }: any) => path !== undefined && path !== null)
             .remember();
+    }
+
+    define(
+        routes: RouteDefinitionsMap | RouteDefinitionsArray,
+        routeMatcher?: RouteMatcher
+    ): any {
+        const _createHref = this._createHref;
+        const createHref = util.makeCreateHref(this._namespace, _createHref);
 
-        const out$ = adapt(match$);
+        const out$ = adapt(this._define(routes, routeMatcher));
         out$.createHref = createHref;
         return out$;
     }
 
+    routedComponent(
+        routes: RouteDefinitionsMap | RouteDefinitionsArray,
+        routeMatcher?: RouteMatcher
+    ): (sources: any) => any {
+        const name = this._name;
+        return sources => {
+            const match$ = this._define(routes, routeMatcher);
+            const page$ = match$.map(({ path, value }: any) => {
+                return value({
+                    ...sources,
+                    [name]: sources[name].path(path)
+                });
+            });
+            return adapt(page$);
+        };
+    }
+
     createHref(path: Pathname): Pathname {
         return util.makeCreateHref(this._namespace, this._createHref)(path);
     }

src/routerify.ts

@@ -47,7 +47,8 @@ function routerify(
             xs.fromObservable(sources[opts.historyName]).remember(),
             [],
             createHref,
-            routeMatcher
+            routeMatcher,
+            opts.routerName
         );
         let srcs = sources;
         if (opts.omitHistory) {