[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

doc/component.md

@@ -72,7 +72,7 @@ Note that this code is written in ESNext style, so it will only run on the
 latest browsers without a transpilation step.
 
 This example show how a component should be defined: it simply subclasses the
-Component class. If no `template` key is defined, then
+Component class. If no static `template` key is defined, then
 Owl will use the component's name as template name. Here,
 a state object is defined. It is not mandatory to use the state object, but it
 is certainly encouraged. The state object is [observed](observer.md), and any
@@ -96,9 +96,6 @@ find a template with the component name (or one of its ancestor).
 
 - **`env`** (Object): the component environment, which contains a QWeb instance.
 
-- **`template`** (string, optional): if given, this is the name of the QWeb template that will render
-  the component.
-
 - **`state`** (Object): this is the location of the component's state, if there is
   any. After the willStart method, the `state` property is observed, and each
   change will cause the component to rerender itself.
@@ -113,7 +110,10 @@ find a template with the component name (or one of its ancestor).
 
 ### Static Properties
 
-- **`components`** (Object, optional): if given, this is an object that contains
+- **`template`** (string, optional): if given, this is the name of the QWeb template that will render the component. Note that there is a helper `xml` to
+  make it easy to define an inline template.
+
+* **`components`** (Object, optional): if given, this is an object that contains
   the classes of any sub components needed by the template. This is the main way
   used by Owl to be able to create sub components.
 
@@ -123,7 +123,7 @@ find a template with the component name (or one of its ancestor).
   }
   ```
 
-- **`props`** (Object, optional): if given, this is an object that describes the
+* **`props`** (Object, optional): if given, this is an object that describes the
   type and shape of the (actual) props given to the component. If Owl mode is
   `dev`, this will be used to validate the props each time the component is
   created/updated. See [Props Validation](#props-validation) for more information.
@@ -137,7 +137,7 @@ find a template with the component name (or one of its ancestor).
   }
   ```
 
-* **`defaultProps`** (Object, optional): if given, this object define default
+- **`defaultProps`** (Object, optional): if given, this object define default
   values for (top-level) props. Whenever `props` are given to the object, they
   will be altered to add default value (if missing). Note that it does not
   change the initial object, a new object will be created instead.

doc/quick_start.md

@@ -73,9 +73,9 @@ Let us now add the javascript to make it work, in `app.js`:
 
 ```javascript
 class ClickCounter extends owl.Component {
+  static template = "clickcounter";
   constructor() {
     super(...arguments);
-    this.template = "clickcounter";
     this.state = { value: 0 };
   }
 

doc/qweb.md

@@ -135,7 +135,7 @@ It's API is quite simple:
   having a reference to the actual QWeb instance.
 
   ```js
-  QWeb.registerTemplate('mytemplate', `<div>some template`);
+  QWeb.registerTemplate("mytemplate", `<div>some template`);
   ```
 
 - **`registerComponent(name, Component)`**: static function to register an OWL Component

doc/readme.md

@@ -19,6 +19,8 @@ owl
     store
         Store
         ConnectedComponent
+    tags
+        xml
     utils
         debounce
         escape
@@ -36,6 +38,7 @@ owl
 - [QWeb](qweb.md)
 - [Router](router.md)
 - [Store](store.md)
+- [Tags](tags.md)
 - [Utils](utils.md)
 - [Virtual DOM](vdom.md)
 

doc/tags.md

@@ -0,0 +1,47 @@
+# 🦉 Tags 🦉
+
+Tags are very small helper to make it easy to write inline templates. There is
+only one currently available tag: `xml`, but we plan to add other tags later,
+such as a `css` tag, which will be used to write single file components.
+
+## XML tag
+
+Without tags, creating a standalone component would look like this:
+
+```js
+import { Component } from 'owl'
+
+const name = 'some-unique-name';
+const template = `
+    <div>
+        <span t-if="somecondition">text</span>
+        <button t-on-click="someMethod">Click</button>
+    </div>
+`;
+QWeb.registerTemplate(name, template);
+
+class MyComponent extends Component {
+    static template = name;
+
+    ...
+}
+```
+
+With tags, this process is slightly simplified. The name is uniquely generated,
+and the template is automatically registered:
+
+```js
+import { Component } from 'owl'
+import { xml } from 'owl/tags'
+
+class MyComponent extends Component {
+    static template = xml`
+        <div>
+            <span t-if="somecondition">text</span>
+            <button t-on-click="someMethod">Click</button>
+        </div>
+    `;
+
+    ...
+}
+```