diff --git a/README.md b/README.md index a4aa76da..da0d580e 100644 --- a/README.md +++ b/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` diff --git a/doc/component.md b/doc/component.md index 3e248d88..1524fe52 100644 --- a/doc/component.md +++ b/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`