[DOC] update component, tooling doc

README.md

@@ -18,9 +18,8 @@ the [Odoo](https://www.odoo.com/) Web Client. OWL's main features are:
 Here is a short example to illustrate interactive components:
 
 ```javascript
-import { Component, QWeb } from 'owl'
+import { Component, QWeb, useState } from 'owl'
 import { xml } from 'owl/tags'
-import { useState } from 'owl/hooks'
 
 class Counter extends Component {
   static template = xml`

doc/component.md

@@ -5,6 +5,7 @@
 - [Overview](#overview)
 - [Example](#example)
 - [Reference](#reference)
+  - [Reactive System](#reactive-system)
   - [Properties](#properties)
   - [Static Properties](#static-properties)
   - [Methods](#methods)
@@ -22,6 +23,7 @@
   - [Slots](#slots)
   - [Asynchronous Rendering](#asynchronous-rendering)
   - [Error Handling](#error-handling)
+  - [Functional Components](#functional-components)
 
 ## Overview
 
@@ -77,7 +79,19 @@ Owl will use the component's name as template name. Here,
 a state object is defined, by using the `useState` hook. It is not mandatory to use the state object, but it is certainly encouraged. The result of the `useState` call is
 [observed](observer.md), and any change to it will cause a rerendering.
 
-## Reactive system
+
+## Reference
+
+An Owl component is a small class which represent a component or some UI element.
+It exists in the context of an environment (`env`), which is propagated from a
+parent to its children. The environment needs to have a QWeb instance, which
+will be used to render the component template.
+
+Be aware that the name of the component may be significant: if a component does
+not define a `template` key, then Owl will lookup in QWeb to
+find a template with the component name (or one of its ancestor).
+
+### Reactive system
 
 OWL components can be made reactive by observing some part of their state. See the [hooks](hooks.md) section for more details.
 
@@ -96,17 +110,6 @@ class SomeComponent extends owl.Component {
 Note that there is an important limitation: hooks need to be called in the
 constructor.
 
-## Reference
-
-An Owl component is a small class which represent a component or some UI element.
-It exists in the context of an environment (`env`), which is propagated from a
-parent to its children. The environment needs to have a QWeb instance, which
-will be used to render the component template.
-
-Be aware that the name of the component may be significant: if a component does
-not define a `template` key, then Owl will lookup in QWeb to
-find a template with the component name (or one of its ancestor).
-
 ### Properties
 
 - **`el`** (HTMLElement | null): reference to the DOM root node of the element. It is `null` when the
@@ -1157,3 +1160,30 @@ env.qweb.on("error", null, function(error) {
   // react to the error
 });
 ```
+
+### Functional Components
+
+Owl does not exactly have functional components.  However, there is an extremely
+close alternative: calling sub templates.
+
+A stateless functional component in react is usually some kind of function that
+maps props to a virtual dom (often with `jsx`). So, basically, almost like a
+template rendered with `props`.  In Owl, this can be done by
+simply defining a template, that will access the `props` object:
+
+```js
+const Welcome = xml`<h1>Hello, {props.name}</h1>`;
+
+class MyComponent extends Component {
+    static template = xml`
+        <div>
+            <t t-call=${Welcome}/>
+            <div>something</div>
+        </div>
+    `;
+}
+```
+
+The way this works is that sub templates are inlined, and have access to the
+ambient context. They can therefore access `props`, and any other part of the
+caller component.

doc/tooling.md

@@ -56,3 +56,32 @@ Note: This is more an internal tool, useful for people working on Owl.
 The benchmarks application is a very small application, implemented in different
 frameworks, and in different versions of Owl. This is a simple internal tool,
 useful to compare various performance metrics on some tasks.
+
+## Single File Component
+
+If you want to have `xml` syntax highlighting while using the `xml` helper which
+helps you define inline templates, there is a VS Code addon `Comment tagged template`
+which, if installed, does exactly that.  To enable it, you need to add a comment,
+like this:
+
+
+```js
+// -----------------------------------------------------------------------------
+// TEMPLATE
+// -----------------------------------------------------------------------------
+const TEMPLATE = xml/* xml */ `
+	<div class="main two-columns">
+		<Sidebar/>
+		<Content />
+	</div>`;
+
+// -----------------------------------------------------------------------------
+// CODE
+// -----------------------------------------------------------------------------
+class MyComponent extends Component {
+    static template = TEMPLATE;
+    static components = { Sidebar, Content };
+
+    // rest of component...
+}
+```