Samuel Degueldre
33174b301b
Previously, if the value of a t-component directive changed, but there was already a scheduled render for the component before that change, the rendering of the existing component would get delayed (as it should), but after the parent's rendering was complete, the old component which will be destroyed during the patch would still get rendered, despite being stale. This can cause crashes if that component relies on state that no longer exists. This was caused by the fact that when rendering, we check the parent chain for an active render, and also check that the component still exists in the parent's fiber childrenMap (ie, we know that the upcoming patch is not about to destroy the component). To do this, we use the component's parentKey, but in the case of t-component, the parentKey for both possible components is the same, causing the stale component to incorrectly believe that it's not about to be destroyed, by finding the next component in the childrenMap under the same key. This commit fixes that by prepending the component's name to the parentKey, meaning that if the value of the t-component changes, so will the key, and the render will be further delayed until the new state is patched, at which point the stale component will be destroyed and the following attempt to render will be cancelled as expected. The choice to use the component's name is to simplify the implementation, this means that if using t-component and switching between components that have the same class name, this protection will not work. The alternative would be to generate a unique id for the component class, eg with a WeakMap, but this both complicates the implementation and adds runtime overhead, for a case that is likely extremely rare. We are open to refine the implementation should this problem occur in practice.
🦉 Owl Framework 🦉
Class based components with hooks, reactive state and concurrent mode
Try it online! you can experiment with the Owl framework in an online playground.
Project Overview
The Odoo Web Library (Owl) is a smallish (~<20kb gzipped) UI framework built by Odoo for its products. Owl is a modern framework, written in Typescript, taking the best ideas from React and Vue in a simple and consistent way. Owl's main features are:
- a declarative component system,
- a fine grained reactivity system similar to Vue,
- hooks
- fragments
- asynchronous rendering
Owl components are defined with ES6 classes and xml templates, uses an underlying virtual DOM, integrates beautifully with hooks, and the rendering is asynchronous.
Quick links:
- documentation,
- changelog (from Owl 1.x to 2.x),
- playground
Example
Here is a short example to illustrate interactive components:
const { Component, useState, mount, xml } = owl;
class Counter extends Component {
static template = xml`
<button t-on-click="() => state.value = state.value + props.increment">
Click Me! [<t t-esc="state.value"/>]
</button>`;
state = useState({ value: 0 });
}
class Root extends Component {
static template = xml`
<span>Hello Owl</span>
<Counter increment="2"/>`;
static components = { Counter };
}
mount(Root, document.body);
Note that the counter component is made reactive with the useState hook.
Also, all examples here uses the xml helper to define inline templates.
But this is not mandatory, many applications will load templates separately.
More interesting examples can be found on the playground application.
Documentation
Learning Owl
Are you new to Owl? This is the place to start!
Reference
- Overview
- App
- Component
- Component Lifecycle
- Concurrency Model
- Dev mode
- Dynamic sub components
- Environment
- Error Handling
- Event Handling
- Form Input Bindings
- Fragments
- Hooks
- Loading Templates
- Mounting a component
- Portal
- Precompiling templates
- Props
- Props Validation
- Reactivity
- Rendering SVG
- Refs
- Slots
- Sub components
- Sub templates
- Templates (Qweb)
- Translations
- Utils
Other Topics
- Notes On Owl Architecture
- Comparison with React/Vue
- Why did Odoo build Owl?
- Changelog (from owl 1.x to 2.x)
- Notes on compiled templates
Installing Owl
Owl is available on npm and can be installed with the following command:
npm install @odoo/owl
If you want to use a simple <script> tag, the last release can be downloaded here: