owl 2 breaking changes

owl_2_breaking_changes.md

OWL 2 Breaking changes

Components

• lifecycle methods are removed (details)
• can no longer be mounted on detached DOM (details)

Slots

• t-set does not define a slot any more (details)

Details/Rationale/Migration

Change 1: lifecycle methods are removed

There was two ways to define hooks: the component methods (willStart, mounted, ...) and the hooks (onWillStart, onMounted, ...). In Owl 2, the component methods have been removed.

Rationale: it makes the implementation simpler and slightly faster. Hooks are more composable than component methods. It enforces a single entry point to check all the useful lifecycle calls (instead of it being scattered in the component definition). It feels more "modern".

Migration: lifecycle methods should be defined in the setup:

class MyComponent extends Component {
  mounted() {
    // do something
  }
}

should become:

class MyComponent extends Component {
  setup() {
    onMounted(() => {
      // do something
    });
  }
}

Change 2: can no longer be mounted in a detached dom element

Nor document fragment.

Rationale: it is actually very difficult to do it: this implies that a component can be mounted more than once, that we need to check every time different status, that some elements is in the dom, and was a cause for bugs. Also, we don't use it in practice. Removing this means that we have a much simpler mental model of what happens.

Migration: well, not really easy. The code needs to be refactored in a different way.

Slots

t-set will no longer work to define a slot

The t-set directive cannot define a slot anymore. Only the t-set-slot directive can do it.

Rationale: it was left for compatibility reason, but was deprecated anyway.

Migration: t-set should be changed to t-set-slot (when defining a slot)

Example:

<SideBar><t t-set="content">content</t></SideBar>

should become:

<SideBar><t t-set-slot="content">content</t></SideBar>