Samuel Degueldre
975ed32f0b
Previously, refs could get set to null incorrectly, or could stay set when they shouldn't. This was caused by the fact that singleRefSetter and multiRefSetters are created on every render, meaning that any render that did not affect the status of the ref (mounted or not), would overwrite the previous ref setter, including its closure, causing the captured `_el` or `count` to be lost. This means that on a subsequent render that did affect the status of the ref, the singleRefSetter would consider that it did not set the ref, and so shouldn't unset it, causing it to incorrectly stay keep the element, while in multiRefSetter, the opposite problem occured: the count would be 0 on removal, causing it to believe that it was the first call in the corresponding patch that affected the ref, when in fact, the closure is already stale, because it was created from the previous render, and the fresh multiRefSetter from the latest render may already have been called by an element with that ref that came earlier in the template. This commit changes the ref setting strategy to work around the issue of stale closures: we define a setRef method on ComponentNode that is always called, this method ignores calls with `null`, meaning that the refs object on the ComponentNode never reverts to a null value for any key. Instead, the useRef hook will check whether the element that the ref points to is still mounted, and return null if not.
🦉 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: