Samuel Degueldre
2c244aa31a
Currently, the `moveBefore` method on VNodes assumes that the `other` VNode it receives is of the same type, and that the entire VNode tree below that other VNode has the exact same structure. While this is correct in most cases, it breaks down when there is a VToggler somewhere in the VNode tree, as the structure below a VToggler can be very different from the structure below another VToggler that was created from the same compiled code. For example, two iterations of a t-foreach that contains a <t t-component="..."/> may spawn different components, and different components obviously have different structures. One way to fix this is to remove the assumption that the structure of the `this` block tree in moveBefore is the same as the structure of the `other` block tree, and instead, always give the concrete DOM node before which we want to move the current VNode instead of giving it a VNode and an afterNode as a fallback. One problem with this solution is that it degrades performance in the "standard" case, where a t-foreach contains no VToggler anywhere in its block tree, as retrieving the first concrete DOM node requires calling firstNode() which recursively traverses the entire tree. To avoid this performance penalty in the standard case, we opt to only go down this route whenever we encounter a VToggler when calling `moveBefore`. This requires that we maintain two separate methods, one to move a VNode before another VNode of assumed similar structure, which is basically the current implementation of `moveBefore` for all VNode types except VToggler, and one implementation that moves a VNode before a concrete DOM node. This method needs to be implemented for all VNode types, as all VNode types can be descendants of a VToggler. This method will only be called from one place: the `moveBeforeVNode` method of the toggler, which is the point where we realize that the assumption of identical structure breaks down. Co-authored-by: Bruno Boi <boi@odoo.com>
🦉 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: