[IMP] router: replace t-routecomponent directive by RouteComponent

closes #287

src/index.ts

@@ -11,12 +11,13 @@ import { ConnectedComponent } from "./store/connected_component";
 import { Store } from "./store/store";
 import * as _utils from "./utils";
 import { Link } from "./router/Link";
+import { RouteComponent } from "./router/RouteComponent";
 import { Router } from "./router/Router";
 
 export { Component } from "./component/component";
 export { QWeb };
 export const core = { EventBus, Observer };
-export const router = { Router, Link };
+export const router = { Router, RouteComponent, Link };
 export const store = { Store, ConnectedComponent };
 export const utils = _utils;
 

src/router/RouteComponent.ts

@@ -0,0 +1,27 @@
+import { Component } from "../component/component";
+
+export const ROUTE_COMPONENT_TEMPLATE_NAME = "__owl__-router-component";
+export const ROUTE_COMPONENT_TEMPLATE = `
+    <t t-foreach="routes" t-as="route">
+        <t t-if="env.router.currentRouteName === route.name">
+            <t t-component="{{route.component}}" t-props="env.router.currentParams"/>
+        </t>
+    </t>`;
+
+export class RouteComponent extends Component<any, {}, {}> {
+  template = ROUTE_COMPONENT_TEMPLATE_NAME;
+  routes: any[] = [];
+  constructor(parent, props) {
+    super(parent, props);
+    const router = this.env.router;
+    for (let name of router.routeIds) {
+      const route = router.routes[name];
+      if (route.component) {
+        this.routes.push({
+          name: route.name,
+          component: "__component__" + route.name
+        });
+      }
+    }
+  }
+}

src/router/Router.ts

@@ -1,6 +1,6 @@
 import { Env } from "../component/component";
 import { QWeb } from "../qweb/index";
-import { makeDirective } from "./directive";
+import { ROUTE_COMPONENT_TEMPLATE, ROUTE_COMPONENT_TEMPLATE_NAME } from "./RouteComponent";
 import { LINK_TEMPLATE, LINK_TEMPLATE_NAME } from "./Link";
 import { shallowEqual } from "../utils";
 
@@ -87,7 +87,7 @@ export class Router {
 
     // setup link and directive
     env.qweb.addTemplate(LINK_TEMPLATE_NAME, LINK_TEMPLATE);
-    QWeb.addDirective(makeDirective(<RouterEnv>env));
+    env.qweb.addTemplate(ROUTE_COMPONENT_TEMPLATE_NAME, ROUTE_COMPONENT_TEMPLATE);
   }
 
   //--------------------------------------------------------------------------

src/router/directive.ts

@@ -1,31 +0,0 @@
-import { RouterEnv } from "./Router";
-
-export function makeDirective(env: RouterEnv) {
-  return {
-    name: "routecomponent",
-    priority: 13,
-    atNodeEncounter({ node }): boolean {
-      let first = true;
-      const router = env.router;
-      for (let name of router.routeIds) {
-        const route = router.routes[name];
-        if (route.component) {
-          // make new t t-component element
-          const comp = node.ownerDocument.createElement("t");
-          comp.setAttribute("t-component", "__component__" + route.name);
-          comp.setAttribute(
-            first ? "t-if" : "t-elif",
-            `env.router.currentRouteName === '${route.name}'`
-          );
-          first = false;
-          for (let param of route.params) {
-            comp.setAttribute(param, `env.router.currentParams.${param}`);
-          }
-          node.appendChild(comp);
-        }
-      }
-      node.removeAttribute("t-routecomponent");
-      return false;
-    }
-  };
-}