load widget templates separately (so no more inline)

web/static/src/ts/core/Widget.ts

@@ -37,8 +37,7 @@ const patch = init([sdListeners, sdAttrs]);
 
 export class Widget<T extends WEnv, Props> {
   __widget__: Meta<WEnv>;
-  name: string = "widget";
-  template: string = "<div></div>";
+  template: string = "default";
 
   get el(): HTMLElement | null {
     return this.__widget__.vnode ? (<any>this).__widget__.vnode.elm : null;
@@ -207,12 +206,8 @@ export class Widget<T extends WEnv, Props> {
   }
 
   private async _render(): Promise<VNode> {
-    if (this.template) {
-      this.env.qweb.addTemplate(this.name, this.template);
-      delete this.template;
-    }
     const promises: Promise<void>[] = [];
-    let vnode = this.env.qweb.render(this.name, this, { promises });
+    let vnode = this.env.qweb.render(this.template, this, { promises });
 
     // this part is critical for the patching process to be done correctly. The
     // tricky part is that a child widget can be rerendered on its own, which

web/static/src/ts/core/qweb_vdom.ts

@@ -134,7 +134,7 @@ export class QWeb {
    */
   addTemplate(name: string, template: RawTemplate) {
     if (name in this.processedTemplates) {
-      return;
+      throw new Error(`Template ${name} already defined`);
     }
     const parser = new DOMParser();
     const doc = parser.parseFromString(template, "text/xml");
@@ -191,6 +191,11 @@ export class QWeb {
       }
     }
   }
+  /**
+   * Load templates from a xml (as a string).  This will look up for the first
+   * <templates> tag, and will consider each child of this as a template, with
+   * the name given by the t-name attribute.
+   */
   loadTemplates(xmlstr: string) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(xmlstr, "text/xml");

web/static/src/ts/env.ts

@@ -54,7 +54,7 @@ export interface Env extends WEnv {
  * For this reason, the result of makeEnvironment is memoized: every call to
  * this function will actually return the same environment.
  */
-export const makeEnvironment = memoize(function(): Env {
+export const makeEnvironment = memoize(async function(): Promise<Env> {
   // main application registry
   registry.add("action", "discuss", Discuss);
   registry.add("action", "crm", CRM);
@@ -72,6 +72,15 @@ export const makeEnvironment = memoize(function(): Env {
     { title: "CRM", actionID: 2 }
   ];
 
+  // templates
+  const result = await fetch("templates.xml");
+  if (!result.ok) {
+    throw new Error("Error while fetching xml templates");
+  }
+  const templates = await result.text();
+  qweb.addTemplate("default", "<div/>");
+  qweb.loadTemplates(templates);
+
   return {
     // Base widget requirements
     qweb,

web/static/src/ts/main.ts

@@ -9,7 +9,7 @@ import { Root } from "./root";
 //------------------------------------------------------------------------------
 
 document.addEventListener("DOMContentLoaded", async function() {
-  const env = makeEnvironment();
+  const env = await makeEnvironment();
   const rootWidget = new Root(env);
   await rootWidget.mount(document.body);
 

web/static/src/ts/root.ts

@@ -21,26 +21,8 @@ interface State {
 // Root Widget
 //------------------------------------------------------------------------------
 
-const template = `
-  <div class="o_web_client">
-    <t t-widget="Navbar" t-props="{toggleHome:toggleHome,inMenu:state.inMenu}"/>
-    <t t-if="state.inMenu">
-      <t t-widget="HomeMenu" t-keep-alive="1"/>
-    </t>
-    <t t-else="1">
-      <t t-widget="Action" t-props="{stack:state.stack}" t-keep-alive="1"/>
-    </t>
-    <div class="o_notification_container">
-      <t t-foreach="state.notifications" t-as="notif">
-        <t t-widget="Notification" t-props="notif"/>
-      </t>
-    </div>
-  </div>
-`;
-
 export class Root extends Widget<Env, {}> {
-  name = "root";
-  template = template;
+  template = "web_client";
   widgets = { Navbar, Notification, HomeMenu, Action };
 
   state: State = {

web/static/src/ts/widgets/Action.ts

@@ -7,8 +7,7 @@ export interface Props {
 }
 
 export class Action extends Widget<Env, Props> {
-  name = "action";
-  template = `<div class="o_content"/>`;
+  template = "action";
   currentWidget: any;
 
   shouldUpdate(nextProps: Props) {

web/static/src/ts/widgets/CRM.ts

@@ -1,13 +1,6 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div class="o_crm">
-        <span>CRM!!!!</span>
-    </div>
-`;
-
 export class CRM extends Widget<Env, {}> {
-  name = "crm";
-  template = template;
+  template = "crm";
 }

web/static/src/ts/widgets/Counter.ts

@@ -1,21 +1,12 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div>
-        <button t-on-click="increment(-1)">-</button>
-        <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-        <button t-on-click="increment(1)">+</button>
-    </div>
-`;
-
 interface Props {
   initialState?: number;
 }
 
 export class Counter extends Widget<Env, Props> {
-  name = "counter";
-  template = template;
+  template = "counter";
   state = {
     counter: 0
   };

web/static/src/ts/widgets/Discuss.ts

@@ -3,32 +3,8 @@ import { Env } from "../env";
 import { Clock } from "./clock";
 import { Counter } from "./counter";
 
-const template = `
-    <div class="o_discuss">
-        <span>DISCUSS!!</span>
-        <button t-on-click="resetCounter">Reset first counter</button>
-        <button t-on-click="resetCounterAsync">Reset counter 2 in 3s</button>
-        <button t-on-click="toggle">Toggle  Clock/counters</button>
-        <button t-on-click="toggleColor">Toggle Color</button>
-        <button t-on-click="updateState({})">Rerender this widget</button>
-        <input t-ref="textinput"/>
-        <t t-if="state.validcounter">
-            <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
-            <t t-widget="Counter" t-ref="counter2" t-props="{initialState:400}"/>
-        </t>
-        <t t-else="1">
-            <t t-widget="Clock"/>
-        </t>
-        <t t-widget="ColorWidget" t-props="{color: state.color}"/>
-        <button t-on-click="addNotif(false)">Add notif</button>
-        <button t-on-click="addNotif(true)">Add sticky notif</button>
-
-    </div>
-`;
-
 export class Discuss extends Widget<Env, {}> {
-  name = "discuss";
-  template = template;
+  template = "discuss";
   widgets = { Clock, Counter, ColorWidget };
   state = { validcounter: true, color: "red" };
 
@@ -63,6 +39,5 @@ export class Discuss extends Widget<Env, {}> {
 }
 
 class ColorWidget extends Widget<Env, { color: "red" | "blue" }> {
-  name = "colorwidget";
-  template = `<div>Current Color: <t t-esc="props.color"/></div>`;
+  template = "colorwidget";
 }

web/static/src/ts/widgets/Navbar.ts

@@ -1,28 +1,13 @@
 import { Widget } from "../core/widget";
 import { Env, Menu } from "../env";
 
-const template = `
-    <div class="o_navbar">
-        <a aria-label="Applications" class="o_title fa fa-th" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
-        <ul t-if="!props.inMenu">
-            <li t-foreach="env.menus" t-as="menu">
-                <a t-att-href="getUrl(menu)">
-                    <t t-esc="menu.title"/>
-                </a>
-            </li>
-            <li t-if="env.isMobile">MOBILEMODE</li>
-        </ul>
-    </div>
-`;
-
 export interface Props {
   toggleHome: () => void;
   inMenu: boolean;
 }
 
 export class Navbar extends Widget<Env, Props> {
-  name = "navbar";
-  template = template;
+  template = "navbar";
 
   getUrl(menu: Menu) {
     const action_id = String(menu.actionID);

web/static/src/ts/widgets/clock.ts

@@ -2,8 +2,7 @@ import { Widget } from "../core/widget";
 import { Env } from "../env";
 
 export class Clock extends Widget<Env, {}> {
-  name = "clock";
-  template = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
+  template = "clock";
   timeout: any | undefined;
 
   state = {

web/static/src/ts/widgets/home_menu.ts

@@ -1,13 +1,6 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div class="o_home_menu">
-        <span>HOME MENU</span>
-    </div>
-`;
-
 export class HomeMenu extends Widget<Env, {}> {
-  name = "home";
-  template = template;
+  template = "home";
 }

web/static/src/ts/widgets/notification.ts

@@ -2,21 +2,8 @@ import { Widget } from "../core/widget";
 import { Env } from "../env";
 import { INotification } from "../services/notifications";
 
-const template = `
-    <div class="o_notification">
-        <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close" t-on-click="close"/>
-        <div class="o_notification_title">
-            <t t-raw="props.title"/>
-        </div>
-        <div class="o_notification_content" t-if="props.message.length">
-            <t t-raw="props.message"/>
-        </div>
-
-    </div>`;
-
 export class Notification extends Widget<Env, INotification> {
-  name = "notification";
-  template = template;
+  template = "notification";
 
   close() {
     this.env.notifications.close(this.props.id);