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`

Hello, {props.name}

`; + +class MyComponent extends Component { + static template = xml` +
+ +
something
+
+ `; +} +``` + +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. \ No newline at end of file diff --git a/doc/tooling.md b/doc/tooling.md index d2c7befd..f768833c 100644 --- a/doc/tooling.md +++ b/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 */ ` +
+ + +
`; + +// ----------------------------------------------------------------------------- +// CODE +// ----------------------------------------------------------------------------- +class MyComponent extends Component { + static template = TEMPLATE; + static components = { Sidebar, Content }; + + // rest of component... +} +``` \ No newline at end of file