PROTOTYPE: batch renders in animation frame instead of microtick

closes #850

.github/workflows/deploy.yml

@@ -0,0 +1,28 @@
+# 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,5 +1,6 @@
 /node_modules
 /dist
+
 npm-debug.log
 
 # misc
@@ -14,5 +15,20 @@ 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

CHANGELOG.md

@@ -0,0 +1,801 @@
+# 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))
+
+
+
+**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))
+- breaking: `t-on` does not work on components any more ([details](#12-t-on-does-not-work-on-components-any-more))
+- 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 `Memo` component
+- 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.
+
+Migration code: remove the `shouldUpdate` methods. Then, maybe the following
+ideas may help:
+
+- try to organize the state/architecture to minimize the number of state updates
+- take advantage of the finer reactivity system. For example, if we have a list
+  of items, with a component for each item, we can write this:
+
+  ```js
+  class Item extends Component {
+      setup() {
+          this.item = useState(this.props.item); // and only use this, not props.item
+      }
+  }
+  ```
+  Doing so will make it that each `Item` component will register itself as an
+  observer of its own item, and will be the only component being rerendered when
+  its item object is updated.
+- use the `Memo` component to wrap some piece of template. `Memo` memoize its
+  content, and only update itself if its props are different (shallow comparison):
+  
+  ```xml
+    <Memo a="state.a" b="state.b"> 
+        <t t-esc="state.a"/>
+        <t t-esc="state.b"/>
+        <t t-esc="state.c"/>
+    </Memo>
+  ```
+
+### 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)
+
+
+### 12. `t-on` does not work on components any more
+
+In owl 1, it was possible to bind an event listener on a component tag in a
+template:
+
+```xml
+<SomeComponent t-on-some-event="doSomething"/>
+```
+
+This does not work any more.
+
+Rationale: with the support of fragments, there is no longer a canonical html
+element that we can refer. So, this makes it difficult to implement correctly
+and efficiently. Also, we noticed in practice that the event system was an issue
+in some cases, when components need to communicate before they are mounted. In
+those cases, the better solution is to directly use a callback.  Also, another
+conceptual issue with this is that it kind of breaks the component encapsulation.
+The child component kind of leak its own implementation to the outside world.
+
+Migration: a quick fix that may work in some cases is to simply bind the event
+handler on a parent htmlelement. A better way to do it, if possible, is to change
+the component API to accept explicitely a callback as props. 
+
+```xml
+<SomeComponent onSomeEvent="doSomething"/>
+<!-- or alternatively: -->
+<SomeComponent onSomeEvent.bind="doSomething"/>
+```
+
+Note that one of the example above uses the `.bind` suffix, to bind the function
+prop to the component.  Most of the time, binding the function is necessary, and
+using the `.bind` suffix is very helpful in that case.
+
+Documentation: [Binding function props](doc/reference/props.md#binding-function-props)
+
+### 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).

COPYRIGHT

@@ -0,0 +1,14 @@
+
+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,12 +1,9 @@
-
-For copyright information, please see the COPYRIGHT file.
-
-Odoo is published under the GNU LESSER GENERAL PUBLIC LICENSE, Version 3
+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 Odoo may be published
+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.
 

README.md

@@ -1,74 +1,125 @@
-<h1 align="center">🦉 Odoo Web Library 🦉</h1>
+<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 small 
-UI framework intended to be the basis for the [Odoo](https://www.odoo.com/) Web Client, and hopefully many
-other Odoo related projects. OWL's two key features are:
+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, with QWeb as a template engine, asynchronous rendering, and an underlying virtual dom,
-- and a store (state management solution, loosely inspired by VueX and React/Redux).
+- a declarative component system,
+- a fine grained reactivity system similar to Vue,
+- hooks
+- fragments
+- asynchronous rendering
 
-If you are interested, you can find a discussion on what makes OWL different
-from React and Vue [here](doc/comparison.md)
+Owl components are defined with ES6 classes and xml templates, uses an
+underlying virtual DOM, integrates beautifully with hooks, and the rendering is
+asynchronous.
 
-## Try it online!
+Quick links:
 
-An online playground is available at [https://odoo.github.io/owl/](https://odoo.github.io/owl/) to let you experiment with the OWL framework.
+- [documentation](#documentation),
+- [changelog](CHANGELOG.md) (from Owl 1.x to 2.x),
+- [playground](https://odoo.github.io/owl/playground)
 
-# Example
+## Example
 
-Here is a short example to illustrate interactive widgets:
+Here is a short example to illustrate interactive components:
 
 ```javascript
-class ClickCounter extends owl.Component {
-  inlineTemplate = `
-    <button t-on-click="increment">
+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>`;
 
-  constructor(parent, props) {
-    super(parent, props);
-    this.state = { value: 0 };
-  }
-
-  increment() {
-    this.state.value++;
-  }
+  state = useState({ value: 0 });
 }
 
-const qweb = new owl.QWeb();
-const counter = new ClickCounter({qweb});
-counter.mount(document.body);
+class Root extends Component {
+  static template = xml`
+    <span>Hello Owl</span>
+    <Counter increment="2"/>`;
+
+  static components = { Counter };
+}
+
+mount(Root, document.body);
 ```
 
-More interesting examples can be found on the [playground](https://odoo.github.io/owl/) application.
+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.
 
-## Installing/Building
-
-If you want to use a simple `<script>` tag, the last release can be downloaded here:
-
-- [owl-0.8.0.js](https://odoo.github.io/owl/releases/owl-0.8.0.js)
-- [owl-0.8.0.min.js](https://odoo.github.io/owl/releases/owl-0.8.0.min.js)
-
-Some npm scripts are available:
-
-| Command              | Description                                        |
-| -------------------- | -------------------------------------------------- |
-| `npm install`        | install every dependency required for this project |
-| `npm run build`      | build a bundle of _owl_ in the _/dist/_ folder     |
-| `npm run minify`     | minify the prebuilt owl.js file                    |
-| `npm run test`       | run all tests                                      |
-| `npm run test:watch` | run all tests, and keep a watcher                  |
+More interesting examples can be found on the
+[playground](https://odoo.github.io/owl/playground) application.
 
 ## Documentation
 
-The complete documentation can be found [here](doc/readme.md). The most important sections are:
+### Learning Owl
 
-- [Quick Start](doc/quick_start.md)
-- [Component](doc/component.md)
-- [Store](doc/store.md)
+Are you new to Owl? This is the place to start!
 
-## License
+- [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)
+- [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)
+- [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)
+
+## 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-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
 
-OWL is [GPL licensed](./LICENSE).

doc/comparison.md

@@ -1,194 +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, some
-effort was done 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.
-
-- [Size](#size)
-- [Tooling/Build Step](#toolingbuild-step)
-- [Templating](#templating)
-- [Asynchronous rendering](#asynchronous-rendering)
-- [Reactiveness](#reactiveness)
-- [State Management](#state-management)
-
-### 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) | Size (minified, gzipped) |
-| ------------------------ | --------------- | ------------------------ |
-| OWL                      | 32kb            | 11kb                     |
-| Vue + VueX               |                 | 30kb                     |
-| React + ReactDOM + Redux |                 | 40kb                     |
-| jQuery                   | 86kb            | 30kb                     |
-
-### 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.
-
-### 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.
-
-```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!
-
-### 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 widget 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 widget may want to fetch an external
-library (a calendar widget may need a specialized calendar rendering library),
-in its willStart hook.
-
-```javascript
-class MyCalendarWidget 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.
-
-### Reactiveness
-
-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 a counter whenever it changes (and a _deep_ counter for each of
-its parents). This assumes that the state is actually a tree.
-
-### State Management
-
-Managing the state of an application is a tricky issue. Many solutions have
-been proposed these last few years. It also depends on the kind of application we
-are talking about. A small application may not need much more than a simple
-object to contain its state.
-
-However, there are some common solutions for React and Vue: redux and vuex.
-Both of them are a centralized store that own the state, and they dictate how
-the state can be mutated.
-
-**Redux**
-
-In Redux, the state is mutated by reducers. Reducers are functions
-that modify the state by returning a different object:
-
-```javascript
-  ...
-  switch (action.type) {
-    case ADD_TODO: {
-      const { id, content } = action.payload;
-      return {
-        ...state,
-        allIds: [...state.allIds, id],
-        byIds: {
-          ...state.byIds,
-          [id]: {
-            content,
-            completed: false
-          }
-        }
-      };
-    }
-```
-
-This is a little bit awkward to write, but this allows the component system to
-check if a part of the state was changed. This is exactly what is done by the
-`connect` function: it create a _connected_ component, which is subscribed to
-the state and triggers a rerender if some part of the state was modified.
-
-**VueX**
-
-VueX is based on a different principle: the state is mutated through
-some special functions (the mutations), which modify the state in place:
-
-```javascript
-    function ({state}, payload) {
-        const { id, content } = payload;
-        const message = {id, content, completed: false};
-        state.messages.push(message)
-    }
-```
-
-This is simpler, but there is a little bit more happening behind the scene:
-each key from the state is silently replaced by getters and setters, and VueX
-keeps track of who get data, and retrigger a render when it was changed.
-
-**Owl**
-
-Owl store is a little bit like a mix of redux and vuex: it has mutations and
-actions, like VueX, it keeps track of the state changes, but it does not notify
-a component when the state changes.  Instead, components need to connect to the
-store like in redux, with a function that will listen to the relevant state.

doc/component.md

@@ -1,126 +0,0 @@
-# Component
-
-The component system is designed to be:
-
-1. **declarative:** the user interface should be described in term of the state
-   of the application, not as a sequence of imperative steps.
-
-2. **composable:** each widget can seamlessly be created in a parent widget by
-   a simple directive in its template.
-
-3. **asynchronous rendering:** the framework will transparently wait for each
-   subwidgets to be ready before applying the rendering. It uses native promises
-   under the hood.
-
-4. **uses QWeb as a template system:** the templates are described in XML
-   and follow the QWeb specification. This is a requirement for Odoo.
-
-Components are the reusable, composable widgets. They are designed to be low
-level, to be declarative, and with asynchronous rendering.
-
-For example:
-
-```javascript
-export class Counter extends Component {
-  template = "counter";
-  state = { counter: 0 };
-
-  constructor(parent, props) {
-    super(parent, props);
-    this.state.counter = props.initialState || 0;
-  }
-
-  increment(delta) {
-    this.state.counter += delta;
-  }
-}
-```
-
-```xml
-    <div t-name="counter">
-      <button t-on-click="increment(-1)">-</button>
-      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-      <button t-on-click="increment(1)">+</button>
-    </div>`;
-```
-
-## Lifecycle
-
-A solid and robust component system needs useful hooks/methods to help
-developers write components. Here is a description of the lifecycle of a owl
-component:
-
-- **[constructor](#constructor)**
-- **[willStart](#willStart)**
-- **[mounted](#mounted)**
-- **[willPatch](#willPatch)**
-- **[updated](#updated)**
-- **[willUnmount](#willUnmount)**
-
-Note: no hook method should ever be called manually. They are supposed to be
-called by the owl framework whenever it is required.
-
-### constructor
-
-The constructor is not exactly a hook, it is the constructor of the component.
-
-### willStart
-
-willStart is an asynchronous hook that can be implemented to perform some
-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 widget is rendered. Another use case is to load data from a server.
-
-Note that a slow willStart method will slow down the rendering of the user
-interface. Therefore, some effort should be made to make this method as
-fast as possible.
-
-### mounted
-
-mounted is a hook that is called each time a component is attached to the
-DOM. 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
-be unmounted at some point.
-
-### willUpdateProps
-
-The willUpdateProps is an asynchronous hook, called just before new props
-are set. This is useful if the component needs some asynchronous task
-performed, depending on the props (for example, assuming that the props are
-some record Id, fetching the record data).
-
-This hook is not called during the first render (but willStart is called
-and performs a similar job).
-
-### 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 get some
-information which are in the DOM. For example, the current position of the
-scrollbar
-
-### patched
-
-This hook is called whenever a component did actually update its props,
-state or env.
-
-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.
-
-Updating the widget state in this hook is possible, but not encouraged.
-One need to be careful, because updates here will cause rerender, which in
-turn will cause other calls to patched. So, we need to be particularly
-careful at avoiding endless cycles.
-
-### 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 some listeners, for example.
-
-This is the opposite method of _mounted_. The _willUnmount_ method will be
-called in reverse order: first the children, then the parents.

doc/learning/how_to_test.md

@@ -0,0 +1,95 @@
+# 🦉 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

@@ -0,0 +1,399 @@
+# 🦉 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

@@ -0,0 +1,992 @@
+# 🦉 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.title"/></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.
+
+## 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="dispatch('toggleTask', props.task.id)"/>
+<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" />
+    <script src="owl.js"></script>
+    <script src="app.js"></script>
+  </head>
+  <body></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

@@ -0,0 +1,68 @@
+# 🦉 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

@@ -0,0 +1,255 @@
+# 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/why_owl.md

@@ -0,0 +1,180 @@
+# 🦉 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/observer.md

@@ -1,2 +0,0 @@
-# Observer
-

doc/quick_start.md

@@ -1,61 +0,0 @@
-# Quick Start
-
-To build an application (or a sub-part of an application), we need two things:
-
-- an environment
-- a root widget
-
-Here are a few steps that may be useful to get started:
-
-- get the templates
-- create a qweb engine, with the templates
-- create an environment
-- create an instance of the root widget
-- mount the root widget to a DOM element
-
-## Simple example
-
-In a oversimplified example, here is what it could look like:
-
-```javascript
-const templates = await loadTemplates();
-
-const qweb = new QWeb();
-qweb.loadTemplates(templates);
-
-const env = {
-  qweb: qweb
-};
-
-const root = new RootWidget(env, { initialState: 17 });
-
-const target = document.getElementById("app");
-root.mount(target);
-```
-
-## Managing state
-
-The environment is propagated to each subchildren. So, it is convenient to use
-to give a reference to some global object. This is potentially very useful
-in a redux-like architecture:
-
-```javascript
-...
-
-const store = new Store();
-
-const env = {
-    qweb: qweb,
-    store: store,
-};
-
-const state = store.getState()
-const root = new RootWidget(env, state);
-
-store.on('state_change', nextState => {
-    root.updateProps(nextState);
-});
-
-const target = document.getElementById('app');
-root.mount(target);
-```

doc/qweb.md

@@ -1,35 +0,0 @@
-# QWeb
-
-QWeb is a template specification. The QWeb class in this repository is:
-
-- an implementation of the QWeb specification
-- which outputs a virtual dom instead of a string
-- and extended with a few extra directives
-
-## QWeb Specification
-
-add here a full description of what QWeb is supposed to be, with some examples
-
-## QWeb Implementation
-
-```javascript
-var qweb = new QWeb();
-qweb.addTemplate("sometemplate", '<div>hello <t t-esc="name"/></div>');
-
-// result is a vnode which represent <div>hello world</div>
-result = qweb.render("sometemplate", { name: "world" });
-```
-
-## QWeb extensions
-
-- t-on directive
-- t-widget, t-props, t-key
-- t-ref
-
-## Note on white spaces
-
-White spaces in a templates 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

doc/readme.md

@@ -1,14 +1,48 @@
-# Odoo Web Library Documentation
+# 🦉 Owl overview 🦉
 
+Here is a list of everything exported by the Owl library:
 
-## Reference
+Main entities:
 
-- [Component](component.md)
-- [QWeb](qweb.md)
-- [Store](store.md)
-- [Observer](observer.md)
-- [Virtual DOM](vdom.md)
+- [`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
 
-## Miscellaneous
-- [Quick Start](quick_start.md)
-- [Comparison with React/Vue](comparison.md)
+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)
+- [`whenReady`](reference/utils.md#whenready): utility function to execute code when DOM is ready

doc/reference/app.md

@@ -0,0 +1,112 @@
+# 🦉 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, which activates some additional checks (in particular, the props validation
+  code is only performed in dev mode)
+- **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
+  that Owll 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.
+
+## `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 });
+})();
+```

doc/reference/component.md

@@ -0,0 +1,450 @@
+# 🦉 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()`**: 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)
+
+## 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

@@ -0,0 +1,163 @@
+# 🦉 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/context.md

@@ -0,0 +1,105 @@
+# 🦉 Context 🦉
+
+## Content
+
+- [Overview](#overview)
+- [Example](#example)
+- [Reference](#reference)
+  - [`Context`](#context)
+  - [`useContext`](#usecontext)
+
+## Overview
+
+The `Context` object provides a way to share data between an arbitrary number
+of components. Usually, data is passed from a parent to its children component,
+but when we have to deal with some mostly global information, this can be
+annoying, since each component will need to pass the information to each children,
+even though some or most of them will not use the information.
+
+With a `Context` object, each component can subscribe (with the `useContext` hook)
+to its state, and will be updated whenever the context state is updated.
+
+## Example
+
+Assume that we have an application with various components which needs to render
+differently depending on the size of the device. Here is how we could proceed
+to make sure that the information is properly shared. First, let us create a
+context, and add it to the environment:
+
+```js
+const deviceContext = new Context({ isMobile: true });
+App.env.deviceContext = deviceContext;
+```
+
+If we want to make it completely responsive, we need to update its value whenever
+the size of the screen is updated:
+
+```js
+const isMobile = () => window.innerWidth <= 768;
+window.addEventListener(
+  "resize",
+  owl.utils.debounce(() => {
+    const state = deviceContext.state;
+    if (state.isMobile !== isMobile()) {
+      state.isMobile = !state.isMobile;
+    }
+  }, 15)
+);
+```
+
+Then, each component that want can subscribe and render differently depending on the
+fact that we are in a mobile or desktop mode.
+
+```js
+class SomeComponent extends Component {
+  static template = xml`
+    <div>
+      <t t-if=device.isMobile>
+          some simplified user interface
+      </t>
+      <t t-else="">
+          a more advanced user interface
+      </t>
+    </div>`;
+  device = useContext(this.env.deviceContext);
+}
+```
+
+## Reference
+
+### `Context`
+
+A `Context` object should be created with a state object:
+
+```js
+const someContext = new Context({ some: "key" });
+```
+
+Its state is now available in the `state` key:
+
+```js
+someContext.state.some = "other key";
+```
+
+This is the way some global code (such as the responsive code above) should
+read and update the context state. However, components should not ever read the
+context state directly from the context, they should instead use the `useContext`
+hook to properly register themselves to state changes.
+
+Note that the `Context` hook is different from the React version. For example,
+there is no concept of provider/consumer. So, the `Context` feature does not
+by itself allow the use of a different context state depending on the component
+place in the component tree. However, this functionality can be obtained, if
+necessary, with the use of sub environment.
+
+### `useContext`
+
+The `useContext` hook is the normal way for a component to register themselve
+to context state changes. The `useContext` method returns the context state:
+
+```js
+device = useContext(this.env.deviceContext);
+```
+
+It is a simple observed state (with an owl `Observer`), which contains the shared
+information.

doc/reference/environment.md

@@ -0,0 +1,76 @@
+# 🦉 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

@@ -0,0 +1,75 @@
+# 🦉 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

@@ -0,0 +1,102 @@
+# 🦉 Event Handling 🦉
+
+## Content
+
+- [Event Handling](#event-handling)
+- [Modifiers](#modifiers)
+- [Synthetic Events](#synthetic-events)
+
+## 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>
+```

doc/reference/hooks.md

@@ -0,0 +1,324 @@
+# 🦉 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. 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

@@ -0,0 +1,92 @@
+# 🦉 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

@@ -0,0 +1,17 @@
+# 🦉 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/props.md

@@ -0,0 +1,266 @@
+# 🦉 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
+- 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)
+    },
+  };
+```
+
+## 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

@@ -0,0 +1,126 @@
+# 🦉 Reactivity 🦉
+
+## Content
+
+- [Overview](#overview)
+- [`useState`](#usestate)
+- [`reactive`](#reactive)
+- [`markRaw`](#markraw)
+- [`toRaw`](#toraw)
+
+## Overview
+
+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 automatically
+update accordingly to state changes. Also, we obviously want this to happen in
+a performant way.
+
+To solve this issue, Owl provides two reactivity primitives:
+
+- `reactive`, which returns a proxy to its first argument, and tracks all read/update
+  operation going through it,
+- `useState`: a hook, that internally uses `reactive`, and is linked to its
+  owner component: any read operation will be tracked (key by key), and any
+  updates to these tracked values will cause the component to be rerendered.
+
+Most of the time, the `useState` hook is the best solution.
+
+## `useState`
+
+Let us start by an example of how `useState` could be used:
+
+```js
+class Counter extends Component {
+  static template = xml`
+    <div t-on-click="increment">
+      <t t-esc="state.value"/>
+    </div>`;
+
+  setup() {
+    this.state = useState({ value: 0 });
+  }
+
+  increment() {
+    this.state.value++;
+  }
+}
+```
+
+If one were to use a simple state object, Owl would not be aware that the value
+was changed and that the component should be rerendered. With the `useState`
+hook, `this.state` is now a reactive object, so this component works as expected.
+
+## `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 was not read
+console.log(obj.a); // log 2, and reads the 'a' key => it is now tracked
+obj.a = 3; // log 'changed' because we updated a tracked value
+```
+
+An important property of reactive objects is that they can be reobserved: this
+will create an independant 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); // log 1, and reads the 'a' key => it is now tracked by observer 1
+console.log(obj1.b); // log 2, and 'b' is now tracked by observer 1
+console.log(obj2.b); // log 2, and 'b' is now tracked by observer 1
+obj2.a = 3; // log 'observer1', because observer2 does not track a
+obj2.b = 3; // log 'observer1' and 'observer2'
+```
+
+Obviously, one can use `reactive` on the result of a `useState` if wanted, this
+is the proper way to watch for some state changes.
+
+## `markRaw`
+
+Marks an object so that it is ignored by the reactivity system. This function returns its argument.
+
+```js
+const someObject = markRaw(...);
+const state = useState({
+  a: 1,
+  obj: someObject
+});
+// here, state.obj === someObject
+```
+
+This is useful in some rare cases. For example, some complex and large object such
+that going through the reactivity system may cause a non trivial performance slowdown.
+
+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!
+
+## `toRaw`
+
+Given a reactive object, this function returns the underlying, non-reactive,
+corresponding object.
+
+```js
+// in setup
+const state = useState({ value: 1 });
+
+// later:
+const rawState = toRaw(this.state);
+rawState.value = 3; // will NOT be picked up by the reactivity system!!!
+```
+
+Here again, this is useful in some situations where we want to explicitely bypass
+Owl, but using this function means that the responsability of coordinating
+state update is given to the user code, instead of Owl. Subtle bugs may arise!
+
+Also, normal (non-reactive objects) will be directly returned by `toRaw`:
+
+```js
+const obj = { a: 1 };
+console.log(toRaw(obj) === obj); // true
+```

doc/reference/refs.md

@@ -0,0 +1,37 @@
+# 🦉 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

@@ -0,0 +1,254 @@
+# 🦉 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">
+```
+
+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

@@ -0,0 +1,693 @@
+# 🦉 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.
+
+```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 -->
+```
+
+### 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

@@ -0,0 +1,70 @@
+# 🦉 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

@@ -0,0 +1,58 @@
+# 🦉 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
+
+## `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
+```

doc/store.md

@@ -1,8 +0,0 @@
-# OWL: State Management
-
-Managing the state in an application is not an easy task. Many different
-architectures/designs/systems/... have been created. We propose here to use
-the idea of a central store.
-
-- Store
-- connect

doc/vdom.md

@@ -1,3 +0,0 @@
-# VDom
-
-todo

package.json

@@ -1,54 +1,74 @@
 {
-  "name": "owl",
-  "version": "0.8.0",
+  "name": "@odoo/owl",
+  "version": "2.0.0-alpha.2",
   "description": "Odoo Web Library (OWL)",
-  "main": "src/index.ts",
+  "main": "dist/owl.cjs.js",
+  "browser": "dist/owl.iife.js",
+  "module": "dist/owl.es.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=12.18.3"
+  },
   "scripts": {
-    "build:js": "tsc --target esnext --module es6 --outDir dist/owl src/*",
-    "build:js:es5": "tsc --target es5 --module es6 --outDir dist/owl src/*",
-    "build:bundle": "rollup -c",
-    "build": "npm run build:js && npm run build:bundle",
-    "build:es5": "npm run build:js:es5 && npm run build:bundle",
-    "minify": "uglifyjs dist/owl.js -o dist/owl.min.js --compress --mangle",
-    "dev": "npm-run-all --parallel \"build:* -- --watch\"",
+    "build:bundle": "rollup -c --failAfterWarnings",
+    "build": "npm run build:bundle",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "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"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/odoo/owl.git"
   },
   "author": "Odoo",
-  "license": "GPL-3.0-or-later",
+  "license": "LGPL-3.0-only",
   "bugs": {
     "url": "https://github.com/odoo/owl/issues"
   },
   "homepage": "https://github.com/odoo/owl#readme",
   "devDependencies": {
-    "@types/jest": "^23.3.12",
+    "@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",
-    "jest": "^23.6.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",
-    "rollup": "^1.6.0",
-    "rollup-plugin-typescript2": "^0.20.1",
+    "prettier": "2.4.1",
+    "rollup": "^2.56.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.31.1",
     "sass": "^1.16.1",
-    "snabbdom-to-html": "^5.1.1",
     "source-map-support": "^0.5.10",
-    "ts-jest": "^23.10.5",
-    "typescript": "^3.2.2",
+    "ts-jest": "^27.0.5",
+    "typescript": "4.5.2",
     "uglify-es": "^3.3.9"
   },
-  "dependencies": {
-    "jest-environment-jsdom": "^24.7.1",
-    "snabbdom": "^0.7.3"
-  },
   "jest": {
+    "testEnvironment": "jsdom",
     "roots": [
       "<rootDir>/src",
       "<rootDir>/tests"
     ],
+    "setupFiles": [
+      "./tests/mocks/mockEventTarget.js"
+    ],
     "transform": {
       "^.+\\.ts?$": "ts-jest"
     },
@@ -62,5 +82,9 @@
       "json",
       "node"
     ]
+  },
+  "prettier": {
+    "printWidth": 100,
+    "endOfLine": "auto"
   }
 }

roadmap.md

@@ -0,0 +1,28 @@
+# 🦉 OWL Roadmap 🦉
+
+- Current version: 1.4.10
+- Status: stable
+
+This roadmap is only an attempt at predicting Owl's future.  Everything may
+change!
+
+
+### 1.x
+
+- add chrome and firefox devtools,
+- fix every bugs,
+- improve documentation,
+- small backward compatible improvements.
+
+### 2.x (2020? 2021? 2022?)
+
+- stop support for `t-set` directive to define the content of a slot
+
+Maybe:
+
+- reimplement vdom to use *block* system, like Vue 3, which should make Owl
+  much faster
+- refactor `QWeb` to use an intermediate representation (some kind of AST) to
+  allow additional optimisations.
+
+

rollup.config.js

@@ -1,14 +1,71 @@
-import { version } from "./package.json";
+import pkg from "./package.json";
 import git from "git-rev-sync";
+import typescript from 'rollup-plugin-typescript2';
+import { terser } from "rollup-plugin-terser";
+
+const name = "owl";
+const extend = true;
+
+/**
+ * Meta data to be added on the __info__ object.
+ * Used to let external tools know the current owl version.
+ */
+const outro = `
+__info__.version = '${pkg.version}';
+__info__.date = '${new Date().toISOString()}';
+__info__.hash = '${git.short()}';
+__info__.url = 'https://github.com/odoo/owl';
+`;
+
+/**
+ * Generate from a string depicting a path a new path for the minified version.
+ * @param {string} pkgFileName file name
+ */
+function generateMinifiedNameFromPkgName(pkgFileName) {
+  const parts = pkgFileName.split('.');
+  parts.splice(parts.length - 1, 0, "min");
+  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, minified = false) {
+  return {
+    file: minified ? generateMinifiedNameFromPkgName(generatedFileName) : generatedFileName,
+    format: format,
+    name: name,
+    extend: extend,
+    outro: outro,
+    freeze: false,
+    plugins: minified ? [terser()] : [],
+    indent: '    ', // indent with 4 spaces
+  };
+}
 
-// rollup.config.js
 export default {
-  input: "dist/owl/index.js",
-  output: {
-    file: "dist/owl.js",
-    format: "iife",
-    name: "owl",
-    extend: true,
-    outro: `exports._version = '${version}';\nexports._date = '${new Date().toISOString()}';\nexports._hash = '${git.short()}';\nexports._url = 'https://github.com/odoo/owl';`
-  }
+  input: "src/index.ts",
+  output: [
+
+    /**
+     * Read about module formats:
+     *  https://auth0.com/blog/javascript-module-systems-showdown/
+     *  https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
+     */
+
+    getConfigForFormat('esm', pkg.module),
+    getConfigForFormat('esm', pkg.module, true),
+    getConfigForFormat('cjs', pkg.main),
+    getConfigForFormat('cjs', pkg.main, true),
+    getConfigForFormat('iife', pkg.browser),
+    getConfigForFormat('iife', pkg.browser, true),
+  ],
+  plugins: [
+    typescript({
+      useTsconfigDeclarationDir: true
+    }),
+  ]
 };

src/app/app.ts

@@ -0,0 +1,111 @@
+import { Component, ComponentConstructor } from "../component/component";
+import { ComponentNode } from "../component/component_node";
+import { MountOptions } from "../component/fibers";
+import { Scheduler } from "../component/scheduler";
+import { TemplateSet, TemplateSetConfig } from "./template_set";
+import { nodeErrorHandlers } from "../component/error_handling";
+import { validateTarget } from "../utils";
+
+// 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;
+}
+
+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 = 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;
+
+  constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
+    super(config);
+    this.Root = Root;
+    if (config.test) {
+      this.dev = true;
+    }
+    if (this.dev && !config.test) {
+      console.info(DEV_MSG());
+    }
+    const descrs = Object.getOwnPropertyDescriptors(config.env || {});
+    this.env = Object.freeze(Object.defineProperties({}, descrs)) as E;
+    this.props = config.props || ({} as P);
+  }
+
+  mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
+    App.validateTarget(target);
+    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);
+  }
+
+  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) {
+          console.error(e);
+        } else {
+          reject(e);
+        }
+        throw e;
+      });
+    });
+    node.mountComponent(target, options);
+    return promise;
+  }
+
+  destroy() {
+    if (this.root) {
+      this.root.destroy();
+    }
+  }
+}
+
+export async function mount<T extends abstract new (...args: any) => any = any, P = 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/app/template_helpers.ts

@@ -0,0 +1,200 @@
+import { BDom, multi, text, toggler } from "../blockdom";
+import { validateProps } from "../component/props_validation";
+import { Markup } from "../utils";
+import { html } from "../blockdom/index";
+/**
+ * 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 && ctx.props.slots) || {};
+  const { __render, __ctx, __scope } = slots[name] || {};
+  const slotScope = Object.create(__ctx || {});
+  if (__scope) {
+    slotScope[__scope] = extra || {};
+  }
+  const slotBDom = __render ? __render.call(__ctx.__owl__.component, 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.call(ctx.__owl__.component, ctx, parent, key);
+    }
+    return multi([child1, child2]);
+  }
+  return slotBDom || text("");
+}
+
+function capture(ctx: any): any {
+  const component = ctx.__owl__.component;
+  const result = Object.create(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 Error("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;
+  node: any;
+  constructor(fn: any, ctx: any, node: any) {
+    this.fn = fn;
+    this.ctx = capture(ctx);
+    this.node = node;
+  }
+
+  evaluate(): any {
+    return this.fn(this.ctx, this.node);
+  }
+
+  toString() {
+    return this.evaluate().toString();
+  }
+}
+
+/*
+ * Safely outputs `value` as a block depending on the nature of `value`
+ */
+export function safeOutput(value: any): ReturnType<typeof toggler> {
+  if (!value) {
+    return value;
+  }
+  let safeKey;
+  let block;
+  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 || typeof value === "string") {
+    safeKey = "string_unsafe";
+    block = text(value);
+  } else {
+    // Assuming it is a block
+    safeKey = "block_safe";
+    block = value;
+  }
+  return toggler(safeKey, block);
+}
+
+let boundFunctions = new WeakMap();
+
+function bind(ctx: any, fn: Function): Function {
+  let component = ctx.__owl__.component;
+  let boundFnMap = boundFunctions.get(component);
+  if (!boundFnMap) {
+    boundFnMap = new WeakMap();
+    boundFunctions.set(component, boundFnMap);
+  }
+  let boundFn = boundFnMap.get(fn);
+  if (!boundFn) {
+    boundFn = fn.bind(component);
+    boundFnMap.set(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 Error("Cannot have 2 elements with same ref name at the same time");
+      }
+    }
+    if (count === 0 || el) {
+      refs[name] = el;
+    }
+  };
+}
+
+export const UTILS = {
+  withDefault,
+  zero: Symbol("zero"),
+  isBoundary,
+  callSlot,
+  capture,
+  withKey,
+  prepareList,
+  setContextValue,
+  multiRefSetter,
+  shallowEqual,
+  toNumber,
+  validateProps,
+  LazyValue,
+  safeOutput,
+  bind,
+};

src/app/template_set.ts

@@ -0,0 +1,137 @@
+import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
+import { compile, Template } from "../compiler";
+import { component, getCurrent } from "../component/component_node";
+import { UTILS } from "./template_helpers";
+
+const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+
+export const globalTemplates: { [key: string]: string | Element } = {};
+
+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 Error(msg);
+  }
+  return doc;
+}
+
+export interface TemplateSetConfig {
+  dev?: boolean;
+  translatableAttributes?: string[];
+  translateFn?: (s: string) => string;
+  templates?: string | Document;
+}
+
+export class TemplateSet {
+  dev: boolean;
+  rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
+  templates: { [name: string]: Template } = {};
+  translateFn?: (s: string) => string;
+  translatableAttributes?: string[];
+  utils: typeof UTILS = Object.assign({}, UTILS, {
+    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
+      const template = this.getTemplate(subTemplate);
+      return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    },
+    getTemplate: (name: string) => this.getTemplate(name),
+  });
+
+  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,
+    options: { allowDuplicate?: boolean } = {}
+  ) {
+    if (name in this.rawTemplates && !options.allowDuplicate) {
+      throw new Error(`Template ${name} already defined`);
+    }
+    this.rawTemplates[name] = template;
+  }
+
+  addTemplates(xml: string | Document, options: { allowDuplicate?: boolean } = {}) {
+    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, options);
+    }
+  }
+
+  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 Error(`Missing template: "${name}"${extraInfo}`);
+      }
+      const templateFn = 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(bdom, this.utils);
+      this.templates[name] = template;
+    }
+    return this.templates[name];
+  }
+
+  _compileTemplate(name: string, template: string | Element) {
+    return compile(template, {
+      name,
+      dev: this.dev,
+      translateFn: this.translateFn,
+      translatableAttributes: this.translatableAttributes,
+    });
+  }
+}
+
+// -----------------------------------------------------------------------------
+//  xml tag helper
+// -----------------------------------------------------------------------------
+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;

src/blockdom/attributes.ts

@@ -0,0 +1,167 @@
+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) {
+          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) {
+    (this as any)[name] = value || "";
+  };
+}
+
+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/blockdom/block_compiler.ts

@@ -0,0 +1,628 @@
+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) {
+        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 Error("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!;
+    }
+
+    moveBefore(other: Block | null, afterNode: Node | null) {
+      const target = other ? other.el! : afterNode;
+      nodeInsertBefore.call(this.parentEl, this.el!, target);
+    }
+
+    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/blockdom/config.ts

@@ -0,0 +1,28 @@
+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/blockdom/events.ts

@@ -0,0 +1,90 @@
+import { config } from "./config";
+
+type EventHandlerSetter = (this: HTMLElement, data: any) => void;
+
+interface EventHandlerCreator {
+  setup: EventHandlerSetter;
+  update: EventHandlerSetter;
+}
+
+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;
+    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) 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 update(this: HTMLElement, data: any) {
+    (this as any)[eventKey] = data;
+  }
+
+  return { setup, update };
+}
+
+// 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;
+  }
+  return { setup, update: setup };
+}
+
+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/blockdom/html.ts

@@ -0,0 +1,88 @@
+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);
+    }
+  }
+
+  moveBefore(other: VHtml | null, afterNode: Node | null) {
+    const target = other ? other.content[0] : afterNode;
+    const parent = this.parentEl;
+    for (let elem of this.content) {
+      nodeInsertBefore.call(parent, elem, 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/blockdom/index.ts

@@ -0,0 +1,44 @@
+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 interface VNode<T = any> {
+  mount(parent: HTMLElement, afterNode: Node | null): void;
+  moveBefore(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/blockdom/list.ts

@@ -0,0 +1,239 @@
+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;
+  }
+
+  moveBefore(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].moveBefore(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,
+      moveBefore: 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/blockdom/multi.ts

@@ -0,0 +1,134 @@
+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;
+  }
+
+  moveBefore(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.moveBefore(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/blockdom/text.ts

@@ -0,0 +1,87 @@
+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;
+  }
+
+  moveBefore(other: VText | null, afterNode: Node | null) {
+    const target = other ? other.el! : afterNode;
+    nodeInsertBefore.call(this.parentEl, this.el!, target);
+  }
+
+  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/blockdom/toggler.ts

@@ -0,0 +1,65 @@
+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);
+  }
+
+  moveBefore(other: VToggler | null, afterNode: Node | null) {
+    this.child.moveBefore(other ? other.child : null, 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/compiler/index.ts

@@ -0,0 +1,30 @@
+import type { BDom } from "../blockdom";
+import { CodeGenerator, Config } from "./code_generator";
+import { parse } from "./parser";
+
+export type Template = (context: any, vnode: any, key?: string) => BDom;
+
+export type TemplateFunction = (blocks: any, utils: 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("bdom, helpers", code) as TemplateFunction;
+}

src/compiler/inline_expressions.ts

@@ -0,0 +1,358 @@
+/**
+ * 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
+const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;,in ".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 Error("Invalid expression");
+      }
+      s += cur;
+    }
+    i++;
+  }
+  if (expr[i] !== start) {
+    throw new Error("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;
+
+  while (token) {
+    expr = expr.trim();
+    if (expr) {
+      for (let tokenizer of TOKENIZERS) {
+        token = tokenizer(expr);
+        if (token) {
+          result.push(token);
+          expr = expr.slice(token.size || token.value.length);
+          break;
+        }
+      }
+    } else {
+      token = false;
+    }
+  }
+  if (expr.length) {
+    throw new Error(`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;
+}
+
+export function compileExpr(expr: string): string {
+  return compileExprToArray(expr)
+    .map((t) => t.value)
+    .join("");
+}
+
+export const INTERP_REGEXP = /\{\{.*?\}\}/g;
+const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
+
+export function interpolate(s: string): string {
+  let matches = s.match(INTERP_REGEXP);
+  if (matches && matches[0].length === s.length) {
+    return `(${compileExpr(s.slice(2, -2))})`;
+  }
+
+  let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+  return "`" + r + "`";
+}

src/compiler/parser.ts

@@ -0,0 +1,974 @@
+// -----------------------------------------------------------------------------
+// AST Type definition
+// -----------------------------------------------------------------------------
+
+export const enum ASTType {
+  Text,
+  Comment,
+  DomNode,
+  Multi,
+  TEsc,
+  TIf,
+  TSet,
+  TCall,
+  TOut,
+  TForEach,
+  TKey,
+  TComponent,
+  TDebug,
+  TLog,
+  TSlot,
+  TCallBlock,
+  TTranslation,
+  TPortal,
+}
+
+export interface ASTText {
+  type: ASTType.Text;
+  value: string;
+}
+
+export interface ASTComment {
+  type: ASTType.Comment;
+  value: string;
+}
+
+interface TModelInfo {
+  hasDynamicChildren?: boolean;
+  baseExpr: string;
+  expr: string;
+  targetAttr: string;
+  specialInitTargetAttr: string | null;
+  eventType: "change" | "click" | "input";
+  shouldTrim: boolean;
+  shouldNumberize: boolean;
+}
+
+export interface ASTDomNode {
+  type: ASTType.DomNode;
+  tag: string;
+  dynamicTag: string | null;
+  attrs: { [key: string]: string };
+  content: AST[];
+  ref: string | null;
+  on: { [key: string]: string };
+  model?: TModelInfo | null;
+  ns: string | null;
+}
+
+export interface ASTMulti {
+  type: ASTType.Multi;
+  content: AST[];
+}
+
+export interface ASTTEsc {
+  type: ASTType.TEsc;
+  expr: string;
+  defaultValue: string;
+}
+
+export interface ASTTOut {
+  type: ASTType.TOut;
+  expr: string;
+  body: AST[] | null;
+}
+
+export interface ASTTif {
+  type: ASTType.TIf;
+  condition: string;
+  content: AST;
+  tElif: { condition: string; content: AST }[] | null;
+  tElse: AST | null;
+}
+
+export interface ASTTSet {
+  type: ASTType.TSet;
+  name: string;
+  value: string | null; // value defined in attribute
+  defaultValue: string | null; // value defined in body, if text
+  body: AST[] | null; // content of body if not text
+}
+
+export interface ASTTForEach {
+  type: ASTType.TForEach;
+  collection: string;
+  elem: string;
+  key: string | null;
+  body: AST;
+  memo: string;
+  hasNoFirst: boolean;
+  hasNoLast: boolean;
+  hasNoIndex: boolean;
+  hasNoValue: boolean;
+}
+
+export interface ASTTKey {
+  type: ASTType.TKey;
+  expr: string;
+  content: AST;
+}
+
+export interface ASTTCall {
+  type: ASTType.TCall;
+  name: string;
+  body: AST[] | null;
+}
+
+export interface ASTComponent {
+  type: ASTType.TComponent;
+  name: string;
+  isDynamic: boolean;
+  dynamicProps: string | null;
+  props: { [name: string]: string };
+  slots: { [name: string]: { content: AST; attrs?: { [key: string]: string }; scope?: string } };
+}
+
+export interface ASTSlot {
+  type: ASTType.TSlot;
+  name: string;
+  attrs: { [key: string]: string };
+  defaultContent: AST | null;
+}
+
+export interface ASTTCallBlock {
+  type: ASTType.TCallBlock;
+  name: string;
+}
+
+export interface ASTDebug {
+  type: ASTType.TDebug;
+  content: AST | null;
+}
+
+export interface ASTLog {
+  type: ASTType.TLog;
+  expr: string;
+  content: AST | null;
+}
+
+export interface ASTTranslation {
+  type: ASTType.TTranslation;
+  content: AST | null;
+}
+
+export interface ASTTPortal {
+  type: ASTType.TPortal;
+  target: string;
+  content: AST;
+}
+
+export type AST =
+  | ASTText
+  | ASTComment
+  | ASTDomNode
+  | ASTMulti
+  | ASTTEsc
+  | ASTTif
+  | ASTTSet
+  | ASTTCall
+  | ASTTOut
+  | ASTTForEach
+  | ASTTKey
+  | ASTComponent
+  | ASTSlot
+  | ASTTCallBlock
+  | ASTLog
+  | ASTDebug
+  | ASTTranslation
+  | ASTTPortal;
+
+// -----------------------------------------------------------------------------
+// Parser
+// -----------------------------------------------------------------------------
+const cache: WeakMap<Element, AST> = new WeakMap();
+
+export function parse(xml: string | Element): AST {
+  if (typeof xml === "string") {
+    const elem = parseXML(`<t>${xml}</t>`).firstChild as Element;
+    return _parse(elem);
+  }
+  let ast = cache.get(xml);
+  if (!ast) {
+    // we clone here the xml to prevent modifying it in place
+    ast = _parse(xml.cloneNode(true) as Element);
+    cache.set(xml, ast);
+  }
+  return ast;
+}
+
+function _parse(xml: Element): AST {
+  normalizeXML(xml);
+  const ctx = { inPreTag: false, inSVG: false };
+  return parseNode(xml, ctx) || { type: ASTType.Text, value: "" };
+}
+
+interface ParsingContext {
+  tModelInfo?: TModelInfo | null;
+  inPreTag: boolean;
+  inSVG: boolean;
+}
+
+function parseNode(node: Node, ctx: ParsingContext): AST | null {
+  if (!(node instanceof Element)) {
+    return parseTextCommentNode(node, ctx);
+  }
+  return (
+    parseTDebugLog(node, ctx) ||
+    parseTForEach(node, ctx) ||
+    parseTIf(node, ctx) ||
+    parseTPortal(node, ctx) ||
+    parseTCall(node, ctx) ||
+    parseTCallBlock(node, ctx) ||
+    parseTEscNode(node, ctx) ||
+    parseTKey(node, ctx) ||
+    parseTTranslation(node, ctx) ||
+    parseTSlot(node, ctx) ||
+    parseTOutNode(node, ctx) ||
+    parseComponent(node, ctx) ||
+    parseDOMNode(node, ctx) ||
+    parseTSetNode(node, ctx) ||
+    parseTNode(node, ctx)
+  );
+}
+
+// -----------------------------------------------------------------------------
+// <t /> tag
+// -----------------------------------------------------------------------------
+
+function parseTNode(node: Element, ctx: ParsingContext): AST | null {
+  if (node.tagName !== "t") {
+    return null;
+  }
+  return parseChildNodes(node, ctx);
+}
+
+// -----------------------------------------------------------------------------
+// Text and Comment Nodes
+// -----------------------------------------------------------------------------
+const lineBreakRE = /[\r\n]/;
+const whitespaceRE = /\s+/g;
+
+function parseTextCommentNode(node: Node, ctx: ParsingContext): AST | null {
+  if (node.nodeType === Node.TEXT_NODE) {
+    let value = node.textContent || "";
+    if (!ctx.inPreTag) {
+      if (lineBreakRE.test(value) && !value.trim()) {
+        return null;
+      }
+      value = value.replace(whitespaceRE, " ");
+    }
+
+    return { type: ASTType.Text, value };
+  } else if (node.nodeType === Node.COMMENT_NODE) {
+    return { type: ASTType.Comment, value: node.textContent || "" };
+  }
+  return null;
+}
+
+// -----------------------------------------------------------------------------
+// debugging
+// -----------------------------------------------------------------------------
+
+function parseTDebugLog(node: Element, ctx: ParsingContext): AST | null {
+  if (node.hasAttribute("t-debug")) {
+    node.removeAttribute("t-debug");
+    return {
+      type: ASTType.TDebug,
+      content: parseNode(node, ctx),
+    };
+  }
+
+  if (node.hasAttribute("t-log")) {
+    const expr = node.getAttribute("t-log")!;
+    node.removeAttribute("t-log");
+    return {
+      type: ASTType.TLog,
+      expr,
+      content: parseNode(node, ctx),
+    };
+  }
+  return null;
+}
+
+// -----------------------------------------------------------------------------
+// Regular dom node
+// -----------------------------------------------------------------------------
+const hasDotAtTheEnd = /\.[\w_]+\s*$/;
+const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
+
+const ROOT_SVG_TAGS = new Set(["svg", "g", "path"]);
+
+function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
+  const { tagName } = node;
+  const dynamicTag = node.getAttribute("t-tag");
+  node.removeAttribute("t-tag");
+  if (tagName === "t" && !dynamicTag) {
+    return null;
+  }
+  if (tagName.startsWith("block-")) {
+    throw new Error(`Invalid tag name: '${tagName}'`);
+  }
+  ctx = Object.assign({}, ctx);
+  if (tagName === "pre") {
+    ctx.inPreTag = true;
+  }
+  const shouldAddSVGNS = ROOT_SVG_TAGS.has(tagName) && !ctx.inSVG;
+  ctx.inSVG = ctx.inSVG || shouldAddSVGNS;
+  const ns = shouldAddSVGNS ? "http://www.w3.org/2000/svg" : null;
+  const ref = node.getAttribute("t-ref");
+  node.removeAttribute("t-ref");
+
+  const nodeAttrsNames = node.getAttributeNames();
+  const attrs: ASTDomNode["attrs"] = {};
+  const on: ASTDomNode["on"] = {};
+  let model: TModelInfo | null = null;
+
+  for (let attr of nodeAttrsNames) {
+    const value = node.getAttribute(attr)!;
+    if (attr.startsWith("t-on")) {
+      if (attr === "t-on") {
+        throw new Error("Missing event name with t-on directive");
+      }
+      on[attr.slice(5)] = value;
+    } else if (attr.startsWith("t-model")) {
+      if (!["input", "select", "textarea"].includes(tagName)) {
+        throw new Error("The t-model directive only works with <input>, <textarea> and <select>");
+      }
+
+      let baseExpr, expr;
+      if (hasDotAtTheEnd.test(value)) {
+        const index = value.lastIndexOf(".");
+        baseExpr = value.slice(0, index);
+        expr = `'${value.slice(index + 1)}'`;
+      } else if (hasBracketsAtTheEnd.test(value)) {
+        const index = value.lastIndexOf("[");
+        baseExpr = value.slice(0, index);
+        expr = value.slice(index + 1, -1);
+      } else {
+        throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
+      }
+
+      const typeAttr = node.getAttribute("type");
+      const isInput = tagName === "input";
+      const isSelect = tagName === "select";
+      const isTextarea = tagName === "textarea";
+      const isCheckboxInput = isInput && typeAttr === "checkbox";
+      const isRadioInput = isInput && typeAttr === "radio";
+      const isOtherInput = isInput && !isCheckboxInput && !isRadioInput;
+      const hasLazyMod = attr.includes(".lazy");
+      const hasNumberMod = attr.includes(".number");
+      const hasTrimMod = attr.includes(".trim");
+      const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
+
+      model = {
+        baseExpr,
+        expr,
+        targetAttr: isCheckboxInput ? "checked" : "value",
+        specialInitTargetAttr: isRadioInput ? "checked" : null,
+        eventType,
+        shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
+        shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
+      };
+      if (isSelect) {
+        // don't pollute the original ctx
+        ctx = Object.assign({}, ctx);
+        ctx.tModelInfo = model;
+      }
+    } else if (attr.startsWith("block-")) {
+      throw new Error(`Invalid attribute: '${attr}'`);
+    } else if (attr !== "t-name") {
+      if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
+        throw new Error(`Unknown QWeb directive: '${attr}'`);
+      }
+      const tModel = ctx.tModelInfo;
+      if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
+        tModel.hasDynamicChildren = true;
+      }
+      attrs[attr] = value;
+    }
+  }
+
+  const children = parseChildren(node, ctx);
+  return {
+    type: ASTType.DomNode,
+    tag: tagName,
+    dynamicTag,
+    attrs,
+    on,
+    ref,
+    content: children,
+    model,
+    ns,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-esc
+// -----------------------------------------------------------------------------
+
+function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-esc")) {
+    return null;
+  }
+  const escValue = node.getAttribute("t-esc")!;
+  node.removeAttribute("t-esc");
+  const tesc: AST = {
+    type: ASTType.TEsc,
+    expr: escValue,
+    defaultValue: node.textContent || "",
+  };
+  let ref = node.getAttribute("t-ref");
+  node.removeAttribute("t-ref");
+  const ast = parseNode(node, ctx);
+  if (!ast) {
+    return tesc;
+  }
+  if (ast.type === ASTType.DomNode) {
+    return {
+      ...ast,
+      ref,
+      content: [tesc],
+    };
+  }
+  if (ast.type === ASTType.TComponent) {
+    throw new Error("t-esc is not supported on Component nodes");
+  }
+  return tesc;
+}
+
+// -----------------------------------------------------------------------------
+// t-out
+// -----------------------------------------------------------------------------
+
+function parseTOutNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-out") && !node.hasAttribute("t-raw")) {
+    return null;
+  }
+  if (node.hasAttribute("t-raw")) {
+    console.warn(
+      `t-raw has been deprecated in favor of t-out. If the value to render is not wrapped by the "markup" function, it will be escaped`
+    );
+  }
+  const expr = (node.getAttribute("t-out") || node.getAttribute("t-raw"))!;
+  node.removeAttribute("t-out");
+  node.removeAttribute("t-raw");
+
+  const tOut: AST = { type: ASTType.TOut, expr, body: null };
+  const ref = node.getAttribute("t-ref");
+  node.removeAttribute("t-ref");
+  const ast = parseNode(node, ctx);
+  if (!ast) {
+    return tOut;
+  }
+  if (ast.type === ASTType.DomNode) {
+    tOut.body = ast.content.length ? ast.content : null;
+    return {
+      ...ast,
+      ref,
+      content: [tOut],
+    };
+  }
+
+  return tOut;
+}
+
+// -----------------------------------------------------------------------------
+// t-foreach and t-key
+// -----------------------------------------------------------------------------
+
+function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-foreach")) {
+    return null;
+  }
+  const html = node.outerHTML;
+  const collection = node.getAttribute("t-foreach")!;
+  node.removeAttribute("t-foreach");
+  const elem = node.getAttribute("t-as") || "";
+  node.removeAttribute("t-as");
+  const key = node.getAttribute("t-key");
+  if (!key) {
+    throw new Error(
+      `"Directive t-foreach should always be used with a t-key!" (expression: t-foreach="${collection}" t-as="${elem}")`
+    );
+  }
+  node.removeAttribute("t-key");
+  const memo = node.getAttribute("t-memo") || "";
+  node.removeAttribute("t-memo");
+  const body = parseNode(node, ctx);
+
+  if (!body) {
+    return null;
+  }
+
+  const hasNoTCall = !html.includes("t-call");
+  const hasNoFirst = hasNoTCall && !html.includes(`${elem}_first`);
+  const hasNoLast = hasNoTCall && !html.includes(`${elem}_last`);
+  const hasNoIndex = hasNoTCall && !html.includes(`${elem}_index`);
+  const hasNoValue = hasNoTCall && !html.includes(`${elem}_value`);
+
+  return {
+    type: ASTType.TForEach,
+    collection,
+    elem,
+    body,
+    memo,
+    key,
+    hasNoFirst,
+    hasNoLast,
+    hasNoIndex,
+    hasNoValue,
+  };
+}
+
+function parseTKey(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-key")) {
+    return null;
+  }
+  const key = node.getAttribute("t-key")!;
+  node.removeAttribute("t-key");
+  const body = parseNode(node, ctx);
+  if (!body) {
+    return null;
+  }
+  return { type: ASTType.TKey, expr: key, content: body };
+}
+
+// -----------------------------------------------------------------------------
+// t-call
+// -----------------------------------------------------------------------------
+
+function parseTCall(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-call")) {
+    return null;
+  }
+  const subTemplate = node.getAttribute("t-call")!;
+
+  node.removeAttribute("t-call");
+  if (node.tagName !== "t") {
+    const ast = parseNode(node, ctx);
+    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null };
+    if (ast && ast.type === ASTType.DomNode) {
+      ast.content = [tcall];
+      return ast;
+    }
+    if (ast && ast.type === ASTType.TComponent) {
+      return {
+        ...ast,
+        slots: { default: { content: tcall } },
+      };
+    }
+  }
+  const body = parseChildren(node, ctx);
+
+  return {
+    type: ASTType.TCall,
+    name: subTemplate,
+    body: body.length ? body : null,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-call-block
+// -----------------------------------------------------------------------------
+
+function parseTCallBlock(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-call-block")) {
+    return null;
+  }
+  const name = node.getAttribute("t-call-block")!;
+  return {
+    type: ASTType.TCallBlock,
+    name,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-if
+// -----------------------------------------------------------------------------
+
+function parseTIf(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-if")) {
+    return null;
+  }
+  const condition = node.getAttribute("t-if")!;
+  node.removeAttribute("t-if");
+  const content = parseNode(node, ctx) || { type: ASTType.Text, value: "" };
+
+  let nextElement = node.nextElementSibling;
+  // t-elifs
+  const tElifs: any[] = [];
+  while (nextElement && nextElement.hasAttribute("t-elif")) {
+    const condition = nextElement.getAttribute("t-elif");
+    nextElement.removeAttribute("t-elif");
+    const tElif = parseNode(nextElement, ctx);
+    const next = nextElement.nextElementSibling;
+    nextElement.remove();
+    nextElement = next;
+    if (tElif) {
+      tElifs.push({ condition, content: tElif });
+    }
+  }
+
+  // t-else
+  let tElse: AST | null = null;
+  if (nextElement && nextElement.hasAttribute("t-else")) {
+    nextElement.removeAttribute("t-else");
+    tElse = parseNode(nextElement, ctx);
+    nextElement.remove();
+  }
+
+  return {
+    type: ASTType.TIf,
+    condition,
+    content,
+    tElif: tElifs.length ? tElifs : null,
+    tElse,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-set directive
+// -----------------------------------------------------------------------------
+
+function parseTSetNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-set")) {
+    return null;
+  }
+  const name = node.getAttribute("t-set")!;
+  const value = node.getAttribute("t-value") || null;
+  const defaultValue = node.innerHTML === node.textContent ? node.textContent || null : null;
+  let body: AST[] | null = null;
+  if (node.textContent !== node.innerHTML) {
+    body = parseChildren(node, ctx);
+  }
+  return { type: ASTType.TSet, name, value, defaultValue, body };
+}
+
+// -----------------------------------------------------------------------------
+// Components
+// -----------------------------------------------------------------------------
+
+// Error messages when trying to use an unsupported directive on a component
+const directiveErrorMap = new Map([
+  ["t-on", "t-on is no longer supported on components. Consider passing a callback in props."],
+  [
+    "t-ref",
+    "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop.",
+  ],
+  ["t-att", "t-att makes no sense on component: props are already treated as expressions"],
+  [
+    "t-attf",
+    "t-attf is not supported on components: use template strings for string interpolation in props",
+  ],
+]);
+
+function parseComponent(node: Element, ctx: ParsingContext): AST | null {
+  let name = node.tagName;
+  const firstLetter = name[0];
+  let isDynamic = node.hasAttribute("t-component");
+
+  if (isDynamic && name !== "t") {
+    throw new Error(`Directive 't-component' can only be used on <t> nodes (used on a <${name}>)`);
+  }
+
+  if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
+    return null;
+  }
+  if (isDynamic) {
+    name = node.getAttribute("t-component")!;
+    node.removeAttribute("t-component");
+  }
+
+  const dynamicProps = node.getAttribute("t-props");
+  node.removeAttribute("t-props");
+
+  const defaultSlotScope = node.getAttribute("t-slot-scope");
+  node.removeAttribute("t-slot-scope");
+
+  const props: ASTComponent["props"] = {};
+  for (let name of node.getAttributeNames()) {
+    const value = node.getAttribute(name)!;
+    if (name.startsWith("t-")) {
+      const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
+      throw new Error(message || `unsupported directive on Component: ${name}`);
+    } else {
+      props[name] = value;
+    }
+  }
+
+  const slots: ASTComponent["slots"] = {};
+  if (node.hasChildNodes()) {
+    const clone = <Element>node.cloneNode(true);
+
+    // named slots
+    const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
+    for (let slotNode of slotNodes) {
+      if (slotNode.tagName !== "t") {
+        throw new Error(
+          `Directive 't-set-slot' can only be used on <t> nodes (used on a <${slotNode.tagName}>)`
+        );
+      }
+      const name = slotNode.getAttribute("t-set-slot")!;
+
+      // check if this is defined in a sub component (in which case it should
+      // be ignored)
+      let el = slotNode.parentElement!;
+      let isInSubComponent = false;
+      while (el !== clone) {
+        if (el!.hasAttribute("t-component") || el!.tagName[0] === el!.tagName[0].toUpperCase()) {
+          isInSubComponent = true;
+          break;
+        }
+        el = el.parentElement!;
+      }
+      if (isInSubComponent) {
+        continue;
+      }
+
+      slotNode.removeAttribute("t-set-slot");
+      slotNode.remove();
+      const slotAst = parseNode(slotNode, ctx);
+      if (slotAst) {
+        const slotInfo: any = { content: slotAst };
+        const attrs: { [key: string]: string } = {};
+        for (let attributeName of slotNode.getAttributeNames()) {
+          const value = slotNode.getAttribute(attributeName)!;
+          if (attributeName === "t-slot-scope") {
+            slotInfo.scope = value;
+            continue;
+          }
+          attrs[attributeName] = value;
+        }
+        if (Object.keys(attrs).length) {
+          slotInfo.attrs = attrs;
+        }
+        slots[name] = slotInfo;
+      }
+    }
+
+    // default slot
+    const defaultContent = parseChildNodes(clone, ctx);
+    if (defaultContent) {
+      slots.default = { content: defaultContent };
+      if (defaultSlotScope) {
+        slots.default.scope = defaultSlotScope;
+      }
+    }
+  }
+  return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots };
+}
+
+// -----------------------------------------------------------------------------
+// Slots
+// -----------------------------------------------------------------------------
+
+function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-slot")) {
+    return null;
+  }
+  const name = node.getAttribute("t-slot")!;
+  node.removeAttribute("t-slot");
+  const attrs: { [key: string]: string } = {};
+  for (let attributeName of node.getAttributeNames()) {
+    const value = node.getAttribute(attributeName)!;
+    attrs[attributeName] = value;
+  }
+  return {
+    type: ASTType.TSlot,
+    name,
+    attrs,
+    defaultContent: parseChildNodes(node, ctx),
+  };
+}
+
+function parseTTranslation(node: Element, ctx: ParsingContext): AST | null {
+  if (node.getAttribute("t-translation") !== "off") {
+    return null;
+  }
+  node.removeAttribute("t-translation");
+  return {
+    type: ASTType.TTranslation,
+    content: parseNode(node, ctx),
+  };
+}
+
+// -----------------------------------------------------------------------------
+// Portal
+// -----------------------------------------------------------------------------
+
+function parseTPortal(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-portal")) {
+    return null;
+  }
+  const target = node.getAttribute("t-portal")!;
+  node.removeAttribute("t-portal");
+  const content = parseNode(node, ctx);
+  if (!content) {
+    return {
+      type: ASTType.Text,
+      value: "",
+    };
+  }
+  return {
+    type: ASTType.TPortal,
+    target,
+    content,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+
+/**
+ * Parse all the child nodes of a given node and return a list of ast elements
+ */
+function parseChildren(node: Element, ctx: ParsingContext): AST[] {
+  const children: AST[] = [];
+  for (let child of node.childNodes) {
+    const childAst = parseNode(child, ctx);
+    if (childAst) {
+      if (childAst.type === ASTType.Multi) {
+        children.push(...childAst.content);
+      } else {
+        children.push(childAst);
+      }
+    }
+  }
+  return children;
+}
+
+/**
+ * Parse all the child nodes of a given node and return an ast if possible.
+ * In the case there are multiple children, they are wrapped in a astmulti.
+ */
+function parseChildNodes(node: Element, ctx: ParsingContext): AST | null {
+  const children = parseChildren(node, ctx);
+  switch (children.length) {
+    case 0:
+      return null;
+    case 1:
+      return children[0];
+    default:
+      return { type: ASTType.Multi, content: children };
+  }
+}
+
+/**
+ * Normalizes the content of an Element so that t-if/t-elif/t-else directives
+ * immediately follow one another (by removing empty text nodes or comments).
+ * Throws an error when a conditional branching statement is malformed. This
+ * function modifies the Element in place.
+ *
+ * @param el the element containing the tree that should be normalized
+ */
+function normalizeTIf(el: Element) {
+  let tbranch = el.querySelectorAll("[t-elif], [t-else]");
+  for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
+    let node = tbranch[i];
+    let prevElem = node.previousElementSibling!;
+    let pattr = (name: string) => prevElem.getAttribute(name);
+    let nattr = (name: string) => +!!node.getAttribute(name);
+    if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
+      if (pattr("t-foreach")) {
+        throw new Error(
+          "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
+        );
+      }
+      if (
+        ["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
+          return a + b;
+        }) > 1
+      ) {
+        throw new Error("Only one conditional branching directive is allowed per node");
+      }
+      // All text (with only spaces) and comment nodes (nodeType 8) between
+      // branch nodes are removed
+      let textNode;
+      while ((textNode = node.previousSibling) !== prevElem) {
+        if (textNode!.nodeValue!.trim().length && textNode!.nodeType !== 8) {
+          throw new Error("text is not allowed between branching directives");
+        }
+        textNode!.remove();
+      }
+    } else {
+      throw new Error(
+        "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
+      );
+    }
+  }
+}
+
+/**
+ * Normalizes the content of an Element so that t-esc directives on components
+ * are removed and instead places a <t t-esc=""> as the default slot of the
+ * component. Also throws if the component already has content. This function
+ * modifies the Element in place.
+ *
+ * @param el the element containing the tree that should be normalized
+ */
+function normalizeTEsc(el: Element) {
+  const elements = [...el.querySelectorAll("[t-esc]")].filter(
+    (el) => el.tagName[0] === el.tagName[0].toUpperCase() || el.hasAttribute("t-component")
+  );
+  for (const el of elements) {
+    if (el.childNodes.length) {
+      throw new Error("Cannot have t-esc on a component that already has content");
+    }
+    const value = el.getAttribute("t-esc");
+    el.removeAttribute("t-esc");
+    const t = el.ownerDocument.createElement("t");
+    if (value != null) {
+      t.setAttribute("t-esc", value);
+    }
+    el.appendChild(t);
+  }
+}
+
+/**
+ * Normalizes the tree inside a given element and do some preliminary validation
+ * on it. This function modifies the Element in place.
+ *
+ * @param el the element containing the tree that should be normalized
+ */
+function normalizeXML(el: Element) {
+  normalizeTIf(el);
+  normalizeTEsc(el);
+}
+
+/**
+ * Parses an XML string into an XML document, throwing errors on parser errors
+ * instead of returning an XML document containing the parseerror.
+ *
+ * @param xml the string to parse
+ * @returns an XML document corresponding to the content of the string
+ */
+function parseXML(xml: string): XMLDocument {
+  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 Error(msg);
+  }
+
+  return doc;
+}

src/component.ts

@@ -1,431 +0,0 @@
-import { EventBus } from "./event_bus";
-import { Observer } from "./observer";
-import { QWeb } from "./qweb";
-import { idGenerator } from "./utils";
-import { h, patch, VNode } from "./vdom";
-
-let getId = idGenerator();
-
-//------------------------------------------------------------------------------
-// Types/helpers
-//------------------------------------------------------------------------------
-
-export interface Env {
-  qweb: QWeb;
-}
-
-export interface Meta<T extends Env, Props> {
-  readonly id: number;
-  vnode: VNode | null;
-  isStarted: boolean;
-  isMounted: boolean;
-  isDestroyed: boolean;
-  parent: Component<T, any, any> | null;
-  children: { [key: number]: Component<T, any, any> };
-  // children mapping: from templateID to widgetID
-  // should it be a map number => Widget?
-  cmap: { [key: number]: number };
-
-  renderId: number;
-  renderProps: Props | null;
-  renderPromise: Promise<VNode> | null;
-  boundHandlers: { [key: number]: any };
-  observer?: Observer;
-}
-
-export interface Type<T> extends Function {
-  new (...args: any[]): T;
-}
-
-//------------------------------------------------------------------------------
-// Widget
-//------------------------------------------------------------------------------
-
-export class Component<
-  T extends Env,
-  Props extends {},
-  State extends {}
-> extends EventBus {
-  readonly __owl__: Meta<Env, Props>;
-  template: string = "default";
-  inlineTemplate: string | null = null;
-
-  get el(): HTMLElement | null {
-    return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
-  }
-
-  env: T;
-  state?: State;
-  props: Props;
-  refs: {
-    [key: string]: Component<T, any, any> | HTMLElement | undefined;
-  } = {};
-
-  //--------------------------------------------------------------------------
-  // Lifecycle
-  //--------------------------------------------------------------------------
-
-  /**
-   * Creates an instance of Component.
-   *
-   * The root widget of a component tree needs an environment:
-   *
-   * ```javascript
-   *   const root = new RootWidget(env, props);
-   * ```
-   *
-   * Every other widget simply needs a reference to its parent:
-   *
-   * ```javascript
-   *   const child = new SomeWidget(parent, props);
-   * ```
-   *
-   * Note that most of the time, only the root widget needs to be created by
-   * hand.  Other widgets should be created automatically by the framework (with
-   * the t-widget directive in a template)
-   */
-  constructor(parent: Component<T, any, any> | T, props?: Props) {
-    super();
-
-    // is this a good idea?
-    //   Pro: if props is empty, we can create easily a widget
-    //   Con: this is not really safe
-    //   Pro: but creating widget (by a template) is always unsafe anyway
-    this.props = <Props>props || <Props>{};
-    let id: number = getId();
-    let p: Component<T, any, any> | null = null;
-    if (parent instanceof Component) {
-      p = parent;
-      this.env = parent.env;
-      parent.__owl__.children[id] = this;
-    } else {
-      this.env = parent;
-    }
-    this.__owl__ = {
-      id: id,
-      vnode: null,
-      isStarted: false,
-      isMounted: false,
-      isDestroyed: false,
-      parent: p,
-      children: {},
-      cmap: {},
-      renderId: 1,
-      renderPromise: null,
-      renderProps: props || null,
-      boundHandlers: {}
-    };
-  }
-
-  /**
-   * willStart is an asynchronous hook that can be implemented to perform some
-   * 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 widget is rendered.
-   *
-   * Note that a slow willStart method will slow down the rendering of the user
-   * interface.  Therefore, some effort should be made to make this method as
-   * fast as possible.
-   *
-   * Note: this method should not be called manually.
-   */
-  async willStart() {}
-
-  /**
-   * mounted is a hook that is called each time a component is attached to the
-   * DOM. 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.
-   *
-   * Note: this method should not be called manually.
-   *
-   * @see willUnmount
-   */
-  mounted() {}
-
-  /**
-   * The willUpdateProps is an asynchronous hook, called just before new props
-   * are set. This is useful if the component needs some asynchronous task
-   * performed, depending on the props (for example, assuming that the props are
-   * some record Id, fetching the record data).
-   *
-   * This hook is not called during the first render (but willStart is called
-   * and performs a similar job).
-   */
-  async willUpdateProps(nextProps: Props) {}
-
-  /**
-   * The willPatch hook is called just before the DOM patching process starts.
-   * It is not called on the initial render.  This is useful to get some
-   * information which are in the DOM.  For example, the current position of the
-   * scrollbar
-   */
-  willPatch() {}
-
-  /**
-   * This hook is called whenever a component did actually update its props,
-   * state or env.
-   *
-   * 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 updated.
-   *
-   * Updating the widget state in this hook is possible, but not encouraged.
-   * One need to be careful, because updates here will cause rerender, which in
-   * turn will cause other calls to updated. So, we need to be particularly
-   * careful at avoiding endless cycles.
-   */
-  patched() {}
-
-  /**
-   * 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 some listeners, for
-   * example.
-   *
-   * Note: this method should not be called manually.
-   *
-   * @see mounted
-   */
-  willUnmount() {}
-
-  //--------------------------------------------------------------------------
-  // Public
-  //--------------------------------------------------------------------------
-
-  /**
-   * Attach a child widget to a given html element
-   *
-   * This is most of the time not necessary, since widgets should primarily be
-   * created/managed with the t-widget directive in a qweb template.  However,
-   * for the cases where we need more control, this method will do what is
-   * necessary to make sure all the proper hooks are called (for example,
-   * mounted/willUnmount)
-   *
-   * Note that this method makes a few assumptions:
-   * - the child widget is indeed a child of the current widget
-   * - the target is inside the dom of the current widget (typically a ref)
-   */
-  attachChild(child: Component<T, any, any>, target: HTMLElement) {
-    target.appendChild(child.el!);
-    child.__mount();
-  }
-
-  async mount(target: HTMLElement): Promise<void> {
-    const vnode = await this._prepare();
-    if (this.__owl__.isDestroyed) {
-      // widget was destroyed before we get here...
-      return;
-    }
-    this._patch(vnode);
-    target.appendChild(this.el!);
-
-    if (document.body.contains(target)) {
-      this._visitSubTree(w => {
-        if (!w.__owl__.isMounted && this.el!.contains(w.el)) {
-          w.__owl__.isMounted = true;
-          w.mounted();
-          return true;
-        }
-        return false;
-      });
-    }
-  }
-
-  unmount() {
-    if (this.el) {
-      this._visitSubTree(w => {
-        if (w.__owl__.isMounted) {
-          w.willUnmount();
-          w.__owl__.isMounted = false;
-          return true;
-        }
-        return false;
-      });
-      this.el.remove();
-    }
-  }
-
-  async render(force: boolean = false): Promise<void> {
-    if (this.__owl__.isDestroyed) {
-      return;
-    }
-    const renderVDom = this._render(force);
-    const renderId = this.__owl__.renderId;
-    const vnode = await renderVDom;
-    if (renderId === this.__owl__.renderId) {
-      // we only update the vnode and the actual DOM if no other rendering
-      // occurred between now and when the render method was initially called.
-      this._patch(vnode);
-    }
-  }
-
-  destroy() {
-    if (!this.__owl__.isDestroyed) {
-      for (let id in this.__owl__.children) {
-        this.__owl__.children[id].destroy();
-      }
-      if (this.__owl__.isMounted) {
-        this.willUnmount();
-      }
-      if (this.el) {
-        this.el.remove();
-        this.__owl__.isMounted = false;
-        delete this.__owl__.vnode;
-      }
-      if (this.__owl__.parent) {
-        let id = this.__owl__.id;
-        delete this.__owl__.parent.__owl__.children[id];
-        this.__owl__.parent = null;
-      }
-      this.clear();
-      this.__owl__.isDestroyed = true;
-    }
-  }
-
-  shouldUpdate(nextProps: Props): boolean {
-    return true;
-  }
-
-  /**
-   * This method is the correct way to update the environment of a widget. Doing
-   * this will cause a full rerender of the widget and its children, so this is
-   * an operation that should not be done frequently.
-   *
-   * A good usecase for updating the environment would be to update some mostly
-   * static config keys, such as a boolean to determine if we are in mobile
-   * mode or not.
-   */
-  async updateEnv(nextEnv: Partial<T>): Promise<void> {
-    if (this.__owl__.parent && this.__owl__.parent.env === this.env) {
-      this.env = Object.create(this.env);
-    }
-    Object.assign(this.env, nextEnv);
-    if (this.__owl__.isMounted) {
-      await this.render(true);
-    }
-  }
-
-  async updateProps(
-    nextProps: Props,
-    forceUpdate: boolean = false
-  ): Promise<void> {
-    const shouldUpdate = forceUpdate || this.shouldUpdate(nextProps);
-    return shouldUpdate ? this._updateProps(nextProps) : Promise.resolve();
-  }
-
-  set(target: any, key: string | number, value: any) {
-    this.__owl__.observer!.set(target, key, value);
-  }
-
-  //--------------------------------------------------------------------------
-  // Private
-  //--------------------------------------------------------------------------
-
-  async _updateProps(nextProps: Props): Promise<void> {
-    await this.willUpdateProps(nextProps);
-    this.props = nextProps;
-    await this.render();
-  }
-
-  _patch(vnode) {
-    this.__owl__.renderPromise = null;
-    if (this.__owl__.vnode) {
-      this.willPatch();
-      this.__owl__.vnode = patch(this.__owl__.vnode, vnode);
-      this.patched();
-    } else {
-      this.__owl__.vnode = patch(document.createElement(vnode.sel!), vnode);
-    }
-  }
-  async _prepare(): Promise<VNode> {
-    this.__owl__.renderProps = this.props;
-    this.__owl__.renderPromise = this.willStart().then(() => {
-      if (this.__owl__.isDestroyed) {
-        return Promise.resolve(h("div"));
-      }
-      this.__owl__.isStarted = true;
-      if (this.inlineTemplate) {
-        this.env.qweb.addTemplate(
-          this.inlineTemplate,
-          this.inlineTemplate,
-          true
-        );
-      }
-      this._observeState();
-      return this._render();
-    });
-    return this.__owl__.renderPromise;
-  }
-
-  async _render(force: boolean = false): Promise<VNode> {
-    this.__owl__.renderId++;
-    const promises: Promise<void>[] = [];
-    const template = this.inlineTemplate || this.template;
-    if (this.__owl__.observer) {
-      this.__owl__.observer.allowMutations = false;
-    }
-    let vnode = this.env.qweb.render(template, this, {
-      promises,
-      handlers: this.__owl__.boundHandlers,
-      forceUpdate: force
-    });
-    if (this.__owl__.observer) {
-      this.__owl__.observer.allowMutations = true;
-    }
-
-    // this part is critical for the patching process to be done correctly. The
-    // tricky part is that a child widget can be rerendered on its own, which
-    // will update its own vnode representation without the knowledge of the
-    // parent widget.  With this, we make sure that the parent widget will be
-    // able to patch itself properly after
-    vnode.key = this.__owl__.id;
-    this.__owl__.renderProps = this.props;
-    this.__owl__.renderPromise = Promise.all(promises).then(() => vnode);
-    return this.__owl__.renderPromise;
-  }
-
-  /**
-   * Only called by qweb t-widget directive
-   */
-  _mount(vnode: VNode, elm: HTMLElement): VNode {
-    this.__owl__.vnode = patch(elm, vnode);
-    this.__mount();
-    return this.__owl__.vnode;
-  }
-
-  __mount() {
-    if (this.__owl__.isMounted) {
-      return;
-    }
-    this._observeState();
-    if (this.__owl__.parent) {
-      if (this.__owl__.parent!.__owl__.isMounted) {
-        this.__owl__.isMounted = true;
-        this.mounted();
-        const children = this.__owl__.children;
-        for (let id in children) {
-          children[id].__mount();
-        }
-      }
-    }
-  }
-
-  _visitSubTree(callback: (w: Component<T, any, any>) => boolean) {
-    const shouldVisitChildren = callback(this);
-    if (shouldVisitChildren) {
-      const children = this.__owl__.children;
-      for (let id in children) {
-        children[id]._visitSubTree(callback);
-      }
-    }
-  }
-
-  _observeState() {
-    if (this.state) {
-      this.__owl__.observer = new Observer();
-      this.__owl__.observer.observe(this.state);
-      this.__owl__.observer.notifyCB = this.render.bind(this);
-    }
-  }
-}

src/component/component.ts

@@ -0,0 +1,42 @@
+import type { ComponentNode } from "./component_node";
+
+// -----------------------------------------------------------------------------
+//  Component Class
+// -----------------------------------------------------------------------------
+
+type Props = { [key: string]: any };
+
+interface StaticComponentProperties {
+  template: string;
+  defaultProps?: any;
+  props?: any;
+}
+
+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() {
+    this.__owl__.render();
+  }
+}

src/component/component_node.ts

@@ -0,0 +1,329 @@
+import type { App, Env } from "../app/app";
+import { BDom, VNode } from "../blockdom";
+import { Component, ComponentConstructor } from "./component";
+import {
+  Fiber,
+  makeChildFiber,
+  makeRootFiber,
+  MountFiber,
+  MountOptions,
+  RootFiber,
+} from "./fibers";
+import { handleError, fibersInError } from "./error_handling";
+import { applyDefaultProps } from "./props_validation";
+import { STATUS } from "./status";
+
+let currentNode: ComponentNode | null = null;
+
+export function getCurrent(): ComponentNode {
+  if (!currentNode) {
+    throw new Error("No active component (a hook function should only be called in 'setup')");
+  }
+  return currentNode;
+}
+
+export function useComponent(): Component {
+  return currentNode!.component;
+}
+
+export function component(
+  name: string | typeof Component,
+  props: any,
+  key: string,
+  ctx: ComponentNode,
+  parent: any
+): ComponentNode {
+  let node: any = ctx.children[key];
+  let isDynamic = typeof name !== "string";
+
+  if (node) {
+    if (node.status < STATUS.MOUNTED) {
+      node.destroy();
+      node = undefined;
+    } else if (node.status === STATUS.DESTROYED) {
+      node = undefined;
+    }
+  }
+  if (isDynamic && node && node.component.constructor !== name) {
+    node = undefined;
+  }
+
+  const parentFiber = ctx.fiber!;
+  if (node) {
+    node.updateAndRender(props, parentFiber);
+  } else {
+    // new component
+    let C;
+    if (isDynamic) {
+      C = name;
+    } else {
+      C = parent.constructor.components[name as any];
+      if (!C) {
+        throw new Error(`Cannot find the definition of component "${name}"`);
+      }
+    }
+    node = new ComponentNode(C, props, ctx.app, ctx);
+    ctx.children[key] = node;
+
+    const fiber = makeChildFiber(node, parentFiber);
+    node.initiateRender(fiber);
+  }
+  return node;
+}
+
+// -----------------------------------------------------------------------------
+//  Component VNode
+// -----------------------------------------------------------------------------
+
+type LifecycleHook = Function;
+
+export class ComponentNode<P = 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;
+
+  renderFn: Function;
+  parent: ComponentNode | null;
+  level: number;
+  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) {
+    currentNode = this;
+    this.app = app;
+    this.parent = parent || null;
+    this.level = parent ? parent.level + 1 : 0;
+    applyDefaultProps(props, C);
+    const env = (parent && parent.childEnv) || app.env;
+    this.childEnv = env;
+    this.component = new C(props, env, this) as any;
+    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);
+  }
+
+  initiateRender(fiber: Fiber | MountFiber) {
+    this.fiber = fiber;
+    if (this.mounted.length) {
+      fiber.root!.mounted.push(fiber);
+    }
+    const component = this.component;
+    const finish = () => {
+      if (this.status === STATUS.NEW && this.fiber === fiber) {
+        this._render(fiber);
+      }
+    }
+    let willStartResults;
+    try {
+      willStartResults = this.willStart.map((f) => f.call(component));
+    } catch (e) {
+      handleError({ node: this, error: e });
+      return;
+    }
+    if (willStartResults.some(result => result instanceof Promise)) {
+      Promise.all(willStartResults)
+        .then(finish)
+        .catch(e => handleError({ node: this, error: e }));
+    } else {
+      finish();
+    }
+  }
+
+  async render() {
+    let current = this.fiber;
+    if (current && current.root!.locked) {
+      await Promise.resolve();
+      // situation may have changed after the microtask tick
+      current = this.fiber;
+    }
+    if (current && !current.bdom && !fibersInError.has(current)) {
+      return;
+    }
+    if (!this.bdom && !current) {
+      return;
+    }
+
+    const fiber = makeRootFiber(this);
+    this.fiber = fiber;
+    debugger;
+    window.requestAnimationFrame(() => {
+      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)) {
+        this._render(fiber);
+      }
+    });
+    this.app.scheduler.addFiber(fiber);
+  }
+
+  _render(fiber: Fiber | RootFiber) {
+    try {
+      fiber.bdom = this.renderFn();
+      fiber.root!.counter--;
+    } catch (e) {
+      handleError({ node: this, error: e });
+    }
+  }
+
+  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();
+    }
+    for (let cb of this.willDestroy) {
+      cb.call(component);
+    }
+    this.status = STATUS.DESTROYED;
+  }
+
+  updateAndRender(props: any, parentFiber: Fiber) {
+    // update
+    const fiber = makeChildFiber(this, parentFiber);
+    this.fiber = fiber;
+    const component = this.component;
+    applyDefaultProps(props, component.constructor as any);
+
+    const finish = () => {
+      if (fiber !== this.fiber) {
+        return;
+      }
+      component.props = props;
+      this._render(fiber);
+      const parentRoot = parentFiber.root!;
+      if (this.willPatch.length) {
+        parentRoot.willPatch.push(fiber);
+      }
+      if (this.patched.length) {
+        parentRoot.patched.push(fiber);
+      }
+    }
+    const willUpdatePropsResults = this.willUpdateProps.map((f) => f.call(component, props));
+    if (willUpdatePropsResults.some(res => res instanceof Promise)) {
+      Promise.all(willUpdatePropsResults).then(finish);
+    } else {
+      finish();
+    }
+  }
+
+  /**
+   * 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.fiber = null;
+  }
+
+  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
+    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+  }
+
+  patch() {
+    const hasChildren = Object.keys(this.children).length > 0;
+    this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
+    if (hasChildren) {
+      this.cleanOutdatedChildren();
+    }
+    this.fiber!.appliedToDom = true;
+    this.fiber = null;
+  }
+
+  beforeRemove() {
+    this._destroy();
+  }
+
+  remove() {
+    this.bdom!.remove();
+  }
+
+  cleanOutdatedChildren() {
+    const children = this.children;
+    for (const key in children) {
+      const node = children[key];
+      const status = node.status;
+      if (status !== STATUS.MOUNTED) {
+        delete children[key];
+        if (status !== STATUS.DESTROYED) {
+          node.destroy();
+        }
+      }
+    }
+  }
+}

src/component/error_handling.ts

@@ -0,0 +1,66 @@
+import type { ComponentNode } from "./component_node";
+import type { Fiber } from "./fibers";
+
+// 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, isFirstRound = false): boolean {
+  if (!node) {
+    return false;
+  }
+  const fiber = node.fiber;
+  if (fiber) {
+    fibersInError.set(fiber, error);
+  }
+
+  const errorHandlers = nodeErrorHandlers.get(node);
+  if (errorHandlers) {
+    let stopped = false;
+    // execute in the opposite order
+    for (let i = errorHandlers.length - 1; i >= 0; i--) {
+      try {
+        errorHandlers[i](error);
+        stopped = true;
+        break;
+      } catch (e) {
+        error = e;
+      }
+    }
+
+    if (stopped) {
+      if (isFirstRound && fiber && fiber.node.fiber) {
+        fiber.root!.counter--;
+      }
+      return true;
+    }
+  }
+  return _handleError(node.parent, error);
+}
+
+type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
+export function handleError(params: ErrorParams) {
+  const error = params.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, true);
+  if (!handled) {
+    console.warn(`[Owl] Unhandled error. Destroying the root component`);
+    try {
+      node.app.destroy();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}

src/component/fibers.ts

@@ -0,0 +1,195 @@
+import { BDom, mount } from "../blockdom";
+import type { ComponentNode } from "./component_node";
+import { fibersInError, handleError } 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!;
+    root.counter -= cancelFibers(current.children);
+    current.children = [];
+    root.counter++;
+    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;
+}
+
+/**
+ * @returns number of not-yet rendered fibers cancelled
+ */
+function cancelFibers(fibers: Fiber[]): number {
+  let result = 0;
+  for (let fiber of fibers) {
+    fiber.node.fiber = null;
+    if (!fiber.bdom) {
+      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;
+
+  constructor(node: ComponentNode, parent: Fiber | null) {
+    this.node = node;
+    this.parent = parent;
+    if (parent) {
+      const root = parent.root!;
+      root.counter++;
+      this.root = root;
+      parent.children.push(this);
+    } else {
+      this.root = this as any;
+    }
+  }
+}
+
+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;
+      handleError({ fiber: current || this, error: e });
+    }
+  }
+}
+
+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.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) {
+      handleError({ fiber: current as Fiber, error: e });
+    }
+  }
+}

src/component/handler.ts

@@ -0,0 +1,44 @@
+import { filterOutModifiersFromData } from "../blockdom/config";
+import { STATUS } from "./status";
+
+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 Error(`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/component/lifecycle_hooks.ts

@@ -0,0 +1,106 @@
+import { getCurrent } from "./component_node";
+import { nodeErrorHandlers } from "./error_handling";
+
+function wrapError(fn: (...args: any[]) => any, hookName: string) {
+  const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
+    cause: any;
+  };
+  return (...args: any[]) => {
+    try {
+      const result = fn(...args);
+      if (result instanceof Promise) {
+        return result.catch((cause) => {
+          error.cause = cause;
+          if (cause instanceof Error) {
+            error.message += `"${cause.message}"`;
+          }
+          throw error;
+        });
+      }
+      return result;
+    } catch (cause) {
+      if (cause instanceof Error) {
+        error.message += `"${cause.message}"`;
+      }
+      throw error;
+    }
+  };
+}
+
+// -----------------------------------------------------------------------------
+//  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;
+  node.renderFn = decorate(() => {
+    fn.call(node.component);
+    return renderFn();
+  }, "onWillRender");
+}
+
+export function onRendered(fn: () => void | any) {
+  const node = getCurrent();
+  const renderFn = node.renderFn;
+  const decorate = node.app.dev ? wrapError : (fn: any) => fn;
+  node.renderFn = decorate(() => {
+    const result = renderFn();
+    fn.call(node.component);
+    return result;
+  }, "onRendered");
+}
+
+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/component/props_validation.ts

@@ -0,0 +1,150 @@
+import { ComponentConstructor } from "./component";
+
+/**
+ * Apply default props (only top level).
+ *
+ * Note that this method does modify in place the props
+ */
+export function applyDefaultProps<P>(props: P, ComponentClass: ComponentConstructor<P>) {
+  const defaultProps = ComponentClass.defaultProps;
+  if (defaultProps) {
+    for (let propName in defaultProps) {
+      if ((props as any)[propName] === undefined) {
+        (props as any)[propName] = defaultProps[propName];
+      }
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+// Prop validation helper
+//------------------------------------------------------------------------------
+function getPropDescription(staticProps: any) {
+  if (staticProps instanceof Array) {
+    return Object.fromEntries(
+      staticProps.map((p) => (p.endsWith("?") ? [p.slice(0, -1), false] : [p, true]))
+    );
+  }
+  return staticProps || { "*": true };
+}
+
+/**
+ * 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, parent?: any) {
+  const ComponentClass =
+    typeof name !== "string"
+      ? name
+      : (parent.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;
+  }
+  applyDefaultProps(props, ComponentClass);
+
+  const defaultProps = ComponentClass.defaultProps || {};
+  let propsDef = getPropDescription(ComponentClass.props);
+  const allowAdditionalProps = "*" in propsDef;
+
+  for (let propName in propsDef) {
+    if (propName === "*") {
+      continue;
+    }
+    const propDef = propsDef[propName];
+    let isMandatory = !!propDef;
+    if (typeof propDef === "object" && "optional" in propDef) {
+      isMandatory = !propDef.optional;
+    }
+    if (isMandatory && propName in defaultProps) {
+      throw new Error(
+        `A default value cannot be defined for a mandatory prop (name: '${propName}', component: ${ComponentClass.name})`
+      );
+    }
+    if ((props as any)[propName] === undefined) {
+      if (isMandatory) {
+        throw new Error(`Missing props '${propName}' (component '${ComponentClass.name}')`);
+      } else {
+        continue;
+      }
+    }
+    let isValid;
+    try {
+      isValid = isValidProp((props as any)[propName], propDef);
+    } catch (e) {
+      (e as Error).message = `Invalid prop '${propName}' in component ${ComponentClass.name} (${
+        (e as Error).message
+      })`;
+      throw e;
+    }
+    if (!isValid) {
+      throw new Error(`Invalid Prop '${propName}' in component '${ComponentClass.name}'`);
+    }
+  }
+  if (!allowAdditionalProps) {
+    for (let propName in props) {
+      if (!(propName in propsDef)) {
+        throw new Error(`Unknown prop '${propName}' given to component '${ComponentClass.name}'`);
+      }
+    }
+  }
+}
+
+/**
+ * Check if an invidual prop value matches its (static) prop definition
+ */
+function isValidProp(prop: any, propDef: any): boolean {
+  if (propDef === true) {
+    return true;
+  }
+  if (typeof propDef === "function") {
+    // Check if a value is constructed by some Constructor.  Note that there is a
+    // slight abuse of language: we want to consider primitive values as well.
+    //
+    // So, even though 1 is not an instance of Number, we want to consider that
+    // it is valid.
+    if (typeof prop === "object") {
+      return prop instanceof propDef;
+    }
+    return typeof prop === propDef.name.toLowerCase();
+  } else if (propDef instanceof Array) {
+    // If this code is executed, this means that we want to check if a prop
+    // matches at least one of its descriptor.
+    let result = false;
+    for (let i = 0, iLen = propDef.length; i < iLen; i++) {
+      result = result || isValidProp(prop, propDef[i]);
+    }
+    return result;
+  }
+  // propsDef is an object
+  if (propDef.optional && prop === undefined) {
+    return true;
+  }
+  let result = propDef.type ? isValidProp(prop, propDef.type) : true;
+  if (propDef.validate) {
+    result = result && propDef.validate(prop);
+  }
+  if (propDef.type === Array && propDef.element) {
+    for (let i = 0, iLen = prop.length; i < iLen; i++) {
+      result = result && isValidProp(prop[i], propDef.element);
+    }
+  }
+  if (propDef.type === Object && propDef.shape) {
+    const shape = propDef.shape;
+    for (let key in shape) {
+      result = result && isValidProp(prop[key], shape[key]);
+    }
+    if (result) {
+      for (let propName in prop) {
+        if (!(propName in shape)) {
+          throw new Error(`unknown prop '${propName}'`);
+        }
+      }
+    }
+  }
+  return result;
+}

src/component/scheduler.ts

@@ -0,0 +1,77 @@
+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();
+  isRunning: boolean = false;
+  requestAnimationFrame: Window["requestAnimationFrame"];
+
+  constructor() {
+    this.requestAnimationFrame = Scheduler.requestAnimationFrame;
+  }
+
+  start() {
+    this.isRunning = true;
+    this.scheduleTasks();
+  }
+
+  stop() {
+    this.isRunning = false;
+  }
+
+  addFiber(fiber: Fiber) {
+    this.tasks.add(fiber.root!);
+    if (!this.isRunning) {
+      this.start();
+    }
+  }
+
+  /**
+   * Process all current tasks. This only applies to the fibers that are ready.
+   * Other tasks are left unchanged.
+   */
+  flush() {
+    this.tasks.forEach((fiber) => {
+      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);
+      }
+    });
+    if (this.tasks.size === 0) {
+      this.stop();
+    }
+  }
+
+  scheduleTasks() {
+    this.requestAnimationFrame(() => {
+      this.flush();
+      if (this.isRunning) {
+        this.scheduleTasks();
+      }
+    });
+  }
+}

src/component/status.ts

@@ -0,0 +1,24 @@
+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/event_bus.ts

@@ -1,77 +0,0 @@
-/**
- * We define here a simple event bus: it can
- * - emit events
- * - add/remove listeners.
- *
- * This is a useful pattern of communication in some cases.
- */
-
-//------------------------------------------------------------------------------
-// Types
-//------------------------------------------------------------------------------
-
-export type Callback = (...args: any[]) => void;
-
-export interface Subscription {
-  owner: any;
-  callback: Callback;
-}
-
-//------------------------------------------------------------------------------
-// EventBus
-//------------------------------------------------------------------------------
-
-export class EventBus {
-  subscriptions: { [eventType: string]: Subscription[] } = {};
-
-  /**
-   * Add a listener for the 'eventType' events.
-   *
-   * Note that the 'owner' of this event can be anything, but will more likely
-   * be a widget or a class. The idea is that the callback will be called with
-   * the proper owner bound.
-   *
-   * Also, the owner should be kind of unique. This will be used to remove the
-   * listener.
-   */
-  on(eventType: string, owner: any, callback: Callback) {
-    if (!callback) {
-      throw new Error("Missing callback");
-    }
-    if (!this.subscriptions[eventType]) {
-      this.subscriptions[eventType] = [];
-    }
-    this.subscriptions[eventType].push({
-      owner,
-      callback
-    });
-  }
-
-  /**
-   * Remove a listener
-   */
-  off(eventType: string, owner: any) {
-    const subs = this.subscriptions[eventType];
-    if (subs) {
-      this.subscriptions[eventType] = subs.filter(s => s.owner !== owner);
-    }
-  }
-
-  /**
-   * Emit an event of type 'eventType'.  Any extra arguments will be passed to
-   * the listeners callback.
-   */
-  trigger(eventType: string, ...args: any[]) {
-    const subs = this.subscriptions[eventType] || [];
-    for (let sub of subs) {
-      sub.callback.call(sub.owner, ...args);
-    }
-  }
-
-  /**
-   * Remove all subscriptions.
-   */
-  clear() {
-    this.subscriptions = {};
-  }
-}

src/hooks.ts

@@ -0,0 +1,128 @@
+import type { Env } from "./app/app";
+import { getCurrent } from "./component/component_node";
+import { onMounted, onPatched, onWillUnmount } from "./component/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
+// -----------------------------------------------------------------------------
+
+const NO_OP = () => {};
+/**
+ * @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;
+  let dependencies: any[];
+  onMounted(() => {
+    dependencies = computeDependencies();
+    cleanup = effect(...dependencies) || NO_OP;
+  });
+
+  onPatched(() => {
+    const newDeps = computeDependencies();
+    const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
+    if (shouldReapply) {
+      dependencies = newDeps;
+      cleanup();
+      cleanup = effect(...dependencies) || NO_OP;
+    }
+  });
+
+  onWillUnmount(() => 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/index.ts

@@ -1,7 +1,61 @@
-export { Component } from "./component";
-export { EventBus } from "./event_bus";
-export { QWeb } from "./qweb";
-export { connect, Store } from "./store";
-import * as _utils from "./utils";
+import { UTILS } from "./app/template_helpers";
+import {
+  config,
+  createBlock,
+  html,
+  list,
+  mount as blockMount,
+  multi,
+  patch,
+  remove,
+  text,
+  toggler,
+  comment,
+} from "./blockdom";
+import { mainEventHandler } from "./component/handler";
+import { Portal } from "./portal";
+export type { Reactive } from "./reactivity";
 
-export const utils = _utils;
+config.shouldNormalizeDom = false;
+config.mainEventHandler = mainEventHandler;
+(UTILS as any).Portal = Portal;
+
+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/app";
+export { Component } from "./component/component";
+export { useComponent } from "./component/component_node";
+export { status } from "./component/status";
+export { Memo } from "./memo";
+export { xml } from "./app/template_set";
+export { useState, 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 "./component/lifecycle_hooks";
+
+export const __info__ = {};

src/memo.ts

@@ -0,0 +1,47 @@
+import { Component } from "./component/component";
+import type { ComponentNode } from "./component/component_node";
+import { xml } from "./app/template_set";
+import { Fiber } from "./component/fibers";
+
+export class Memo extends Component {
+  static template = xml`<t t-slot="default"/>`;
+
+  constructor(props: any, env: any, node: ComponentNode) {
+    super(props, env, node);
+
+    // prevent patching process conditionally
+    let applyPatch = false;
+    const patchFn = node.patch;
+    node.patch = () => {
+      if (applyPatch) {
+        patchFn.call(node);
+        applyPatch = false;
+      }
+    };
+
+    // check props change, and render/apply patch if it changed
+    let prevProps = props;
+    const updateAndRender = node.updateAndRender;
+    node.updateAndRender = function (props: any, parentFiber: Fiber) {
+      const shouldUpdate = !shallowEqual(prevProps, props);
+      if (shouldUpdate) {
+        prevProps = props;
+        updateAndRender.call(node, props, parentFiber);
+        applyPatch = true;
+      }
+      return Promise.resolve();
+    };
+  }
+}
+
+/**
+ * we assume that each object have the same set of keys
+ */
+function shallowEqual(p1: any, p2: any): boolean {
+  for (let k in p1) {
+    if (k !== "slots" && p1[k] !== p2[k]) {
+      return false;
+    }
+  }
+  return true;
+}

src/observer.ts

@@ -1,142 +0,0 @@
-//------------------------------------------------------------------------------
-// Observer
-//------------------------------------------------------------------------------
-
-const methodsToPatch = [
-  "push",
-  "pop",
-  "shift",
-  "unshift",
-  "splice",
-  "sort",
-  "reverse"
-];
-
-const ArrayProto = Array.prototype;
-const ModifiedArrayProto = Object.create(ArrayProto);
-
-for (let method of methodsToPatch) {
-  const initialMethod = ArrayProto[method];
-  ModifiedArrayProto[method] = function(...args) {
-    if (!this.__observer__.allowMutations) {
-      throw new Error(`Array cannot be changed here")`);
-    }
-    this.__observer__.notifyChange();
-    this.__owl__.rev++;
-    let parent = this;
-    do {
-      parent.__owl__.deepRev++;
-    } while ((parent = parent.__owl__.parent));
-    let inserted;
-    switch (method) {
-      case "push":
-      case "unshift":
-        inserted = args;
-        break;
-      case "splice":
-        inserted = args.slice(2);
-        break;
-    }
-    if (inserted) {
-      for (let elem of inserted) {
-        this.__observer__.observe(elem, this);
-      }
-    }
-    return initialMethod.call(this, ...args);
-  };
-}
-
-export class Observer {
-  rev: number = 1;
-  allowMutations: boolean = true;
-  dirty: boolean = false;
-
-  notifyCB() {}
-  notifyChange() {
-    this.rev++;
-    this.dirty = true;
-    Promise.resolve().then(() => {
-      if (this.dirty) {
-        this.dirty = false;
-        this.notifyCB();
-      }
-    });
-  }
-
-  observe(value: any, parent?: any) {
-    if (value === null) {
-      // fun fact: typeof null === 'object'
-      return;
-    }
-    if (typeof value !== "object") {
-      return;
-    }
-    if ("__owl__" in value) {
-      // already observed
-      value.__owl__.parent = parent;
-      return;
-    }
-    if (Array.isArray(value)) {
-      this._observeArr(value, parent);
-    } else {
-      this._observeObj(value, parent);
-    }
-  }
-
-  set(target: any, key: number | string, value: any) {
-    this._addProp(target, key, value);
-    target.__owl__.rev++;
-    this.notifyChange();
-  }
-
-  _observeObj<T extends { __owl__?: any }>(obj: T, parent?: any) {
-    const keys = Object.keys(obj);
-    obj.__owl__ = { rev: 1, deepRev: 1, parent };
-    Object.defineProperty(obj, "__owl__", { enumerable: false });
-    for (let key of keys) {
-      this._addProp(obj, key, obj[key]);
-    }
-  }
-
-  _observeArr(arr: Array<any>, parent?: any) {
-    (<any>arr).__owl__ = { rev: 1, deepRev: 1, parent };
-    Object.defineProperty(arr, "__owl__", { enumerable: false });
-    (<any>arr).__proto__ = Object.create(ModifiedArrayProto);
-    (<any>arr).__proto__.__observer__ = this;
-    for (let i = 0; i < arr.length; i++) {
-      this.observe(arr[i], arr);
-    }
-  }
-
-  _addProp<T extends { __owl__?: any }>(
-    obj: T,
-    key: string | number,
-    value: any
-  ) {
-    var self = this;
-    Object.defineProperty(obj, key, {
-      enumerable: true,
-      get() {
-        return value;
-      },
-      set(newVal) {
-        if (newVal !== value) {
-          if (!self.allowMutations) {
-            throw new Error(
-              `Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`
-            );
-          }
-          value = newVal;
-          self.observe(newVal, obj);
-          obj.__owl__.rev!++;
-          let parent = obj;
-          do {
-            parent.__owl__.deepRev++;
-          } while ((parent = parent.__owl__.parent) && parent !== obj);
-          self.notifyChange();
-        }
-      }
-    });
-    this.observe(value, obj);
-  }
-}

src/portal.ts

@@ -0,0 +1,75 @@
+import { onWillUnmount } from "./component/lifecycle_hooks";
+import { xml } from "./app/template_set";
+import { BDom, text, VNode } from "./blockdom";
+import { Component } from "./component/component";
+
+const VText: any = text("").constructor;
+
+class VPortal extends VText implements Partial<VNode<VPortal>> {
+  //   selector: string;
+  realBDom: BDom | null;
+  target: HTMLElement | null = null;
+
+  constructor(selector: string, realBDom: BDom) {
+    super("");
+    this.selector = selector;
+    this.realBDom = realBDom;
+  }
+  mount(parent: HTMLElement, anchor: ChildNode) {
+    super.mount(parent, anchor);
+    this.target = document.querySelector(this.selector) as any;
+    if (!this.target) {
+      let el: any = this.el;
+      while (el && el.parentElement instanceof HTMLElement) {
+        el = el.parentElement;
+      }
+      this.target = el && el.querySelector(this.selector);
+      if (!this.target) {
+        throw new Error("invalid portal target");
+      }
+    }
+    this.realBDom!.mount(this.target!, null);
+  }
+
+  beforeRemove() {
+    this.realBDom!.beforeRemove();
+  }
+  remove() {
+    if (this.realBDom) {
+      super.remove();
+      this.realBDom!.remove();
+      this.realBDom = null;
+    }
+  }
+
+  patch(other: VPortal) {
+    super.patch(other);
+    if (this.realBDom) {
+      this.realBDom.patch(other.realBDom!, true);
+    } else {
+      this.realBDom = other.realBDom;
+      this.realBDom!.mount(this.target!, null);
+    }
+  }
+}
+
+export class Portal extends Component {
+  static template = xml`<t t-slot="default"/>`;
+  static props = {
+    target: {
+      type: String,
+    },
+    slots: true,
+  };
+
+  setup() {
+    const node = this.__owl__;
+    const renderFn = node.renderFn;
+    node.renderFn = () => new VPortal(this.props.target, renderFn());
+    onWillUnmount(() => {
+      if (node.bdom) {
+        node.bdom.remove();
+      }
+    });
+  }
+}

src/reactivity.ts

@@ -0,0 +1,253 @@
+import { onWillDestroy } from "./component/lifecycle_hooks";
+import { ComponentNode, getCurrent } from "./component/component_node";
+import { batched, Callback } from "./utils";
+
+// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
+const TARGET = Symbol("Target");
+// Escape hatch to prevent reactivity system to turn something into a reactive
+const SKIP = Symbol("Skip");
+// Special key to subscribe to, to be notified of key creation/deletion
+const KEYCHANGES = Symbol("Key changes");
+
+type ObjectKey = string | number | symbol;
+
+type Target = object;
+
+export type Reactive<T extends Target = Target> = T & {
+  [TARGET]: any;
+};
+
+type NonReactive<T extends Target = Target> = T & {
+  [SKIP]: any;
+};
+const objectToString = Object.prototype.toString;
+
+/**
+ * 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;
+  }
+  // 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]).
+  const rawType = objectToString.call(value).slice(8, -1);
+  return rawType === "Object" || rawType === "Array";
+}
+
+/**
+ * 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): NonReactive<T> {
+  (value as any)[SKIP] = true;
+  return value as NonReactive<T>;
+}
+
+/**
+ * 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 object>(value: Reactive<T>): T {
+  return value[TARGET] || value;
+}
+
+const targetToKeysToCallbacks = new WeakMap<Target, Map<ObjectKey, 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: ObjectKey, 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: ObjectKey): 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
+ */
+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();
+}
+
+const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
+/**
+ * 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 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 = () => {}
+): Reactive<T> | NonReactive<T> {
+  if (!canBeMadeReactive(target)) {
+    throw new Error(`Cannot make the given value reactive`);
+  }
+  if (SKIP in target) {
+    return target as NonReactive<T>;
+  }
+  const originalTarget = (target as Reactive)[TARGET];
+  if (originalTarget) {
+    return reactive(originalTarget, callback);
+  }
+  if (!reactiveCache.has(target)) {
+    reactiveCache.set(target, new Map());
+  }
+  const reactivesForTarget = reactiveCache.get(target)!;
+  if (!reactivesForTarget.has(callback)) {
+    const proxy = new Proxy(target, {
+      get(target: any, key: ObjectKey, proxy: Reactive<T>) {
+        if (key === TARGET) {
+          return target;
+        }
+        observeTargetKey(target, key, callback);
+        const value = Reflect.get(target, key, proxy);
+        if (!canBeMadeReactive(value)) {
+          return value;
+        }
+        return reactive(value, callback);
+      },
+      set(target, key, value, proxy) {
+        const isNewKey = !Object.hasOwnProperty.call(target, key);
+        const originalValue = Reflect.get(target, key, proxy);
+        const ret = Reflect.set(target, key, value, proxy);
+        if (isNewKey) {
+          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 !== value || (Array.isArray(target) && key === "length")) {
+          notifyReactives(target, key);
+        }
+        return ret;
+      },
+      deleteProperty(target, key) {
+        const ret = Reflect.deleteProperty(target, key);
+        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
+        observeTargetKey(target, KEYCHANGES, callback);
+        return Reflect.has(target, key);
+      },
+    });
+    reactivesForTarget.set(callback, proxy);
+  }
+  return reactivesForTarget.get(callback) as Reactive<T>;
+}
+
+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): Reactive<T> | NonReactive<T> {
+  const node = getCurrent();
+  if (!batchedRenderFunctions.has(node)) {
+    batchedRenderFunctions.set(
+      node,
+      batched(() => node.render())
+    );
+    onWillDestroy(() => clearReactivesForCallback(render));
+  }
+  const render = batchedRenderFunctions.get(node)!;
+  const reactiveState = reactive(state, render);
+  return reactiveState;
+}

src/store.ts

@@ -1,218 +0,0 @@
-import { Component } from "./component";
-import { EventBus } from "./event_bus";
-import { Observer } from "./observer";
-
-//------------------------------------------------------------------------------
-// Store Definition
-//------------------------------------------------------------------------------
-
-interface StoreConfig {
-  env?: any;
-  state?: any;
-  actions?: any;
-  mutations?: { [name: string]: any };
-}
-
-interface StoreOption {
-  debug?: boolean;
-}
-
-export class Store extends EventBus {
-  state: any;
-  actions: any;
-  mutations: any;
-  _commitLevel: number = 0;
-  history: any[] = [];
-  debug: boolean;
-  env: any;
-  observer: Observer;
-  set: any;
-
-  constructor(config: StoreConfig, options: StoreOption = {}) {
-    super();
-    this.debug = options.debug || false;
-    this.state = config.state || {};
-    this.actions = config.actions;
-    this.mutations = config.mutations;
-    this.env = config.env;
-    this.observer = new Observer();
-    this.observer.notifyCB = this.trigger.bind(this, "update");
-    this.observer.allowMutations = false;
-    this.observer.observe(this.state);
-
-    if (this.debug) {
-      this.history.push({ state: this.state });
-    }
-    this.set = this.observer.set.bind(this.observer);
-  }
-
-  dispatch(action, payload?: any): Promise<void> | void {
-    if (!this.actions[action]) {
-      throw new Error(`[Error] action ${action} is undefined`);
-    }
-    const result = this.actions[action](
-      {
-        commit: this.commit.bind(this),
-        dispatch: this.dispatch.bind(this),
-        env: this.env,
-        state: this.state
-      },
-      payload
-    );
-    if (result instanceof Promise) {
-      return new Promise((resolve, reject) => {
-        result.then(() => resolve());
-        result.catch(reject);
-      });
-    }
-  }
-
-  commit(type, payload?: any) {
-    if (!this.mutations[type]) {
-      throw new Error(`[Error] mutation ${type} is undefined`);
-    }
-    this._commitLevel++;
-    this.observer.allowMutations = true;
-
-    const res = this.mutations[type].call(
-      null,
-      {
-        commit: this.commit.bind(this),
-        state: this.state,
-        set: this.set
-      },
-      payload
-    );
-
-    if (this._commitLevel === 1) {
-      this.observer.allowMutations = false;
-      if (this.debug) {
-        this.history.push({
-          state: this.state,
-          mutation: type,
-          payload: payload
-        });
-      }
-    }
-    this._commitLevel--;
-    return res;
-  }
-}
-
-//------------------------------------------------------------------------------
-// Connect function
-//------------------------------------------------------------------------------
-
-function revNumber<T extends Object>(o: T): number {
-  if (o !== null && typeof o === "object" && (<any>o).__owl__) {
-    return (<any>o).__owl__.rev;
-  }
-  return 0;
-}
-
-function deepRevNumber<T extends Object>(o: T): number {
-  if (o !== null && typeof o === "object" && (<any>o).__owl__) {
-    return (<any>o).__owl__.deepRev;
-  }
-  return 0;
-}
-
-export function connect(mapStateToProps, options: any = {}) {
-  let hashFunction = options.hashFunction || null;
-
-  if (!hashFunction) {
-    let deep = "deep" in options ? options.deep : true;
-    let defaultRevFunction = deep ? deepRevNumber : revNumber;
-    hashFunction = function({ storeProps }, options) {
-      const { currentStoreProps } = options;
-      if ("__owl__" in storeProps) {
-        return defaultRevFunction(storeProps);
-      }
-      let hash = 0;
-      for (let key in storeProps) {
-        const val = storeProps[key];
-        const hashVal = defaultRevFunction(val);
-        if (hashVal === 0) {
-          if (val !== currentStoreProps[key]) {
-            options.didChange = true;
-          }
-        } else {
-          hash += hashVal;
-        }
-      }
-      return hash;
-    };
-  }
-
-  return function(Comp) {
-    return class extends Comp {
-      constructor(parent, props?: any) {
-        const env = parent instanceof Component ? parent.env : parent;
-        const ownProps = Object.assign({}, props || {});
-        const storeProps = mapStateToProps(env.store.state, ownProps);
-        const mergedProps = Object.assign({}, props || {}, storeProps);
-        super(parent, mergedProps);
-        this.__owl__.ownProps = ownProps;
-        this.__owl__.currentStoreProps = storeProps;
-        this.__owl__.storeHash = hashFunction(
-          {
-            state: env.store.state,
-            storeProps: storeProps,
-            revNumber,
-            deepRevNumber
-          },
-          {
-            currentStoreProps: storeProps
-          }
-        );
-      }
-      mounted() {
-        this.env.store.on("update", this, () => {
-          const ownProps = this.__owl__.ownProps;
-          const storeProps = mapStateToProps(this.env.store.state, ownProps);
-          const options: any = {
-            currentStoreProps: this.__owl__.currentStoreProps
-          };
-          const storeHash = hashFunction(
-            {
-              state: this.env.store.state,
-              storeProps: storeProps,
-              revNumber,
-              deepRevNumber
-            },
-            options
-          );
-          let didChange = options.didChange;
-          if (storeHash !== this.__owl__.storeHash) {
-            didChange = true;
-            this.__owl__.storeHash = storeHash;
-          }
-          if (didChange) {
-            this.__owl__.currentStoreProps = storeProps;
-            this.updateProps(ownProps, false);
-          }
-        });
-        super.mounted();
-      }
-      willUnmount() {
-        this.env.store.off("update", this);
-        super.willUnmount();
-      }
-      updateProps(nextProps, forceUpdate) {
-        if (this.__owl__.ownProps !== nextProps) {
-          this.__owl__.currentStoreProps = mapStateToProps(
-            this.env.store.state,
-            nextProps
-          );
-        }
-        this.__owl__.ownProps = nextProps;
-        const mergedProps = Object.assign(
-          {},
-          nextProps,
-          this.__owl__.currentStoreProps
-        );
-        return super.updateProps(mergedProps, forceUpdate);
-      }
-    };
-  };
-}

src/utils.ts

@@ -1,175 +1,73 @@
-export function escape(str: string | number | undefined): string {
-  if (str === undefined) {
-    return "";
-  }
-  if (typeof str === "number") {
-    return String(str);
-  }
-  return str
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&#x27;")
-    .replace(/`/g, "&#x60;");
-}
+export type Callback = () => void;
 
 /**
- * Remove trailing and leading spaces
- */
-export function htmlTrim(s: string): string {
-  let result = s.replace(/(^\s+|\s+$)/g, "");
-  if (s[0] === " ") {
-    result = " " + result;
-  }
-  if (result !== " " && s[s.length - 1] === " ") {
-    result = result + " ";
-  }
-  return result;
-}
-
-/**
- * Create a function that will generate unique id numbers
- */
-export function idGenerator(): () => number {
-  let nextID = 1;
-  return () => nextID++;
-}
-
-export type HashFn = (args: any[]) => string;
-
-export function memoize<R, T extends (...args: any[]) => R>(
-  f: T,
-  hash?: HashFn
-): T {
-  if (!hash) {
-    hash = args => args.map(a => String(a)).join(",");
-  }
-  let cache: { [key: string]: R } = {};
-  function memoizedFunction(...args: any[]) {
-    let hashValue = hash!(args);
-    if (!(hashValue in cache)) {
-      cache[hashValue] = f(...args);
-    }
-    return cache[hashValue];
-  }
-  return memoizedFunction as T;
-}
-
-/**
- * Returns a function, that, as long as it continues to be invoked, will not
- * be triggered. The function will be called after it stops being called for
- * N milliseconds. If `immediate` is passed, trigger the function on the
- * leading edge, instead of the trailing.
+ * Creates a batched version of a callback so that all calls to it in the same
+ * microtick will only call the original callback once.
  *
- * Inspired by https://davidwalsh.name/javascript-debounce-function
+ * @param callback the callback to batch
+ * @returns a batched version of the original callback
  */
-export function debounce(
-  func: Function,
-  wait: number,
-  immediate?: boolean
-): Function {
-  let timeout;
-  return function(this: any) {
-    const context = this;
-    const args = arguments;
-    function later() {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    }
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
+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;
+      callback();
+      // 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
+      await Promise.resolve();
+      called = false;
     }
   };
 }
 
-interface Tree<T> {
-  children: T[];
+export function validateTarget(target: HTMLElement) {
+  if (!(target instanceof HTMLElement)) {
+    throw new Error("Cannot mount component: the target is not a valid DOM element");
+  }
+  if (!document.body.contains(target)) {
+    throw new Error("Cannot mount a component on a detached dom node");
+  }
 }
 
-/**
- * Find a node in a tree.
- *
- * This will traverse the tree (depth first) and return the first child that
- * matches the predicate, if any
- */
-export function findInTree<T extends Tree<T>>(
-  tree: T,
-  predicate: (t: T) => boolean
-): T | null {
-  if (predicate(tree)) {
-    return tree;
+export class EventBus extends EventTarget {
+  trigger(name: string, payload?: any) {
+    this.dispatchEvent(new CustomEvent(name, { detail: payload }));
   }
-  for (let child of tree.children) {
-    let match = findInTree(child, predicate);
-    if (match) {
-      return match;
+}
+
+export function whenReady(fn?: any): Promise<void> {
+  return new Promise(function (resolve) {
+    if (document.readyState !== "loading") {
+      resolve(true);
+    } else {
+      document.addEventListener("DOMContentLoaded", resolve, false);
     }
-  }
-  return null;
+  }).then(fn || function () {});
 }
 
-export function patch(C: any, patchName: string, patch: any) {
-  const proto = C.prototype;
-  if (!proto.__patches) {
-    proto.__patches = {
-      origMethods: {},
-      patches: {},
-      current: []
-    };
-  }
-  if (proto.__patches.patches[patchName]) {
-    throw new Error(`Patch [${patchName}] already exists`);
-  }
-  proto.__patches.patches[patchName] = patch;
-  applyPatch(proto, patch);
-  proto.__patches.current.push(patchName);
-
-  function applyPatch(proto, patch) {
-    Object.keys(patch).forEach(function(methodName) {
-      const method = patch[methodName];
-      if (typeof method === "function") {
-        const original = proto[methodName];
-        if (!(methodName in proto.__patches.origMethods)) {
-          proto.__patches.origMethods[methodName] = original;
-        }
-        proto[methodName] = function(...args) {
-          this._super = original;
-          return method.call(this, ...args);
-        };
-      }
-    });
-  }
-}
-
-export function unpatch(C: any, patchName: string) {
-  const proto = C.prototype;
-  const patchInfo = proto.__patches;
-  delete proto.__patches;
-
-  // reset to original
-  for (let k in patchInfo.origMethods) {
-    proto[k] = patchInfo.origMethods[k];
-  }
-
-  // apply other patches
-  for (let name of patchInfo.current) {
-    if (name !== patchName) {
-      patch(C, name, patchInfo.patches[name]);
-    }
-  }
-}
-
-export async function loadTemplates(url: string): Promise<string> {
+export async function loadFile(url: string): Promise<string> {
   const result = await fetch(url);
   if (!result.ok) {
     throw new Error("Error while fetching xml templates");
   }
-  let templates = await result.text();
-  templates = templates.replace(/<!--[\s\S]*?-->/g, "");
-  return 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/vdom.ts

@@ -1,921 +0,0 @@
-
-// because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
-declare global {
-  interface Element {
-    setAttribute(name: string, value: string | number | boolean): void;
-    setAttributeNS(namespaceURI: string, qualifiedName: string, value: string | number | boolean): void;
-  }
-}
-
-//------------------------------------------------------------------------------
-// vnode.ts
-//------------------------------------------------------------------------------
-type Key = string | number;
-
-export interface VNode {
-  sel: string | undefined;
-  data: VNodeData | undefined;
-  children: Array<VNode | string> | undefined;
-  elm: Node | undefined;
-  text: string | undefined;
-  key: Key | undefined;
-}
-
-interface VNodeData {
-  props?: Props;
-  attrs?: Attrs;
-  on?: On;
-  hook?: Hooks;
-  key?: Key;
-  ns?: string; // for SVGs
-  fn?: () => VNode; // for thunks
-  args?: Array<any>; // for thunks
-  [key: string]: any; // for any other 3rd party module
-}
-
-function vnode(
-  sel: string | undefined,
-  data: any | undefined,
-  children: Array<VNode | string> | undefined,
-  text: string | undefined,
-  elm: Element | Text | undefined
-): VNode {
-  let key = data === undefined ? undefined : data.key;
-  return {
-    sel: sel,
-    data: data,
-    children: children,
-    text: text,
-    elm: elm,
-    key: key
-  };
-}
-
-//------------------------------------------------------------------------------
-// snabbdom.ts
-//------------------------------------------------------------------------------
-function isUndef(s: any): boolean {
-  return s === undefined;
-}
-function isDef(s: any): boolean {
-  return s !== undefined;
-}
-
-type VNodeQueue = Array<VNode>;
-
-const emptyNode = vnode("", {}, [], undefined, undefined);
-
-function sameVnode(vnode1: VNode, vnode2: VNode): boolean {
-  return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
-}
-
-function isVnode(vnode: any): vnode is VNode {
-  return vnode.sel !== undefined;
-}
-
-type KeyToIndexMap = { [key: string]: number };
-
-type ArraysOf<T> = { [K in keyof T]: (T[K])[] };
-
-type ModuleHooks = ArraysOf<Module>;
-
-function createKeyToOldIdx(
-  children: Array<VNode>,
-  beginIdx: number,
-  endIdx: number
-): KeyToIndexMap {
-  let i: number,
-    map: KeyToIndexMap = {},
-    key: Key | undefined,
-    ch;
-  for (i = beginIdx; i <= endIdx; ++i) {
-    ch = children[i];
-    if (ch != null) {
-      key = ch.key;
-      if (key !== undefined) map[key] = i;
-    }
-  }
-  return map;
-}
-
-const hooks: (keyof Module)[] = [
-  "create",
-  "update",
-  "remove",
-  "destroy",
-  "pre",
-  "post"
-];
-
-export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
-  let i: number,
-    j: number,
-    cbs = {} as ModuleHooks;
-
-  const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
-
-  for (i = 0; i < hooks.length; ++i) {
-    cbs[hooks[i]] = [];
-    for (j = 0; j < modules.length; ++j) {
-      const hook = modules[j][hooks[i]];
-      if (hook !== undefined) {
-        (cbs[hooks[i]] as Array<any>).push(hook);
-      }
-    }
-  }
-
-  function emptyNodeAt(elm: Element) {
-    const id = elm.id ? "#" + elm.id : "";
-    const c = elm.className ? "." + elm.className.split(" ").join(".") : "";
-    return vnode(
-      api.tagName(elm).toLowerCase() + id + c,
-      {},
-      [],
-      undefined,
-      elm
-    );
-  }
-
-  function createRmCb(childElm: Node, listeners: number) {
-    return function rmCb() {
-      if (--listeners === 0) {
-        const parent = api.parentNode(childElm);
-        api.removeChild(parent, childElm);
-      }
-    };
-  }
-
-  function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
-    let i: any,
-      data = vnode.data;
-    if (data !== undefined) {
-      if (isDef((i = data.hook)) && isDef((i = i.init))) {
-        i(vnode);
-        data = vnode.data;
-      }
-    }
-    let children = vnode.children,
-      sel = vnode.sel;
-    if (sel === "!") {
-      if (isUndef(vnode.text)) {
-        vnode.text = "";
-      }
-      vnode.elm = api.createComment(vnode.text as string);
-    } else if (sel !== undefined) {
-      // Parse selector
-      const hashIdx = sel.indexOf("#");
-      const dotIdx = sel.indexOf(".", hashIdx);
-      const hash = hashIdx > 0 ? hashIdx : sel.length;
-      const dot = dotIdx > 0 ? dotIdx : sel.length;
-      const tag =
-        hashIdx !== -1 || dotIdx !== -1
-          ? sel.slice(0, Math.min(hash, dot))
-          : sel;
-      const elm = (vnode.elm =
-        isDef(data) && isDef((i = (data as VNodeData).ns))
-          ? api.createElementNS(i, tag)
-          : api.createElement(tag));
-      if (hash < dot) elm.setAttribute("id", sel.slice(hash + 1, dot));
-      if (dotIdx > 0)
-        elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " "));
-      for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
-      if (array(children)) {
-        for (i = 0; i < children.length; ++i) {
-          const ch = children[i];
-          if (ch != null) {
-            api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));
-          }
-        }
-      } else if (primitive(vnode.text)) {
-        api.appendChild(elm, api.createTextNode(vnode.text));
-      }
-      i = (vnode.data as VNodeData).hook; // Reuse variable
-      if (isDef(i)) {
-        if (i.create) i.create(emptyNode, vnode);
-        if (i.insert) insertedVnodeQueue.push(vnode);
-      }
-    } else {
-      vnode.elm = api.createTextNode(vnode.text as string);
-    }
-    return vnode.elm;
-  }
-
-  function addVnodes(
-    parentElm: Node,
-    before: Node | null,
-    vnodes: Array<VNode>,
-    startIdx: number,
-    endIdx: number,
-    insertedVnodeQueue: VNodeQueue
-  ) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx];
-      if (ch != null) {
-        api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before);
-      }
-    }
-  }
-
-  function invokeDestroyHook(vnode: VNode) {
-    let i: any,
-      j: number,
-      data = vnode.data;
-    if (data !== undefined) {
-      if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode);
-      for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
-      if (vnode.children !== undefined) {
-        for (j = 0; j < vnode.children.length; ++j) {
-          i = vnode.children[j];
-          if (i != null && typeof i !== "string") {
-            invokeDestroyHook(i);
-          }
-        }
-      }
-    }
-  }
-
-  function removeVnodes(
-    parentElm: Node,
-    vnodes: Array<VNode>,
-    startIdx: number,
-    endIdx: number
-  ): void {
-    for (; startIdx <= endIdx; ++startIdx) {
-      let i: any,
-        listeners: number,
-        rm: () => void,
-        ch = vnodes[startIdx];
-      if (ch != null) {
-        if (isDef(ch.sel)) {
-          invokeDestroyHook(ch);
-          listeners = cbs.remove.length + 1;
-          rm = createRmCb(ch.elm as Node, listeners);
-          for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
-          if (
-            isDef((i = ch.data)) &&
-            isDef((i = i.hook)) &&
-            isDef((i = i.remove))
-          ) {
-            i(ch, rm);
-          } else {
-            rm();
-          }
-        } else {
-          // Text node
-          api.removeChild(parentElm, ch.elm as Node);
-        }
-      }
-    }
-  }
-
-  function updateChildren(
-    parentElm: Node,
-    oldCh: Array<VNode>,
-    newCh: Array<VNode>,
-    insertedVnodeQueue: VNodeQueue
-  ) {
-    let oldStartIdx = 0,
-      newStartIdx = 0;
-    let oldEndIdx = oldCh.length - 1;
-    let oldStartVnode = oldCh[0];
-    let oldEndVnode = oldCh[oldEndIdx];
-    let newEndIdx = newCh.length - 1;
-    let newStartVnode = newCh[0];
-    let newEndVnode = newCh[newEndIdx];
-    let oldKeyToIdx: any;
-    let idxInOld: number;
-    let elmToMove: VNode;
-    let before: any;
-
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-      if (oldStartVnode == null) {
-        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-      } else if (oldEndVnode == null) {
-        oldEndVnode = oldCh[--oldEndIdx];
-      } else if (newStartVnode == null) {
-        newStartVnode = newCh[++newStartIdx];
-      } else if (newEndVnode == null) {
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
-        oldStartVnode = oldCh[++oldStartIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newEndVnode)) {
-        // Vnode moved right
-        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
-        api.insertBefore(
-          parentElm,
-          oldStartVnode.elm as Node,
-          api.nextSibling(oldEndVnode.elm as Node)
-        );
-        oldStartVnode = oldCh[++oldStartIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldEndVnode, newStartVnode)) {
-        // Vnode moved left
-        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
-        api.insertBefore(
-          parentElm,
-          oldEndVnode.elm as Node,
-          oldStartVnode.elm as Node
-        );
-        oldEndVnode = oldCh[--oldEndIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        if (oldKeyToIdx === undefined) {
-          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-        }
-        idxInOld = oldKeyToIdx[newStartVnode.key as string];
-        if (isUndef(idxInOld)) {
-          // New element
-          api.insertBefore(
-            parentElm,
-            createElm(newStartVnode, insertedVnodeQueue),
-            oldStartVnode.elm as Node
-          );
-          newStartVnode = newCh[++newStartIdx];
-        } else {
-          elmToMove = oldCh[idxInOld];
-          if (elmToMove.sel !== newStartVnode.sel) {
-            api.insertBefore(
-              parentElm,
-              createElm(newStartVnode, insertedVnodeQueue),
-              oldStartVnode.elm as Node
-            );
-          } else {
-            patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
-            oldCh[idxInOld] = undefined as any;
-            api.insertBefore(
-              parentElm,
-              elmToMove.elm as Node,
-              oldStartVnode.elm as Node
-            );
-          }
-          newStartVnode = newCh[++newStartIdx];
-        }
-      }
-    }
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-      if (oldStartIdx > oldEndIdx) {
-        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
-        addVnodes(
-          parentElm,
-          before,
-          newCh,
-          newStartIdx,
-          newEndIdx,
-          insertedVnodeQueue
-        );
-      } else {
-        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
-      }
-    }
-  }
-
-  function patchVnode(
-    oldVnode: VNode,
-    vnode: VNode,
-    insertedVnodeQueue: VNodeQueue
-  ) {
-    let i: any, hook: any;
-    if (
-      isDef((i = vnode.data)) &&
-      isDef((hook = i.hook)) &&
-      isDef((i = hook.prepatch))
-    ) {
-      i(oldVnode, vnode);
-    }
-    const elm = (vnode.elm = oldVnode.elm as Node);
-    let oldCh = oldVnode.children;
-    let ch = vnode.children;
-    if (oldVnode === vnode) return;
-    if (vnode.data !== undefined) {
-      for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
-      i = vnode.data.hook;
-      if (isDef(i) && isDef((i = i.update))) i(oldVnode, vnode);
-    }
-    if (isUndef(vnode.text)) {
-      if (isDef(oldCh) && isDef(ch)) {
-        if (oldCh !== ch)
-          updateChildren(
-            elm,
-            oldCh as Array<VNode>,
-            ch as Array<VNode>,
-            insertedVnodeQueue
-          );
-      } else if (isDef(ch)) {
-        if (isDef(oldVnode.text)) api.setTextContent(elm, "");
-        addVnodes(
-          elm,
-          null,
-          ch as Array<VNode>,
-          0,
-          (ch as Array<VNode>).length - 1,
-          insertedVnodeQueue
-        );
-      } else if (isDef(oldCh)) {
-        removeVnodes(
-          elm,
-          oldCh as Array<VNode>,
-          0,
-          (oldCh as Array<VNode>).length - 1
-        );
-      } else if (isDef(oldVnode.text)) {
-        api.setTextContent(elm, "");
-      }
-    } else if (oldVnode.text !== vnode.text) {
-      if (isDef(oldCh)) {
-        removeVnodes(
-          elm,
-          oldCh as Array<VNode>,
-          0,
-          (oldCh as Array<VNode>).length - 1
-        );
-      }
-      api.setTextContent(elm, vnode.text as string);
-    }
-    if (isDef(hook) && isDef((i = hook.postpatch))) {
-      i(oldVnode, vnode);
-    }
-  }
-
-  return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
-    let i: number, elm: Node, parent: Node;
-    const insertedVnodeQueue: VNodeQueue = [];
-    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
-
-    if (!isVnode(oldVnode)) {
-      oldVnode = emptyNodeAt(oldVnode);
-    }
-
-    if (sameVnode(oldVnode, vnode)) {
-      patchVnode(oldVnode, vnode, insertedVnodeQueue);
-    } else {
-      elm = oldVnode.elm as Node;
-      parent = api.parentNode(elm);
-
-      createElm(vnode, insertedVnodeQueue);
-
-      if (parent !== null) {
-        api.insertBefore(parent, vnode.elm as Node, api.nextSibling(elm));
-        removeVnodes(parent, [oldVnode], 0, 0);
-      }
-    }
-
-    for (i = 0; i < insertedVnodeQueue.length; ++i) {
-      (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(
-        insertedVnodeQueue[i]
-      );
-    }
-    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
-    return vnode;
-  };
-}
-
-//------------------------------------------------------------------------------
-// is.ts
-//------------------------------------------------------------------------------
-const array = Array.isArray;
-function primitive(s: any): s is string | number {
-  return typeof s === "string" || typeof s === "number";
-}
-
-//------------------------------------------------------------------------------
-// htmldomapi.ts
-//------------------------------------------------------------------------------
-interface DOMAPI {
-  createElement: (tagName: any) => HTMLElement;
-  createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
-  createTextNode: (text: string) => Text;
-  createComment: (text: string) => Comment;
-  insertBefore: (
-    parentNode: Node,
-    newNode: Node,
-    referenceNode: Node | null
-  ) => void;
-  removeChild: (node: Node, child: Node) => void;
-  appendChild: (node: Node, child: Node) => void;
-  parentNode: (node: Node) => Node;
-  nextSibling: (node: Node) => Node;
-  tagName: (elm: Element) => string;
-  setTextContent: (node: Node, text: string | null) => void;
-  getTextContent: (node: Node) => string | null;
-  isElement: (node: Node) => node is Element;
-  isText: (node: Node) => node is Text;
-  isComment: (node: Node) => node is Comment;
-}
-
-function createElement(tagName: any): HTMLElement {
-  return document.createElement(tagName);
-}
-
-function createElementNS(namespaceURI: string, qualifiedName: string): Element {
-  return document.createElementNS(namespaceURI, qualifiedName);
-}
-
-function createTextNode(text: string): Text {
-  return document.createTextNode(text);
-}
-
-function createComment(text: string): Comment {
-  return document.createComment(text);
-}
-
-function insertBefore(
-  parentNode: Node,
-  newNode: Node,
-  referenceNode: Node | null
-): void {
-  parentNode.insertBefore(newNode, referenceNode);
-}
-
-function removeChild(node: Node, child: Node): void {
-  node.removeChild(child);
-}
-
-function appendChild(node: Node, child: Node): void {
-  node.appendChild(child);
-}
-
-function parentNode(node: Node): Node | null {
-  return node.parentNode;
-}
-
-function nextSibling(node: Node): Node | null {
-  return node.nextSibling;
-}
-
-function tagName(elm: Element): string {
-  return elm.tagName;
-}
-
-function setTextContent(node: Node, text: string | null): void {
-  node.textContent = text;
-}
-
-function getTextContent(node: Node): string | null {
-  return node.textContent;
-}
-
-function isElement(node: Node): node is Element {
-  return node.nodeType === 1;
-}
-
-function isText(node: Node): node is Text {
-  return node.nodeType === 3;
-}
-
-function isComment(node: Node): node is Comment {
-  return node.nodeType === 8;
-}
-
-const htmlDomApi = {
-  createElement,
-  createElementNS,
-  createTextNode,
-  createComment,
-  insertBefore,
-  removeChild,
-  appendChild,
-  parentNode,
-  nextSibling,
-  tagName,
-  setTextContent,
-  getTextContent,
-  isElement,
-  isText,
-  isComment
-} as DOMAPI;
-
-//------------------------------------------------------------------------------
-// hooks.ts
-//------------------------------------------------------------------------------
-type PreHook = () => any;
-type InitHook = (vNode: VNode) => any;
-type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
-type InsertHook = (vNode: VNode) => any;
-type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
-type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
-type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
-type DestroyHook = (vNode: VNode) => any;
-type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
-type PostHook = () => any;
-
-interface Hooks {
-  pre?: PreHook;
-  init?: InitHook;
-  create?: CreateHook;
-  insert?: InsertHook;
-  prepatch?: PrePatchHook;
-  update?: UpdateHook;
-  postpatch?: PostPatchHook;
-  destroy?: DestroyHook;
-  remove?: RemoveHook;
-  post?: PostHook;
-}
-
-//------------------------------------------------------------------------------
-// h.ts
-//------------------------------------------------------------------------------
-type VNodes = Array<VNode>;
-type VNodeChildElement = VNode | string | number | undefined | null;
-type ArrayOrElement<T> = T | T[];
-type VNodeChildren = ArrayOrElement<VNodeChildElement>;
-
-function addNS(
-  data: any,
-  children: VNodes | undefined,
-  sel: string | undefined
-): void {
-  data.ns = "http://www.w3.org/2000/svg";
-  if (sel !== "foreignObject" && children !== undefined) {
-    for (let i = 0; i < children.length; ++i) {
-      let childData = children[i].data;
-      if (childData !== undefined) {
-        addNS(
-          childData,
-          (children[i] as VNode).children as VNodes,
-          children[i].sel
-        );
-      }
-    }
-  }
-}
-
-export function h(sel: string): VNode;
-export function h(sel: string, data: VNodeData): VNode;
-export function h(sel: string, children: VNodeChildren): VNode;
-export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
-export function h(sel: any, b?: any, c?: any): VNode {
-  var data: VNodeData = {},
-    children: any,
-    text: any,
-    i: number;
-  if (c !== undefined) {
-    data = b;
-    if (array(c)) {
-      children = c;
-    } else if (primitive(c)) {
-      text = c;
-    } else if (c && c.sel) {
-      children = [c];
-    }
-  } else if (b !== undefined) {
-    if (array(b)) {
-      children = b;
-    } else if (primitive(b)) {
-      text = b;
-    } else if (b && b.sel) {
-      children = [b];
-    } else {
-      data = b;
-    }
-  }
-  if (children !== undefined) {
-    for (i = 0; i < children.length; ++i) {
-      if (primitive(children[i]))
-        children[i] = vnode(
-          undefined,
-          undefined,
-          undefined,
-          children[i],
-          undefined
-        );
-    }
-  }
-  if (
-    sel[0] === "s" &&
-    sel[1] === "v" &&
-    sel[2] === "g" &&
-    (sel.length === 3 || sel[3] === "." || sel[3] === "#")
-  ) {
-    addNS(data, children, sel);
-  }
-  return vnode(sel, data, children, text, undefined);
-}
-
-//------------------------------------------------------------------------------
-// module/props.ts
-//------------------------------------------------------------------------------
-type Props = Record<string, any>;
-
-function updateProps(oldVnode: VNode, vnode: VNode): void {
-  var key: string,
-    cur: any,
-    old: any,
-    elm = vnode.elm,
-    oldProps = (oldVnode.data as VNodeData).props,
-    props = (vnode.data as VNodeData).props;
-
-  if (!oldProps && !props) return;
-  if (oldProps === props) return;
-  oldProps = oldProps || {};
-  props = props || {};
-
-  for (key in oldProps) {
-    if (!props[key]) {
-      delete (elm as any)[key];
-    }
-  }
-  for (key in props) {
-    cur = props[key];
-    old = oldProps[key];
-    if (old !== cur && (key !== "value" || (elm as any)[key] !== cur)) {
-      (elm as any)[key] = cur;
-    }
-  }
-}
-
-export const propsModule = {
-  create: updateProps,
-  update: updateProps
-} as Module;
-
-//------------------------------------------------------------------------------
-// module/module.ts
-//------------------------------------------------------------------------------
-interface Module {
-  pre: PreHook;
-  create: CreateHook;
-  update: UpdateHook;
-  destroy: DestroyHook;
-  remove: RemoveHook;
-  post: PostHook;
-}
-
-//------------------------------------------------------------------------------
-// module/eventlisteners.ts
-//------------------------------------------------------------------------------
-type On = {
-  [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void
-} & {
-  [event: string]: EventListener;
-};
-
-function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
-  if (typeof handler === "function") {
-    // call function handler
-    handler.call(vnode, event, vnode);
-  } else if (typeof handler === "object") {
-    // call handler with arguments
-    if (typeof handler[0] === "function") {
-      // special case for single argument for performance
-      if (handler.length === 2) {
-        handler[0].call(vnode, handler[1], event, vnode);
-      } else {
-        var args = handler.slice(1);
-        args.push(event);
-        args.push(vnode);
-        handler[0].apply(vnode, args);
-      }
-    } else {
-      // call multiple handlers
-      for (var i = 0; i < handler.length; i++) {
-        invokeHandler(handler[i], vnode, event);
-      }
-    }
-  }
-}
-
-function handleEvent(event: Event, vnode: VNode) {
-  var name = event.type,
-    on = (vnode.data as VNodeData).on;
-
-  // call event handler(s) if exists
-  if (on && on[name]) {
-    invokeHandler(on[name], vnode, event);
-  }
-}
-
-function createListener() {
-  return function handler(event: Event) {
-    handleEvent(event, (handler as any).vnode);
-  };
-}
-
-function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
-  var oldOn = (oldVnode.data as VNodeData).on,
-    oldListener = (oldVnode as any).listener,
-    oldElm: Element = oldVnode.elm as Element,
-    on = vnode && (vnode.data as VNodeData).on,
-    elm: Element = (vnode && vnode.elm) as Element,
-    name: string;
-
-  // optimization for reused immutable handlers
-  if (oldOn === on) {
-    return;
-  }
-
-  // remove existing listeners which no longer used
-  if (oldOn && oldListener) {
-    // if element changed or deleted we remove all existing listeners unconditionally
-    if (!on) {
-      for (name in oldOn) {
-        // remove listener if element was changed or existing listeners removed
-        oldElm.removeEventListener(name, oldListener, false);
-      }
-    } else {
-      for (name in oldOn) {
-        // remove listener if existing listener removed
-        if (!on[name]) {
-          oldElm.removeEventListener(name, oldListener, false);
-        }
-      }
-    }
-  }
-
-  // add new listeners which has not already attached
-  if (on) {
-    // reuse existing listener or create new
-    var listener = ((vnode as any).listener =
-      (oldVnode as any).listener || createListener());
-    // update vnode for listener
-    listener.vnode = vnode;
-
-    // if element changed or added we add all needed listeners unconditionally
-    if (!oldOn) {
-      for (name in on) {
-        // add listener if element was changed or new listeners added
-        elm.addEventListener(name, listener, false);
-      }
-    } else {
-      for (name in on) {
-        // add listener if new listener added
-        if (!oldOn[name]) {
-          elm.addEventListener(name, listener, false);
-        }
-      }
-    }
-  }
-}
-
-export const eventListenersModule = {
-  create: updateEventListeners,
-  update: updateEventListeners,
-  destroy: updateEventListeners
-} as Module;
-
-//------------------------------------------------------------------------------
-// attributes.ts
-//------------------------------------------------------------------------------
-type Attrs = Record<string, string | number | boolean>;
-
-const xlinkNS = "http://www.w3.org/1999/xlink";
-const xmlNS = "http://www.w3.org/XML/1998/namespace";
-const colonChar = 58;
-const xChar = 120;
-
-function updateAttrs(oldVnode: VNode, vnode: VNode): void {
-  var key: string,
-    elm: Element = vnode.elm as Element,
-    oldAttrs = (oldVnode.data as VNodeData).attrs,
-    attrs = (vnode.data as VNodeData).attrs;
-
-  if (!oldAttrs && !attrs) return;
-  if (oldAttrs === attrs) return;
-  oldAttrs = oldAttrs || {};
-  attrs = attrs || {};
-
-  // update modified attributes, add new attributes
-  for (key in attrs) {
-    const cur = attrs[key];
-    const old = oldAttrs[key];
-    if (old !== cur) {
-      if (cur === true) {
-        elm.setAttribute(key, "");
-      } else if (cur === false) {
-        elm.removeAttribute(key);
-      } else {
-        if (key.charCodeAt(0) !== xChar) {
-          elm.setAttribute(key, cur);
-        } else if (key.charCodeAt(3) === colonChar) {
-          // Assume xml namespace
-          elm.setAttributeNS(xmlNS, key, cur);
-        } else if (key.charCodeAt(5) === colonChar) {
-          // Assume xlink namespace
-          elm.setAttributeNS(xlinkNS, key, cur);
-        } else {
-          elm.setAttribute(key, cur);
-        }
-      }
-    }
-  }
-  // remove removed attributes
-  // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
-  // the other option is to remove all attributes with value == undefined
-  for (key in oldAttrs) {
-    if (!(key in attrs)) {
-      elm.removeAttribute(key);
-    }
-  }
-}
-
-export const attrsModule = {
-  create: updateAttrs,
-  update: updateAttrs
-} as Module;
-
-export const patch = init([eventListenersModule, attrsModule, propsModule]);

tests/__snapshots__/component.test.ts.snap

@@ -1,155 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`composition sub widgets with some state rendered in a loop 1`] = `
-"function anonymous(context,extra
-) {
-    let owner = context;
-    context = Object.create(context);
-    var h = this.utils.h;
-    var c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    var _2 = context['state'].numbers;
-    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    if (typeof _2 === 'number') { _2 = Array.from(Array(_2).keys())}
-    var _3 = _2 instanceof Array ? _2 : Object.keys(_2);
-    var _4 = _2 instanceof Array ? _2 : Object.values(_2);
-    for (let i = 0; i < _3.length; i++) {
-        context.number_first = i === 0;
-        context.number_last = i === _3.length - 1;
-        context.number_parity = i % 2 === 0 ? 'even' : 'odd';
-        context.number_index = i;
-        context.number = _3[i];
-        context.number_value = _4[i];
-        //WIDGET
-        let key8 = context['number'];
-        let _5_index = c1.length;
-        c1.push(null);
-        let def6;
-        let w7 = key8 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key8]] : false;
-        let props7 = {};
-        let isNew7 = !w7;
-        if (w7 && w7.__owl__.renderPromise) {
-            if (w7.__owl__.isStarted) {
-                def6 = w7.updateProps(props7, extra.forceUpdate);
-            } else {
-                isNew7 = true
-                if (props7 === w7.__owl__.renderProps) {
-                    def6 = w7.__owl__.renderPromise;
-                } else {
-                    w7.destroy();
-                    w7 = false
-                }
-            }
-        }
-        if (!def6) {
-            if (w7) {
-                def6 = w7.updateProps(props7, extra.forceUpdate);
-            } else {
-                w7 = new context.widgets['ChildWidget'](owner, props7);
-                context.__owl__.cmap[key8] = w7.__owl__.id;
-                def6 = w7._prepare();
-            }
-        }
-        if (isNew7) {
-            def6 = def6.then(vnode=>{let pvnode=h(vnode.sel, {key: key8});c1[_5_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w7._mount(vnode, vn.elm);pvnode.elm=nvn.elm;},remove(){w7.destroy()},destroy(){w7.destroy()}}; w7.__owl__.pvnode = pvnode;});
-        } else {
-            def6 = def6.then(()=>{if (w7.__owl__.isDestroyed) {return};let vnode;if (!w7.__owl__.vnode){vnode=w7.__owl__.pvnode} else { vnode=h(w7.__owl__.vnode.sel, {key: key8});vnode.elm=w7.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w7.el,a.elm);a.elm=w7.el;w7.__mount();},remove(){w7.destroy()}, destroy() {w7.destroy()}}}c1[_5_index]=vnode;});
-        }
-        extra.promises.push(def6);
-    }
-    return vn1;
-}"
-`;
-
-exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
-"function anonymous(context,extra
-) {
-    let owner = context;
-    var h = this.utils.h;
-    var c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    //WIDGET
-    let key5 = 'somestring';
-    let _2_index = c1.length;
-    c1.push(null);
-    let def3;
-    let w4 = key5 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[key5]] : false;
-    let props4 = {flag: context['state'].flag};
-    let isNew4 = !w4;
-    if (w4 && w4.__owl__.renderPromise) {
-        if (w4.__owl__.isStarted) {
-            def3 = w4.updateProps(props4, extra.forceUpdate);
-        } else {
-            isNew4 = true
-            if (props4 === w4.__owl__.renderProps) {
-                def3 = w4.__owl__.renderPromise;
-            } else {
-                w4.destroy();
-                w4 = false
-            }
-        }
-    }
-    if (!def3) {
-        if (w4) {
-            def3 = w4.updateProps(props4, extra.forceUpdate);
-        } else {
-            w4 = new context.widgets['child'](owner, props4);
-            context.__owl__.cmap[key5] = w4.__owl__.id;
-            def3 = w4._prepare();
-        }
-    }
-    if (isNew4) {
-        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: key5});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}; w4.__owl__.pvnode = pvnode;});
-    } else {
-        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let vnode;if (!w4.__owl__.vnode){vnode=w4.__owl__.pvnode} else { vnode=h(w4.__owl__.vnode.sel, {key: key5});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}, destroy() {w4.destroy()}}}c1[_2_index]=vnode;});
-    }
-    extra.promises.push(def3);
-    return vn1;
-}"
-`;
-
-exports[`random stuff/miscellaneous t-props should not be undefined (snapshotting) 1`] = `
-"function anonymous(context,extra
-) {
-    let owner = context;
-    var h = this.utils.h;
-    var c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
-    //WIDGET
-    let _2_index = c1.length;
-    c1.push(null);
-    let def3;
-    let w4 = 4 in context.__owl__.cmap ? context.__owl__.children[context.__owl__.cmap[4]] : false;
-    let props4 = {};
-    let isNew4 = !w4;
-    if (w4 && w4.__owl__.renderPromise) {
-        if (w4.__owl__.isStarted) {
-            def3 = w4.updateProps(props4, extra.forceUpdate);
-        } else {
-            isNew4 = true
-            if (props4 === w4.__owl__.renderProps) {
-                def3 = w4.__owl__.renderPromise;
-            } else {
-                w4.destroy();
-                w4 = false
-            }
-        }
-    }
-    if (!def3) {
-        if (w4) {
-            def3 = w4.updateProps(props4, extra.forceUpdate);
-        } else {
-            w4 = new context.widgets['child'](owner, props4);
-            context.__owl__.cmap[4] = w4.__owl__.id;
-            def3 = w4._prepare();
-        }
-    }
-    if (isNew4) {
-        def3 = def3.then(vnode=>{let pvnode=h(vnode.sel, {key: 4});c1[_2_index]=pvnode;pvnode.data.hook = {insert(vn){let nvn=w4._mount(vnode, vn.elm);pvnode.elm=nvn.elm;},remove(){w4.destroy()},destroy(){w4.destroy()}}; w4.__owl__.pvnode = pvnode;});
-    } else {
-        def3 = def3.then(()=>{if (w4.__owl__.isDestroyed) {return};let vnode;if (!w4.__owl__.vnode){vnode=w4.__owl__.pvnode} else { vnode=h(w4.__owl__.vnode.sel, {key: 4});vnode.elm=w4.el;vnode.data.hook = {insert(a){a.elm.parentNode.replaceChild(w4.el,a.elm);a.elm=w4.el;w4.__mount();},remove(){w4.destroy()}, destroy() {w4.destroy()}}}c1[_2_index]=vnode;});
-    }
-    extra.promises.push(def3);
-    return vn1;
-}"
-`;

tests/__snapshots__/reactivity.test.ts.snap

@@ -0,0 +1,384 @@
+// 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState destroyed component is inactive 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let txt1 = ctx['contextObj'].b;
+    return block1([txt1], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two components are updated in parallel 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two components can subscribe to same context 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  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];
+      let key1 = ctx['id'];
+      c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    ctx = ctx.__proto__;
+    let 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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/__snapshots__/store.test.ts.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`connecting a component to store connecting a component works 1`] = `"<div></div>"`;
-
-exports[`connecting a component to store connecting a component works 2`] = `"<div><span>hello</span></div>"`;
-
-exports[`connecting a component to store deep and shallow connecting a component 1`] = `"<div><span>Kasteel</span></div>"`;
-
-exports[`connecting a component to store deep and shallow connecting a component 2`] = `"<div><span>Kasteel</span></div>"`;
-
-exports[`connecting a component to store deep and shallow connecting a component 3`] = `"<div><span>Bertinchamps</span></div>"`;
-
-exports[`connecting a component to store deep and shallow connecting a component 4`] = `"<div><span>Kasteel</span></div>"`;

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

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app App supports env with getters/setters 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, 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 destroy remove the widget from the DOM 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/app/app.test.ts

@@ -0,0 +1,62 @@
+import { App, Component, xml } from "../../src";
+import { status } from "../../src/component/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>");
+  });
+});

tests/blockdom/block.test.ts

@@ -0,0 +1,297 @@
+import { createBlock, mount, patch, remove, text } from "../../src/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

@@ -0,0 +1,191 @@
+import { mount, patch, createBlock } from "../../src/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 undefined 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("");
+  });
+
+  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

@@ -0,0 +1,273 @@
+import { mount, createBlock, multi, config, patch } from "../../src/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

@@ -0,0 +1,70 @@
+import { createBlock, mount, patch, remove } from "../../src/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

@@ -0,0 +1,26 @@
+import { comment, mount } from "../../src/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("");
+});

tests/blockdom/helpers.ts

@@ -0,0 +1,11 @@
+let lastFixture: any = null;
+
+export function makeTestFixture() {
+  let fixture = document.createElement("div");
+  document.body.appendChild(fixture);
+  if (lastFixture) {
+    lastFixture.remove();
+  }
+  lastFixture = fixture;
+  return fixture;
+}

tests/blockdom/html.test.ts

@@ -0,0 +1,48 @@
+import { html, mount, patch, text } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("html block", () => {
+  test("can be mounted and patched", async () => {
+    const tree = html("<span>1</span><span>2</span>");
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<span>1</span><span>2</span>");
+
+    patch(tree, html("<div>coucou</div>"));
+    expect(fixture.innerHTML).toBe("<div>coucou</div>");
+  });
+
+  test("html vnode can be used as text", () => {
+    mount(text(html("<p>a</p>") as any), fixture);
+    expect(fixture.textContent).toBe("<p>a</p>");
+  });
+
+  test("html vnode can represent <tr>", () => {
+    const fixture = document.createElement("table");
+    // const block = createBlock('<table><block-child-0/></table>');
+    // const tree = block([], [html(`<tr><td>tomato</td></tr>`)]);
+    const tree = html(`<tr><td>tomato</td></tr>`);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<tr><td>tomato</td></tr>");
+
+    patch(tree, html(`<tr><td>potato</td></tr>`));
+    expect(fixture.innerHTML).toBe("<tr><td>potato</td></tr>");
+  });
+});

tests/blockdom/list.test.ts

@@ -0,0 +1,458 @@
+import { list, mount, multi, patch, text, createBlock, VNode, withKey } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+function kText(str: string, key: any): VNode {
+  return withKey(text(str), key);
+}
+
+function n(n: number) {
+  return kText(String(n), n);
+}
+
+const span = createBlock("<span><block-text-0/></span>");
+const p = createBlock("<p><block-text-0/></p>");
+
+function kSpan(str: string, key: any): VNode {
+  return withKey(span([str]), key);
+}
+
+function kPair(n: number): VNode {
+  const bnodes = [p([String(n)]), p([String(n)])];
+  return withKey(multi(bnodes), n);
+}
+
+describe("list node: misc", () => {
+  test("list node", async () => {
+    const bnodes = [1, 2, 3].map((key) => kText(`text${key}`, key));
+
+    const tree = list(bnodes);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("text1text2text3");
+  });
+
+  test("list vnode can be used as text", () => {
+    mount(text(list([text("a"), text("b")]) as any), fixture);
+    expect(fixture.innerHTML).toBe("ab");
+  });
+
+  test("a list block can be removed and leaves nothing", async () => {
+    const bnodes = [
+      { id: 1, name: "sheep" },
+      { id: 2, name: "cow" },
+    ].map((elem) => kText(elem.name, elem.id));
+
+    const tree = list(bnodes);
+    expect(fixture.childNodes.length).toBe(0);
+    mount(tree, fixture);
+    expect(fixture.childNodes.length).toBe(3);
+    expect(fixture.innerHTML).toBe("sheepcow");
+
+    tree.remove();
+    expect(fixture.innerHTML).toBe("");
+    expect(fixture.childNodes.length).toBe(0);
+  });
+
+  test("patching a list block inside an elem block", async () => {
+    const block = createBlock("<div><block-child-0/></div>");
+    const tree = block();
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div></div>");
+
+    patch(tree, block([], [list([1, 2, 3].map(n))]));
+    expect(fixture.innerHTML).toBe("<div>123</div>");
+
+    patch(tree, block([], [list([])]));
+    expect(fixture.innerHTML).toBe("<div></div>");
+
+    patch(tree, block([], [list([1, 2, 3].map(n))]));
+    expect(fixture.innerHTML).toBe("<div>123</div>");
+  });
+
+  test("list of lists", async () => {
+    const tree = list([
+      withKey(list([kText("a1", "1"), kText("a2", "2")]), "a"),
+      withKey(list([kText("b1", "1"), kText("b2", "2")]), "b"),
+    ]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("a1a2b1b2");
+
+    patch(
+      tree,
+      list([
+        withKey(list([kText("b1", "1"), kText("b2", "2")]), "b"),
+        withKey(list([kText("a1", "1"), kText("a2", "2")]), "a"),
+      ])
+    );
+
+    expect(fixture.innerHTML).toBe("b1b2a1a2");
+
+    patch(
+      tree,
+      list([
+        withKey(list([kText("a2", "2"), kText("a1", "1")]), "a"),
+        withKey(list([kText("b2", "2"), kText("b1", "1")]), "b"),
+      ])
+    );
+
+    expect(fixture.innerHTML).toBe("a2a1b2b1");
+  });
+});
+
+describe("adding/removing elements", () => {
+  test("removing elements", () => {
+    const tree = list([kText("a", "a")]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("a");
+
+    patch(tree, list([]));
+    expect(fixture.innerHTML).toBe("");
+  });
+
+  test("removing 1 elements from 2", () => {
+    const tree = list([kText("a", "a"), kText("b", "b")]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("ab");
+
+    patch(tree, list([kText("a", "a")]));
+    expect(fixture.innerHTML).toBe("a");
+  });
+
+  test("removing elements", () => {
+    const tree = list([kSpan("a", "a")]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<span>a</span>");
+
+    patch(tree, list([]));
+    expect(fixture.innerHTML).toBe("");
+  });
+
+  test("removing elements, variation", () => {
+    const f = (i: number) => {
+      const b = multi([span([`a${i}`]), span([`b${i}`])]);
+      b.key = i;
+      return b;
+    };
+    const tree = list([f(1), f(2)]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<span>a1</span><span>b1</span><span>a2</span><span>b2</span>");
+
+    patch(tree, list([]));
+    expect(fixture.innerHTML).toBe("");
+  });
+
+  test("adding one element at the end", () => {
+    const tree = list([n(1), n(2)]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("12");
+
+    patch(tree, list([n(1), n(2), n(3)]));
+    expect(fixture.innerHTML).toBe("123");
+  });
+
+  test("adding one element at the end", () => {
+    const tree = list([n(1)]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("1");
+
+    patch(tree, list([n(1), n(2), n(3)]));
+    expect(fixture.innerHTML).toBe("123");
+  });
+
+  test("prepend elements: 4,5 => 1,2,3,4,5", () => {
+    const tree = list([n(4), n(5)]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("45");
+
+    patch(tree, list([n(1), n(2), n(3), n(4), n(5)]));
+    expect(fixture.innerHTML).toBe("12345");
+  });
+
+  test("prepend elements: 4,5 => 1,2,3,4,5 (with multi)", () => {
+    const tree = list([kPair(4), kPair(5)]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p>4</p><p>4</p><p>5</p><p>5</p>");
+
+    patch(tree, list([1, 2, 3, 4, 5].map(kPair)));
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
+    );
+  });
+
+  test("add element in middle: 1,2,4,5 => 1,2,3,4,5", () => {
+    const tree = list([1, 2, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("1245");
+
+    patch(tree, list([1, 2, 3, 4, 5].map(n)));
+    expect(fixture.innerHTML).toBe("12345");
+  });
+
+  test("add element in middle: 1,2,4,5 => 1,2,3,4,5 (multi)", () => {
+    const tree = list([1, 2, 4, 5].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>4</p><p>4</p><p>5</p><p>5</p>"
+    );
+
+    patch(tree, list([1, 2, 3, 4, 5].map(kPair)));
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
+    );
+  });
+
+  test("add element at beginning and end: 2,3,4 => 1,2,3,4,5", () => {
+    const tree = list([2, 3, 4].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("234");
+
+    patch(tree, list([1, 2, 3, 4, 5].map(n)));
+    expect(fixture.innerHTML).toBe("12345");
+  });
+
+  test("add element at beginning and end: 2,3,4 => 1,2,3,4,5 (multi)", () => {
+    const tree = list([2, 3, 4].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p>");
+
+    patch(tree, list([1, 2, 3, 4, 5].map(kPair)));
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
+    );
+  });
+
+  test("adds children: [] => [1,2,3]", () => {
+    const tree = list([].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("");
+
+    patch(tree, list([1, 2, 3].map(n)));
+    expect(fixture.innerHTML).toBe("123");
+  });
+
+  test("adds children: [] => [1,2,3] (multi)", () => {
+    const tree = list([].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("");
+
+    patch(tree, list([1, 2, 3].map(kPair)));
+    expect(fixture.innerHTML).toBe("<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p>");
+  });
+
+  test("adds children: [] => [1,2,3] (inside elem)", () => {
+    const block = createBlock("<p><block-child-0/></p>");
+    const tree = block([], []);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p></p>");
+
+    patch(tree, block([], [list([1, 2, 3].map(n))]));
+    expect(fixture.innerHTML).toBe("<p>123</p>");
+  });
+
+  test("adds children: [] => [1,2,3] (inside elem, multi)", () => {
+    const block = createBlock("<p><block-child-0/></p>");
+    const tree = block([], []);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p></p>");
+
+    patch(tree, block([], [list([1, 2, 3].map(kPair))]));
+    expect(fixture.innerHTML).toBe("<p><p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p></p>");
+  });
+
+  test("remove children: [1,2,3] => []", () => {
+    const tree = list([1, 2, 3].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("123");
+
+    patch(tree, list([].map(n)));
+    expect(fixture.innerHTML).toBe("");
+  });
+
+  test("remove children: [1,2,3] => [] (multi)", () => {
+    const tree = list([1, 2, 3].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p>");
+
+    patch(tree, list([].map(kPair)));
+    expect(fixture.innerHTML).toBe("");
+  });
+
+  test("remove children: [1,2,3] => [] (inside elem)", () => {
+    const block = createBlock("<p><block-child-0/></p>");
+    const tree = block([], [list([1, 2, 3].map(n))]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p>123</p>");
+
+    patch(tree, block([], [list([])]));
+    expect(fixture.innerHTML).toBe("<p></p>");
+  });
+
+  test("remove children from the beginning: [1,2,3,4,5] => [3,4,5]", () => {
+    const tree = list([1, 2, 3, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("12345");
+
+    patch(tree, list([3, 4, 5].map(n)));
+    expect(fixture.innerHTML).toBe("345");
+  });
+
+  test("remove children from the beginning: [1,2,3,4,5] => [3,4,5] (multi)", () => {
+    const tree = list([1, 2, 3, 4, 5].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
+    );
+    patch(tree, list([3, 4, 5].map(kPair)));
+    expect(fixture.innerHTML).toBe("<p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>");
+  });
+
+  test("remove children from the end: [1,2,3,4,5] => [1,2,3]", () => {
+    const tree = list([1, 2, 3, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("12345");
+
+    patch(tree, list([1, 2, 3].map(n)));
+    expect(fixture.innerHTML).toBe("123");
+  });
+
+  test("remove children from the middle: [1,2,3,4,5] => [1,2,4,5]", () => {
+    const tree = list([1, 2, 3, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("12345");
+
+    patch(tree, list([1, 2, 4, 5].map(n)));
+    expect(fixture.innerHTML).toBe("1245");
+  });
+});
+
+describe("element reordering", () => {
+  test("move element forward: [1,2,3,4] => [2,3,1,4]", () => {
+    const tree = list([1, 2, 3, 4].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("1234");
+
+    patch(tree, list([2, 3, 1, 4].map(n)));
+    expect(fixture.innerHTML).toBe("2314");
+  });
+
+  test("move element forward: [1,2,3,4] => [2,3,1,4] (multi)", () => {
+    const tree = list([1, 2, 3, 4].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p>"
+    );
+    patch(tree, list([2, 3, 1, 4].map(kPair)));
+    expect(fixture.innerHTML).toBe(
+      "<p>2</p><p>2</p><p>3</p><p>3</p><p>1</p><p>1</p><p>4</p><p>4</p>"
+    );
+  });
+
+  test("move element to end: [1,2,3] => [2,3,1]", () => {
+    const tree = list([1, 2, 3].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("123");
+
+    patch(tree, list([2, 3, 1].map(n)));
+    expect(fixture.innerHTML).toBe("231");
+  });
+
+  test("move element to end: [1,2,3] => [2,3,1] (multi)", () => {
+    const tree = list([1, 2, 3].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p>");
+
+    patch(tree, list([2, 3, 1].map(kPair)));
+    expect(fixture.innerHTML).toBe("<p>2</p><p>2</p><p>3</p><p>3</p><p>1</p><p>1</p>");
+  });
+
+  test("move element backward: [1,2,3,4] => [1,4,2,3]", () => {
+    const tree = list([1, 2, 3, 4].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("1234");
+
+    patch(tree, list([1, 4, 2, 3].map(n)));
+    expect(fixture.innerHTML).toBe("1423");
+  });
+
+  test("swaps first and last: [1,2,3,4] => [4,3,2,1]", () => {
+    const tree = list([1, 2, 3, 4].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("1234");
+
+    patch(tree, list([4, 3, 2, 1].map(n)));
+    expect(fixture.innerHTML).toBe("4321");
+  });
+});
+
+describe("miscellaneous operations", () => {
+  test("move to left and replace: [1,2,3,4,5] => [4,1,2,3,6]", () => {
+    const tree = list([1, 2, 3, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("12345");
+
+    patch(tree, list([4, 1, 2, 3, 6].map(n)));
+    expect(fixture.innerHTML).toBe("41236");
+  });
+
+  test("move to left and replace: [1,2,3,4,5] => [4,1,2,3,6] (multi)", () => {
+    const tree = list([1, 2, 3, 4, 5].map(kPair));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
+    );
+
+    patch(tree, list([4, 1, 2, 3, 6].map(kPair)));
+    expect(fixture.innerHTML).toBe(
+      "<p>4</p><p>4</p><p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>6</p><p>6</p>"
+    );
+  });
+
+  test("move to left and leave hole: [1,4,5] => [4,6]", () => {
+    const tree = list([1, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("145");
+
+    patch(tree, list([4, 6].map(n)));
+    expect(fixture.innerHTML).toBe("46");
+  });
+
+  test("[2,4,5] => [4,5,3]", () => {
+    const tree = list([2, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("245");
+
+    patch(tree, list([4, 5, 3].map(n)));
+    expect(fixture.innerHTML).toBe("453");
+  });
+
+  test("reverse elements [1,2,3,4,5,6,7,8] => [8,7,6,5,4,3,2,1]", () => {
+    const tree = list([1, 2, 3, 4, 5, 6, 7, 8].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("12345678");
+
+    patch(tree, list([8, 7, 6, 5, 4, 3, 2, 1].map(n)));
+    expect(fixture.innerHTML).toBe("87654321");
+  });
+
+  test("some permutation [0,1,2,3,4,5] => [4,3,2,1,5,0]", () => {
+    const tree = list([0, 1, 2, 3, 4, 5].map(n));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("012345");
+
+    patch(tree, list([4, 3, 2, 1, 5, 0].map(n)));
+    expect(fixture.innerHTML).toBe("432150");
+  });
+});

tests/blockdom/multi.test.ts

@@ -0,0 +1,91 @@
+import { mount, multi, patch, text, createBlock } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("multi blocks", () => {
+  test("multiblock with 2 text blocks", async () => {
+    const tree = multi([text("foo"), text("bar")]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foobar");
+  });
+
+  test("a multiblock can be removed and leaves no extra text nodes", async () => {
+    const block1 = createBlock("<div>foo</div>");
+    const block2 = createBlock("<span>bar</span>");
+
+    const tree = multi([block1(), block2()]);
+
+    expect(fixture.childNodes.length).toBe(0);
+    mount(tree, fixture);
+    expect(fixture.childNodes.length).toBe(2);
+    tree.remove();
+    expect(fixture.childNodes.length).toBe(0);
+  });
+
+  test("multiblock with an empty children", async () => {
+    const block = createBlock("<div>foo</div>");
+    const tree = multi([block(), undefined]);
+
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div>foo</div>");
+  });
+
+  test("multi block in a regular block", async () => {
+    const block1 = createBlock("<div><block-child-0/></div>");
+    const block2 = createBlock("<span>yip yip</span>");
+
+    const tree = block1([], [multi([block2()])]);
+
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div><span>yip yip</span></div>");
+  });
+
+  test("patching a multiblock ", async () => {
+    const tree = multi([text("foo"), text("bar")]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foobar");
+
+    patch(tree, multi([text("blip"), text("bar")]));
+    expect(fixture.innerHTML).toBe("blipbar");
+  });
+
+  test("simple multi with multiple roots", async () => {
+    const block1 = createBlock("<div>foo</div>");
+    const block2 = createBlock("<span>bar</span>");
+
+    const tree = multi([block1(), block2()]);
+
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div>foo</div><span>bar</span>");
+  });
+
+  test("multi vnode can be used as text", () => {
+    mount(text(multi([text("a"), text("b")]) as any), fixture);
+    expect(fixture.innerHTML).toBe("ab");
+  });
+
+  test("multi vnode can be used as text", () => {
+    mount(text(multi([text("a"), undefined]) as any), fixture);
+    expect(fixture.innerHTML).toBe("a");
+  });
+
+  test("multi inside a block", async () => {
+    const block = createBlock("<div><block-child-0/></div>");
+    const tree = block([], [multi([text("foo"), text("bar")])]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div>foobar</div>");
+  });
+});

tests/blockdom/namespace.test.ts

@@ -0,0 +1,72 @@
+import { createBlock, mount } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+const XHTML_URI = "http://www.w3.org/1999/xhtml";
+const SVG_URI = "http://www.w3.org/2000/svg";
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+describe("namespace", () => {
+  test("default namespace is xhtml", () => {
+    const block = createBlock(`<tag/>`);
+    const tree = block();
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<tag></tag>");
+    expect(fixture.firstElementChild!.namespaceURI).toBe(XHTML_URI);
+  });
+
+  test("namespace can be changed with block-ns", () => {
+    const block = createBlock(`<tag block-ns="${SVG_URI}"/>`);
+    const tree = block();
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<tag></tag>");
+    expect(fixture.firstElementChild!.namespaceURI).toBe(SVG_URI);
+  });
+
+  test("namespace is kept for children", () => {
+    const block = createBlock(
+      `<parent block-ns="${SVG_URI}"><child><subchild/></child><child/></parent>`
+    );
+    const tree = block();
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe(
+      "<parent><child><subchild></subchild></child><child></child></parent>"
+    );
+    const parent = fixture.firstElementChild!;
+    const child1 = parent.firstElementChild!;
+    const subchild = child1.firstElementChild!;
+    const child2 = child1.nextElementSibling!;
+    expect(parent.namespaceURI).toBe(SVG_URI);
+    expect(child1.namespaceURI).toBe(SVG_URI);
+    expect(child2.namespaceURI).toBe(SVG_URI);
+    expect(subchild.namespaceURI).toBe(SVG_URI);
+  });
+
+  test("various namespaces in same block", () => {
+    const block = createBlock(`<none><one block-ns="one"/><two block-ns="two"/></none>`);
+    const tree = block();
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<none><one></one><two></two></none>");
+    const none = fixture.firstElementChild!;
+    const one = none.firstElementChild!;
+    const two = one.nextElementSibling!;
+    expect(none.namespaceURI).toBe(XHTML_URI);
+    expect(one.namespaceURI).toBe("one");
+    expect(two.namespaceURI).toBe("two");
+  });
+});

tests/blockdom/remove_hook.test.ts

@@ -0,0 +1,84 @@
+import { createBlock, mount, multi, patch } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("before remove is called", () => {
+  test("simple removal", async () => {
+    const block1 = createBlock("<div><block-child-0/></div>");
+    const block2 = createBlock("<p>coucou</p>");
+
+    const child = block2();
+    const tree = block1([], [child]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div><p>coucou</p></div>");
+
+    let n = 1;
+    child.beforeRemove = () => n++;
+    patch(tree, block1([], []), true);
+    expect(fixture.innerHTML).toBe("<div></div>");
+    expect(n).toBe(2);
+  });
+
+  test("removal, variation with grandchild", async () => {
+    const block1 = createBlock("<p><block-child-0/></p>");
+    const block2 = createBlock("<span>coucou</span>");
+
+    const child = block2();
+    const tree = block1([], [block1([], [child])]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p><p><span>coucou</span></p></p>");
+
+    let n = 1;
+    child.beforeRemove = () => n++;
+    patch(tree, block1([], []), true);
+    expect(fixture.innerHTML).toBe("<p></p>");
+    expect(n).toBe(2);
+  });
+
+  test("remove a child of a multi", async () => {
+    const block1 = createBlock("<div><block-child-0/></div>");
+    const block2 = createBlock("<p>coucou</p>");
+
+    const child1 = block2();
+    const child2 = block2();
+    const tree = block1([], [multi([child1, child2])]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div><p>coucou</p><p>coucou</p></div>");
+
+    let n = 1;
+    child1.beforeRemove = () => n++;
+    patch(tree, block1([], [multi([])]), true);
+    expect(fixture.innerHTML).toBe("<div></div>");
+    expect(n).toBe(2);
+  });
+
+  test("remove a multi", async () => {
+    const block1 = createBlock("<div><block-child-0/></div>");
+    const block2 = createBlock("<p>coucou</p>");
+
+    const child1 = block2();
+    const child2 = block2();
+    const tree = block1([], [multi([child1, child2])]);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<div><p>coucou</p><p>coucou</p></div>");
+
+    let n = 1;
+    child1.beforeRemove = () => n++;
+    patch(tree, block1([], []), true);
+    expect(fixture.innerHTML).toBe("<div></div>");
+    expect(n).toBe(2);
+  });
+});

tests/blockdom/text.test.ts

@@ -0,0 +1,69 @@
+import { mount, patch, remove, text } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("adding/patching text", () => {
+  test("simple text node", async () => {
+    const tree = text("foo");
+    expect(tree.el).toBe(undefined);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    expect(tree.el).not.toBe(undefined);
+  });
+
+  test("patching a simple text node", async () => {
+    const tree = text("foo");
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+
+    patch(tree, text("bar"));
+    expect(fixture.innerHTML).toBe("bar");
+  });
+
+  test("falsy values in text nodes", () => {
+    const cases = [
+      [false, "false"],
+      [undefined, ""],
+      [null, ""],
+      [0, "0"],
+      ["", ""],
+    ];
+    for (let [value, result] of cases) {
+      const fixture = makeTestFixture();
+      mount(text(value as any), fixture);
+      expect(fixture.innerHTML).toBe(result);
+    }
+  });
+
+  test("vtext node can be used as text", () => {
+    const t = text("foo") as any;
+    mount(text(t), fixture);
+    expect(fixture.innerHTML).toBe("foo");
+  });
+});
+
+describe("remove text  blocks", () => {
+  test("a text block can be removed", async () => {
+    const tree = text("cat");
+    expect(fixture.childNodes.length).toBe(0);
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("cat");
+    expect(fixture.childNodes.length).toBe(1);
+    remove(tree);
+    expect(fixture.innerHTML).toBe("");
+    expect(fixture.childNodes.length).toBe(0);
+  });
+});

tests/blockdom/toggler.test.ts

@@ -0,0 +1,114 @@
+import { createBlock, mount, patch, text, toggler } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("togglers", () => {
+  test("can mount and update text nodes", async () => {
+    const tree = toggler("key", text("foo"));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    const textnode = fixture.firstChild!;
+    expect(textnode.textContent).toBe("foo");
+    patch(tree, toggler("key", text("bar")));
+    expect(fixture.innerHTML).toBe("bar");
+    expect(fixture.firstChild).toBe(textnode);
+  });
+
+  test("can toggle between two text nodes (different key)", async () => {
+    const tree = toggler("key1", text("foo"));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    const textnode = fixture.firstChild!;
+    expect(textnode.textContent).toBe("foo");
+    patch(tree, toggler("key2", text("bar")));
+    expect(fixture.innerHTML).toBe("bar");
+    expect(fixture.firstChild).not.toBe(textnode);
+
+    // we check here that the key was properly reset
+    const other = fixture.firstChild;
+    patch(tree, toggler("key1", text("foo")));
+    expect(fixture.innerHTML).toBe("foo");
+    expect(fixture.firstChild).not.toBe(other);
+  });
+
+  test("can toggle between text node and block", async () => {
+    const block = createBlock("<p>hey</p>");
+    const tree = toggler("key1", text("foo"));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    const textnode = fixture.firstChild!;
+    patch(tree, toggler("key2", block()));
+    expect(fixture.innerHTML).toBe("<p>hey</p>");
+    expect(fixture.firstChild).not.toBe(textnode);
+  });
+
+  test("beforeRemove is called", () => {
+    const block = createBlock("<p>hey</p>");
+
+    function blockOverriden() {
+      const vn = block();
+      vn.beforeRemove = () => {
+        steps.push("beforeRemove");
+      };
+      return vn;
+    }
+
+    const steps: string[] = [];
+    const tree = toggler("key1", blockOverriden());
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("<p>hey</p>");
+    patch(tree, toggler("key2", text("foo")));
+    expect(fixture.innerHTML).toBe("foo");
+
+    patch(tree, toggler("key3", blockOverriden()), true);
+    expect(fixture.innerHTML).toBe("<p>hey</p>");
+
+    patch(tree, toggler("key2", text("foo")), true);
+    expect(fixture.innerHTML).toBe("foo");
+
+    expect(steps).toEqual(["beforeRemove"]);
+  });
+
+  test("beforeRemove is called when within a block", () => {
+    const block = createBlock("<p><block-child-0/></p>");
+    const conditionalBlock = createBlock("<p>hey</p>");
+
+    const steps: string[] = [];
+
+    function blockOverriden() {
+      const vn = conditionalBlock();
+      vn.beforeRemove = function () {
+        steps.push("beforeRemove");
+      };
+      return vn;
+    }
+    const mainBlock = block([], [toggler("key1", blockOverriden())]);
+
+    mount(mainBlock, fixture);
+    expect(fixture.innerHTML).toBe("<p><p>hey</p></p>");
+
+    patch(mainBlock, block([], []));
+    expect(fixture.innerHTML).toBe("<p></p>");
+
+    patch(mainBlock, block([], [toggler("key1", blockOverriden())]), true);
+    expect(fixture.innerHTML).toBe("<p><p>hey</p></p>");
+
+    patch(mainBlock, block([], []), true);
+    expect(fixture.innerHTML).toBe("<p></p>");
+
+    expect(steps).toEqual(["beforeRemove"]);
+  });
+});

tests/compiler/__snapshots__/attributes.test.ts.snap

@@ -0,0 +1,696 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes changing a class with t-att-class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes changing an attribute with t-att- 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes class and t-att-class should combine together 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\" class=\\"hello\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes class and t-attf-class with ternary operation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = (ctx['value']?'world':'');
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attribute evaluating to 0 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attribute falsy variable  1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attribute with a dash 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"data-action-id\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['id'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = 'bar';
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic class attribute evaluating to 0 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic empty class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic formatted attributes with a dash 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"aria-label\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`Some text \${ctx['id']}\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic undefined class attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes dynamic undefined generic attribute 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"thing\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['c'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes fixed variable 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes format expression 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = (ctx['value']+37);
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes format literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`bar\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes format multiple 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`a \${ctx['value1']} is \${ctx['value2']} of \${ctx['value3']} ]\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes format value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`b\${ctx['value']}r\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes from object variables set previously 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"o\\", {a:'b'});
+    let attr1 = ctx['o'].a;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes from variables set previously (no external node) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"abc\\", 'def');
+    let attr1 = ctx['abc'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes from variables set previously 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"abc\\", 'def');
+    let attr1 = ctx['abc'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes object 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes static attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div foo=\\"a\\" bar=\\"b\\" baz=\\"c\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes static attributes on void elements 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes static attributes with dashes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes t-att-class and class should combine together 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with multiple classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'a b c':ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with multiple classes 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {['a b c']:ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'a b c':ctx['value'],'a b d':!ctx['value']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-att-class with object 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"static\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {a:ctx['b'],c:ctx['d'],e:ctx['f']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`hello\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class should combine with class 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`world\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class with multiple classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`hello \${ctx['word']}\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = \`hello  \${ctx['word']}\`;
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes tuple literal 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ['foo','bar'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes tuple variable 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes two classes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"a b\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`attributes two dynamic attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attribute-0=\\"foo\\" block-attribute-1=\\"bar\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = 'bar';
+    let attr2 = 'foo';
+    return block1([attr1, attr2]);
+  }
+}"
+`;
+
+exports[`attributes updating classes (with obj notation) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'a b':ctx['condition']};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes various escapes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div foo=\\"&lt;foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['bar'];
+    let attr2 = \`<\${ctx['baz']}>\`;
+    let attr3 = ctx['qux'];
+    return block1([attr1, attr2, attr3]);
+  }
+}"
+`;
+
+exports[`attributes various escapes 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div> &lt; </div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['flag'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties select with t-att-value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['value'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties textarea with t-att-value 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ctx['v'];
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/compiler/__snapshots__/comments.test.ts.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`comments only a comment 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comment(\` comment\`);
+  }
+}"
+`;
+
+exports[`comments properly handle comments 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>hello <!-- comment-->owl</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`comments properly handle comments between t-if/t-else 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<span>true</span>\`);
+  let block3 = createBlock(\`<span>owl</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (true) {
+      b2 = block2();
+    } else {
+      b3 = block3();
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;

tests/compiler/__snapshots__/event_handling.test.ts.snap

@@ -0,0 +1,530 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`t-on can bind event handler 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['add'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with arguments 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let hdlr1 = [()=>v1(5), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with empty  object 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['doSomething'];
+    let hdlr1 = [()=>v1({}), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['doSomething'];
+    let hdlr1 = [()=>v1({}), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with empty object (with non empty inner string) 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
+  let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`action\`] = v_block2[i1];
+      ctx[\`action_index\`] = i1;
+      let key1 = ctx['action_index'];
+      const v1 = ctx['activate'];
+      const v2 = ctx['action'];
+      let hdlr1 = [()=>v1(v2), ctx];
+      c_block2[i1] = withKey(block3([hdlr1]), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on can bind handlers with object arguments 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['add'];
+    let hdlr1 = [()=>v1({val:5}), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on can bind two event handlers 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['handleClick'], ctx];
+    let hdlr2 = [ctx['handleDblClick'], ctx];
+    return block1([hdlr1, hdlr2]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['add'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`value\`] = v_block1[i1];
+      let key1 = ctx['value'];
+      let hdlr1 = [ctx['add'], ctx];
+      c_block1[i1] = withKey(block2([hdlr1]), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_1 = getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_1.call(this, ctx, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 3 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['add'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 4 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, getTemplate, withKey } = helpers;
+  const callTemplate_1 = getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`value\`] = v_block1[i1];
+      ctx[\`value_first\`] = i1 === 0;
+      ctx[\`value_last\`] = i1 === v_block1.length - 1;
+      ctx[\`value_index\`] = i1;
+      ctx[\`value_value\`] = k_block1[i1];
+      let key1 = ctx['value'];
+      c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`t-on handler is bound to proper owner, part 4 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['add'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on receive event in first argument 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['add'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) basic support for native listener 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"myClass\\" block-handler-0=\\"click\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['divClicked'], ctx];
+    let hdlr2 = [ctx['btnClicked'], ctx];
+    return block1([hdlr1, hdlr2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on combined with t-esc 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-text-1/></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onClick'], ctx];
+    let txt1 = ctx['text'];
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><block-child-0/></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onClick'], ctx];
+    let b2 = safeOutput(ctx['html']);
+    return block1([hdlr1], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with .capture modifier 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click.capture\\"><button block-handler-1=\\"click\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [\\"capture\\", ctx['onCapture'], ctx];
+    let hdlr2 = [ctx['doSomething'], ctx];
+    return block1([hdlr1, hdlr2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with empty handler (only modifiers) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [\\"prevent\\", , ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent and self modifiers (order matters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent.self\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [\\"prevent\\",\\"self\\", ctx['onClick'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent and/or stop modifiers 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.prevent\\">Button 1</button><button block-handler-1=\\"click.stop\\">Button 2</button><button block-handler-2=\\"click.prevent.stop\\">Button 3</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [\\"prevent\\", ctx['onClickPrevented'], ctx];
+    let hdlr2 = [\\"stop\\", ctx['onClickStopped'], ctx];
+    let hdlr3 = [\\"prevent\\",\\"stop\\", ctx['onClickPreventedAndStopped'], ctx];
+    return block1([hdlr1, hdlr2, hdlr3]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  let block3 = createBlock(\`<a href=\\"#\\" block-handler-0=\\"click.prevent\\"> Edit <block-text-1/></a>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);
+    for (let i1 = 0; i1 < l_block2; i1++) {
+      ctx[\`project\`] = v_block2[i1];
+      let key1 = ctx['project'];
+      const v1 = ctx['onEdit'];
+      const v2 = ctx['project'];
+      let hdlr1 = [\\"prevent\\", _ev=>v1(v2.id,_ev), ctx];
+      let txt1 = ctx['project'].name;
+      c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
+    }
+    let b2 = list(c_block2);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with self and prevent modifiers (order matters) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click.self.prevent\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [\\"self\\",\\"prevent\\", ctx['onClick'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (native listener) t-on with self modifier 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><button block-handler-0=\\"click\\"><span>Button</span></button><button block-handler-1=\\"click.self\\"><span>Button</span></button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['onClick'], ctx];
+    let hdlr2 = [\\"self\\", ctx['onClickSelf'], ctx];
+    return block1([hdlr1, hdlr2]);
+  }
+}"
+`;
+
+exports[`t-on t-on modifiers (synthetic listener) basic support for synthetic 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-handler-0=\\"click.synthetic\\"><button block-handler-1=\\"click.synthetic\\">Button</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [\\"synthetic\\", ctx['divClicked'], ctx];
+    let hdlr2 = [\\"synthetic\\", ctx['btnClicked'], ctx];
+    return block1([hdlr1, hdlr2]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement (function call) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let hdlr1 = [()=>v1.incrementCounter(2), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let hdlr1 = [()=>v1.counter++, ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    let hdlr1 = [()=>v1.flag=!v1.flag, ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with inline statement, part 3 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['state'];
+    const v2 = ctx['someFunction'];
+    let hdlr1 = [()=>v1.n=v2(3), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on with t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_1 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on with t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['update'], ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on, with arguments and t-call 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { getTemplate } = helpers;
+  const callTemplate_1 = getTemplate(\`sub\`);
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on, with arguments and t-call 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const v1 = ctx['value'];
+    let hdlr1 = [()=>this.update(v1), ctx];
+    return block1([hdlr1]);
+  }
+}"
+`;