[IMP] playground: update code to last version of master

The release script only update the owl code itself, not the playground
app code.

.github/workflows/deploy.yml

@@ -1,28 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on:
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12.x, 14.x, 16.x]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm run test
-    - run: npm run check-formatting
-    - run: npm run build

.gitignore

@@ -1,6 +1,5 @@
 /node_modules
 /dist
-
 npm-debug.log
 
 # misc
@@ -15,20 +14,4 @@ yarn-debug.log*
 yarn-error.log*
 
 package-lock.json
-yarn.lock
-
-#ide's
-.vscode
-.idea
-
-node_modules
-
-# Extras temp file
-/tools/owl.js
-
-release-notes.md
-
-.rpt2_cache
-
-# useful in some cases
-/temp
+.vscode

.jshintrc

@@ -1,3 +0,0 @@
-{
-  "esversion": 9
-}

CHANGELOG.md

@@ -1,766 +0,0 @@
-# Changelog
-
-This document contains an overview of all changes between Owl 1.x and
-Owl 2.x, with some pointers on how to update the code.
-
-Note that some of these changes can be magically implemented (for example, by
-patching the `setup` method of `Component` to auto register all the lifecycle
-methods as hooks). This will be done for the transition period, but will be
-removed after.
-
-## From Owl 1.x to Owl 2.0
-
-All changes are documented here in no particular order.
-
-**Components**
-
-- components can now have empty content or multiple root nodes (htmlelement or text) ([details](#31-components-can-now-have-arbitrary-content))
-- breaking: component.el is removed ([details](#9-componentel-is-removed))
-- new `useEffect` hook ([doc](doc/reference/hooks.md#useeffect))
-- new `onWillDestroy`, `onWillRender` and `onRendered` hooks ([doc](doc/reference/component.md#lifecycle))
-- breaking: lifecycle methods are removed ([details](#1-component-lifecycle-methods-are-removed))
-- breaking: can no longer be mounted on detached DOM ([details](#2-components-can-no-longer-be-mounted-in-a-detached-dom-element))
-- breaking: standalone `mount` method API is simpler ([details](#4-mount-method-api-is-simpler))
-- breaking: components can no longer be instantiated and mounted by hand ([details](#5-components-can-no-longer-be-instantiated-and-mounted-by-hand))
-- breaking: components can no longer be unmounted/remounted ([details](#6-components-can-no-longer-be-unmountedremounted))
-- breaking: template name is no longer inferred from the class name ([details](#7-template-name-is-no-longer-inferred-from-the-class-name))
-- breaking: components no longer have a `shouldUpdate` method ([details](#8-components-no-longer-have-a-shouldupdate-method))
-- breaking: components can no longer be mounted with position=self ([details](#11-components-can-no-longer-be-mounted-with-positionself))
-- breaking: `render` method does not return a promise anymore ([details](#35-render-method-does-not-return-a-promise-anymore))
-- breaking: `catchError` method is replaced by `onError` hook ([details](#36-catcherror-method-is-replaced-by-onerror-hook))
-- breaking: Support for inline css (`css` tag and static `style`) has been removed ([details](#37-support-for-inline-css-css-tag-and-static-style-has-been-removed))
-- new: prop validation system can now describe that additional props are allowed (with `*`) ([doc](doc/reference/props.md#props-validation))
-- breaking: prop validation system does not allow default prop on a mandatory (not optional) prop ([doc](doc/reference/props.md#props-validation))
-- breaking: rendering a component does not necessarily render child components ([details](#40-rendering-a-component-does-not-necessarily-render-child-components))
-
-
-
-**Templates**
-
-- breaking: `t-foreach` should always have a corresponding `t-key` ([details](#20-t-foreach-should-always-have-a-corresponding-t-key))
-- breaking: `t-ref` does not work on components ([details](#29-t-ref-does-not-work-on-component))
-- breaking: `t-raw` directive has been removed (replaced by `t-out`) ([details](#38-t-raw-directive-has-been-removed-replaced-by-t-out))
-- new: add support for synthetic events ([doc](doc/reference/event_handling.md#synthetic-events))
-- breaking: style/class on components are now regular props ([details](#10-styleclass-on-components-are-now-regular-props))
-- new: components can use the `.bind` suffix to bind function props ([doc](doc/reference/props.md#binding-function-props))
-- breaking: `t-on` does not accept expressions, only functions ([details](#30-t-on-does-not-accept-expressions-only-functions))
-- new: an error is thrown if an handler defined in a `t-on-` directive is not a function (failed silently previously in some cases)
-- breaking: `t-component` no longer accepts strings ([details](#17-t-component-no-longer-accepts-strings))
-- new: the `this` variable in template expressions is now bound to the component
-
-
-**Reactivity**
-
-- finer grained reactivity: owl 2 tracks change per key/component
-- finer grained reactivity: sub components can reobserve state ([doc](doc/reference/reactivity.md))
-- new: `reactive` function: create reactive state (without being linked to a component) ([doc](doc/reference/reactivity.md#reactive))
-- new: `markRaw` function: mark an object or array so that it is ignored by the reactivity system ([doc](doc/reference/reactivity.md#markraw))
-- new: `toRaw` function: given a reactive objet, return the raw (non reactive) underlying object ([doc](doc/reference/reactivity.md#toraw))
-
-
-**Slots**
-
-- breaking: `t-set` does not define a slot any more ([details](#3-t-set-will-no-longer-work-to-define-a-slot))
-- slots capabilities have been improved ([doc](doc/reference/slots.md))
-  - params can be give to slot content (to pass information from slot owner to slot user)
-  - slots are given as a `prop` (and can be manipulated/propagated to sub components )
-  - slots can define scopes (to pass information from slot user to slot owner)
-
-
-**Portal**
-
-- Portal are now defined with `t-portal` ([details](#33-portal-are-now-defined-with-t-portal))
-- portals can now have arbitrary content (no longer restricted to one single child)
-- breaking: does no longer transfer dom events ([details](#13-portal-does-no-longer-transfer-dom-events))
-- breaking: does render as an empty text node instead of `<portal/>` ([details](#14-portal-does-render-as-an-empty-text-node-instead-of-portal))
-
-
-**Miscellaneous**
-
-- improved performance
-- much simpler code 
-- new App class to encapsulate a root Owl component (with the config for that application) ([doc](doc/reference/app.md))
-- new `useEffect` hook ([doc](doc/reference/hooks.md#useeffect))
-- breaking: `Context` is removed ([details](#15-context-is-removed))
-- breaking: `env` is now totally empty ([details](#16-env-is-now-totally-empty))
-- breaking: `env` is now frozen ([details](#28-env-is-now-frozen))
-- new hook: `useChildSubEnv` (only applies to child components) ([details](#27-usechildsubenv-only-applies-to-child-components))
-- breaking: most exports are exported at top level ([details](#18-most-exports-are-exported-at-top-level))
-- breaking: properties are no longer set as attributes ([details](#19-properties-are-no-longer-set-as-attributes))
-- breaking: `EventBus` api changed: it is now an `EventTarget` ([details](#21-eventbus-api-changed-it-is-now-an-eventtarget))
-- breaking: `Store` is removed ([details](#22-store-is-removed))
-- breaking: `Router` is removed ([details](#23-router-is-removed))
-- breaking: transition system is removed ([details](#24-transition-system-is-removed))
-- breaking: no more global components or templates ([details](#25-no-more-global-components-or-templates))
-- breaking: `AsyncRoot` utility component is removed ([details](#26-asyncroot-utility-component-is-removed))
-- breaking: `renderToString` function on qweb has been removed ([details](#32-rendertostring-on-qweb-has-been-removed))
-- breaking: `debounce` utility function has been removed ([details](#34-debounce-utility-function-has-been-removed))
-- breaking: `browser` object has been removed ([details](#39-browser-object-has-been-removed))
-
-## Details/Rationale/Migration
-
-All changes are listed in no particular order.
-
-### 1. component 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`:
-
-```js
-class MyComponent extends Component {
-  mounted() {
-    // do something
-  }
-}
-```
-should become:
-```js
-class MyComponent extends Component {
-  setup() {
-    onMounted(() => {
-      // do something
-    });
-  }
-}
-```
-
-Documentation: [Component Lifecycle](doc/reference/component.md#lifecycle)
-
-### 2. components 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.
-
-
-### 3. **`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:
-
-```xml
-<SideBar><t t-set="content">content</t></SideBar>
-```
-should become:
-```xml
-<SideBar><t t-set-slot="content">content</t></SideBar>
-```
-
-### 4. `mount` method API is simpler
-
-Before, the `mount` method was used like this:
-
-```js
-await mount(Root, { target: document.body });
-```
-
-It is now simpler and takes the root component and a target argument:
-
-```js
-await mount(Root, document.body);
-```
-
-Rationale: the `mount` method is only useful anyway for small toy examples,
-because real applications will need to configure the templates, the translations,
-and other stuff. All complex usecases need to go through the new `App` class,
-that encapsulates the root of an owl application.
-
-Documentation: [Mounting a component](doc/reference/app.md#mount-helper)
-
-### 5. components can no longer be instantiated and mounted by hand
-
-In Owl 1, it was possible to instantiate a component by hand:
-
-```js
-const root = new Root();
-await root.mount(document.body);
-```
-
-Now, it is no longer possible. All component instantiations should be done by
-the owl framework itself.
-
-Rationale: the `mount` method does not make sense for all non root components.
-Also, the fact that it was possible for a component to be sometimes root,
-sometimes a child made for a weird constructor signature. This changes makes it
-simpler.
-
-Migration: all code doing that should use either the `mount` method (if the use
-case is simple enough, or the `App` class):
-
-```js
-const app = new App(Root);
-app.configure({ templates: ..., ...});
-await app.mount(document.body);
-```
-
-### 6. components can no longer be unmounted/remounted
-
-Rationale: this is a very difficult feature to implement (it adds a lot of possible
-state transitions), compared to its benefit.
-
-Migration: all code using it should find a way to export and reimport the state
-
-### 7. template name is no longer inferred from the class name
-
-Before, it was possible to define a component without specifying its template:
-
-```js
-class Blabla extends Component {
-    // no static template here!
-}
-```
-with the `Blabla` template. It also worked with subclasses. But then, this means
-that the code had to look up all the super classes names to find the correct
-template.
-
-Rationale: in practice, it is not really useful, since all templates are usually
-namespaced: `web.SomeComponent` anyway. All the trouble to do that was just not
-worth it.
-
-Migration: simply explicitely defines the template key everytime:
-
-```js
-class Blabla extends Component {}
-Blabla.template = "Blabla";
-```
-
-### 8. components no longer have a `shouldUpdate` method
-
-Rationale: `shouldUpdate` is a dangerous method to use, that may cause a lot of
-issues. Vue does not have such a mechanism (see https://github.com/vuejs/vue/issues/4255),
-because the reactivity system in Vue is smart enough to only rerender the minimal
-subset of components that is subscribed to a piece of state. Now, Owl 2 features
-a much more powerful reactivity system, so the same rationale applies: in a way,
-it's like each Owl 2 component has a `shouldUpdate` method that precisely tracks
-every value used by the component.
-
-Migration code: remove the `shouldUpdate` methods, and it should work as well
-as before.
-
-### 9. component.el is removed
-
-This comes from the fact that Owl 2 supports fragments (arbitrary content).
-
-Migration: if one need a reference to the root htmlelement of a template, it is
-suggested to simply add a `ref` on it, and access the reference as needed.
-
-Documentation: [Refs](doc/reference/refs.md)
-
-### 10. style/class on components are now regular props
-
-Before, it was possible to do this in a template:
-
-```xml
-<Child style="..." class="..."/>
-```
-(or with `t-att-style` and `t-att-class`). This does no longer work, as they are
-now considered normal props.
-
-Rationale: with the move to fragments, the semantics of where the style/class
-attribute should be set is unclear. Also, it is actually very hard to implement
-properly, in particular with higher order components. And another issue is that
-it (slightly) breaks the encapsulation of behaviour from the `Child` component
-perspective.
-
-Migration: each component that wishes to be customized should explicitely add
-the `class` and `style` attributes in its template. Also, the parent component
-should be aware that since we are talking about props, it should be a javascript expression:
-
-In parent:
-
-```xml
-<Child class="'o_my_god'"/>
-```
-and in child:
-
-```xml
-    <div t-att-class="props.class">
-        ...
-    </div>
-```
-
-### 11. components can no longer be mounted with position=self
-
-Rationale: this is due to the implementation of owl 2 virtual dom. The hack
-necessary to support position=self does not work. This position also is not
-compatible with the fact that a component can have a root `<div>` then later,
-change it to something else, or even a text node.
-
-Migration: no real way to do the same. Owl application needs to be appended or
-prepended in something, maybe a `div`. Remember that you the root component
-can have multiple roots
-
-Documentation:
-- [Fragments](doc/reference/templates.md#fragments)
-- [Mounting a component](doc/reference/app.md#mount-helper)
-
-
-### 13. Portal does no longer transfer DOM events
-
-In Owl 1, a Portal component would listen to events emitted on its portalled
-child, and redispatch them on itself. It no longer works.
-
-Rationale: Portal now supports an arbitrary content (so, more than one child,
-and potentially no html element), so it is already unclear what it should listen
-to. Also, redispatching events was an hack. And this changes allows the portal
-to render itself as a text node, which is nice. This is also in line with the
-fact that modern Owl moves toward using callback instead of `t-on` for communication.
-
-Migration: use callback if possible to communicate. Otherwise, use a sub env.
-
-### 14. Portal does render as an empty text node instead of `<portal/>`
-
-That is pretty nice. No real migration needed.
-
-### 15. Context is removed
-
-Context was an abstraction in Owl that was used to define some reactive state
-and to let some components subscribe to it, then only them would be rerendered
-if the context was updated. This has been removed.
-
-Rationale: first, the Context api and code was kind of awkward, which is a sign
-that the abstraction is not well thought. But the good news is that it is actually
-completely replaced by the new reactivity system, which is even more powerful,
-since it can tracks changes key by key.
-
-Migration: replace all uses of Context with the new reactivity system.
-
-```js
-// somewhere, maybe in a service, or in the global env
-const context = observe({some: "state"})
-
-// in a component that would previously get a reference to the context:
-
-setup() {
-    this.context = useState(context);
-    // now the component is subscribed to the context and will react to any
-    // change for any key read by the component, and only those changes
-}
-```
-
-### 16. `env` is now totally empty
-
-In Owl 1, the `env` object had to contain a QWeb instance. This was the way
-components would get a reference to their template function. It no longer works
-that way: the `env` object is now totally empty (from the perspective of Owl).
-It is now a user space concept, useful for the application.
-
-Rationale: first, there is no longer a QWeb class. Also, this changes simplifies
-the way components works internally.
-
-Migration: there is no proper way to get an equivalent. The closest is to get
-a reference to the root App using `this.__owl__.app`. If you need to do this,
-let us know. If this is a legitimate usecase, we may add a `useApp` hook.
-
-Documentation: [Environment](doc/reference/environment.md)
-
-### 17. `t-component` no longer accepts strings
-
-In owl 1, we could write this:
-
-```xml
-<t t-component="Coucou"/>
-```
-
-This meant that Owl would look for the component class like this: `components["Coucou"]`,
-so, essentially equivalent to `<Coucou/>`. In Owl 2, the `t-component` directive
-is assumed to be an expression evaluating to a component class:
-
-```js
-class Parent extends Component {
-  static template = xml`<t t-component="Child"/>`;
-  Child = Child;
-}
-```
-
-Rationale: it simply seems more consistent with the way directive works. Also,
-the implementation is slightly simpler.
-
-Migration: simply using `constructor.components.Coucou` instead of `Coucou` will
-do the trick.
-
-Documentation: [Component](doc/reference/component.md#dynamic-sub-components)
-
-### 18. most exports are exported at top level
-
-Most exports are flattened: for ex, `onMounted` is in owl, not in `owl.hooks`.
-
-Rationale: this makes it easier to work with, instead of importing stuff from 
-`owl`, then `owl.hooks` and `owl.tags` for example.
-
-Migration: all import code simply need to be slightly adapted.
-
-### 19. Properties are no longer set as attributes
-
-Formerly, html properties `<input type="checkbox" t-att-checked="blah"/>` were
-set as property and as attribute, so, they would be visible in the DOM:
-`<input type="checkbox" checked="blah"/>`. Now, they are treated as property only:
-`<input type="checkbox"/>`.
-
-Rationale: this is actually simple to do, is faster, and makes more sense to me.
-
-### 20. `t-foreach` should always have a corresponding `t-key`
-
-It was possible in Owl 1 to write a `t-foreach` without a `t-key`. In that case,
-the index was used as key.  Since it was clearly a possible bug, Owl 1 had a
-warning in some cases, when it could detect that there was definitely not a `t-key`.
-However, this was imperfect, and in some cases no warning was displayed. In Owl 2,
-the tag with a `t-foreach` has to have a corresponding `t-key`.
-
-Rationale: this makes it easier to avoid bugs.
-
-Migration: simply move the `t-key` to the tag with the `t-foreach`. If this is
-a situation where there is really not a need for a `t-key`, you can still add
-it with the `_index` suffix:
-
-```xml
-<div t-foreach="items" t-as="item" t-key="item_index">
-  ...
-</div>
-```
-
-### 21. `EventBus` api changed: it is now an `EventTarget`
-
-In Owl 1, the `EventBus` class was done manually, with a custom API. In Owl 2,
-it simply extends `EventTarget` (the native Dom class), so its implementation
-is basically only 5 lines long. This means that it has now the usual DOM interface:
-
-```js
-bus.addEventListener('event-name', callback);
-```
-
-Rationale: it makes it easier to have just one interface to remember, it makes
-the code simpler
-
-Migration: most bus methods need to be adapted. So, `bus.on("event-type", owner, (info) => {...})` has to be
-rewritten like this: `bus.addEventListener("event-type", (({detail: info}) => {...}).bind(owner))`.
-
-Do not forget to similarly replace `bus.off(...)` by `bus.removeEventListener(...)`
-
-Documentation: [EventBus](doc/reference/utils.md#eventbus)
-
-### 22. `Store` is removed
-
-The Store system had been abandoned in owl 2.
-
-Rationale: first, it was complicated to maintain. Second, it was not really
-used in Odoo. Finally, the new reactivity system seems to be a pretty good basis
-to write a store, and it should not take much work. Also, this can be done in
-user space (so, not necessarily at the framework level). Another point is that
-the store API was invented before the hooks, then was still a little awkward.
-
-Migration:
-- rewrite the code not to use a store
-- probably use the reactivity system instead and build a store class and a few
-  hooks on top of it.
-
-### 23. `Router` is removed
-
-Rationale: Router was not used that much, and it felt like it did not fit in Owl 2.
-Its API needs to be reworked, and we are not confident that it is a good
-experience to use it. Also, it can be done in userspace (it does not need specific
-integration at the framework level)
-
-Migration: reimport all missing piece from the code in Owl 1.
-
-### 24. transition system is removed
-
-Rationale: this was a high ratio cost/value, with a lot of potential for bugs.
-We feel like there should be a way to reimplement in userspace the simple cases.
-
-Maybe something like: add a `t-ref` in the template, and define a hook `useFadeOut`
-that takes the ref, and add a fadeout class at initial render, then in mounted,
-wait for a micro tick and remove it.
-
-Migration: try to reimplement it manually. 
-
-### 25. no more global components or templates
-
-It was possible in Owl 1 to register globally a component or a template. This is
-no longer the case in Owl 2.
-
-Rationale: first, this was a tradeoff: ease of use was gained, but at the cost
-of a higher complexity. Users had to know that there was a magic mechanism. Also,
-it was not used much in practice, and the cost of having to import manually components
-is low.  Finally, this can be mostly done in user space (for example, by subclassing
-`Component`).
-
-Migration: import manually all required global components, or find a way to organize
-the code to do it.
-
-### 26. `AsyncRoot` utility component is removed
-
-Rationale: it was difficult to understand, never used, and not really useful.
-It seems better to control the asynchrony of an application by simply controlling
-how/when the state is updated, and how each component is loading/updating itself.
-
-Migration: remove the `AsyncRoot` component, then possibly, reorganize the code
-to fetch data in a higher order component, and using a `t-if/t-else` to display
-either a fallback when the data is not ready, or the actual component with data
-as props.  If there is no escape, and `AsyncRoot` is needed, please reach out to
-us so we can study this usecase.
-
-### 27. `useChildSubEnv` (only applies to child components)
-
-In Owl, a call to `useSubEnv` would define a new environment for the children
-AND the component. It is very useful, but in some cases, one only need to update
-the children component environment. This can now be done with a new hook:
-[`useChildSubEnv`](doc/reference/hooks.md#usesubenv-and-usechildsubenv)
-
-### 28. `env` is now frozen
-
-In Owl 2, the `env` object is frozen. It can no longer be modified (structurally)
-arbitrarily. 
-
-Rationale: it seems like the `env` object purpose is to have a global channel of
-communication between components. It is however scary if anyone can add something
-to it.  The usual use case is to add something to the environment for some child
-components. This use case still works with `useSubEnv`.
-
-Migration: use `useSubEnv` instead of writing directly to the env.  Also, note
-that the environment given to the App can initially contain anything.
-
-Documentation: [Environment](doc/reference/environment.md)
-
-### 29. `t-ref` does not work on component
-
-Before, `t-ref` could be used to get a reference to a child component. It no
-longer works.
-
-Rationale: the possibility of having a ref to a child component breaks the
-encapsulation provided by Owl components: a child component now has a private
-and a public interface.  Another issue is that it may be unclear when the ref
-should be set: is the component active on setup, or on mounted? Also, it is
-kind of awkward to implement.
-
-Migration: the `env` and `props` should provide a communication channel wide enough:
-the sub component can expose its public API by calling a callback at the proper
-timing, or by triggering an event.
-
-### 30. `t-on` does not accept expressions, only functions
-
-In Owl 1, it was possible to define simple expressions inline, in a template:
-
-```xml
-<button t-on-click="state.value = state.value + 1">blabla</button>
-<button t-on-click="someFunction(someVar)">blabla</button>
-```
-
-This does not work anymore. Now, the `t-on` directive assumes that what it get is
-a function.
-
-Rationale: the fact that owl 1 had to support expressions meant that it was not
-possible to properly inject the event in general. With this restriction, Owl 2
-can support more general use cases. Also, the examples above can simply be
-wrapped in a lambda function. 
-
-Migration: use lambda functions. For example, the two examples above can be
-adapted like this:
-
-```xml
-<button t-on-click="() => state.value = state.value + 1">blabla</button>
-<button t-on-click="() => this.someFunction(someVar)">blabla</button>
-```
-
-Documentation: [Event Handling](doc/reference/event_handling.md)
-
-### 31. components can now have arbitrary content
-
-Before Owl 2, components had to limit themselves to one single htmlelement as
-root. Now, the content is arbitrary: it can be empty, or multiple html elements.
-So, the following template works for components:
-
-```xml
-  <div>1</div>
-  <div>2</div>
-  hello
-```
-
-Documentation: [Fragments](doc/reference/templates.md#fragments)
-
-### 32. `renderToString` on QWeb has been removed
-
-Rationale: the `renderToString` function was a qweb method, which made sense because
-the qweb instance knew all templates. But now, the closest analogy is the `App`
-class, but it is not as convenient, since the `app` instance is no longer visible
-to components (while before, `qweb` was in the environment).
-
-Also, this can easily be done in userspace, by mounting a component in a div.  For example:
-
-```js
-export async function renderToString(template, context) {
-  class C extends Component {
-    static template = template;
-    setup () {
-        Object.assign(this, context);
-    }
-  }
-  const div = document.createElement('div');
-  document.body.appendChild(div);
-  const app = new App(C);
-  await app.mount(div);
-  const result = div.innerHTML;
-  app.destroy();
-  div.remove();
-  return result;
-}
-```
-
-The function above works for most cases, but is asynchronous.  An alternative
-function could look like this:
-
-```js
-const { App, blockDom } = owl;
-const app = new App(Component); // act as a template repository
-
-function renderToString(template, context = {}) {
-  app.addTemplate(template, template, { allowDuplicate: true });
-  const templateFn = app.getTemplate(template);
-  const bdom = templateFn(context, {});
-  const div = document.createElement('div')
-  blockDom.mount(bdom, div);
-  return div.innerHTML;
-}
-```
-
-This is a synchronous function, so it will not work with components, but it should
-be useful for most simple templates.
-
-Also note that these two examples do not translate their templates. To do that,
-they need to be modified to pass the proper translate function to the `App`
-configuration.
-
-### 33. Portal are now defined with `t-portal`
-
-Before Owl 2, one could use the `Portal` component by importing it and using it.
-Now, it is no longer available. Instead, we can simply use the `t-portal` directive:
-
-```xml
-<div>
-  some content
-  <span t-portal="'body'">
-    portalled content
-  </span>
-<div>
-```
-
-Rationale: it makes it slightly simpler to use (just need the directive, instead
-of having to import and use a sub component), it makes the implementation slightly
-simpler as well. Also, it prevents subclassing the Portal component, which could
-be dangerous, since it is really doing weird stuff under the hood, and could
-easily be broken inadvertendly.
-
-### 34. `debounce` utility function has been removed
-
-Rationale: it did not really help that much, is available as utility function
-elsewhere, so, we decided to have a smaller footprint by focusing Owl on what
-it does best.
-
-### 35. `render` method does not return a promise anymore
-
-Rationale: using the `render` method directly and waiting for it to complete
-was slightly un-declarative. Also, it can be done using the lifecycle hooks
-any way.
-
-Migration: if necessary, one can use the lifecycle hooks to execute code after
-the next mounted/patched operation.
-
-### 36. `catchError` method is replaced by `onError` hook
-
-The `catchError` method was used to provide a way to components to handle errors
-occurring during the component lifecycle. This has been replaced by a `onError`
-hook, with a similar API.
-
-Rationale: `catchError` felt a little big awkward, when most of the way we
-interact with componentss is via hooks.  Using hooks felt more natural and
-consistent.
-
-Migration: mostly replace all `catchError` methods by `onError` hooks in the
-`setup` method.
-
-Documentation: [Error Handling](doc/reference/error_handling.md)
-
-
-## 37. Support for inline css (`css` tag and static `style`) has been removed
-
-Rationale: Owl tries to focus on what it does best, and supporting inline css
-was not a priority.  It used to support some simplified scss language, but it
-was feared that it would cause more trouble than it was worth. Also, it seems
-like it can be done in userspace.
-
-Migration: it seems possible to implement an equivalent solution using hooks. A
-simple implementation could look like this:
-
-```js
-let cache = {};
-
-function useStyle(css) {
-  if (!css in cache) {
-    const sheet = document.createElement("style");
-    sheet.innerHTML = css;
-    cache[css] = sheet;
-    document.head.appendChild(sheet);
-  }
-}
-```
-
-## 38. `t-raw` directive has been removed (replaced by `t-out`)
-
-To match the Odoo qweb server implementation, Owl does no longer implement `t-raw`.
-It is replaced by the `t-out` directive, which is safer: it requires the data
-to be marked explicitely as markup if it is to be inserted without escaping.
-Otherwise, it will be escaped (just like `t-esc`).
-
-Migration: replace all `t-raw` uses by `t-out`, and uses the `markup` function
-to mark all the js values.
-
-Documentation: [Outputting data](doc/reference/templates.md#outputting-data)
-
-## 39. `browser` object has been removed
-
-Rationale: the `browser` object caused more trouble than it was worth. Also, it
-seems like this should be done in user space, not at the framework level.  
-
-Migration: code should just be adapted to either use another browser object,
-or to use native browser function (and then, just mock them directly).
-
-## 40. Rendering a component does not necessarily render child components
-
-Before, if one had the following component tree:
-
-```mermaid
-  graph TD;
-      A-->B;
-      A-->C;
-```
-
-when `A` would render, it would also render `B` and `C`. Now, in Owl 2, it will 
-(shallow) compare the before and after props, and `B` or `C` will only be rerendered
-if their props have changed.
-
-Now, the question is what happens if the props have changed, but in a deeper way?
-In that case, Owl will know, because each props are now reactive. So, if some
-inner value read by `B` was changed, then only `B` will be updated.
-
-Rationale: This was just not possible in Owl 1, but it now possible. This is
-due to the rewriteof the underlying rendering engine and the reactivity
-system. The goal is to have a big performance boost in large screen with many
-components: now Owl only rerender what is strictly useful.
-

COPYRIGHT

@@ -1,14 +0,0 @@
-
-Most of the files are
-
-  Copyright (c) 2004-2015 Odoo S.A.
-
-Many files also contain contributions from third
-parties. In this case the original copyright of
-the contributions can be traced through the
-history of the source version control system.
-
-When that is not the case, the files contain a prominent
-notice stating the original copyright and applicable
-license, or come with their own dedicated COPYRIGHT
-and/or LICENSE file.

LICENSE

@@ -1,856 +0,0 @@
-OWL is published under the GNU LESSER GENERAL PUBLIC LICENSE, Version 3
-(LGPLv3), as included below. Since the LGPL is a set of additional
-permissions on top of the GPL, the text of the GPL is included at the
-bottom as well.
-
-Some external libraries and contributions bundled with OWL may be published
-under other GPL-compatible licenses. For these, please refer to the relevant
-source files and/or license files, in the source code tree.
-
-**************************************************************************
-
-                   GNU LESSER GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-
-  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
-
-  0. Additional Definitions.
-
-  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
-
-  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
-
-  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
-
-  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
-Version".
-
-  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
-
-  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
-
-  1. Exception to Section 3 of the GNU GPL.
-
-  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
-
-  2. Conveying Modified Versions.
-
-  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
-version:
-
-   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
-
-   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
-
-  3. Object Code Incorporating Material from Library Header Files.
-
-  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
-
-   a) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
-
-  4. Combined Works.
-
-  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
-the following:
-
-   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
-   covered by this License.
-
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
-
-   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
-
-   d) Do one of the following:
-
-       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
-
-       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
-       Version.
-
-   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
-
-  5. Combined Libraries.
-
-  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
-choice, if you do both of the following:
-
-   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
-
-   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
-
-  6. Revised Versions of the GNU Lesser General Public License.
-
-  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
-
-  Each version is given a distinguishing version number. If the
-Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
-
-  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
-Library.
-
-**************************************************************************
-
-                    GNU GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
-
- Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
-                            Preamble
-
-  The GNU General Public License is a free, copyleft license for
-software and other kinds of works.
-
-  The licenses for most software and other practical works are designed
-to take away your freedom to share and change the works.  By contrast,
-the GNU General Public License is intended to guarantee your freedom to
-share and change all versions of a program--to make sure it remains free
-software for all its users.  We, the Free Software Foundation, use the
-GNU General Public License for most of our software; it applies also to
-any other work released this way by its authors.  You can apply it to
-your programs, too.
-
-  When we speak of free software, we are referring to freedom, not
-price.  Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  To protect your rights, we need to prevent others from denying you
-these rights or asking you to surrender the rights.  Therefore, you have
-certain responsibilities if you distribute copies of the software, or if
-you modify it: responsibilities to respect the freedom of others.
-
-  For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must pass on to the recipients the same
-freedoms that you received.  You must make sure that they, too, receive
-or can get the source code.  And you must show them these terms so they
-know their rights.
-
-  Developers that use the GNU GPL protect your rights with two steps:
-(1) assert copyright on the software, and (2) offer you this License
-giving you legal permission to copy, distribute and/or modify it.
-
-  For the developers' and authors' protection, the GPL clearly explains
-that there is no warranty for this free software.  For both users' and
-authors' sake, the GPL requires that modified versions be marked as
-changed, so that their problems will not be attributed erroneously to
-authors of previous versions.
-
-  Some devices are designed to deny users access to install or run
-modified versions of the software inside them, although the manufacturer
-can do so.  This is fundamentally incompatible with the aim of
-protecting users' freedom to change the software.  The systematic
-pattern of such abuse occurs in the area of products for individuals to
-use, which is precisely where it is most unacceptable.  Therefore, we
-have designed this version of the GPL to prohibit the practice for those
-products.  If such problems arise substantially in other domains, we
-stand ready to extend this provision to those domains in future versions
-of the GPL, as needed to protect the freedom of users.
-
-  Finally, every program is threatened constantly by software patents.
-States should not allow patents to restrict development and use of
-software on general-purpose computers, but in those that do, we wish to
-avoid the special danger that patents applied to a free program could
-make it effectively proprietary.  To prevent this, the GPL assures that
-patents cannot be used to render the program non-free.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Use with the GNU Affero General Public License.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU Affero General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the special requirements of the GNU Affero General Public License,
-section 13, concerning interaction through a network will apply to the
-combination as such.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU General Public License from time to time.  Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    You should have received a copy of the GNU General Public License
-    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If the program does terminal interaction, make it output a short
-notice like this when it starts in an interactive mode:
-
-    <program>  Copyright (C) <year>  <name of author>
-    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
-    This is free software, and you are welcome to redistribute it
-    under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License.  Of course, your program's commands
-might be different; for a GUI interface, you would use an "about box".
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU GPL, see
-<http://www.gnu.org/licenses/>.
-
-  The GNU General Public License does not permit incorporating your program
-into proprietary programs.  If your program is a subroutine library, you
-may consider it more useful to permit linking proprietary applications with
-the library.  If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.  But first, please read
-<http://www.gnu.org/philosophy/why-not-lgpl.html>.
-
-
-**************************************************************************

README.md

@@ -1,128 +0,0 @@
-<h1 align="center">🦉 <a href="https://odoo.github.io/owl/">Owl Framework</a> 🦉</h1>
-
- [![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)
-[![npm version](https://badge.fury.io/js/@odoo%2Fowl.svg)](https://badge.fury.io/js/@odoo%2Fowl)
-[![Downloads](https://img.shields.io/npm/dm/@odoo%2Fowl.svg)](https://www.npmjs.com/package/@odoo/owl)
-
-_Class based components with hooks, reactive state and concurrent mode_
-
-**Try it online!** you can experiment with the Owl framework in an online [playground](https://odoo.github.io/owl/playground).
-
-## Project Overview
-
-The Odoo Web Library (Owl) is a smallish (~<20kb gzipped) UI framework built by
-[Odoo](https://www.odoo.com/) 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](#documentation),
-- [changelog](CHANGELOG.md) (from Owl 1.x to 2.x),
-- [playground](https://odoo.github.io/owl/playground)
-
-## Example
-
-Here is a short example to illustrate interactive components:
-
-```javascript
-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](doc/reference/hooks.md#usestate).
-Also, all examples here uses the [`xml` helper](doc/reference/templates.md#inline-templates) to define inline templates.
-But this is not mandatory, many applications will load templates separately.
-
-More interesting examples can be found on the
-[playground](https://odoo.github.io/owl/playground) application.
-
-## Documentation
-
-### Learning Owl
-
-Are you new to Owl? This is the place to start!
-
-- [Tutorial: create a TodoList application](doc/learning/tutorial_todoapp.md)
-- [How to start an Owl project](doc/learning/quick_start.md)
-- [How to test Components](doc/learning/how_to_test.md)
-
-### Reference
-
-- [Overview](doc/readme.md)
-- [App](doc/reference/app.md)
-- [Component](doc/reference/component.md)
-- [Component Lifecycle](doc/reference/component.md#lifecycle)
-- [Concurrency Model](doc/reference/concurrency_model.md)
-- [Dev mode](doc/reference/app.md#dev-mode)
-- [Dynamic sub components](doc/reference/component.md#dynamic-sub-components)
-- [Environment](doc/reference/environment.md)
-- [Error Handling](doc/reference/error_handling.md)
-- [Event Handling](doc/reference/event_handling.md)
-- [Form Input Bindings](doc/reference/input_bindings.md)
-- [Fragments](doc/reference/templates.md#fragments)
-- [Hooks](doc/reference/hooks.md)
-- [Loading Templates](doc/reference/app.md#loading-templates)
-- [Mounting a component](doc/reference/app.md#mount-helper)
-- [Portal](doc/reference/portal.md)
-- [Precompiling templates](doc/reference/precompiling_templates.md)
-- [Props](doc/reference/props.md)
-- [Props Validation](doc/reference/props.md#props-validation)
-- [Reactivity](doc/reference/reactivity.md)
-- [Rendering SVG](doc/reference/templates.md#rendering-svg)
-- [Refs](doc/reference/refs.md)
-- [Slots](doc/reference/slots.md)
-- [Sub components](doc/reference/component.md#sub-components)
-- [Sub templates](doc/reference/templates.md#sub-templates)
-- [Templates (Qweb)](doc/reference/templates.md)
-- [Translations](doc/reference/translations.md)
-- [Utils](doc/reference/utils.md)
-
-### Other Topics
-
-- [Notes On Owl Architecture](doc/miscellaneous/architecture.md)
-- [Comparison with React/Vue](doc/miscellaneous/comparison.md)
-- [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md)
-- [Changelog (from owl 1.x to 2.x)](CHANGELOG.md)
-- [Notes on compiled templates](doc/miscellaneous/compiled_template.md)
-
-## 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:
-
-- [owl](https://github.com/odoo/owl/releases/latest)
-

assets/highlight.tomorrow.css

@@ -0,0 +1,72 @@
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #8e908c;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #c82829;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #f5871f;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #eab700;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #718c00;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #4271ae;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #8959a8;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: white;
+  color: #4d4d4c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}

assets/main.css

@@ -0,0 +1,116 @@
+html, body {
+  background-color: #fefefe;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  height: 100%;
+  margin: 0;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  display: grid;
+  grid-gap: 3rem;
+  grid-template-areas: "header" "nav" "main" "footer";
+  grid-template-columns: 1fr;
+  height: 100%;
+  grid-template-rows: 1fr 3rem 1fr 3rem;
+}
+
+@media screen and (max-width: 800px) {
+  body {
+    grid-template-rows: 1fr 3rem 1fr 5rem;
+  }
+}
+
+a {
+  color: #00A09D;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:visited {
+  text-decoration: underline;
+}
+
+header {
+  grid-area: header;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-align: center;
+  padding-top: 3rem !important;
+}
+
+hgroup > p {
+  margin-bottom: auto;
+}
+
+nav {
+  grid-area: nav;
+}
+
+main {
+  grid-area: main;
+  /*justify-self: center;*/
+  grid-column: 1 / -1;
+  /*max-width: 80rem !important;*/
+  /*margin: 3rem 0;*/
+}
+
+footer {
+  grid-area: footer;
+  padding-bottom: 3rem !important;
+}
+
+header, nav, footer {
+  text-align: center;
+}
+
+article {
+  padding: 3rem 0;
+}
+
+article h3 {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+article.brand {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+article.design {
+  background-color: #875A7B;
+  color: #f0eeee;
+}
+
+header .homepage-logo {
+  margin-bottom: 2rem;
+}
+
+@media (min-width: 40rem) {
+  .row {
+    flex-direction: column;
+    margin-left: initial;
+    width: 100%;
+  }
+
+  .row .column {
+    margin-bottom: initial;
+    padding: initial;
+  }
+}
+@media (min-width: 60rem) {
+  .row {
+    flex-direction: row;
+    margin-left: -1.0rem;
+    width: calc(100% + 2.0rem);
+  }
+  .row .column {
+    margin-bottom: inherit;
+    padding: 0 1.0rem;
+  }
+}

assets/milligram.css

@@ -0,0 +1,602 @@
+/*!
+ * Milligram v1.3.0
+ * https://milligram.github.io
+ *
+ * Copyright (c) 2017 CJ Patoilo
+ * Licensed under the MIT license
+ */
+
+*,
+*:after,
+*:before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+}
+
+body {
+  color: #606c76;
+  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  font-size: 1.6em;
+  font-weight: 300;
+  letter-spacing: .01em;
+  line-height: 1.6;
+}
+
+blockquote {
+  border-left: 0.3rem solid #d1d1d1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 1rem 1.5rem;
+}
+
+blockquote *:last-child {
+  margin-bottom: 0;
+}
+
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  background-color: #9b4dca;
+  border: 0.1rem solid #9b4dca;
+  border-radius: .4rem;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 1.1rem;
+  font-weight: 700;
+  height: 3.8rem;
+  letter-spacing: .1rem;
+  line-height: 3.8rem;
+  padding: 0 3.0rem;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.button:focus, .button:hover,
+button:focus,
+button:hover,
+input[type='button']:focus,
+input[type='button']:hover,
+input[type='reset']:focus,
+input[type='reset']:hover,
+input[type='submit']:focus,
+input[type='submit']:hover {
+  background-color: #606c76;
+  border-color: #606c76;
+  color: #fff;
+  outline: 0;
+}
+
+.button[disabled],
+button[disabled],
+input[type='button'][disabled],
+input[type='reset'][disabled],
+input[type='submit'][disabled] {
+  cursor: default;
+  opacity: .5;
+}
+
+.button[disabled]:focus, .button[disabled]:hover,
+button[disabled]:focus,
+button[disabled]:hover,
+input[type='button'][disabled]:focus,
+input[type='button'][disabled]:hover,
+input[type='reset'][disabled]:focus,
+input[type='reset'][disabled]:hover,
+input[type='submit'][disabled]:focus,
+input[type='submit'][disabled]:hover {
+  background-color: #9b4dca;
+  border-color: #9b4dca;
+}
+
+.button.button-outline,
+button.button-outline,
+input[type='button'].button-outline,
+input[type='reset'].button-outline,
+input[type='submit'].button-outline {
+  background-color: transparent;
+  color: #9b4dca;
+}
+
+.button.button-outline:focus, .button.button-outline:hover,
+button.button-outline:focus,
+button.button-outline:hover,
+input[type='button'].button-outline:focus,
+input[type='button'].button-outline:hover,
+input[type='reset'].button-outline:focus,
+input[type='reset'].button-outline:hover,
+input[type='submit'].button-outline:focus,
+input[type='submit'].button-outline:hover {
+  background-color: transparent;
+  border-color: #606c76;
+  color: #606c76;
+}
+
+.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
+button.button-outline[disabled]:focus,
+button.button-outline[disabled]:hover,
+input[type='button'].button-outline[disabled]:focus,
+input[type='button'].button-outline[disabled]:hover,
+input[type='reset'].button-outline[disabled]:focus,
+input[type='reset'].button-outline[disabled]:hover,
+input[type='submit'].button-outline[disabled]:focus,
+input[type='submit'].button-outline[disabled]:hover {
+  border-color: inherit;
+  color: #9b4dca;
+}
+
+.button.button-clear,
+button.button-clear,
+input[type='button'].button-clear,
+input[type='reset'].button-clear,
+input[type='submit'].button-clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: #9b4dca;
+}
+
+.button.button-clear:focus, .button.button-clear:hover,
+button.button-clear:focus,
+button.button-clear:hover,
+input[type='button'].button-clear:focus,
+input[type='button'].button-clear:hover,
+input[type='reset'].button-clear:focus,
+input[type='reset'].button-clear:hover,
+input[type='submit'].button-clear:focus,
+input[type='submit'].button-clear:hover {
+  background-color: transparent;
+  border-color: transparent;
+  color: #606c76;
+}
+
+.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
+button.button-clear[disabled]:focus,
+button.button-clear[disabled]:hover,
+input[type='button'].button-clear[disabled]:focus,
+input[type='button'].button-clear[disabled]:hover,
+input[type='reset'].button-clear[disabled]:focus,
+input[type='reset'].button-clear[disabled]:hover,
+input[type='submit'].button-clear[disabled]:focus,
+input[type='submit'].button-clear[disabled]:hover {
+  color: #9b4dca;
+}
+
+code {
+  background: #f4f5f6;
+  border-radius: .4rem;
+  font-size: 86%;
+  margin: 0 .2rem;
+  padding: .2rem .5rem;
+  white-space: nowrap;
+}
+
+pre {
+  background: #f4f5f6;
+  border-left: 0.3rem solid #9b4dca;
+  overflow-y: hidden;
+}
+
+pre > code {
+  border-radius: 0;
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre;
+}
+
+hr {
+  border: 0;
+  border-top: 0.1rem solid #f4f5f6;
+  margin: 3.0rem 0;
+}
+
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+textarea,
+select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: transparent;
+  border: 0.1rem solid #d1d1d1;
+  border-radius: .4rem;
+  box-shadow: none;
+  box-sizing: inherit;
+  height: 3.8rem;
+  padding: .6rem 1.0rem;
+  width: 100%;
+}
+
+input[type='email']:focus,
+input[type='number']:focus,
+input[type='password']:focus,
+input[type='search']:focus,
+input[type='tel']:focus,
+input[type='text']:focus,
+input[type='url']:focus,
+textarea:focus,
+select:focus {
+  border-color: #9b4dca;
+  outline: 0;
+}
+
+select {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
+  padding-right: 3.0rem;
+}
+
+select:focus {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
+}
+
+textarea {
+  min-height: 6.5rem;
+}
+
+label,
+legend {
+  display: block;
+  font-size: 1.6rem;
+  font-weight: 700;
+  margin-bottom: .5rem;
+}
+
+fieldset {
+  border-width: 0;
+  padding: 0;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  display: inline;
+}
+
+.label-inline {
+  display: inline-block;
+  font-weight: normal;
+  margin-left: .5rem;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 112.0rem;
+  padding: 0 2.0rem;
+  position: relative;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  width: 100%;
+}
+
+.row.row-no-padding {
+  padding: 0;
+}
+
+.row.row-no-padding > .column {
+  padding: 0;
+}
+
+.row.row-wrap {
+  flex-wrap: wrap;
+}
+
+.row.row-top {
+  align-items: flex-start;
+}
+
+.row.row-bottom {
+  align-items: flex-end;
+}
+
+.row.row-center {
+  align-items: center;
+}
+
+.row.row-stretch {
+  align-items: stretch;
+}
+
+.row.row-baseline {
+  align-items: baseline;
+}
+
+.row .column {
+  display: block;
+  flex: 1 1 auto;
+  margin-left: 0;
+  max-width: 100%;
+  width: 100%;
+}
+
+.row .column.column-offset-10 {
+  margin-left: 10%;
+}
+
+.row .column.column-offset-20 {
+  margin-left: 20%;
+}
+
+.row .column.column-offset-25 {
+  margin-left: 25%;
+}
+
+.row .column.column-offset-33, .row .column.column-offset-34 {
+  margin-left: 33.3333%;
+}
+
+.row .column.column-offset-50 {
+  margin-left: 50%;
+}
+
+.row .column.column-offset-66, .row .column.column-offset-67 {
+  margin-left: 66.6666%;
+}
+
+.row .column.column-offset-75 {
+  margin-left: 75%;
+}
+
+.row .column.column-offset-80 {
+  margin-left: 80%;
+}
+
+.row .column.column-offset-90 {
+  margin-left: 90%;
+}
+
+.row .column.column-10 {
+  flex: 0 0 10%;
+  max-width: 10%;
+}
+
+.row .column.column-20 {
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+
+.row .column.column-25 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.row .column.column-33, .row .column.column-34 {
+  flex: 0 0 33.3333%;
+  max-width: 33.3333%;
+}
+
+.row .column.column-40 {
+  flex: 0 0 40%;
+  max-width: 40%;
+}
+
+.row .column.column-50 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.row .column.column-60 {
+  flex: 0 0 60%;
+  max-width: 60%;
+}
+
+.row .column.column-66, .row .column.column-67 {
+  flex: 0 0 66.6666%;
+  max-width: 66.6666%;
+}
+
+.row .column.column-75 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.row .column.column-80 {
+  flex: 0 0 80%;
+  max-width: 80%;
+}
+
+.row .column.column-90 {
+  flex: 0 0 90%;
+  max-width: 90%;
+}
+
+.row .column .column-top {
+  align-self: flex-start;
+}
+
+.row .column .column-bottom {
+  align-self: flex-end;
+}
+
+.row .column .column-center {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+
+@media (min-width: 40rem) {
+  .row {
+    flex-direction: row;
+    margin-left: -1.0rem;
+    width: calc(100% + 2.0rem);
+  }
+  .row .column {
+    margin-bottom: inherit;
+    padding: 0 1.0rem;
+  }
+}
+
+a {
+  color: #9b4dca;
+  text-decoration: none;
+}
+
+a:focus, a:hover {
+  color: #606c76;
+}
+
+dl,
+ol,
+ul {
+  list-style: none;
+  margin-top: 0;
+  padding-left: 0;
+}
+
+dl dl,
+dl ol,
+dl ul,
+ol dl,
+ol ol,
+ol ul,
+ul dl,
+ul ol,
+ul ul {
+  font-size: 90%;
+  margin: 1.5rem 0 1.5rem 3.0rem;
+}
+
+ol {
+  list-style: decimal inside;
+}
+
+ul {
+  list-style: circle inside;
+}
+
+.button,
+button,
+dd,
+dt,
+li {
+  margin-bottom: 1.0rem;
+}
+
+fieldset,
+input,
+select,
+textarea {
+  margin-bottom: 1.5rem;
+}
+
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-bottom: 2.5rem;
+}
+
+table {
+  border-spacing: 0;
+  width: 100%;
+}
+
+td,
+th {
+  border-bottom: 0.1rem solid #e1e1e1;
+  padding: 1.2rem 1.5rem;
+  text-align: left;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 0;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 0;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+  letter-spacing: -.1rem;
+  margin-bottom: 2.0rem;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: 4.6rem;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 3.6rem;
+  line-height: 1.25;
+}
+
+h3 {
+  font-size: 2.8rem;
+  line-height: 1.3;
+}
+
+h4 {
+  font-size: 2.2rem;
+  letter-spacing: -.08rem;
+  line-height: 1.35;
+}
+
+h5 {
+  font-size: 1.8rem;
+  letter-spacing: -.05rem;
+  line-height: 1.5;
+}
+
+h6 {
+  font-size: 1.6rem;
+  letter-spacing: 0;
+  line-height: 1.4;
+}
+
+img {
+  max-width: 100%;
+}
+
+.clearfix:after {
+  clear: both;
+  content: ' ';
+  display: table;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+/*# sourceMappingURL=milligram.css.map */

assets/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

doc/learning/how_to_test.md

@@ -1,95 +0,0 @@
-# 🦉 How to test Components 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Unit Tests](#unit-tests)
-
-## Overview
-
-It is a good practice to test applications and components to ensure that they
-behave as expected. There are many ways to test a user interface: manual
-testing, integration testing, unit testing, ...
-
-In this section, we will discuss how to write unit tests for components.
-
-## Unit Tests
-
-Writing unit tests for Owl components really depends on the testing framework
-used in a project. But usually, it involves the following steps:
-
-- create a test file: for example `SomeComponent.test.js`,
-- in that file, import the code for `SomeComponent`,
-- add a test case:
-  - create a real DOM element to use as test fixture,
-  - create a test environment
-  - create an instance of `SomeComponent`, mount it to the fixture
-  - interact with the component and assert some properties.
-
-To help with this, it is useful to have a `helper.js` file that contains some
-common utility functions:
-
-```js
-let lastFixture = null;
-
-export function makeTestFixture() {
-  let fixture = document.createElement("div");
-  document.body.appendChild(fixture);
-  if (lastFixture) {
-    lastFixture.remove();
-  }
-  lastFixture = fixture;
-  return fixture;
-}
-
-export async function nextTick() {
-  await new Promise((resolve) => setTimeout(resolve));
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-}
-```
-
-With such a file, a typical test suite for Jest will look like this:
-
-```js
-// in SomeComponent.test.js
-import { SomeComponent } from "../../src/ui/SomeComponent";
-import { nextTick, makeTestFixture } from '../helpers';
-
-
-//------------------------------------------------------------------------------
-// Setup
-//------------------------------------------------------------------------------
-let fixture: HTMLElement;
-let env: Env;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-describe("SomeComponent", () => {
-  test("component behaves as expected", async () => {
-    const props = {...}; // depends on the component
-    const comp = await mount(SomeComponent, fixture, { props });
-
-    // do some assertions
-    expect(...).toBe(...);
-
-    fixture.querySelector('button').click();
-    await nextTick();
-
-    // some other assertions
-    expect(...).toBe(...);
-  });
-});
-```
-
-Note that Owl does wait for the next animation frame to actually update the DOM.
-This is why it is necessary to wait with the `nextTick` (or other methods) to
-make sure that the DOM is up-to-date.

doc/learning/quick_start.md

@@ -1,399 +0,0 @@
-# 🦉 How to start an Owl project 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Simple html file](#simple-html-file)
-- [With a static server](#with-a-static-server)
-- [Standard Javascript project](#standard-javascript-project)
-
-## Overview
-
-Each software project has its specific needs. Many of these needs can be solved
-with some tooling: `webpack`, `gulp`, css preprocessor, bundlers, transpilers, ...
-
-Because of that, it is usually not simple to just start a project. Some
-frameworks provide their own tooling to help with that. But then, you have to
-integrate and learn how these applications work.
-
-Owl is designed to be used with no tooling at all. Because of that, Owl can
-"easily" be integrated in a modern build toolchain. In this section, we will
-discuss a few different setups to start a project. Each of these setups has
-advantages and disadvantages in different situations.
-
-## Simple html file
-
-The simplest possible setup is the following: a simple javascript file with your
-code. To do that, let us create the following file structure:
-
-```
-hello_owl/
-  index.html
-  owl.js
-  app.js
-```
-
-The file `owl.js` can be downloaded from the last release published at
-[https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases). It
-is a single javascript file which export all Owl into the global `owl` object.
-Note that there are multiple files, and in this case, we need one of the two
-files suffixed with `.iife`: they are built to be directly used in a browser.
-
-Now, `index.html` should contain the following:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hello Owl</title>
-    <script src="owl.js"></script>
-  </head>
-  <body>
-    <script src="app.js"></script>
-  </body>
-</html>
-```
-
-And `app.js` should look like this:
-
-```js
-const { Component, mount, xml } = owl;
-
-// Owl Components
-class Root extends Component {
-  static template = xml`<div>Hello Owl</div>`;
-}
-
-mount(Root, document.body);
-```
-
-Now, simply loading this html file in a browser should display a welcome message.
-This setup is not fancy, but it is extremely simple. There are no tooling at
-all required. It can be slightly optimized by using the minified build of Owl.
-
-## With a static server
-
-The previous setup has a big disadvantage: the application code is located in a
-single file. Obviously, we could split it in several files and add multiple
-`<script>` tags in the html page, but then we need to make sure the script are
-inserted in the proper order, we need to export each file content in global
-variables and we lose autocompletion across files.
-
-There is a low tech solution to this issue: using native javascript modules.
-This however has a requirement: for security reasons, browsers will not accept
-modules on content served through the `file` protocol. This means that we need
-to use a static server.
-
-Let us start a new project with the following file structure:
-
-```
-hello_owl/
-  src/
-    index.html
-    main.js
-    owl.js
-    root.js
-```
-
-As previously, the file `owl.js` can be downloaded from the last release published at
-[https://github.com/odoo/owl/releases](https://github.com/odoo/owl/releases).
-Note that there are multiple files, and in this case, we need one of the two
-files suffixed with `.iife`: they are built to be directly used in a browser.
-
-Now, `index.html` should contain the following:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hello Owl</title>
-    <script src="owl.js"></script>
-  </head>
-  <body>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
-```
-
-Not that the `main.js` script tag has the `type="module"` attribute. This means
-that the browser will parse the script as a module, and load all its dependencies.
-
-Here is the content of `root.js` and `main.js`:
-
-```js
-// root.js ----------------------------------------------------------------------
-const { Component, mount, xml } = owl;
-
-export class Root extends Component {
-  static template = xml`<div>Hello Owl</div>`;
-}
-
-// main.js ---------------------------------------------------------------------
-import { Root } from "./root.js";
-
-mount(Root, document.body);
-```
-
-The `main.js` file imports the `root.js` file. Note that the import statement has
-a `.js` suffix, which is important. Most text editor can understand this syntax
-and will provide autocompletion.
-
-Now, to execute this code, we need to serve the `src` folder statically. A low
-tech way to do that is to use for example the python `SimpleHTTPServer` feature:
-
-```
-$ cd src
-$ python -m SimpleHTTPServer 8022    # now content is available at localhost:8022
-```
-
-Another more "javascripty" way to do it is to create a `npm` application. To do
-that, we can add the following `package.json` file at the root of the project:
-
-```json
-{
-  "name": "hello_owl",
-  "version": "0.1.0",
-  "description": "Starting Owl app",
-  "main": "src/index.html",
-  "scripts": {
-    "serve": "serve src"
-  },
-  "author": "John",
-  "license": "ISC",
-  "devDependencies": {
-    "serve": "^11.3.0"
-  }
-}
-```
-
-We can now install the `serve` tool with the command `npm install`, and then,
-start a static server with the simple `npm run serve` command.
-
-## Standard Javascript project
-
-The previous setup works, and is certainly good for some usecases, including
-quick prototyping. However, it lacks some useful features, such as livereload,
-a test suite, or bundling the code in a single file.
-
-Each of these features, and many others, can be done in many different ways.
-Since it is really not trivial to configure such a project, we provide here an
-example that can be used as a starting point.
-
-Our standard Owl project has the following file structure:
-
-```
-hello_owl/
-  public/
-    index.html
-  src/
-    components/
-      Root.js
-    main.js
-  tests/
-    components/
-      Root.test.js
-    helpers.js
-  .gitignore
-  package.json
-  webpack.config.js
-```
-
-This project as a `public` folder, meant to contain all static assets, such as
-images and styles. The `src` folder has the javascript source code, and finally,
-`tests` contains the test suite.
-
-Here is the content of `index.html`:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hello Owl</title>
-  </head>
-  <body></body>
-</html>
-```
-
-Note that there are no `<script>` tag here. They will be injected by webpack.
-Now, let's have a look at the javascript files:
-
-```js
-// src/components/Root.js -------------------------------------------------------
-import { Component, xml, useState } from "@odoo/owl";
-
-export class Root extends Component {
-  static template = xml`
-    <div t-on-click="update">
-      Hello <t t-esc="state.text"/>
-    </div>`;
-
-  state = useState({ text: "Owl" });
-  update() {
-    this.state.text = this.state.text === "Owl" ? "World" : "Owl";
-  }
-}
-
-// src/main.js -----------------------------------------------------------------
-import { utils, mount } from "@odoo/owl";
-import { Root } from "./components/Root";
-
-mount(Root, document.body);
-
-// tests/components/Root.test.js ------------------------------------------------
-import { Root } from "../../src/components/Root";
-import { makeTestFixture, nextTick, click } from "../helpers";
-import { mount } from "@odoo/owl";
-
-let fixture;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-describe("Root", () => {
-  test("Works as expected...", async () => {
-    await mount(Root, fixture);
-    expect(fixture.innerHTML).toBe("<div>Hello Owl</div>");
-
-    click(fixture, "div");
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div>Hello World</div>");
-  });
-});
-
-// tests/helpers.js ------------------------------------------------------------
-import { Component } from "@odoo/owl";
-import "regenerator-runtime/runtime";
-
-export async function nextTick() {
-  await new Promise((resolve) => setTimeout(resolve));
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-}
-
-export function makeTestFixture() {
-  let fixture = document.createElement("div");
-  document.body.appendChild(fixture);
-  return fixture;
-}
-
-export function click(elem, selector) {
-  elem.querySelector(selector).dispatchEvent(new Event("click"));
-}
-```
-
-Finally, here is the configuration files `.gitignore`, `package.json` and
-`webpack.config.js`:
-
-```
-node_modules/
-package-lock.json
-dist/
-```
-
-```json
-{
-  "name": "hello_owl",
-  "version": "0.1.0",
-  "description": "Demo app",
-  "main": "src/index.html",
-  "scripts": {
-    "test": "jest",
-    "build": "webpack --mode production",
-    "dev": "webpack-dev-server --mode development"
-  },
-  "author": "Someone",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.6",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^25.1.0",
-    "regenerator-runtime": "^0.13.3",
-    "serve": "^11.3.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.2"
-  },
-  "dependencies": {
-    "@odoo/owl": "^1.0.4"
-  },
-  "babel": {
-    "plugins": ["@babel/plugin-proposal-class-properties"],
-    "env": {
-      "test": {
-        "plugins": ["transform-es2015-modules-commonjs"]
-      }
-    }
-  },
-  "jest": {
-    "verbose": false,
-    "testRegex": "(/tests/.*(test|spec))\\.js?$",
-    "moduleFileExtensions": ["js"],
-    "transform": {
-      "^.+\\.[t|j]sx?$": "babel-jest"
-    }
-  }
-}
-```
-
-```js
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-
-const host = process.env.HOST || "localhost";
-
-module.exports = function (env, argv) {
-  const mode = argv.mode || "development";
-  return {
-    mode: mode,
-    entry: "./src/main.js",
-    output: {
-      filename: "main.js",
-      path: path.resolve(__dirname, "dist"),
-    },
-    module: {
-      rules: [
-        {
-          test: /\.jsx?$/,
-          loader: "babel-loader",
-          exclude: /node_modules/,
-        },
-      ],
-    },
-    resolve: {
-      extensions: [".js", ".jsx"],
-    },
-    devServer: {
-      contentBase: path.resolve(__dirname, "public/index.html"),
-      compress: true,
-      hot: true,
-      host,
-      port: 3000,
-      publicPath: "/",
-    },
-    plugins: [
-      new HtmlWebpackPlugin({
-        inject: true,
-        template: path.resolve(__dirname, "public/index.html"),
-      }),
-    ],
-  };
-};
-```
-
-With this setup, we can now use the following script commands:
-
-```
-npm run build # build the full application in prod mode in dist/
-
-npm run dev # start a dev server with livereload
-
-npm run test # run the jest test suite
-```

doc/learning/tutorial_todoapp.md

@@ -1,997 +0,0 @@
-# 🦉 OWL Tutorial: TodoApp 🦉
-
-For this tutorial, we will build a very simple Todo list application. The app
-should satisfy the following requirements:
-
-- let the user create and remove tasks
-- tasks can be marked as completed
-- tasks can be filtered to display active/completed tasks
-
-This project will be an opportunity to discover and learn some important Owl
-concepts, such as components, store, and how to organize an application.
-
-## Content
-
-1. [Setting up the project](#1-setting-up-the-project)
-2. [Adding a first component](#2-adding-a-first-component)
-3. [Displaying a list of tasks](#3-displaying-a-list-of-tasks)
-4. [Layout: some basic css](#4-layout-some-basic-css)
-5. [Extracting Task as a subcomponent](#5-extracting-task-as-a-subcomponent)
-6. [Adding tasks (part 1)](#6-adding-tasks-part-1)
-7. [Adding tasks (part 2)](#7-adding-tasks-part-2)
-8. [Toggling tasks](#8-toggling-tasks)
-9. [Deleting tasks](#9-deleting-tasks)
-10. [Using a store](#10-using-a-store)
-11. [Saving tasks in local storage](#11-saving-tasks-in-local-storage)
-12. [Filtering tasks](#12-filtering-tasks)
-13. [The Final Touch](#13-the-final-touch)
-14. [Final Code](#final-code)
-
-## 1. Setting up the project
-
-For this tutorial, we will do a very simple project, with static files and
-no additional tooling. The first step is to create the following file structure:
-
-```
-todoapp/
-    index.html
-    app.css
-    app.js
-    owl.js
-```
-
-The entry point for this application is the file `index.html`, which should have
-the following content:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>OWL Todo App</title>
-    <link rel="stylesheet" href="app.css" />
-  </head>
-  <body>
-    <script src="owl.js"></script>
-    <script src="app.js"></script>
-  </body>
-</html>
-```
-
-Then, `app.css` can be left empty for now. It will be useful later on to style
-our application. `app.js` is where we will write all our code. For now, let's
-just put the following code:
-
-```js
-(function () {
-  console.log("hello owl", owl.__info__.version);
-})();
-```
-
-Note that we put everything inside an immediately executed function to avoid leaking
-anything to the global scope.
-
-Finally, `owl.js` should be the last version downloaded from the Owl repository (you can use `owl.min.js` if you prefer). Be aware that you should download the `owl.iife.js` or `owl.iife.min.js`, because these files
-are built to run directly on the browser, and rename it `owl.js` (other files such as `owl.cjs.js` are
-built to be bundled by other tools).
-
-Now, the project should be ready. Loading the `index.html` file into a browser
-should show an empty page, with the title `Owl Todo App`, and it should log a
-message such as `hello owl 2.x.y` in the console.
-
-## 2. Adding a first component
-
-An Owl application is made out of [components](../reference/component.md), with
-a single root component. Let us start by defining a `Root` component. Replace the
-content of the function in `app.js` by the following code:
-
-```js
-const { Component, mount, xml } = owl;
-
-// Owl Components
-class Root extends Component {
-  static template = xml`<div>todo app</div>`;
-}
-
-mount(Root, document.body);
-```
-
-Now, reloading the page in a browser should display a message.
-
-The code is pretty simple: we define a component with an inline template, then
-mount it in the document body.
-
-Note 1: in a larger project, we would split the code in multiple files, with
-components in a sub folder, and a main file that would initialize the application.
-However, this is a very small project, and we want to keep it as simple as possible.
-
-Note 2: this tutorial uses the static class field syntax. This is not yet
-supported by all browsers. Most real projects will transpile their code, so this
-is not a problem, but for this tutorial, if you need the code to work on every
-browser, you will need to translate each `static` keyword to an assignation to
-the class:
-
-```js
-class App extends Component {}
-App.template = xml`<div>todo app</div>`;
-```
-
-Note 3: writing inline templates with the [`xml` helper](../reference/templates.md#inline-templates)
-is nice, but there is no syntax highlighting, and this makes it very easy to
-have malformed xml. Some editors support syntax highlighting for this situation.
-For example, VS Code has an addon `Comment tagged template`, which, if installed,
-will properly display tagged templates:
-
-```js
-    static template = xml /* xml */`<div>todo app</div>`;
-```
-
-Note 4: Large applications will probably want to be able to translate templates.
-Using inline templates makes it slightly harder, since we need additional tooling
-to extract the xml from the code, and to replace it with the translated values.
-
-## 3. Displaying a list of tasks
-
-Now that the basics are done, it is time to start thinking about tasks. To
-accomplish what we need, we will keep track of the tasks as an array of objects
-with the following keys:
-
-- `id`: a number. It is extremely useful to have a way to uniquely identify
-  tasks. Since the title is something created/edited by the user, it offers
-  no guarantee that it is unique. So, we will generate a unique `id` number for
-  each task.
-- `text`: a string, to explain what the task is about.
-- `isCompleted`: a boolean, to keep track of the status of the task
-
-Now that we decided on the internal format of the state, let us add some demo
-data and a template to the `App` component:
-
-```js
-class Root extends Component {
-  static template = xml/* xml */ `
-    <div class="task-list">
-        <t t-foreach="tasks" t-as="task" t-key="task.id">
-            <div class="task">
-                <input type="checkbox" t-att-checked="task.isCompleted"/>
-                <span><t t-esc="task.text"/></span>
-            </div>
-        </t>
-    </div>`;
-
-  tasks = [
-    {
-      id: 1,
-      text: "buy milk",
-      isCompleted: true,
-    },
-    {
-      id: 2,
-      text: "clean house",
-      isCompleted: false,
-    },
-  ];
-}
-```
-
-The template contains a [`t-foreach`](../reference/templates.md#loops) loop to iterate
-through the tasks. It can find the `tasks` list from the component, since the
-component is the rendering context. Note that we use the `id` of each task as a
-`t-key`, which is very common. There are two css classes: `task-list` and `task`,
-that we will use in the next section.
-
-Finally, notice the use of the `t-att-checked` attribute:
-prefixing an attribute by [`t-att`](../reference/templates.md#dynamic-attributes) makes
-it dynamic. Owl will evaluate the expression and set it as the value of the
-attribute.
-
-## 4. Layout: some basic css
-
-So far, our task list looks quite bad. Let us add the following to `app.css`:
-
-```css
-.task-list {
-  width: 300px;
-  margin: 50px auto;
-  background: aliceblue;
-  padding: 10px;
-}
-
-.task {
-  font-size: 18px;
-  color: #111111;
-}
-```
-
-This is better. Now, let us add an extra feature: completed tasks should be
-styled a little differently, to make it clearer that they are not as important.
-To do that, we will add a dynamic css class on each task:
-
-```xml
-    <div class="task" t-att-class="task.isCompleted ? 'done' : ''">
-```
-
-```css
-.task.done {
-  opacity: 0.7;
-}
-```
-
-Notice that we have here another use of a dynamic attribute.
-
-## 5. Extracting Task as a subcomponent
-
-It is now clear that there should be a `Task` component to encapsulate the look
-and behavior of a task.
-
-This `Task` component will display a task, but it cannot _own_ the state of the
-task: a piece of data should only have one owner. Doing otherwise is asking for
-trouble. So, the `Task` component will get its data as a `prop`. This means that
-the data is still owned by the `App` component, but can be used by the `Task`
-component (without modifying it).
-
-Since we are moving code around, it is a good opportunity to refactor the code
-a little bit:
-
-```js
-// -------------------------------------------------------------------------
-// Task Component
-// -------------------------------------------------------------------------
-class Task extends Component {
-  static template = xml /* xml */`
-    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
-      <input type="checkbox" t-att-checked="props.task.isCompleted"/>
-      <span><t t-esc="props.task.text"/></span>
-    </div>`;
-  static props = ["task"];
-}
-
-// -------------------------------------------------------------------------
-// Root Component
-// -------------------------------------------------------------------------
-class Root extends Component {
-  static template = xml /* xml */`
-    <div class="task-list">
-      <t t-foreach="tasks" t-as="task" t-key="task.id">
-        <Task task="task"/>
-      </t>
-    </div>`;
-    static components = { Task };
-
-    tasks = [
-        ...
-    ];
-}
-
-// -------------------------------------------------------------------------
-// Setup
-// -------------------------------------------------------------------------
-mount(Root, document.body, {dev: true});
-```
-
-A lot of stuff happened here:
-
-- first, we have now a sub component `Task`, defined on top of the file,
-- whenever we define a sub component, it needs to be added to the static
-  [`components`](../reference/component.md#static-properties)
-  key of its parent, so Owl can get a reference to it,
-- the `Task` component has a `props` key: this is only useful for validation
-  purpose. It says that each `Task` should be given exactly one prop, named
-  `task`. If this is not the case, Owl will throw an
-  [error](../reference/props.md#props-validation). This is extremely
-  useful when refactoring components
-- finally, to activate the props validation, we need to set Owl's
-  [mode](../reference/app.md#configuration) to `dev`. This is done in the last argument
-  of the `mount` function. Note that this should be removed when an app is used in a real
-  production environment, since `dev` mode is slightly slower, due to extra
-  checks and validations.
-
-## 6. Adding tasks (part 1)
-
-We still use a list of hardcoded tasks. It's really time to give the user a way
-to add tasks himself. The first step is to add an input to the `Root` component.
-But this input will be outside of the task list, so we need to adapt `Root`
-template, js, and css:
-
-```xml
-<div class="todo-app">
-    <input placeholder="Enter a new task" t-on-keyup="addTask"/>
-    <div class="task-list">
-        <t t-foreach="tasks" t-as="task" t-key="task.id">
-            <Task task="task"/>
-        </t>
-    </div>
-</div>
-```
-
-```js
-addTask(ev) {
-    // 13 is keycode for ENTER
-    if (ev.keyCode === 13) {
-        const text = ev.target.value.trim();
-        ev.target.value = "";
-        console.log('adding task', text);
-        // todo
-    }
-}
-```
-
-```css
-.todo-app {
-  width: 300px;
-  margin: 50px auto;
-  background: aliceblue;
-  padding: 10px;
-}
-
-.todo-app > input {
-  display: block;
-  margin: auto;
-}
-
-.task-list {
-  margin-top: 8px;
-}
-```
-
-We now have a working input, which log to the console whenever the user adds a
-task. Notice that when you load the page, the input is not focused. But adding
-tasks is a core feature of a task list, so let us make it as fast as possible by
-focusing the input.
-
-We need to execute code when the `Root` component is ready (mounted). Let's do
-that using the `onMounted` hook. We will also need to get a reference to the
-input, by using the `t-ref` directive with the [`useRef`](../reference/hooks.md#useref) hook:
-
-```xml
-<input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
-```
-
-```js
-// on top of file:
-const { Component, mount, xml, useRef, onMounted } = owl;
-```
-
-```js
-// in App
-setup() {
-    const inputRef = useRef("add-input");
-    onMounted(() => inputRef.el.focus());
-}
-```
-
-This is a very common situation: whenever we need to perform some actions depending
-on the lifecycle of a component, we need to do it in the `setup` method, by using
-one of the lifecycle hook. Here, we first get a reference to the `inputRef`,
-then in the `onMounted` hook, we simply focus the html element.
-
-## 7. Adding tasks (part 2)
-
-In the previous section, we did everything except implement the code that actually
-create tasks! So, let us do that now.
-
-We need a way to generate unique `id` numbers. To do that, we will simply add a
-`nextId` number in `App`. At the same time, let us remove the demo tasks in `App`:
-
-```js
-nextId = 1;
-tasks = [];
-```
-
-Now, the `addTask` method can be implemented:
-
-```js
-addTask(ev) {
-    // 13 is keycode for ENTER
-    if (ev.keyCode === 13) {
-        const text = ev.target.value.trim();
-        ev.target.value = "";
-        if (text) {
-            const newTask = {
-                id: this.nextId++,
-                text: text,
-                isCompleted: false,
-            };
-            this.tasks.push(newTask);
-        }
-    }
-}
-```
-
-This almost works, but if you test it, you will notice that no new task is ever
-displayed when the user press `Enter`. But if you add a `debugger` or a
-`console.log` statement, you will see that the code is actually running as
-expected. The problem is that Owl has no way of knowing that it needs to rerender
-the user interface. We can fix the issue by making `tasks` reactive, with the
-[`useState`](../reference/hooks.md#usestate) hook:
-
-```js
-// on top of the file
-const { Component, mount, xml, useRef, onMounted, useState } = owl;
-
-// replace the task definition in App with the following:
-tasks = useState([]);
-```
-
-It now works as expected!
-
-## 8. Toggling tasks
-
-If you tried to mark a task as completed, you may have noticed that the text
-did not change in opacity. This is because there is no code to modify the
-`isCompleted` flag.
-
-Now, this is an interesting situation: the task is displayed by the `Task`
-component, but it is not the owner of its state, so ideally, it should not modify it.
-However, for now, that's what we will do (this will be improved in a later step).
-In `Task`, change the `input` to:
-
-```xml
-<input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="toggleTask"/>
-```
-
-and add the `toggleTask` method:
-
-```js
-toggleTask() {
-  this.props.task.isCompleted = !this.props.task.isCompleted;
-}
-```
-
-## 9. Deleting tasks
-
-Let us now add the possibility do delete tasks. This is different from the previous
-feature: deleting task has to be done on the task itself, but the actual operation
-need to be done on the task list. So, we need to communicate the request to the
-`Root` component. This is usually done by providing a callback in a prop.
-
-First, let us update the `Task` template, css and js:
-
-```xml
-<div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
-    <input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="toggleTask"/>
-    <span><t t-esc="props.task.text"/></span>
-    <span class="delete" t-on-click="deleteTask">🗑</span>
-</div>
-```
-
-```css
-.task {
-  font-size: 18px;
-  color: #111111;
-  display: grid;
-  grid-template-columns: 30px auto 30px;
-}
-
-.task > input {
-  margin: auto;
-}
-
-.delete {
-  opacity: 0;
-  cursor: pointer;
-  text-align: center;
-}
-
-.task:hover .delete {
-  opacity: 1;
-}
-```
-
-```js
-static props = ["task", "onDelete"];
-
-deleteTask() {
-    this.props.onDelete(this.props.task);
-}
-```
-
-And now, we need to provide the `onDelete` callback to each tasks in the `Root`
-component:
-
-```xml
-  <Task task="task" onDelete.bind="deleteTask"/>
-```
-
-```js
-deleteTask(task) {
-    const index = this.tasks.findIndex(t => t.id === task.id);
-    this.tasks.splice(index, 1);
-}
-```
-
-Notice that the `onDelete` prop is defined with a `.bind` suffix: this is a special
-suffix that makes sure the function callback is bound to the component.
-
-Notice also that we have two functions named `deleteTask`. The one in the Task
-component just delegates the work to the Root component that owns the task list
-via the `onDelete` property.
-
-## 10. Using a store
-
-Looking at the code, it is apparent that all the code handling tasks is scattered
-all around the application. Also, it mixes UI code and business logic
-code. Owl does not provide any high level abstraction to manage business logic,
-but it is easy to do it with the basic reactivity primitives (`useState` and `reactive`).
-
-Let us use it in our application to implement a central store. This is a pretty
-large refactoring (for our application), since it involves extracting all task
-related code out of the components. Here is the new content of the `app.js` file:
-
-```js
-const { Component, mount, xml, useRef, onMounted, useState, reactive, useEnv } = owl;
-
-// -------------------------------------------------------------------------
-// Store
-// -------------------------------------------------------------------------
-function useStore() {
-  const env = useEnv();
-  return useState(env.store);
-}
-
-// -------------------------------------------------------------------------
-// TaskList
-// -------------------------------------------------------------------------
-class TaskList {
-  nextId = 1;
-  tasks = [];
-
-  addTask(text) {
-    text = text.trim();
-    if (text) {
-      const task = {
-        id: this.nextId++,
-        text: text,
-        isCompleted: false,
-      };
-      this.tasks.push(task);
-    }
-  }
-
-  toggleTask(task) {
-    task.isCompleted = !task.isCompleted;
-  }
-
-  deleteTask(task) {
-    const index = this.tasks.findIndex((t) => t.id === task.id);
-    this.tasks.splice(index, 1);
-  }
-}
-
-function createTaskStore() {
-  return reactive(new TaskList());
-}
-
-// -------------------------------------------------------------------------
-// Task Component
-// -------------------------------------------------------------------------
-class Task extends Component {
-  static template = xml/* xml */ `
-    <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
-      <input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="() => store.toggleTask(props.task)"/>
-      <span><t t-esc="props.task.text"/></span>
-      <span class="delete" t-on-click="() => store.deleteTask(props.task)">🗑</span>
-    </div>`;
-
-  static props = ["task"];
-
-  setup() {
-    this.store = useStore();
-  }
-}
-
-// -------------------------------------------------------------------------
-// Root Component
-// -------------------------------------------------------------------------
-class Root extends Component {
-  static template = xml/* xml */ `
-    <div class="todo-app">
-      <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
-      <div class="task-list">
-        <t t-foreach="store.tasks" t-as="task" t-key="task.id">
-          <Task task="task"/>
-        </t>
-      </div>
-    </div>`;
-  static components = { Task };
-
-  setup() {
-    const inputRef = useRef("add-input");
-    onMounted(() => inputRef.el.focus());
-    this.store = useStore();
-  }
-
-  addTask(ev) {
-    // 13 is keycode for ENTER
-    if (ev.keyCode === 13) {
-      this.store.addTask(ev.target.value);
-      ev.target.value = "";
-    }
-  }
-}
-
-// -------------------------------------------------------------------------
-// Setup
-// -------------------------------------------------------------------------
-const env = {
-  store: createTaskStore(),
-};
-mount(Root, document.body, { dev: true, env });
-```
-
-## 11. Saving tasks in local storage
-
-Now, our TodoApp works great, except if the user closes or refresh the browser!
-It is really inconvenient to only keep the state of the application in memory.
-To fix this, we will save the tasks in the local storage. With our current
-codebase, it is a simple change: we need to save tasks to local storage and
-listen to any change.
-
-```js
-class TaskList {
-  constructor(tasks) {
-    this.tasks = tasks || [];
-    const taskIds = this.tasks.map((t) => t.id);
-    this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
-  }
-  // ...
-}
-
-function createTaskStore() {
-  const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
-  const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
-  const taskStore = reactive(new TaskList(initialTasks), saveTasks);
-  saveTasks();
-  return taskStore;
-}
-```
-
-The key point is that the `reactive` function takes a callback that will be called
-every time an observed value is changed. Note that we need to call the `saveTasks`
-method initially to make sure we observe all current values.
-
-## 12. Filtering tasks
-
-We are almost done, we can add/update/delete tasks. The only missing feature is
-the possibility to display the task according to their completed status. We will
-need to keep track of the state of the filter in `Root`, then filter the visible
-tasks according to its value.
-
-```js
-class Root extends Component {
-  static template = xml /* xml */`
-    <div class="todo-app">
-      <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
-      <div class="task-list">
-        <t t-foreach="displayedTasks" t-as="task" t-key="task.id">
-          <Task task="task"/>
-        </t>
-      </div>
-      <div class="task-panel" t-if="store.tasks.length">
-        <div class="task-counter">
-          <t t-esc="displayedTasks.length"/>
-          <t t-if="displayedTasks.length lt store.tasks.length">
-              / <t t-esc="store.tasks.length"/>
-          </t>
-          task(s)
-        </div>
-        <div>
-          <span t-foreach="['all', 'active', 'completed']"
-            t-as="f" t-key="f"
-            t-att-class="{active: filter.value===f}"
-            t-on-click="() => this.setFilter(f)"
-            t-esc="f"/>
-        </div>
-      </div>
-    </div>`;
-
-  setup() {
-    ...
-    this.filter = useState({ value: "all" });
-  }
-
-  get displayedTasks() {
-    const tasks = this.store.tasks;
-    switch (this.filter.value) {
-      case "active": return tasks.filter(t => !t.isCompleted);
-      case "completed": return tasks.filter(t => t.isCompleted);
-      case "all": return tasks;
-    }
-  }
-
-  setFilter(filter) {
-    this.filter.value = filter;
-  }
-}
-```
-
-```css
-.task-panel {
-  color: #0088ff;
-  margin-top: 8px;
-  font-size: 14px;
-  display: flex;
-}
-
-.task-panel .task-counter {
-  flex-grow: 1;
-}
-
-.task-panel span {
-  padding: 5px;
-  cursor: pointer;
-}
-
-.task-panel span.active {
-  font-weight: bold;
-}
-```
-
-Notice here that we set dynamically the css class of the filter with the object
-syntax.
-
-## 13. The Final Touch
-
-Our list is feature complete. We can still add a few extra details to improve
-the user experience.
-
-1. Add a visual feedback when the user mouse is over a task:
-
-```css
-.task:hover {
-  background-color: #def0ff;
-}
-```
-
-2. Make the text of a task clickable, to toggle its checkbox:
-
-```xml
-<input type="checkbox" t-att-checked="props.task.isCompleted"
-    t-att-id="props.task.id"
-    t-on-click="() => store.toggleTask(props.task)"/>
-<label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
-```
-
-3. Strike the text of completed task:
-
-```css
-.task.done label {
-  text-decoration: line-through;
-}
-```
-
-## Final code
-
-Our application is now complete. It works, the UI code is well separated from
-the business logic code, it is testable, all under 150 lines of code (template
-included!).
-
-For reference, here is the final code:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>OWL Todo App</title>
-    <link rel="stylesheet" href="app.css" />
-  </head>
-  <body>
-    <script src="owl.js"></script>
-    <script src="app.js"></script>
-  </body>
-</html>
-```
-
-```js
-(function () {
-  const { Component, mount, xml, useRef, onMounted, useState, reactive, useEnv } = owl;
-
-  // -------------------------------------------------------------------------
-  // Store
-  // -------------------------------------------------------------------------
-  function useStore() {
-    const env = useEnv();
-    return useState(env.store);
-  }
-
-  // -------------------------------------------------------------------------
-  // TaskList
-  // -------------------------------------------------------------------------
-  class TaskList {
-    constructor(tasks) {
-      this.tasks = tasks || [];
-      const taskIds = this.tasks.map((t) => t.id);
-      this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
-    }
-
-    addTask(text) {
-      text = text.trim();
-      if (text) {
-        const task = {
-          id: this.nextId++,
-          text: text,
-          isCompleted: false,
-        };
-        this.tasks.push(task);
-      }
-    }
-
-    toggleTask(task) {
-      task.isCompleted = !task.isCompleted;
-    }
-
-    deleteTask(task) {
-      const index = this.tasks.findIndex((t) => t.id === task.id);
-      this.tasks.splice(index, 1);
-    }
-  }
-
-  function createTaskStore() {
-    const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
-    const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
-    const taskStore = reactive(new TaskList(initialTasks), saveTasks);
-    saveTasks();
-    return taskStore;
-  }
-
-  // -------------------------------------------------------------------------
-  // Task Component
-  // -------------------------------------------------------------------------
-  class Task extends Component {
-    static template = xml/* xml */ `
-      <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
-        <input type="checkbox"
-          t-att-id="props.task.id"
-          t-att-checked="props.task.isCompleted"
-          t-on-click="() => store.toggleTask(props.task)"/>
-        <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
-        <span class="delete" t-on-click="() => store.deleteTask(props.task)">🗑</span>
-      </div>`;
-
-    static props = ["task"];
-
-    setup() {
-      this.store = useStore();
-    }
-  }
-
-  // -------------------------------------------------------------------------
-  // Root Component
-  // -------------------------------------------------------------------------
-  class Root extends Component {
-    static template = xml/* xml */ `
-      <div class="todo-app">
-        <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
-        <div class="task-list">
-          <t t-foreach="displayedTasks" t-as="task" t-key="task.id">
-            <Task task="task"/>
-          </t>
-        </div>
-        <div class="task-panel" t-if="store.tasks.length">
-          <div class="task-counter">
-            <t t-esc="displayedTasks.length"/>
-            <t t-if="displayedTasks.length lt store.tasks.length">
-                / <t t-esc="store.tasks.length"/>
-            </t>
-            task(s)
-          </div>
-          <div>
-            <span t-foreach="['all', 'active', 'completed']"
-              t-as="f" t-key="f"
-              t-att-class="{active: filter.value===f}"
-              t-on-click="() => this.setFilter(f)"
-              t-esc="f"/>
-          </div>
-        </div>
-      </div>`;
-    static components = { Task };
-
-    setup() {
-      const inputRef = useRef("add-input");
-      onMounted(() => inputRef.el.focus());
-      this.store = useStore();
-      this.filter = useState({ value: "all" });
-    }
-
-    addTask(ev) {
-      // 13 is keycode for ENTER
-      if (ev.keyCode === 13) {
-        this.store.addTask(ev.target.value);
-        ev.target.value = "";
-      }
-    }
-
-    get displayedTasks() {
-      const tasks = this.store.tasks;
-      switch (this.filter.value) {
-        case "active":
-          return tasks.filter((t) => !t.isCompleted);
-        case "completed":
-          return tasks.filter((t) => t.isCompleted);
-        case "all":
-          return tasks;
-      }
-    }
-
-    setFilter(filter) {
-      this.filter.value = filter;
-    }
-  }
-
-  // -------------------------------------------------------------------------
-  // Setup
-  // -------------------------------------------------------------------------
-  const env = { store: createTaskStore() };
-  mount(Root, document.body, { dev: true, env });
-})();
-```
-
-```css
-.todo-app {
-  width: 300px;
-  margin: 50px auto;
-  background: aliceblue;
-  padding: 10px;
-}
-
-.todo-app > input {
-  display: block;
-  margin: auto;
-}
-
-.task-list {
-  margin-top: 8px;
-}
-
-.task {
-  font-size: 18px;
-  color: #111111;
-  display: grid;
-  grid-template-columns: 30px auto 30px;
-}
-
-.task:hover {
-  background-color: #def0ff;
-}
-
-.task > input {
-  margin: auto;
-}
-
-.delete {
-  opacity: 0;
-  cursor: pointer;
-  text-align: center;
-}
-
-.task:hover .delete {
-  opacity: 1;
-}
-
-.task.done {
-  opacity: 0.7;
-}
-.task.done label {
-  text-decoration: line-through;
-}
-
-.task-panel {
-  color: #0088ff;
-  margin-top: 8px;
-  font-size: 14px;
-  display: flex;
-}
-
-.task-panel .task-counter {
-  flex-grow: 1;
-}
-
-.task-panel span {
-  padding: 5px;
-  cursor: pointer;
-}
-
-.task-panel span.active {
-  font-weight: bold;
-}
-```

doc/miscellaneous/architecture.md

@@ -1,68 +0,0 @@
-# 🦉 Notes On Owl Architecture 🦉
-
-We explain here how Owl is designed
-
-Warning: these notes are technical by nature, and intended for people working
-on Owl (or interested in understanding its design).
-
-## Overview
-
-Roughly speaking, Owl has 5 main parts:
-
-- a virtual dom system (in `src/blockdom`)
-- a component system (in `src/component`)
-- a template compiler (located in the `src/compiler` folder)
-- a small runtime code to tie them together (in `src/app`)
-- a reactivity system (in `src/reactivity.ts`)
-
-There are some other files, but the core of Owl can be understood with these
-five main parts.
-
-The virtual dom is an optimized virtual dom based on blocks, which supports
-multi blocks (for fragments). Everything that owl renders is internally
-represented by a virtual node. The job of the virtual dom is to efficiently
-represent the current state of the application, and to build an actual DOM
-representation when needed, or update the DOM whenever it is needed.
-
-- some other helpers/smaller scale stuff
-  A rendering occurs in two phases:
-
-- virtual rendering: this generates the virtual dom in memory, asynchronously
-- patch: applies a virtual tree to the screen (synchronously)
-
-There are several classes involved in a rendering:
-
-- components
-- a scheduler
-- fibers: small objects containing some metadata, associated with a rendering of
-  a specific component
-
-Components are organized in a dynamic component tree, visible in the user
-interface. Whenever a rendering is initiated in a component `C`:
-
-- a fiber is created on `C` with the rendering props information
-- the virtual rendering phase starts on C (will asynchronously render all the
-  child components)
-- the fiber is added to the scheduler, which will poll continuously, every
-  animation frame, if the fiber is done
-- once it is done, the scheduler will call the task callback, which will apply
-  the patch (if it was not cancelled in the meantime).
-
-# 🦉 VDom 🦉
-
-Owl is a declarative component system: we declare the structure of the component
-tree, and Owl will translate that to a list of imperative operations. This
-translation is done by a virtual dom. This is the low level layer of Owl, most
-developer will not need to call directly the virtual dom functions.
-
-The main idea behind a virtual dom is to keep a in-memory representation of the
-DOM (called a virtual node), and whenever some change is needed, to regenerate
-a new representation, compute the difference between the old and the new, then
-apply the changes.
-
-`vdom` exports two functions:
-
-- `h`: create a new virtual node
-- `patch`: compare two virtual nodes, and apply the difference.
-
-Note: Owl's virtual dom is a fork of [snabbdom](https://github.com/snabbdom/snabbdom).

doc/miscellaneous/comparison.md

@@ -1,255 +0,0 @@
-# Comparison with Vue/React
-
-OWL, React and Vue have the same main feature: they allow developers to build
-declarative user interfaces. To do that, all these frameworks uses a virtual dom. However, there are still obviously many differences.
-
-In this page, we try to highlight some of these differences. Obviously, a lot of
-effort was put to be fair. However, if you disagree with some of the points
-discussed, feel free to open an issue/submit a PR to correct this text.
-
-## Content
-
-- [Size](#size)
-- [Class Based](#class-based)
-- [Tooling/Build Step](#toolingbuild-step)
-- [Templating](#templating)
-- [Asynchronous rendering](#asynchronous-rendering)
-- [Reactivity](#reactivity)
-- [Hooks](#hooks)
-
-## Size
-
-OWL is intended to be small and to work at a slightly lower level of abstraction
-than React and Vue. Also, jQuery is not the same kind of framework, but it is interesting to compare.
-
-| Framework                | Size (minified, gzipped) |
-| ------------------------ | ------------------------ |
-| OWL                      | 18kb                     |
-| Vue + VueX               | 30kb                     |
-| Vue + VueX + Vue Router  | 39kb                     |
-| React + ReactDOM + Redux | 40kb                     |
-| jQuery                   | 30kb                     |
-
-Note that those comparisons are not entirely fair, because we do not compare
-the same exact set of features. For example, VueX and Vue Router support more
-advanced use cases.
-
-## Class Based
-
-Both React and Vue moved away from defining components with classes. They prefer
-a more functional approach, in particular, with the new `hooks` mechanisms.
-
-This has some advantages and disadvantages. But the end result is that React
-and Vue both offers multiple different ways of defining new components. In
-contrast, Owl has only one mechanism: class-based components. We believe that Owl
-components are fast enough for all our usecases, and making it as simple as
-possible for developers is more valuable (for us).
-
-Also, functions or class based components are more than just syntax. Functions
-come with a mindset of composition and class are about inheritance. Clearly,
-both of these are important mechanisms for reusing code. Also, one does not
-exclude the other.
-
-It certainly looks like the world of UI frameworks is moving toward composition,
-for many very good reasons. Owl is still good at composition (for example,
-Owl supports slots, which is the primary mechanism to make generic reusable
-components). But it can also use inheritance (and this is very important since
-templates can also be inherited with `xpaths` transformations).
-
-## Tooling/Build step
-
-OWL is designed to be easy to use in a standalone way. For various reasons,
-Odoo does not want to rely on standard web tools (such as webpack), and OWL can
-be used by simply adding a script tag to a page.
-
-```html
-<script src="owl.min.js" />
-```
-
-In comparison, React encourages using JSX, which necessitate a build step, and
-most Vue applications uses single file components, which also necessitate a build step.
-
-On the flipside, external tooling may make it harder to use in some case, but it
-also brings a lot of benefits. And React/Vue have both a large ecosystem.
-
-Note that since Owl is not dependant on any external tool nor libraries, it is
-very easy to integrate into any build toolchain. Also, since we cannot rely on
-additional tools, we made a lot of effort to make the most of the web platform.
-
-For example, Owl uses the standard `xml` parser that comes with every browser.
-Because of that, Owl did not have to write its own template parser. Another
-example is the [`xml`](../reference/templates.md#inline-templates) tag helper function, which makes use of
-native template literals to allow in a natural way to write `xml` templates
-directly in the javascript code. This can be easily integrated with editor
-plugins to have autocompletion inside the template.
-
-## Templating
-
-OWL uses its own QWeb engine, which compiles templates on the
-frontend, as they are needed. This is extremely convenient for our use case, in
-particular because templates are described in XML files, and can be modified by
-XPaths. Since Odoo is at its heart a modular application, this is an important
-feature for us.
-
-```xml
-<div>
-  <button t-on-click="increment">Click Me! [<t t-esc="state.value"/>]</button>
-</div>
-```
-
-Vue is actually kind of similar. Its template language is kind of close to QWeb,
-with the `v` replaced by the `t`. However, it is also more fully featured. For
-example, Vue templates have slots, or event modifiers. A large difference is that
-most Vue applications will need to be built ahead of time, to compile the templates
-into javascript functions. Note that Vue has a separate build which includes the
-template compiler.
-
-In contrast, most React applications do not use a templating language, but write
-some JSX code, which is precompiled into plain JavaScript by a build step. This
-example is done with the (kind of outdated) React class system:
-
-```jsx
-class Clock extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
-  }
-}
-```
-
-This has the advantage of having the full power of Javascript, but is less
-structured than a template language. Note that the tooling is quite impressive:
-there is a syntax highlighter for jsx here on github!
-
-By comparison, here is the equivalent Owl component, written with the
-[`xml`](../reference/templates.md#inline-templates) tag helper:
-
-```js
-class Clock extends Component {
-  static template = xml`
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {props.date.toLocaleTimeString()}.</h2>
-      </div>
-    `;
-}
-```
-
-## Asynchronous Rendering
-
-This is actually a big difference between OWL and React/Vue: components in OWL
-are totally asynchronous. They have two asynchronous hooks in their lifecycle:
-
-- `willStart` (before the component starts rendering)
-- `willUpdateProps` (before new props are set)
-
-Both these methods can be implemented and return a promise. The rendering will
-then wait for these promises to be completed before patching the DOM. This is
-useful for some use cases: for example, a component may want to fetch an external
-library (a calendar component may need a specialized calendar rendering library),
-in its willStart hook.
-
-```javascript
-class MyCalendarComponent extends owl.Component {
-    ...
-
-    willStart() {
-        return utils.lazyLoad('static/libs/fullcalendar/fullcalendar.js');
-    }
-    ...
-}
-```
-
-This may be dangerous (to stop the rendering waiting for the network), but it is
-extremely powerful as well, as demonstrated by the Odoo Web Client.
-
-Lazy loading static libraries can obviously be done with React/Vue, but it is
-more convoluted. For example, in Vue, you need to use a dynamic import keyword
-that needs to be transpiled at build time in order for the component to be loaded
-asynchronously (see [the documentation](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components)).
-
-## Reactivity
-
-React has a simple model: whenever the state changes, it is
-replaced with a new state (via the `setState` method). Then, the DOM is patched.
-This is simple, efficient, and a little bit awkward to write.
-
-Vue is a little bit different: it replace magically the properties in the state
-by getters/setters. With that, it can notify components whenever the state that
-they read was changed.
-
-Owl is closer to vue: it also tracks magically the state properties, but it does
-only increment an internal counter whenever it changes. Note that it is done
-with a `Proxy`, which means that it is totally transparent to the developers.
-Adding new keys is supported. Once any part of the state has been changed, a
-rendering is scheduled in the next microtask tick (promise queue).
-
-## Hooks
-
-[Hooks](https://reactjs.org/docs/hooks-intro.html#motivation) recently took over
-the React world. They solve a lot of seemingly unconnected problems: attach
-reusable behavior to a component, in a composable way, extract stateful logic
-from a component or reuse stateful logic between component, without changing your
-component hierarchy.
-
-Here is an example of the React `useState` hook:
-
-```js
-import React, { useState } from "react";
-
-function Example() {
-  // Declare a new state variable, which we'll call "count"
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <p>You clicked {count} times</p>
-      <button onClick={() => setCount(count + 1)}>Click me</button>
-    </div>
-  );
-}
-```
-
-Because of the way React designed the hooks API, they only work for functional
-components. But in that case, they really are powerful. Every major React library
-is in the process of redesigning their API with hooks (for example,
-[Redux](https://react-redux.js.org/next/api/hooks)).
-
-Vue 2 does not have hooks, but the Vue project is working on its next version,
-which will feature its new [composition API](https://vue-composition-api-rfc.netlify.com/).
-This work is based on the new ideas introduced by React hooks.
-
-From the way React and Vue introduce their hooks, it may look like hooks are not
-compatible with class components. However, this is not the case, as shown by
-Owl [hooks](../reference/hooks.md). They are inspired by both React and Vue. For example,
-the `useState` hook is named after React, but its API is closer to the `reactive`
-Vue hook.
-
-Here is what the `Counter` example above look like in Owl:
-
-```js
-import { Component, Owl } from "owl";
-import { xml } from "owl/tags";
-
-class Example extends Component {
-  static template = xml`
-      <div>
-        <p>You clicked {count.value} times</p>
-        <button t-on-click="increment">Click me</button>
-      </div>`;
-
-  count = useState({ value: 0 });
-
-  increment() {
-    this.state.value++;
-  }
-}
-```
-
-Since the Owl framework had hooks from early in its life, its main APIs
-are designed to be interacted with hooks from the start. For example, the
-`Context` abstraction.

doc/miscellaneous/compiled_template.md

@@ -1,98 +0,0 @@
-# 🦉 Notes On Owl Compiled Templates 🦉
-
-This page will explain what an Owl compiled template look like. This is a
-technical document intended for developers interested in understanding how Owl
-works internally.
-
-Broadly speaking, Owl compiles templates into a javascript function (a closure)
-that returns a function (the "render" function). The point of the closure is to
-have a place to store all values specific to the template (in particular, "blocks").
-Once a template is compiled, its closure function is called once to get the
-render function, and from then on, only the render function is used.
-
-The render function takes some context (and some additional information) and
-return a virtual dom representation of the rendered template, as a block tree.
-A block tree is a very light weight representation that only contains the dynamic
-part of the template, and its structure. It is actually independant of the
-static part of the templates (which are contained in the blocks captured by the
-closure). This means that the work performed at render time is only to collect
-dynamic data, and to describe the block structure of the result.
-
-It looks like this, in pseudo code:
-
-```js
-function closure(bdom, helpers) {
-    // here is some place to put stuff specific to the template, such as
-    // blocks
-    ...
-
-    return function render(context, node, key) {
-        // only build here all dynamic parts of the template
-        // build a block tree
-        return tree;
-    }
-}
-```
-
-Now, let us see an example. Consider the following template:
-
-```xml
-<div class="some-class">
-    <div class="blabla">
-        <span><t t-esc="state.value"/></span>
-    </div>
-    <t t-if="state.info">
-        <p class="info" t-att-class="someAttribute">
-            <t t-esc="state.info"/>
-        </p>
-    </t>
-    <SomeComponent value="value"/>
-</div>
-```
-
-If you look carefully, there are 5 dynamic things:
-
-- a text value (the first `t-esc`),
-- a sub block (the `t-if`),
-- a dynamic attribute (the `t-att-class` attribute),
-- another text value (the second `t-esc`),
-- and finally, a sub component
-
-Here is the compiled code for this template:
-
-```js
-function closure(bdom, helpers) {
-  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
-
-  let block1 = createBlock(
-    `<div class="some-class"><div class="blabla"><span><block-text-0/></span></div><block-child-0/><block-child-1/></div>`
-  );
-  let block2 = createBlock(`<p class="info" block-attribute-0="class"><block-text-1/></p>`);
-
-  return function render(ctx, node, key = "") {
-    let b2, b3;
-    let txt1 = ctx["state"].value;
-    if (ctx["state"].info) {
-      let attr1 = ctx["someAttribute"];
-      let txt2 = ctx["state"].info;
-      b2 = block2([attr1, txt2]);
-    }
-    b3 = component(`SomeComponent`, { value: ctx["value"] }, key + `__1`, node, ctx);
-    return block1([txt1], [b2, b3]);
-  };
-}
-```
-
-The values captured in the closure capture the static part of the template: we
-define here two blocks (which contains a template node, that can be deep cloned
-whenever a block is mounted). Then the render function only describes the block
-tree structure of the result, depending on the context. This means that we
-minimize the amount of work done at render time.
-
-Then, when we want to patch the dom, Owl will uses the `patch` function from
-blockdom, which then will diff the block tree, and deep clone new blocks whenever
-a new block is inserted, keep track of dynamic parts of each block, and update
-them accordingly.
-
-With this design, the cost of rendering a template is proportional to the number
-of dynamic values, and not to the size of the template.

doc/miscellaneous/why_owl.md

@@ -1,180 +0,0 @@
-# 🦉 Why Owl ? 🦉
-
-The common wisdom is that one should not reinvent the wheel, because that would
-waste effort and resources. It is certainly true in many cases. A javascript
-framework is a considerable investment, so it is quite logical to ask the question:
-why did Odoo decide to make OWL instead of using a standard/well known framework,
-such as React or Vue?
-
-As you might expect, the answer to that question is not simple. But most of the
-reasons discussed in this page are a consequence from a single fact: Odoo is
-extremely modular.
-
-This means, for example, that the core parts of Odoo are not aware, before runtime,
-of what files will be loaded/executed, or what will be the state of the UI. Because
-of that, Odoo cannot rely on a standard build toolchain. Also, this implies that
-the core parts of Odoo need to be extremely generic. In other words, Odoo is not
-really an application with a user interface. It is an application which generates
-a dynamic user interface. And most frameworks are not up to the task.
-
-Betting on Owl was not an easy choice to make, because there certainly are a lot
-of conflicting needs that we want to carefully balance. Choosing anything other
-than a well known framework is bound to be controversial. This page will explain
-some of the reason why we still believe that building Owl is a worthwile
-endeavour.
-
-## Strategy
-
-It is true that we want to keep control of our technology, in the sense that we
-do not want to depend on Facebook or Google, or any other large (or small)
-company. If they decide to change their license, or to go in a direction that
-will not work for us, this may be a problem. This is even more true because
-Odoo is not a conventional javascript application, and our needs are probably
-quite different as most other applications.
-
-## Class components
-
-It is clear that the biggest frameworks are moving away from class components.
-There is an implicit assumption that class components are terrible, and that
-functional programming is the way to go. React even goes as far as to say that
-classes are confusing for developers.
-
-While there is some truth to that, and to the fact that composition is certainly
-a good mechanism for code reuse, we believe that classes and inheritance are
-important tools.
-
-Sharing code between generic components with inheritance is the way Odoo built
-its web client. And it is clear that inheritance is not the root of all evils.
-It is often a perfectly simple and appropriate solution. What matter most is
-the architectural decisions.
-
-Also, Odoo has another specific use out of class components: each method of a
-class provides an extension point for addons. This may not be a clean architecture
-pattern, but it is a pragmatic decision that served Odoo well: classes are
-sometimes monkey-patched to add behaviour from the outside. A little bit like
-mixins, but from the outside.
-
-Using React or Vue would make it significantly harder to monkey patch components,
-because a lot of the state is hidden in their internals.
-
-## Tooling
-
-React or Vue have a huge community, and a lot of effort have been made into their
-tooling. This is wonderful, but at the same time, a pretty big issue for Odoo:
-since the assets are totally dynamic (and could change whenever the user installs
-or removes an addon), we need to have all that kind of tooling on the production
-servers. This is certainly not ideal.
-
-Also, this makes it very complicated to setup Vue or React tools: Odoo code is
-not a simple file that import other files. It changes all the time, assets
-are bundled differently in different contexts. This is the reason why Odoo has
-its own module system, which are resolved at runtime, by the browser. The
-dynamic nature of Odoo means that we often need to delay work as late as possible
-(in other word, we want a JIT user interface!)
-
-Our ideal framework has minimal (mandatory) tooling, which makes it easier to
-deploy. Using React without JSX, or Vue without vue file is not very appealing.
-
-At the same time, Owl is designed to solve this issue: it compiles templates
-by the browser, it doesn't need much code for that, since we use the XML parser
-built into each browser. Owl works with or without any additional tooling. It
-can use template strings to write single file components, and is easy to integrate
-in any html page, with a simple `<script>` tag.
-
-## Template based
-
-Odoo stores templates as XML documents in a database. This is very powerful, since
-this allow the use of xpaths to customize other templates. This is a very
-important feature of odoo, and one of the key to Odoo modularity.
-
-Because of that, we still expect to write our templates in an XML document.
-Weirdly enough, no major framework uses XML to store templates, even though it
-is extremely convenient.
-
-So, using React or Vue means that we need to make a template compiler. For React,
-that would be a compiler that would take a QWeb template, and convert it to a
-React render function. For Vue, it would convert it to a Vue template. Then
-we need to bundle the vue template compiler as well.
-
-Not only this would be complex (compiling a templating language into another is
-not an easy task), but it would negatively impact the developer experience as
-well. Writing Vue or React components in a QWeb template would certainly be
-awkward, and very confusing.
-
-## Developer Experience
-
-This brings us to the following point: developer experience. We see this choice
-as an investment for the future, and we want to make onboarding developers as
-easy as possible.
-
-While many javascript professionals clearly think that react/vue is not difficult
-(which is true to some extent), it is alsy true that many non js specialists are
-overwhelmed with the frontend world: functional components, hooks, and many other
-fancy words. Also, what is available in the compilation context may be difficult,
-there is a lot of black magic going on in pretty much every framework. Vue
-somehow join various namespaces into one, under the hood, and add various internal
-keys. Svelte transform the code. React require that state transformations are
-deep, and not shallow.
-
-Owl is trying very hard to have a simple and familiar API. It uses classes. Its
-reactivity system is explicit, not implicit. The scoping rules are obvious. In
-case of doubt, we err on the side of not implementing a feature.
-
-It is certainly different from React or Vue, but at the same time, kind of
-familiar for experienced developers.
-
-## JIT compilation
-
-There is also a clear trend in the frontend world to compile code
-as much as possible ahead of time. Most frameworks will compile templates ahead
-of time. And now Svelte is trying to compile the JS code away, so it can remove
-itself from the bundle.
-
-This is certainly reasonable for many usecases. However, this is not what Odoo
-needs: Odoo will fetch templates from the database and need to compile them only
-at the last possible moment, so we can apply all necessary xpaths.
-
-Even more: Odoo needs to be able to generate (and compile) templates at runtime.
-Currently, Odoo form views interpret an xml description. But the form view code
-then needs to do a lot of complicated operations. With Owl, we will be able to
-transform a view description into a QWeb template, then compile that and use it
-immediately.
-
-## Reactivity
-
-There are other design choices that we feel are not optimal in other frameworks.
-For example, the reactivity system. We like the way Vue did it, but it has a
-flaw: it is not really optional. There is actually a way to opt out of the reactivity
-system by freezing the state, but then, it is freezed.
-
-And there certainly are situations where we need a state, which is not read-only,
-and not observed. For example, imagine a spreadsheet component. It may have a
-very large internal state, and it knows exactly when it needs to be rendered
-(basically, whenever the user performs some action). Then, observing its state
-is a net performance loss, both for the CPU and the memory.
-
-## Concurrency
-
-Many applications are happy to simply display a spinner whenever a new asynchronous
-action is performed, but Odoo wants a different user experience: most asynchronous
-state changes are not displayed until ready. This is sometimes called a concurrent
-mode: the UI is rendered in memory, and displayed only when it is ready (and
-only if it has not been cancelled by subsequent user actions).
-
-React has now an experimental concurrent mode, but it was not ready when Owl
-started. Vue has not really an equivalent API (suspense is not what we need).
-
-Also, React concurrent mode is complex to use. Concurrency was one of the rare
-strong point of the former Odoo js framework (widgets), and we feel that Owl has
-now a very strong concurrent mode, which is simple and powerful at the same time.
-
-## Conclusion
-
-This lengthy discussion showed that there are many small and not so small reasons
-that current standard frameworks are not tailored to our needs. It is perfectly
-fine, because they each chose a different set of tradeoffs.
-
-However, we feel that there is still room in the framework world for something
-that is different. For a framework that makes choices compatible with Odoo.
-
-And that is why we built Owl 🦉.

doc/readme.md

@@ -1,49 +0,0 @@
-# 🦉 Owl overview 🦉
-
-Here is a list of everything exported by the Owl library:
-
-Main entities:
-
-- [`App`](reference/app.md): represent an Owl application (mainly a root component,a set of templates, and a config)
-- [`Component`](reference/component.md): the main class to define a concrete Owl component
-- [`mount`](reference/app.md#mount-helper): main entry point for most application: mount a component to a target
-- [`xml`](reference/templates.md#inline-templates): helper to define an inline template
-
-Reactivity
-
-- [`useState`](reference/reactivity.md#usestate): create a reactive object (hook, linked to a specific component)
-- [`reactive`](reference/reactivity.md#reactive): create a reactive object (not linked to any component)
-- [`markRaw`](reference/reactivity.md#markraw): mark an object or array so that it is ignored by the reactivity system
-- [`toRaw`](reference/reactivity.md#toraw): given a reactive objet, return the raw (non reactive) underlying object
-
-Lifecycle hooks:
-
-- [`onWillStart`](reference/component.md#willstart): hook to define asynchronous code that should be executed before component is rendered
-- [`onMounted`](reference/component.md#mounted): hook to define code that should be executed when component is mounted
-- [`onWillPatch`](reference/component.md#willpatch): hook to define code that should be executed before component is patched
-- [`onWillUpdateProps`](reference/component.md#willupdateprops): hook to define code that should be executed before component is updated
-- [`onPatched`](reference/component.md#patched): hook to define code that should be executed when component is patched
-- [`onWillRender`](reference/component.md#willrender): hook to define code that should be executed before component is rendered
-- [`onRendered`](reference/component.md#rendered): hook to define code that should be executed after component is rendered
-- [`onWillUnmount`](reference/component.md#willunmount): hook to define code that should be executed before component is unmounted
-- [`onWillDestroy`](reference/component.md#willdestroy): hook to define code that should be executed before component is destroyed
-- [`onError`](reference/component.md#onerror): hook to define a Owl error handler
-
-Other hooks:
-
-- [`useComponent`](reference/hooks.md#usecomponent): return a reference to the current component (useful to create derived hooks)
-- [`useEffect`](reference/hooks.md#useeffect): define an effect with its dependencies
-- [`useEnv`](reference/hooks.md#useenv): return a reference to the current env
-- [`useExternalListener`](reference/hooks.md#useexternallistener): add a listener outside of a component DOM
-- [`useRef`](reference/hooks.md#useref): get an object representing a reference (`t-ref`)
-- [`useChildSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for child components)
-- [`useSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for current component and child components)
-
-Utility/helpers:
-
-- [`EventBus`](reference/utils.md#eventbus): a simple event bus
-- [`loadFile`](reference/utils.md#loadfile): an helper to load a file from the server
-- [`markup`](reference/templates.md#outputting-data): utility function to define strings that represent html (should not be escaped)
-- [`status`](reference/component.md#status-helper): utility function to get the status of a component (new, mounted or destroyed)
-- [`validate`](reference/utils.md#validate): validates if an object satisfies a specified schema
-- [`whenReady`](reference/utils.md#whenready): utility function to execute code when DOM is ready

doc/reference/app.md

@@ -1,123 +0,0 @@
-# 🦉 App 🦉
-
-## Content
-
-- [Overview](#overview)
-- [API](#api)
-- [Configuration](#configuration)
-- [`mount` helper](#mount-helper)
-- [Loading templates](#loading-templates)
-
-## Overview
-
-Every Owl application has a root element, a set of templates, an environment and
-possibly a few other settings. The `App` class is a simple class that represents
-all of these elements. Here is an example:
-
-```js
-const {Component, App } = owl;
-
-class MyComponent extends Component { ... }
-
-const app = new App(MyComponent, { props: {...}, templates: "..."});
-app.mount(document.body);
-```
-
-The basic workflow is: create an `App` instance configured with the root
-component, the templates, and possibly other settings. Then, we mount that
-instance somewhere in the DOM.
-
-## API
-
-- **`constructor(Root[, config])`**: first argument should be a component class (not
-  an instance), and the optional second argument is a configuration object (see below).
-
-- **`mount(target, options)`**: first argument is an html element, and the optional
-  second argument is an object with mounting options (see below). Mount the app
-  to a target in the DOM. Note that this is an asynchronous operation: the `mount`
-  method returns a promise that resolves to the component instance whenever it
-  is complete.
-
-  The `option` object is an object with the following keys:
-
-  - **`position (string)`**: either `first-child` or `last-child`. This option determines
-    the position of the application in the target: either first or last child.
-
-- **`destroy()`**: destroys the application
-
-## Configuration
-
-The `config` object is an object with some of the following keys:
-
-- **`env (object)`**: if given, this will be the shared `env` given to each component
-- **`props (object)`**: the props given to the root component
-- **`dev (boolean, default=false)`**: if `true`, the application is rendered in
-  [`dev` mode](#dev-mode);
-- **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
-  that Owl will not log a message to warn that Owl is in `dev` mode.
-- **`translatableAttributes (string[])`**: a list of additional attributes that should
-  be translated (see [translations](translations.md))
-- **`translateFn (function)`**: a function that will be called by owl to translate
-  templates (see [translations](translations.md))
-- **`templates (string | xml document)`**: all the templates that will be used by
-  the components created by the application.
-- **`warnIfNoStaticProps (boolean, default=false)`**: if true, Owl will log a warning
-  whenever it encounters a component that does not provide a [static props description](props.md#props-validation).
-
-## `mount` helper
-
-Note that there is a `mount` helper to do that in just a line:
-
-```js
-const { mount, Component } = owl;
-
-class MyComponent extends Component {
-    ...
-}
-
-mount(MyComponent, document.body, { props: {...}, templates: "..."});
-```
-
-Here is the `mount` function signature:
-
-**`mount(Component, target, config)`** with the following arguments:
-
-- **`Component`**: a component class (Root component of the app)
-- **`target`**: an html element, where the component will be mounted as last child
-- **`config (optional)`**: a config object (the same as the App config object)
-
-Most of the time, the `mount` helper is more convenient, but whenever one needs
-a reference to the actual Owl App, then using the `App` class directly is
-possible.
-
-## Loading templates
-
-Most applications will need to load templates whenever they start. Here is
-what it could look like in practice:
-
-```js
-// in the main js file:
-const { loadFile, mount } = owl;
-
-// async, so we can use async/await
-(async function setup() {
-  const templates = await loadFile(`/some/endpoint/that/return/templates`);
-  const env = {
-    _t: someTranslateFn,
-    templates,
-    // possibly other stuff
-  };
-
-  mount(Root, document.body, { env });
-})();
-```
-
-## Dev mode
-
-Dev mode activates some additional checks and developer amenities:
-
-- [Props validation](./props.md#props-validation) is performed
-- [t-foreach](./templates.md#loops) loops check for key unicity
-- Lifecycle hooks are wrapped to report their errors in a more developer-friendly way
-- onWillStart and onWillUpdateProps will emit a warning in the console when they
-  take longer than 3 seconds in an effort to ease debugging the presence of deadlocks

doc/reference/component.md

@@ -1,455 +0,0 @@
-# 🦉 Owl Component 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Properties and methods](#properties-and-methods)
-- [Static Properties](#static-properties)
-- [Lifecycle](#lifecycle)
-  - [`setup`](#setup)
-  - [`willStart`](#willstart)
-  - [`willRender`](#willrender)
-  - [`rendered`](#rendered)
-  - [`mounted`](#mounted)
-  - [`willUpdateProps`](#willupdateprops)
-  - [`willPatch`](#willpatch)
-  - [`patched`](#patched)
-  - [`willUnmount`](#willunmount)
-  - [`willDestroy`](#willdestroy)
-  - [`onError`](#onerror)
-- [Sub components](#sub-components)
-- [Dynamic Sub components](#dynamic-sub-components)
-- [`status` helper](#status-helper)
-
-## Overview
-
-An Owl component is a small class which represents some part of the user interface.
-It is part of a component tree, and has an [environment](environment.md) (`env`),
-which is propagated from a parent to its children.
-
-OWL components are defined by subclassing the `Component` class. For example,
-here is how a `Counter` component could be implemented:
-
-```javascript
-const { Component, xml, useState } = owl;
-
-class Counter extends Component {
-  static template = xml`
-    <button t-on-click="increment">
-      Click Me! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = useState({ value: 0 });
-
-  increment() {
-    this.state.value++;
-  }
-}
-```
-
-In this example, we use the `xml` helper to define inline templates, and the
-`useState` hook, which returns a reactive version of its argument (see the page
-on reactivity).
-
-## Properties and methods
-
-The `Component` class has a very small API.
-
-- **`env (object)`**: the component [environment](environment.md)
-
-- **`props (object)`**: this is an object containing all the [props](props.md) given by
-  the parent to a child component
-
-  Note that `props` are owned by the parent, not by the component.
-  As such, it should not ever be modified by the component (otherwise you risk
-  unintended effects, since the parent may not be aware of the change)!!
-
-  The `props` can be modified dynamically by the parent. In that case, the
-  component will go through the following lifecycle methods: `willUpdateProps`,
-  `willPatch` and `patched`.
-
-* **`render(deep[=false])`**: calling this method directly will cause a rerender. Note
-  that with the reactivity system, this should be rare to have to do it manually.
-  Also, the rendering operation is asynchronous, so the DOM will only be updated
-  slightly later (at the next animation frame, if no component delays the
-  rendering)
-
-  By default, the render initiated by this method will stop at each child
-  component if their props are (shallow) equal. To force a render to update
-  all child components, one can use the optional `deep` argument. Note that the
-  value of the `deep` argument needs to be a boolean, not a truthy value.
-
-## Static Properties
-
-- **`template (string)`**: this is the name of the template that
-  will render the component. Note that there is a helper `xml` to
-  make it easy to define an inline template.
-
-* **`components (object, optional)`**: if given, this is an object that contains
-  the classes of any sub components needed by the template.
-
-  ```js
-  class ParentComponent extends owl.Component {
-    static components = { SubComponent };
-  }
-  ```
-
-* **`props (object, optional)`**: if given, this is an object that describes the
-  type and shape of the (actual) props given to the component. If Owl mode is
-  `dev`, this will be used to validate the props each time the component is
-  created/updated. See [Props Validation](props.md#props-validation) for more information.
-
-  ```js
-  class Counter extends owl.Component {
-    static props = {
-      initialValue: Number,
-      optional: true,
-    };
-  }
-  ```
-
-- **`defaultProps (object, optional)`**: if given, this object define default
-  values for (top-level) props. Whenever `props` are given to the object, they
-  will be altered to add default value (if missing). Note that it does not
-  change the initial object, a new object will be created instead. See
-  [default props](props.md#default-props) for more information
-
-  ```js
-  class Counter extends owl.Component {
-    static defaultProps = {
-      initialValue: 0,
-    };
-  }
-  ```
-
-## Lifecycle
-
-A solid and robust component system needs a complete lifecycle system to help
-developers write components. Here is a complete description of the lifecycle of
-a Owl component:
-
-| Method                                  | Hook                | Description                                                            |
-| --------------------------------------- | ------------------- | ---------------------------------------------------------------------- |
-| **[setup](#setup)**                     | none                | setup                                                                  |
-| **[willStart](#willstart)**             | `onWillStart`       | async, before first rendering                                          |
-| **[willRender](#willrender)**           | `onWillRender`      | just before component is rendered                                      |
-| **[rendered](#rendered)**               | `onRendered`        | just after component is rendered                                       |
-| **[mounted](#mounted)**                 | `onMounted`         | just after component is rendered and added to the DOM                  |
-| **[willUpdateProps](#willupdateprops)** | `onWillUpdateProps` | async, before props update                                             |
-| **[willPatch](#willpatch)**             | `onWillPatch`       | just before the DOM is patched                                         |
-| **[patched](#patched)**                 | `onPatched`         | just after the DOM is patched                                          |
-| **[willUnmount](#willunmount)**         | `onWillUnmount`     | just before removing component from DOM                                |
-| **[willDestroy](#willdestroy)**         | `onWillDestroy`     | just before component is destroyed                                     |
-| **[error](#onerror)**                   | `onError`           | catch and handle errors (see [error handling page](error_handling.md)) |
-
-### `setup`
-
-_setup_ is run just after the component is constructed. It is a lifecycle method,
-very similar to the _constructor_, except that it does not receive any argument.
-
-It is the proper place to call hook functions. Note that one of the main reason to
-have the `setup` hook in the component lifecycle is to make it possible to
-monkey patch it. It is a common need in the Odoo ecosystem.
-
-```javascript
-setup() {
-  useSetupAutofocus();
-}
-```
-
-### `willStart`
-
-`willStart` is an asynchronous hook that can be implemented to
-perform some (most of the time asynchronous) action before the initial rendering of a component.
-
-It will be called exactly once before the initial rendering. It is useful
-in some cases, for example, to load external assets (such as a JS library)
-before the component is rendered. Another use case is to load data from a server.
-
-The `onWillStart` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onWillStart(async () => {
-      this.data = await this.loadData()
-    });
-  }
-```
-
-At this point, the component is not yet rendered. Note that slow `willStart`
-code will slow down the rendering of the user interface. Therefore, some care
-should be made to make this method as fast as possible.
-
-Note that if there are more than one `onWillStart` registered callback, then they
-will all be run in parallel.
-
-### `willRender`
-
-It is uncommon but it may happen that one need to execute code just before a
-component is rendered (more precisely, when its compiled template function is executed).
-To do that, one can use the `onWillRender` hook:
-
-```javascript
-  setup() {
-    onWillRender(() => {
-      // do something
-    });
-  }
-```
-
-`willRender` hooks are called just before rendering templates, parent first,
-then children.
-
-### `rendered`
-
-It is uncommon but it may happen that one need to execute code just after a
-component is rendered (more precisely, when its compiled template function is executed).
-To do that, one can use the `onRendered` hook:
-
-```javascript
-  setup() {
-    onRendered(() => {
-      // do something
-    });
-  }
-```
-
-`rendered` hooks are called just after rendering templates, parent first,
-then children. Note that at this moment, the actual DOM may not exist yet (if
-it is the first rendering), or is not updated yet. This will be dom in the next
-animation frame as soon as all the components are ready.
-
-### `mounted`
-
-The `mounted` hook is called each time a component is attached to the
-DOM, after the initial rendering. At this point, the component is considered
-_active_. This is a good place to add some listeners, or to interact with the
-DOM, if the component needs to perform some measure for example.
-
-It is the opposite of `willUnmount`. If a component has been mounted, it will
-always be unmounted at some point in the future.
-
-The mounted method will be called recursively on each of its children. First,
-children, then parents.
-
-It is allowed (but not encouraged) to modify the state in the `mounted` hook.
-Doing so will cause a rerender, which will not be perceptible by the user, but
-will slightly slow down the component.
-
-The `onMounted` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onMounted(() => {
-      // do something here
-    });
-  }
-```
-
-### `willUpdateProps`
-
-The `willUpdateProps` is an asynchronous hook, called just before new props
-are set. This is useful if the component needs to perform an asynchronous task,
-depending on the props (for example, assuming that the props are
-some record Id, fetching the record data).
-
-The `onWillUpdateProps` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onWillUpdateProps(nextProps => {
-      return this.loadData({id: nextProps.id});
-    });
-  }
-```
-
-Notice that it receives the next props for the component.
-
-This hook is not called during the first render (but `willStart` is called
-and performs a similar job). Also, as most of the hooks, it is called in the
-usual order: parents first, then children.
-
-### `willPatch`
-
-The willPatch hook is called just before the DOM patching process starts.
-It is not called on the initial render. This is useful to read
-information from the DOM. For example, the current position of the
-scrollbar.
-
-Note that modifying the state is not allowed here. This method is called just
-before an actual DOM patch, and is only intended to be used to save some local
-DOM state. Also, it will not be called if the component is not in the DOM.
-
-The `onWillPatch` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onWillPatch(() => {
-      this.scrollState = this.getScrollSTate();
-    });
-  }
-```
-
-The `willPatch` is called in the usual parent->children order.
-
-### `patched`
-
-This hook is called whenever a component did actually update its DOM (most
-likely via a change in its state/props or environment).
-
-This method is not called on the initial render. It is useful to interact
-with the DOM (for example, through an external library) whenever the
-component was patched. Note that this hook will not be called if the component is
-not in the DOM.
-
-The `onPatched` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onPatched(() => {
-      this.scrollState = this.getScrollSTate();
-    });
-  }
-```
-
-Updating the component state in this hook is possible, but not encouraged.
-One needs to be careful, because updates here will create an additional rendering, which in
-turn will cause other calls to the `patched` method. So, we need to be particularly
-careful at avoiding endless cycles.
-
-Like `mounted`, the `patched` hook is called in the order: children first, then
-parent.
-
-### `willUnmount`
-
-`willUnmount` is a hook that is called each time just before a component is
-unmounted from the DOM. This is a good place to remove listeners, for example.
-
-The `onWillUnmount` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onMounted(() => {
-      // add some listener
-    });
-    onWillUnmount(() => {
-      // remove listener
-    });
-  }
-```
-
-This is the opposite method of `mounted`. Note that if a component is destroyed
-before being mounted, the `willUnmount` method may not be called.
-
-Parent `willUnmount` hooks will be called before children.
-
-### `willDestroy`
-
-Sometimes, components need to do some action in the `setup` and clean it up when
-they are inactive. However, the `willUnmount` hook is not appropriate for the
-cleaning operation, since the component may be destroyed before it has even been
-mounted. The `willDestroy` hook is useful in that situation, since it is always
-called.
-
-The `onWillUnmount` hook is used to register a function that will be executed at
-this moment:
-
-```javascript
-  setup() {
-    onWillDestroy(() => {
-      // do some cleanup
-    });
-  }
-```
-
-The `willDestroy` hooks are first called on children, then on parents.
-
-### `onError`
-
-Sadly, it may happen that components crashes at runtime. This is an unfortunate
-reality, and this is why Owl needs to provide a way to handle these errors.
-
-The `onError` hook is useful when we need to intercept and properly react
-to errors that occur in some sub components. See the page on
-[error handling](error_handling.md) for more detail.
-
-```javascript
-  setup() {
-    onError(() => {
-      // do something
-    });
-  }
-```
-
-## Sub components
-
-It is convenient to define a component using other (sub) components. This is
-called composition, and is very powerful in practice. To do that in Owl, one
-can just use a tag starting with a capital letter in its template, and register
-the sub component class in its static `components` object:
-
-```js
-class Child extends Component {
-  static template = xml`<div>child component <t t-esc="props.value"/></div>`;
-}
-
-class Parent extends Component {
-  static template = xml`
-    <div>
-      <Child value="1"/>
-      <Child value="2"/>
-    </div>`;
-
-  static components = { Child };
-}
-```
-
-This example also shows how one can pass information from the parent component
-to the child component, as props. See the [props section](props.md)
-for more information.
-
-## Dynamic sub components
-
-It is not common, but sometimes we need a dynamic component name. In this case,
-the `t-component` directive can also be used to accept dynamic values. This should
-be an expression that evaluates to a component class. For example:
-
-```js
-class A extends Component {
-  static template = xml`<div>child a</div>`;
-}
-class B extends Component {
-  static template = xml`<span>child b</span>`;
-}
-class Parent extends Component {
-  static template = xml`<t t-component="myComponent"/>`;
-
-  state = useState({ child: "a" });
-
-  get myComponent() {
-    return this.state.child === "a" ? A : B;
-  }
-}
-```
-
-## `status` helper
-
-It is sometimes convenient to have a way to find out in which state a component
-is currently. To do that, one can use the `status` helper:
-
-```js
-const { status } = owl;
-// assume component is an instance of a Component
-
-console.log(status(component));
-// logs either:
-// - 'new', if the component is new and has not been mounted yet
-// - 'mounted', if the component is currently mounted
-// - 'destroyed' if the component is currently destroyed
-```

doc/reference/concurrency_model.md

@@ -1,163 +0,0 @@
-# 🦉 Concurrency Model 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Rendering Components](#rendering-components)
-- [Semantics](#semantics)
-- [Asynchronous Rendering](#asynchronous-rendering)
-
-## Overview
-
-Owl was designed from the very beginning with asynchronous components. This comes
-from the `willStart` and the `willUpdateProps` lifecycle hooks. With these
-asynchronous hooks, it is possible to build complex highly concurrent applications.
-
-Owl concurrent mode has several benefits: it makes it possible to delay the
-rendering until some asynchronous operation is complete, it makes it possible
-to lazy load libraries, while keeping the previous screen completely functional.
-It is also good for performance reasons: Owl uses it to only apply the result of
-many different renderings only once in an animation frame. Owl can cancel
-a rendering that is no longer relevant, restart it, reuse it in some cases.
-
-But even though using concurrency is quite simple (and is the default behaviour),
-asynchrony is difficult, because it introduces an additional dimension that
-vastly increase the complexity of an application. This section will explain
-how Owl manages this complexity, how concurrent rendering works in a general way.
-
-## Rendering Components
-
-The word _rendering_ is a little vague, so, let us explain more precisely the
-process by which Owl components are displayed on a screen.
-
-When a component is mounted or updated, a new rendering is started. It has
-two phases: _virtual rendering_ and _patching_.
-
-### Virtual rendering
-
-This phase represent the process of rendering a template, in memory, which creates
-a virtual representation of the desired component html). The output of this phase is a
-virtual DOM.
-
-It is asynchronous: each subcomponents needs to either be created (so, `willStart`
-will need to be called), or updated (which is done with the `willUpdateProps`
-method). This is completely a recursive process: a component is the root of a
-component tree, and each sub component needs to be (virtually) rendered.
-
-### Patching
-
-Once a rendering is complete, it will be applied on the next animation frame.
-This is done synchronously: the whole component tree is patched to the real
-DOM.
-
-## Semantics
-
-We give here an informal description of the way components are created/updated
-in an application. Here, ordered lists describe actions that are executed
-sequentially, bullet lists describe actions that are executed in parallel.
-
-**Scenario 1: initial rendering** Imagine we want to render the following component tree:
-
-```
-        A
-       / \
-      B   C
-         / \
-        D   E
-```
-
-Here is what happen whenever we mount the root
-component (with some code like `app.mount(document.body)`).
-
-1. `willStart` is called on `A`
-
-2. when it is done, template `A` is rendered.
-
-   - component `B` is created
-     1. `willStart` is called on `B`
-     2. template `B` is rendered
-   - component `C` is created
-     1. `willStart` is called on `C`
-     2. template `C` is rendered
-        - component `D` is created
-          1. `willStart` is called on `D`
-          2. template `D` is rendered
-        - component `E` is created
-          1. `willStart` is called on `E`
-          2. template `E` is rendered
-
-3. each components are patched into a detached DOM element, in the following order:
-   `E`, `D`, `C`, `B`, `A`. (so the actual full DOM tree is created
-   in one pass)
-
-4. the component `A` root element is actually appended to `document.body`
-
-5. The method `mounted` is called recursively on all components in the following
-   order: `E`, `D`, `C`, `B`, `A`.
-
-**Scenario 2: updating a component**. Now, let's assume that the user clicked on some
-button in `C`, and this results in a state update, which is supposed to:
-
-- update `D`,
-- remove `E`,
-- add new component `F`.
-
-So, the component tree should look like this:
-
-```
-        A
-       / \
-      B   C
-         / \
-        D   F
-```
-
-Here is what Owl will do:
-
-1. because of a state change, the method `render` is called on `C`
-2. template `C` is rendered again
-
-   - component `D` is updated:
-     1. hook `willUpdateProps` is called on `D` (async)
-     2. template `D` is rerendered
-   - component `F` is created:
-     1. hook `willStart` is called on `F` (async)
-     2. template `F` is rendered
-
-3. `willPatch` hooks are called recursively on components `C`, `D` (not on `F`,
-   because it is not mounted yet)
-
-4. components `F`, `D` are patched in that order
-
-5. component `C` is patched, which will cause recursively:
-
-   1. `willUnmount` hook on `E`
-   2. destruction of `E`,
-
-6. `mounted` hook is called on `F`, `patched` hooks are called on `D`, `C`
-
-Tags are very small helpers to make it easy to write inline templates. There is
-only one currently available tag: `xml`.
-
-### Asynchronous Rendering
-
-Working with asynchronous code always adds a lot of complexity to a system. Whenever
-different parts of a system are active at the same time, one needs to think
-carefully about all possible interactions. Clearly, this is also true for Owl
-components.
-
-There are two different common problems with Owl asynchronous rendering model:
-
-- any component can delay the rendering (initial and subsequent) of the whole
-  application
-- for a given component, there are two independant situations that will trigger an
-  asynchronous rerendering: a change in the state, or a change in the props.
-  These changes may be done at different times, and Owl has no way of knowing
-  how to reconcile the resulting renderings.
-
-Here are a few tips on how to work with asynchronous components:
-
-1. Minimize the use of asynchronous components!
-2. Lazy loading external libraries is a good use case for async rendering. This
-   is mostly fine, because we can assume that it will only takes a fraction of a
-   second, and only once.

doc/reference/environment.md

@@ -1,76 +0,0 @@
-# 🦉 Environment 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Setting an Environment](#setting-an-environment)
-- [Using a sub environment](#using-a-sub-environment)
-- [Content of an Environment](#content-of-an-environment)
-
-## Overview
-
-An environment is a shared object given to all components in a tree. It is not
-used by Owl itself, but it is useful for application developers to provide a
-simple communication channel between components (in addition to the props).
-
-The `env` given to the [`App`](app.md) is assigned to the `env` component
-property.
-
-```
-    Root
-    /  \
-   A    B
-```
-
-Also, the `env` object is frozen when the application is started. This is done
-to ensure a simpler mental model of what's happening in runtime. Note that it
-is only shallowly frozen, so sub objects can be modified.
-
-## Setting an environment
-
-The correct way to customize an environment is to simply give it to the `App`,
-whenever it is created.
-
-```js
-const env = {
-    _t: myTranslateFunction,
-    user: {...},
-    services: {
-        ...
-    },
-};
-
-new App(Root, { env }).mount(document.body);
-
-// or alternatively
-mount(App, document.body, { env });
-```
-
-## Using a sub environment
-
-It is sometimes useful to add one (or more) specific keys to the environment,
-from the perspective of a specific component and its children. In that case, the
-solution presented above will not work, since it sets the global environment.
-
-There are two hooks for this situation: [`useSubEnv` and `useChildSubEnv`](hooks.md#usesubenv-and-usechildsubenv).
-
-```js
-class SomeComponent extends Component {
-  setup() {
-    useSubEnv({ myKey: someValue }); // myKey is now available for all child components
-  }
-}
-```
-
-## Content of an Environment
-
-The `env` object content is totally up to the application developer. However,
-some good use cases for additional keys in the environment are:
-
-- some configuration keys,
-- session information,
-- generic services (such as doing rpcs).
-- other utility functions that one want to inject, such as a translation function.
-
-Doing it this way means that components are easily testable: we can simply
-create a test environment with mock services.

doc/reference/error_handling.md

@@ -1,75 +0,0 @@
-# 🦉 Error Handling 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Managing Errors](#managing-errors)
-- [Example](#example)
-
-## Overview
-
-By default, whenever an error occurs in the rendering of an Owl application, we
-destroy the whole application. Otherwise, we cannot offer any guarantee on the
-state of the resulting component tree. It might be hopelessly corrupted, but
-without any user-visible feedback.
-
-Clearly, it is usually a little bit extreme to destroy the application. This
-is why we need a mechanism to handle rendering errors (and errors coming
-from lifecycle hooks): the `onError` hook.
-
-The main idea is that the `onError` hook register a function that will be called
-with the error. This function need to handle the situation, most of the time by
-updating some state and rerendering itself, so the application can return to a
-normal state.
-
-## Managing Errors
-
-Whenever the `onError` lifecycle hook is used, all errors coming from
-sub components rendering and/or lifecycle method calls will be caught and given
-to the `onError` method. This allows us to properly handle the error, and to
-not break the application.
-
-There are important things to know:
-
-- If an error that occured in the internal rendering cycle is not caught, then
-  Owl will destroy the full application. This is done on purpose, because Owl
-  cannot guarantee that the state is not corrupted from this point on.
-
-- errors coming from event handlers are NOT managed by `onError` or any other
-  owl mechanism. This is up to the application developer to properly recover
-  from an error
-
-- if an error handler is unable to properly handle an error, it can just rethrow
-  an error, and Owl will try looking for another error handler up the component
-  tree.
-
-## Example
-
-For example, here is how we could implement a generic component `ErrorBoundary`
-that render its content, and a fallback if an error happened.
-
-```js
-class ErrorBoundary extends Component {
-  static template = xml`
-    <t t-if="error" t-slot="fallback">An error occurred</t>
-    <t t-else="" t-slot="content"`;
-
-  setup() {
-    this.state = useState({ error: false });
-    onError(() => (this.state.error = true));
-  }
-}
-```
-
-Using the `ErrorBoundary` is then simple simple:
-
-```xml
-<ErrorBoundary>
-  <SomeOtherComponent/>
-  <t t-set-slot="fallback">Some specific error message</t>
-</ErrorBoundary>
-```
-
-Note that we need to be careful here: the fallback UI should not throw any
-error, otherwise we risk going into an infinite loop (also, see the page on
-[slots](slots.md) for more information on the `t-slot` directive).

doc/reference/event_handling.md

@@ -1,119 +0,0 @@
-# 🦉 Event Handling 🦉
-
-## Content
-
-- [Event Handling](#event-handling)
-- [Modifiers](#modifiers)
-- [Synthetic Events](#synthetic-events)
-- [On Components](#on-components)
-
-## Event Handling
-
-In a component's template, it is useful to be able to register handlers on DOM
-elements to some specific events. This is what makes a template _alive_. This
-is done with the `t-on` directive. For example:
-
-```xml
-<button t-on-click="someMethod">Do something</button>
-```
-
-This will be roughly translated in javascript like this:
-
-```js
-button.addEventListener("click", component.someMethod.bind(component));
-```
-
-The suffix (`click` in this example) is simply the name of the actual DOM
-event. The value of the `t-on` expression should be a valid javascript expression
-that evaluates to a function in the context of the current component. So, one
-can get a reference to the event, or pass some additional arguments. For example,
-all the following expressions are valid:
-
-```xml
-<button t-on-click="someMethod">Do something</button>
-<button t-on-click="() => this.increment(3)">Add 3</button>
-<button t-on-click="ev => this.doStuff(ev, 'value')">Do something</button>
-```
-
-Notice the use of the `this` keyword in the lambda function: this is the
-correct way to call a method on the component in a lambda function.
-
-One could use the following expression:
-
-```xml
-<button t-on-click="() => increment(3)">Add 3</button>
-```
-
-But then, the increment function may be unbound (unless the component binds it
-in its setup function, for example).
-
-## Modifiers
-
-In order to remove the DOM event details from the event handlers (like calls to
-`event.preventDefault`) and let them focus on data logic, _modifiers_ can be
-specified as additional suffixes of the `t-on` directive.
-
-| Modifier     | Description                                                                                                              |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------ |
-| `.stop`      | calls `event.stopPropagation()` before calling the method                                                                |
-| `.prevent`   | calls `event.preventDefault()` before calling the method                                                                 |
-| `.self`      | calls the method only if the `event.target` is the element itself                                                        |
-| `.capture`   | bind the event handler in [capture](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) mode. |
-| `.synthetic` | define a synthetic event handler (see below)                                                                             |
-
-```xml
-<button t-on-click.stop="someMethod">Do something</button>
-```
-
-Note that modifiers can be combined (ex: `t-on-click.stop.prevent`), and that
-the order may matter. For instance `t-on-click.prevent.self` will prevent all
-clicks while `t-on-click.self.prevent` will only prevent clicks on the element
-itself.
-
-Finally, empty handlers are tolerated as they could be defined only to apply
-modifiers. For example,
-
-```xml
-<button t-on-click.stop="">Do something</button>
-```
-
-This will simply stop the propagation of the event.
-
-## Synthetic Events
-
-In some cases, attaching an event handler for each element of large lists has
-a non trivial cost. Owl provides a way to efficiently improve the performance:
-with synthetic event, it actually adds only one handler on the document body,
-and will properly call the handler, just as expected.
-
-The only difference with regular events is that the event is caught at the document
-body, so it cannot be stopped before it actually gets there. Since it may be
-surprising in some cases, it is not enabled by default.
-
-To enable it, one can just use the `.synthetic` suffix:
-
-```xml
-<div>
-    <t t-foreach="largeList" t-as="elem" t-key="elem.id">
-        <button t-on-click.synthetic="doSomething" ...>
-            <!-- some content -->
-        </button>
-    </t>
-</div>
-```
-
-## On Components
-
-The `t-on` directive also works on a child component:
-
-```xml
-<div>
-    in some template
-    <Child t-on-click="dosomething"/>
-</div>
-```
-
-This will catch all click events on any html element contained in the `Child`
-sub component. Note that if the child component is reduced to one (or more) text
-nodes, then clicking on it will not call the handler, since the event will be
-dispatched by the browser on the parent element (a `div` in this case).

doc/reference/hooks.md

@@ -1,325 +0,0 @@
-# 🦉 Hooks 🦉
-
-## Content
-
-- [Overview](#overview)
-- [The Hook Rule](#the-hook-rule)
-- [Lifecycle hooks](#lifecycle-hooks)
-- [Other hooks](#other-hooks)
-  - [`useState`](#usestate)
-  - [`useRef`](#useref)
-  - [`useSubEnv` and `useChildSubEnv`](#usesubenv-and-usechildsubenv)
-  - [`useExternalListener`](#useexternallistener)
-  - [`useComponent`](#usecomponent)
-  - [`useEnv`](#useenv)
-  - [`useEffect`](#useeffect)
-- [Example: Mouse Position](#example-mouse-position)
-
-## Overview
-
-Hooks were popularised by React as a way to solve the following issues:
-
-- help reusing stateful logic between components
-- help organizing code by feature in complex components
-- use state in functional components, without writing a class.
-
-Owl hooks serve the same purpose, except that they work for class components
-(note: React hooks do not work on class components, and maybe because of that,
-there seems to be the misconception that hooks are in opposition to class. This
-is clearly not true, as shown by Owl hooks).
-
-Hooks work beautifully with Owl components: they solve the problems mentioned
-above, and in particular, they are the perfect way to make your component
-reactive.
-
-## The Hook Rule
-
-There is only one rule: every hook for a component has to be called in the _setup_ method, or in class fields:
-
-```js
-// ok
-class SomeComponent extends Component {
-  state = useState({ value: 0 });
-}
-
-// also ok
-class SomeComponent extends Component {
-  setup() {
-    this.state = useState({ value: 0 });
-  }
-}
-
-// not ok: this is executed after the constructor is called
-class SomeComponent extends Component {
-  async willStart() {
-    this.state = useState({ value: 0 });
-  }
-}
-```
-
-## Lifecycle Hooks
-
-All lifecycle hooks are documented in detail in their specific [section](component.md#lifecycle).
-
-| Hook                                                  | Description                                                            |
-| ----------------------------------------------------- | ---------------------------------------------------------------------- |
-| **[onWillStart](component.md#willstart)**             | async, before first rendering                                          |
-| **[onWillRender](component.md#willrender)**           | just before component is rendered                                      |
-| **[onRendered](component.md#rendered)**               | just after component is rendered                                       |
-| **[onMounted](component.md#mounted)**                 | just after component is rendered and added to the DOM                  |
-| **[onWillUpdateProps](component.md#willupdateprops)** | async, before props update                                             |
-| **[onWillPatch](component.md#willpatch)**             | just before the DOM is patched                                         |
-| **[onPatched](component.md#patched)**                 | just after the DOM is patched                                          |
-| **[onWillUnmount](component.md#willunmount)**         | just before removing component from DOM                                |
-| **[onWillDestroy](component.md#willdestroy)**         | just before component is destroyed                                     |
-| **[onError](component.md#onerror)**                   | catch and handle errors (see [error handling page](error_handling.md)) |
-
-## Other Hooks
-
-### `useState`
-
-The `useState` hook is certainly the most important hook for Owl components:
-this is what allows a component to be reactive, to react to state change.
-
-The `useState` hook has to be given an object or an array, and will return
-an observed version of it (using a `Proxy`).
-
-```javascript
-const { useState, Component } = owl;
-
-class Counter extends Component {
-  static template = xml`
-    <button t-on-click="increment">
-        Click Me! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = useState({ value: 0 });
-
-  increment() {
-    this.state.value++;
-  }
-}
-```
-
-It is important to remember that `useState` only works with objects or arrays. It
-is necessary, since Owl needs to react to a change in state.
-
-### `useRef`
-
-The `useRef` hook is useful when we need a way to interact with some inside part
-of a component, rendered by Owl. It only work on a html element tagged by the
-`t-ref` directive:
-
-```xml
-<div>
-    <input t-ref="someDiv"/>
-    <span>hello</span>
-</div>
-```
-
-In this example, the component will be able to access the `div` and the component
-`SubComponent` with the `useRef` hook:
-
-```js
-class Parent extends Component {
-  inputRef = useRef("someComponent");
-
-  someMethod() {
-    // here, if component is mounted, refs are active:
-    // - this.inputRef.el is the input HTMLElement
-  }
-}
-```
-
-As shown by the example above, the actual HTMLElement instance is accessed with
-the `el` key.
-
-The `t-ref` directive also accepts dynamic values with string interpolation
-(like the [`t-attf-`](templates.md#dynamic-attributes) and
-`t-component` directives). For example,
-
-```xml
-<div t-ref="component_{{someCondition ? '1' : '2'}}"/>
-```
-
-Here, the references need to be set like this:
-
-```js
-this.ref1 = useRef("component_1");
-this.ref2 = useRef("component_2");
-```
-
-References are only guaranteed to be active while the parent component is mounted.
-If this is not the case, accessing `el` or `comp` on it will return `null`.
-
-### `useSubEnv` and `useChildSubEnv`
-
-The environment is sometimes useful to share some common information between
-all components. But sometimes, we want to _scope_ that knowledge to a subtree.
-
-For example, if we have a form view component, maybe we would like to make some
-`model` object available to all sub components, but not to the whole application.
-This is where the `useChildSubEnv` hook may be useful: it lets a component add some
-information to the environment in a way that only its children
-can access it:
-
-```js
-class FormComponent extends Component {
-  setup() {
-    const model = makeModel();
-    // model will be available on this.env for this component and all children
-    useSubEnv({ model });
-    // someKey will be available on this.env for all children
-    useChildSubEnv({ someKey: "value" });
-  }
-}
-```
-
-The `useSubEnv` and `useChildSubEnv` hooks take one argument: an object which
-contains some key/value that will be added to the current environment. These hooks
-will create a new env object with the new information:
-
-- `useSubEnv` will assign this new `env` to itself and to all children components
-- `useChildSubEnv` will only assign this new `env` to all children components.
-
-As usual in Owl, [environments](environment.md) created with these two hooks are
-frozen, to prevent unwanted modifications.
-
-Note that both these hooks can be called an arbitrary number of times. The `env`
-will then be updated accordingly.
-
-### `useExternalListener`
-
-The `useExternalListener` hook helps solve a very common problem: adding and removing
-a listener on some target whenever a component is mounted/unmounted. For example,
-a dropdown menu (or its parent) may need to listen to a `click` event on `window`
-to be closed:
-
-```js
-useExternalListener(window, "click", this.closeMenu);
-```
-
-### `useComponent`
-
-The `useComponent` hook is useful as a building block for some customized hooks,
-that may need a reference to the component calling them.
-
-```js
-function useSomething() {
-  const component = useComponent();
-  // now, component is bound to the instance of the current component
-}
-```
-
-### `useEnv`
-
-The `useEnv` hook is useful as a building block for some customized hooks,
-that may need a reference to the env of the component calling them.
-
-```js
-function useSomething() {
-  const env = useEnv();
-  // now, env is bound to the env of the current component
-}
-```
-
-### `useEffect`
-
-This hook will run a callback when a component is mounted and patched, and
-will run a cleanup function before patching and before unmounting the
-the component (only if some dependencies have changed).
-
-It has almost the same API as the React `useEffect` hook, except that the dependencies
-are defined by a function instead of just the dependencies.
-
-The `useEffect` hook takes two function: the effect function and the dependency
-function. The effect function perform some task and return (optionally) a cleanup
-function. The dependency function returns a list of dependencies, these dependencies
-are passed as parameters in the effect function . If any of these
-dependencies changes, then the current effect will be cleaned up and reexecuted.
-
-Here is an example without any dependencies:
-
-```js
-useEffect(
-  () => {
-    window.addEventListener("mousemove", someHandler);
-    return () => window.removeEventListener("mousemove", someHandler);
-  },
-  () => []
-);
-```
-
-In the example above, the dependency list is empty, so the effect is only cleaned
-up when the component is unmounted.
-
-If the dependency function is skipped, then the effect will be cleaned up and
-rerun at every patch.
-
-Here is another example, of how one could implement a `useAutofocus` hook with
-the `useEffect` hook:
-
-```js
-function useAutofocus(name) {
-  let ref = useRef(name);
-  useEffect(
-    (el) => el && el.focus(),
-    () => [ref.el]
-  );
-}
-```
-
-This hook takes the name of a valid `t-ref` directive, which should be present
-in the template. It then checks whenever the component is mounted or patched if
-the reference is not valid, and in this case, it will focus the node element.
-This hook can be used like this:
-
-```js
-class SomeComponent extends Component {
-  static template = xml`
-    <div>
-        <input />
-        <input t-ref="myinput"/>
-    </div>`;
-
-  setup() {
-    useAutofocus("myinput");
-  }
-}
-```
-
-## Example: mouse position
-
-Here is the classical example of a non trivial hook to track the mouse position.
-
-```js
-const { useState, onWillDestroy, Component } = owl;
-
-// We define here a custom behaviour: this hook tracks the state of the mouse
-// position
-function useMouse() {
-  const position = useState({ x: 0, y: 0 });
-
-  function update(e) {
-    position.x = e.clientX;
-    position.y = e.clientY;
-  }
-  window.addEventListener("mousemove", update);
-  onWillDestroy(() => {
-    window.removeEventListener("mousemove", update);
-  });
-
-  return position;
-}
-
-// Main root component
-class Root extends Component {
-  static template = xml`<div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>`;
-
-  // this hooks is bound to the 'mouse' property.
-  mouse = useMouse();
-}
-```
-
-Note that we use the prefix `use` for hooks, just like in React. This is just
-a convention.

doc/reference/input_bindings.md

@@ -1,92 +0,0 @@
-# 🦉 Form Input Bindings 🦉
-
-It is very common to need to be able to read the value out of an html `input` (or
-`textarea`, or `select`) in order to use it (note: it does not need to be in a
-form!). A possible way to do this is to do it by hand:
-
-```js
-class Form extends owl.Component {
-  state = useState({ text: "" });
-
-  _updateInputValue(event) {
-    this.state.text = event.target.value;
-  }
-}
-```
-
-```xml
-<div>
-  <input t-on-input="_updateInputValue" />
-  <span t-esc="state.text" />
-</div>
-```
-
-This works. However, this requires a little bit of _plumbing_ code. Also, the
-plumbing code is slightly different if you need to interact with a checkbox,
-or with radio buttons, or with select tags.
-
-To help with this situation, Owl has a builtin directive `t-model`: its value
-should be an observed value in the component (usually `state.someValue`). With
-the `t-model` directive, we can write a shorter code, equivalent to the previous
-example:
-
-```js
-class Form extends owl.Component {
-  state = { text: "" };
-}
-```
-
-```xml
-<div>
-  <input t-model="state.text" />
-  <span t-esc="state.text" />
-</div>
-```
-
-The `t-model` directive works with `<input>`, `<input type="checkbox">`,
-`<input type="radio">`, `<textarea>` and `<select>`:
-
-```xml
-<div>
-    <div>Text in an input: <input t-model="state.someVal"/></div>
-    <div>Textarea: <textarea t-model="state.otherVal"/></div>
-    <div>Boolean value: <input type="checkbox" t-model="state.someFlag"/></div>
-    <div>Selection:
-        <select t-model="state.color">
-            <option value="">Select a color</option>
-            <option value="red">Red</option>
-            <option value="blue">Blue</option>
-        </select>
-    </div>
-    <div>
-        Selection with radio buttons:
-        <span>
-            <input type="radio" name="color" id="red" value="red" t-model="state.color"/>
-            <label for="red">Red</label>
-        </span>
-        <span>
-            <input type="radio" name="color" id="blue" value="blue" t-model="state.color" />
-            <label for="blue">Blue</label>
-        </span>
-    </div>
-</div>
-```
-
-Like event handling, the `t-model` directive accepts the following modifiers:
-
-| Modifier  | Description                                                          |
-| --------- | -------------------------------------------------------------------- |
-| `.lazy`   | update the value on the `change` event (default is on `input` event) |
-| `.number` | try to parse the value to a number (using `parseFloat`)              |
-| `.trim`   | trim the resulting value                                             |
-
-For example:
-
-```xml
-<input t-model.lazy="state.someVal" />
-```
-
-These modifiers can be combined. For instance, `t-model.lazy.number` will only
-update a number whenever the change is done.
-
-Note: the online playground has an example to show how it works.

doc/reference/portal.md

@@ -1,17 +0,0 @@
-# 🦉 Portal 🦉
-
-It is sometimes useful to be able to render some content outside the boundaries
-of a component. To do that, Owl provides a special directive: `t-portal`:
-
-```js
-class SomeComponent extends Component {
-  static template = xml`
-      <div>this is inside the component</div>
-      <div t-portal="'body'">and this is outside</div>
-    `;
-}
-```
-
-The `t-portal` directive takes a valid css selector as argument. The content of
-the portalled template will be mounted at the corresponding location. Note that
-Owl need to insert an empty text node at the location of the portalled content.

doc/reference/precompiling_templates.md

@@ -1,30 +0,0 @@
-# 🦉 Precompiling templates 🦉
-
-Owl is designed to be used by the Odoo javascript framework. Since Odoo handles
-its assets in its own non standard way, it was decided/assumed that Owl would
-compile templates at runtime.
-
-However, in some cases, it is not optimal, or even worse, not possible to do that.
-For example, browser extensions do not allow javascript code to create a new
-function (using the `new Function(...)` syntax).
-
-Therefore, in these cases, it is required to compile templates ahead of time. It
-is possible to do that in Owl, but the tooling is still rough. For now, the
-process is the following:
-
-1. write your templates in xml files (with a `t-name` directive to declare the name
-   of the template)
-2. Compile them in a `templates.js` file
-3. get the `owl.iife.runtime.js` file (which is a owl build without the compiler)
-4. bundle `owl.iife.runtime.js` and `template.js` with your assets (owl needs to
-   be positioned before the templates)
-
-Here is a more detailed explanation on how to compile xml files into a js file:
-
-1. clone the owl repository locally
-2. `npm install` to install all the required tooling
-3. `npm run build:runtime` to build the `owl.iife.runtime.js` file
-4. `npm run build:compiler` to build the template compiler
-5. `npm run compile_templates -- path/to/your/templates` will scan your target
-   folder, find all xml files, get all templates, compile them, and generate a
-   `templates.js` file.

doc/reference/props.md

@@ -1,270 +0,0 @@
-# 🦉 Props 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Definition](#definition)
-- [Binding function props](#binding-function-props)
-- [Dynamic Props](#dynamic-props)
-- [Default Props](#default-props)
-- [Props validation](#props-validation)
-- [Good Practices](#good-practices)
-
-## Overview
-
-In Owl, `props` (short for _properties_) is an object which contains every piece
-of data given to a component by its parent.
-
-```js
-class Child extends Component {
-  static template = xml`<div><t t-esc="props.a"/><t t-esc="props.b"/></div>`;
-}
-
-class Parent extends Component {
-  static template = xml`<div><Child a="state.a" b="'string'"/></div>`;
-  static components = { Child };
-  state = useState({ a: "fromparent" });
-}
-```
-
-In this example, the `Child` component receives two props from its parent: `a`
-and `b`. They are collected into a `props` object by Owl, with each value being
-evaluated in the context of the parent. So, `props.a` is equal to `'fromparent'` and
-`props.b` is equal to `'string'`.
-
-Note that `props` is an object that only makes sense from the perspective of the
-child component.
-
-## Definition
-
-The `props` object is made of every attributes defined on the template, with the
-following exceptions:
-
-- every attribute starting with `t-` are not props (they are QWeb directives),
-
-In the following example:
-
-```xml
-<div>
-    <ComponentA a="state.a" b="'string'"/>
-    <ComponentB t-if="state.flag" model="model"/>
-</div>
-```
-
-the `props` object contains the following keys:
-
-- for `ComponentA`: `a` and `b`,
-- for `ComponentB`: `model`,
-
-## Binding function props
-
-It is common to have the need to pass a callback as a prop. Since Owl components
-are class based, the callback frequently needs to be bound to its owner component.
-So, one can do this:
-
-```js
-class SomeComponent extends Component {
-  static template = xml`
-    <div>
-      <Child callback="doSomething"/>
-    </div>`;
-
-  setup() {
-    this.doSomething = this.doSomething.bind(this);
-  }
-
-  doSomething() {
-    // ...
-  }
-}
-```
-
-However, this is such a common use case that Owl provides a special suffix to do
-just that: `.bind`. This looks like this:
-
-```js
-class SomeComponent extends Component {
-  static template = xml`
-    <div>
-      <Child callback.bind="doSomething"/>
-    </div>`;
-
-  doSomething() {
-    // ...
-  }
-}
-```
-
-## Dynamic Props
-
-The `t-props` directive can be used to specify totally dynamic props:
-
-```xml
-<div t-name="ParentComponent">
-    <Child t-props="some.obj"/>
-</div>
-```
-
-```js
-class ParentComponent {
-  static components = { Child };
-  some = { obj: { a: 1, b: 2 } };
-}
-```
-
-## Default Props
-
-If the static `defaultProps` property is defined, it will be used to complete
-props received by the parent, if missing.
-
-```js
-class Counter extends owl.Component {
-  static defaultProps = {
-    initialValue: 0,
-  };
-  ...
-}
-```
-
-In the example above, the `initialValue` props is now by default set to 0.
-
-## Props Validation
-
-As an application becomes complex, it may be quite unsafe to define props in an informal way. This leads to two issues:
-
-- hard to tell how a component should be used, by looking at its code.
-- unsafe, it is easy to send wrong props into a component, either by refactoring a component, or one of its parents.
-
-A props type system solves both issues, by describing the types and shapes
-of the props. Here is how it works in Owl:
-
-- `props` key is a static key (so, different from `this.props` in a component instance)
-- it is optional: it is ok for a component to not define a `props` key.
-- props are validated whenever a component is created/updated
-- props are only validated in `dev` mode (see [how to configure an app](app.md#configuration))
-- if a key does not match the description, an error is thrown
-- it validates keys defined in (static) `props`. Additional keys given by the
-  parent will cause an error (unless the special prop `*` is present).
-- it is an object or a list of strings
-- a list of strings is a simplified props definition, which only lists the name
-  of the props. Also, if the name ends with `?`, it is considered optional.
-- all props are by default required, unless they are defined with `optional: true`
-  (in that case, it is only done if there is a value)
-- valid types are: `Number, String, Boolean, Object, Array, Date, Function`, and all
-  constructor functions (so, if you have a `Person` class, it can be used as a type)
-- arrays are homogeneous (all elements have the same type/shape)
-
-For each key, a `prop` definition is either a boolean, a constructor, a list of constructors, or an object:
-
-- a boolean: indicate that the props exists, and is mandatory.
-- a constructor: this should describe the type, for example: `id: Number` describe
-  the props `id` as a number
-- an object describing a value as type. This is done by using the `value` key. For example, `{value: false}` specifies that the corresponding value should be equal to false.
-- a list of constructors. In that case, this means that we allow more than one
-  type. For example, `id: [Number, String]` means that `id` can be either a string
-  or a number.
-- an object. This makes it possible to have more expressive definition. The following sub keys are then allowed (but not mandatory):
-  - `type`: the main type of the prop being validated
-  - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. If it is not set, then we only validate the array, not its elements,
-  - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. If it is not set, then we only validate the object, not its elements,
-  - `validate`: this is a function which should return a boolean to determine if
-    the value is valid or not. Useful for custom validation logic.
-  - `optional`: if true, the prop is not mandatory
-
-There is a special `*` prop that means that additional prop are allowed. This is
-sometimes useful for generic components that will propagate some or all their
-props to their child components.
-
-Note that default values cannot be defined for a mandatory props. Doing so will
-result in a prop validation error.
-
-Examples:
-
-```js
-class ComponentA extends owl.Component {
-    static props = ['id', 'url'];
-
-    ...
-}
-
-class ComponentB extends owl.Component {
-  static props = {
-    count: {type: Number},
-    messages: {
-      type: Array,
-      element: {type: Object, shape: {id: Boolean, text: String }
-    },
-   date: Date,
-   combinedVal: [Number, Boolean],
-   optionalProp: { type: Number, optional: true }
-  };
-
-  ...
-}
-```
-
-```js
-  // only the existence of those 3 keys is documented
-  static props = ['message', 'id', 'date'];
-```
-
-```js
-  // only the existence of those 3 keys is documented. any other key is allowed.
-  static props = ['message', 'id', 'date', '*'];
-```
-
-```js
-  // size is optional
-  static props = ['message', 'size?'];
-```
-
-```js
-  static props = {
-    messageIds: {type: Array, element: Number},  // list of number
-    otherArr: {type: Array},   // just array. no validation is made on sub elements
-    otherArr2: Array,   // same as otherArr
-    someObj: {type: Object},  // just an object, no internal validation
-    someObj2: {
-      type: Object,
-      shape: {
-        id: Number,
-        name: {type: String, optional: true},
-        url: String
-      ]},    // object, with keys id (number), name (string, optional) and url (string)
-    someFlag: Boolean,     // a boolean, mandatory (even if `false`)
-    someVal: [Boolean, Date],   // either a boolean or a date
-    otherValue: true,     // indicates that it is a prop
-    kindofsmallnumber: {
-      type: Number,
-      validate: n => (0 <= n && n <= 10)
-    },
-    size: {
-      validate:  e => ["small", "medium", "large"].includes(e)
-    },
-    someId: [Number, {value: false}], // either a number or false
-  };
-```
-
-Note: the props validation code is done by using the [validate utility function](utils.md#validate).
-
-## Good Practices
-
-A `props` object is a collection of values that come from the parent. As such,
-they are owned by the parent, and should never be modified by the child:
-
-```js
-class MyComponent extends Component {
-  constructor(parent, props) {
-    super(parent, props);
-    props.a.b = 43; // Never do that!!!
-  }
-}
-```
-
-Props should be considered readonly, from the perspective of the child component.
-If there is a need to modify them, then the request to update them should be
-sent to the parent (for example, with an event).
-
-Any value can go in a props. Strings, objects, classes, or even callbacks could
-be given to a child component (but then, in the case of callbacks, communicating
-with events seems more appropriate).

doc/reference/reactivity.md

@@ -1,395 +0,0 @@
-# 🦉 Reactivity 🦉
-
-## Content
-
-- [Introduction](#introduction)
-- [`useState`](#usestate)
-- [`reactive`](#reactive)
-- [`Escape hatches`](#escape-hatches)
-- [`Advanced usage`](#advanced-usage)
-
-## Introduction
-
-Reactivity is a big topic in javascript frameworks. The goal is to provide a
-simple way to manipulate state, in such a way that the interface updates automatically
-according to state changes, and to do so in a performant manner.
-
-To this end, Owl provides a proxy-based reactivity system, based on the `reactive` primitive.
-The `reactive` function takes an object as a first argument, and an optional callback as its second
-argument, it will return a proxy of the object. This proxy will track what properties are read
-through the proxy, and call the provided callback whenever one of these properties is changed
-through any reactive version of the same object. It does so in depth, by returning reactive versions
-of the subobjects when they are read.
-
-## `useState`
-
-While the `reactive` primitive is very powerful, its usage in components follow a very standard pattern:
-components want to be rerendered when part of the state which they depend on for rendering changes. To
-this end, owl provides a standard hook: `useState`. To put it simply, this hook simply calls reactive
-with the provided object, and the current component's render function as its callback. This will cause
-it to rerender whenever any part of the state object that has been read by this component is modified.
-
-Here is a simple example of how `useState` can be used:
-
-```js
-class Counter extends Component {
-  static template = xml`
-    <div t-on-click="() => this.state.value++">
-      <t t-esc="state.value"/>
-    </div>`;
-
-  setup() {
-    this.state = useState({ value: 0 });
-  }
-}
-```
-
-This component reads `state.value` when it renders, subscribing it to changes to that key. Whenever
-the value changes, Owl will update the component. Note that there is nothing special about the
-`state` property, you can name your state variables whatever you want, and you can have multiple of
-them on the same component if it makes sense to do so. This also allows `useState` to be used in custom
-hooks that may require state that is specific to that hook.
-
-### Reactive props
-
-Since version 2.0, Owl renders are no longer "deep" by default: a component is only rerendered by its
-parent if its props have changed (using a simple equality test). What if the contents of a props have
-changed in a deeper property? If that prop is reactive, owl will rerender the child components that
-need to be updated automatically, and only those components, it does so by reobserving reactive
-objects passed as props to components. Consider the following example:
-
-```js
-class Counter extends Component {
-  static template = xml`
-    <div t-on-click="() => props.state.value++">
-      <t t-esc="props.state.value"/>
-    </div>`;
-}
-
-class Parent extends Component {
-  static template = xml`
-    <Counter state="this.state"/>
-    <button t-on-click="() => this.state.value = 0">Reset counter</button>
-    <button t-on-click="() => this.state.test++" t-esc="this.state.test"/>`;
-
-  setup() {
-    this.state = useState({ value: 0, test: 1 });
-  }
-}
-```
-
-When clicking on the counter button, only the Counter rerenders, because the Parent has never read
-the "value" key in the state. When clicking on the "Reset Counter" button, the same thing happens:
-only the Counter component rerenders. What matters is not _where_ the state is updated, but which
-parts of the state are updated, and which components depend on them. This is achieved by Owl by
-automatically calling `useState` on reactive objects passed as props to a child component.
-
-When clicking on the last button, the parent is rerendered, but the child does not care about the
-`test` key: it has not read it. The props that we give it (`this.state`) have also not changed,
-as such, the parent updates but the child doesn't.
-
-For most day-to-day operations, `useState` should cover all of your needs. If
-you are curious about more advanced use cases and technical details, read on.
-
-### Debugging subscriptions
-
-Owl provides a way to show which reactive objects and keys a component is subscribed to: you can
-look at `component.__owl__.subscriptions`. Note that this is on the internal `__owl__` field, and
-should not be used in any type of production code as the name of this property or any of its properties
-or methods are subject to change at any point, even in stable versions of Owl, and may become available
-only in debug mode in the future.
-
-## `reactive`
-
-The `reactive` function is the basic reactivity primitive. It takes an object
-or an array as first argument, and optionally, a function as the second argument.
-The function will be called whenever any tracked value is updated.
-
-```js
-const obj = reactive({ a: 1 }, () => console.log("changed"));
-
-obj.a = 2; // does not log anything: the 'a' key has not been read yet
-console.log(obj.a); // logs 2 and reads the 'a' key => it is now tracked
-obj.a = 3; // logs 'changed' because we updated a tracked value
-```
-
-An important property of reactive objects is that they can be reobserved: this
-will create an independent proxy that tracks another set of keys:
-
-```js
-const obj1 = reactive({ a: 1, b: 2 }, () => console.log("observer 1"));
-const obj2 = reactive(obj1, () => console.log("observer 2"));
-
-console.log(obj1.a); // logs 1, and reads the 'a' key => it is now tracked by observer 1
-console.log(obj2.b); // logs 2, and 'b' is now tracked by observer 2
-obj2.a = 3; // only logs 'observer1', because observer2 does not track a
-obj2.b = 3; // only logs 'observer2', because observer1 does not track b
-console.log(obj2.a, obj1.b); // logs 3 and 3, while the object is observed independently, it is still a single object
-```
-
-Because `useState` returns a normal reactive object, it is possible to call `reactive` on the result
-of a `useState` to observe changes to that object while outside the context of a component, or to
-call `useState` on reactive objects created outside of components. In those cases, one needs to be
-careful with regards to the lifetime of those reactive objects, as holding references to these
-objects may prevent garbage collection of the component and its data even if Owl has destroyed it.
-
-### Subscriptions are ephemereal
-
-Subscription to state changes are ephemereal, whenever an observer is notified that a state object
-has changed, all of its subscriptions are cleared, meaning that if it still cares about it, it
-should read the properties it cares about again. For example:
-
-```js
-const obj = reactive({ a: 1 }, () => console.log("observer called"));
-
-console.log(obj.a); // logs 1, and reads the 'a' key => it is now tracked by the observer
-obj.a = 3; // logs 'observer1' and clears the subscriptions of the observer
-obj.a = 4; // doesn't log anything, the key is no longer observed
-```
-
-This may seem counter-intuitive, but it makes perfect sense in the context of components:
-
-```js
-class DoubleCounter extends Component {
-  static template = xml`
-    <t t-esc="state.selected + ': ' + state[state.selected].value"/>
-    <button t-on-click="() => this.state.count1++">increment count 1</button>
-    <button t-on-click="() => this.state.count2++">increment count 2</button>
-    <button t-on-click="changeCounter">Switch counter</button>
-  `;
-
-  setup() {
-    this.state = useState({ selected: "count1", count1: 0, count2: 0 });
-  }
-
-  changeCounter() {
-    this.state.selected = this.state.selected === "count1" ? "count2" : "count1";
-  }
-}
-```
-
-In this component, if we increment the value of the second counter, the component will not rerender,
-which makes sense as rerendering will have no effect, as the second counter is not displayed. If we
-toggle the component to display the second counter, we now no longer want the component to rerender
-when the value of the first counter changes, and this is what happens: a component only rerenders
-when there are changes to pieces of state that have been read during or after the previous render.
-If a piece of state has not been read in the last render, we know that its value won't influence the
-rendered output, and so we can ignore it.
-
-### reactive `Map` and `Set`
-
-The reactivity system has special support built-in for the standard container types `Map` and `Set`.
-They behave like one would expect: reading a key subscribes the observer to that key, adding or
-removing an item to them will notify observers that have used any of the iterators on that reactive
-object, such as `.entries()` or `.keys()`, likewise with clearing them.
-
-## Escape hatches
-
-Sometimes, it is desirable to bypass the reactivity system. Creating proxies when interacting with
-reactive objects is expensive, and while on the whole, the performance benefit that we get by
-rerendering only the parts of the interface that need it outweighs that cost, in some cases, we want
-to be able to opt out of creating them in the first place. This is the purpose of `markRaw`:
-
-### `markRaw`
-
-Marks an object so that it is ignored by the reactivity system, meaning that if this object is ever
-part of a of a reactive object, it will be returned as is, and no keys in that object will be
-observed.
-
-```js
-const someObject = markRaw({ b: 1 });
-const state = useState({
-  a: 1,
-  obj: someObject,
-});
-console.log(state.obj.b); // attempt to subscribe to the "b" key in someObject
-state.obj.b = 2; // No rerender will occur here
-console.log(someObject === state.obj); // true
-```
-
-This is useful in some rare cases. One such example would be if you want to use an array of objects
-that is potentially large to render a list, but those objects are known to be immutable:
-
-```js
-this.items = useState([
-  { label: "some text", value: 42 },
-  // ... 1000 total objects
-]);
-```
-
-in the template:
-
-```xml
-<t t-foreach="items" t-as="item" t-key="item.label" t-esc="item.label + item.value"/>
-```
-
-Here, on every render, we will go and read one thousand keys from a reactive object, which will
-cause one thousand reactive objects to be created. If we know that the content of these objects
-cannot change, this is wasted work. If instead all of these objects are marked as raw, we will avoid
-all of this work while keeping the ability to lean on the reactivity to track the presence and
-identity of these objects:
-
-```js
-this.items = useState([
-  markRaw({ label: "some text", value: 42 }),
-  // ... 1000 total objects
-]);
-```
-
-However, use this function with caution: this is an escape hatch from the reactivity
-system, and as such, using it may cause subtle and unintended issues! For example:
-
-```js
-// This will cause a rerender
-this.items.push(markRaw({ label: "another label", value: 1337 }));
-
-// THIS WILL NOT CAUSE A RENDER!
-this.items[17].value = 3;
-// The UI is now desynced from component's state until the next render caused by something else
-```
-
-In short: only use `markRaw` if your application is slowing down noticeably and profiling reveals
-that a lot of time is spent creating useless reactive objects.
-
-### `toRaw`
-
-While `markRaw` marks an object so that it is never made reactive, `toRaw` takes an object and
-returns the underlying non-reactive object. It can be useful in some niche cases. In particular,
-because the reactivity system returns a proxy, the returned object does not compare equal to the
-original object:
-
-```js
-const obj = {};
-const reactiveObj = reactive(obj);
-console.log(obj === reactiveObj); // false
-console.log(obj === toRaw(reactiveObj)); // true
-```
-
-It can also be useful during debugging, as unfolding proxies recursively in debuggers can be confusing.
-
-## Advanced usage
-
-The following is a collection of small snippets that leverage the reactivity system in
-"non-standard" ways to help you understand its power and where using it might make your code simpler.
-
-### Notification manager
-
-Showing notifications is a pretty common need in web applications, you may want to show a
-notification from any other component within the application, and the notifications should stack on
-top of one another regardless of which component spawned them, here is how we can leverage the
-reactivity to accomplish this:
-
-```js
-let notificationId = 1;
-const notifications = reactive({});
-class NotificationContainer extends Component {
-  static template = xml`
-    <t t-foreach="notifications" t-as="notification" t-key="notification_key" t-esc="notification"/>
-  `;
-  setup() {
-    this.notifications = useState(notifications);
-  }
-}
-
-export function addNotification(label) {
-  const id = notificationId++;
-  notifications[id] = label;
-  return () => {
-    delete notifications[id];
-  };
-}
-```
-
-Here, the `notifications` variable is a reactive object. Notice how we didn't give `reactive` a
-callback: this is because in this case, all we care about is that adding or removing notifications
-in the `addNotification` function goes through the reactivity system. The `NotificationContainer`
-component reobserves this object with `useState`, and will be updated whenever notifications are
-added or removed.
-
-### Store
-
-Centralizing application state is a pretty common want/need in web applications. Because of the way
-the reactivity system works, you can treat any reactive object as a store, and if you call `useState`
-on it, components will automatically observe only the part of the store that they're interested in:
-
-```js
-export const store = reactive({
-  list: [],
-  add(item) {
-    this.list.push(item);
-  },
-});
-
-export function useStore() {
-  return useState(store);
-}
-```
-
-In any component:
-
-```js
-import { useStore } from "./store";
-
-class List extends Component {
-  static template = xml`
-    <t t-foreach="store.list" t-as="item" t-key="item" t-esc="item"/>
-  `;
-  setup() {
-    this.store = useStore();
-  }
-}
-```
-
-Anywhere in the application:
-
-```js
-import { store } from "./store";
-// Will cause any instance of the List component in the app to update
-store.add("New list item!");
-```
-
-Notice how we can make objects with methods into reactive objects, and when these methods are used
-to mutate the store contents, it works as expected. And while stores are generally one-off objects,
-it is entirely possible to make class instances reactive:
-
-```js
-class Store {
-  list = [];
-  add(item) {
-    this.list.push(item);
-  }
-}
-// Essentially equivalent to the previous code
-export const store = reactive(new Store());
-```
-
-Which can be useful to unit test the class separately.
-
-### Local storage synchronization
-
-Sometimes, you want to persist some state accross reloads, you can do this by storing it in the
-`localStorage`, but what if you want to update the `localStorage` item every time the state changes,
-so that you don't have to manually synchronize the states? Well, you can use the reactivity system
-to write a custom hook that will do that for you:
-
-```js
-function useStoredState(key, initialState) {
-  const state = JSON.parse(localStorage.getItem(key)) || initialState;
-  const store = (obj) => localStorage.setItem(key, JSON.stringify(obj));
-  const reactiveState = reactive(state, () => store(reactiveState));
-  store(reactiveState);
-  return useState(state);
-}
-
-class MyComponent extends Component {
-  setup() {
-    this.state = useStoredState("MyComponent.state", { value: 1 });
-  }
-}
-```
-
-One important thing to notice is that both times we call `store`, we call it with `reactiveState`,
-not `state`: we need `store` to read the keys through a reactive object for it to correctly
-subscribe to state changes. Notice also that we call `store` the first time by hand, as otherwise it
-will not be subscribed to anything, and no amount of change in the object will cause the reactive
-callback to be invoked.

doc/reference/refs.md

@@ -1,37 +0,0 @@
-# 🦉 References 🦉
-
-The `useRef` hook is useful when we need a way to interact with some inside part
-of a component, rendered by Owl. It can work either on a DOM node, or on a component,
-targeted by the `t-ref` directive. See the [hooks section](hooks.md#useref) for
-more detail.
-
-As a short example, here is how we could set the focus on a given input:
-
-```xml
-<div>
-    <input t-ref="input"/>
-    <button t-on-click="focusInput">Click</button>
-</div>
-```
-
-```js
-import { useRef } from "owl/hooks";
-
-class SomeComponent extends Component {
-  inputRef = useRef("input");
-
-  focusInput() {
-    this.inputRef.el.focus();
-  }
-}
-```
-
-Be aware that the `el` property will only be set when the target of the `t-ref`
-directive is mounted in the DOM. Otherwise, it will be set to `null`.
-
-The `useRef` hook cannot be used to get a reference to an instance of a sub
-component.
-
-Note that this example uses the suffix `ref` to name the reference. This
-is not mandatory, but it is a useful convention, so we do not forget that it is
-a reference object.

doc/reference/slots.md

@@ -1,260 +0,0 @@
-# 🦉 Slots 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Named slots](#named-slots)
-- [Rendering Context](#rendering-context)
-- [Default Slot](#default-slot)
-- [Default Content](#default-content)
-- [Dynamic slots](#dynamic-slots)
-- [Slots and props](#slots-and-props)
-- [Slot params](#slot-params)
-- [Slot scopes](#slot-scopes)
-
-## Overview
-
-Owl is a template based component system. There is therefore a need to be able
-to make generic components. For example, imagine a generic `Navbar`
-component, which displays a navbar, but with some customizable content. Since
-the specific content is only known to the user of the `Navbar`, it would be nice
-to specify it in the template where `Navbar` is used:
-
-```xml
-  <div>
-    <Navbar>
-      <span>Hello Owl</span>
-    </Navbar>
-  </div>
-```
-
-This is exactly the way slots work! In the example above, the user of the `Navbar`
-component specify some content (here, in the default slot). The `Navbar`
-component can insert that content in its own template at the appropriate location.
-An important information to notice is that the content of the slot is rendered in
-the parent context, not in the navbar. As such, it can access values and methods
-from the parent component.
-
-Here is how the `Navbar` component could be defined, with the `t-slot` directive:
-
-```xml
-<div class="navbar">
-  <t t-slot="default"/>
-  <ul>
-    <!-- rest of the navbar here -->
-  </ul>
-</div>
-```
-
-## Named slots
-
-Default slots are very useful, but sometimes, we may need more than one slot.
-This is what named slots are for! For example, suppose we implement a component
-`InfoBox` that display a title and some specific content. Its template could look
-like this:
-
-```xml
-<div class="info-box">
-  <div class="info-box-title">
-    <t t-slot="title"/>
-    <span class="info-box-close-button" t-on-click="close">X</span>
-  </div>
-  <div class="info-box-content">
-    <t t-slot="content"/>
-  </div>
-</div>
-```
-
-And one could use it with the `t-set-slot` directive:
-
-```xml
-<InfoBox>
-  <t t-set-slot="title">
-    Specific Title. It could be html also.
-  </t>
-  <t t-set-slot="content">
-    <!-- some template here, with html, events, whatever -->
-  </t>
-</InfoBox>
-```
-
-## Rendering context
-
-The content of the slots is actually rendered with the rendering context corresponding
-to where it was defined, not where it is positioned. This allows the user to define
-event handlers that will be bound to the correct component (usually, the
-grandparent of the slot content).
-
-## Default Slot
-
-All elements inside the component which are not a named slot will be treated as
-part of the content of the `default` slot. For example:
-
-```xml
-<div t-name="Parent">
-  <Child>
-    <span>some content</span>
-  </Child>
-</div>
-
-<div t-name="Child">
-  <t t-slot="default"/>
-</div>
-```
-
-One can mix default slot and named slots:
-
-```xml
-<div>
-  <Child>
-    default content
-    <t t-set-slot="footer">
-      content for footer slot here
-    </t>
-  </Child>
-</div>
-```
-
-## Default content
-
-Slots can define a default content, in case the parent did not define them:
-
-```xml
-<div t-name="Parent">
-  <Child/>
-</div>
-
-<span t-name="Child">
-  <t t-slot="default">default content</t>
-</span>
-<!-- will be rendered as: <div><span>default content</span></div> -->
-```
-
-## Dynamic Slots
-
-The `t-slot` directive is actually able to use any expressions, using string
-interplolation:
-
-```xml
- <t t-slot="{{current}}" />
-```
-
-This will evaluate the `current` expression, and insert the corresponding slot
-at the place of the `t-slot` directive.
-
-## Slots and props
-
-In a sense, slots are almost the same as a prop: they define some information
-to pass to the child component. To make it possible to use it, and to pass it
-down to sub component, Owl actually define a special prop `slots` that contains
-all slot information given to the component. It looks like this:
-
-```js
-{ slotName_1: slotInfo_1, ..., slotName_m: slotInfo_m }
-```
-
-So, a component can pass its slots to a subcomponent like this:
-
-```xml
-<Child slots="props.slots"/>
-```
-
-## Slot params
-
-For advanced usecases, it may be necessary to pass additional information to a
-slot. This can be done by providing extra key/value pairs to the `t-set-slot`
-directive. Then, the generic component can read them in its prop `slots`.
-
-For example, here is how a Notebook component could be implemented (a component
-with multiple page, and a tab bar, which only render the current active page,
-and each page has a title).
-
-```js
-class Notebook extends Component {
-  static template = xml`
-    <div class="notebook">
-      <div class="tabs">
-        <t t-foreach="tabNames" t-as="tab" t-key="tab_index">
-          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab">
-            <t t-esc="props.slots[tab].title"/>
-          </span>
-        </t>
-      </div>
-      <div class="page">
-        <t t-slot="{{currentSlot}}"/>
-      </div>
-    </div>`;
-
-  setup() {
-    this.state = useState({ activeTab: 0 });
-    this.tabNames = Object.keys(this.props.slots);
-  }
-
-  get currentSlot() {
-    return this.tabNames[this.state.activeTab];
-  }
-}
-```
-
-Notice how one can read the `title` value for each slots. Here is how one could
-use this `Notebook` component:
-
-```xml
-<Notebook>
-  <t t-set-slot="page1" title="'Page 1'">
-    <div>this is in the page 1</div>
-  </t>
-  <t t-set-slot="page2" title="'Page 2'" hidden="somevalue">
-    <div>this is in the page 2</div>
-  </t>
-</Notebook>
-```
-
-Slot params works like normal props, so one can use the `.bind` suffix to
-bind a function if needed.
-
-## Slot scopes
-
-For other kinds of advanced use cases, the content of a slot may depends on some
-information specific to the generic component. This is the opposite of the slot
-params.
-
-To solve this kind of problems, one can use the `t-slot-scope` directive along
-with the `t-set-slot`. This defines the name of a variable that can access
-everything given by the child component:
-
-```xml
-<MyComponent>
-    <t t-set-slot="foo" t-slot-scope="scope">
-        content
-        <t t-esc="scope.bool"/>
-        <t t-esc="scope.num"/>
-    </t>
-</MyComponent>
-```
-
-And the child component that includes the slot can provide values like this:
-
-```xml
-<t t-slot="foo" bool="other_var" num="5">
-```
-
-or this:
-
-```xml
-<t t-slot="foo" t-props="someObject">
-```
-
-In the case of the default slot, you may declare the slot scope directly on the
-component itself:
-
-```xml
-<MyComponent t-slot-scope="scope">
-    content
-    <t t-esc="scope.bool"/>
-    <t t-esc="scope.num"/>
-</MyComponent>
-```
-
-Slot values works like normal props, so one can use the `.bind` suffix to
-bind a function if needed.

doc/reference/templates.md

@@ -1,703 +0,0 @@
-# 🦉 Templates 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Directives](#directives)
-- [QWeb Template reference](#qweb-template-reference)
-  - [White Spaces](#white-spaces)
-  - [Expression Evaluation](#expression-evaluation)
-  - [Static html Nodes](#static-html-nodes)
-  - [Outputting Data](#outputting-data)
-  - [Setting Variables](#setting-variables)
-  - [Conditionals](#conditionals)
-  - [Dynamic Attributes](#dynamic-attributes)
-  - [Dynamic Class Attribute](#dynamic-class-attribute)
-  - [Dynamic Tag Names](#dynamic-tag-names)
-  - [Loops](#loops)
-  - [Sub Templates](#sub-templates)
-  - [Dynamic Sub Templates](#dynamic-sub-templates)
-  - [Debugging](#debugging)
-- [Fragments](#fragments)
-- [Inline templates](#inline-templates)
-- [Rendering svg](#rendering-svg)
-- [Restrictions](#restrictions)
-
-## Overview
-
-Owl templates are describe using the [QWeb](https://www.odoo.com/documentation/13.0/reference/qweb.html) specification. It is based on the XML format, and used
-mostly to generate HTML. In OWL, QWeb templates are compiled into functions that
-generate a virtual dom representation of the HTML. Also, since Owl is a live
-component system, there are additional directives specific to Owl (such as `t-on`).
-
-```xml
-<div>
-    <span t-if="somecondition">Some string</span>
-    <ul t-else="">
-        <li t-foreach="messages" t-as="message">
-            <t t-esc="message"/>
-        </li>
-    </ul>
-</div>
-```
-
-Template directives are specified as XML attributes prefixed with `t-`, for
-instance `t-if` for conditionals, with elements and other attributes being
-rendered directly.
-
-To avoid element rendering, a placeholder element `<t>` is also available, which
-executes its directive but doesn’t generate any output in and of itself.
-
-We present in this section the templating language, including its Owl specific
-extensions.
-
-## Directives
-
-For reference, here is a list of all standard QWeb directives:
-
-| Name                           | Description                                                     |
-| ------------------------------ | --------------------------------------------------------------- |
-| `t-esc`                        | [Outputting safely a value](#outputting-data)                   |
-| `t-out`                        | [Outputting value, possibly without escaping](#outputting-data) |
-| `t-set`, `t-value`             | [Setting variables](#setting-variables)                         |
-| `t-if`, `t-elif`, `t-else`,    | [conditionally rendering](#conditionals)                        |
-| `t-foreach`, `t-as`            | [Loops](#loops)                                                 |
-| `t-att`, `t-attf-*`, `t-att-*` | [Dynamic attributes](#dynamic-attributes)                       |
-| `t-call`                       | [Rendering sub templates](#sub-templates)                       |
-| `t-debug`, `t-log`             | [Debugging](#debugging)                                         |
-| `t-translation`                | [Disabling the translation of a node](translations.md)          |
-
-The component system in Owl requires additional directives, to express various
-needs. Here is a list of all Owl specific directives:
-
-| Name                                   | Description                                                     |
-| -------------------------------------- | --------------------------------------------------------------- |
-| `t-component`, `t-props`               | [Defining a sub component](component.md#sub-components)         |
-| `t-ref`                                | [Setting a reference to a dom node or a sub component](refs.md) |
-| `t-key`                                | [Defining a key (to help virtual dom reconciliation)](#loops)   |
-| `t-on-*`                               | [Event handling](event_handling.md)                             |
-| `t-portal`                             | [Portal](portal.md)                                             |
-| `t-slot`, `t-set-slot`, `t-slot-scope` | [Rendering a slot](slots.md)                                    |
-| `t-model`                              | [Form input bindings](input_bindings.md)                        |
-| `t-tag`                                | [Rendering nodes with dynamic tag name](#dynamic-tag-names)     |
-
-## QWeb Template Reference
-
-### White Spaces
-
-White spaces in a template are handled in a special way:
-
-- consecutive whitespaces are always condensed to a single whitespace
-- if a whitespace-only text node contains a linebreak, it is ignored
-- the previous rules do not apply if we are in a `<pre>` tag
-
-### Expression Evaluation
-
-QWeb expressions are strings that will be processed at compile time. Each variable in
-the javascript expression will be replaced with a lookup in the context (so, the
-component). For example, `a + b.c(d)` will be converted into:
-
-```js
-context["a"] + context["b"].c(context["d"]);
-```
-
-It is useful to explain the various rules that apply on these expressions:
-
-1. it should be a simple expression which returns a value. It cannot be a statement.
-
-   ```xml
-   <div><p t-if="1 + 2 === 3">ok</p></div>
-   ```
-
-   is valid, but the following is not valid:
-
-   ```xml
-   <div><p t-if="console.log(1)">NOT valid</p></div>
-   ```
-
-2. it can use anything in the rendering context (typically, the component):
-
-   ```xml
-   <p t-if="user.birthday === today()">Happy bithday!</p>
-   ```
-
-   is valid, and will read the `user` object from the context, and call the
-   `today` function.
-
-3. it can use a few special operators to avoid using symbols such as `<`, `>`,
-   `&` or `|`. This is useful to make sure that we still write valid XML.
-
-   | Word  | replaced with |
-   | ----- | ------------- |
-   | `and` | `&&`          |
-   | `or`  | `\|\|`        |
-   | `gt`  | `>`           |
-   | `gte` | `>=`          |
-   | `lt`  | `<`           |
-   | `lte` | `<=`          |
-
-   So, one can write this:
-
-   ```xml
-   <div><p t-if="10 + 2 gt 5">ok</p></div>
-   ```
-
-### Static Html Nodes
-
-Normal, regular html nodes are rendered into themselves:
-
-```xml
-  <div>hello</div> <!–– rendered as itself ––>
-```
-
-### Outputting Data
-
-The `t-esc` directive is necessary whenever you want to add a dynamic text
-expression in a template. The text is escaped to avoid security issues.
-
-```xml
-<p><t t-esc="value"/></p>
-```
-
-rendered with the value `value` set to `42` in the rendering context yields:
-
-```html
-<p>42</p>
-```
-
-The `t-out` directive is almost the same as `t-esc`, but possibly without the
-escaping. The difference is that the value received by the `t-out` directive
-will only be not-escaped if it has been marked as such, using the `markup`
-utility function:
-
-For example, in the following component:
-
-```js
-const { markup, Component, xml } = owl;
-
-class SomeComponent extends Component {
-  static template = xml`
-    <t t-out="value1"/>
-    <t t-out="value2"/>`;
-
-  value1 = "<div>some text 1</div>";
-  value2 = markup("<div>some text 2</div>");
-}
-```
-
-The first `t-out` will act as a `t-esc` directive, which means that the content
-of `value1` will be escaped. However, since `value2` has been tagged as a markup,
-this will be injected as html.
-
-### Setting Variables
-
-QWeb allows creating variables from within the template, to memoize a computation (to use it multiple times), give a piece of data a clearer name, ...
-
-This is done via the `t-set` directive, which takes the name of the variable to create. The value to set can be provided in two ways:
-
-1. a `t-value` attribute containing an expression, and the result of its
-   evaluation will be set:
-
-   ```xml
-   <t t-set="foo" t-value="2 + 1"/>
-   <t t-esc="foo"/>
-   ```
-
-   will print `3`. Note that the evaluation is done at rendering time, not at
-   compilte time.
-
-2. if there is no `t-value` attribute, the node’s body is saved and its value is
-   set as the variable’s value:
-
-   ```xml
-   <t t-set="foo">
-       <li>ok</li>
-   </t>
-   <t t-esc="foo"/>
-   ```
-
-   will generate `&lt;li&gt;ok&lt;/li&gt;` (the content is escaped as we used the `t-esc` directive)
-
-The `t-set` directive acts like a regular variable in most programming language.
-It is lexically scoped (inner nodes are sub scopes), can be shadowed, ...
-
-### Conditionals
-
-The `t-if` directive is useful to conditionally render something. It evaluates
-the expression given as attribute value, and then acts accordingly.
-
-```xml
-<div>
-    <t t-if="condition">
-        <p>ok</p>
-    </t>
-</div>
-```
-
-The element is rendered if the condition (evaluated with the current rendering
-context) is true:
-
-```xml
-<div>
-    <p>ok</p>
-</div>
-```
-
-but if the condition is false it is removed from the result:
-
-```xml
-<div>
-</div>
-```
-
-The conditional rendering applies to the bearer of the directive, which does not
-have to be `<t>`:
-
-```xml
-<div>
-    <p t-if="condition">ok</p>
-</div>
-```
-
-will give the same results as the previous example.
-
-Extra conditional branching directives `t-elif` and `t-else` are also available:
-
-```xml
-<div>
-    <p t-if="user.birthday == today()">Happy bithday!</p>
-    <p t-elif="user.login == 'root'">Welcome master!</p>
-    <p t-else="">Welcome!</p>
-</div>
-```
-
-### Dynamic Attributes
-
-One can use the `t-att-` directive to add dynamic attributes. Its main use is to
-evaluate an expression (at rendering time) and bind an attribute to its result:
-
-For example, if we have `id` set to 32 in the rendering context,
-
-```xml
-<div t-att-data-action-id="id"/> <!-- result: <div data-action-id="32"></div> -->
-```
-
-If an expression evaluates to a falsy value, it will not be set at all:
-
-```xml
-<div t-att-foo="false"/>  <!-- result: <div></div> -->
-```
-
-It is sometimes convenient to format an attribute with string interpolation. In
-that case, the `t-attf-` directive can be used. It is useful when we need to mix
-literal and dynamic elements, such as css classes. The dynamic elements can be
-specified with either `{{...}}` or `#{...}`:
-
-```xml
-<div t-attf-foo="a {{value1}} is #{value2} of {{value3}} ]"/>
-<!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
-```
-
-If we need completely dynamic attribute names, then there is an additional
-directive: `t-att`, which takes either an object (with keys mapping to their
-values) or a pair `[key, value]`. For example:
-
-```xml
-<div t-att="{'a': 1, 'b': 2}"/> <!-- result: <div a="1" b="2"></div> -->
-
-<div t-att="['a', 'b']"/> <!-- <div a="b"></div> -->
-```
-
-### Dynamic class attribute
-
-For convenience, Owl supports a special case for the `t-att-class` case: one can
-use an object with keys describing the classes, and values boolean value denoting
-if the class is or is not present:
-
-```xml
-<div t-att-class="{'a': true, 'b': true}"/> <!-- result: <div class="a b"></div> -->
-
-<div t-att-class="{'a b': true, 'c': true}"/> <!-- result: <div class="a b c"></div> -->
-```
-
-Note that it can be combined with normal class attribute:
-
-```xml
-<div class="a" t-att-class="{'b': true}"/> <!-- result: <div class="a b"></div> -->
-```
-
-### Dynamic tag names
-
-When writing generic components or templates, the specific concrete tag for an
-HTML element is not known yet. In those situations, the `t-tag` directive is
-useful. It simply evaluates dynamically an expression to use as a tag name. The
-template:
-
-```xml
-<t t-tag="tag">
-    <span>content</span>
-</t>
-```
-
-will be rendered as `<div><span>content</span></div>` if the `tag` context key
-is set to `div`.
-
-### Loops
-
-QWeb has an iteration directive `t-foreach` which take an expression returning the
-collection to iterate on, and a second parameter `t-as` providing the name to use
-for the current item of the iteration:
-
-```xml
-<t t-foreach="[1, 2, 3]" t-as="i" t-key="i">
-    <p><t t-esc="i"/></p>
-</t>
-```
-
-will be rendered as:
-
-```xml
-<p>1</p>
-<p>2</p>
-<p>3</p>
-```
-
-Like conditions, `t-foreach` applies to the element bearing the directive’s attribute, and
-
-```xml
-<p t-foreach="[1, 2, 3]" t-as="i" t-key="i">
-    <t t-esc="i"/>
-</p>
-```
-
-is equivalent to the previous example.
-
-An important difference should be made with the usual `QWeb` behaviour: Owl
-requires the presence of a `t-key` directive, to be able to properly reconcile
-renderings.
-
-`t-foreach` can iterate on an array (the current item will be the current value)
-or an object (the current item will be the current key).
-
-In addition to the name passed via t-as, `t-foreach` provides a few other
-variables for various data points (note: `$as` will be replaced with the name
-passed to `t-as`):
-
-- `$as_value`: the current iteration value, identical to `$as` for lists and
-  integers, but for objects, it provides the value (where `$as` provides the key)
-- `$as_index`: the current iteration index (the first item of the iteration has index 0)
-- `$as_first`: whether the current item is the first of the iteration
-  (equivalent to `$as_index == 0`)
-- `$as_last`: whether the current item is the last of the iteration
-  (equivalent to `$as_index + 1 == $as_size`), requires the iteratee’s size be
-  available
-
-These extra variables provided and all new variables created into the `t-foreach`
-are only available in the scope of the `t-foreach`. If the variable exists outside
-the context of the `t-foreach`, the value is copied at the end of the foreach
-into the global context.
-
-```xml
-<t t-set="existing_variable" t-value="false"/>
-<!-- existing_variable now False -->
-
-<p t-foreach="Array(3)" t-as="i" t-key="i">
-    <t t-set="existing_variable" t-value="true"/>
-    <t t-set="new_variable" t-value="true"/>
-    <!-- existing_variable and new_variable now true -->
-</p>
-
-<!-- existing_variable always true -->
-<!-- new_variable undefined -->
-```
-
-Even though Owl tries to be as declarative as possible, the DOM does not fully
-expose its state declaratively in the DOM tree. For example, the scrolling state,
-the current user selection, the focused element or the state of an input are not
-set as attribute in the DOM tree. This is why we use a virtual dom
-algorithm to make sure we keep the actual DOM node instead of replacing it with
-a new one.
-
-Consider the following situation: we have a list of two items `[{text: "a"}, {text: "b"}]`
-and we render them in this template:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item_index"><t t-esc="item.text"/></p>
-```
-
-The result will be two `<p>` tags with text `a` and `b`. Now, if we swap them,
-and rerender the template, Owl needs to know what the intent is:
-
-- should Owl actually swap the DOM nodes,
-- or should it keep the DOM nodes, but with an updated text content?
-
-This might look trivial, but it actually matters. These two possibilities lead
-to different results in some cases. For example, if the user selected the text
-of the first `p`, swapping them will keep the selection while updating the
-text content will not.
-
-There are many other cases where this is important: `input` tags with their
-value, css classes and animations, scroll position...
-
-So, the `t-key` directive is used to give an identity to an element. It allows
-Owl to understand if different elements of a list are actually different or not.
-
-The above example could be modified by adding an ID: `[{id: 1, text: "a"}, {id: 2, text: "b"}]`.
-Then, the template could look like this:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item.id"><t t-esc="item.text"/></p>
-```
-
-The `t-key` directive is useful for lists (`t-foreach`). A key should be
-a unique number or string (objects will not work: they will be cast to the
-`"[object Object]"` string, which is obviously not unique).
-
-Also, the key can be set on a `t` tag or on its children. The following variations
-are all equivalent:
-
-```xml
-<p t-foreach="items" t-as="item" t-key="item.id">
-  <t t-esc="item.text"/>
-</p>
-
-<t t-foreach="items" t-as="item" t-key="item.id">
-  <p t-esc="item.text"/>
-</t>
-
-<t t-foreach="items" t-as="item">
-  <p t-key="item.id" t-esc="item.text"/>
-</t>
-```
-
-If there is no `t-key` directive, Owl will use the index as a default key.
-
-Note: the `t-foreach` directive only accepts arrays (lists) or objects. It does
-not work with other iterables, such as `Set`. However, it is only a matter of
-using the `...` javascript operator. For example:
-
-```xml
-<t t-foreach="...items" t-as="item">...</t>
-```
-
-The `...` operator will convert the `Set` (or any other iterables) into a list,
-which will work with Owl QWeb.
-
-### Sub Templates
-
-QWeb templates can be used for top level rendering, but they can also be used
-from within another template (to avoid duplication or give names to parts of
-templates), using the `t-call` directive:
-
-```xml
-<div t-name="other-template">
-    <p><t t-value="var"/></p>
-</div>
-
-<div t-name="main-template">
-    <t t-set="var" t-value="owl"/>
-    <t t-call="other-template"/>
-</div>
-```
-
-will be rendered as `<div><p>owl</p></div>`. This example shows that the sub
-template is rendered with the execution context of the parent. The sub template
-is actually inlined in the main template, but in a sub scope: variables defined
-in the sub template do not escape.
-
-Sometimes, one might want to pass information to the sub template. In that case,
-the content of the body of the `t-call` directive is available as a special
-magic variable `0`:
-
-```xml
-<t t-name="other-template">
-    This template was called with content:
-    <t t-raw="0"/>
-</t>
-
-<div t-name="main-template">
-    <t t-call="other-template">
-        <em>content</em>
-    </t>
-</div>
-```
-
-will result in :
-
-```xml
-<div>
-    This template was called with content:
-    <em>content</em>
-</div>
-```
-
-This can be used to define variables scoped to a sub template:
-
-```xml
-<t t-call="other-template">
-    <t t-set="var" t-value="1"/>
-</t>
-<!-- "var" does not exist here -->
-```
-
-Note: by default, the rendering context for a sub template is simply the current
-rendering context (so, the current component). However, it may be useful to be
-able to specify a specific object as context. This can be done by using the
-`t-call-context` directive:
-
-```xml
-<t t-call="other-template" t-call-context="obj"/>
-```
-
-### Dynamic sub templates
-
-The `t-call` directive can also be used to dynamically call a sub template,
-using string interpolation. For example:
-
-```xml
-<div t-name="main-template">
-    <t t-call="{{template}}">
-        <em>content</em>
-    </t>
-</div>
-```
-
-Here, the name of the template is obtained from the `template` value in the
-template rendering context.
-
-### Debugging
-
-The javascript QWeb implementation provides two useful debugging directives:
-
-`t-debug` adds a debugger statement during template rendering:
-
-```xml
-<t t-if="a_test">
-    <t t-debug=""/>
-</t>
-```
-
-will stop execution if the browser dev tools are open.
-
-`t-log` takes an expression parameter, evaluates the expression during rendering and logs its result with console.log:
-
-```xml
-<t t-set="foo" t-value="42"/>
-<t t-log="foo"/>
-```
-
-will print 42 to the console.
-
-## Fragments
-
-Owl 2 supports templates with an arbitrary number of root elements, or even just
-a text node. So, the following templates are all valid:
-
-```xml
-hello owl. This is just a text node!
-```
-
-```xml
-<div>hello</div>
-```
-
-```xml
-<div>hello</div>
-<div>ola</div>
-```
-
-```xml
-<div t-if="someCondition"><SomeChildComponent/></div>
-```
-
-```xml
-<t t-if="someCondition"><SomeChildComponent/></t>
-```
-
-## Inline templates
-
-Most real applications will define their templates in a XML file, to benefit
-from the XML ecosystem, and to do some additional processing, such as translating
-them. However, in some cases, it is convenient to be able to define a template
-inline. To do so, one can use the `xml` helper function:
-
-```js
-const { Component, xml } = owl;
-
-class MyComponent extends Component {
-  static template = xml`
-      <div>
-          <span t-if="somecondition">text</span>
-          <button t-on-click="someMethod">Click</button>
-      </div>
-  `;
-
-    ...
-}
-
-mount(MyComponent, document.body);
-```
-
-This function simply generates an unique string id, and register the template
-under that id in the internals of Owl, then return the id.
-
-## Rendering svg
-
-Owl components can be used to generate dynamic SVG graphs:
-
-```js
-class Node extends Component {
-  static template = xml`
-        <g>
-            <circle t-att-cx="props.x" t-att-cy="props.y" r="4" fill="black"/>
-            <text t-att-x="props.x - 5" t-att-y="props.y + 18"><t t-esc="props.node.label"/></text>
-            <t t-set="childx" t-value="props.x + 100"/>
-            <t t-set="height" t-value="props.height/(props.node.children || []).length"/>
-            <t t-foreach="props.node.children || []" t-as="child">
-                <t t-set="childy" t-value="props.y + child_index*height"/>
-                <line t-att-x1="props.x" t-att-y1="props.y" t-att-x2="childx" t-att-y2="childy" stroke="black" />
-                <Node x="childx" y="childy" node="child" height="height"/>
-            </t>
-        </g>
-    `;
-  static components = { Node };
-}
-
-class RootNode extends Component {
-  static template = xml`
-        <svg height="180">
-            <Node node="graph" x="10" y="20" height="180"/>
-        </svg>
-    `;
-  static components = { Node };
-  graph = {
-    label: "a",
-    children: [
-      { label: "b" },
-      { label: "c", children: [{ label: "d" }, { label: "e" }] },
-      { label: "f", children: [{ label: "g" }] },
-    ],
-  };
-}
-```
-
-This `RootNode` component will then display a live SVG representation of the
-graph described by the `graph` property. Note that there is a recursive structure
-here: the `Node` component uses itself as a subcomponent.
-
-**Important note:** Owl needs to properly set the namespace for each svg elements.
-Since Owl compile each template separately, it is not able to determine easily
-if a template is supposed to be included in a svg namespace or not. Therefore,
-Owl depends on a heuristic: if a tag is either `svg`, `g` or `path`, then it will
-be considered as svg. In practice, this means that each component or each sub
-templates (included with `t-call`) should have one of these tag as root tag.
-
-## Restrictions
-
-Note that Owl templates forbid the use of tag and or attributes starting with
-the `block-` string. This restriction prevents name collision with the internal
-code of Owl.
-
-```xml
-<div><block-1>this will not be accepted by Owl</block-1></div>
-```

doc/reference/translations.md

@@ -1,70 +0,0 @@
-# 🦉 Translations 🦉
-
-If properly setup, Owl can translate all rendered templates. To do
-so, it needs a translate function, which takes a string and returns a string.
-
-For example:
-
-```js
-const translations = {
-  hello: "bonjour",
-  yes: "oui",
-  no: "non",
-};
-const translateFn = (str) => translations[str] || str;
-
-const app = new App(Root, { templates, tranaslateFn });
-// ...
-```
-
-See the [app configuration page](app.md#configuration) for more info on how to
-configure an Owl application.
-
-Once setup, all rendered templates will be translated using `translateFn`:
-
-- each text node will be replaced with its translation,
-- each of the following attribute values will be translated as well: `title`,
-  `placeholder`, `label` and `alt`,
-- translating text nodes can be disabled with the special attribute `t-translation`,
-  if its value is `off`.
-
-So, with the above `translateFn`, the following templates:
-
-```xml
-<div>hello</div>
-<div t-translation="off">hello</div>
-<div>Are you sure?</div>
-<input placeholder="hello" other="yes"/>
-```
-
-will be rendered as:
-
-```xml
-<div>bonjour</div>
-<div>hello</div>
-<div>Are you sure?</div>
-<input placeholder="bonjour" other="yes"/>
-```
-
-Note that the translation is done during the compilation of the template, not
-when it is rendered.
-
-In some case, it is useful to be able to extend the list of translatable attributes.
-For example, one may want to also translate `data-title` attributes. To do that,
-we can define additional attributes with the `translatableAttributes` option:
-
-```js
-const app = new App(Root, { templates, tranaslateFn, translatableAttributes: ["data-title"] });
-// ...
-```
-
-It is also possible to remove an attribute from the default list by prefixing it with `-`:
-
-```js
-const app = new App(Root, {
-  templates,
-  tranaslateFn,
-  translatableAttributes: ["data-title", "-title"],
-});
-// data-title attribute will be translated, but not title attribute...
-```

doc/reference/utils.md

@@ -1,80 +0,0 @@
-# 🦉 Utils 🦉
-
-Owl export a few useful utility functions, to help with common issues. Those
-functions are all available in the `owl.utils` namespace.
-
-## Content
-
-- [`whenReady`](#whenready): executing code when DOM is ready
-- [`loadFile`](#loadfile): loading a file (useful for templates)
-- [`EventBus`](#eventbus): a simple EventBus
-- [`validate`](#validate): a validation function
-
-## `whenReady`
-
-The function `whenReady` returns a `Promise` resolved when the DOM is ready (if
-not ready yet, resolved directly otherwise). If called with a callback as
-argument, it executes it as soon as the DOM ready (or directly).
-
-```js
-const { whenReady } = owl;
-
-await whenReady();
-// do something
-```
-
-or alternatively:
-
-```js
-whenReady(function () {
-  // do something
-});
-```
-
-## `loadFile`
-
-`loadFile` is a helper function to fetch a file. It simply
-performs a `GET` request and returns the resulting string in a promise. The
-initial usecase for this function is to load a template file. For example:
-
-```js
-const { loadFile } = owl;
-
-async function makeEnv() {
-  const templates = await loadFile("templates.xml");
-  // do something
-}
-```
-
-## `EventBus`
-
-It is a simple `EventBus`, with the same API as usual DOM elements, and an
-additional `trigger` method to dispatch events:
-
-```js
-const bus = new EventBus();
-bus.addEventListener("event", () => console.log("something happened"));
-
-bus.trigger("event"); // 'something happened' is logged
-```
-
-## `validate`
-
-The `validate` function is a function that validates if a given object satisfies a
-specified schema. It is actually used by Owl itself to perform
-[props validation](props.md#props-validation). For example:
-
-```js
-validate(
-  { a: "hey" },
-  {
-    id: Number,
-    url: [Boolean, { type: Array, element: Number }],
-  }
-);
-
-// throws an error with the following information:
-//    - unknown key 'a',
-//    - 'id' is missing (should be a number),
-//    - 'url' is missing (should be a boolean or list of numbers),
-```

index.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OWL Framework</title>
+  <link rel="icon" href="data:,">
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+  <link rel="stylesheet" href="assets/normalize.css">
+  <link rel="stylesheet" href="assets/milligram.css">
+  <link rel="stylesheet" href="assets/highlight.tomorrow.css">
+  <link rel="stylesheet" href="assets/main.css">
+  <script src="./owl.js"></script>
+</head>
+<body>
+  <header class="container">
+    <img class="homepage-logo" src="assets/owl_1f989.png" alt="OWL Logo">
+    <hgroup>
+      <h1>OWL Framework</h1>
+      <p>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</p>
+    </hgroup>
+  </header>
+  <nav class="container">
+    <p>
+      <a href="https://github.com/odoo/owl" title="https://github.com/odoo/owl">Github</a>
+      &bull;
+      <a href="https://github.com/odoo/owl/blob/master/doc/readme.md">Documentation</a>
+      &bull;
+      <a href="playground/">Playground</a>
+    </p>
+  </nav>
+  <main>
+    <article class="design">
+      <div class="container">
+        <h2>Why OWL?</h2>
+        <div class="row">
+          <section class="column">
+            <h3>XML based</h3>
+            <p>Templates are based on the XML format, which allows interesting applications. For example, they could be stored in a database and modified dynamically with <tt>xpaths</tt>.</p>
+          </section>
+          <section class="column">
+            <h3>Templates compiled in the browser</h3>
+            <p>This may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.</p>
+          </section>
+          <section class="column">
+            <h3>No toolchain required</h3>
+            <p>This is extremely useful for some applications, if, for various reasons (security/deployment/dynamic modules/specific assets tools), it is not ok to use standard web tools based on <tt>npm</tt>.</p>
+          </section>
+        </div>
+      </div>
+    </article>
+    <article class="example">
+      <div class="container">
+        <h2>Example</h2>
+        <div class="row">
+          <section class="column">
+<pre><code class="javascript">import { mount, Component, useState } from "owl";
+
+class Counter extends Component {
+  setup() {
+    this.state = useState({ value: 0 });
+  }
+
+  increment() {
+    this.state.value++;
+  }
+}
+
+mount(Counter, document.body);</code></pre>
+          </section>
+          <section class="column">
+<pre><code class="xml">&lt;templates&gt;
+  &lt;t t-name=&quot;Counter&quot;&gt;
+    &lt;button t-on-click=&quot;increment&quot;&gt;
+      Click Me! [&lt;t t-esc=&quot;state.value&quot;/&gt;]
+    &lt;/button&gt;
+  &lt;/t&gt;
+&lt;/templates&gt;</code></pre>
+            <div id="app-container"></div>
+            <script>
+const { mount, Component, useState, xml } = owl;
+
+class Counter extends Component {
+  setup() {
+    this.state = useState({ value: 0 });
+  }
+
+  increment() {
+    this.state.value++;
+  }
+}
+Counter.template = xml`<button t-on-click="increment">
+  Click Me! [<t t-esc="state.value"/>]
+</button>`;
+
+mount(Counter, document.getElementById("app-container"));
+            </script>
+          </section>
+        </div>
+      </div>
+    </article>
+  </main>
+  <footer>
+    <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
+  </footer>
+  <script src="assets/highlight.pack.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+</body>
+</html>

package.json

@@ -1,93 +0,0 @@
-{
-  "name": "@odoo/owl",
-  "version": "2.0.2",
-  "description": "Odoo Web Library (OWL)",
-  "main": "dist/owl.cjs.js",
-  "module": "dist/owl.es.js",
-  "types": "dist/types/owl.d.ts",
-  "files": [
-    "dist"
-  ],
-  "engines": {
-    "node": ">=12.18.3"
-  },
-  "scripts": {
-    "build:bundle": "rollup -c --failAfterWarnings",
-    "build:runtime": "rollup -c --failAfterWarnings runtime",
-    "build:compiler": "rollup -c --failAfterWarnings compiler",
-    "build": "npm run build:bundle",
-    "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
-    "test:watch": "jest --watch",
-    "playground:serve": "python3 tools/server.py || python tools/server.py",
-    "playground": "npm run build && npm run playground:serve",
-    "preplayground:watch": "npm run build",
-    "playground:watch": "npm-run-all  --parallel playground:serve \"build:* -- --watch\"",
-    "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
-    "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --check",
-    "publish": "npm run build && npm publish",
-    "release": "node tools/release.js",
-    "compile_templates": "node tools/compile_xml.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/odoo/owl.git"
-  },
-  "author": "Odoo",
-  "license": "LGPL-3.0-only",
-  "bugs": {
-    "url": "https://github.com/odoo/owl/issues"
-  },
-  "homepage": "https://github.com/odoo/owl#readme",
-  "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "@types/node": "^14.11.8",
-    "chalk": "^3.0.0",
-    "cpx": "^1.5.0",
-    "current-git-branch": "^1.1.0",
-    "git-rev-sync": "^1.12.0",
-    "github-api": "^3.3.0",
-    "jest": "^27.1.0",
-    "jest-diff": "^27.3.1",
-    "jest-environment-jsdom": "^27.1.0",
-    "live-server": "^1.2.1",
-    "npm-run-all": "^4.1.5",
-    "prettier": "2.4.1",
-    "rollup": "^2.56.3",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.1",
-    "sass": "^1.16.1",
-    "source-map-support": "^0.5.10",
-    "ts-jest": "^27.0.5",
-    "typescript": "4.5.2",
-    "uglify-es": "^3.3.9"
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "roots": [
-      "<rootDir>/src",
-      "<rootDir>/tests"
-    ],
-    "setupFiles": [
-      "./tests/mocks/mockEventTarget.js"
-    ],
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    },
-    "verbose": false,
-    "testRegex": "(/tests/.*(test|spec))\\.ts?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  },
-  "prettier": {
-    "printWidth": 100,
-    "endOfLine": "auto"
-  }
-}

playground/app.js

@@ -226,6 +226,15 @@ class App extends owl.Component {
     this.downloadCode = debounce(this.downloadCode, 250, true);
     this.content = useRef("content");
     this.updateCode = this.updateCode.bind(this);
+    if (window.location.hash) {
+      try {
+        const { js, css, xml } = JSON.parse(atob(decodeURIComponent(window.location.hash.slice(1))));
+        if (![js, css, xml].every(item => typeof item === "string")) {
+          return;
+        }
+        Object.assign(this.state, { js, css, xml });
+      } catch {}
+    }
   }
 
   runCode() {
@@ -237,6 +246,18 @@ class App extends owl.Component {
     this.content.el.appendChild(subiframe);
   }
 
+  shareCode() {
+    const state = btoa(JSON.stringify({ js: this.state.js, css: this.state.css, xml: this.state.xml }));
+    const link = new URL(window.location.href);
+    link.hash = state;
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(link.href);
+      clearTimeout(this.state.copied)
+      this.state.copied = setTimeout(() => this.state.copied = null, 2000);
+    }
+    window.location.href = link.href;
+  }
+
   setSample(ev) {
     const sample = this.SAMPLES.find(s => s.description === ev.target.value);
     this.state.js = sample.code;

playground/playground.css

@@ -79,6 +79,19 @@ body {
   margin: 5px;
 }
 
+.share-code {
+  position: relative;
+}
+
+.copied-notification {
+  font-size: x-small;
+  position: absolute;
+  bottom: -5px;
+  white-space: nowrap;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 /* TABBED EDITOR ****************************************/
 
 .tabbed-editor {

playground/templates.xml

@@ -22,6 +22,7 @@
           </select>
           <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
           <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
+          <a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
         </div>
         <TabbedEditor
             js="state.js"

release-notes.md

@@ -0,0 +1,8 @@
+# v1.0.5
+
+- lots of doc improvements
+- qweb: ignore comments between t-if/t-elif/t-else
+- qweb: support attributes with inside quotes
+- component: concurrency bug fix
+- component: cancel previous mounting operations if necessary
+- transition: no crash if element added/removed quickly

roadmap.md

@@ -1,9 +0,0 @@
-# 🦉 OWL Roadmap 🦉
-
-- Current version: 2.X
-- Status: stable
-
-Owl is currently stable. No (large) improvements is expected in the near future.
-
-Note that we intend to keep maintaining owl, and as such, improvements and/or
-breaking changes may require a version bump in the future.

rollup.config.js

@@ -1,94 +0,0 @@
-import pkg from "./package.json";
-import git from "git-rev-sync";
-import typescript from 'rollup-plugin-typescript2';
-import { terser } from "rollup-plugin-terser";
-import dts from "rollup-plugin-dts";
-
-let input, output;
-
-const IIFE_FILENAME = "dist/owl.iife.js";
-const CJS_FILENAME = "dist/owl.cjs.js";
-const ES_FILENAME = "dist/owl.es.js";
-
-if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
-  throw new Error("package.json has been modified. Build script should be updated accordingly");
-}  
-
-const outro = `
-__info__.version = '${pkg.version}';
-__info__.date = '${new Date().toISOString()}';
-__info__.hash = '${git.short()}';
-__info__.url = 'https://github.com/odoo/owl';
-`;
-
-switch (process.argv[4]) {
-  case "compiler": 
-    input = "src/compiler/index.ts",
-    output = [
-      getConfigForFormat('cjs', 'dist/compiler.js', ''),
-    ]
-    break;
-  case "runtime":
-    input = "src/runtime/index.ts";
-    output = [
-      getConfigForFormat('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
-    ]
-    break;
-  default:
-    input = "src/index.ts",
-    output = [
-      getConfigForFormat('esm', ES_FILENAME, outro),
-      getConfigForFormat('cjs', CJS_FILENAME, outro),
-      getConfigForFormat('iife', IIFE_FILENAME, outro),
-      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
-    ]
-  }
-
-/**
- * Generate from a string depicting a path a new path for the minified version.
- * @param {string} pkgFileName file name
- */
-function addSuffix(pkgFileName, suffix) {
-  const parts = pkgFileName.split('.');
-  parts.splice(parts.length - 1, 0, suffix);
-  return parts.join('.');
-}
-
-/**
- * Get the rollup config based on the arguments
- * @param {string} format format of the bundle
- * @param {string} generatedFileName generated file name
- * @param {boolean} minified should it be minified
- */
-function getConfigForFormat(format, generatedFileName, outro, minified = false) {
-  return {
-    file: minified ? addSuffix(generatedFileName, "min") : generatedFileName,
-    format: format,
-    name: "owl",
-    extend: true,
-    outro: outro,
-    freeze: false,
-    plugins: minified ? [terser()] : [],
-    indent: '    ', // indent with 4 spaces
-  };
-}
-
-export default [
-  {
-    input,
-    output,
-    plugins: [
-      typescript({
-        useTsconfigDeclarationDir: true
-      }),
-    ]
-  },
-  {
-    input: "dist/types/index.d.ts",
-    output: [{ file: "dist/types/owl.d.ts", format: "es" }],
-    plugins: [dts()],
-  },
-];

src/compiler/index.ts

@@ -1,31 +0,0 @@
-import type { TemplateSet } from "../runtime/template_set";
-import type { BDom } from "../runtime/blockdom";
-import { CodeGenerator, Config } from "./code_generator";
-import { parse } from "./parser";
-
-export type Template = (context: any, vnode: any, key?: string) => BDom;
-
-export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Template;
-
-interface CompileOptions extends Config {
-  name?: string;
-}
-export function compile(
-  template: string | Element,
-  options: CompileOptions = {}
-): TemplateFunction {
-  // parsing
-  const ast = parse(template);
-
-  // some work
-  const hasSafeContext =
-    template instanceof Node
-      ? !(template instanceof Element) || template.querySelector("[t-set], [t-call]") === null
-      : !template.includes("t-set") && !template.includes("t-call");
-
-  // code generation
-  const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
-  const code = codeGenerator.generateCode();
-  // template function
-  return new Function("app, bdom, helpers", code) as TemplateFunction;
-}

src/compiler/inline_expressions.ts

@@ -1,375 +0,0 @@
-import { OwlError } from "../runtime/error_handling";
-
-/**
- * Owl QWeb Expression Parser
- *
- * Owl needs in various contexts to be able to understand the structure of a
- * string representing a javascript expression.  The usual goal is to be able
- * to rewrite some variables.  For example, if a template has
- *
- *  ```xml
- *  <t t-if="computeSomething({val: state.val})">...</t>
- * ```
- *
- * this needs to be translated in something like this:
- *
- * ```js
- *   if (context["computeSomething"]({val: context["state"].val})) { ... }
- * ```
- *
- * This file contains the implementation of an extremely naive tokenizer/parser
- * and evaluator for javascript expressions.  The supported grammar is basically
- * only expressive enough to understand the shape of objects, of arrays, and
- * various operators.
- */
-
-//------------------------------------------------------------------------------
-// Misc types, constants and helpers
-//------------------------------------------------------------------------------
-
-const RESERVED_WORDS =
-  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(
-    ","
-  );
-
-const WORD_REPLACEMENT: { [key: string]: string } = Object.assign(Object.create(null), {
-  and: "&&",
-  or: "||",
-  gt: ">",
-  gte: ">=",
-  lt: "<",
-  lte: "<=",
-});
-
-export interface QWebVar {
-  id: string; // foo
-  expr: string; // scope.foo (local variables => only foo)
-  value?: string; // 1 + 3
-  hasBody?: boolean;
-}
-
-//------------------------------------------------------------------------------
-// Tokenizer
-//------------------------------------------------------------------------------
-type TKind =
-  | "LEFT_BRACE"
-  | "RIGHT_BRACE"
-  | "LEFT_BRACKET"
-  | "RIGHT_BRACKET"
-  | "LEFT_PAREN"
-  | "RIGHT_PAREN"
-  | "COMMA"
-  | "VALUE"
-  | "TEMPLATE_STRING"
-  | "SYMBOL"
-  | "OPERATOR"
-  | "COLON";
-
-interface Token {
-  type: TKind;
-  value: string;
-  originalValue?: string;
-  size?: number;
-  varName?: string;
-  replace?: Function;
-  isLocal?: boolean;
-}
-
-const STATIC_TOKEN_MAP: { [key: string]: TKind } = Object.assign(Object.create(null), {
-  "{": "LEFT_BRACE",
-  "}": "RIGHT_BRACE",
-  "[": "LEFT_BRACKET",
-  "]": "RIGHT_BRACKET",
-  ":": "COLON",
-  ",": "COMMA",
-  "(": "LEFT_PAREN",
-  ")": "RIGHT_PAREN",
-});
-
-// note that the space after typeof is relevant. It makes sure that the formatted
-// expression has a space after typeof. Currently we don't support delete and void
-const OPERATORS =
-  "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ,new ,|,&,^,~".split(",");
-
-type Tokenizer = (expr: string) => Token | false;
-
-let tokenizeString: Tokenizer = function (expr) {
-  let s = expr[0];
-  let start = s;
-  if (s !== "'" && s !== '"' && s !== "`") {
-    return false;
-  }
-  let i = 1;
-  let cur;
-  while (expr[i] && expr[i] !== start) {
-    cur = expr[i];
-    s += cur;
-    if (cur === "\\") {
-      i++;
-      cur = expr[i];
-      if (!cur) {
-        throw new OwlError("Invalid expression");
-      }
-      s += cur;
-    }
-    i++;
-  }
-  if (expr[i] !== start) {
-    throw new OwlError("Invalid expression");
-  }
-  s += start;
-  if (start === "`") {
-    return {
-      type: "TEMPLATE_STRING",
-      value: s,
-      replace(replacer: any) {
-        return s.replace(/\$\{(.*?)\}/g, (match, group) => {
-          return "${" + replacer(group) + "}";
-        });
-      },
-    };
-  }
-  return { type: "VALUE", value: s };
-};
-
-let tokenizeNumber: Tokenizer = function (expr) {
-  let s = expr[0];
-  if (s && s.match(/[0-9]/)) {
-    let i = 1;
-    while (expr[i] && expr[i].match(/[0-9]|\./)) {
-      s += expr[i];
-      i++;
-    }
-    return { type: "VALUE", value: s };
-  } else {
-    return false;
-  }
-};
-
-let tokenizeSymbol: Tokenizer = function (expr) {
-  let s = expr[0];
-  if (s && s.match(/[a-zA-Z_\$]/)) {
-    let i = 1;
-    while (expr[i] && expr[i].match(/\w/)) {
-      s += expr[i];
-      i++;
-    }
-    if (s in WORD_REPLACEMENT) {
-      return { type: "OPERATOR", value: WORD_REPLACEMENT[s], size: s.length };
-    }
-    return { type: "SYMBOL", value: s };
-  } else {
-    return false;
-  }
-};
-
-const tokenizeStatic: Tokenizer = function (expr) {
-  const char = expr[0];
-  if (char && char in STATIC_TOKEN_MAP) {
-    return { type: STATIC_TOKEN_MAP[char], value: char };
-  }
-  return false;
-};
-
-const tokenizeOperator: Tokenizer = function (expr) {
-  for (let op of OPERATORS) {
-    if (expr.startsWith(op)) {
-      return { type: "OPERATOR", value: op };
-    }
-  }
-  return false;
-};
-
-const TOKENIZERS = [
-  tokenizeString,
-  tokenizeNumber,
-  tokenizeOperator,
-  tokenizeSymbol,
-  tokenizeStatic,
-];
-
-/**
- * Convert a javascript expression (as a string) into a list of tokens. For
- * example: `tokenize("1 + b")` will return:
- * ```js
- *  [
- *   {type: "VALUE", value: "1"},
- *   {type: "OPERATOR", value: "+"},
- *   {type: "SYMBOL", value: "b"}
- * ]
- * ```
- */
-export function tokenize(expr: string): Token[] {
-  const result: Token[] = [];
-  let token: boolean | Token = true;
-  let error: any;
-  let current = expr;
-
-  try {
-    while (token) {
-      current = current.trim();
-      if (current) {
-        for (let tokenizer of TOKENIZERS) {
-          token = tokenizer(current);
-          if (token) {
-            result.push(token);
-            current = current.slice(token.size || token.value.length);
-            break;
-          }
-        }
-      } else {
-        token = false;
-      }
-    }
-  } catch (e) {
-    error = e; // Silence all errors and throw a generic error below
-  }
-  if (current.length || error) {
-    throw new OwlError(`Tokenizer error: could not tokenize \`${expr}\``);
-  }
-  return result;
-}
-
-//------------------------------------------------------------------------------
-// Expression "evaluator"
-//------------------------------------------------------------------------------
-
-const isLeftSeparator = (token: Token) =>
-  token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
-const isRightSeparator = (token: Token) =>
-  token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
-
-/**
- * This is the main function exported by this file. This is the code that will
- * process an expression (given as a string) and returns another expression with
- * proper lookups in the context.
- *
- * Usually, this kind of code would be very simple to do if we had an AST (so,
- * if we had a javascript parser), since then, we would only need to find the
- * variables and replace them.  However, a parser is more complicated, and there
- * are no standard builtin parser API.
- *
- * Since this method is applied to simple javasript expressions, and the work to
- * be done is actually quite simple, we actually can get away with not using a
- * parser, which helps with the code size.
- *
- * Here is the heuristic used by this method to determine if a token is a
- * variable:
- * - by default, all symbols are considered a variable
- * - unless the previous token is a dot (in that case, this is a property: `a.b`)
- * - or if the previous token is a left brace or a comma, and the next token is
- *   a colon (in that case, this is an object key: `{a: b}`)
- *
- * Some specific code is also required to support arrow functions. If we detect
- * the arrow operator, then we add the current (or some previous tokens) token to
- * the list of variables so it does not get replaced by a lookup in the context
- */
-export function compileExprToArray(expr: string): Token[] {
-  const localVars = new Set<string>();
-  const tokens = tokenize(expr);
-  let i = 0;
-  let stack = []; // to track last opening [ or {
-
-  while (i < tokens.length) {
-    let token = tokens[i];
-    let prevToken = tokens[i - 1];
-    let nextToken = tokens[i + 1];
-    let groupType = stack[stack.length - 1];
-
-    switch (token.type) {
-      case "LEFT_BRACE":
-      case "LEFT_BRACKET":
-        stack.push(token.type);
-        break;
-      case "RIGHT_BRACE":
-      case "RIGHT_BRACKET":
-        stack.pop();
-    }
-
-    let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
-    if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
-      if (prevToken) {
-        // normalize missing tokens: {a} should be equivalent to {a:a}
-        if (
-          groupType === "LEFT_BRACE" &&
-          isLeftSeparator(prevToken) &&
-          isRightSeparator(nextToken)
-        ) {
-          tokens.splice(i + 1, 0, { type: "COLON", value: ":" }, { ...token });
-          nextToken = tokens[i + 1];
-        }
-
-        if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
-          isVar = false;
-        } else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
-          if (nextToken && nextToken.type === "COLON") {
-            isVar = false;
-          }
-        }
-      }
-    }
-    if (token.type === "TEMPLATE_STRING") {
-      token.value = token.replace!((expr: any) => compileExpr(expr));
-    }
-    if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
-      if (token.type === "RIGHT_PAREN") {
-        let j = i - 1;
-        while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
-          if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
-            tokens[j].value = tokens[j].originalValue!;
-            localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
-          }
-          j--;
-        }
-      } else {
-        localVars.add(token.value); //] = { id: token.value, expr: token.value };
-      }
-    }
-
-    if (isVar) {
-      token.varName = token.value;
-      if (!localVars.has(token.value)) {
-        token.originalValue = token.value;
-        token.value = `ctx['${token.value}']`;
-      }
-    }
-    i++;
-  }
-  // Mark all variables that have been used locally.
-  // This assumes the expression has only one scope (incorrect but "good enough for now")
-  for (const token of tokens) {
-    if (token.type === "SYMBOL" && token.varName && localVars.has(token.value)) {
-      token.originalValue = token.value;
-      token.value = `_${token.value}`;
-      token.isLocal = true;
-    }
-  }
-  return tokens;
-}
-
-// Leading spaces are trimmed during tokenization, so they need to be added back for some values
-const paddedValues = new Map([["in ", " in "]]);
-
-export function compileExpr(expr: string): string {
-  return compileExprToArray(expr)
-    .map((t) => paddedValues.get(t.value) || t.value)
-    .join("");
-}
-
-export const INTERP_REGEXP = /\{\{.*?\}\}|\#\{.*?\}/g;
-
-export function replaceDynamicParts(s: string, replacer: (s: string) => string) {
-  let matches = s.match(INTERP_REGEXP);
-  if (matches && matches[0].length === s.length) {
-    return `(${replacer(s.slice(2, matches[0][0] === "{" ? -2 : -1))})`;
-  }
-
-  let r = s.replace(
-    INTERP_REGEXP,
-    (s) => "${" + replacer(s.slice(2, s[0] === "{" ? -2 : -1)) + "}"
-  );
-  return "`" + r + "`";
-}
-export function interpolate(s: string): string {
-  return replaceDynamicParts(s, compileExpr);
-}

src/index.ts

@@ -1,16 +0,0 @@
-import { TemplateSet } from "./runtime/template_set";
-import { compile } from "./compiler";
-
-export * from "./runtime";
-
-TemplateSet.prototype._compileTemplate = function _compileTemplate(
-  name: string,
-  template: string | Element
-) {
-  return compile(template, {
-    name,
-    dev: this.dev,
-    translateFn: this.translateFn,
-    translatableAttributes: this.translatableAttributes,
-  });
-};

src/runtime/app.ts

@@ -1,193 +0,0 @@
-import { Component, ComponentConstructor, Props } from "./component";
-import { ComponentNode } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
-import { Fiber, MountOptions } from "./fibers";
-import { Scheduler } from "./scheduler";
-import { validateProps } from "./template_helpers";
-import { TemplateSet, TemplateSetConfig } from "./template_set";
-import { validateTarget } from "./utils";
-import { handleError } from "./error_handling";
-
-// reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
-
-export interface Env {
-  [key: string]: any;
-}
-
-export interface AppConfig<P, E> extends TemplateSetConfig {
-  props?: P;
-  env?: E;
-  test?: boolean;
-  warnIfNoStaticProps?: boolean;
-}
-
-let hasBeenLogged = false;
-
-export const DEV_MSG = () => {
-  const hash = (window as any).owl ? (window as any).owl.__info__.hash : "master";
-
-  return `Owl is running in 'dev' mode.
-
-This is not suitable for production use.
-See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
-};
-
-export class App<
-  T extends abstract new (...args: any) => any = any,
-  P extends object = any,
-  E = any
-> extends TemplateSet {
-  static validateTarget = validateTarget;
-
-  Root: ComponentConstructor<P, E>;
-  props: P;
-  env: E;
-  scheduler = new Scheduler();
-  root: ComponentNode<P, E> | null = null;
-  warnIfNoStaticProps: boolean;
-
-  constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
-    super(config);
-    this.Root = Root;
-    if (config.test) {
-      this.dev = true;
-    }
-    this.warnIfNoStaticProps = config.warnIfNoStaticProps || false;
-    if (this.dev && !config.test && !hasBeenLogged) {
-      console.info(DEV_MSG());
-      hasBeenLogged = true;
-    }
-    const env = config.env || {};
-    const descrs = Object.getOwnPropertyDescriptors(env);
-    this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
-    this.props = config.props || ({} as P);
-  }
-
-  mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
-    App.validateTarget(target);
-    if (this.dev) {
-      validateProps(this.Root, this.props, { __owl__: { app: this } });
-    }
-    const node = this.makeNode(this.Root, this.props);
-    const prom = this.mountNode(node, target, options);
-    this.root = node;
-    return prom;
-  }
-
-  makeNode(Component: ComponentConstructor, props: any): ComponentNode {
-    return new ComponentNode(Component, props, this, null, null);
-  }
-
-  mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
-    const promise: any = new Promise((resolve, reject) => {
-      let isResolved = false;
-      // manually set a onMounted callback.
-      // that way, we are independant from the current node.
-      node.mounted.push(() => {
-        resolve(node.component);
-        isResolved = true;
-      });
-
-      // Manually add the last resort error handler on the node
-      let handlers = nodeErrorHandlers.get(node);
-      if (!handlers) {
-        handlers = [];
-        nodeErrorHandlers.set(node, handlers);
-      }
-      handlers.unshift((e) => {
-        if (!isResolved) {
-          reject(e);
-        }
-        throw e;
-      });
-    });
-    node.mountComponent(target, options);
-    return promise;
-  }
-
-  destroy() {
-    if (this.root) {
-      this.scheduler.flush();
-      this.root.destroy();
-    }
-  }
-
-  createComponent<P extends Props>(
-    name: string | null,
-    isStatic: boolean,
-    hasSlotsProp: boolean,
-    hasDynamicPropList: boolean,
-    hasNoProp: boolean
-  ) {
-    const isDynamic = !isStatic;
-    function _arePropsDifferent(props1: Props, props2: Props): boolean {
-      for (let k in props1) {
-        if (props1[k] !== props2[k]) {
-          return true;
-        }
-      }
-      return hasDynamicPropList && Object.keys(props1).length !== Object.keys(props2).length;
-    }
-    const arePropsDifferent = hasSlotsProp
-      ? (_1: any, _2: any) => true
-      : hasNoProp
-      ? (_1: any, _2: any) => false
-      : _arePropsDifferent;
-    const updateAndRender = ComponentNode.prototype.updateAndRender;
-    const initiateRender = ComponentNode.prototype.initiateRender;
-
-    return (props: P, key: string, ctx: ComponentNode, parent: any, C: any) => {
-      let children = ctx.children;
-      let node: any = children[key];
-      if (isDynamic && node && node.component.constructor !== C) {
-        node = undefined;
-      }
-      const parentFiber = ctx.fiber!;
-      if (node) {
-        if (arePropsDifferent(node.props, props) || parentFiber.deep || node.forceNextRender) {
-          node.forceNextRender = false;
-          updateAndRender.call(node, props, parentFiber);
-        }
-      } else {
-        // new component
-        if (isStatic) {
-          const components = parent.constructor.components;
-          if (!components) {
-            throw new OwlError(
-              `Cannot find the definition of component "${name}", missing static components key in parent`
-            );
-          }
-          C = components[name as any];
-          if (!C) {
-            throw new OwlError(`Cannot find the definition of component "${name}"`);
-          } else if (!(C.prototype instanceof Component)) {
-            throw new OwlError(
-              `"${name}" is not a Component. It must inherit from the Component class`
-            );
-          }
-        }
-        node = new ComponentNode(C, props, this, ctx, key);
-        children[key] = node;
-        initiateRender.call(node, new Fiber(node, parentFiber));
-      }
-      parentFiber.childrenMap[key] = node;
-      return node;
-    };
-  }
-
-  handleError(...args: Parameters<typeof handleError>) {
-    return handleError(...args);
-  }
-}
-
-export async function mount<
-  T extends abstract new (...args: any) => any = any,
-  P extends object = any,
-  E = any
->(
-  C: T & ComponentConstructor<P, E>,
-  target: HTMLElement,
-  config: AppConfig<P, E> & MountOptions = {}
-): Promise<Component<P, E> & InstanceType<T>> {
-  return new App(C, config).mount(target, config);
-}

src/runtime/blockdom/attributes.ts

@@ -1,172 +0,0 @@
-import type { Setter } from "./block_compiler";
-
-const { setAttribute: elemSetAttribute, removeAttribute } = Element.prototype;
-const tokenList = DOMTokenList.prototype;
-const tokenListAdd = tokenList.add;
-const tokenListRemove = tokenList.remove;
-const isArray = Array.isArray;
-const { split, trim } = String.prototype;
-const wordRegexp = /\s+/;
-
-/**
- * We regroup here all code related to updating attributes in a very loose sense:
- * attributes, properties and classs are all managed by the functions in this
- * file.
- */
-
-function setAttribute(this: HTMLElement, key: string, value: any) {
-  switch (value) {
-    case false:
-    case undefined:
-      removeAttribute.call(this, key);
-      break;
-    case true:
-      elemSetAttribute.call(this, key, "");
-      break;
-    default:
-      elemSetAttribute.call(this, key, value);
-  }
-}
-
-export function createAttrUpdater(attr: string): Setter<HTMLElement> {
-  return function (this: HTMLElement, value: any) {
-    setAttribute.call(this, attr, value);
-  };
-}
-
-export function attrsSetter(this: HTMLElement, attrs: any) {
-  if (isArray(attrs)) {
-    setAttribute.call(this, attrs[0], attrs[1]);
-  } else {
-    for (let k in attrs) {
-      setAttribute.call(this, k, attrs[k]);
-    }
-  }
-}
-
-export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
-  if (isArray(attrs)) {
-    const name = attrs[0];
-    const val = attrs[1];
-    if (name === oldAttrs[0]) {
-      if (val === oldAttrs[1]) {
-        return;
-      }
-      setAttribute.call(this, name, val);
-    } else {
-      removeAttribute.call(this, oldAttrs[0]);
-      setAttribute.call(this, name, val);
-    }
-  } else {
-    for (let k in oldAttrs) {
-      if (!(k in attrs)) {
-        removeAttribute.call(this, k);
-      }
-    }
-    for (let k in attrs) {
-      const val = attrs[k];
-      if (val !== oldAttrs[k]) {
-        setAttribute.call(this, k, val);
-      }
-    }
-  }
-}
-
-function toClassObj(expr: string | number | { [c: string]: any }) {
-  const result: { [c: string]: any } = {};
-  switch (typeof expr) {
-    case "string":
-      // we transform here a list of classes into an object:
-      //  'hey you' becomes {hey: true, you: true}
-      const str = trim.call(expr);
-      if (!str) {
-        return {};
-      }
-      let words = split.call(str, wordRegexp);
-      for (let i = 0, l = words.length; i < l; i++) {
-        result[words[i]] = true;
-      }
-      return result;
-    case "object":
-      // this is already an object but we may need to split keys:
-      // {'a': true, 'b c': true} should become {a: true, b: true, c: true}
-      for (let key in expr as any) {
-        const value = (expr as any)[key];
-        if (value) {
-          key = trim.call(key);
-          if (!key) {
-            continue;
-          }
-          const words = split.call(key, wordRegexp);
-          for (let word of words) {
-            result[word] = value;
-          }
-        }
-      }
-      return result;
-
-    case "undefined":
-      return {};
-    case "number":
-      return { [expr as number]: true };
-    default:
-      return { [expr as any]: true };
-  }
-}
-
-export function setClass(this: HTMLElement, val: any) {
-  val = val === "" ? {} : toClassObj(val);
-  // add classes
-  const cl = this.classList;
-  for (let c in val) {
-    tokenListAdd.call(cl, c);
-  }
-}
-
-export function updateClass(this: HTMLElement, val: any, oldVal: any) {
-  oldVal = oldVal === "" ? {} : toClassObj(oldVal);
-  val = val === "" ? {} : toClassObj(val);
-  const cl = this.classList;
-  // remove classes
-  for (let c in oldVal) {
-    if (!(c in val)) {
-      tokenListRemove.call(cl, c);
-    }
-  }
-  // add classes
-  for (let c in val) {
-    if (!(c in oldVal)) {
-      tokenListAdd.call(cl, c);
-    }
-  }
-}
-
-export function makePropSetter(name: string): Setter<HTMLElement> {
-  return function setProp(this: HTMLElement, value: any) {
-    // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
-  };
-}
-
-export function isProp(tag: string, key: string): boolean {
-  switch (tag) {
-    case "input":
-      return (
-        key === "checked" ||
-        key === "indeterminate" ||
-        key === "value" ||
-        key === "readonly" ||
-        key === "disabled"
-      );
-    case "option":
-      return key === "selected" || key === "disabled";
-    case "textarea":
-      return key === "value" || key === "readonly" || key === "disabled";
-    case "select":
-      return key === "value" || key === "disabled";
-    case "button":
-    case "optgroup":
-      return key === "disabled";
-  }
-  return false;
-}

src/runtime/blockdom/block_compiler.ts

@@ -1,642 +0,0 @@
-import { OwlError } from "../error_handling";
-import {
-  attrsSetter,
-  attrsUpdater,
-  createAttrUpdater,
-  isProp,
-  makePropSetter,
-  setClass,
-  updateClass,
-} from "./attributes";
-import { config } from "./config";
-import { createEventHandler } from "./events";
-import type { VNode } from "./index";
-import { VMulti } from "./multi";
-import { toText } from "./text";
-
-const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
-const nodeProto = Node.prototype;
-const elementProto = Element.prototype;
-const characterDataProto = CharacterData.prototype;
-
-const characterDataSetData = getDescriptor(characterDataProto, "data").set!;
-const nodeGetFirstChild = getDescriptor(nodeProto, "firstChild").get!;
-const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
-
-const NO_OP = () => {};
-
-// -----------------------------------------------------------------------------
-// Main compiler code
-// -----------------------------------------------------------------------------
-
-type BlockType = (data?: any[], children?: VNode[]) => VNode;
-
-const cache: { [key: string]: BlockType } = {};
-
-/**
- * Compiling blocks is a multi-step process:
- *
- * 1. build an IntermediateTree from the HTML element. This intermediate tree
- *    is a binary tree structure that encode dynamic info sub nodes, and the
- *    path required to reach them
- * 2. process the tree to build a block context, which is an object that aggregate
- *    all dynamic info in a list, and also, all ref indexes.
- * 3. process the context to build appropriate builder/setter functions
- * 4. make a dynamic block class, which will efficiently collect references and
- *    create/update dynamic locations/children
- *
- * @param str
- * @returns a new block type, that can build concrete blocks
- */
-export function createBlock(str: string): BlockType {
-  if (str in cache) {
-    return cache[str];
-  }
-
-  // step 0: prepare html base element
-  const doc = new DOMParser().parseFromString(`<t>${str}</t>`, "text/xml");
-  const node = doc.firstChild!.firstChild!;
-  if (config.shouldNormalizeDom) {
-    normalizeNode(node as any);
-  }
-
-  // step 1: prepare intermediate tree
-  const tree = buildTree(node);
-
-  // step 2: prepare block context
-  const context = buildContext(tree);
-
-  // step 3: build the final block class
-  const template = tree.el as HTMLElement;
-  const Block = buildBlock(template, context);
-  cache[str] = Block;
-  return Block;
-}
-
-// -----------------------------------------------------------------------------
-// Helper
-// -----------------------------------------------------------------------------
-
-function normalizeNode(node: HTMLElement | Text) {
-  if (node.nodeType === Node.TEXT_NODE) {
-    if (!/\S/.test((node as Text).textContent!)) {
-      (node as Text).remove();
-      return;
-    }
-  }
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    if ((node as HTMLElement).tagName === "pre") {
-      return;
-    }
-  }
-  for (let i = node.childNodes.length - 1; i >= 0; --i) {
-    normalizeNode(node.childNodes.item(i) as any);
-  }
-}
-
-// -----------------------------------------------------------------------------
-// building a intermediate tree
-// -----------------------------------------------------------------------------
-
-interface DynamicInfo {
-  idx: number;
-  refIdx?: number;
-  type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref";
-  isOnlyChild?: boolean;
-  name?: string;
-  tag?: string;
-  event?: string;
-}
-
-interface IntermediateTree {
-  parent: IntermediateTree | null;
-  firstChild: IntermediateTree | null;
-  nextSibling: IntermediateTree | null;
-  el: Node;
-  info: DynamicInfo[];
-  isRef?: boolean;
-  refIdx?: number;
-  refN: number;
-  currentNS: string | null;
-}
-
-function buildTree(
-  node: Node,
-  parent: IntermediateTree | null = null,
-  domParentTree: IntermediateTree | null = null
-): IntermediateTree {
-  switch (node.nodeType) {
-    case Node.ELEMENT_NODE: {
-      // HTMLElement
-      let currentNS = domParentTree && domParentTree.currentNS;
-      const tagName = (node as Element).tagName;
-      let el: Node | undefined = undefined;
-      const info: DynamicInfo[] = [];
-      if (tagName.startsWith("block-text-")) {
-        const index = parseInt(tagName.slice(11), 10);
-        info.push({ type: "text", idx: index });
-        el = document.createTextNode("");
-      }
-      if (tagName.startsWith("block-child-")) {
-        if (!domParentTree!.isRef) {
-          addRef(domParentTree!);
-        }
-        const index = parseInt(tagName.slice(12), 10);
-        info.push({ type: "child", idx: index });
-        el = document.createTextNode("");
-      }
-      const attrs = (node as Element).attributes;
-      const ns = attrs.getNamedItem("block-ns");
-      if (ns) {
-        attrs.removeNamedItem("block-ns");
-        currentNS = ns.value;
-      }
-      if (!el) {
-        el = currentNS
-          ? document.createElementNS(currentNS, tagName)
-          : document.createElement(tagName);
-      }
-      if (el instanceof Element) {
-        if (!domParentTree) {
-          // some html elements may have side effects when setting their attributes.
-          // For example, setting the src attribute of an <img/> will trigger a
-          // request to get the corresponding image. This is something that we
-          // don't want at compile time. We avoid that by putting the content of
-          // the block in a <template/> element
-          const fragment = document.createElement("template").content;
-          fragment.appendChild(el);
-        }
-        for (let i = 0; i < attrs.length; i++) {
-          const attrName = attrs[i].name;
-          const attrValue = attrs[i].value;
-          if (attrName.startsWith("block-handler-")) {
-            const idx = parseInt(attrName.slice(14), 10);
-            info.push({
-              type: "handler",
-              idx,
-              event: attrValue,
-            });
-          } else if (attrName.startsWith("block-attribute-")) {
-            const idx = parseInt(attrName.slice(16), 10);
-            info.push({
-              type: "attribute",
-              idx,
-              name: attrValue,
-              tag: tagName,
-            });
-          } else if (attrName === "block-attributes") {
-            info.push({
-              type: "attributes",
-              idx: parseInt(attrValue, 10),
-            });
-          } else if (attrName === "block-ref") {
-            info.push({
-              type: "ref",
-              idx: parseInt(attrValue, 10),
-            });
-          } else {
-            el.setAttribute(attrs[i].name, attrValue);
-          }
-        }
-      }
-
-      const tree: IntermediateTree = {
-        parent,
-        firstChild: null,
-        nextSibling: null,
-        el,
-        info,
-        refN: 0,
-        currentNS,
-      };
-
-      if (node.firstChild) {
-        const childNode = node.childNodes[0];
-        if (
-          node.childNodes.length === 1 &&
-          childNode.nodeType === Node.ELEMENT_NODE &&
-          (childNode as Element).tagName.startsWith("block-child-")
-        ) {
-          const tagName = (childNode as Element).tagName;
-          const index = parseInt(tagName.slice(12), 10);
-          info.push({ idx: index, type: "child", isOnlyChild: true });
-        } else {
-          tree.firstChild = buildTree(node.firstChild, tree, tree);
-          el.appendChild(tree.firstChild.el);
-          let curNode: Node | null = node.firstChild;
-          let curTree: IntermediateTree | null = tree.firstChild;
-          while ((curNode = curNode.nextSibling)) {
-            curTree.nextSibling = buildTree(curNode, curTree, tree);
-            el.appendChild(curTree.nextSibling.el);
-            curTree = curTree.nextSibling;
-          }
-        }
-      }
-      if (tree.info.length) {
-        addRef(tree);
-      }
-      return tree;
-    }
-    case Node.TEXT_NODE:
-    case Node.COMMENT_NODE: {
-      // text node or comment node
-      const el =
-        node.nodeType === Node.TEXT_NODE
-          ? document.createTextNode(node.textContent!)
-          : document.createComment(node.textContent!);
-      return {
-        parent: parent,
-        firstChild: null,
-        nextSibling: null,
-        el,
-        info: [],
-        refN: 0,
-        currentNS: null,
-      };
-    }
-  }
-  throw new OwlError("boom");
-}
-
-function addRef(tree: IntermediateTree) {
-  tree.isRef = true;
-  do {
-    tree.refN++;
-  } while ((tree = tree.parent as any));
-}
-
-function parentTree(tree: IntermediateTree): IntermediateTree | null {
-  let parent = tree.parent;
-  while (parent && parent.nextSibling === tree) {
-    tree = parent;
-    parent = parent.parent;
-  }
-  return parent;
-}
-
-// -----------------------------------------------------------------------------
-// Building a block context
-// -----------------------------------------------------------------------------
-
-interface RefCollector {
-  idx: number;
-  prevIdx: number;
-  getVal: Function;
-}
-
-export type Setter<T = any> = (this: T, value: any) => void;
-export type Updater<T = any> = (this: T, value: any, oldVal: any) => void;
-
-interface Location {
-  refIdx: number;
-  setData: Setter;
-  updateData: Updater;
-}
-
-interface IndexedLocation extends Location {
-  idx: number;
-}
-
-interface Child {
-  parentRefIdx: number;
-  afterRefIdx?: number;
-  isOnlyChild?: boolean;
-}
-
-interface BlockCtx {
-  refN: number;
-  collectors: RefCollector[];
-  locations: IndexedLocation[];
-  children: Child[];
-  cbRefs: number[];
-  refList: (() => void)[][];
-}
-
-function buildContext(tree: IntermediateTree, ctx?: BlockCtx, fromIdx?: number): BlockCtx {
-  if (!ctx) {
-    const children = new Array(tree.info.filter((v) => v.type === "child").length);
-    ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN, refList: [] };
-    fromIdx = 0;
-  }
-  if (tree.refN) {
-    const initialIdx = fromIdx!;
-    const isRef = tree.isRef;
-    const firstChild = tree.firstChild ? tree.firstChild.refN : 0;
-    const nextSibling = tree.nextSibling ? tree.nextSibling.refN : 0;
-
-    //node
-    if (isRef) {
-      for (let info of tree.info) {
-        info.refIdx = initialIdx!;
-      }
-      tree.refIdx = initialIdx!;
-      updateCtx(ctx, tree);
-      fromIdx!++;
-    }
-
-    // right
-    if (nextSibling) {
-      const idx = fromIdx! + firstChild;
-      ctx.collectors.push({ idx, prevIdx: initialIdx, getVal: nodeGetNextSibling });
-      buildContext(tree.nextSibling!, ctx, idx);
-    }
-
-    // left
-    if (firstChild) {
-      ctx.collectors.push({ idx: fromIdx!, prevIdx: initialIdx, getVal: nodeGetFirstChild });
-      buildContext(tree.firstChild!, ctx, fromIdx!);
-    }
-  }
-
-  return ctx;
-}
-
-function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
-  for (let info of tree.info) {
-    switch (info.type) {
-      case "text":
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx: info.refIdx!,
-          setData: setText,
-          updateData: setText,
-        });
-        break;
-      case "child":
-        if (info.isOnlyChild) {
-          // tree is the parentnode here
-          ctx.children[info.idx] = {
-            parentRefIdx: info.refIdx!,
-            isOnlyChild: true,
-          };
-        } else {
-          // tree is the anchor text node
-          ctx.children[info.idx] = {
-            parentRefIdx: parentTree(tree)!.refIdx!,
-            afterRefIdx: info.refIdx!,
-          };
-        }
-        break;
-      case "attribute": {
-        const refIdx = info.refIdx!;
-        let updater: any;
-        let setter: any;
-        if (isProp(info.tag!, info.name!)) {
-          const setProp = makePropSetter(info.name!);
-          setter = setProp;
-          updater = setProp;
-        } else if (info.name === "class") {
-          setter = setClass;
-          updater = updateClass;
-        } else {
-          setter = createAttrUpdater(info.name!);
-          updater = setter;
-        }
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx,
-          setData: setter,
-          updateData: updater,
-        });
-        break;
-      }
-      case "attributes":
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx: info.refIdx!,
-          setData: attrsSetter,
-          updateData: attrsUpdater,
-        });
-        break;
-      case "handler": {
-        const { setup, update } = createEventHandler(info.event!);
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx: info.refIdx!,
-          setData: setup,
-          updateData: update,
-        });
-        break;
-      }
-      case "ref":
-        const index = ctx.cbRefs.push(info.idx) - 1;
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx: info.refIdx!,
-          setData: makeRefSetter(index, ctx.refList),
-          updateData: NO_OP,
-        });
-    }
-  }
-}
-// -----------------------------------------------------------------------------
-// building the concrete block class
-// -----------------------------------------------------------------------------
-
-function buildBlock(template: HTMLElement, ctx: BlockCtx): BlockType {
-  let B = createBlockClass(template, ctx);
-
-  if (ctx.cbRefs.length) {
-    const cbRefs = ctx.cbRefs;
-    const refList = ctx.refList;
-    let cbRefsNumber = cbRefs.length;
-    B = class extends B {
-      mount(parent: HTMLElement, afterNode: Node | null) {
-        refList.push(new Array(cbRefsNumber));
-        super.mount(parent, afterNode);
-        for (let cbRef of refList.pop()!) {
-          cbRef();
-        }
-      }
-      remove() {
-        super.remove();
-        for (let cbRef of cbRefs) {
-          let fn = (this as any).data[cbRef];
-          fn(null);
-        }
-      }
-    };
-  }
-
-  if (ctx.children.length) {
-    B = class extends B {
-      children: (VNode | undefined)[] | undefined;
-      constructor(data?: any[], children?: VNode[]) {
-        super(data);
-        this.children = children;
-      }
-    };
-    B.prototype.beforeRemove = VMulti.prototype.beforeRemove;
-    return (data?: any[], children: (VNode | undefined)[] = []) => new B(data, children);
-  }
-
-  return (data?: any[]) => new B(data);
-}
-
-type Constructor<T> = new (...args: any[]) => T;
-type BlockClass = Constructor<VNode<any>>;
-
-function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
-  const { refN, collectors, children } = ctx;
-  const colN = collectors.length;
-  ctx.locations.sort((a, b) => a.idx - b.idx);
-  const locations: Location[] = ctx.locations.map((loc) => ({
-    refIdx: loc.refIdx,
-    setData: loc.setData,
-    updateData: loc.updateData,
-  }));
-  const locN = locations.length;
-  const childN = children.length;
-  const childrenLocs = children;
-  const isDynamic = refN > 0;
-
-  // these values are defined here to make them faster to lookup in the class
-  // block scope
-  const nodeCloneNode = nodeProto.cloneNode;
-  const nodeInsertBefore = nodeProto.insertBefore;
-  const elementRemove = elementProto.remove;
-
-  class Block {
-    el: HTMLElement | undefined;
-    parentEl?: HTMLElement | undefined;
-    data: any[] | undefined;
-    children?: (VNode | undefined)[];
-    refs: Node[] | undefined;
-
-    constructor(data?: any[]) {
-      this.data = data;
-    }
-
-    beforeRemove() {}
-
-    remove() {
-      elementRemove.call(this.el);
-    }
-
-    firstNode(): Node {
-      return this.el!;
-    }
-
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      nodeInsertBefore.call(parent, this.el!, node);
-    }
-
-    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
-      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
-    }
-
-    toString() {
-      const div = document.createElement("div");
-      this.mount(div, null);
-      return div.innerHTML;
-    }
-
-    mount(parent: HTMLElement, afterNode: Node | null) {
-      const el = nodeCloneNode.call(template, true) as HTMLElement;
-      nodeInsertBefore.call(parent, el, afterNode);
-      this.el = el;
-      this.parentEl = parent;
-    }
-    patch(other: Block, withBeforeRemove: boolean) {}
-  }
-
-  if (isDynamic) {
-    Block.prototype.mount = function mount(parent: HTMLElement, afterNode: Node | null) {
-      const el = nodeCloneNode.call(template, true);
-      // collecting references
-      const refs: Node[] = new Array(refN);
-      this.refs = refs;
-      refs[0] = el;
-      for (let i = 0; i < colN; i++) {
-        const w = collectors[i];
-        refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
-      }
-
-      // applying data to all update points
-      if (locN) {
-        const data = this.data!;
-        for (let i = 0; i < locN; i++) {
-          const loc = locations[i];
-          loc.setData.call(refs[loc.refIdx], data[i]);
-        }
-      }
-
-      nodeInsertBefore.call(parent, el, afterNode);
-
-      // preparing all children
-      if (childN) {
-        const children = this.children;
-        for (let i = 0; i < childN; i++) {
-          const child = children![i];
-          if (child) {
-            const loc = childrenLocs[i];
-            const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
-            child.isOnlyChild = loc.isOnlyChild;
-            child.mount(refs[loc.parentRefIdx] as any, afterNode);
-          }
-        }
-      }
-      this.el = el as HTMLElement;
-      this.parentEl = parent;
-    };
-
-    Block.prototype.patch = function patch(other: Block, withBeforeRemove: boolean) {
-      if (this === other) {
-        return;
-      }
-      const refs = this.refs!;
-      // update texts/attributes/
-      if (locN) {
-        const data1 = this.data!;
-        const data2 = other.data!;
-        for (let i = 0; i < locN; i++) {
-          const val1 = data1[i];
-          const val2 = data2[i];
-          if (val1 !== val2) {
-            const loc = locations[i];
-            loc.updateData.call(refs[loc.refIdx], val2, val1);
-          }
-        }
-        this.data = data2;
-      }
-
-      // update children
-      if (childN) {
-        let children1 = this.children;
-        const children2 = other.children;
-        for (let i = 0; i < childN; i++) {
-          const child1 = children1![i];
-          const child2 = children2![i];
-          if (child1) {
-            if (child2) {
-              child1.patch(child2, withBeforeRemove);
-            } else {
-              if (withBeforeRemove) {
-                child1.beforeRemove();
-              }
-              child1.remove();
-              children1![i] = undefined;
-            }
-          } else if (child2) {
-            const loc = childrenLocs[i];
-            const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
-            child2.mount(refs[loc.parentRefIdx] as any, afterNode);
-            children1![i] = child2;
-          }
-        }
-      }
-    };
-  }
-  return Block;
-}
-
-function setText(this: Text, value: any) {
-  characterDataSetData.call(this, toText(value));
-}
-
-function makeRefSetter(index: number, refs: (() => void)[][]): Setter<HTMLElement> {
-  return function setRef(this: HTMLElement, fn: any) {
-    refs[refs.length - 1][index] = () => fn(this);
-  };
-}

src/runtime/blockdom/config.ts

@@ -1,28 +0,0 @@
-export function filterOutModifiersFromData(dataList: any[]): { modifiers: string[]; data: any[] } {
-  dataList = dataList.slice();
-  const modifiers = [];
-  let elm;
-  while ((elm = dataList[0]) && typeof elm === "string") {
-    modifiers.push(dataList.shift());
-  }
-  return { modifiers, data: dataList };
-}
-
-export const config = {
-  // whether or not blockdom should normalize DOM whenever a block is created.
-  // Normalizing dom mean removing empty text nodes (or containing only spaces)
-  shouldNormalizeDom: true,
-
-  // this is the main event handler. Every event handler registered with blockdom
-  // will go through this function, giving it the data registered in the block
-  // and the event
-  mainEventHandler: (data: any, ev: Event, currentTarget?: EventTarget | null): boolean => {
-    if (typeof data === "function") {
-      data(ev);
-    } else if (Array.isArray(data)) {
-      data = filterOutModifiersFromData(data).data;
-      data[0](data[1], ev);
-    }
-    return false;
-  },
-};

src/runtime/blockdom/event_catcher.ts

@@ -1,111 +0,0 @@
-import { createEventHandler } from "./events";
-import type { VNode } from "./index";
-
-type EventsSpec = { [name: string]: number };
-
-type Catcher = (child: VNode, handlers: any[]) => VNode;
-
-export function createCatcher(eventsSpec: EventsSpec): Catcher {
-  const n = Object.keys(eventsSpec).length;
-
-  class VCatcher {
-    child: VNode;
-    handlerData: any[];
-    handlerFns: any[] = [];
-
-    parentEl?: HTMLElement | undefined;
-    afterNode: Text | null = null;
-
-    constructor(child: VNode, handlers: any[]) {
-      this.child = child;
-      this.handlerData = handlers;
-    }
-
-    mount(parent: HTMLElement, afterNode: Node | null) {
-      this.parentEl = parent;
-      this.child.mount(parent, afterNode);
-      this.afterNode = document.createTextNode("");
-      parent.insertBefore(this.afterNode, afterNode);
-      this.wrapHandlerData();
-      for (let name in eventsSpec) {
-        const index = eventsSpec[name];
-        const handler = createEventHandler(name);
-        this.handlerFns[index] = handler;
-        handler.setup.call(parent, this.handlerData[index]);
-      }
-    }
-
-    wrapHandlerData() {
-      for (let i = 0; i < n; i++) {
-        let handler = this.handlerData[i];
-        // handler = [...mods, fn, comp], so we need to replace second to last elem
-        let idx = handler.length - 2;
-        let origFn = handler[idx];
-        const self = this;
-        handler[idx] = function (ev: any) {
-          const target = ev.target;
-          let currentNode: any = self.child.firstNode();
-          const afterNode = self.afterNode;
-          while (currentNode && currentNode !== afterNode) {
-            if (currentNode.contains(target)) {
-              return origFn.call(this, ev);
-            }
-            currentNode = currentNode.nextSibling;
-          }
-        };
-      }
-    }
-
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      this.child.moveBeforeDOMNode(node, parent);
-      parent!.insertBefore(this.afterNode!, node);
-    }
-
-    moveBeforeVNode(other: VCatcher | null, afterNode: Node | null) {
-      if (other) {
-        // check this with @ged-odoo for use in foreach
-        afterNode = other.firstNode() || afterNode;
-      }
-      this.child.moveBeforeVNode(other ? other.child : null, afterNode);
-      this.parentEl!.insertBefore(this.afterNode!, afterNode);
-    }
-
-    patch(other: VCatcher, withBeforeRemove: boolean) {
-      if (this === other) {
-        return;
-      }
-      this.handlerData = other.handlerData;
-      this.wrapHandlerData();
-      for (let i = 0; i < n; i++) {
-        this.handlerFns[i].update.call(this.parentEl!, this.handlerData[i]);
-      }
-
-      this.child.patch(other.child, withBeforeRemove);
-    }
-
-    beforeRemove() {
-      this.child.beforeRemove();
-    }
-
-    remove() {
-      for (let i = 0; i < n; i++) {
-        this.handlerFns[i].remove.call(this.parentEl!);
-      }
-      this.child.remove();
-      this.afterNode!.remove();
-    }
-
-    firstNode(): Node | undefined {
-      return this.child.firstNode();
-    }
-
-    toString(): string {
-      return this.child.toString();
-    }
-  }
-
-  return function (child: VNode, handlers: any[]): VNode<VCatcher> {
-    return new VCatcher(child, handlers);
-  };
-}

src/runtime/blockdom/events.ts

@@ -1,100 +0,0 @@
-import { config } from "./config";
-
-type EventHandlerSetter = (this: HTMLElement, data: any) => void;
-
-interface EventHandlerCreator {
-  setup: EventHandlerSetter;
-  update: EventHandlerSetter;
-  remove: (this: HTMLElement) => void;
-}
-
-export function createEventHandler(rawEvent: string): EventHandlerCreator {
-  const eventName = rawEvent.split(".")[0];
-  const capture = rawEvent.includes(".capture");
-  if (rawEvent.includes(".synthetic")) {
-    return createSyntheticHandler(eventName, capture);
-  } else {
-    return createElementHandler(eventName, capture);
-  }
-}
-
-// Native listener
-let nextNativeEventId = 1;
-function createElementHandler(evName: string, capture: boolean = false): EventHandlerCreator {
-  let eventKey = `__event__${evName}_${nextNativeEventId++}`;
-  if (capture) {
-    eventKey = `${eventKey}_capture`;
-  }
-
-  function listener(ev: Event) {
-    const currentTarget = ev.currentTarget as HTMLElement;
-    if (!currentTarget || !currentTarget.ownerDocument.contains(currentTarget)) return;
-    const data = (currentTarget as any)[eventKey];
-    if (!data) return;
-    config.mainEventHandler(data, ev, currentTarget);
-  }
-
-  function setup(this: HTMLElement, data: any) {
-    (this as any)[eventKey] = data;
-    this.addEventListener(evName, listener, { capture });
-  }
-
-  function remove(this: HTMLElement) {
-    delete (this as any)[eventKey];
-    this.removeEventListener(evName, listener, { capture });
-  }
-  function update(this: HTMLElement, data: any) {
-    (this as any)[eventKey] = data;
-  }
-
-  return { setup, update, remove };
-}
-
-// Synthetic handler: a form of event delegation that allows placing only one
-// listener per event type.
-let nextSyntheticEventId = 1;
-function createSyntheticHandler(evName: string, capture: boolean = false): EventHandlerCreator {
-  let eventKey = `__event__synthetic_${evName}`;
-  if (capture) {
-    eventKey = `${eventKey}_capture`;
-  }
-  setupSyntheticEvent(evName, eventKey, capture);
-  const currentId = nextSyntheticEventId++;
-  function setup(this: HTMLElement, data: any) {
-    const _data = (this as any)[eventKey] || {};
-    _data[currentId] = data;
-    (this as any)[eventKey] = _data;
-  }
-
-  function remove(this: HTMLElement) {
-    delete (this as any)[eventKey];
-  }
-
-  return { setup, update: setup, remove };
-}
-
-function nativeToSyntheticEvent(eventKey: string, event: Event) {
-  let dom = event.target;
-  while (dom !== null) {
-    const _data = (dom as any)[eventKey];
-    if (_data) {
-      for (const data of Object.values(_data)) {
-        const stopped = config.mainEventHandler(data, event, dom);
-        if (stopped) return;
-      }
-    }
-    dom = (dom as any).parentNode;
-  }
-}
-
-const CONFIGURED_SYNTHETIC_EVENTS: { [event: string]: boolean } = {};
-
-function setupSyntheticEvent(evName: string, eventKey: string, capture: boolean = false) {
-  if (CONFIGURED_SYNTHETIC_EVENTS[eventKey]) {
-    return;
-  }
-  document.addEventListener(evName, (event) => nativeToSyntheticEvent(eventKey, event), {
-    capture,
-  });
-  CONFIGURED_SYNTHETIC_EVENTS[eventKey] = true;
-}

src/runtime/blockdom/html.ts

@@ -1,92 +0,0 @@
-import type { VNode } from "./index";
-
-const nodeProto = Node.prototype;
-
-const nodeInsertBefore = nodeProto.insertBefore;
-const nodeRemoveChild = nodeProto.removeChild;
-
-class VHtml {
-  html: string;
-  parentEl?: HTMLElement | undefined;
-  content: ChildNode[] = [];
-
-  constructor(html: string) {
-    this.html = html;
-  }
-
-  mount(parent: HTMLElement, afterNode: Node | null) {
-    this.parentEl = parent;
-    const template = document.createElement("template");
-    template.innerHTML = this.html;
-    this.content = [...(template.content.childNodes as any)];
-    for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, afterNode);
-    }
-    if (!this.content.length) {
-      const textNode = document.createTextNode("");
-      this.content.push(textNode);
-      nodeInsertBefore.call(parent, textNode, afterNode);
-    }
-  }
-
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, node);
-    }
-  }
-
-  moveBeforeVNode(other: VHtml | null, afterNode: Node | null) {
-    const target = other ? other.content[0] : afterNode;
-    this.moveBeforeDOMNode(target);
-  }
-
-  patch(other: VHtml) {
-    if (this === other) {
-      return;
-    }
-    const html2 = other.html;
-    if (this.html !== html2) {
-      const parent = this.parentEl;
-      // insert new html in front of current
-      const afterNode = this.content[0];
-      const template = document.createElement("template");
-      template.innerHTML = html2;
-      const content = [...(template.content.childNodes as any)];
-      for (let elem of content) {
-        nodeInsertBefore.call(parent, elem, afterNode);
-      }
-      if (!content.length) {
-        const textNode = document.createTextNode("");
-        content.push(textNode);
-        nodeInsertBefore.call(parent, textNode, afterNode);
-      }
-
-      // remove current content
-      this.remove();
-      this.content = content;
-      this.html = other.html;
-    }
-  }
-
-  beforeRemove() {}
-
-  remove() {
-    const parent = this.parentEl;
-    for (let elem of this.content) {
-      nodeRemoveChild.call(parent, elem);
-    }
-  }
-
-  firstNode(): Node {
-    return this.content[0]!;
-  }
-
-  toString() {
-    return this.html;
-  }
-}
-
-export function html(str: string): VNode<VHtml> {
-  return new VHtml(str);
-}

src/runtime/blockdom/index.ts

@@ -1,46 +0,0 @@
-export { config } from "./config";
-
-export { toggler } from "./toggler";
-export { createBlock } from "./block_compiler";
-export { list } from "./list";
-export { multi } from "./multi";
-export { text, comment } from "./text";
-export { html } from "./html";
-export { createCatcher } from "./event_catcher";
-
-export interface VNode<T = any> {
-  mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void;
-  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
-  patch(other: T, withBeforeRemove: boolean): void;
-  beforeRemove(): void;
-  remove(): void;
-  firstNode(): Node | undefined;
-
-  el?: undefined | HTMLElement | Text;
-  parentEl?: undefined | HTMLElement;
-  isOnlyChild?: boolean | undefined;
-  key?: any;
-}
-
-export type BDom = VNode<any>;
-
-export function mount(vnode: VNode, fixture: HTMLElement, afterNode: Node | null = null) {
-  vnode.mount(fixture, afterNode);
-}
-
-export function patch(vnode1: VNode, vnode2: VNode, withBeforeRemove: boolean = false) {
-  vnode1.patch(vnode2, withBeforeRemove);
-}
-
-export function remove(vnode: VNode, withBeforeRemove: boolean = false) {
-  if (withBeforeRemove) {
-    vnode.beforeRemove();
-  }
-  vnode.remove();
-}
-
-export function withKey(vnode: VNode, key: any) {
-  vnode.key = key;
-  return vnode;
-}

src/runtime/blockdom/list.ts

@@ -1,248 +0,0 @@
-import type { VNode } from "./index";
-
-const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
-const nodeProto = Node.prototype;
-
-const nodeInsertBefore = nodeProto.insertBefore;
-const nodeAppendChild = nodeProto.appendChild;
-const nodeRemoveChild = nodeProto.removeChild;
-const nodeSetTextContent = getDescriptor(nodeProto, "textContent").set!;
-
-// -----------------------------------------------------------------------------
-// List Node
-// -----------------------------------------------------------------------------
-
-class VList {
-  children: VNode[];
-  anchor: Node | undefined;
-  parentEl?: HTMLElement | undefined;
-  isOnlyChild?: boolean | undefined;
-
-  constructor(children: VNode[]) {
-    this.children = children;
-  }
-
-  mount(parent: HTMLElement, afterNode: Node | null) {
-    const children = this.children;
-    const _anchor = document.createTextNode("");
-    this.anchor = _anchor;
-    nodeInsertBefore.call(parent, _anchor, afterNode);
-    const l = children.length;
-    if (l) {
-      const mount = children[0].mount;
-      for (let i = 0; i < l; i++) {
-        mount.call(children[i], parent, _anchor);
-      }
-    }
-
-    this.parentEl = parent;
-  }
-
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeDOMNode(node, parent);
-    }
-    parent!.insertBefore(this.anchor!, node);
-  }
-
-  moveBeforeVNode(other: VList | null, afterNode: Node | null) {
-    if (other) {
-      const next = other!.children[0];
-      afterNode = (next ? next.firstNode() : other!.anchor) || null;
-    }
-    const children = this.children;
-    for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeVNode(null, afterNode);
-    }
-    this.parentEl!.insertBefore(this.anchor!, afterNode);
-  }
-
-  patch(other: VList, withBeforeRemove: boolean) {
-    if (this === other) {
-      return;
-    }
-    const ch1 = this.children;
-    const ch2: VNode[] = other.children;
-    if (ch2.length === 0 && ch1.length === 0) {
-      return;
-    }
-    this.children = ch2;
-    const proto = ch2[0] || ch1[0];
-    const {
-      mount: cMount,
-      patch: cPatch,
-      remove: cRemove,
-      beforeRemove,
-      moveBeforeVNode: cMoveBefore,
-      firstNode: cFirstNode,
-    } = proto;
-
-    const _anchor = this.anchor!;
-    const isOnlyChild = this.isOnlyChild;
-    const parent = this.parentEl!;
-
-    // fast path: no new child => only remove
-    if (ch2.length === 0 && isOnlyChild) {
-      if (withBeforeRemove) {
-        for (let i = 0, l = ch1.length; i < l; i++) {
-          beforeRemove.call(ch1[i]);
-        }
-      }
-
-      nodeSetTextContent.call(parent, "");
-      nodeAppendChild.call(parent, _anchor);
-      return;
-    }
-
-    let startIdx1 = 0;
-    let startIdx2 = 0;
-    let startVn1 = ch1[0];
-    let startVn2 = ch2[0];
-
-    let endIdx1 = ch1.length - 1;
-    let endIdx2 = ch2.length - 1;
-    let endVn1 = ch1[endIdx1];
-    let endVn2 = ch2[endIdx2];
-
-    let mapping: any = undefined;
-
-    while (startIdx1 <= endIdx1 && startIdx2 <= endIdx2) {
-      // -------------------------------------------------------------------
-      if (startVn1 === null) {
-        startVn1 = ch1[++startIdx1];
-        continue;
-      }
-      // -------------------------------------------------------------------
-      if (endVn1 === null) {
-        endVn1 = ch1[--endIdx1];
-        continue;
-      }
-      // -------------------------------------------------------------------
-      let startKey1 = startVn1.key;
-      let startKey2 = startVn2.key;
-      if (startKey1 === startKey2) {
-        cPatch.call(startVn1, startVn2, withBeforeRemove);
-        ch2[startIdx2] = startVn1;
-        startVn1 = ch1[++startIdx1];
-        startVn2 = ch2[++startIdx2];
-        continue;
-      }
-      // -------------------------------------------------------------------
-      let endKey1 = endVn1.key;
-      let endKey2 = endVn2.key;
-      if (endKey1 === endKey2) {
-        cPatch.call(endVn1, endVn2, withBeforeRemove);
-        ch2[endIdx2] = endVn1;
-        endVn1 = ch1[--endIdx1];
-        endVn2 = ch2[--endIdx2];
-        continue;
-      }
-      // -------------------------------------------------------------------
-      if (startKey1 === endKey2) {
-        // bnode moved right
-        cPatch.call(startVn1, endVn2, withBeforeRemove);
-        ch2[endIdx2] = startVn1;
-        const nextChild = ch2[endIdx2 + 1];
-        cMoveBefore.call(startVn1, nextChild, _anchor);
-        startVn1 = ch1[++startIdx1];
-        endVn2 = ch2[--endIdx2];
-        continue;
-      }
-      // -------------------------------------------------------------------
-      if (endKey1 === startKey2) {
-        // bnode moved left
-        cPatch.call(endVn1, startVn2, withBeforeRemove);
-        ch2[startIdx2] = endVn1;
-        const nextChild = ch1[startIdx1];
-        cMoveBefore.call(endVn1, nextChild, _anchor);
-        endVn1 = ch1[--endIdx1];
-        startVn2 = ch2[++startIdx2];
-        continue;
-      }
-      // -------------------------------------------------------------------
-      mapping = mapping || createMapping(ch1, startIdx1, endIdx1);
-      let idxInOld = mapping[startKey2];
-      if (idxInOld === undefined) {
-        cMount.call(startVn2, parent, cFirstNode.call(startVn1) || null);
-      } else {
-        const elmToMove = ch1[idxInOld];
-        cMoveBefore.call(elmToMove, startVn1, null);
-        cPatch.call(elmToMove, startVn2, withBeforeRemove);
-        ch2[startIdx2] = elmToMove;
-        ch1[idxInOld] = null as any;
-      }
-      startVn2 = ch2[++startIdx2];
-    }
-    // ---------------------------------------------------------------------
-    if (startIdx1 <= endIdx1 || startIdx2 <= endIdx2) {
-      if (startIdx1 > endIdx1) {
-        const nextChild = ch2[endIdx2 + 1];
-        const anchor = nextChild ? cFirstNode.call(nextChild) || null : _anchor;
-        for (let i = startIdx2; i <= endIdx2; i++) {
-          cMount.call(ch2[i], parent, anchor);
-        }
-      } else {
-        for (let i = startIdx1; i <= endIdx1; i++) {
-          let ch = ch1[i];
-          if (ch) {
-            if (withBeforeRemove) {
-              beforeRemove.call(ch);
-            }
-            cRemove.call(ch);
-          }
-        }
-      }
-    }
-  }
-
-  beforeRemove() {
-    const children = this.children;
-    const l = children.length;
-    if (l) {
-      const beforeRemove = children[0].beforeRemove;
-      for (let i = 0; i < l; i++) {
-        beforeRemove.call(children[i]);
-      }
-    }
-  }
-
-  remove() {
-    const { parentEl, anchor } = this;
-    if (this.isOnlyChild) {
-      nodeSetTextContent.call(parentEl, "");
-    } else {
-      const children = this.children;
-      const l = children.length;
-      if (l) {
-        const remove = children[0].remove;
-        for (let i = 0; i < l; i++) {
-          remove.call(children[i]);
-        }
-      }
-      nodeRemoveChild.call(parentEl, anchor!);
-    }
-  }
-
-  firstNode(): Node | undefined {
-    const child = this.children[0];
-    return child ? child.firstNode() : undefined;
-  }
-
-  toString(): string {
-    return this.children.map((c) => c!.toString()).join("");
-  }
-}
-
-export function list(children: VNode[]): VNode<VList> {
-  return new VList(children);
-}
-
-function createMapping(ch1: any[], startIdx1: number, endIdx2: number): { [key: string]: any } {
-  let mapping: any = {};
-  for (let i = startIdx1; i <= endIdx2; i++) {
-    mapping[ch1[i].key] = i;
-  }
-  return mapping;
-}

src/runtime/blockdom/multi.ts

@@ -1,149 +0,0 @@
-import type { VNode } from "./index";
-
-const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
-const nodeProto = Node.prototype;
-const nodeInsertBefore = nodeProto.insertBefore;
-const nodeSetTextContent = getDescriptor(nodeProto, "textContent").set!;
-const nodeRemoveChild = nodeProto.removeChild;
-
-// -----------------------------------------------------------------------------
-// Multi NODE
-// -----------------------------------------------------------------------------
-
-export class VMulti {
-  children: (VNode | undefined)[];
-  anchors?: Node[] | undefined;
-  parentEl?: HTMLElement | undefined;
-  isOnlyChild?: boolean | undefined;
-
-  constructor(children: (VNode | undefined)[]) {
-    this.children = children;
-  }
-
-  mount(parent: HTMLElement, afterNode: Node | null) {
-    const children = this.children;
-    const l = children.length;
-    const anchors = new Array(l);
-    for (let i = 0; i < l; i++) {
-      let child = children[i];
-      if (child) {
-        child.mount(parent, afterNode);
-      } else {
-        const childAnchor = document.createTextNode("");
-        anchors[i] = childAnchor;
-        nodeInsertBefore.call(parent, childAnchor, afterNode);
-      }
-    }
-    this.anchors = anchors;
-    this.parentEl = parent;
-  }
-
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    const anchors = this.anchors;
-    for (let i = 0, l = children.length; i < l; i++) {
-      let child = children[i];
-      if (child) {
-        child.moveBeforeDOMNode(node, parent);
-      } else {
-        const anchor = anchors![i];
-        nodeInsertBefore.call(parent, anchor, node);
-      }
-    }
-  }
-
-  moveBeforeVNode(other: VMulti | null, afterNode: Node | null) {
-    if (other) {
-      const next = other!.children[0];
-      afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
-    }
-    const children = this.children;
-    const parent = this.parentEl;
-    const anchors = this.anchors;
-    for (let i = 0, l = children.length; i < l; i++) {
-      let child = children[i];
-      if (child) {
-        child.moveBeforeVNode(null, afterNode);
-      } else {
-        const anchor = anchors![i];
-        nodeInsertBefore.call(parent, anchor, afterNode);
-      }
-    }
-  }
-
-  patch(other: VMulti, withBeforeRemove: boolean) {
-    if (this === other) {
-      return;
-    }
-    const children1 = this.children;
-    const children2 = other.children;
-    const anchors = this.anchors!;
-    const parentEl = this.parentEl!;
-    for (let i = 0, l = children1.length; i < l; i++) {
-      const vn1 = children1[i];
-      const vn2 = children2[i];
-      if (vn1) {
-        if (vn2) {
-          vn1.patch(vn2, withBeforeRemove);
-        } else {
-          const afterNode = vn1.firstNode()!;
-          const anchor = document.createTextNode("");
-          anchors[i] = anchor;
-          nodeInsertBefore.call(parentEl, anchor, afterNode);
-          if (withBeforeRemove) {
-            vn1.beforeRemove();
-          }
-          vn1.remove();
-          children1[i] = undefined;
-        }
-      } else if (vn2) {
-        children1[i] = vn2;
-        const anchor = anchors[i];
-        vn2.mount(parentEl, anchor);
-        nodeRemoveChild.call(parentEl, anchor);
-      }
-    }
-  }
-
-  beforeRemove() {
-    const children = this.children;
-    for (let i = 0, l = children.length; i < l; i++) {
-      const child = children[i];
-      if (child) {
-        child.beforeRemove();
-      }
-    }
-  }
-
-  remove() {
-    const parentEl = this.parentEl;
-    if (this.isOnlyChild) {
-      nodeSetTextContent.call(parentEl, "");
-    } else {
-      const children = this.children;
-      const anchors = this.anchors;
-      for (let i = 0, l = children.length; i < l; i++) {
-        const child = children[i];
-        if (child) {
-          child.remove();
-        } else {
-          nodeRemoveChild.call(parentEl, anchors![i]);
-        }
-      }
-    }
-  }
-
-  firstNode(): Node | undefined {
-    const child = this.children[0];
-    return child ? child.firstNode() : this.anchors![0];
-  }
-
-  toString(): string {
-    return this.children.map((c) => (c ? c!.toString() : "")).join("");
-  }
-}
-
-export function multi(children: (VNode | undefined)[]): VNode<VMulti> {
-  return new VMulti(children);
-}

src/runtime/blockdom/text.ts

@@ -1,91 +0,0 @@
-import type { VNode } from "./index";
-
-const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
-const nodeProto = Node.prototype;
-const characterDataProto = CharacterData.prototype;
-
-const nodeInsertBefore = nodeProto.insertBefore;
-const characterDataSetData = getDescriptor(characterDataProto, "data").set!;
-const nodeRemoveChild = nodeProto.removeChild;
-
-abstract class VSimpleNode {
-  text: string | String;
-  parentEl?: HTMLElement | undefined;
-  el?: any;
-
-  constructor(text: string | String) {
-    this.text = text;
-  }
-
-  mountNode(node: Node, parent: HTMLElement, afterNode: Node | null) {
-    this.parentEl = parent;
-    nodeInsertBefore.call(parent, node, afterNode);
-    this.el = node;
-  }
-
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    nodeInsertBefore.call(parent, this.el!, node);
-  }
-
-  moveBeforeVNode(other: VText | null, afterNode: Node | null) {
-    nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
-  }
-
-  beforeRemove() {}
-
-  remove() {
-    nodeRemoveChild.call(this.parentEl, this.el!);
-  }
-
-  firstNode(): Node {
-    return this.el!;
-  }
-
-  toString() {
-    return this.text;
-  }
-}
-
-class VText extends VSimpleNode {
-  mount(parent: HTMLElement, afterNode: Node | null) {
-    this.mountNode(document.createTextNode(toText(this.text)), parent, afterNode);
-  }
-
-  patch(other: VText) {
-    const text2 = other.text;
-    if (this.text !== text2) {
-      characterDataSetData.call(this.el!, toText(text2));
-      this.text = text2;
-    }
-  }
-}
-
-class VComment extends VSimpleNode {
-  mount(parent: HTMLElement, afterNode: Node | null) {
-    this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
-  }
-
-  patch() {}
-}
-
-export function text(str: string | String): VNode<VText> {
-  return new VText(str);
-}
-
-export function comment(str: string): VNode<VComment> {
-  return new VComment(str);
-}
-
-export function toText(value: any): string {
-  switch (typeof value) {
-    case "string":
-      return value;
-    case "number":
-      return String(value);
-    case "boolean":
-      return value ? "true" : "false";
-    default:
-      return value || "";
-  }
-}

src/runtime/blockdom/toggler.ts

@@ -1,69 +0,0 @@
-import type { VNode } from "./index";
-
-// -----------------------------------------------------------------------------
-// Toggler node
-// -----------------------------------------------------------------------------
-
-class VToggler {
-  key: string;
-  child: VNode;
-
-  parentEl?: HTMLElement | undefined;
-
-  constructor(key: string, child: VNode) {
-    this.key = key;
-    this.child = child;
-  }
-
-  mount(parent: HTMLElement, afterNode: Node | null) {
-    this.parentEl = parent;
-    this.child.mount(parent, afterNode);
-  }
-
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement) {
-    this.child.moveBeforeDOMNode(node, parent);
-  }
-
-  moveBeforeVNode(other: VToggler | null, afterNode: Node | null) {
-    this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
-  }
-
-  patch(other: VToggler, withBeforeRemove: boolean) {
-    if (this === other) {
-      return;
-    }
-    let child1 = this.child;
-    let child2 = other.child;
-    if (this.key === other.key) {
-      child1.patch(child2, withBeforeRemove);
-    } else {
-      child2.mount(this.parentEl!, child1.firstNode()!);
-      if (withBeforeRemove) {
-        child1.beforeRemove();
-      }
-      child1.remove();
-      this.child = child2;
-      this.key = other.key;
-    }
-  }
-
-  beforeRemove() {
-    this.child.beforeRemove();
-  }
-
-  remove() {
-    this.child.remove();
-  }
-
-  firstNode(): Node | undefined {
-    return this.child.firstNode();
-  }
-
-  toString(): string {
-    return this.child.toString();
-  }
-}
-
-export function toggler(key: string, child: VNode): VNode<VToggler> {
-  return new VToggler(key, child);
-}

src/runtime/component.ts

@@ -1,44 +0,0 @@
-import { Schema } from "./validation";
-import type { ComponentNode } from "./component_node";
-
-// -----------------------------------------------------------------------------
-//  Component Class
-// -----------------------------------------------------------------------------
-
-export type Props = { [key: string]: any };
-
-interface StaticComponentProperties {
-  template: string;
-  defaultProps?: any;
-  props?: Schema;
-  components?: { [componentName: string]: ComponentConstructor };
-}
-
-export type ComponentConstructor<P extends Props = any, E = any> = (new (
-  props: P,
-  env: E,
-  node: ComponentNode
-) => Component<P, E>) &
-  StaticComponentProperties;
-
-export class Component<Props = any, Env = any> {
-  static template: string = "";
-  static props?: any;
-  static defaultProps?: any;
-
-  props: Props;
-  env: Env;
-  __owl__: ComponentNode;
-
-  constructor(props: Props, env: Env, node: ComponentNode) {
-    this.props = props;
-    this.env = env;
-    this.__owl__ = node;
-  }
-
-  setup() {}
-
-  render(deep: boolean = false) {
-    this.__owl__.render(deep === true);
-  }
-}

src/runtime/component_node.ts

@@ -1,350 +0,0 @@
-import type { App, Env } from "./app";
-import { BDom, VNode } from "./blockdom";
-import { Component, ComponentConstructor, Props } from "./component";
-import { fibersInError, OwlError } from "./error_handling";
-import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
-import { clearReactivesForCallback, getSubscriptions, reactive, targets } from "./reactivity";
-import { STATUS } from "./status";
-import { batched, Callback } from "./utils";
-
-let currentNode: ComponentNode | null = null;
-
-export function getCurrent(): ComponentNode {
-  if (!currentNode) {
-    throw new OwlError("No active component (a hook function should only be called in 'setup')");
-  }
-  return currentNode;
-}
-
-export function useComponent(): Component {
-  return currentNode!.component;
-}
-
-/**
- * Apply default props (only top level).
- */
-function applyDefaultProps<P extends object>(props: P, defaultProps: Partial<P>) {
-  for (let propName in defaultProps) {
-    if (props[propName] === undefined) {
-      (props as any)[propName] = defaultProps[propName];
-    }
-  }
-}
-// -----------------------------------------------------------------------------
-// Integration with reactivity system (useState)
-// -----------------------------------------------------------------------------
-
-const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
-/**
- * Creates a reactive object that will be observed by the current component.
- * Reading data from the returned object (eg during rendering) will cause the
- * component to subscribe to that data and be rerendered when it changes.
- *
- * @param state the state to observe
- * @returns a reactive object that will cause the component to re-render on
- *  relevant changes
- * @see reactive
- */
-export function useState<T extends object>(state: T): T {
-  const node = getCurrent();
-  let render = batchedRenderFunctions.get(node)!;
-  if (!render) {
-    render = batched(node.render.bind(node, false));
-    batchedRenderFunctions.set(node, render);
-    // manual implementation of onWillDestroy to break cyclic dependency
-    node.willDestroy.push(clearReactivesForCallback.bind(null, render));
-  }
-  return reactive(state, render);
-}
-
-// -----------------------------------------------------------------------------
-//  Component VNode class
-// -----------------------------------------------------------------------------
-
-type LifecycleHook = Function;
-
-export class ComponentNode<P extends Props = any, E = any> implements VNode<ComponentNode<P, E>> {
-  el?: HTMLElement | Text | undefined;
-  app: App;
-  fiber: Fiber | null = null;
-  component: Component<P, E>;
-  bdom: BDom | null = null;
-  status: STATUS = STATUS.NEW;
-  forceNextRender: boolean = false;
-  parentKey: string | null;
-  props: P;
-
-  renderFn: Function;
-  parent: ComponentNode | null;
-  childEnv: Env;
-  children: { [key: string]: ComponentNode } = Object.create(null);
-  refs: any = {};
-
-  willStart: LifecycleHook[] = [];
-  willUpdateProps: LifecycleHook[] = [];
-  willUnmount: LifecycleHook[] = [];
-  mounted: LifecycleHook[] = [];
-  willPatch: LifecycleHook[] = [];
-  patched: LifecycleHook[] = [];
-  willDestroy: LifecycleHook[] = [];
-
-  constructor(
-    C: ComponentConstructor<P, E>,
-    props: P,
-    app: App,
-    parent: ComponentNode | null,
-    parentKey: string | null
-  ) {
-    currentNode = this;
-    this.app = app;
-    this.parent = parent;
-    this.props = props;
-    this.parentKey = parentKey;
-    const defaultProps = C.defaultProps;
-    props = Object.assign({}, props);
-    if (defaultProps) {
-      applyDefaultProps(props, defaultProps);
-    }
-    const env = (parent && parent.childEnv) || app.env;
-    this.childEnv = env;
-    for (const key in props) {
-      const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
-        props[key] = useState(prop);
-      }
-    }
-    this.component = new C(props, env, this);
-    this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
-    this.component.setup();
-    currentNode = null;
-  }
-
-  mountComponent(target: any, options?: MountOptions) {
-    const fiber = new MountFiber(this, target, options);
-    this.app.scheduler.addFiber(fiber);
-    this.initiateRender(fiber);
-  }
-
-  async initiateRender(fiber: Fiber | MountFiber) {
-    this.fiber = fiber;
-    if (this.mounted.length) {
-      fiber.root!.mounted.push(fiber);
-    }
-    const component = this.component;
-    try {
-      await Promise.all(this.willStart.map((f) => f.call(component)));
-    } catch (e) {
-      this.app.handleError({ node: this, error: e });
-      return;
-    }
-    if (this.status === STATUS.NEW && this.fiber === fiber) {
-      fiber.render();
-    }
-  }
-
-  async render(deep: boolean) {
-    let current = this.fiber;
-    if (current && (current.root!.locked || (current as any).bdom === true)) {
-      await Promise.resolve();
-      // situation may have changed after the microtask tick
-      current = this.fiber;
-    }
-    if (current) {
-      if (!current.bdom && !fibersInError.has(current)) {
-        if (deep) {
-          // we want the render from this point on to be with deep=true
-          current.deep = deep;
-        }
-        return;
-      }
-      // if current rendering was with deep=true, we want this one to be the same
-      deep = deep || current.deep;
-    } else if (!this.bdom) {
-      return;
-    }
-
-    const fiber = makeRootFiber(this);
-    fiber.deep = deep;
-    this.fiber = fiber;
-
-    this.app.scheduler.addFiber(fiber);
-    await Promise.resolve();
-    if (this.status === STATUS.DESTROYED) {
-      return;
-    }
-    // We only want to actually render the component if the following two
-    // conditions are true:
-    // * this.fiber: it could be null, in which case the render has been cancelled
-    // * (current || !fiber.parent): if current is not null, this means that the
-    //   render function was called when a render was already occurring. In this
-    //   case, the pending rendering was cancelled, and the fiber needs to be
-    //   rendered to complete the work.  If current is null, we check that the
-    //   fiber has no parent.  If that is the case, the fiber was downgraded from
-    //   a root fiber to a child fiber in the previous microtick, because it was
-    //   embedded in a rendering coming from above, so the fiber will be rendered
-    //   in the next microtick anyway, so we should not render it again.
-    if (this.fiber === fiber && (current || !fiber.parent)) {
-      fiber.render();
-    }
-  }
-
-  destroy() {
-    let shouldRemove = this.status === STATUS.MOUNTED;
-    this._destroy();
-    if (shouldRemove) {
-      this.bdom!.remove();
-    }
-  }
-
-  _destroy() {
-    const component = this.component;
-    if (this.status === STATUS.MOUNTED) {
-      for (let cb of this.willUnmount) {
-        cb.call(component);
-      }
-    }
-    for (let child of Object.values(this.children)) {
-      child._destroy();
-    }
-    if (this.willDestroy.length) {
-      try {
-        for (let cb of this.willDestroy) {
-          cb.call(component);
-        }
-      } catch (e) {
-        this.app.handleError({ error: e, node: this });
-      }
-    }
-    this.status = STATUS.DESTROYED;
-  }
-
-  async updateAndRender(props: P, parentFiber: Fiber) {
-    const rawProps = props;
-    props = Object.assign({}, props);
-    // update
-    const fiber = makeChildFiber(this, parentFiber);
-    this.fiber = fiber;
-    const component = this.component;
-    const defaultProps = (component.constructor as any).defaultProps;
-    if (defaultProps) {
-      applyDefaultProps(props, defaultProps);
-    }
-
-    currentNode = this;
-    for (const key in props) {
-      const prop = props[key];
-      if (prop && typeof prop === "object" && targets.has(prop)) {
-        props[key] = useState(prop);
-      }
-    }
-    currentNode = null;
-    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
-    await prom;
-    if (fiber !== this.fiber) {
-      return;
-    }
-    component.props = props;
-    this.props = rawProps;
-    fiber.render();
-    const parentRoot = parentFiber.root!;
-    if (this.willPatch.length) {
-      parentRoot.willPatch.push(fiber);
-    }
-    if (this.patched.length) {
-      parentRoot.patched.push(fiber);
-    }
-  }
-
-  /**
-   * Finds a child that has dom that is not yet updated, and update it. This
-   * method is meant to be used only in the context of repatching the dom after
-   * a mounted hook failed and was handled.
-   */
-  updateDom() {
-    if (!this.fiber) {
-      return;
-    }
-    if (this.bdom === this.fiber!.bdom) {
-      // If the error was handled by some child component, we need to find it to
-      // apply its change
-      for (let k in this.children) {
-        const child = this.children[k];
-        child.updateDom();
-      }
-    } else {
-      // if we get here, this is the component that handled the error and rerendered
-      // itself, so we can simply patch the dom
-      this.bdom!.patch(this.fiber!.bdom, false);
-      this.fiber!.appliedToDom = true;
-      this.fiber = null;
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Block DOM methods
-  // ---------------------------------------------------------------------------
-
-  firstNode(): Node | undefined {
-    const bdom = this.bdom;
-    return bdom ? bdom.firstNode() : undefined;
-  }
-
-  mount(parent: HTMLElement, anchor: ChildNode) {
-    const bdom = this.fiber!.bdom!;
-    this.bdom = bdom;
-    bdom.mount(parent, anchor);
-    this.status = STATUS.MOUNTED;
-    this.fiber!.appliedToDom = true;
-    this.children = this.fiber!.childrenMap;
-    this.fiber = null;
-  }
-
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void {
-    this.bdom!.moveBeforeDOMNode(node, parent);
-  }
-
-  moveBeforeVNode(other: ComponentNode<P, E> | null, afterNode: Node | null) {
-    this.bdom!.moveBeforeVNode(other ? other.bdom : null, afterNode);
-  }
-
-  patch() {
-    if (this.fiber && this.fiber.parent) {
-      // we only patch here renderings coming from above. renderings initiated
-      // by the component will be patched independently in the appropriate
-      // fiber.complete
-      this._patch();
-    }
-  }
-  _patch() {
-    let hasChildren = false;
-    for (let _k in this.children) {
-      hasChildren = true;
-      break;
-    }
-    const fiber = this.fiber!;
-    this.children = fiber.childrenMap;
-    this.bdom!.patch(fiber.bdom!, hasChildren);
-    fiber.appliedToDom = true;
-    this.fiber = null;
-  }
-
-  beforeRemove() {
-    this._destroy();
-  }
-
-  remove() {
-    this.bdom!.remove();
-  }
-
-  // ---------------------------------------------------------------------------
-  // Some debug helpers
-  // ---------------------------------------------------------------------------
-  get name(): string {
-    return this.component.constructor.name;
-  }
-
-  get subscriptions(): ReturnType<typeof getSubscriptions> {
-    const render = batchedRenderFunctions.get(this);
-    return render ? getSubscriptions(render) : [];
-  }
-}

src/runtime/error_handling.ts

@@ -1,76 +0,0 @@
-import type { ComponentNode } from "./component_node";
-import type { Fiber } from "./fibers";
-
-// Custom error class that wraps error that happen in the owl lifecycle
-export class OwlError extends Error {
-  cause?: any;
-}
-
-// Maps fibers to thrown errors
-export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
-export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
-
-function _handleError(node: ComponentNode | null, error: any): boolean {
-  if (!node) {
-    return false;
-  }
-  const fiber = node.fiber;
-  if (fiber) {
-    fibersInError.set(fiber, error);
-  }
-
-  const errorHandlers = nodeErrorHandlers.get(node);
-  if (errorHandlers) {
-    let handled = false;
-    // execute in the opposite order
-    for (let i = errorHandlers.length - 1; i >= 0; i--) {
-      try {
-        errorHandlers[i](error);
-        handled = true;
-        break;
-      } catch (e) {
-        error = e;
-      }
-    }
-
-    if (handled) {
-      return true;
-    }
-  }
-  return _handleError(node.parent, error);
-}
-
-type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
-export function handleError(params: ErrorParams) {
-  let { error } = params;
-  // Wrap error if it wasn't wrapped by wrapError (ie when not in dev mode)
-  if (!(error instanceof OwlError)) {
-    error = Object.assign(
-      new OwlError(`An error occured in the owl lifecycle (see this Error's "cause" property)`),
-      { cause: error }
-    );
-  }
-  const node = "node" in params ? params.node : params.fiber.node;
-  const fiber = "fiber" in params ? params.fiber : node.fiber!;
-
-  // resets the fibers on components if possible. This is important so that
-  // new renderings can be properly included in the initial one, if any.
-  let current: Fiber | null = fiber;
-  do {
-    current.node.fiber = current;
-    current = current.parent;
-  } while (current);
-
-  fibersInError.set(fiber.root!, error);
-
-  const handled = _handleError(node, error);
-  if (!handled) {
-    console.warn(`[Owl] Unhandled error. Destroying the root component`);
-    try {
-      node.app.destroy();
-    } catch (e) {
-      console.error(e);
-    }
-    throw error;
-  }
-}

src/runtime/event_handling.ts

@@ -1,45 +0,0 @@
-import { filterOutModifiersFromData } from "./blockdom/config";
-import { STATUS } from "./status";
-import { OwlError } from "./error_handling";
-
-export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
-  const { data: _data, modifiers } = filterOutModifiersFromData(data);
-  data = _data;
-  let stopped = false;
-  if (modifiers.length) {
-    let selfMode = false;
-    const isSelf = ev.target === currentTarget;
-    for (const mod of modifiers) {
-      switch (mod) {
-        case "self":
-          selfMode = true;
-          if (isSelf) {
-            continue;
-          } else {
-            return stopped;
-          }
-        case "prevent":
-          if ((selfMode && isSelf) || !selfMode) ev.preventDefault();
-          continue;
-        case "stop":
-          if ((selfMode && isSelf) || !selfMode) ev.stopPropagation();
-          stopped = true;
-          continue;
-      }
-    }
-  }
-  // If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
-  // We check this rather than data[0] being truthy (or typeof function) so that it crashes
-  // as expected when there is a handler expression that evaluates to a falsy value
-  if (Object.hasOwnProperty.call(data, 0)) {
-    const handler = data[0];
-    if (typeof handler !== "function") {
-      throw new OwlError(`Invalid handler (expected a function, received: '${handler}')`);
-    }
-    let node = data[1] ? data[1].__owl__ : null;
-    if (node ? node.status === STATUS.MOUNTED : true) {
-      handler.call(node ? node.component : null, ev);
-    }
-  }
-  return stopped;
-};

src/runtime/fibers.ts

@@ -1,265 +0,0 @@
-import { BDom, mount } from "./blockdom";
-import type { ComponentNode } from "./component_node";
-import { fibersInError, OwlError } from "./error_handling";
-import { STATUS } from "./status";
-
-export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
-  let current = node.fiber;
-  if (current) {
-    cancelFibers(current.children);
-    current.root = null;
-  }
-  return new Fiber(node, parent);
-}
-
-export function makeRootFiber(node: ComponentNode): Fiber {
-  let current = node.fiber;
-  if (current) {
-    let root = current.root!;
-    // lock root fiber because canceling children fibers may destroy components,
-    // which means any arbitrary code can be run in onWillDestroy, which may
-    // trigger new renderings
-    root.locked = true;
-    root.setCounter(root.counter + 1 - cancelFibers(current.children));
-    root.locked = false;
-    current.children = [];
-    current.childrenMap = {};
-    current.bdom = null;
-    if (fibersInError.has(current)) {
-      fibersInError.delete(current);
-      fibersInError.delete(root);
-      current.appliedToDom = false;
-    }
-    return current;
-  }
-  const fiber = new RootFiber(node, null);
-  if (node.willPatch.length) {
-    fiber.willPatch.push(fiber);
-  }
-  if (node.patched.length) {
-    fiber.patched.push(fiber);
-  }
-  return fiber;
-}
-
-function throwOnRender() {
-  throw new OwlError("Attempted to render cancelled fiber");
-}
-
-/**
- * @returns number of not-yet rendered fibers cancelled
- */
-function cancelFibers(fibers: Fiber[]): number {
-  let result = 0;
-  for (let fiber of fibers) {
-    let node = fiber.node;
-    fiber.render = throwOnRender;
-    if (node.status === STATUS.NEW) {
-      node.destroy();
-      delete node.parent!.children[node.parentKey!];
-    }
-    node.fiber = null;
-    if (fiber.bdom) {
-      // if fiber has been rendered, this means that the component props have
-      // been updated. however, this fiber will not be patched to the dom, so
-      // it could happen that the next render compare the current props with
-      // the same props, and skip the render completely. With the next line,
-      // we kindly request the component code to force a render, so it works as
-      // expected.
-      node.forceNextRender = true;
-    } else {
-      result++;
-    }
-    result += cancelFibers(fiber.children);
-  }
-  return result;
-}
-
-export class Fiber {
-  node: ComponentNode;
-  bdom: BDom | null = null;
-  root: RootFiber | null; // A Fiber that has been replaced by another has no root
-  parent: Fiber | null;
-  children: Fiber[] = [];
-  appliedToDom = false;
-  deep: boolean = false;
-  childrenMap: ComponentNode["children"] = {};
-
-  constructor(node: ComponentNode, parent: Fiber | null) {
-    this.node = node;
-    this.parent = parent;
-    if (parent) {
-      this.deep = parent.deep;
-      const root = parent.root!;
-      root.setCounter(root.counter + 1);
-      this.root = root;
-      parent.children.push(this);
-    } else {
-      this.root = this as any;
-    }
-  }
-
-  render() {
-    // if some parent has a fiber => register in followup
-    let prev = this.root!.node;
-    let scheduler = prev.app.scheduler;
-    let current = prev.parent;
-    while (current) {
-      if (current.fiber) {
-        let root = current.fiber.root!;
-        if (root.counter === 0 && prev.parentKey! in current.fiber.childrenMap) {
-          current = root.node;
-        } else {
-          scheduler.delayedRenders.push(this);
-          return;
-        }
-      }
-      prev = current;
-      current = current.parent;
-    }
-
-    // there are no current rendering from above => we can render
-    this._render();
-  }
-
-  _render() {
-    const node = this.node;
-    const root = this.root;
-    if (root) {
-      try {
-        (this.bdom as any) = true;
-        this.bdom = node.renderFn();
-      } catch (e) {
-        node.app.handleError({ node, error: e });
-      }
-      root.setCounter(root.counter - 1);
-    }
-  }
-}
-
-export class RootFiber extends Fiber {
-  counter: number = 1;
-
-  // only add stuff in this if they have registered some hooks
-  willPatch: Fiber[] = [];
-  patched: Fiber[] = [];
-  mounted: Fiber[] = [];
-  // A fiber is typically locked when it is completing and the patch has not, or is being applied.
-  // i.e.: render triggered in onWillUnmount or in willPatch will be delayed
-  locked: boolean = false;
-
-  complete() {
-    const node = this.node;
-    this.locked = true;
-    let current: Fiber | undefined = undefined;
-    try {
-      // Step 1: calling all willPatch lifecycle hooks
-      for (current of this.willPatch) {
-        // because of the asynchronous nature of the rendering, some parts of the
-        // UI may have been rendered, then deleted in a followup rendering, and we
-        // do not want to call onWillPatch in that case.
-        let node = current.node;
-        if (node.fiber === current) {
-          const component = node.component;
-          for (let cb of node.willPatch) {
-            cb.call(component);
-          }
-        }
-      }
-      current = undefined;
-
-      // Step 2: patching the dom
-      node._patch();
-      this.locked = false;
-
-      // Step 4: calling all mounted lifecycle hooks
-      let mountedFibers = this.mounted;
-      while ((current = mountedFibers.pop())) {
-        current = current;
-        if (current.appliedToDom) {
-          for (let cb of current.node.mounted) {
-            cb();
-          }
-        }
-      }
-
-      // Step 5: calling all patched hooks
-      let patchedFibers = this.patched;
-      while ((current = patchedFibers.pop())) {
-        current = current;
-        if (current.appliedToDom) {
-          for (let cb of current.node.patched) {
-            cb();
-          }
-        }
-      }
-    } catch (e) {
-      this.locked = false;
-      node.app.handleError({ fiber: current || this, error: e });
-    }
-  }
-
-  setCounter(newValue: number) {
-    this.counter = newValue;
-    if (newValue === 0) {
-      this.node.app.scheduler.flush();
-    }
-  }
-}
-
-type Position = "first-child" | "last-child";
-
-export interface MountOptions {
-  position?: Position;
-}
-
-export class MountFiber extends RootFiber {
-  target: HTMLElement;
-  position: Position;
-
-  constructor(node: ComponentNode, target: HTMLElement, options: MountOptions = {}) {
-    super(node, null);
-    this.target = target;
-    this.position = options.position || "last-child";
-  }
-  complete() {
-    let current: Fiber | undefined = this;
-    try {
-      const node = this.node;
-      node.children = this.childrenMap;
-      (node.app.constructor as any).validateTarget(this.target);
-      if (node.bdom) {
-        // this is a complicated situation: if we mount a fiber with an existing
-        // bdom, this means that this same fiber was already completed, mounted,
-        // but a crash occurred in some mounted hook. Then, it was handled and
-        // the new rendering is being applied.
-        node.updateDom();
-      } else {
-        node.bdom = this.bdom;
-        if (this.position === "last-child" || this.target.childNodes.length === 0) {
-          mount(node.bdom!, this.target);
-        } else {
-          const firstChild = this.target.childNodes[0];
-          mount(node.bdom!, this.target, firstChild);
-        }
-      }
-
-      // unregistering the fiber before mounted since it can do another render
-      // and that the current rendering is obviously completed
-      node.fiber = null;
-
-      node.status = STATUS.MOUNTED;
-      this.appliedToDom = true;
-      let mountedFibers = this.mounted;
-      while ((current = mountedFibers.pop())) {
-        if (current.appliedToDom) {
-          for (let cb of current.node.mounted) {
-            cb();
-          }
-        }
-      }
-    } catch (e) {
-      this.node.app.handleError({ fiber: current as Fiber, error: e });
-    }
-  }
-}

src/runtime/hooks.ts

@@ -1,129 +0,0 @@
-import type { Env } from "./app";
-import { getCurrent } from "./component_node";
-import { onMounted, onPatched, onWillUnmount } from "./lifecycle_hooks";
-
-// -----------------------------------------------------------------------------
-// useRef
-// -----------------------------------------------------------------------------
-
-/**
- * The purpose of this hook is to allow components to get a reference to a sub
- * html node or component.
- */
-export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el: T | null } {
-  const node = getCurrent();
-  const refs = node.refs;
-  return {
-    get el(): T | null {
-      return refs[name] || null;
-    },
-  };
-}
-
-// -----------------------------------------------------------------------------
-// useEnv and useSubEnv
-// -----------------------------------------------------------------------------
-
-/**
- * This hook is useful as a building block for some customized hooks, that may
- * need a reference to the env of the component calling them.
- */
-export function useEnv<E extends Env>(): E {
-  return getCurrent().component.env as any;
-}
-
-function extendEnv(currentEnv: Object, extension: Object): Object {
-  const env = Object.create(currentEnv);
-  const descrs = Object.getOwnPropertyDescriptors(extension);
-  return Object.freeze(Object.defineProperties(env, descrs));
-}
-
-/**
- * This hook is a simple way to let components use a sub environment.  Note that
- * like for all hooks, it is important that this is only called in the
- * constructor method.
- */
-export function useSubEnv(envExtension: Env) {
-  const node = getCurrent();
-  node.component.env = extendEnv(node.component.env as any, envExtension);
-  useChildSubEnv(envExtension);
-}
-
-export function useChildSubEnv(envExtension: Env) {
-  const node = getCurrent();
-  node.childEnv = extendEnv(node.childEnv, envExtension);
-}
-// -----------------------------------------------------------------------------
-// useEffect
-// -----------------------------------------------------------------------------
-
-/**
- * @param {...any} dependencies the dependencies computed by computeDependencies
- * @returns {void|(()=>void)} a cleanup function that reverses the side
- *      effects of the effect callback.
- */
-type Effect = (...dependencies: any[]) => void | (() => void);
-
-/**
- * This hook will run a callback when a component is mounted and patched, and
- * will run a cleanup function before patching and before unmounting the
- * the component.
- *
- * @param {Effect} effect the effect to run on component mount and/or patch
- * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
- *      dependencies that will decide if the effect needs to be cleaned up and
- *      run again. If the dependencies did not change, the effect will not run
- *      again. The default value returns an array containing only NaN because
- *      NaN !== NaN, which will cause the effect to rerun on every patch.
- */
-export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
-  let cleanup: (() => void) | void;
-  let dependencies: any[];
-  onMounted(() => {
-    dependencies = computeDependencies();
-    cleanup = effect(...dependencies);
-  });
-
-  onPatched(() => {
-    const newDeps = computeDependencies();
-    const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
-    if (shouldReapply) {
-      dependencies = newDeps;
-      if (cleanup) {
-        cleanup();
-      }
-      cleanup = effect(...dependencies);
-    }
-  });
-
-  onWillUnmount(() => cleanup && cleanup());
-}
-
-// -----------------------------------------------------------------------------
-// useExternalListener
-// -----------------------------------------------------------------------------
-
-/**
- * When a component needs to listen to DOM Events on element(s) that are not
- * part of his hierarchy, we can use the `useExternalListener` hook.
- * It will correctly add and remove the event listener, whenever the
- * component is mounted and unmounted.
- *
- * Example:
- *  a menu needs to listen to the click on window to be closed automatically
- *
- * Usage:
- *  in the constructor of the OWL component that needs to be notified,
- *  `useExternalListener(window, 'click', this._doSomething);`
- * */
-export function useExternalListener(
-  target: HTMLElement | typeof window,
-  eventName: string,
-  handler: EventListener,
-  eventParams?: AddEventListenerOptions
-) {
-  const node = getCurrent();
-  const boundHandler = handler.bind(node.component);
-  onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
-  onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
-}

src/runtime/index.ts

@@ -1,59 +0,0 @@
-import {
-  config,
-  createBlock,
-  html,
-  list,
-  mount as blockMount,
-  multi,
-  patch,
-  remove,
-  text,
-  toggler,
-  comment,
-} from "./blockdom";
-import { mainEventHandler } from "./event_handling";
-
-config.shouldNormalizeDom = false;
-config.mainEventHandler = mainEventHandler;
-
-export const blockDom = {
-  config,
-  // bdom entry points
-  mount: blockMount,
-  patch,
-  remove,
-  // bdom block types
-  list,
-  multi,
-  text,
-  toggler,
-  createBlock,
-  html,
-  comment,
-};
-
-export { App, mount } from "./app";
-export { xml } from "./template_set";
-export { Component } from "./component";
-export type { ComponentConstructor } from "./component";
-export { useComponent, useState } from "./component_node";
-export { status } from "./status";
-export { reactive, markRaw, toRaw } from "./reactivity";
-export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
-export { EventBus, whenReady, loadFile, markup } from "./utils";
-export {
-  onWillStart,
-  onMounted,
-  onWillUnmount,
-  onWillUpdateProps,
-  onWillPatch,
-  onPatched,
-  onWillRender,
-  onRendered,
-  onWillDestroy,
-  onError,
-} from "./lifecycle_hooks";
-export { validate } from "./validation";
-export { OwlError } from "./error_handling";
-
-export const __info__ = {};

src/runtime/lifecycle_hooks.ts

@@ -1,122 +0,0 @@
-import { getCurrent } from "./component_node";
-import { nodeErrorHandlers, OwlError } from "./error_handling";
-
-const TIMEOUT = Symbol("timeout");
-function wrapError(fn: (...args: any[]) => any, hookName: string) {
-  const error = new OwlError(`The following error occurred in ${hookName}: `) as Error & {
-    cause: any;
-  };
-  const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
-  const node = getCurrent();
-  return (...args: any[]) => {
-    const onError = (cause: any) => {
-      error.cause = cause;
-      if (cause instanceof Error) {
-        error.message += `"${cause.message}"`;
-      } else {
-        error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
-      }
-      throw error;
-    };
-    try {
-      const result = fn(...args);
-      if (result instanceof Promise) {
-        if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
-          const fiber = node.fiber;
-          Promise.race([
-            result.catch(() => {}),
-            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
-          ]).then((res) => {
-            if (res === TIMEOUT && node.fiber === fiber) {
-              console.warn(timeoutError);
-            }
-          });
-        }
-        return result.catch(onError);
-      }
-      return result;
-    } catch (cause) {
-      onError(cause);
-    }
-  };
-}
-
-// -----------------------------------------------------------------------------
-//  hooks
-// -----------------------------------------------------------------------------
-
-export function onWillStart(fn: () => Promise<void> | void | any) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
-}
-
-export function onWillUpdateProps(fn: (nextProps: any) => Promise<void> | void | any) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
-}
-
-export function onMounted(fn: () => void | any) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
-}
-
-export function onWillPatch(fn: () => Promise<void> | any | void) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
-}
-
-export function onPatched(fn: () => void | any) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.patched.push(decorate(fn.bind(node.component), "onPatched"));
-}
-
-export function onWillUnmount(fn: () => Promise<void> | void | any) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
-}
-
-export function onWillDestroy(fn: () => Promise<void> | void | any) {
-  const node = getCurrent();
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
-}
-
-export function onWillRender(fn: () => void | any) {
-  const node = getCurrent();
-  const renderFn = node.renderFn;
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  fn = decorate(fn.bind(node.component), "onWillRender");
-  node.renderFn = () => {
-    fn();
-    return renderFn();
-  };
-}
-
-export function onRendered(fn: () => void | any) {
-  const node = getCurrent();
-  const renderFn = node.renderFn;
-  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  fn = decorate(fn.bind(node.component), "onRendered");
-  node.renderFn = () => {
-    const result = renderFn();
-    fn();
-    return result;
-  };
-}
-
-type OnErrorCallback = (error: any) => void | any;
-export function onError(callback: OnErrorCallback) {
-  const node = getCurrent();
-  let handlers = nodeErrorHandlers.get(node);
-  if (!handlers) {
-    handlers = [];
-    nodeErrorHandlers.set(node, handlers);
-  }
-  handlers.push(callback.bind(node.component));
-}

src/runtime/portal.ts

@@ -1,90 +0,0 @@
-import { onMounted, onWillUnmount } from "./lifecycle_hooks";
-import { BDom, text, VNode } from "./blockdom";
-import { Component } from "./component";
-import { OwlError } from "./error_handling";
-
-const VText: any = text("").constructor;
-
-class VPortal extends VText implements Partial<VNode<VPortal>> {
-  content: BDom | null;
-  selector: string;
-  target: HTMLElement | null = null;
-
-  constructor(selector: string, content: BDom) {
-    super("");
-    this.selector = selector;
-    this.content = content;
-  }
-
-  mount(parent: HTMLElement, anchor: ChildNode) {
-    super.mount(parent, anchor);
-    this.target = document.querySelector(this.selector) as any;
-    if (this.target) {
-      this.content!.mount(this.target!, null);
-    } else {
-      this.content!.mount(parent, anchor);
-    }
-  }
-
-  beforeRemove() {
-    this.content!.beforeRemove();
-  }
-  remove() {
-    if (this.content) {
-      super.remove();
-      this.content!.remove();
-      this.content = null;
-    }
-  }
-
-  patch(other: VPortal) {
-    super.patch(other);
-    if (this.content) {
-      this.content.patch(other.content!, true);
-    } else {
-      this.content = other.content;
-      this.content!.mount(this.target!, null);
-    }
-  }
-}
-
-/**
- * kind of similar to <t t-slot="default"/>, but it wraps it around a VPortal
- */
-export function portalTemplate(app: any, bdom: any, helpers: any) {
-  let { callSlot } = helpers;
-  return function template(ctx: any, node: any, key = ""): any {
-    return new VPortal(ctx.props.target, callSlot(ctx, node, key, "default", false, null));
-  };
-}
-
-export class Portal extends Component {
-  static template = "__portal__";
-  static props = {
-    target: {
-      type: String,
-    },
-    slots: true,
-  };
-
-  setup() {
-    const node: any = this.__owl__;
-
-    onMounted(() => {
-      const portal: VPortal = node.bdom;
-      if (!portal.target) {
-        const target: HTMLElement = document.querySelector(this.props.target);
-        if (target) {
-          portal.content!.moveBeforeDOMNode(target.firstChild, target);
-        } else {
-          throw new OwlError("invalid portal target");
-        }
-      }
-    });
-
-    onWillUnmount(() => {
-      const portal: VPortal = node.bdom;
-      portal.remove();
-    });
-  }
-}

src/runtime/reactivity.ts

@@ -1,448 +0,0 @@
-import { Callback } from "./utils";
-import { OwlError } from "./error_handling";
-
-// Special key to subscribe to, to be notified of key creation/deletion
-const KEYCHANGES = Symbol("Key changes");
-
-// The following types only exist to signify places where objects are expected
-// to be reactive or not, they provide no type checking benefit over "object"
-type Target = object;
-type Reactive<T extends Target> = T;
-
-type Collection = Set<any> | Map<any, any> | WeakMap<any, any>;
-type CollectionRawType = "Set" | "Map" | "WeakMap";
-
-const objectToString = Object.prototype.toString;
-const objectHasOwnProperty = Object.prototype.hasOwnProperty;
-
-const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
-const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
-
-/**
- * extract "RawType" from strings like "[object RawType]" => this lets us ignore
- * many native objects such as Promise (whose toString is [object Promise])
- * or Date ([object Date]), while also supporting collections without using
- * instanceof in a loop
- *
- * @param obj the object to check
- * @returns the raw type of the object
- */
-function rawType(obj: any) {
-  return objectToString.call(obj).slice(8, -1);
-}
-/**
- * Checks whether a given value can be made into a reactive object.
- *
- * @param value the value to check
- * @returns whether the value can be made reactive
- */
-function canBeMadeReactive(value: any): boolean {
-  if (typeof value !== "object") {
-    return false;
-  }
-  return SUPPORTED_RAW_TYPES.has(rawType(value));
-}
-/**
- * Creates a reactive from the given object/callback if possible and returns it,
- * returns the original object otherwise.
- *
- * @param value the value make reactive
- * @returns a reactive for the given object when possible, the original otherwise
- */
-function possiblyReactive(val: any, cb: Callback) {
-  return canBeMadeReactive(val) ? reactive(val, cb) : val;
-}
-
-const skipped = new WeakSet<Target>();
-/**
- * Mark an object or array so that it is ignored by the reactivity system
- *
- * @param value the value to mark
- * @returns the object itself
- */
-export function markRaw<T extends Target>(value: T): T {
-  skipped.add(value);
-  return value;
-}
-
-/**
- * Given a reactive objet, return the raw (non reactive) underlying object
- *
- * @param value a reactive value
- * @returns the underlying value
- */
-export function toRaw<T extends Target, U extends Reactive<T>>(value: U | T): T {
-  return targets.has(value) ? (targets.get(value) as T) : value;
-}
-
-const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callback>>>();
-/**
- * Observes a given key on a target with an callback. The callback will be
- * called when the given key changes on the target.
- *
- * @param target the target whose key should be observed
- * @param key the key to observe (or Symbol(KEYCHANGES) for key creation
- *  or deletion)
- * @param callback the function to call when the key changes
- */
-function observeTargetKey(target: Target, key: PropertyKey, callback: Callback): void {
-  if (!targetToKeysToCallbacks.get(target)) {
-    targetToKeysToCallbacks.set(target, new Map());
-  }
-  const keyToCallbacks = targetToKeysToCallbacks.get(target)!;
-  if (!keyToCallbacks.get(key)) {
-    keyToCallbacks.set(key, new Set());
-  }
-  keyToCallbacks.get(key)!.add(callback);
-  if (!callbacksToTargets.has(callback)) {
-    callbacksToTargets.set(callback, new Set());
-  }
-  callbacksToTargets.get(callback)!.add(target);
-}
-/**
- * Notify Reactives that are observing a given target that a key has changed on
- * the target.
- *
- * @param target target whose Reactives should be notified that the target was
- *  changed.
- * @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
- *   or deleted)
- */
-function notifyReactives(target: Target, key: PropertyKey): void {
-  const keyToCallbacks = targetToKeysToCallbacks.get(target);
-  if (!keyToCallbacks) {
-    return;
-  }
-  const callbacks = keyToCallbacks.get(key);
-  if (!callbacks) {
-    return;
-  }
-  // Loop on copy because clearReactivesForCallback will modify the set in place
-  for (const callback of [...callbacks]) {
-    clearReactivesForCallback(callback);
-    callback();
-  }
-}
-
-const callbacksToTargets = new WeakMap<Callback, Set<Target>>();
-/**
- * Clears all subscriptions of the Reactives associated with a given callback.
- *
- * @param callback the callback for which the reactives need to be cleared
- */
-export function clearReactivesForCallback(callback: Callback): void {
-  const targetsToClear = callbacksToTargets.get(callback);
-  if (!targetsToClear) {
-    return;
-  }
-  for (const target of targetsToClear) {
-    const observedKeys = targetToKeysToCallbacks.get(target);
-    if (!observedKeys) {
-      continue;
-    }
-    for (const callbacks of observedKeys.values()) {
-      callbacks.delete(callback);
-    }
-  }
-  targetsToClear.clear();
-}
-
-export function getSubscriptions(callback: Callback) {
-  const targets = callbacksToTargets.get(callback) || [];
-  return [...targets].map((target) => {
-    const keysToCallbacks = targetToKeysToCallbacks.get(target);
-    return {
-      target,
-      keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
-    };
-  });
-}
-// Maps reactive objects to the underlying target
-export const targets = new WeakMap<Reactive<Target>, Target>();
-const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive<Target>>>();
-/**
- * Creates a reactive proxy for an object. Reading data on the reactive object
- * subscribes to changes to the data. Writing data on the object will cause the
- * notify callback to be called if there are suscriptions to that data. Nested
- * objects and arrays are automatically made reactive as well.
- *
- * Whenever you are notified of a change, all subscriptions are cleared, and if
- * you would like to be notified of any further changes, you should go read
- * the underlying data again. We assume that if you don't go read it again after
- * being notified, it means that you are no longer interested in that data.
- *
- * Subscriptions:
- * + Reading a property on an object will subscribe you to changes in the value
- *    of that property.
- * + Accessing an object's keys (eg with Object.keys or with `for..in`) will
- *    subscribe you to the creation/deletion of keys. Checking the presence of a
- *    key on the object with 'in' has the same effect.
- * - getOwnPropertyDescriptor does not currently subscribe you to the property.
- *    This is a choice that was made because changing a key's value will trigger
- *    this trap and we do not want to subscribe by writes. This also means that
- *    Object.hasOwnProperty doesn't subscribe as it goes through this trap.
- *
- * @param target the object for which to create a reactive proxy
- * @param callback the function to call when an observed property of the
- *  reactive has changed
- * @returns a proxy that tracks changes to it
- */
-export function reactive<T extends Target>(target: T, callback: Callback = () => {}): T {
-  if (!canBeMadeReactive(target)) {
-    throw new OwlError(`Cannot make the given value reactive`);
-  }
-  if (skipped.has(target)) {
-    return target;
-  }
-  if (targets.has(target)) {
-    // target is reactive, create a reactive on the underlying object instead
-    return reactive(targets.get(target) as T, callback);
-  }
-  if (!reactiveCache.has(target)) {
-    reactiveCache.set(target, new WeakMap());
-  }
-  const reactivesForTarget = reactiveCache.get(target)!;
-  if (!reactivesForTarget.has(callback)) {
-    const targetRawType = rawType(target);
-    const handler = COLLECTION_RAWTYPES.has(targetRawType)
-      ? collectionsProxyHandler(target as Collection, callback, targetRawType as CollectionRawType)
-      : basicProxyHandler<T>(callback);
-    const proxy = new Proxy(target, handler as ProxyHandler<T>) as Reactive<T>;
-    reactivesForTarget.set(callback, proxy);
-    targets.set(proxy, target);
-  }
-  return reactivesForTarget.get(callback) as Reactive<T>;
-}
-/**
- * Creates a basic proxy handler for regular objects and arrays.
- *
- * @param callback @see reactive
- * @returns a proxy handler object
- */
-function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T> {
-  return {
-    get(target, key, receiver) {
-      // non-writable non-configurable properties cannot be made reactive
-      const desc = Object.getOwnPropertyDescriptor(target, key);
-      if (desc && !desc.writable && !desc.configurable) {
-        return Reflect.get(target, key, receiver);
-      }
-      observeTargetKey(target, key, callback);
-      return possiblyReactive(Reflect.get(target, key, receiver), callback);
-    },
-    set(target, key, value, receiver) {
-      const hadKey = objectHasOwnProperty.call(target, key);
-      const originalValue = Reflect.get(target, key, receiver);
-      const ret = Reflect.set(target, key, value, receiver);
-      if (!hadKey && objectHasOwnProperty.call(target, key)) {
-        notifyReactives(target, KEYCHANGES);
-      }
-      // While Array length may trigger the set trap, it's not actually set by this
-      // method but is updated behind the scenes, and the trap is not called with the
-      // new value. We disable the "same-value-optimization" for it because of that.
-      if (
-        originalValue !== Reflect.get(target, key, receiver) ||
-        (key === "length" && Array.isArray(target))
-      ) {
-        notifyReactives(target, key);
-      }
-      return ret;
-    },
-    deleteProperty(target, key) {
-      const ret = Reflect.deleteProperty(target, key);
-      // TODO: only notify when something was actually deleted
-      notifyReactives(target, KEYCHANGES);
-      notifyReactives(target, key);
-      return ret;
-    },
-    ownKeys(target) {
-      observeTargetKey(target, KEYCHANGES, callback);
-      return Reflect.ownKeys(target);
-    },
-    has(target, key) {
-      // TODO: this observes all key changes instead of only the presence of the argument key
-      // observing the key itself would observe value changes instead of presence changes
-      // so we may need a finer grained system to distinguish observing value vs presence.
-      observeTargetKey(target, KEYCHANGES, callback);
-      return Reflect.has(target, key);
-    },
-  } as ProxyHandler<T>;
-}
-/**
- * Creates a function that will observe the key that is passed to it when called
- * and delegates to the underlying method.
- *
- * @param methodName name of the method to delegate to
- * @param target @see reactive
- * @param callback @see reactive
- */
-function makeKeyObserver(methodName: "has" | "get", target: any, callback: Callback) {
-  return (key: any) => {
-    key = toRaw(key);
-    observeTargetKey(target, key, callback);
-    return possiblyReactive(target[methodName](key), callback);
-  };
-}
-/**
- * Creates an iterable that will delegate to the underlying iteration method and
- * observe keys as necessary.
- *
- * @param methodName name of the method to delegate to
- * @param target @see reactive
- * @param callback @see reactive
- */
-function makeIteratorObserver(
-  methodName: "keys" | "values" | "entries" | typeof Symbol.iterator,
-  target: any,
-  callback: Callback
-) {
-  return function* () {
-    observeTargetKey(target, KEYCHANGES, callback);
-    const keys = target.keys();
-    for (const item of target[methodName]()) {
-      const key = keys.next().value;
-      observeTargetKey(target, key, callback);
-      yield possiblyReactive(item, callback);
-    }
-  };
-}
-/**
- * Creates a forEach function that will delegate to forEach on the underlying
- * collection while observing key changes, and keys as they're iterated over,
- * and making the passed keys/values reactive.
- *
- * @param target @see reactive
- * @param callback @see reactive
- */
-function makeForEachObserver(target: any, callback: Callback) {
-  return function forEach(forEachCb: (val: any, key: any, target: any) => void, thisArg: any) {
-    observeTargetKey(target, KEYCHANGES, callback);
-    target.forEach(function (val: any, key: any, targetObj: any) {
-      observeTargetKey(target, key, callback);
-      forEachCb.call(
-        thisArg,
-        possiblyReactive(val, callback),
-        possiblyReactive(key, callback),
-        possiblyReactive(targetObj, callback)
-      );
-    }, thisArg);
-  };
-}
-/**
- * Creates a function that will delegate to an underlying method, and check if
- * that method has modified the presence or value of a key, and notify the
- * reactives appropriately.
- *
- * @param setterName name of the method to delegate to
- * @param getterName name of the method which should be used to retrieve the
- *  value before calling the delegate method for comparison purposes
- * @param target @see reactive
- */
-function delegateAndNotify(
-  setterName: "set" | "add" | "delete",
-  getterName: "has" | "get",
-  target: any
-) {
-  return (key: any, value: any) => {
-    key = toRaw(key);
-    const hadKey = target.has(key);
-    const originalValue = target[getterName](key);
-    const ret = target[setterName](key, value);
-    const hasKey = target.has(key);
-    if (hadKey !== hasKey) {
-      notifyReactives(target, KEYCHANGES);
-    }
-    if (originalValue !== value) {
-      notifyReactives(target, key);
-    }
-    return ret;
-  };
-}
-/**
- * Creates a function that will clear the underlying collection and notify that
- * the keys of the collection have changed.
- *
- * @param target @see reactive
- */
-function makeClearNotifier(target: Map<any, any> | Set<any>) {
-  return () => {
-    const allKeys = [...target.keys()];
-    target.clear();
-    notifyReactives(target, KEYCHANGES);
-    for (const key of allKeys) {
-      notifyReactives(target, key);
-    }
-  };
-}
-/**
- * Maps raw type of an object to an object containing functions that can be used
- * to build an appropritate proxy handler for that raw type. Eg: when making a
- * reactive set, calling the has method should mark the key that is being
- * retrieved as observed, and calling the add or delete method should notify the
- * reactives that the key which is being added or deleted has been modified.
- */
-const rawTypeToFuncHandlers = {
-  Set: (target: any, callback: Callback) => ({
-    has: makeKeyObserver("has", target, callback),
-    add: delegateAndNotify("add", "has", target),
-    delete: delegateAndNotify("delete", "has", target),
-    keys: makeIteratorObserver("keys", target, callback),
-    values: makeIteratorObserver("values", target, callback),
-    entries: makeIteratorObserver("entries", target, callback),
-    [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
-    forEach: makeForEachObserver(target, callback),
-    clear: makeClearNotifier(target),
-    get size() {
-      observeTargetKey(target, KEYCHANGES, callback);
-      return target.size;
-    },
-  }),
-  Map: (target: any, callback: Callback) => ({
-    has: makeKeyObserver("has", target, callback),
-    get: makeKeyObserver("get", target, callback),
-    set: delegateAndNotify("set", "get", target),
-    delete: delegateAndNotify("delete", "has", target),
-    keys: makeIteratorObserver("keys", target, callback),
-    values: makeIteratorObserver("values", target, callback),
-    entries: makeIteratorObserver("entries", target, callback),
-    [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
-    forEach: makeForEachObserver(target, callback),
-    clear: makeClearNotifier(target),
-    get size() {
-      observeTargetKey(target, KEYCHANGES, callback);
-      return target.size;
-    },
-  }),
-  WeakMap: (target: any, callback: Callback) => ({
-    has: makeKeyObserver("has", target, callback),
-    get: makeKeyObserver("get", target, callback),
-    set: delegateAndNotify("set", "get", target),
-    delete: delegateAndNotify("delete", "has", target),
-  }),
-};
-/**
- * Creates a proxy handler for collections (Set/Map/WeakMap)
- *
- * @param callback @see reactive
- * @param target @see reactive
- * @returns a proxy handler object
- */
-function collectionsProxyHandler<T extends Collection>(
-  target: T,
-  callback: Callback,
-  targetRawType: CollectionRawType
-): ProxyHandler<T> {
-  // TODO: if performance is an issue we can create the special handlers lazily when each
-  // property is read.
-  const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
-  return Object.assign(basicProxyHandler(callback), {
-    // FIXME: probably broken when part of prototype chain since we ignore the receiver
-    get(target: any, key: PropertyKey) {
-      if (objectHasOwnProperty.call(specialHandlers, key)) {
-        return (specialHandlers as any)[key];
-      }
-      observeTargetKey(target, key, callback);
-      return possiblyReactive(target[key], callback);
-    },
-  }) as ProxyHandler<T>;
-}

src/runtime/scheduler.ts

@@ -1,76 +0,0 @@
-import { fibersInError } from "./error_handling";
-import { Fiber, RootFiber } from "./fibers";
-import { STATUS } from "./status";
-
-// -----------------------------------------------------------------------------
-//  Scheduler
-// -----------------------------------------------------------------------------
-
-export class Scheduler {
-  // capture the value of requestAnimationFrame as soon as possible, to avoid
-  // interactions with other code, such as test frameworks that override them
-  static requestAnimationFrame = window.requestAnimationFrame.bind(window);
-  tasks: Set<RootFiber> = new Set();
-  requestAnimationFrame: Window["requestAnimationFrame"];
-  frame: number = 0;
-  delayedRenders: Fiber[] = [];
-
-  constructor() {
-    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
-  }
-
-  addFiber(fiber: Fiber) {
-    this.tasks.add(fiber.root!);
-  }
-
-  /**
-   * Process all current tasks. This only applies to the fibers that are ready.
-   * Other tasks are left unchanged.
-   */
-  flush() {
-    if (this.delayedRenders.length) {
-      let renders = this.delayedRenders;
-      this.delayedRenders = [];
-      for (let f of renders) {
-        if (f.root && f.node.status !== STATUS.DESTROYED && f.node.fiber === f) {
-          f.render();
-        }
-      }
-    }
-
-    if (this.frame === 0) {
-      this.frame = this.requestAnimationFrame(() => {
-        this.frame = 0;
-        this.tasks.forEach((fiber) => this.processFiber(fiber));
-        for (let task of this.tasks) {
-          if (task.node.status === STATUS.DESTROYED) {
-            this.tasks.delete(task);
-          }
-        }
-      });
-    }
-  }
-
-  processFiber(fiber: RootFiber) {
-    if (fiber.root !== fiber) {
-      this.tasks.delete(fiber);
-      return;
-    }
-    const hasError = fibersInError.has(fiber);
-    if (hasError && fiber.counter !== 0) {
-      this.tasks.delete(fiber);
-      return;
-    }
-    if (fiber.node.status === STATUS.DESTROYED) {
-      this.tasks.delete(fiber);
-      return;
-    }
-
-    if (fiber.counter === 0) {
-      if (!hasError) {
-        fiber.complete();
-      }
-      this.tasks.delete(fiber);
-    }
-  }
-}

src/runtime/status.ts

@@ -1,24 +0,0 @@
-import type { Component } from "./component";
-
-// -----------------------------------------------------------------------------
-//  Status
-// -----------------------------------------------------------------------------
-
-export const enum STATUS {
-  NEW,
-  MOUNTED, // is ready, and in DOM. It has a valid el
-  DESTROYED,
-}
-
-type STATUS_DESCR = "new" | "mounted" | "destroyed";
-
-export function status(component: Component): STATUS_DESCR {
-  switch (component.__owl__.status) {
-    case STATUS.NEW:
-      return "new";
-    case STATUS.MOUNTED:
-      return "mounted";
-    case STATUS.DESTROYED:
-      return "destroyed";
-  }
-}

src/runtime/template_helpers.ts

@@ -1,272 +0,0 @@
-import { BDom, multi, text, toggler, createCatcher } from "./blockdom";
-import { Markup } from "./utils";
-import { html } from "./blockdom/index";
-import { isOptional, validateSchema } from "./validation";
-import type { ComponentConstructor } from "./component";
-import { markRaw } from "./reactivity";
-import { OwlError } from "./error_handling";
-
-const ObjectCreate = Object.create;
-/**
- * This file contains utility functions that will be injected in each template,
- * to perform various useful tasks in the compiled code.
- */
-
-function withDefault(value: any, defaultValue: any): any {
-  return value === undefined || value === null || value === false ? defaultValue : value;
-}
-
-function callSlot(
-  ctx: any,
-  parent: any,
-  key: string,
-  name: string,
-  dynamic: boolean,
-  extra: any,
-  defaultContent?: (ctx: any, node: any, key: string) => BDom
-): BDom {
-  key = key + "__slot_" + name;
-  const slots = ctx.props.slots || {};
-  const { __render, __ctx, __scope } = slots[name] || {};
-  const slotScope = ObjectCreate(__ctx || {});
-  if (__scope) {
-    slotScope[__scope] = extra;
-  }
-  const slotBDom = __render ? __render(slotScope, parent, key) : null;
-  if (defaultContent) {
-    let child1: BDom | undefined = undefined;
-    let child2: BDom | undefined = undefined;
-    if (slotBDom) {
-      child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
-    } else {
-      child2 = defaultContent(ctx, parent, key);
-    }
-    return multi([child1, child2]);
-  }
-  return slotBDom || text("");
-}
-
-function capture(ctx: any, component: any): any {
-  const result = ObjectCreate(component);
-  for (let k in ctx) {
-    result[k] = ctx[k];
-  }
-  return result;
-}
-
-function withKey(elem: any, k: string) {
-  elem.key = k;
-  return elem;
-}
-
-function prepareList(collection: any): [any[], any[], number, any[]] {
-  let keys: any[];
-  let values: any[];
-
-  if (Array.isArray(collection)) {
-    keys = collection;
-    values = collection;
-  } else if (collection) {
-    values = Object.keys(collection);
-    keys = Object.values(collection);
-  } else {
-    throw new OwlError("Invalid loop expression");
-  }
-  const n = values.length;
-  return [keys, values, n, new Array(n)];
-}
-
-const isBoundary = Symbol("isBoundary");
-
-function setContextValue(ctx: { [key: string]: any }, key: string, value: any): void {
-  const ctx0 = ctx;
-  while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
-    const newCtx = ctx.__proto__;
-    if (!newCtx) {
-      ctx = ctx0;
-      break;
-    }
-    ctx = newCtx;
-  }
-  ctx[key] = value;
-}
-
-function toNumber(val: string): number | string {
-  const n = parseFloat(val);
-  return isNaN(n) ? val : n;
-}
-
-function shallowEqual(l1: any[], l2: any[]): boolean {
-  for (let i = 0, l = l1.length; i < l; i++) {
-    if (l1[i] !== l2[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-class LazyValue {
-  fn: any;
-  ctx: any;
-  component: any;
-  node: any;
-  key: any;
-
-  constructor(fn: any, ctx: any, component: any, node: any, key: any) {
-    this.fn = fn;
-    this.ctx = capture(ctx, component);
-    this.component = component;
-    this.node = node;
-    this.key = key;
-  }
-
-  evaluate(): any {
-    return this.fn.call(this.component, this.ctx, this.node, this.key);
-  }
-
-  toString() {
-    return this.evaluate().toString();
-  }
-}
-
-/*
- * Safely outputs `value` as a block depending on the nature of `value`
- */
-export function safeOutput(value: any, defaultValue?: any): ReturnType<typeof toggler> {
-  if (value === undefined) {
-    return defaultValue ? toggler("default", defaultValue) : toggler("undefined", text(""));
-  }
-  let safeKey;
-  let block;
-  switch (typeof value) {
-    case "object":
-      if (value instanceof Markup) {
-        safeKey = `string_safe`;
-        block = html(value as string);
-      } else if (value instanceof LazyValue) {
-        safeKey = `lazy_value`;
-        block = value.evaluate();
-      } else if (value instanceof String) {
-        safeKey = "string_unsafe";
-        block = text(value);
-      } else {
-        // Assuming it is a block
-        safeKey = "block_safe";
-        block = value;
-      }
-      break;
-    case "string":
-      safeKey = "string_unsafe";
-      block = text(value);
-      break;
-    default:
-      safeKey = "string_unsafe";
-      block = text(String(value));
-  }
-  return toggler(safeKey, block);
-}
-
-let boundFunctions = new WeakMap();
-const WeakMapGet = WeakMap.prototype.get;
-const WeakMapSet = WeakMap.prototype.set;
-
-function bind(component: any, fn: Function): Function {
-  let boundFnMap = WeakMapGet.call(boundFunctions, component);
-  if (!boundFnMap) {
-    boundFnMap = new WeakMap();
-    WeakMapSet.call(boundFunctions, component, boundFnMap);
-  }
-  let boundFn = WeakMapGet.call(boundFnMap, fn);
-  if (!boundFn) {
-    boundFn = fn.bind(component);
-    WeakMapSet.call(boundFnMap, fn, boundFn);
-  }
-  return boundFn;
-}
-
-type RefMap = { [key: string]: HTMLElement | null };
-type RefSetter = (el: HTMLElement | null) => void;
-
-function multiRefSetter(refs: RefMap, name: string): RefSetter {
-  let count = 0;
-  return (el) => {
-    if (el) {
-      count++;
-      if (count > 1) {
-        throw new OwlError("Cannot have 2 elements with same ref name at the same time");
-      }
-    }
-    if (count === 0 || el) {
-      refs[name] = el;
-    }
-  };
-}
-
-/**
- * Validate the component props (or next props) against the (static) props
- * description.  This is potentially an expensive operation: it may needs to
- * visit recursively the props and all the children to check if they are valid.
- * This is why it is only done in 'dev' mode.
- */
-export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, comp?: any) {
-  const ComponentClass =
-    typeof name !== "string"
-      ? name
-      : (comp.constructor.components[name] as ComponentConstructor<P> | undefined);
-
-  if (!ComponentClass) {
-    // this is an error, wrong component. We silently return here instead so the
-    // error is triggered by the usual path ('component' function)
-    return;
-  }
-
-  const schema = ComponentClass.props;
-  if (!schema) {
-    if (comp.__owl__.app.warnIfNoStaticProps) {
-      console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
-    }
-    return;
-  }
-  const defaultProps = ComponentClass.defaultProps;
-  if (defaultProps) {
-    let isMandatory = (name: string) =>
-      Array.isArray(schema)
-        ? schema.includes(name)
-        : name in schema && !("*" in schema) && !isOptional(schema[name]);
-    for (let p in defaultProps) {
-      if (isMandatory(p)) {
-        throw new OwlError(
-          `A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
-        );
-      }
-    }
-  }
-
-  const errors = validateSchema(props, schema);
-  if (errors.length) {
-    throw new OwlError(
-      `Invalid props for component '${ComponentClass.name}': ` + errors.join(", ")
-    );
-  }
-}
-
-export const helpers = {
-  withDefault,
-  zero: Symbol("zero"),
-  isBoundary,
-  callSlot,
-  capture,
-  withKey,
-  prepareList,
-  setContextValue,
-  multiRefSetter,
-  shallowEqual,
-  toNumber,
-  validateProps,
-  LazyValue,
-  safeOutput,
-  bind,
-  createCatcher,
-  markRaw,
-  OwlError,
-};

src/runtime/template_set.ts

@@ -1,146 +0,0 @@
-import { compile, Template, TemplateFunction } from "../compiler";
-import { comment, createBlock, html, list, multi, text, toggler } from "./blockdom";
-import { getCurrent } from "./component_node";
-import { Portal, portalTemplate } from "./portal";
-import { helpers } from "./template_helpers";
-import { OwlError } from "./error_handling";
-
-const bdom = { text, createBlock, list, multi, html, toggler, comment };
-
-function parseXML(xml: string): Document {
-  const parser = new DOMParser();
-
-  const doc = parser.parseFromString(xml, "text/xml");
-  if (doc.getElementsByTagName("parsererror").length) {
-    let msg = "Invalid XML in template.";
-    const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
-    if (parsererrorText) {
-      msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
-      const re = /\d+/g;
-      const firstMatch = re.exec(parsererrorText);
-      if (firstMatch) {
-        const lineNumber = Number(firstMatch[0]);
-        const line = xml.split("\n")[lineNumber - 1];
-        const secondMatch = re.exec(parsererrorText);
-        if (line && secondMatch) {
-          const columnIndex = Number(secondMatch[0]) - 1;
-          if (line[columnIndex]) {
-            msg +=
-              `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
-              `${line}\n${"-".repeat(columnIndex - 1)}^`;
-          }
-        }
-      }
-    }
-    throw new OwlError(msg);
-  }
-  return doc;
-}
-
-export interface TemplateSetConfig {
-  dev?: boolean;
-  translatableAttributes?: string[];
-  translateFn?: (s: string) => string;
-  templates?: string | Document;
-}
-
-export class TemplateSet {
-  static registerTemplate(name: string, fn: TemplateFunction) {
-    globalTemplates[name] = fn;
-  }
-  dev: boolean;
-  rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
-  templates: { [name: string]: Template } = {};
-  translateFn?: (s: string) => string;
-  translatableAttributes?: string[];
-  Portal = Portal;
-
-  constructor(config: TemplateSetConfig = {}) {
-    this.dev = config.dev || false;
-    this.translateFn = config.translateFn;
-    this.translatableAttributes = config.translatableAttributes;
-    if (config.templates) {
-      this.addTemplates(config.templates);
-    }
-  }
-
-  addTemplate(name: string, template: string | Element) {
-    if (name in this.rawTemplates) {
-      const rawTemplate = this.rawTemplates[name];
-      const currentAsString =
-        typeof rawTemplate === "string"
-          ? rawTemplate
-          : rawTemplate instanceof Element
-          ? rawTemplate.outerHTML
-          : rawTemplate.toString();
-      const newAsString = typeof template === "string" ? template : template.outerHTML;
-      if (currentAsString === newAsString) {
-        return;
-      }
-      throw new OwlError(`Template ${name} already defined with different content`);
-    }
-    this.rawTemplates[name] = template;
-  }
-
-  addTemplates(xml: string | Document) {
-    if (!xml) {
-      // empty string
-      return;
-    }
-    xml = xml instanceof Document ? xml : parseXML(xml);
-    for (const template of xml.querySelectorAll("[t-name]")) {
-      const name = template.getAttribute("t-name")!;
-      this.addTemplate(name, template);
-    }
-  }
-
-  getTemplate(name: string): Template {
-    if (!(name in this.templates)) {
-      const rawTemplate = this.rawTemplates[name];
-      if (rawTemplate === undefined) {
-        let extraInfo = "";
-        try {
-          const componentName = getCurrent().component.constructor.name;
-          extraInfo = ` (for component "${componentName}")`;
-        } catch {}
-        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
-      }
-      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
-      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
-      // first add a function to lazily get the template, in case there is a
-      // recursive call to the template name
-      const templates = this.templates;
-      this.templates[name] = function (context, parent) {
-        return templates[name].call(this, context, parent);
-      };
-      const template = templateFn(this, bdom, helpers);
-      this.templates[name] = template;
-    }
-    return this.templates[name];
-  }
-
-  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
-  }
-
-  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
-    const template = this.getTemplate(subTemplate);
-    return toggler(subTemplate, template.call(owner, ctx, parent, key));
-  }
-}
-
-// -----------------------------------------------------------------------------
-//  xml tag helper
-// -----------------------------------------------------------------------------
-export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};
-
-export function xml(...args: Parameters<typeof String.raw>) {
-  const name = `__template__${xml.nextId++}`;
-  const value = String.raw(...args);
-  globalTemplates[name] = value;
-  return name;
-}
-
-xml.nextId = 1;
-
-TemplateSet.registerTemplate("__portal__", portalTemplate);

src/runtime/utils.ts

@@ -1,82 +0,0 @@
-import { OwlError } from "./error_handling";
-export type Callback = () => void;
-
-/**
- * Creates a batched version of a callback so that all calls to it in the same
- * microtick will only call the original callback once.
- *
- * @param callback the callback to batch
- * @returns a batched version of the original callback
- */
-export function batched(callback: Callback): Callback {
-  let called = false;
-  return async () => {
-    // This await blocks all calls to the callback here, then releases them sequentially
-    // in the next microtick. This line decides the granularity of the batch.
-    await Promise.resolve();
-    if (!called) {
-      called = true;
-      // wait for all calls in this microtick to fall through before resetting "called"
-      // so that only the first call to the batched function calls the original callback.
-      // Schedule this before calling the callback so that calls to the batched function
-      // within the callback will proceed only after resetting called to false, and have
-      // a chance to execute the callback again
-      Promise.resolve().then(() => (called = false));
-      callback();
-    }
-  };
-}
-
-export function validateTarget(target: HTMLElement) {
-  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
-  const document = target && target.ownerDocument;
-  if (document) {
-    const HTMLElement = document.defaultView!.HTMLElement;
-    if (target instanceof HTMLElement) {
-      if (!document.body.contains(target)) {
-        throw new OwlError("Cannot mount a component on a detached dom node");
-      }
-      return;
-    }
-  }
-  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
-}
-
-export class EventBus extends EventTarget {
-  trigger(name: string, payload?: any) {
-    this.dispatchEvent(new CustomEvent(name, { detail: payload }));
-  }
-}
-
-export function whenReady(fn?: any): Promise<void> {
-  return new Promise(function (resolve) {
-    if (document.readyState !== "loading") {
-      resolve(true);
-    } else {
-      document.addEventListener("DOMContentLoaded", resolve, false);
-    }
-  }).then(fn || function () {});
-}
-
-export async function loadFile(url: string): Promise<string> {
-  const result = await fetch(url);
-  if (!result.ok) {
-    throw new OwlError("Error while fetching xml templates");
-  }
-  return await result.text();
-}
-
-/*
- * This class just transports the fact that a string is safe
- * to be injected as HTML. Overriding a JS primitive is quite painful though
- * so we need to redfine toString and valueOf.
- */
-export class Markup extends String {}
-
-/*
- * Marks a value as safe, that is, a value that can be injected as HTML directly.
- * It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
- */
-export function markup(value: any) {
-  return new Markup(value);
-}

src/runtime/validation.ts

@@ -1,169 +0,0 @@
-import { OwlError } from "./error_handling";
-
-type BaseType =
-  | typeof String
-  | typeof Boolean
-  | typeof Number
-  | typeof Date
-  | typeof Object
-  | typeof Array
-  | true
-  | "*";
-
-interface TypeInfo {
-  type?: TypeDescription;
-  optional?: boolean;
-  validate?: Function;
-  shape?: Schema;
-  element?: TypeDescription;
-}
-
-type ValueType = { value: any };
-
-type TypeDescription = BaseType | TypeInfo | ValueType | TypeDescription[];
-type SimplifiedSchema = string[];
-type NormalizedSchema = { [key: string]: TypeDescription };
-export type Schema = SimplifiedSchema | NormalizedSchema;
-
-// -----------------------------------------------------------------------------
-// helpers
-// -----------------------------------------------------------------------------
-const isUnionType = (t: TypeDescription): t is TypeDescription[] => Array.isArray(t);
-const isBaseType = (t: TypeDescription): t is BaseType => typeof t !== "object";
-const isValueType = (t: TypeDescription): t is ValueType =>
-  typeof t === "object" && t && "value" in t;
-
-export function isOptional(t: TypeDescription): Boolean {
-  return typeof t === "object" && "optional" in t ? t.optional || false : false;
-}
-
-function describeType(type: BaseType): string {
-  return type === "*" || type === true ? "value" : type.name.toLowerCase();
-}
-
-function describe(info: TypeDescription): string {
-  if (isBaseType(info)) {
-    return describeType(info);
-  } else if (isUnionType(info)) {
-    return info.map(describe).join(" or ");
-  } else if (isValueType(info)) {
-    return String(info.value);
-  }
-  if ("element" in info) {
-    return `list of ${describe({ type: info.element, optional: false })}s`;
-  }
-  if ("shape" in (info as TypeInfo)) {
-    return `object`;
-  }
-  return describe(info.type || "*");
-}
-
-function toSchema(spec: SimplifiedSchema): NormalizedSchema {
-  return Object.fromEntries(
-    spec.map((e) =>
-      e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]
-    )
-  );
-}
-
-/**
- * Main validate function
- */
-export function validate(obj: { [key: string]: any }, spec: Schema) {
-  let errors = validateSchema(obj, spec);
-  if (errors.length) {
-    throw new OwlError("Invalid object: " + errors.join(", "));
-  }
-}
-
-/**
- * Helper validate function, to get the list of errors. useful if one want to
- * manipulate the errors without parsing an error object
- */
-export function validateSchema(obj: { [key: string]: any }, schema: Schema): string[] {
-  if (Array.isArray(schema)) {
-    schema = toSchema(schema);
-  }
-  let errors = [];
-  // check if each value in obj has correct shape
-  for (let key in obj) {
-    if (key in schema) {
-      let result = validateType(key, obj[key], schema[key]);
-      if (result) {
-        errors.push(result);
-      }
-    } else if (!("*" in schema)) {
-      errors.push(`unknown key '${key}'`);
-    }
-  }
-  // check that all specified keys are defined in obj
-  for (let key in schema) {
-    const spec = schema[key];
-    if (key !== "*" && !isOptional(spec) && !(key in obj)) {
-      const isObj = typeof spec === "object" && !Array.isArray(spec);
-      const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
-      let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
-      errors.push(`'${key}' is missing${detail}`);
-    }
-  }
-  return errors;
-}
-
-function validateBaseType(key: string, value: any, type: BaseType): string | null {
-  if (typeof type === "function") {
-    if (typeof value === "object") {
-      if (!(value instanceof type)) {
-        return `'${key}' is not a ${describeType(type)}`;
-      }
-    } else if (typeof value !== type.name.toLowerCase()) {
-      return `'${key}' is not a ${describeType(type)}`;
-    }
-  }
-  return null;
-}
-
-function validateArrayType(key: string, value: any, descr: TypeDescription): string | null {
-  if (!Array.isArray(value)) {
-    return `'${key}' is not a list of ${describe(descr)}s`;
-  }
-  for (let i = 0; i < value.length; i++) {
-    const error = validateType(`${key}[${i}]`, value[i], descr);
-    if (error) {
-      return error;
-    }
-  }
-  return null;
-}
-
-function validateType(key: string, value: any, descr: TypeDescription): string | null {
-  if (value === undefined) {
-    return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
-  } else if (isBaseType(descr)) {
-    return validateBaseType(key, value, descr);
-  } else if (isValueType(descr)) {
-    return value === descr.value ? null : `'${key}' is not equal to '${descr.value}'`;
-  } else if (isUnionType(descr)) {
-    let validDescr = descr.find((p) => !validateType(key, value, p));
-    return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
-  }
-  let result: string | null = null;
-  if ("element" in descr) {
-    result = validateArrayType(key, value, descr.element!);
-  } else if ("shape" in descr && !result) {
-    if (typeof value !== "object" || Array.isArray(value)) {
-      result = `'${key}' is not an object`;
-    } else {
-      const errors = validateSchema(value, descr.shape!);
-      if (errors.length) {
-        result = `'${key}' has not the correct shape (${errors.join(", ")})`;
-      }
-    }
-  }
-  if ("type" in descr && !result) {
-    result = validateType(key, value, descr.type!);
-  }
-  if ("validate" in descr && !result) {
-    result = !descr.validate!(value) ? `'${key}' is not valid` : null;
-  }
-  return result;
-}

tests/__snapshots__/reactivity.test.ts.snap

@@ -1,395 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Reactivity: useState concurrent renderings 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['context'][ctx['props'].key].n;
-    let d2 = ctx['state'].x;
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState concurrent renderings 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<p><block-child-0/></p>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {key: ctx['props'].key}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState concurrent renderings 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {key: ctx['context'].key}, key + \`__1\`, node, ctx);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, this, null);
-    }
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].a;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState destroyed component is inactive 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2;
-    if (ctx['state'].flag) {
-      b2 = comp1({}, key + \`__1\`, node, this, null);
-    }
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState destroyed component is inactive 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].a;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj1'].a;
-    let txt2 = ctx['contextObj2'].b;
-    return block1([txt1, txt2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    let txt1 = ctx['contextObj'].b;
-    return block1([txt1], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].a;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState several nodes on different level use same context 1`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].a;
-    let d2 = ctx['contextObj'].b;
-    return block1([d1, d2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState several nodes on different level use same context 2`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].b;
-    return block1([d1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState several nodes on different level use same context 3`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let d1 = ctx['contextObj'].a;
-    let b2 = component(\`L3A\`, {}, key + \`__1\`, node, ctx);
-    return block1([d1], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState several nodes on different level use same context 4`] = `
-"function anonymous(bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, component } = bdom;
-  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber, safeOutput } = helpers;
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`L2A\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`L2B\`, {}, key + \`__2\`, node, ctx);
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two components are updated in parallel 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = comp2({}, key + \`__2\`, node, this, null);
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two components are updated in parallel 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].value;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two components can subscribe to same context 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = comp2({}, key + \`__2\`, node, this, null);
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two components can subscribe to same context 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].value;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  const comp2 = app.createComponent(\`Parent\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    const b3 = comp2({}, key + \`__2\`, node, this, null);
-    return block1([], [b2, b3]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span><block-text-0/></span>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].value;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, true);
-  
-  let block1 = createBlock(\`<div><block-child-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const b2 = comp1({}, key + \`__1\`, node, this, null);
-    return block1([], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].value;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState useless atoms should be deleted 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { prepareList, withKey } = helpers;
-  const comp1 = app.createComponent(\`Quantity\`, true, false, false, false);
-  
-  let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
-    for (let i1 = 0; i1 < l_block2; i1++) {
-      ctx[\`id\`] = v_block2[i1];
-      const key1 = ctx['id'];
-      c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
-    }
-    ctx = ctx.__proto__;
-    const b2 = list(c_block2);
-    let txt1 = ctx['total'];
-    let txt2 = Object.keys(ctx['state']).length;
-    return block1([txt1, txt2], [b2]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState useless atoms should be deleted 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['state'].quantity;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`Reactivity: useState very simple use, with initial value 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['contextObj'].value;
-    return block1([txt1]);
-  }
-}"
-`;

tests/app/__snapshots__/app.test.ts.snap

@@ -1,70 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app App supports env with getters/setters 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['env'].someVal;
-    let txt2 = Object.keys(ctx['env'].services);
-    return block1([txt1, txt2]);
-  }
-}"
-`;
-
-exports[`app can configure an app with props 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['props'].value;
-    return block1([txt1]);
-  }
-}"
-`;
-
-exports[`app can mount app in an iframe 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div class=\\"my-div\\"/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`app destroy remove the widget from the DOM 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
-exports[`app warnIfNoStaticProps works as expected 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<div><block-text-0/></div>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    let txt1 = ctx['message'];
-    return block1([txt1]);
-  }
-}"
-`;

tests/app/app.test.ts

@@ -1,97 +0,0 @@
-import { App, Component, mount, xml } from "../../src";
-import { status } from "../../src/runtime/status";
-import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";
-
-let fixture: HTMLElement;
-
-snapshotEverything();
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-describe("app", () => {
-  test("destroy remove the widget from the DOM", async () => {
-    class SomeComponent extends Component {
-      static template = xml`<div/>`;
-    }
-
-    const app = new App(SomeComponent);
-    const comp = await app.mount(fixture);
-    const el = elem(comp);
-    expect(document.contains(el)).toBe(true);
-    app.destroy();
-    expect(document.contains(el)).toBe(false);
-    expect(status(comp)).toBe("destroyed");
-  });
-
-  test("App supports env with getters/setters", async () => {
-    let someVal = "maggot";
-
-    const services: any = { serv1: "" };
-    const env = {
-      get someVal() {
-        return someVal;
-      },
-      services,
-    };
-
-    class SomeComponent extends Component {
-      static template = xml`<div><t t-esc="env.someVal" /> <t t-esc="Object.keys(env.services)" /></div>`;
-    }
-
-    const app = new App(SomeComponent, { env });
-    const comp = await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>maggot serv1</div>");
-    someVal = "brain";
-    services.serv2 = "";
-    comp.render();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div>brain serv1,serv2</div>");
-  });
-
-  test("can configure an app with props", async () => {
-    class SomeComponent extends Component {
-      static template = xml`<div t-esc="props.value"/>`;
-    }
-
-    const app = new App(SomeComponent, { props: { value: 333 } });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>333</div>");
-  });
-
-  test("warnIfNoStaticProps works as expected", async () => {
-    let originalconsoleWarn = console.warn;
-    let mockConsoleWarn = jest.fn(() => {});
-    console.warn = mockConsoleWarn;
-
-    class Root extends Component {
-      static template = xml`<div t-esc="message"/>`;
-    }
-
-    await mount(Root, fixture, { dev: true, props: { messge: "hey" }, warnIfNoStaticProps: true });
-
-    console.warn = originalconsoleWarn;
-    expect(mockConsoleWarn).toBeCalledWith(
-      "Component 'Root' does not have a static props description"
-    );
-  });
-
-  test("can mount app in an iframe", async () => {
-    class SomeComponent extends Component {
-      static template = xml`<div class="my-div"/>`;
-    }
-
-    const iframe = document.createElement("iframe");
-    fixture.appendChild(iframe);
-    const app = new App(SomeComponent);
-    const iframeDoc = iframe.contentDocument!;
-    const comp = await app.mount(iframeDoc.body);
-    const div = iframeDoc.querySelector(".my-div");
-    expect(div).not.toBe(null);
-    expect(iframeDoc.contains(div)).toBe(true);
-    app.destroy();
-    expect(iframeDoc.contains(div)).toBe(false);
-    expect(status(comp)).toBe("destroyed");
-  });
-});

tests/blockdom/block.test.ts

@@ -1,297 +0,0 @@
-import { createBlock, mount, patch, remove, text } from "../../src/runtime/blockdom";
-import { makeTestFixture } from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-describe("adding/patching blocks", () => {
-  test("simple block", async () => {
-    const block = createBlock("<div>foo</div>");
-    const tree = block();
-    expect(tree.el).toBe(undefined);
-
-    mount(tree, fixture);
-    expect(tree.el).not.toBe(undefined);
-    expect(fixture.innerHTML).toBe("<div>foo</div>");
-  });
-
-  test("block with dynamic content", async () => {
-    const block = createBlock("<div><p><block-text-0/></p></div>");
-    const tree = block(["foo"]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p>foo</p></div>");
-    patch(tree, block(["bar"]));
-    expect(fixture.innerHTML).toBe("<div><p>bar</p></div>");
-
-    patch(tree, block(["foo"]));
-    expect(fixture.innerHTML).toBe("<div><p>foo</p></div>");
-  });
-
-  test("block with 2 dynamic text nodes", async () => {
-    const block = createBlock("<div><p><block-text-0/></p><span><block-text-1/></span></div>");
-    const tree = block(["foo", "bar"]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p>foo</p><span>bar</span></div>");
-    patch(tree, block(["appa", "yip yip"]));
-    expect(fixture.innerHTML).toBe("<div><p>appa</p><span>yip yip</span></div>");
-  });
-
-  test("block with multiple references", async () => {
-    const block1 = createBlock(
-      "<div><block-text-0/><p><block-text-1/><block-text-2/></p><block-text-3/></div>"
-    );
-    const tree = block1(["1", "2", "3", "4"]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div>1<p>23</p>4</div>");
-  });
-
-  test("falsy values in block nodes", () => {
-    const cases = [
-      [false, "false"],
-      [undefined, ""],
-      [null, ""],
-      [0, "0"],
-      ["", ""],
-    ];
-    const block = createBlock("<p><block-text-0/></p>");
-
-    for (let [value, result] of cases) {
-      const fixture = makeTestFixture();
-      mount(block([value as any]), fixture);
-      expect(fixture.innerHTML).toBe(`<p>${result}</p>`);
-    }
-  });
-});
-
-describe("sub blocks", () => {
-  test("block with subblock (only child)", async () => {
-    const block1 = createBlock("<div><block-child-0/></div>");
-    const block2 = createBlock("<p>yip yip</p>");
-    const tree = block1([], [block2()]);
-
-    mount(tree, fixture);
-
-    expect(fixture.innerHTML).toBe("<div><p>yip yip</p></div>");
-  });
-
-  test("block with subblock (first child with sibling)", async () => {
-    const block1 = createBlock("<div><block-child-0/><span>something</span></div>");
-    const block2 = createBlock("<p>yip yip</p>");
-    const tree = block1([], [block2()]);
-
-    mount(tree, fixture);
-
-    expect(fixture.innerHTML).toBe("<div><p>yip yip</p><span>something</span></div>");
-  });
-
-  test("block with subblock (last child with sibling)", async () => {
-    const block1 = createBlock("<div><span>something</span><block-child-0/></div>");
-    const block2 = createBlock("<p>yip yip</p>");
-    const tree = block1([], [block2()]);
-
-    mount(tree, fixture);
-
-    expect(fixture.innerHTML).toBe("<div><span>something</span><p>yip yip</p></div>");
-  });
-
-  test("block with 2 subblocks", async () => {
-    const block1 = createBlock("<div><block-child-0/><block-child-1/></div>");
-    const block2 = createBlock("<p>yip yip</p>");
-    const tree = block1([], [block2(), text("appa")]);
-
-    mount(tree, fixture);
-
-    expect(fixture.innerHTML).toBe("<div><p>yip yip</p>appa</div>");
-  });
-
-  test("block with subblock with siblings", async () => {
-    const block1 = createBlock("<div><p>1</p><block-child-0/><p>2</p></div>");
-    const block2 = createBlock("<p>yip yip</p>");
-
-    const tree = block1([], [block2()]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p>1</p><p>yip yip</p><p>2</p></div>");
-  });
-
-  test("block with text, subblock and siblings", async () => {
-    let block1 = createBlock(`<div><p>before<block-child-0/>after</p><block-child-1/></div>`);
-
-    let tree = block1([], [text("water"), text("fire")]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p>beforewaterafter</p>fire</div>");
-  });
-
-  test("block with conditional child", async () => {
-    const block1 = createBlock("<div><p><block-child-0/></p></div>");
-    const block2 = createBlock("<span>foo</span>");
-
-    const tree = block1();
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p></p></div>");
-
-    patch(tree, block1([], [block2()]));
-    expect(fixture.innerHTML).toBe("<div><p><span>foo</span></p></div>");
-
-    patch(tree, block1());
-    expect(fixture.innerHTML).toBe("<div><p></p></div>");
-  });
-
-  test("block with subblock with dynamic content", async () => {
-    const block1 = createBlock("<div><block-child-0/></div>");
-    const block2 = createBlock("<p><block-text-0/></p>");
-    const tree = block1([], [block2(["yip yip"])]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p>yip yip</p></div>");
-
-    patch(tree, block1([], [block2(["foo"])]));
-    expect(fixture.innerHTML).toBe("<div><p>foo</p></div>");
-  });
-
-  test("block with dynamic content and subblock", async () => {
-    const block1 = createBlock("<div><block-child-0/><p><block-text-0/></p></div>");
-    const block2 = createBlock("<p>sub block</p>");
-    const tree = block1(["yip yip"], [block2()]);
-
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div><p>sub block</p><p>yip yip</p></div>");
-
-    patch(tree, block1(["foo"], [block2()]));
-    expect(fixture.innerHTML).toBe("<div><p>sub block</p><p>foo</p></div>");
-  });
-});
-
-describe("remove elem blocks", () => {
-  test("elem block can be removed", async () => {
-    const block = createBlock("<div>foo</div>");
-    const tree = block();
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<div>foo</div>");
-    remove(tree);
-    expect(fixture.innerHTML).toBe("");
-    expect(fixture.childNodes.length).toBe(0);
-  });
-});
-
-describe("misc", () => {
-  test("constructed block as correct number of refs", () => {
-    const block = createBlock("<p><p><block-text-0/></p><block-text-1/></p>");
-    const tree = block(["a", "b"]);
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<p><p>a</p>b</p>");
-    expect((tree as any).refs.length).toBe(2);
-  });
-
-  test("block vnode can be used as text", () => {
-    const block = createBlock("<p>a</p>");
-    mount(text(block() as any), fixture);
-    expect(fixture.textContent).toBe("<p>a</p>");
-  });
-
-  test("block vnode can be used to represent a <tr>", () => {
-    const block = createBlock("<tr><td>tomato</td></tr>");
-    const tree = block();
-    const fixture = document.createElement("table");
-    mount(tree, fixture);
-    expect(fixture.outerHTML).toBe("<table><tr><td>tomato</td></tr></table>");
-  });
-
-  test("block vnode with <tr> can be used as text ", () => {
-    const block = createBlock("<tr><td>tomato</td></tr>");
-    mount(text(block() as any), fixture);
-    expect(fixture.textContent).toBe("<tr><td>tomato</td></tr>");
-  });
-
-  test("call toString for function/objects if used as inline text in block", () => {
-    const block = createBlock("<p><block-text-0/><block-text-1/></p>");
-    const f = () => 3;
-    const g = () => 4;
-    g.toString = () => "tostring";
-    mount(block([f, g]), fixture);
-    expect(fixture.innerHTML).toBe("<p>() =&gt; 3tostring</p>");
-  });
-
-  test("block with 2 subblocks: variation", async () => {
-    const block = createBlock("<a><b><c><block-child-0/>2</c></b><block-child-1/></a>");
-    const tree = block([], [text("1"), text("3")]);
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe("<a><b><c>12</c></b>3</a>");
-  });
-
-  test("block with 2 subblocks: another variation", async () => {
-    const block = createBlock(
-      `<a block-attribute-0="hello"><b><c><block-child-0/>2</c></b><block-child-1/></a>`
-    );
-    const tree = block(["world"], [text("1"), text("3")]);
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe(`<a hello="world"><b><c>12</c></b>3</a>`);
-  });
-
-  test("namespace is not propagated to siblings", () => {
-    const block = createBlock(`<div><svg block-ns="someNameSpace"><g/></svg><div></div></div>`);
-
-    const fixture = makeTestFixture();
-    mount(block(), fixture);
-
-    expect(fixture.innerHTML).toBe("<div><svg><g></g></svg><div></div></div>");
-    expect(fixture.querySelector("svg")!.namespaceURI).toBe("someNameSpace");
-    expect(fixture.querySelector("g")!.namespaceURI).toBe("someNameSpace");
-    const allDivs = fixture.querySelectorAll("div");
-    expect(Array.from(allDivs).map((el) => el.namespaceURI)).toEqual([
-      "http://www.w3.org/1999/xhtml",
-      "http://www.w3.org/1999/xhtml",
-    ]);
-  });
-
-  //     test.skip("reusing a block skips patching process", async () => {
-  //       const block = createBlock('<div><block-text-0/></div>');
-  //       const foo = block(["foo"]);
-  //       const bar = block(["bar"]);
-  //       let fooCounter = 0;
-  //       let barCounter = 0;
-  //       let fooValue = "foo";
-  //       let barValue = "bar";
-  //       Object.defineProperty(foo.data, 0, {
-  //         get() {
-  //           fooCounter++;
-  //           return fooValue;
-  //         },
-  //       });
-  //       Object.defineProperty(bar.data, 0, {
-  //         get() {
-  //           barCounter++;
-  //           return barValue;
-  //         },
-  //         set(val) {
-  //           barValue = val;
-  //         },
-  //       });
-
-  //       const bdom = multi([foo, bar]);
-  //       mount(bdom, fixture);
-  //       expect(fooCounter).toBe(1);
-  //       expect(barCounter).toBe(1);
-  //       expect(fixture.innerHTML).toBe("<div>foo</div><div>bar</div>");
-
-  //       patch(bdom, multi([foo, block(["otherbar"])]));
-  //       expect(fixture.innerHTML).toBe("foootherbar");
-  //       expect(fooCounter).toBe(1);
-  //       expect(barCounter).toBe(2);
-  //     });
-});

tests/blockdom/block_attributes.test.ts

@@ -1,203 +0,0 @@
-import { mount, patch, createBlock } from "../../src/runtime/blockdom";
-import { makeTestFixture } from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-test("simple attribute", async () => {
-  const block = createBlock('<div block-attribute-0="hello"></div>');
-  const tree = block(["world"]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
-
-  patch(tree, block(["owl"]));
-  expect(fixture.innerHTML).toBe(`<div hello="owl"></div>`);
-});
-
-test("updating attribute with falsy value", async () => {
-  const block = createBlock('<div block-attribute-0="hello"></div>');
-  const tree = block([false]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-
-  patch(tree, block(["owl"]));
-  expect(fixture.innerHTML).toBe(`<div hello="owl"></div>`);
-
-  patch(tree, block([false]));
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-
-  patch(tree, block(["owl"]));
-  expect(fixture.innerHTML).toBe(`<div hello="owl"></div>`);
-
-  patch(tree, block([undefined]));
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-});
-
-test("dynamic attribute (pair)", async () => {
-  const block = createBlock('<div block-attributes="0"></div>');
-  const tree = block([["hello", "world"]]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
-
-  patch(tree, block([["ola", "mundo"]]));
-  expect(fixture.innerHTML).toBe(`<div ola="mundo"></div>`);
-});
-
-test("dynamic attribute (pair, with false value)", async () => {
-  const block = createBlock('<div block-attributes="0"></div>');
-  const tree = block([["hello", false]]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-
-  patch(tree, block([["hello", "world"]]));
-  expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
-
-  patch(tree, block([["hello", false]]));
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-});
-
-test("dynamic attribute (object)", async () => {
-  const block = createBlock('<div block-attributes="0"></div>');
-  const tree = block([{ hello: "world" }]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
-
-  patch(tree, block([{ ola: "mundo" }]));
-  expect(fixture.innerHTML).toBe(`<div ola="mundo"></div>`);
-});
-
-test("dynamic attribute (object), with falsy values", async () => {
-  const block = createBlock('<div block-attributes="0"></div>');
-  const tree = block([{ hello: "world", blip: false }]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
-
-  patch(tree, block([{ ola: "mundo", blip: undefined }]));
-  expect(fixture.innerHTML).toBe(`<div ola="mundo"></div>`);
-
-  patch(tree, block([{ ola: false, blip: 1 }]));
-  expect(fixture.innerHTML).toBe(`<div blip="1"></div>`);
-
-  patch(tree, block([{ ola: undefined, blip: undefined }]));
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-});
-
-test("class attribute", async () => {
-  const block = createBlock('<div block-attribute-0="class"></div>');
-  const tree = block(["fire"]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div class="fire"></div>`);
-
-  patch(tree, block(["water"]));
-  expect(fixture.innerHTML).toBe(`<div class="water"></div>`);
-
-  patch(tree, block([""]));
-  expect(fixture.innerHTML).toBe(`<div class=""></div>`);
-
-  patch(tree, block([0]));
-  expect(fixture.innerHTML).toBe(`<div class="0"></div>`);
-});
-
-test("attribute with undefined value", async () => {
-  const block = createBlock('<div block-attribute-0="abc"></div>');
-  const tree = block([undefined]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-});
-
-test("class attribute with undefined value", async () => {
-  const block = createBlock('<div block-attribute-0="class"></div>');
-  const tree = block([undefined]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div></div>`);
-});
-
-test("class attribute (with a preexisting value", async () => {
-  const block = createBlock('<div class="tomato" block-attribute-0="class"></div>');
-  const tree = block(["potato"]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe(`<div class="tomato potato"></div>`);
-
-  patch(tree, block(["squash"]));
-  expect(fixture.innerHTML).toBe(`<div class="tomato squash"></div>`);
-
-  patch(tree, block([""]));
-  expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
-});
-
-describe("properties", () => {
-  test("input with value attribute", () => {
-    // render input with initial value
-    const block = createBlock(`<input block-attribute-0="value"/>`);
-
-    const tree = block(["zucchini"]);
-    mount(tree, fixture);
-    // const bnode1 = renderToBdom(template, { v: "zucchini" });
-    // const fixture = makeTestFixture();
-    // mount(bnode1, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("zucchini");
-
-    // change value manually in input, to simulate user input
-    input.value = "tomato";
-    expect(input.value).toBe("tomato");
-
-    // rerender with a different value, and patch actual dom, to check that
-    // input value was properly reset by owl
-    patch(tree, block(["potato"]));
-    expect(input.value).toBe("potato");
-  });
-
-  test("input with value attribute, and falsy value given", () => {
-    const block = createBlock(`<input block-attribute-0="value"/>`);
-
-    const tree = block([undefined]);
-    mount(tree, fixture);
-    const input = fixture.querySelector("input")!;
-    expect(input.value).toBe("");
-
-    patch(tree, block([null]));
-    expect(input.value).toBe("");
-
-    patch(tree, block([0]));
-    expect(input.value).toBe("0");
-
-    patch(tree, block([""]));
-    expect(input.value).toBe("");
-
-    patch(tree, block([false]));
-    expect(input.value).toBe("");
-  });
-
-  test("input type=checkbox with checked attribute", () => {
-    // render input with initial value
-    const block = createBlock(`<input type="checkbox" block-attribute-0="checked"/>`);
-
-    const tree = block([true]);
-    mount(tree, fixture);
-    expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
-    const input = fixture.querySelector("input")!;
-    expect(input.checked).toBe(true);
-  });
-});

tests/blockdom/block_event_handling.test.ts

@@ -1,273 +0,0 @@
-import { mount, createBlock, multi, config, patch } from "../../src/runtime/blockdom";
-// import { defaultHandler, setupMainHandler } from "../../src/bdom/block";
-import { makeTestFixture } from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-let initialHandler = config.mainEventHandler;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  config.mainEventHandler = initialHandler;
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-test("simple event handling, with function", async () => {
-  const block = createBlock('<div block-handler-0="click"></div>');
-  let n = 0;
-  const tree = block([() => n++]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
-  expect(n).toBe(0);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(n).toBe(1);
-});
-
-test("simple event handling, with function and argument", async () => {
-  const block = createBlock('<div block-handler-0="click"></div>');
-  let n = 0;
-  const onClick = (arg: number) => {
-    n += arg;
-  };
-  const tree = block([[onClick, 3]]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
-  expect(n).toBe(0);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(n).toBe(3);
-
-  patch(tree, block([[onClick, 5]]));
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(n).toBe(8);
-});
-
-test("simple event handling ", async () => {
-  config.mainEventHandler = (data, ev) => {
-    if (typeof data === "function") {
-      data();
-    } else {
-      const [owner, method] = data;
-      owner[method]();
-    }
-    return false;
-  };
-
-  const block = createBlock('<div block-handler-0="click"></div>');
-  let n = 0;
-  const obj = { f: () => n++ };
-  const tree = block([[obj, "f"]]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
-  expect(n).toBe(0);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(n).toBe(1);
-});
-
-test("can bind two handlers on same node", async () => {
-  const block = createBlock('<div block-handler-0="click" block-handler-1="dblclick"></div>');
-  let steps: string[] = [];
-  let handleClick = () => steps.push("click");
-  let handleDblClick = () => steps.push("dblclick");
-  const tree = block([handleClick, handleDblClick]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  (fixture.firstChild as HTMLDivElement).click();
-  (fixture.firstChild as HTMLDivElement).dispatchEvent(new Event("dblclick", { bubbles: true }));
-  expect(steps).toEqual(["click", "dblclick"]);
-});
-
-test("two same block nodes with different handlers", async () => {
-  const block = createBlock('<div block-handler-0="click"></div>');
-  let steps: string[] = [];
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = multi([block([handler1]), block([handler2])]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div><div></div>");
-
-  (fixture.firstChild as HTMLDivElement).click();
-  (fixture.firstChild!.nextSibling as HTMLDivElement).click();
-  expect(steps).toEqual(["1", "2"]);
-});
-
-test("two same block nodes with different handlers (synthetic)", async () => {
-  const block = createBlock('<div block-handler-0="click.synthetic"></div>');
-  let steps: string[] = [];
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = multi([block([handler1]), block([handler2])]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div><div></div>");
-
-  (fixture.firstChild as HTMLDivElement).click();
-  (fixture.firstChild!.nextSibling as HTMLDivElement).click();
-  expect(steps).toEqual(["1", "2"]);
-});
-
-test("two event handlers on same event", async () => {
-  const block = createBlock('<div block-handler-0="click" block-handler-1="click"></div>');
-  let n = 0;
-  let m = 0;
-  const tree = block([() => m++, () => n++]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  expect(m).toBe(0);
-  expect(n).toBe(0);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(m).toBe(1);
-  expect(n).toBe(1);
-});
-
-test("two synthetic event handlers on same event", async () => {
-  const block = createBlock(
-    '<div block-handler-0="click.synthetic" block-handler-1="click.synthetic"></div>'
-  );
-  let n = 0;
-  let m = 0;
-  const tree = block([() => m++, () => n++]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  expect(m).toBe(0);
-  expect(n).toBe(0);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(m).toBe(1);
-  expect(n).toBe(1);
-});
-
-test("synthetic and native handlers can cohabitate", async () => {
-  const block = createBlock(
-    '<div block-handler-0="click.synthetic"><div block-handler-1="click"/></div>'
-  );
-  let steps: string[] = [];
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = block([handler1, handler2]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div><div></div></div>");
-
-  (fixture.firstChild!.firstChild as HTMLDivElement).click();
-  expect(steps).toEqual(["2", "1"]);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(steps).toEqual(["2", "1", "1"]);
-});
-
-test("synthetic and native handlers can cohabitate (2)", async () => {
-  const block = createBlock(
-    '<div block-handler-0="click"><div block-handler-1="click.synthetic"/></div>'
-  );
-  let steps: string[] = [];
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = block([handler1, handler2]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div><div></div></div>");
-
-  (fixture.firstChild!.firstChild as HTMLDivElement).click();
-  expect(steps).toEqual(["1", "2"]);
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(steps).toEqual(["1", "2", "1"]);
-});
-
-test("synthetic and native handlers can cohabitate (3)", async () => {
-  const parent = createBlock(`<div block-handler-0="click"><block-child-0/><block-child-1/></div>`);
-  const block = createBlock('<div block-handler-0="click"/>');
-  const blockSynth = createBlock('<div block-handler-0="click.synthetic"/>');
-  let steps: string[] = [];
-  const handler0 = () => steps.push("0");
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = parent([handler0], [block([handler1]), blockSynth([handler2])]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div><div></div><div></div></div>");
-
-  const children = fixture.children[0].children;
-
-  (children[0] as HTMLElement).click();
-  expect(steps).toEqual(["1", "0"]);
-  (children[1] as HTMLElement).click();
-  expect(steps).toEqual(["1", "0", "0", "2"]);
-});
-
-test("synthetic and native handlers can cohabitate (4)", async () => {
-  const parent = createBlock(`<div block-handler-0="click"><block-child-0/><block-child-1/></div>`);
-  const block = createBlock('<div block-handler-0="click"/>');
-  const blockSynth = createBlock('<div block-handler-0="click.synthetic"/>');
-  let steps: string[] = [];
-  const handler0 = (ev: Event) => {
-    steps.push("0");
-    ev.stopPropagation();
-  };
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = parent([handler0], [block([handler1]), blockSynth([handler2])]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div><div></div><div></div></div>");
-
-  const children = fixture.children[0].children;
-
-  (children[0] as HTMLElement).click();
-  expect(steps).toEqual(["1", "0"]);
-  (children[1] as HTMLElement).click();
-  expect(steps).toEqual(["1", "0", "0"]);
-});
-
-test("synthetic and native handlers can cohabitate (5)", async () => {
-  const block = createBlock('<div block-handler-0="click.synthetic" block-handler-1="click"/>');
-  let steps: string[] = [];
-  let handler1 = () => steps.push("1");
-  let handler2 = () => steps.push("2");
-  const tree = block([handler1, handler2]);
-
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(steps).toEqual(["2", "1"]);
-});
-
-test("synthetic and native handlers can cohabitate (6)", async () => {
-  const block = createBlock(`<div
-    block-handler-0="click.synthetic"
-    block-handler-1="click"
-    block-handler-2="click.synthetic"
-    block-handler-3="click"
-  />`);
-  let steps: string[] = [];
-  const handler1 = () => steps.push("1");
-  const handler2 = () => steps.push("2");
-  const handler3 = () => steps.push("3");
-  const handler4 = () => steps.push("4");
-  const tree = block([handler1, handler2, handler3, handler4]);
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div></div>");
-
-  (fixture.firstChild as HTMLDivElement).click();
-  expect(steps).toEqual(["2", "4", "1", "3"]);
-});

tests/blockdom/block_refs.test.ts

@@ -1,70 +0,0 @@
-import { createBlock, mount, patch, remove } from "../../src/runtime/blockdom";
-import { logStep } from "../helpers";
-import { makeTestFixture } from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-test("simple callback ref", async () => {
-  const block = createBlock('<div><span block-ref="0">hey</span></div>');
-  let arg: any = undefined;
-  let n = 0;
-  const refFn = (_arg: any) => {
-    n++;
-    arg = _arg;
-  };
-
-  const tree = block([refFn]);
-
-  expect(arg).toBeUndefined();
-  expect(n).toBe(0);
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
-  expect(n).toBe(1);
-
-  expect(arg).toBeInstanceOf(HTMLSpanElement);
-  expect(arg!.innerHTML).toBe("hey");
-
-  patch(tree, block([refFn]));
-  expect(n).toBe(1);
-
-  remove(tree);
-  expect(fixture.innerHTML).toBe("");
-  expect(arg).toBeNull();
-  expect(n).toBe(2);
-});
-
-test("is in dom when callback is called", async () => {
-  expect.assertions(1);
-  const block = createBlock('<div><span block-ref="0">hey</span></div>');
-  const refFn = (span: any) => {
-    expect(document.body.contains(span)).toBeTruthy();
-  };
-
-  const tree = block([refFn]);
-
-  mount(tree, fixture);
-});
-
-test("callback ref in callback ref with same block", async () => {
-  const block = createBlock('<p block-ref="0"><block-text-1/><block-child-0/></p>');
-  let refFn = (el: HTMLParagraphElement) => logStep(el.outerHTML);
-
-  const child = block([refFn, "child"], []);
-  const parent = block([refFn, "parent"], [child]);
-  mount(parent, fixture);
-
-  expect(fixture.innerHTML).toBe("<p>parent<p>child</p></p>");
-  expect(["<p>child</p>", "<p>parent<p>child</p></p>"]).toBeLogged();
-});

tests/blockdom/comment.test.ts

@@ -1,26 +0,0 @@
-import { comment, mount } from "../../src/runtime/blockdom";
-import { makeTestFixture } from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-test("simple comment node", async () => {
-  const tree = comment("foo");
-  expect(tree.el).toBe(undefined);
-  mount(tree, fixture);
-  expect(fixture.innerHTML).toBe("<!--foo-->");
-  expect(tree.el).not.toBe(undefined);
-  tree.remove();
-  expect(fixture.innerHTML).toBe("");
-});