Add subrouting test.

README.md

@@ -309,11 +309,15 @@ In cell arrays each item is a cell which makes it possible to efficiently update
 
 ## Lazily loaded components
 
+The `<Lazy>` component can be used to show components loaded lazily via the `import()`-function:
+
 ```tsx
 <Lazy else='loading...'>{() => import('./my-component').then(m => <m.MyComponent/>)}</Lazy>
 ```
 
-## Change omponent dynamically
+## Change component dynamically
+
+The `<Dynamic>` can be used to render a component stored in a cell:
 
 ```tsx
 const component = ref<Component<{}>>();
@@ -323,6 +327,8 @@ component.value = MyComponent;
 <Dynamic component={component} else='no component'/>
 ```
 
+This makes it possible to dynamically replace the rendered component with another one. Some possible uses are tab pages, modals, etc.
+
 ## Utilities
 
 * `<Style>`

src/router.tsx

@@ -5,6 +5,22 @@ import { ElementChildren } from './types';
 import { Emitter, createEmitter } from './emitter';
 
 /**
+ * Routing configuration that maps path segments to components.
+ *
+ * @example
+ * ```tsx
+ * createRouter({
+ *   '': () => <Home/>,
+ *   'users': {
+ *     '': () => <ListUsers/>,
+ *     '*': userId => ({
+ *       '': () => <ShowUser userId={userId}/>
+ *       'comments': () => <ListUsersComments userId={userId}/>
+ *     }),
+ *   },
+ *   '**': () => <NotFound/>,
+ * });
+ * ```
  * @category Routing
  */
 export type RouterConfig = {
@@ -33,10 +49,10 @@ export interface ActiveRoute {
  * @category Routing
  */
 export interface Router {
-    strategy: RouterStategy;
-    activeRoute: RefCell<ActiveRoute>;
-    onNavigate: Emitter<ActiveRoute>;
-    onNavigated: Emitter<ActiveRoute>;
+    readonly strategy: RouterStategy;
+    readonly activeRoute: RefCell<ActiveRoute>;
+    readonly onNavigate: Emitter<ActiveRoute>;
+    readonly onNavigated: Emitter<ActiveRoute>;
     resolve(path: Path): ActiveRoute;
     pushState(path: Path): void;
     navigate(path: Path, skipHistory?: boolean): Promise<void>;

tests/router.test.tsx

@@ -60,6 +60,59 @@ describe('HashRouter', () => {
 
         await router.navigate('./3');
         expect(window.location.hash).toBe('#bar/bazbar/3');
+
+        await router.navigate('/3');
+        expect(window.location.hash).toBe('#3');
+    });
+
+    test('subrouting', async () => {
+        const subrouter = createRouter({
+            '': () => <div>sub root</div>,
+            'foo': () => <div>sub foo</div>,
+            '**': () => <div>sub not found</div>,
+        });
+        const router = createRouter({
+            '': () => <div>root</div>,
+            'foo': {
+                '**': () => <subrouter.Portal/>,
+            },
+            '**': () => <div>not found</div>,
+        });
+
+        const element = mountTest(<router.Portal/>);
+
+        await router.navigate('')
+        expect(window.location.hash).toBe('');
+
+        await router.navigate('foo/foo');
+        expect(window.location.hash).toBe('#foo/foo');
+
+        expect(element.container.textContent).toBe('sub foo');
+
+        await subrouter.navigate('bar');
+        expect(window.location.hash).toBe('#foo/bar');
+
+        expect(element.container.textContent).toBe('sub not found');
+
+        expect(subrouter.getUrl('foo')).toBe('#foo/foo');
+        expect(subrouter.getUrl('/foo')).toBe('#foo');
+        expect(subrouter.getUrl('./foo')).toBe('#foo/bar/foo');
+
+        await subrouter.navigate('../../bar');
+        expect(window.location.hash).toBe('#bar');
+        expect(element.container.textContent).toBe('not found');
+
+        await router.navigate('foo');
+        expect(window.location.hash).toBe('#foo');
+        expect(element.container.textContent).toBe('sub root');
+
+        await subrouter.navigate('/');
+        expect(window.location.hash).toBe('');
+        expect(element.container.textContent).toBe('root');
+
+        expect(numObservers(router.activeRoute)).toBe(0);
+        expect(numObservers(router.onNavigate)).toBe(0);
+        expect(numObservers(router.onNavigated)).toBe(0);
     });
 
     test('Portal', async () => {