[IMP] tags: introduce xml tag

Big change! This commit introduces an xml function tag to easily define
inline templates.

This is a pretty big change toward single file owl components

Part of #284
This commit is contained in:
Géry Debongnie
2019-09-12 09:45:32 +02:00
parent cfc2fb2ba2
commit 9846b2e997
20 changed files with 381 additions and 310 deletions
+9 -9
View File
@@ -1,18 +1,18 @@
import { Component } from "../component/component";
import { xml } from "../tags";
import { Destination, RouterEnv } from "./Router";
export const LINK_TEMPLATE_NAME = "__owl__-router-link";
export const LINK_TEMPLATE = `
<a t-att-class="{'router-link-active': isActive }"
t-att-href="href"
t-on-click="navigate">
<t t-slot="default"/>
</a>`;
type Props = Destination;
export class Link<Env extends RouterEnv> extends Component<Env, Props, {}> {
static template = LINK_TEMPLATE_NAME;
static template = xml`
<a t-att-class="{'router-link-active': isActive }"
t-att-href="href"
t-on-click="navigate">
<t t-slot="default"/>
</a>
`;
href: string = this.env.router.destToPath(this.props);
async willUpdateProps(nextProps) {
+5 -5
View File
@@ -1,15 +1,15 @@
import { Component } from "../component/component";
import { xml } from "../tags";
export const ROUTE_COMPONENT_TEMPLATE_NAME = "__owl__-router-component";
export const ROUTE_COMPONENT_TEMPLATE = `
export class RouteComponent extends Component<any, {}, {}> {
static template = xml`
<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>`;
</t>
`;
export class RouteComponent extends Component<any, {}, {}> {
static template = ROUTE_COMPONENT_TEMPLATE_NAME;
routes: any[] = [];
constructor(parent, props) {
super(parent, props);
-6
View File
@@ -1,7 +1,5 @@
import { Env } from "../component/component";
import { QWeb } from "../qweb/index";
import { ROUTE_COMPONENT_TEMPLATE, ROUTE_COMPONENT_TEMPLATE_NAME } from "./RouteComponent";
import { LINK_TEMPLATE, LINK_TEMPLATE_NAME } from "./Link";
import { shallowEqual } from "../utils";
type NavigationGuard = (info: {
@@ -84,10 +82,6 @@ export class Router {
this.routes[partialRoute.name] = partialRoute as Route;
this.routeIds.push(partialRoute.name);
}
// setup link and directive
env.qweb.addTemplate(LINK_TEMPLATE_NAME, LINK_TEMPLATE);
env.qweb.addTemplate(ROUTE_COMPONENT_TEMPLATE_NAME, ROUTE_COMPONENT_TEMPLATE);
}
//--------------------------------------------------------------------------