Enhancement

A routing component that can hook into registered routes against a router instance that will be available via the registry. The registry will be either global or locally scoped, however for routing, using the global registry will be more common.

The creation of the application routes will be configuration driven using a simple nested structure:

const applicationRoutes = [
    {
        path: 'foo',
        children: [
            {
                path: 'bar',
            },
            {
                path: 'qux'
             }
        ]
    },
   {
        path: 'baz'
    }
];

This configuration would support the following routes:

1. /foo
2. /baz
3. /foo/bar
4. /foo/qux

Routing will provide a utility functions to create a RouterContext, register these routes against a specific router instance and allow the consumer to explicitly register the RouterContext in the desired registry.

// assuming the routes configuration above
const router = new Router(/* with history manager of choice */);
const context: RouterContext = createRouterContext(router);
registerRoutes(routes, router);
//ROUTING_KEY - symbol exported by routing
registry.define(ROUTING_KEY, Injector(RouterInjector, context));

Additionally easy to provide a further function that encapsulates all this logic and simply returns the router instance.

The routes will be controlled by using the higher order component Routeable for the component that requires routing. Routable accepts and an options argument with path, onEnter & onExit properties.

• path
  • the path chunk of the route. e.g Routeable(MyWidget, { path: 'foo' });
• onEnter
  • callback to execute when a route is entered. The route and the params will be passed as arguments
• onExit
  • callback to execute when route is exited. The route will be passed as an argument.

When a Route "matches" the current segment of the route it will render the "wrapped" component (and it's children).

Potentially usage example (assuming the route configuration about):

//MyWidget.ts
export interface MyWidgetProperties extends WidgetProperties {
    label: string;
}
export MyWidget extends WidgetBase<MyWidgetPropertoes> {
    protected render(): DNode {
        return properties.label;
    }
}

// App.ts
import { Routeable } from '@dojo/routing/Routeable';
import { MyWidget } from './MyWidget';
export RouteableMyWidgetFoo = Routeable(MyWidget, { path: 'foo' });
export RouteableMyWidgetBar = Routeable(MyWidget, { path: 'bar' });
export RouteableMyWidgetBaz = Routeable(MyWidget, { path: 'baz' });
export RouteableMyWidgetQux = Routeable(MyWidget, { path: 'qux' });
class App extends WidgetBase {
    render() {
        return v('div', [
            w(RouteableMyWidgetFoo, { label: 'foo' }, [
                w(RouteableMyWidgetFoo, { label: 'foo' }), `foo/foo` not registered so will not ever match
                w(RouteableMyWidgetBar, { label: 'bar' }),
                w(RouteableMyWidgetQux, { label: 'qux' }),
            ]),
            w(RouteableMyWidgetBaz, { label: 'baz' })
        ]);
    }
}