temp

.github/workflows/deploy.yml

@@ -5,7 +5,7 @@ name: Node.js CI
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: [ master, owl-next ]
 
 jobs:
   build:

.gitignore

@@ -30,5 +30,4 @@ release-notes.md
 
 .rpt2_cache
 
-# useful in some cases
 /temp

README.md

@@ -45,7 +45,7 @@ find some more additional information [here](doc/miscellaneous/comparison.md).
 Here is a short example to illustrate interactive components:
 
 ```javascript
-const { Component, useState, mount } = owl;
+const { Component, useState } = owl;
 const { xml } = owl.tags;
 
 class Counter extends Component {
@@ -67,7 +67,8 @@ class App extends Component {
   static components = { Counter };
 }
 
-mount(App, { target: document.body });
+const app = new App();
+app.mount(document.body);
 ```
 
 Note that the counter component is made reactive with the [`useState` hook](doc/reference/hooks.md#usestate).
@@ -124,7 +125,7 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.4.5](https://github.com/odoo/owl/releases/tag/v1.4.5)
+- [owl-1.0.13](https://github.com/odoo/owl/releases/tag/v1.0.13)
 
 ## License
 

doc/learning/how_to_test.md

@@ -85,7 +85,8 @@ afterEach(() => {
 describe("SomeComponent", () => {
   test("component behaves as expected", async () => {
     const props = {...}; // depends on the component
-    const comp = await mount(SomeComponent, { target: fixture, props });
+    const comp = new SomeComponent(null, props);
+    await comp.mount(fixture);
 
     // do some assertions
     expect(...).toBe(...);

doc/learning/overview.md

@@ -96,7 +96,7 @@ class OrderLine extends Component {
     </div>`;
 
   add() {
-    this.trigger("add-to-order", { line: this.props.line });
+    this.trigger("add-to-order", { line: props.line });
   }
 }
 

doc/learning/quick_start.md

@@ -54,7 +54,7 @@ Now, `index.html` should contain the following:
 And `app.js` should look like this:
 
 ```js
-const { Component, mount } = owl;
+const { Component } = owl;
 const { xml } = owl.tags;
 const { whenReady } = owl.utils;
 
@@ -65,7 +65,8 @@ class App extends Component {
 
 // Setup code
 function setup() {
-  mount(App, target: { document.body })
+  const app = new App();
+  app.mount(document.body);
 }
 
 whenReady(setup);
@@ -123,7 +124,7 @@ Here is the content of `app.js` and `main.js`:
 
 ```js
 // app.js ----------------------------------------------------------------------
-const { Component, mount } = owl;
+const { Component } = owl;
 const { xml } = owl.tags;
 
 export class App extends Component {
@@ -134,7 +135,8 @@ export class App extends Component {
 import { App } from "./app.js";
 
 function setup() {
-  mount(App, { target: document.body });
+  const app = new App();
+  app.mount(document.body);
 }
 
 owl.utils.whenReady(setup);
@@ -238,11 +240,12 @@ export class App extends Component {
 }
 
 // src/main.js -----------------------------------------------------------------
-import { utils, mount } from "@odoo/owl";
+import { utils } from "@odoo/owl";
 import { App } from "./components/App";
 
 function setup() {
-  mount(App, { target: document.body });
+  const app = new App();
+  app.mount(document.body);
 }
 
 utils.whenReady(setup);
@@ -250,7 +253,6 @@ utils.whenReady(setup);
 // tests/components/App.test.js ------------------------------------------------
 import { App } from "../../src/components/App";
 import { makeTestFixture, nextTick, click } from "../helpers";
-import { mount } from "@odoo/owl";
 
 let fixture;
 
@@ -264,7 +266,8 @@ afterEach(() => {
 
 describe("App", () => {
   test("Works as expected...", async () => {
-    await mount(App, { target: fixture });
+    const app = new App();
+    await app.mount(fixture);
     expect(fixture.innerHTML).toBe("<div>Hello Owl</div>");
 
     click(fixture, "div");

doc/learning/tutorial_todoapp.md

@@ -85,7 +85,7 @@ a single root component. Let us start by defining an `App` component. Replace th
 content of the function in `app.js` by the following code:
 
 ```js
-const { Component, mount } = owl;
+const { Component } = owl;
 const { xml } = owl.tags;
 const { whenReady } = owl.utils;
 
@@ -96,7 +96,8 @@ class App extends Component {
 
 // Setup code
 function setup() {
-  mount(App, { target: document.body });
+  const app = new App();
+  app.mount(document.body);
 }
 
 whenReady(setup);
@@ -280,7 +281,8 @@ class App extends Component {
 // -------------------------------------------------------------------------
 function setup() {
     owl.config.mode = "dev";
-    mount(App, { target: document.body });
+    const app = new App();
+    app.mount(document.body);
 }
 
 whenReady(setup);
@@ -547,7 +549,7 @@ 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, Store, mount } = owl;
+const { Component, Store } = owl;
 const { xml } = owl.tags;
 const { whenReady } = owl.utils;
 const { useRef, useDispatch, useStore } = owl.hooks;
@@ -639,7 +641,8 @@ function setup() {
   owl.config.mode = "dev";
   const store = new Store({ actions, state: initialState });
   App.env.store = store;
-  mount(App, { target: document.body });
+  const app = new App();
+  app.mount(document.body);
 }
 
 whenReady(setup);
@@ -665,8 +668,9 @@ function makeStore() {
 
 function setup() {
   owl.config.mode = "dev";
-  const env = { store: makeStore() };
-  mount(App, { target: document.body, env });
+  App.env.store = makeStore();
+  const app = new App();
+  app.mount(document.body);
 }
 ```
 
@@ -810,7 +814,7 @@ For reference, here is the final code:
 
 ```js
 (function () {
-  const { Component, Store, mount } = owl;
+  const { Component, Store } = owl;
   const { xml } = owl.tags;
   const { whenReady } = owl.utils;
   const { useRef, useDispatch, useState, useStore } = owl.hooks;
@@ -941,8 +945,9 @@ For reference, here is the final code:
 
   function setup() {
     owl.config.mode = "dev";
-    const env = { store: makeStore() };
-    mount(App, { target: document.body, env });
+    App.env.store = makeStore();
+    const app = new App();
+    app.mount(document.body);
   }
 
   whenReady(setup);

doc/miscellaneous/comparison.md

@@ -4,7 +4,7 @@ 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
+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.
 
 ## Content
@@ -47,7 +47,7 @@ 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,
+comes 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.
 

doc/miscellaneous/why_owl.md

@@ -61,14 +61,14 @@ because a lot of the state is hidden in their internals.
 
 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
+since the assets are totally dynamic (and could change whenever the user install
+or remove 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
+its own module system, which are resolve 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!)
 
@@ -78,12 +78,12 @@ 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
+can use template strings to write single file component, 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
+Odoo stores template as XML document 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.
 
@@ -104,12 +104,12 @@ 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
+as an investment for the future, and we want to make onboarding developer 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
+overwhelmed with the frontend world: functional component, 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
@@ -135,7 +135,7 @@ 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
+Currently, Odoo form views interpret a 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.
@@ -147,16 +147,16 @@ 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 there certainly are situations where we need a state, which is not readonly,
 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
+(basically, whenever the user perform 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
+action is performed, but Odoo want 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).
@@ -175,6 +175,6 @@ 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.
+that is different. For a framework that make choices compatible with Odoo.
 
 And that is why we built Owl 🦉.

doc/readme.md

@@ -17,7 +17,6 @@ You will find here a complete reference of every feature, class or object
 provided by Owl.
 
 - [Animations](reference/animations.md)
-- [Browser](reference/browser.md)
 - [Component](reference/component.md)
 - [Content](reference/content.md)
 - [Concurrency Model](reference/concurrency_model.md)
@@ -28,7 +27,6 @@ provided by Owl.
 - [Event Handling](reference/event_handling.md)
 - [Error Handling](reference/error_handling.md)
 - [Hooks](reference/hooks.md)
-- [Mounting a component](reference/mounting.md)
 - [Miscellaneous Components](reference/misc.md)
 - [Observer](reference/observer.md)
 - [Props](reference/props.md)

doc/reference/animations.md

@@ -52,20 +52,21 @@ sequence of events will happen:
 At node insertion:
 
 - the css classes `name-enter` and `name-enter-active` will be added directly
-  when the node is inserted into the DOM.
+  when the node is inserted into the DOM,
 - on the next animation frame: the css class `name-enter` will be removed and the
   class `name-enter-to` will be added (so they can be used to trigger css
-  transition effects).
-- at the end of the transition, `name-enter-to` and `name-enter-active` will be removed.
+  transition effects),
+- the css class `name-enter-active` will be removed whenever a css transition
+  ends.
 
 At node destruction:
 
 - the css classes `name-leave` and `name-leave-active` will be added before the
-  node is removed to the DOM.
-- on the next animation frame: the css class `name-leave` will be removed and the
-  class `name-leave-to` will be added (so they can be used to trigger css
-  transition effects).
-- at the end of the transition, `name-leave-to` and `name-leave-active` will be removed.
+  node is removed to the DOM,
+- the css class `name-leave` will be removed on the next animation frame (so it
+  can be used to trigger css transition effects),
+- the css class `name-leave-active` will be removed whenever a css transition
+  ends. Only then will the element be removed from the DOM.
 
 For example, a simple fade in/out effect can be done with this:
 
@@ -92,36 +93,3 @@ Notes:
 
 Owl does not support more than one transition on a single node, so the
 `t-transition` expression must be a single value (i.e. no space allowed).
-
-## SCSS Mixins
-
-If you use SCSS, you can use mixins to make generic animations. Here is an exemple with a fade in / fade out animation:
-
-```scss
-@mixin animation-fade($time, $name) {
-  .#{$name}_fade-enter-active,
-  .#{$name}_fade-active {
-    transition: all $time;
-  }
-
-  .#{$name}_fade-enter {
-    opacity: 0;
-  }
-
-  .#{$name}_fade-leave-to {
-    opacity: 0;
-  }
-}
-```
-
-Usage:
-
-```scss
-@include animation-fade(0.5s, "o_notification");
-```
-
-You can now have in your template:
-
-```xml
-<SomeTag  t-transition="o_notification_fade"/>
-```

doc/reference/browser.md

@@ -1,33 +0,0 @@
-# 🦉 Browser 🦉
-
-## Content
-
-- [Overview](#overview)
-- [Browser Content](#browser-content)
-
-## Overview
-
-The browser object contains some browser native APIs, such as `setTimeout`, that
-are used by Owl and its utility functions. They are exposed with the intent of
-making them mockable if necessary.
-
-```js
-owl.browser.setTimeout === window.setTimeout; // return true
-```
-
-For now, this object contains some functions that are not used by Owl. They
-will eventually be removed in Owl 2.0.
-
-## Browser Content
-
-More specifically, the `browser` object contains the following methods and objects:
-
-- `setTimeout`
-- `clearTimeout`
-- `setInterval`
-- `clearInterval`
-- `requestAnimationFrame`
-- `random`
-- `Date`
-- `fetch`
-- `localStorage`

doc/reference/component.md

@@ -10,22 +10,13 @@
   - [Static Properties](#static-properties)
   - [Methods](#methods)
   - [Lifecycle](#lifecycle)
-    - [`constructor(parent, props)`](#constructorparent-props)
-    - [`setup()`](#setup)
-    - [`willStart()`](#willstart)
-    - [`mounted()`](#mounted)
-    - [`willUpdateProps(nextProps)`](#willupdatepropsnextprops)
-    - [`willPatch()`](#willpatch)
-    - [`patched(snapshot)`](#patchedsnapshot)
-    - [`willUnmount()`](#willunmount)
-    - [`catchError(error)`](#catcherrorerror)
   - [Root Component](#root-component)
   - [Composition](#composition)
   - [Form Input Bindings](#form-input-bindings)
   - [References](#references)
   - [Dynamic sub components](#dynamic-sub-components)
   - [Functional Components](#functional-components)
-  - [SVG Components](#svg-components)
+  - [SVG components](#svg-components)
 
 ## Overview
 
@@ -279,10 +270,6 @@ We explain here all the public methods of the `Component` class.
   // app is now visible
   ```
 
-  Note that the normal way of mounting an application is by using the `mount`
-  method on a component class, not by creating the instance by hand. See the
-  documentation on [mounting applications](mounting.md).
-
 * **`unmount()`**: in case a component needs to be detached/removed from the DOM, this
   method can be used. Most applications should not call `unmount`, this is more
   useful to the underlying component system.
@@ -298,13 +285,8 @@ We explain here all the public methods of the `Component` class.
   are updated. It returns a boolean, which indicates if the component should
   ignore a props update. If it returns false, then `willUpdateProps` will not
   be called, and no rendering will occur. Its default implementation is to
-  always return true. Note that this is an optimization, similar to React's `shouldComponentUpdate`. Most of the time, this should not be used, but it
-  can be useful if we are handling large number of components. Since this is an
-  optimization, Owl has the freedom to ignore the result of `shouldUpdate` in
-  some cases (for example, if a component is remounted, or if we want to force
-  a full rerender of the UI). However, if `shouldUpdate` returns true, then Owl
-  provides the guarantee that the component will be rendered at some point in
-  the future (except if the component is destroyed or if some part of the UI crashes).
+  always return true. This is an optimization, similar to React's `shouldComponentUpdate`. Most of the time, this should not be used, but it
+  can be useful if we are handling large number of components.
 
 * **`destroy()`**. As its name suggests, this method will remove the component,
   and perform all necessary cleanup, such as unmounting the component, its children,
@@ -325,7 +307,7 @@ a owl component:
 
 | Method                                           | Description                                                 |
 | ------------------------------------------------ | ----------------------------------------------------------- |
-| **[setup](#setup)**                              | setup                                                       |
+| **[constructor](#constructorparent-props)**      | constructor                                                 |
 | **[willStart](#willstart)**                      | async, before first rendering                               |
 | **[mounted](#mounted)**                          | just after component is rendered and added to the DOM       |
 | **[willUpdateProps](#willupdatepropsnextprops)** | async, before props update                                  |
@@ -370,23 +352,6 @@ class ClickCounter extends owl.Component {
 }
 ```
 
-Hook functions can be called in the constructor.
-
-#### `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 a valid method 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
@@ -789,7 +754,7 @@ template rendered with `props`. In Owl, this can be done by
 simply defining a template, that will access the `props` object:
 
 ```js
-const Welcome = xml`<h1>Hello, <t t-esc="props.name"/></h1>`;
+const Welcome = xml`<h1>Hello, {props.name}</h1>`;
 
 class MyComponent extends Component {
   static template = xml`

doc/reference/content.md

@@ -7,15 +7,13 @@ For example, `Component` is available at `owl.Component` and `EventBus` is
 exported as `owl.core.EventBus`.
 
 ```
-browser
 Component                               misc
 Context                                     AsyncRoot
 QWeb                                        Portal
-mount                                   router
-Store                                       Link
-useState                                    RouteComponent
-config                                      Router
-    mode
+Store                                   router
+useState                                    Link
+config                                      RouteComponent
+    mode                                    Router
 core                                    tags
     EventBus                                css
     Observer                                xml
@@ -29,8 +27,6 @@ hooks                                   utils
     useContext
     useState
     useRef
-    useComponent
-    useEnv
     useSubEnv
     useStore
     useDispatch

doc/reference/environment.md

@@ -49,14 +49,15 @@ The correct way to customize an environment is to simply set it up on the root
 component class, before the first component is created:
 
 ```js
-const env = {
+App.env = {
     _t: myTranslateFunction,
     user: {...},
     services: {
         ...
     },
 };
-mount(App, { target: document.body, env });
+const app = new App();
+app.mount(document.body);
 ```
 
 It is also possible to simply share an environment between all root components,
@@ -120,8 +121,9 @@ async function myEnv() {
 }
 
 async function start() {
-  const env = await myEnv();
-  mount(App, { target: document.body, env });
+  App.env = await myEnv();
+  const app = new App();
+  await app.mount(document.body);
 }
 ```
 
@@ -133,4 +135,17 @@ the `QWeb` instance and a `browser` object:
 - `qweb` will be set to an empty `QWeb` instance. This is absolutely necessary
   for Owl to be able to render anything
 - `browser`: this is an object that contains some common access points to the
-  browser methods with a side effect. See [browser](browser.md) for more information. Note that the browser object will be removed from the environment in Owl 2.0.
+  browser methods with a side effect. This is particularly useful when one want
+  to test more advanced components, and be able to mock those methods.
+
+More specifically, the `browser` object contains the following methods and objects:
+
+- `setTimeout`
+- `clearTimeout`
+- `setInterval`
+- `clearInterval`
+- `requestAnimationFrame`
+- `random`
+- `Date`
+- `fetch`
+- `localStorage`

doc/reference/hooks.md

@@ -21,8 +21,6 @@
   - [`useStore`](#usestore)
   - [`useDispatch`](#usedispatch)
   - [`useGetters`](#usegetters)
-  - [`useComponent`](#usecomponent)
-  - [`useEnv`](#useenv)
   - [Making customized hooks](#making-customized-hooks)
 
 ## Overview
@@ -131,7 +129,7 @@ class SomeComponent extends Component {
 ### One rule
 
 There is only one rule: every hook for a component has to be called in the
-constructor, in the _setup_ method, or in class fields:
+constructor (or in class fields):
 
 ```js
 // ok
@@ -147,13 +145,6 @@ class SomeComponent extends Component {
   }
 }
 
-// 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() {
@@ -390,16 +381,6 @@ The `useDispatch` hook is the way for components to get a reference to the store
 The `useGetters` hook is the way for components to get a reference to the store
 getters. See the [store documentation](store.md) for more information.
 
-### `useComponent`
-
-The `useComponent` hook is useful as a building block for some customized hooks,
-that may need a reference to the component calling them.
-
-### `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.
-
 ### Making customized hooks
 
 Hooks are a wonderful way to organize the code of a complex component by feature
@@ -454,11 +435,13 @@ not the solution to every problem.
 
   ```js
   function useRouter() {
-    const env = useEnv();
-    return env.router;
+    return Component.current.env.router;
   }
   ```
 
   This means that we give control to the application developer to create the
   router, which is good, so they can set it up, subclass it, ... And then, to
   test our components, we can just add a mock router in the environment.
+
+Note: the code above makes use of the `Component.current` property. This is the
+way hooks are able to get a reference to the component currently being created.

doc/reference/misc.md

@@ -43,7 +43,7 @@ workflow to help the user put in some data, which it could use later on.
 JavaScript:
 
 ```js
-const { Component, mount } = owl;
+const { Component } = owl;
 const { Portal } = owl.misc;
 
 class TeleportedComponent extends Component {}
@@ -51,7 +51,8 @@ class App extends Component {
   static components = { Portal, TeleportedComponent };
 }
 
-mount(App, { target: document.body });
+const app = new App();
+app.mount(document.body);
 ```
 
 XML:

doc/reference/mounting.md

@@ -1,60 +0,0 @@
-# 🦉 Mounting an application 🦉
-
-## Content
-
-- [Overview](#overview)
-- [API](#api)
-
-## Overview
-
-Mounting an Owl application is done by using the `mount` method (available in
-`owl.mount` if you are using the iife build, or it can be directly imported
-from `owl` if you are using a module system):
-
-```js
-const mount = { owl }; // if owl is available as an object
-
-const env = { ... };
-const app = await mount(MyComponent, { target: document.body, env });
-```
-
-Another example:
-
-```js
-const config = {
-  env: ...,
-  props: ...,
-  target: document.body,
-  position: "self",
-};
-const app = await mount(App, config);
-```
-
-A common way to initialize an application is to first setup an environment,
-then to call the `mount` method.
-
-## API
-
-Mount takes two parameters:
-
-- `C`, which should be a component class (NOT instance),
-- `params`, which is an object with the following keys:
-  - `target (HTMLElement | DocumentFragment)`: the target of the mount operation
-  - `env (optional, Env)` an environment
-  - `position (optional, "first-child" | "last-child" | "self")` the position
-    where it should be mounted (see below for more informations)
-  - `props (optional, any)`: some initial values that are given as props. Useful
-    when the root component is configurable, or when testing sub components
-
-Here are the various positions supported by Owl:
-
-- `first-child`: with this option, the component will be prepended inside the target,
-- `last-child` (default value): with this option, the component will be
-  appended in the target element,
-- `self`: the target will be used as the root element for the component. This
-  means that the target has to be an HTMLElement (and not a document fragment).
-  In this situation, it is possible that the component cannot be unmounted. For
-  example, if its target is `document.body`.
-
-The `mount` method returns a promise that resolves to the instance of the created
-component.

doc/reference/observer.md

@@ -15,7 +15,7 @@ use cases, there is no need to directly instantiate an observer.
 For example, this code will display `update` in the console:
 
 ```javascript
-const observer = new owl.core.Observer();
+const observer = new owl.Observer();
 observer.notifyCB = () => console.log("update");
 const obj = observer.observe({ a: { b: 1 } });
 
@@ -39,14 +39,14 @@ is incremented every time the value is observed. Sometimes, it can be useful
 to obtain that number:
 
 ```js
-const observer = new owl.core.Observer();
+const observer = new owl.Observer();
 const obj = observer.observe({ a: { b: 1 } });
 
-observer.revNumber(obj.a); // 1
+observer.deepRevNumber(obj.a); // 1
 obj.a.b = 2;
 
-observer.revNumber(obj.a); // 2
+observer.deepRevNumber(obj.a); // 2
 ```
 
-The `revNumber` can also return 0, which indicates that the value is not
+The `deepRevNumber` can also return 0, which indicates that the value is not
 observed.

doc/reference/props.md

@@ -18,7 +18,7 @@ class Child extends Component {
 }
 
 class Parent extends Component {
-  static template = xml`<div><Child a="state.a" b="'string'"/></div>`;
+  static template = xml`<div><ComponentA a="state.a" b="'string'"/></div>`;
   static components = { Child };
   state = useState({ a: "fromparent" });
 }

doc/reference/qweb_engine.md

@@ -105,6 +105,8 @@ between Owl classes. This is the reason why `QWeb` actually extends [EventBus](e
 
 ### Translations
 
+take care of this and "cherry-pick" 8464a1b04e7469434f9dcb3d68a543f58cb61b8e
+
 If properly setup, Owl QWeb engine can translate all rendered templates. To do
 so, it needs a translate function, which takes a string and returns a string.
 

doc/reference/qweb_templating_language.md

@@ -13,8 +13,6 @@
   - [Setting Variables](#setting-variables)
   - [Conditionals](#conditionals)
   - [Dynamic Attributes](#dynamic-attributes)
-  - [Dynamic Class Attribute](#dynamic-class-attribute)
-  - [Dynamic Tag Names](#dynamic-tag-names)
   - [Loops](#loops)
   - [Rendering Sub Templates](#rendering-sub-templates)
   - [Dynamic Sub Templates](#dynamic-sub-templates)
@@ -78,7 +76,6 @@ needs. Here is a list of all Owl specific directives:
 | `t-transition`           | [Defining an animation](animations.md#css-transitions)                          |
 | `t-slot`                 | [Rendering a slot](slots.md)                                                    |
 | `t-model`                | [Form input bindings](component.md#form-input-bindings)                         |
-| `t-tag`                  | [Rendering nodes with dynamic tag name](#dynamic-tag-names)                     |
 
 ## Reference
 
@@ -327,40 +324,6 @@ values) or a pair `[key, value]`. For example:
 <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

doc/reference/router.md

@@ -1,5 +1,7 @@
 # 🦉 Router 🦉
 
+Remove?
+
 ## Content
 
 - [Overview](#overview)

doc/reference/slots.md

@@ -25,8 +25,6 @@ some sub template, but still be the owner. For example, a generic dialog compone
 will need to render some content, some footer, but with the parent as the
 rendering context.
 
-Slots are inserted with the `t-slot` directive:
-
 ```xml
 <div t-name="Dialog" class="modal">
   <div class="modal-title"><t t-esc="props.title"/></div>
@@ -44,7 +42,7 @@ Slots are defined by the caller, with the `t-set-slot` directive:
 ```xml
 <div t-name="SomeComponent">
   <div>some component</div>
-  <Dialog title="'Some Dialog'">
+  <Dialog title="Some Dialog">
     <t t-set-slot="content">
       <div>hey</div>
     </t>
@@ -64,9 +62,7 @@ This is deprecated and should no longer be used in new code.
 
 ## Reference
 
-### Default Slot
-
-The first element inside the component which is not a named slot will
+Default slot: the first element inside the component which is not a named slot will
 be considered the `default` slot. For example:
 
 ```xml
@@ -81,9 +77,7 @@ be considered the `default` slot. For example:
 </div>
 ```
 
-### Default content
-
-Slots can define a default content, in case the parent did not define them:
+Default content: slots can define a default content, in case the parent did not define them:
 
 ```xml
 <div t-name="Parent">
@@ -100,12 +94,3 @@ 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).
-
-### Dynamic Slots
-
-The `t-slot` directive is actually able to use any expressions, using string
-interplolation:
-
-```xml
- <t t-slot="{{current}}" />
-```

doc/reference/tags.md

@@ -62,14 +62,14 @@ The CSS tag is useful to define a css stylesheet in the javascript file:
 
 ```js
 class MyComponent extends Component {
-  static template = xml`
+    static template = xml`
         <div class="my-component">some template</div>
     `;
-  static style = css`
-    .my-component {
-      color: red;
-    }
-  `;
+    static css`
+      .my-component {
+          color: red;
+      }
+    `;
 }
 ```
 
@@ -176,9 +176,9 @@ const uuid = generateUUID();
 class MyComponent extends Component {
   static template = xml`<div data-o-${uuid}="">...</div>`;
   static style = css`
-        [data-o-${uuid}] {
-            color: red;
-        }
-    `;
+    [data-o-${uuid}] {
+      color: red;
+    }
+  `;
 }
 ```

doc/reference/utils.md

@@ -21,8 +21,8 @@ argument, it executes it as soon as the DOM ready (or directly).
 ```js
 Promise.all([loadFile("templates.xml"), owl.utils.whenReady()]).then(function ([templates]) {
   const qweb = new owl.QWeb({ templates });
-  const env = { qweb };
-  await mount(App, { env, target: document.body });
+  const app = new App({ qweb });
+  app.mount(document.body);
 });
 ```
 
@@ -31,8 +31,8 @@ or alternatively:
 ```js
 owl.utils.whenReady(function () {
   const qweb = new owl.QWeb();
-  const env = { qweb };
-  await mount(App, { env, target: document.body });
+  const app = new App({ qweb });
+  app.mount(document.body);
 });
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "1.4.5",
+  "version": "1.0.13",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",
@@ -10,7 +10,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=12.18.3"
+    "node": ">=10.15.3"
   },
   "scripts": {
     "build:bundle": "rollup -c",
@@ -22,7 +22,6 @@
     "pretools:watch": "npm run build",
     "tools:watch": "npm-run-all  --parallel tools: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"
   },
@@ -41,7 +40,6 @@
     "@types/node": "^14.11.8",
     "chalk": "^3.0.0",
     "cpx": "^1.5.0",
-    "current-git-branch": "^1.1.0",
     "git-rev-sync": "^1.12.0",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
@@ -55,7 +53,7 @@
     "sass": "^1.16.1",
     "source-map-support": "^0.5.10",
     "ts-jest": "^27.0.5",
-    "typescript": "^3.7.2",
+    "typescript": "3.9.6",
     "uglify-es": "^3.3.9"
   },
   "jest": {
@@ -64,6 +62,7 @@
       "<rootDir>/src",
       "<rootDir>/tests"
     ],
+    "setupFiles": ["./tests/mocks/mockEventTarget.js"],
     "transform": {
       "^.+\\.ts?$": "ts-jest"
     },

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.4.5
+- Current version: 1.0.13
 - Status: stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

rollup.config.js

@@ -40,6 +40,7 @@ function getConfigForFormat(format, generatedFileName, minified = false) {
     name: name,
     extend: extend,
     outro: outro,
+    freeze: false,
     plugins: minified ? [terser()] : [],
     indent: '    ', // indent with 4 spaces
   };

src/app.ts

@@ -0,0 +1,45 @@
+import { Component } from "./component/component";
+import { ComponentNode } from "./component/component_node";
+import { Scheduler } from "./component/scheduler";
+import { TemplateSet } from "./qweb/template_helpers";
+
+// reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
+
+export class App<T extends typeof Component = any> extends TemplateSet {
+  Root: T;
+  props: any;
+  env: any = {};
+  scheduler = new Scheduler(window.requestAnimationFrame.bind(window));
+  root: ComponentNode | null = null;
+  dev: boolean = true;
+
+  constructor(Root: T, props?: any) {
+    super();
+    this.Root = Root;
+    this.props = props;
+  }
+
+  configure(params: any) {
+    if (params.env) {
+      this.env = params.env;
+    }
+  }
+
+  mount(target: HTMLElement): Promise<InstanceType<T>> {
+    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");
+    }
+    const node = new ComponentNode(this.Root, this.props, this);
+    this.root = node;
+    return node.mountComponent(target);
+  }
+
+  destroy() {
+    if (this.root) {
+      this.root.destroy();
+    }
+  }
+}

src/blockdom/attributes.ts

@@ -0,0 +1,155 @@
+import type { Setter } from "./block_compiler";
+
+const { setAttribute, 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.
+ */
+
+export function createAttrUpdater(attr: string): Setter<HTMLElement> {
+  return function (this: HTMLElement, value: any) {
+    if (value !== false) {
+      setAttribute.call(this, attr, value === true ? "" : 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 === "readonly" || key === "disabled";
+      break;
+    case "button":
+    case "select":
+    case "optgroup":
+      return key === "disabled";
+  }
+  return false;
+}

src/blockdom/block_compiler.ts

@@ -0,0 +1,602 @@
+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[];
+  forceRef?: boolean;
+  refIdx?: number;
+  refN: number;
+}
+
+function buildTree(
+  node: Node,
+  parent: IntermediateTree | null = null,
+  domParentTree: IntermediateTree | null = null
+): IntermediateTree {
+  switch (node.nodeType) {
+    case 1: {
+      // HTMLElement
+      let isActive = false;
+      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("");
+        isActive = true;
+      }
+      if (tagName.startsWith("block-child-")) {
+        domParentTree!.forceRef = true;
+        const index = parseInt(tagName.slice(12), 10);
+        info.push({ type: "child", idx: index });
+        el = document.createTextNode("");
+        isActive = true;
+      }
+      if (!el) {
+        el = document.createElement(tagName);
+      }
+      if (el instanceof HTMLElement) {
+        const attrs = (node as Element).attributes;
+        for (let i = 0; i < attrs.length; i++) {
+          const attrName = attrs[i].name;
+          const attrValue = attrs[i].value;
+          if (attrName.startsWith("block-handler-")) {
+            isActive = true;
+            const idx = parseInt(attrName.slice(14), 10);
+            info.push({
+              type: "handler",
+              idx,
+              event: attrValue,
+            });
+          } else if (attrName.startsWith("block-attribute-")) {
+            isActive = true;
+            const idx = parseInt(attrName.slice(16), 10);
+            info.push({
+              type: "attribute",
+              idx,
+              name: attrValue,
+              tag: tagName,
+            });
+          } else if (attrName === "block-attributes") {
+            isActive = true;
+            info.push({
+              type: "attributes",
+              idx: parseInt(attrValue, 10),
+            });
+          } else if (attrName === "block-ref") {
+            isActive = true;
+            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: isActive ? 1 : 0,
+      };
+
+      if (node.firstChild) {
+        const childNode = node.childNodes[0];
+        if (
+          node.childNodes.length === 1 &&
+          childNode.nodeType === 1 &&
+          (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 });
+          isActive = true;
+          tree.refN = 1;
+        } 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 (isActive) {
+        let cur: IntermediateTree | null = tree;
+        while ((cur = cur.parent)) {
+          cur.refN++;
+        }
+      }
+      return tree;
+    }
+    case 3:
+    case 8: {
+      // text node or comment node
+      const el =
+        node.nodeType === 3
+          ? document.createTextNode(node.textContent!)
+          : document.createComment(node.textContent!);
+      return {
+        parent: parent,
+        firstChild: null,
+        nextSibling: null,
+        el,
+        info: [],
+        refN: 0,
+      };
+    }
+  }
+  throw new Error("boom");
+}
+
+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[];
+}
+
+function buildContext(
+  tree: IntermediateTree,
+  ctx?: BlockCtx,
+  fromIdx?: number,
+  toIdx?: number
+): BlockCtx {
+  if (!ctx) {
+    const children = new Array(tree.info.filter((v) => v.type === "child").length);
+    ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN };
+    fromIdx = 0;
+    toIdx = tree.refN - 1;
+  }
+  if (tree.refN) {
+    const initialIdx = fromIdx!;
+    const isRef = tree.forceRef || tree.info.length > 0;
+    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, toIdx);
+    }
+
+    // left
+    if (firstChild) {
+      ctx.collectors.push({ idx: fromIdx!, prevIdx: initialIdx, getVal: nodeGetFirstChild });
+      buildContext(tree.firstChild!, ctx, fromIdx!, toIdx! - nextSibling);
+    }
+  }
+
+  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 setupHandler = createEventHandler(info.event!);
+        ctx.locations.push({
+          idx: info.idx,
+          refIdx: info.refIdx!,
+          setData: setupHandler,
+          updateData: setupHandler,
+        });
+        break;
+      }
+      case "ref":
+        ctx.cbRefs.push(info.idx);
+        ctx.locations.push({
+          idx: info.idx,
+          refIdx: info.refIdx!,
+          setData: setRef,
+          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 refs = ctx.cbRefs;
+    B = class extends B {
+      remove() {
+        super.remove();
+        for (let ref of refs) {
+          let fn = (this as any).data[ref];
+          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;
+
+  return class Block {
+    el: HTMLElement | undefined;
+    refs: Node[] | undefined;
+    data: any[] | undefined;
+    parentEl?: HTMLElement | undefined;
+    children?: (VNode | 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);
+    }
+
+    mount(parent: HTMLElement, afterNode: Node | null) {
+      const el = nodeCloneNode.call(template, true);
+      nodeInsertBefore.call(parent, el, afterNode);
+      if (isDynamic) {
+        // 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]);
+          }
+        }
+
+        // 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;
+    }
+    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;
+          }
+        }
+      }
+    }
+    toString() {
+      const div = document.createElement("div");
+      this.mount(div, null);
+      return div.innerHTML;
+    }
+  };
+}
+
+function setText(this: Text, value: any) {
+  characterDataSetData.call(this, toText(value));
+}
+
+function setRef(this: HTMLElement, fn: any) {
+  fn(this);
+}

src/blockdom/config.ts

@@ -0,0 +1,16 @@
+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) => {
+    if (typeof data === "function") {
+      data(ev);
+    } else if (Array.isArray(data)) {
+      data[0](data[1], ev);
+    }
+  },
+};

src/blockdom/events.ts

@@ -0,0 +1,32 @@
+import { config } from "./config";
+
+export function createEventHandler(event: string) {
+  setupSyntheticEvent(event);
+  const key = `__event__${event}`;
+  return function setupHandler(this: HTMLElement, data: any) {
+    (this as any)[key] = data;
+  };
+}
+
+function nativeToSyntheticEvent(event: Event, name: string) {
+  const eventKey = `__event__${name}`;
+  let dom = event.target;
+  while (dom !== null) {
+    const data = (dom as any)[eventKey];
+    if (data) {
+      config.mainEventHandler(data, event);
+      return;
+    }
+    dom = (dom as any).parentNode;
+  }
+}
+
+const CONFIGURED_SYNTHETIC_EVENTS: { [event: string]: boolean } = {};
+
+function setupSyntheticEvent(name: string) {
+  if (CONFIGURED_SYNTHETIC_EVENTS[name]) {
+    return;
+  }
+  document.addEventListener(name, (event) => nativeToSyntheticEvent(event, name));
+  CONFIGURED_SYNTHETIC_EVENTS[name] = true;
+}

src/blockdom/html.ts

@@ -0,0 +1,87 @@
+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;
+    }
+  }
+
+  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 } 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) {
+  vnode.mount(fixture, null);
+}
+
+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,240 @@
+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;
+    // let noFullRemove = this.hasNoComponent;
+
+    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!.toString()).join("");
+  }
+}
+
+export function multi(children: (VNode | undefined)[]): VNode<VMulti> {
+  return new VMulti(children);
+}

src/blockdom/text.ts

@@ -0,0 +1,70 @@
+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;
+
+class VText {
+  text: string;
+  parentEl?: HTMLElement | undefined;
+  el?: Text;
+
+  constructor(text: string) {
+    this.text = text;
+  }
+
+  mount(parent: HTMLElement, afterNode: Node | null) {
+    this.parentEl = parent;
+    const node = document.createTextNode(toText(this.text));
+    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);
+  }
+
+  patch(other: VText) {
+    const text2 = other.text;
+    if (this.text !== text2) {
+      characterDataSetData.call(this.el!, toText(text2));
+      this.text = text2;
+    }
+  }
+
+  beforeRemove() {}
+
+  remove() {
+    nodeRemoveChild.call(this.parentEl, this.el!);
+  }
+
+  firstNode(): Node {
+    return this.el!;
+  }
+
+  toString() {
+    return this.text;
+  }
+}
+
+export function text(str: string): VNode<VText> {
+  return new VText(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,63 @@
+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() {}
+
+  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/browser.ts

@@ -1,30 +0,0 @@
-export interface Browser {
-  setTimeout: Window["setTimeout"];
-  clearTimeout: Window["clearTimeout"];
-  setInterval: Window["setInterval"];
-  clearInterval: Window["clearInterval"];
-  requestAnimationFrame: Window["requestAnimationFrame"];
-  random: Math["random"];
-  Date: typeof Date;
-  fetch: Window["fetch"];
-  localStorage: Window["localStorage"];
-}
-
-let localStorage: Window["localStorage"] | null = null;
-
-export const browser: Browser = {
-  setTimeout: window.setTimeout.bind(window),
-  clearTimeout: window.clearTimeout.bind(window),
-  setInterval: window.setInterval.bind(window),
-  clearInterval: window.clearInterval.bind(window),
-  requestAnimationFrame: window.requestAnimationFrame.bind(window),
-  random: Math.random,
-  Date: window.Date,
-  fetch: (window.fetch || (() => {})).bind(window),
-  get localStorage() {
-    return localStorage || window.localStorage;
-  },
-  set localStorage(newLocalStorage: Window["localStorage"]) {
-    localStorage = newLocalStorage;
-  },
-};

src/component/component.ts

@@ -1,781 +1,29 @@
-import { Observer } from "../core/observer";
-import { OwlEvent } from "../core/owl_event";
-import { CompiledTemplate, QWeb } from "../qweb/index";
-import { patch, VNode } from "../vdom/index";
-import "./directive";
-import { Fiber } from "./fiber";
-import "./props_validation";
-import { Scheduler, scheduler } from "./scheduler";
-import { activateSheet } from "./styles";
-import { Browser, browser } from "../browser";
+import type { ComponentNode } from "./component_node";
 
-/**
- * Owl Component System
- *
- * This file introduces a declarative and composable component system. It
- * contains:
- *
- * - the Env interface (generic type for the environment)
- * - the Internal interface (the owl specific metadata attached to a component)
- * - the Component class
- */
+// -----------------------------------------------------------------------------
+//  Component Class
+// -----------------------------------------------------------------------------
 
-//------------------------------------------------------------------------------
-// Types/helpers
-//------------------------------------------------------------------------------
+export class Component {
+  static template: string = "";
 
-/**
- * An Env (environment) is an object that will be (mostly) shared between all
- * components of an Owl application.  It is the location which should contain
- * the qweb instance necessary to render all components.
- *
- * Note that it is totally fine to extend the environment with application
- * specific keys/objects/whatever.  For example, a key `isMobile` (to declare
- * if we are in "mobile" mode), or a shared bus could be useful.
- */
-export interface Env {
-  qweb: QWeb;
-  browser: Browser;
-}
+  props: any;
+  env: any;
+  __owl__: ComponentNode;
 
-export type MountPosition = "first-child" | "last-child" | "self";
-
-interface MountOptions {
-  position?: MountPosition;
-}
-
-export const enum STATUS {
-  CREATED,
-  WILLSTARTED, // willstart has been called
-  RENDERED, // first render is completed (so, vnode is now defined)
-  MOUNTED, // is ready, and in DOM. It has a valid el
-  UNMOUNTED, // has a valid el, but is not in DOM
-  DESTROYED,
-}
-
-/**
- * This is mostly an internal detail of implementation. The Meta interface is
- * useful to typecheck and describe the internal keys used by Owl to manage the
- * component tree.
- */
-interface Internal<T extends Env> {
-  // each component has a unique id, useful mostly to handle parent/child
-  // relationships
-  readonly id: number;
-  depth: number;
-  vnode: VNode | null;
-  pvnode: VNode | null;
-  status: STATUS;
-
-  // parent and children keys are obviously useful to setup the parent-children
-  // relationship.
-  parent: Component<any, T> | null;
-  children: { [key: number]: Component<any, T> };
-  // children mapping: from templateID to componentID. templateID identifies a
-  // place in a template. The t-component directive needs it to be able to get
-  // the component instance back whenever the template is rerendered.
-  cmap: { [key: number]: number };
-
-  currentFiber: Fiber | null;
-  // parentLastFiberId is there to help the parent component to detect, among
-  // its children, those that are not used anymore and thus can be destroyed
-  parentLastFiberId: number;
-
-  // when a rendering is initiated by a parent, it may set variables in 'scope'
-  // (typically when the component is rendered in a slot). We need to
-  // store that information in case the component would be re-rendered later on.
-  scope: any;
-
-  boundHandlers: { [key: number]: any };
-  observer: Observer | null;
-  renderFn: CompiledTemplate;
-  mountedCB: Function | null;
-  willUnmountCB: Function | null;
-  willPatchCB: Function | null;
-  patchedCB: Function | null;
-  willStartCB: Function | null;
-  willUpdatePropsCB: Function | null;
-  classObj: { [key: string]: boolean } | null;
-  refs: { [key: string]: Component<any, T> | HTMLElement | undefined } | null;
-}
-
-export const portalSymbol = Symbol("portal"); // FIXME
-
-//------------------------------------------------------------------------------
-// Component
-//------------------------------------------------------------------------------
-let nextId = 1;
-
-export class Component<Props extends {} = any, T extends Env = Env> {
-  readonly __owl__: Internal<T>;
-  static template?: string | null = null;
-  static _template?: string | null = null;
-  static current: Component | null = null;
-  static components = {};
-  static props?: any;
-  static defaultProps?: any;
-  static env: any = {};
-  // expose scheduler s.t. it can be mocked for testing purposes
-  static scheduler: Scheduler = scheduler;
-
-  /**
-   * The `el` is the root element of the component.  Note that it could be null:
-   * this is the case if the component is not mounted yet, or is destroyed.
-   */
-  get el(): HTMLElement | null {
-    return this.__owl__.vnode ? (<any>this).__owl__.vnode.elm : null;
+  constructor(props: any, env: any, node: ComponentNode) {
+    this.props = props;
+    this.env = env;
+    this.__owl__ = node;
+  }
+  get el(): HTMLElement | Text | undefined {
+    const node = this.__owl__;
+    return node.bdom ? (node.bdom.firstNode() as any) : undefined;
   }
 
-  env: T;
-  props: Props;
-
-  //--------------------------------------------------------------------------
-  // Lifecycle
-  //--------------------------------------------------------------------------
-
-  /**
-   * Creates an instance of Component.
-   *
-   * Note that most of the time, only the root component needs to be created by
-   * hand.  Other components should be created automatically by the framework (with
-   * the t-component directive in a template)
-   */
-  constructor(parent?: Component<any, T> | null, props?: Props) {
-    Component.current = this;
-
-    let constr = this.constructor as any;
-    const defaultProps = constr.defaultProps;
-    if (defaultProps) {
-      props = props || ({} as Props);
-      this.__applyDefaultProps(props, defaultProps);
-    }
-    this.props = <Props>props;
-    if (QWeb.dev) {
-      QWeb.utils.validateProps(constr, this.props);
-    }
-
-    const id: number = nextId++;
-    let depth;
-    if (parent) {
-      this.env = parent.env;
-      const __powl__ = parent.__owl__;
-      __powl__.children[id] = this;
-      depth = __powl__.depth + 1;
-    } else {
-      // we are the root component
-      this.env = (this.constructor as any).env;
-      if (!this.env.qweb) {
-        this.env.qweb = new QWeb();
-      }
-      // TODO: remove this in owl 2.0
-      if (!this.env.browser) {
-        this.env.browser = browser;
-      }
-      this.env.qweb.on("update", this, () => {
-        switch (this.__owl__.status) {
-          case STATUS.MOUNTED:
-            this.render(true);
-            break;
-          case STATUS.DESTROYED:
-            // this is unlikely to happen, but if a root widget is destroyed,
-            // we want to remove our subscription.  The usual way to do that
-            // would be to perform some check in the destroy method, but since
-            // it is very performance sensitive, and since this is a rare event,
-            // we simply do it lazily
-            this.env.qweb.off("update", this);
-            break;
-        }
-      });
-      depth = 0;
-    }
-
-    const qweb = this.env.qweb;
-    const template = constr.template || this.__getTemplate(qweb);
-    this.__owl__ = {
-      id: id,
-      depth: depth,
-      vnode: null,
-      pvnode: null,
-      status: STATUS.CREATED,
-      parent: parent || null,
-      children: {},
-      cmap: {},
-      currentFiber: null,
-      parentLastFiberId: 0,
-      boundHandlers: {},
-      mountedCB: null,
-      willUnmountCB: null,
-      willPatchCB: null,
-      patchedCB: null,
-      willStartCB: null,
-      willUpdatePropsCB: null,
-      observer: null,
-      renderFn: qweb.render.bind(qweb, template),
-      classObj: null,
-      refs: null,
-      scope: null,
-    };
-    if (constr.style) {
-      this.__applyStyles(constr);
-    }
-    this.setup();
-  }
-
-  /**
-   * setup is run just after the component is constructed. This is the standard
-   * location where the component can setup its hooks. It has some advantages
-   * over the constructor:
-   *  - it can be patched (useful in odoo ecosystem)
-   *  - it does not need to propagate the arguments to the super call
-   *
-   * Note: this method should not be called manually.
-   */
   setup() {}
 
-  /**
-   * 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 component 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(): any {}
-
-  /**
-   * 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 component 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() {}
-
-  /**
-   * catchError is a method called whenever some error happens in the rendering or
-   * lifecycle hooks of a child.
-   *
-   * It needs to be implemented by a component that is designed to handle the
-   * error properly.
-   */
-  catchError?(error?: Error): void;
-
-  //--------------------------------------------------------------------------
-  // Public
-  //--------------------------------------------------------------------------
-
-  /**
-   * Mount the component to a target element.
-   *
-   * This should only be done if the component was created manually. Components
-   * created declaratively in templates are managed by the Owl system.
-   *
-   * Note that a component can be mounted an unmounted several times
-   */
-  async mount(target: HTMLElement | DocumentFragment, options: MountOptions = {}): Promise<void> {
-    if (!(target instanceof HTMLElement || target instanceof DocumentFragment)) {
-      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
-      message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
-      throw new Error(message);
-    }
-    const position = options.position || "last-child";
-    const __owl__ = this.__owl__;
-    const currentFiber = __owl__.currentFiber;
-
-    switch (__owl__.status) {
-      case STATUS.CREATED: {
-        const fiber = new Fiber(null, this, true, target, position);
-        fiber.shouldPatch = false;
-        this.__prepareAndRender(fiber, () => {});
-        return scheduler.addFiber(fiber);
-      }
-      case STATUS.WILLSTARTED:
-      case STATUS.RENDERED:
-        currentFiber.target = target;
-        currentFiber.position = position;
-        return scheduler.addFiber(currentFiber);
-
-      case STATUS.UNMOUNTED: {
-        const fiber = new Fiber(null, this, true, target, position);
-        fiber.shouldPatch = false;
-        this.__render(fiber);
-        return scheduler.addFiber(fiber);
-      }
-
-      case STATUS.MOUNTED: {
-        if (position !== "self" && this.el!.parentNode !== target) {
-          const fiber = new Fiber(null, this, true, target, position);
-          fiber.shouldPatch = false;
-          this.__render(fiber);
-          return scheduler.addFiber(fiber);
-        } else {
-          return Promise.resolve();
-        }
-      }
-
-      case STATUS.DESTROYED:
-        throw new Error("Cannot mount a destroyed component");
-    }
-  }
-
-  /**
-   * The unmount method is the opposite of the mount method.  It is useful
-   * to call willUnmount calls and remove the component from the DOM.
-   */
-  unmount() {
-    if (this.__owl__.status === STATUS.MOUNTED) {
-      this.__callWillUnmount();
-      this.el!.remove();
-    }
-  }
-
-  /**
-   * The render method is the main entry point to render a component (once it
-   * is ready. This method is not initially called when the component is
-   * rendered the first time).
-   *
-   * This method will cause all its sub components to potentially rerender
-   * themselves.  Note that `render` is not called if a component is updated via
-   * its props.
-   */
-  async render(force: boolean = false): Promise<void> {
-    const __owl__ = this.__owl__;
-    const currentFiber = __owl__.currentFiber;
-    if (!__owl__.vnode && !currentFiber) {
-      return;
-    }
-    if (currentFiber && !currentFiber.isRendered && !currentFiber.isCompleted) {
-      return scheduler.addFiber(currentFiber.root);
-    }
-    // if we aren't mounted at this point, it implies that there is a
-    // currentFiber that is already rendered (isRendered is true), so we are
-    // about to be mounted
-    const status = __owl__.status;
-    const fiber = new Fiber(null, this, force, null, null);
-    Promise.resolve().then(() => {
-      if (__owl__.status === STATUS.MOUNTED || status !== STATUS.MOUNTED) {
-        if (fiber.isCompleted || fiber.isRendered) {
-          return;
-        }
-        this.__render(fiber);
-      } else {
-        // we were mounted when render was called, but we aren't anymore, so we
-        // were actually about to be unmounted ; we can thus forget about this
-        // fiber
-        fiber.isCompleted = true;
-        __owl__.currentFiber = null;
-      }
-    });
-    return scheduler.addFiber(fiber);
-  }
-
-  /**
-   * Destroy the component.  This operation is quite complex:
-   *  - it recursively destroy all children
-   *  - call the willUnmount hooks if necessary
-   *  - remove the dom node from the dom
-   *
-   * This should only be called manually if you created the component.  Most
-   * components will be automatically destroyed.
-   */
-  destroy() {
-    const __owl__ = this.__owl__;
-    if (__owl__.status !== STATUS.DESTROYED) {
-      const el = this.el;
-      this.__destroy(__owl__.parent);
-      if (el) {
-        el.remove();
-      }
-    }
-  }
-
-  /**
-   * This method is called by the component system whenever its props are
-   * updated. If it returns true, then the component will be rendered.
-   * Otherwise, it will skip the rendering (also, its props will not be updated)
-   */
-  shouldUpdate(nextProps: Props): boolean {
-    return true;
-  }
-
-  /**
-   * Emit a custom event of type 'eventType' with the given 'payload' on the
-   * component's el, if it exists. However, note that the event will only bubble
-   * up to the parent DOM nodes. Thus, it must be called between mounted() and
-   * willUnmount().
-   */
-  trigger<T = any>(eventType: string, payload?: T) {
-    this.__trigger<T>(this, eventType, payload);
-  }
-
-  //--------------------------------------------------------------------------
-  // Private
-  //--------------------------------------------------------------------------
-
-  /**
-   * Private helper to perform a full destroy, from the point of view of an Owl
-   * component. It does not remove the el (this is done only once on the top
-   * level destroyed component, for performance reasons).
-   *
-   * The job of this method is mostly to call willUnmount hooks, and to perform
-   * all necessary internal cleanup.
-   *
-   * Note that it does not call the __callWillUnmount method to avoid visiting
-   * all children many times.
-   */
-  __destroy(parent: Component | null) {
-    const __owl__ = this.__owl__;
-    if (__owl__.status === STATUS.MOUNTED) {
-      if (__owl__.willUnmountCB) {
-        __owl__.willUnmountCB();
-      }
-      this.willUnmount();
-      __owl__.status = STATUS.UNMOUNTED;
-    }
-    const children = __owl__.children;
-    for (let key in children) {
-      children[key].__destroy(this);
-    }
-    if (parent) {
-      let id = __owl__.id;
-      delete parent.__owl__.children[id];
-      __owl__.parent = null;
-    }
-    __owl__.status = STATUS.DESTROYED;
-    delete __owl__.vnode;
-    if (__owl__.currentFiber) {
-      __owl__.currentFiber.isCompleted = true;
-    }
-  }
-
-  __callMounted() {
-    const __owl__ = this.__owl__;
-
-    __owl__.status = STATUS.MOUNTED;
-    __owl__.currentFiber = null;
-    this.mounted();
-    if (__owl__.mountedCB) {
-      __owl__.mountedCB();
-    }
-  }
-
-  __callWillUnmount() {
-    const __owl__ = this.__owl__;
-    if (__owl__.willUnmountCB) {
-      __owl__.willUnmountCB();
-    }
-    this.willUnmount();
-    __owl__.status = STATUS.UNMOUNTED;
-    if (__owl__.currentFiber) {
-      __owl__.currentFiber.isCompleted = true;
-      __owl__.currentFiber.root.counter = 0;
-    }
-    const children = __owl__.children;
-    for (let id in children) {
-      const comp = children[id];
-      if (comp.__owl__.status === STATUS.MOUNTED) {
-        comp.__callWillUnmount();
-      }
-    }
-  }
-  /**
-   * Private trigger method, allows to choose the component which triggered
-   * the event in the first place
-   */
-  __trigger<T>(component: Component, eventType: string, payload?: T) {
-    if (this.el) {
-      const ev = new OwlEvent<T>(component, eventType, {
-        bubbles: true,
-        cancelable: true,
-        detail: payload,
-      });
-      const triggerHook = this.env[portalSymbol as any];
-      if (triggerHook) {
-        triggerHook(ev);
-      }
-      this.el.dispatchEvent(ev);
-    }
-  }
-  /**
-   * The __updateProps method is called by the t-component directive whenever
-   * it updates a component (so, when the parent template is rerendered).
-   */
-  async __updateProps(nextProps: Props, parentFiber: Fiber, scope: any): Promise<void> {
-    this.__owl__.scope = scope;
-    const shouldUpdate = parentFiber.force || this.shouldUpdate(nextProps);
-    if (shouldUpdate) {
-      const __owl__ = this.__owl__;
-      const fiber = new Fiber(parentFiber, this, parentFiber.force, null, null);
-      if (!parentFiber.child) {
-        parentFiber.child = fiber;
-      } else {
-        parentFiber.lastChild!.sibling = fiber;
-      }
-      parentFiber.lastChild = fiber;
-
-      const defaultProps = (<any>this.constructor).defaultProps;
-      if (defaultProps) {
-        this.__applyDefaultProps(nextProps, defaultProps);
-      }
-      if (QWeb.dev) {
-        QWeb.utils.validateProps(this.constructor, nextProps);
-      }
-      await Promise.all([
-        this.willUpdateProps(nextProps),
-        __owl__.willUpdatePropsCB && __owl__.willUpdatePropsCB(nextProps),
-      ]);
-      if (fiber.isCompleted) {
-        return;
-      }
-      this.props = nextProps;
-
-      this.__render(fiber);
-    }
-  }
-
-  /**
-   * Main patching method. We call the virtual dom patch method here to convert
-   * a virtual dom vnode into some actual dom.
-   */
-  __patch(target: HTMLElement | VNode | DocumentFragment, vnode: VNode) {
-    this.__owl__.vnode = patch(target as any, vnode);
-  }
-
-  /**
-   * The __prepare method is only called by the t-component directive, when a
-   * subcomponent is created. It gets its scope, if any, from the
-   * parent template.
-   */
-  __prepare(parentFiber: Fiber, scope: any, cb: CallableFunction): Fiber {
-    this.__owl__.scope = scope;
-    const fiber = new Fiber(parentFiber, this, parentFiber.force, null, null);
-    fiber.shouldPatch = false;
-    if (!parentFiber.child) {
-      parentFiber.child = fiber;
-    } else {
-      parentFiber.lastChild!.sibling = fiber;
-    }
-    parentFiber.lastChild = fiber;
-    this.__prepareAndRender(fiber, cb);
-    return fiber;
-  }
-
-  /**
-   * Apply the stylesheets defined by the component. Note that we need to make
-   * sure all inherited stylesheets are applied as well.  We then delete the
-   * `style` key from the constructor to make sure we do not apply it again.
-   */
-  private __applyStyles(constr) {
-    while (constr && constr.style) {
-      if (constr.hasOwnProperty("style")) {
-        activateSheet(constr.style, constr.name);
-        delete constr.style;
-      }
-      constr = constr.__proto__;
-    }
-  }
-  __getTemplate(qweb: QWeb): string {
-    let p = (<any>this).constructor;
-    if (!p.hasOwnProperty("_template")) {
-      // here, the component and none of its superclasses defines a static `template`
-      // key. So we fall back on looking for a template matching its name (or
-      // one of its subclass).
-
-      let template: string = p.name;
-      while (!(template in qweb.templates) && p !== Component) {
-        p = p.__proto__;
-        template = p.name;
-      }
-      if (p === Component) {
-        throw new Error(`Could not find template for component "${this.constructor.name}"`);
-      } else {
-        p._template = template;
-      }
-    }
-    return p._template;
-  }
-
-  async __prepareAndRender(fiber: Fiber, cb: CallableFunction) {
-    try {
-      const proms = Promise.all([
-        this.willStart(),
-        this.__owl__.willStartCB && this.__owl__.willStartCB(),
-      ]);
-      this.__owl__.status = STATUS.WILLSTARTED;
-      await proms;
-      if (this.__owl__.status === <any>STATUS.DESTROYED) {
-        return Promise.resolve();
-      }
-    } catch (e) {
-      fiber.handleError(e);
-      return Promise.resolve();
-    }
-    if (!fiber.isCompleted) {
-      this.__render(fiber);
-      this.__owl__.status = STATUS.RENDERED;
-      cb();
-    }
-  }
-
-  __render(fiber: Fiber) {
-    const __owl__ = this.__owl__;
-    if (__owl__.observer) {
-      __owl__.observer.allowMutations = false;
-    }
-    let error;
-    try {
-      let vnode = __owl__.renderFn!(this, {
-        handlers: __owl__.boundHandlers,
-        fiber: fiber,
-      });
-      // we iterate over the children to detect those that no longer belong to the
-      // current rendering: those ones, if not mounted yet, can (and have to) be
-      // destroyed right now, because they are not in the DOM, and thus we won't
-      // be notified later on (when patching), that they are removed from the DOM
-      for (let childKey in __owl__.children) {
-        const child = __owl__.children[childKey];
-        const childOwl = child.__owl__;
-        if (childOwl.status !== STATUS.MOUNTED && childOwl.parentLastFiberId < fiber.id) {
-          // we only do here a "soft" destroy, meaning that we leave the child
-          // dom node alone, without removing it.  Most of the time, it does not
-          // matter, because the child component is already unmounted.  However,
-          // if some of its parent have been unmounted, the child could actually
-          // still be attached to its parent, and this may be important if we
-          // want to remount the parent, because the vdom need to match the
-          // actual DOM
-          child.__destroy(childOwl.parent);
-          if (childOwl.pvnode) {
-            // we remove the key here to make sure that the patching algorithm
-            // is able to make the difference between this pvnode and an eventual
-            // other instance of the same component
-            delete childOwl.pvnode.key;
-            // Since the component has been unmounted, we do not want to actually
-            // call a remove hook.  This is pretty important, since the t-component
-            // directive actually disabled it, so the vdom algorithm will just
-            // not remove the child elm if we don't remove the hook.
-            delete childOwl.pvnode.data!.hook!.remove;
-          }
-        }
-      }
-      if (!vnode) {
-        throw new Error(`Rendering '${this.constructor.name}' did not return anything`);
-      }
-      fiber.vnode = vnode;
-      // we apply here the class information described on the component by the
-      // template (so, something like <MyComponent class="..."/>) to the actual
-      // root vnode
-      if (__owl__.classObj) {
-        const data = vnode.data!;
-        data.class = Object.assign(data.class || {}, __owl__.classObj);
-      }
-    } catch (e) {
-      error = e;
-    }
-    if (__owl__.observer) {
-      __owl__.observer.allowMutations = true;
-    }
-
-    fiber.root.counter--;
-    fiber.isRendered = true;
-    if (error) {
-      fiber.handleError(error);
-    }
-  }
-
-  /**
-   * Apply default props (only top level).
-   *
-   * Note that this method does modify in place the props
-   */
-  __applyDefaultProps(props: Object, defaultProps: Object) {
-    for (let propName in defaultProps) {
-      if (props![propName] === undefined) {
-        props![propName] = defaultProps[propName];
-      }
-    }
+  render(): Promise<void> {
+    return this.__owl__.render();
   }
 }
-
-interface MountParameters {
-  env?: Env;
-  target: HTMLElement | DocumentFragment;
-  props?: any;
-  position?: MountOptions["position"];
-}
-
-interface Type<T> extends Function {
-  new (...args: any[]): T;
-}
-
-export async function mount<T extends Type<Component>>(
-  C: T,
-  params: MountParameters
-): Promise<InstanceType<T>> {
-  const { env, props, target } = params;
-  let origEnv = C.hasOwnProperty("env") ? (C as any).env : null;
-  if (env) {
-    ((C as any) as typeof Component).env = env;
-  }
-  const component: Component = new C(null, props);
-  if (origEnv) {
-    (C as any).env = origEnv;
-  } else {
-    delete (C as any).env;
-  }
-  const position = params.position || "last-child";
-  await component.mount(target, { position });
-  return component as any;
-}

src/component/component_node.ts

@@ -0,0 +1,256 @@
+import type { App } from "../app";
+import { BDom, VNode } from "../blockdom";
+import { Component } from "./component";
+import {
+  Fiber,
+  makeChildFiber,
+  makeRootFiber,
+  MountFiber,
+  RootFiber,
+  __internal__destroyed,
+} from "./fibers";
+import { STATUS } from "./status";
+
+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 && node.status < STATUS.MOUNTED) {
+    node.destroy();
+    node = undefined;
+  }
+  if (isDynamic && node && node.component.constructor !== name) {
+    node = undefined;
+  }
+
+  const parentFiber = ctx.fiber!;
+  if (node) {
+    node.updateAndRender(props, parentFiber);
+  } else {
+    // new component
+    const C = isDynamic ? name : parent.constructor.components[name as any];
+    node = new ComponentNode(C, props, ctx.app);
+    ctx.children[key] = node;
+
+    const fiber = makeChildFiber(node, parentFiber);
+    node.initiateRender(fiber);
+  }
+  return node;
+}
+
+// -----------------------------------------------------------------------------
+//  Component VNode
+// -----------------------------------------------------------------------------
+
+let currentNode: ComponentNode | null = null;
+
+export function getCurrent(): ComponentNode | null {
+  return currentNode;
+}
+
+type LifecycleHook = Function;
+
+export class ComponentNode<T extends typeof Component = any> implements VNode<ComponentNode> {
+  el?: HTMLElement | Text | undefined;
+  handlers: any = null;
+  app: App;
+  fiber: Fiber | null = null;
+  component: InstanceType<T>;
+  bdom: BDom | null = null;
+  status: STATUS = STATUS.NEW;
+
+  renderFn: Function;
+  children: { [key: string]: ComponentNode } = Object.create(null);
+  slots: any = {};
+  refs: any = {};
+
+  willStart: LifecycleHook[] = [];
+  willUpdateProps: LifecycleHook[] = [];
+  willUnmount: LifecycleHook[] = [];
+  mounted: LifecycleHook[] = [];
+  willPatch: LifecycleHook[] = [];
+  patched: LifecycleHook[] = [];
+  destroyed: LifecycleHook[] = [];
+
+  constructor(C: T, props: any, app: App) {
+    currentNode = this;
+    this.app = app;
+    this.component = new C(props, app.env, this) as any;
+    this.renderFn = app.getTemplate(C.template).bind(null, this.component, this);
+    this.component.setup();
+  }
+
+  mountComponent(target: any): Promise<InstanceType<T>> {
+    const fiber = new MountFiber(this, target);
+    this.app.scheduler.addFiber(fiber);
+    this.initiateRender(fiber);
+    return fiber.promise.then(() => this.component);
+  }
+
+  async initiateRender(fiber: Fiber | MountFiber) {
+    if (this.mounted.length) {
+      fiber.root.mounted.push(fiber);
+    }
+    const component = this.component;
+    const prom = Promise.all(this.willStart.map((f) => f.call(component)));
+    await prom;
+    if (this.status === STATUS.NEW && this.fiber === fiber) {
+      this._render(fiber);
+    }
+  }
+
+  async render() {
+    if (this.fiber && !this.fiber.bdom) {
+      return this.fiber.root.promise;
+    }
+    if (!this.bdom && !this.fiber) {
+      // should find a way to return the future mounting promise
+      return;
+    }
+
+    const fiber = makeRootFiber(this);
+    this.app.scheduler.addFiber(fiber);
+    await Promise.resolve();
+    if (this.status === STATUS.DESTROYED) {
+      return;
+    }
+    if (this.fiber === fiber) {
+      this._render(fiber);
+    }
+    return fiber.root.promise;
+  }
+
+  _render(fiber: Fiber | RootFiber) {
+    try {
+      fiber.bdom = this.renderFn();
+    } catch (e) {
+      fiber.root.error = e;
+      this.handleError(fiber);
+    }
+    fiber.root.counter--;
+  }
+
+  handleError(fiber: Fiber) {
+    fiber.node.app.destroy();
+  }
+
+  destroy() {
+    if (this.status === STATUS.MOUNTED) {
+      callWillUnmount(this);
+      this.bdom!.remove();
+    }
+    callDestroyed(this);
+
+    function callWillUnmount(node: ComponentNode) {
+      const component = node.component;
+      for (let cb of node.willUnmount) {
+        cb.call(component);
+      }
+      for (let child of Object.values(node.children)) {
+        if (child.status === STATUS.MOUNTED) {
+          callWillUnmount(child);
+        }
+      }
+    }
+
+    function callDestroyed(node: ComponentNode) {
+      const component = node.component;
+      node.status = STATUS.DESTROYED;
+      for (let child of Object.values(node.children)) {
+        callDestroyed(child);
+      }
+      for (let cb of node.destroyed) {
+        cb.call(component);
+      }
+    }
+  }
+
+  async updateAndRender(props: any, parentFiber: Fiber) {
+    // update
+    const fiber = makeChildFiber(this, parentFiber);
+    if (this.willPatch.length) {
+      parentFiber.root.willPatch.push(fiber);
+    }
+    if (this.patched.length) {
+      parentFiber.root.patched.push(fiber);
+    }
+    const component = this.component;
+    const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
+    await prom;
+    if (fiber !== this.fiber) {
+      return;
+    }
+    this.component.props = props;
+    this._render(fiber);
+  }
+
+  // ---------------------------------------------------------------------------
+  // 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;
+    if (this.handlers) {
+      for (let i = 0; i < this.handlers.length; i++) {
+        const handler = this.handlers[i];
+        const eventType = handler[0];
+        const el = bdom.el!;
+        el.addEventListener(eventType, (ev: Event) => {
+          const info = this.handlers![i];
+          const [, ctx, method] = info;
+          (ctx.__owl__.component as any)[method](ev);
+        });
+      }
+    }
+  }
+
+  moveBefore(other: ComponentNode | null, afterNode: Node | null) {
+    this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
+  }
+
+  patch() {
+    this.bdom!.patch(this!.fiber!.bdom!, false);
+    this.fiber!.appliedToDom = true;
+    this.fiber = null;
+  }
+
+  beforeRemove() {
+    visitRemovedNodes(this);
+  }
+
+  remove() {
+    this.bdom!.remove();
+  }
+}
+
+function visitRemovedNodes(node: ComponentNode) {
+  if (node.status === STATUS.MOUNTED) {
+    const component = node.component;
+    for (let cb of node.willUnmount) {
+      cb.call(component);
+    }
+  }
+  for (let child of Object.values(node.children)) {
+    visitRemovedNodes(child);
+  }
+  node.status = STATUS.DESTROYED;
+  if (node.destroyed.length) {
+    __internal__destroyed.push(node);
+  }
+}

src/component/directive.ts

@@ -1,512 +0,0 @@
-import { QWeb } from "../qweb/index";
-import { INTERP_REGEXP } from "../qweb/compilation_context";
-import { makeHandlerCode, MODS_CODE } from "../qweb/extensions";
-import { STATUS } from "./component";
-
-//------------------------------------------------------------------------------
-// t-component
-//------------------------------------------------------------------------------
-
-const T_COMPONENT_MODS_CODE = Object.assign({}, MODS_CODE, {
-  self: "if (e.target !== vn.elm) {return}",
-});
-
-QWeb.utils.defineProxy = function defineProxy(target, source) {
-  for (let k in source) {
-    Object.defineProperty(target, k, {
-      get() {
-        return source[k];
-      },
-      set(val) {
-        source[k] = val;
-      },
-    });
-  }
-};
-
-QWeb.utils.assignHooks = function assignHooks(dataObj, hooks) {
-  if ("hook" in dataObj) {
-    const hookObject = dataObj.hook;
-    for (let name in hooks) {
-      const current = hookObject[name];
-      const fn = hooks[name];
-      if (current) {
-        hookObject[name] = (...args) => {
-          current(...args);
-          fn(...args);
-        };
-      } else {
-        hookObject[name] = fn;
-      }
-    }
-  } else {
-    dataObj.hook = hooks;
-  }
-};
-
-/**
- * The t-component directive is certainly a complicated and hard to maintain piece
- * of code.  To help you, fellow developer, if you have to maintain it, I offer
- * you this advice: Good luck...
- *
- * Since it is not 'direct' code, but rather code that generates other code, it
- * is not easy to understand.  To help you, here  is a detailed and commented
- * explanation of the code generated by the t-component directive for the following
- * situation:
- * ```xml
- *   <Child
- *      t-key="'somestring'"
- *      flag="state.flag"
- *      t-transition="fade"/>
- * ```
- *
- * ```js
- * // we assign utils on top of the function because it will be useful for
- * // each components
- * let utils = this.utils;
- *
- * // this is the virtual node representing the parent div
- * let c1 = [], p1 = { key: 1 };
- * var vn1 = h("div", p1, c1);
- *
- * // t-component directive: we start by evaluating the expression given by t-key:
- * let key5 = "somestring";
- *
- * // def3 is the promise that will contain later either the new component
- * // creation, or the props update...
- * let def3;
- *
- * // this is kind of tricky: we need here to find if the component was already
- * // created by a previous rendering.  This is done by checking the internal
- * // `cmap` (children map) of the parent component: it maps keys to component ids,
- * // and, then, if there is an id, we look into the children list to get the
- * // instance
- * let w4 =
- *   key5 in context.__owl__.cmap
- *   ? context.__owl__.children[context.__owl__.cmap[key5]]
- *   : false;
- *
- * // We keep the index of the position of the component in the closure.  We push
- * // null to reserve the slot, and will replace it later by the component vnode,
- * // when it will be ready (do not forget that preparing/rendering a component is
- * // asynchronous)
- * let _2_index = c1.length;
- * c1.push(null);
- *
- * // we evaluate here the props given to the component. It is done here to be
- * // able to easily reference it later, and also, it might be an expensive
- * // computation, so it is certainly better to do it only once
- * let props4 = { flag: context["state"].flag };
- *
- * // If we have a component, currently rendering, but not ready yet, we do not want
- * // to wait for it to be ready if we can avoid it
- * if (w4 && w4.__owl__.renderPromise && !w4.__owl__.vnode) {
- *   // we check if the props are the same.  In that case, we can simply reuse
- *   // the previous rendering and skip all useless work
- *   if (utils.shallowEqual(props4, w4.__owl__.renderProps)) {
- *     def3 = w4.__owl__.renderPromise;
- *   } else {
- *     // if the props are not the same, we destroy the component and starts anew.
- *     // this will be faster than waiting for its rendering, then updating it
- *     w4.destroy();
- *     w4 = false;
- *   }
- * }
- *
- * if (!w4) {
- *   // in this situation, we need to create a new component.  First step is
- *   // to get a reference to the class, then create an instance with
- *   // current context as parent, and the props.
- *   let W4 = context.component && context.components[componentKey4] || QWeb.component[componentKey4];
-
- *   if (!W4) {
- *     throw new Error("Cannot find the definition of component 'child'");
- *   }
- *   w4 = new W4(owner, props4);
- *
- *   // Whenever we rerender the parent component, we need to be sure that we
- *   // are able to find the component instance. To do that, we register it to
- *   // the parent cmap (children map).  Note that the 'template' key is
- *   // used here, since this is what identify the component from the template
- *   // perspective.
- *   context.__owl__.cmap[key5] = w4.__owl__.id;
- *
- *   // __prepare is called, to basically call willStart, then render the
- *   // component
- *   def3 = w4.__prepare();
- *
- *   def3 = def3.then(vnode => {
- *     // we create here a virtual node for the parent (NOT the component). This
- *     // means that the vdom of the parent will be stopped here, and from
- *     // the parent's perspective, it simply is a vnode with no children.
- *     // However, it shares the same dom element with the component root
- *     // vnode.
- *     let pvnode = h(vnode.sel, { key: key5 });
- *
- *     // we add hooks to the parent vnode so we can interact with the new
- *     // component at the proper time
- *     pvnode.data.hook = {
- *       insert(vn) {
- *         // the __mount method will patch the component vdom into the elm vn.elm,
- *         // then call the mounted hooks. However, suprisingly, the snabbdom
- *         // patch method actually replace the elm by a new elm, so we need
- *         // to synchronise the pvnode elm with the resulting elm
- *         let nvn = w4.__mount(vnode, vn.elm);
- *         pvnode.elm = nvn.elm;
- *         // what follows is only present if there are animations on the component
- *         utils.transitionInsert(vn, "fade");
- *       },
- *       remove() {
- *         // override with empty function to prevent from removing the node
- *         // directly. It will be removed when destroy is called anyway, which
- *         // delays the removal if there are animations.
- *       },
- *       destroy() {
- *         // if there are animations, we delay the call to destroy on the
- *         // component, if not, we call it directly.
- *         let finalize = () => {
- *           w4.destroy();
- *         };
- *         utils.transitionRemove(vn, "fade", finalize);
- *       }
- *     };
- *     // the pvnode is inserted at the correct position in the div's children
- *     c1[_2_index] = pvnode;
- *
- *     // we keep here a reference to the parent vnode (representing the
- *     // component, so we can reuse it later whenever we update the component
- *     w4.__owl__.pvnode = pvnode;
- *   });
- * } else {
- *   // this is the 'update' path of the directive.
- *   // the call to __updateProps is the actual component update
- *   // Note that we only update the props if we cannot reuse the previous
- *   // rendering work (in the case it was rendered with the same props)
- *   def3 = def3 || w4.__updateProps(props4, extra.forceUpdate, extra.patchQueue);
- *   def3 = def3.then(() => {
- *     // if component was destroyed in the meantime, we do nothing (so, this
- *     // means that the parent's element children list will have a null in
- *     // the component's position, which will cause the pvnode to be removed
- *     // when it is patched.
- *     if (w4.__owl__.isDestroyed) {
- *       return;
- *     }
- *     // like above, we register the pvnode to the children list, so it
- *     // will not be patched out of the dom.
- *     let pvnode = w4.__owl__.pvnode;
- *     c1[_2_index] = pvnode;
- *   });
- * }
- *
- * // we register the deferred here so the parent can coordinate its patch operation
- * // with all the children.
- * extra.promises.push(def3);
- * return vn1;
- * ```
- */
-
-QWeb.addDirective({
-  name: "component",
-  extraNames: ["props"],
-  priority: 100,
-  atNodeEncounter({ ctx, value, node, qweb }): boolean {
-    ctx.addLine(`// Component '${value}'`);
-    ctx.rootContext.shouldDefineQWeb = true;
-    ctx.rootContext.shouldDefineParent = true;
-    ctx.rootContext.shouldDefineUtils = true;
-    ctx.rootContext.shouldDefineScope = true;
-    let hasDynamicProps = node.getAttribute("t-props") ? true : false;
-
-    // t-on- events and t-transition
-    const events: [string, string][] = [];
-    let transition: string = "";
-    const attributes = (<Element>node).attributes;
-    const props: { [key: string]: string } = {};
-    for (let i = 0; i < attributes.length; i++) {
-      const name = attributes[i].name;
-      const value = attributes[i].textContent!;
-      if (name.startsWith("t-on-")) {
-        events.push([name, value]);
-      } else if (name === "t-transition") {
-        if (QWeb.enableTransitions) {
-          transition = value;
-        }
-      } else if (!name.startsWith("t-")) {
-        if (name !== "class" && name !== "style") {
-          // this is a prop!
-          props[name] = ctx.formatExpression(value) || "undefined";
-        }
-      }
-    }
-
-    // computing the props string representing the props object
-    let propStr = Object.keys(props)
-      .map((k) => k + ":" + props[k])
-      .join(",");
-    let componentID = ctx.generateID();
-
-    let hasDefinedKey = false;
-    let templateKey;
-    if (node.tagName === "t" && !node.hasAttribute("t-key") && value.match(INTERP_REGEXP)) {
-      defineComponentKey();
-      const id = ctx.generateID();
-      // the ___ is to make sure we have no possible conflict with normal
-      // template keys
-      ctx.addLine(`let k${id} = '___' + componentKey${componentID}`);
-      templateKey = `k${id}`;
-    } else {
-      templateKey = ctx.generateTemplateKey();
-    }
-    let ref = node.getAttribute("t-ref");
-    let refExpr = "";
-    let refKey: string = "";
-    if (ref) {
-      ctx.rootContext.shouldDefineRefs = true;
-      refKey = `ref${ctx.generateID()}`;
-      ctx.addLine(`const ${refKey} = ${ctx.interpolate(ref)};`);
-      refExpr = `context.__owl__.refs[${refKey}] = w${componentID};`;
-    }
-    let finalizeComponentCode = `w${componentID}.destroy();`;
-    if (ref) {
-      finalizeComponentCode += `delete context.__owl__.refs[${refKey}];`;
-    }
-    if (transition) {
-      finalizeComponentCode = `let finalize = () => {
-          ${finalizeComponentCode}
-        };
-        delete w${componentID}.__owl__.transitionInserted;
-        utils.transitionRemove(vn, '${transition}', finalize);`;
-    }
-
-    let createHook = "";
-    let classAttr = node.getAttribute("class");
-    let tattClass = node.getAttribute("t-att-class");
-    let styleAttr = node.getAttribute("style");
-    let tattStyle = node.getAttribute("t-att-style");
-    if (tattStyle) {
-      const attVar = `_${ctx.generateID()}`;
-      ctx.addLine(`const ${attVar} = ${ctx.formatExpression(tattStyle)};`);
-      tattStyle = attVar;
-    }
-    let classObj = "";
-    if (classAttr || tattClass || styleAttr || tattStyle || events.length) {
-      if (classAttr) {
-        let classDef = classAttr
-          .trim()
-          .split(/\s+/)
-          .map((a) => `'${a}':true`)
-          .join(",");
-        classObj = `_${ctx.generateID()}`;
-        ctx.addLine(`let ${classObj} = {${classDef}};`);
-      }
-      if (tattClass) {
-        let tattExpr = ctx.formatExpression(tattClass);
-        if (tattExpr[0] !== "{" || tattExpr[tattExpr.length - 1] !== "}") {
-          tattExpr = `utils.toClassObj(${tattExpr})`;
-        }
-        if (classAttr) {
-          ctx.addLine(`Object.assign(${classObj}, ${tattExpr})`);
-        } else {
-          classObj = `_${ctx.generateID()}`;
-          ctx.addLine(`let ${classObj} = ${tattExpr};`);
-        }
-      }
-      let eventsCode = events
-        .map(function ([name, value]) {
-          const capture = name.match(/\.capture/);
-          name = capture ? name.replace(/\.capture/, "") : name;
-          const { event, handler } = makeHandlerCode(
-            ctx,
-            name,
-            value,
-            false,
-            T_COMPONENT_MODS_CODE
-          );
-          if (capture) {
-            return `vn.elm.addEventListener('${event}', ${handler}, true);`;
-          }
-          return `vn.elm.addEventListener('${event}', ${handler});`;
-        })
-        .join("");
-      const styleExpr = tattStyle || (styleAttr ? `'${styleAttr}'` : false);
-      const styleCode = styleExpr ? `vn.elm.style = ${styleExpr};` : "";
-      createHook = `utils.assignHooks(vnode.data, {create(_, vn){${styleCode}${eventsCode}}});`;
-    }
-
-    ctx.addLine(
-      `let w${componentID} = ${templateKey} in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[${templateKey}]] : false;`
-    );
-    let shouldProxy = !ctx.parentNode;
-    if (shouldProxy) {
-      let id = ctx.generateID();
-      ctx.rootContext.rootNode = id;
-      shouldProxy = true;
-      ctx.rootContext.shouldDefineResult = true;
-      ctx.addLine(`let vn${id} = {};`);
-      ctx.addLine(`result = vn${id};`);
-    }
-    if (hasDynamicProps) {
-      const dynamicProp = ctx.formatExpression(node.getAttribute("t-props")!);
-      ctx.addLine(`let props${componentID} = Object.assign({}, ${dynamicProp}, {${propStr}});`);
-    } else {
-      ctx.addLine(`let props${componentID} = {${propStr}};`);
-    }
-    ctx.addIf(
-      `w${componentID} && w${componentID}.__owl__.currentFiber && !w${componentID}.__owl__.vnode`
-    );
-    ctx.addLine(`w${componentID}.destroy();`);
-    ctx.addLine(`w${componentID} = false;`);
-    ctx.closeIf();
-
-    let registerCode = "";
-    if (shouldProxy) {
-      registerCode = `utils.defineProxy(vn${ctx.rootNode}, pvnode);`;
-    }
-
-    // SLOTS
-    const hasSlots = node.childNodes.length;
-
-    let scope = hasSlots ? `utils.combine(context, scope)` : "undefined";
-
-    ctx.addIf(`w${componentID}`);
-
-    // need to update component
-    let styleCode = "";
-    if (tattStyle) {
-      styleCode = `.then(()=>{if (w${componentID}.__owl__.status === ${STATUS.DESTROYED}) {return};w${componentID}.el.style=${tattStyle};});`;
-    }
-    ctx.addLine(
-      `w${componentID}.__updateProps(props${componentID}, extra.fiber, ${scope})${styleCode};`
-    );
-    ctx.addLine(`let pvnode = w${componentID}.__owl__.pvnode;`);
-    if (registerCode) {
-      ctx.addLine(registerCode);
-    }
-    if (ctx.parentNode) {
-      ctx.addLine(`c${ctx.parentNode}.push(pvnode);`);
-    }
-
-    ctx.addElse();
-
-    // new component
-    function defineComponentKey() {
-      if (!hasDefinedKey) {
-        const interpValue = ctx.interpolate(value);
-        ctx.addLine(`let componentKey${componentID} = ${interpValue};`);
-        hasDefinedKey = true;
-      }
-    }
-    defineComponentKey();
-    const contextualValue = value.match(INTERP_REGEXP) ? "false" : ctx.formatExpression(value);
-    ctx.addLine(
-      `let W${componentID} = ${contextualValue} || context.constructor.components[componentKey${componentID}] || QWeb.components[componentKey${componentID}];`
-    );
-
-    // maybe only do this in dev mode...
-    ctx.addLine(
-      `if (!W${componentID}) {throw new Error('Cannot find the definition of component "' + componentKey${componentID} + '"')}`
-    );
-    ctx.addLine(`w${componentID} = new W${componentID}(parent, props${componentID});`);
-    if (transition) {
-      ctx.addLine(`const __patch${componentID} = w${componentID}.__patch;`);
-      ctx.addLine(
-        `w${componentID}.__patch = (t, vn) => {__patch${componentID}.call(w${componentID}, t, vn); if(!w${componentID}.__owl__.transitionInserted){w${componentID}.__owl__.transitionInserted = true;utils.transitionInsert(w${componentID}.__owl__.vnode, '${transition}');}};`
-      );
-    }
-    ctx.addLine(`parent.__owl__.cmap[${templateKey}] = w${componentID}.__owl__.id;`);
-
-    if (hasSlots) {
-      const clone = <Element>node.cloneNode(true);
-
-      // The next code is a fallback for compatibility reason. It accepts t-set
-      // elements that are direct children with a non empty body as nodes defining
-      // the content of a slot.
-      //
-      // This is wrong, but is necessary to prevent breaking all existing Owl
-      // code using slots. This will be removed in v2.0 someday. Meanwhile,
-      // please use t-set-slot everywhere you need to set the content of a
-      // slot.
-      for (let node of clone.children) {
-        if (node.hasAttribute("t-set") && node.hasChildNodes()) {
-          node.setAttribute("t-set-slot", node.getAttribute("t-set")!);
-          node.removeAttribute("t-set");
-        }
-      }
-      const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
-      const slotNames = new Set<string>();
-      const slotId = QWeb.nextSlotId++;
-      ctx.addLine(`w${componentID}.__owl__.slotId = ${slotId};`);
-      if (slotNodes.length) {
-        for (let i = 0, length = slotNodes.length; i < length; i++) {
-          const slotNode = slotNodes[i];
-          // 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;
-          }
-          let key = slotNode.getAttribute("t-set-slot")!;
-          if (slotNames.has(key)) {
-            continue;
-          }
-          slotNames.add(key);
-          slotNode.removeAttribute("t-set-slot");
-          slotNode.parentElement!.removeChild(slotNode);
-
-          const slotFn = qweb._compile(`slot_${key}_template`, { elem: slotNode, hasParent: true });
-          QWeb.slots[`${slotId}_${key}`] = slotFn;
-        }
-      }
-      if (clone.childNodes.length) {
-        let hasContent = false;
-        const t = clone.ownerDocument!.createElement("t");
-        for (let child of Object.values(clone.childNodes)) {
-          hasContent =
-            hasContent || (child instanceof Text ? Boolean(child.textContent.trim().length) : true);
-          t.appendChild(child);
-        }
-        if (hasContent) {
-          const slotFn = qweb._compile(`slot_default_template`, { elem: t, hasParent: true });
-          QWeb.slots[`${slotId}_default`] = slotFn;
-        }
-      }
-    }
-
-    ctx.addLine(
-      `let fiber = w${componentID}.__prepare(extra.fiber, ${scope}, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; ${createHook}});`
-    );
-    // hack: specify empty remove hook to prevent the node from being removed from the DOM
-    const insertHook = refExpr ? `insert(vn) {${refExpr}},` : "";
-    ctx.addLine(
-      `let pvnode = h('dummy', {key: ${templateKey}, hook: {${insertHook}remove() {},destroy(vn) {${finalizeComponentCode}}}});`
-    );
-    if (registerCode) {
-      ctx.addLine(registerCode);
-    }
-    if (ctx.parentNode) {
-      ctx.addLine(`c${ctx.parentNode}.push(pvnode);`);
-    }
-    ctx.addLine(`w${componentID}.__owl__.pvnode = pvnode;`);
-
-    ctx.closeIf();
-
-    if (classObj) {
-      ctx.addLine(`w${componentID}.__owl__.classObj=${classObj};`);
-    }
-
-    ctx.addLine(`w${componentID}.__owl__.parentLastFiberId = extra.fiber.id;`);
-
-    return true;
-  },
-});

src/component/fiber.ts

@@ -1,368 +0,0 @@
-import { h, VNode } from "../vdom/index";
-import { Component, MountPosition, STATUS } from "./component";
-import { scheduler } from "./scheduler";
-
-/**
- * Owl Fiber Class
- *
- * Fibers are small abstractions designed to contain all the internal state
- * associated with a "rendering work unit", relative to a specific component.
- *
- * A rendering will cause the creation of a fiber for each impacted components.
- *
- * Fibers capture all that necessary information, which is critical to owl
- * asynchronous rendering pipeline. Fibers can be cancelled, can be in different
- * states and in general determine the state of the rendering.
- */
-
-export class Fiber {
-  static nextId: number = 1;
-  id: number = Fiber.nextId++;
-
-  // The force attribute determines if a rendering should bypass the `shouldUpdate`
-  // method potentially implemented by a component. It is usually set to false.
-  force: boolean;
-
-  // isCompleted means that the rendering corresponding to this fiber's work is
-  // done, either because the component has been mounted or patched, or because
-  // fiber has been cancelled.
-  isCompleted: boolean = false;
-
-  // the fibers corresponding to component updates (updateProps) need to call
-  // the willPatch and patched hooks from the corresponding component. However,
-  // fibers corresponding to a new component do not need to do that. So, the
-  // shouldPatch hook is the boolean that we check whenever we need to apply
-  // a patch.
-  shouldPatch: boolean = true;
-
-  // isRendered is the last state of a fiber. If true, this means that it has
-  // been rendered and is inert (so, it should not be taken into account when
-  // counting the number of active fibers).
-  isRendered: boolean = false;
-
-  // the counter number is a critical information. It is only necessary for a
-  // root fiber.  For that fiber, this number counts the number of active sub
-  // fibers.  When that number reaches 0, the fiber can be applied by the
-  // scheduler.
-  counter: number = 0;
-
-  target: HTMLElement | DocumentFragment | null;
-  position: MountPosition | null;
-
-  scope: any;
-
-  component: Component;
-  vnode: VNode | null = null;
-
-  root: Fiber;
-  child: Fiber | null = null;
-  sibling: Fiber | null = null;
-  lastChild: Fiber | null = null;
-  parent: Fiber | null = null;
-
-  error?: Error;
-
-  constructor(
-    parent: Fiber | null,
-    component: Component,
-    force: boolean,
-    target: HTMLElement | DocumentFragment | null,
-    position: MountPosition | null
-  ) {
-    this.component = component;
-    this.force = force;
-    this.target = target;
-    this.position = position;
-
-    const __owl__ = component.__owl__;
-    this.scope = __owl__.scope;
-
-    this.root = parent ? parent.root : this;
-    this.parent = parent;
-
-    let oldFiber = __owl__.currentFiber;
-    if (oldFiber && !oldFiber.isCompleted) {
-      this.force = true;
-      if (oldFiber.root === oldFiber && !parent) {
-        // both oldFiber and this fiber are root fibers
-        this._reuseFiber(oldFiber);
-        return oldFiber;
-      } else {
-        this._remapFiber(oldFiber);
-      }
-    }
-
-    this.root.counter++;
-
-    __owl__.currentFiber = this;
-  }
-
-  /**
-   * When the oldFiber is not completed yet, and both oldFiber and this fiber
-   * are root fibers, we want to reuse the oldFiber instead of creating a new
-   * one. Doing so will guarantee that the initiator(s) of those renderings will
-   * be notified (the promise will resolve) when the last rendering will be done.
-   *
-   * This function thus assumes that oldFiber is a root fiber.
-   */
-  _reuseFiber(oldFiber: Fiber) {
-    oldFiber.cancel(); // cancel children fibers
-    oldFiber.target = this.target || oldFiber.target;
-    oldFiber.position = this.position || oldFiber.position;
-    oldFiber.isCompleted = false; // keep the root fiber alive
-    oldFiber.isRendered = false; // the fiber has to be re-rendered
-    if (oldFiber.child) {
-      // remove relation to children
-      oldFiber.child.parent = null;
-      oldFiber.child = null;
-      oldFiber.lastChild = null;
-    }
-    oldFiber.counter = 1; // re-initialize counter
-    oldFiber.id = Fiber.nextId++;
-  }
-
-  /**
-   * In some cases, a rendering initiated at some component can detect that it
-   * should be part of a larger rendering initiated somewhere up the component
-   * tree.  In that case, it needs to cancel the previous rendering and
-   * remap itself as a part of the current parent rendering.
-   */
-  _remapFiber(oldFiber: Fiber) {
-    oldFiber.cancel();
-    this.shouldPatch = oldFiber.shouldPatch;
-    if (oldFiber === oldFiber.root) {
-      oldFiber.counter++;
-    }
-    if (oldFiber.parent && !this.parent) {
-      // re-map links
-      this.parent = oldFiber.parent;
-      this.root = this.parent.root;
-      this.sibling = oldFiber.sibling;
-      if (this.parent.lastChild === oldFiber) {
-        this.parent.lastChild = this;
-      }
-      if (this.parent.child === oldFiber) {
-        this.parent.child = this;
-      } else {
-        let current = this.parent.child!;
-        while (true) {
-          if (current.sibling === oldFiber) {
-            current.sibling = this;
-            break;
-          }
-          current = current.sibling!;
-        }
-      }
-    }
-  }
-
-  /**
-   * This function has been taken from
-   * https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7
-   */
-  _walk(doWork: (f: Fiber) => Fiber | null) {
-    let root = this;
-    let current: Fiber = this;
-    while (true) {
-      const child = doWork(current);
-      if (child) {
-        current = child;
-        continue;
-      }
-      if (current === root) {
-        return;
-      }
-      while (!current.sibling) {
-        if (!current.parent || current.parent === root) {
-          return;
-        }
-        current = current.parent;
-      }
-      current = current.sibling;
-    }
-  }
-
-  /**
-   * Successfully complete the work of the fiber: call the mount or patch hooks
-   * and patch the DOM. This function is called once the fiber and its children
-   * are ready, and the scheduler decides to process it.
-   */
-  complete() {
-    let component = this.component;
-    this.isCompleted = true;
-    const status = component.__owl__.status;
-    if (status === STATUS.DESTROYED) {
-      return;
-    }
-
-    // build patchQueue
-    const patchQueue: Fiber[] = [];
-    const doWork: (Fiber) => Fiber | null = function (f) {
-      patchQueue.push(f);
-      return f.child;
-    };
-    this._walk(doWork);
-    const patchLen = patchQueue.length;
-
-    // call willPatch hook on each fiber of patchQueue
-    if (status === STATUS.MOUNTED) {
-      for (let i = 0; i < patchLen; i++) {
-        const fiber = patchQueue[i];
-        if (fiber.shouldPatch) {
-          component = fiber.component;
-          if (component.__owl__.willPatchCB) {
-            component.__owl__.willPatchCB();
-          }
-          component.willPatch();
-        }
-      }
-    }
-
-    // call __patch on each fiber of (reversed) patchQueue
-    for (let i = patchLen - 1; i >= 0; i--) {
-      const fiber = patchQueue[i];
-      component = fiber.component;
-      if (fiber.target && i === 0) {
-        let target;
-        if (fiber.position === "self") {
-          target = fiber.target;
-          if ((target as HTMLElement).tagName.toLowerCase() !== fiber.vnode!.sel) {
-            throw new Error(
-              `Cannot attach '${component.constructor.name}' to target node (not same tag name)`
-            );
-          }
-          // In self mode, we *know* we are to take possession of the target
-          // Hence we manually create the corresponding VNode and copy the "key" in data
-          const selfVnodeData = fiber.vnode!.data ? { key: fiber.vnode!.data.key } : {};
-          const selfVnode = h(fiber.vnode!.sel, selfVnodeData);
-          selfVnode.elm = target;
-          target = selfVnode;
-        } else {
-          target = component.__owl__.vnode || document.createElement(fiber.vnode!.sel!);
-        }
-        component.__patch(target!, fiber.vnode!);
-      } else {
-        if (fiber.shouldPatch) {
-          component.__patch(component.__owl__.vnode!, fiber.vnode!);
-          // When updating a Component's props (in directive),
-          // the component has a pvnode AND should be patched.
-          // However, its pvnode.elm may have changed if it is a High Order Component
-          if (component.__owl__.pvnode) {
-            component.__owl__.pvnode.elm = component.__owl__.vnode!.elm;
-          }
-        } else {
-          component.__patch(document.createElement(fiber.vnode!.sel!), fiber.vnode!);
-          component.__owl__.pvnode!.elm = component.__owl__.vnode!.elm;
-        }
-      }
-      const compOwl = component.__owl__;
-      if (fiber === compOwl.currentFiber) {
-        compOwl.currentFiber = null;
-      }
-    }
-
-    // insert into the DOM (mount case)
-    let inDOM = false;
-    if (this.target) {
-      switch (this.position) {
-        case "first-child":
-          this.target.prepend(this.component.el!);
-          break;
-        case "last-child":
-          this.target.appendChild(this.component.el!);
-          break;
-      }
-      inDOM = document.body.contains(this.component.el);
-      this.component.env.qweb.trigger("dom-appended");
-    }
-
-    // call patched/mounted hook on each fiber of (reversed) patchQueue
-    if (status === STATUS.MOUNTED || inDOM) {
-      for (let i = patchLen - 1; i >= 0; i--) {
-        const fiber = patchQueue[i];
-        component = fiber.component;
-        if (fiber.shouldPatch && !this.target) {
-          component.patched();
-          if (component.__owl__.patchedCB) {
-            component.__owl__.patchedCB();
-          }
-        } else {
-          component.__callMounted();
-        }
-      }
-    } else {
-      for (let i = patchLen - 1; i >= 0; i--) {
-        const fiber = patchQueue[i];
-        component = fiber.component;
-        component.__owl__.status = STATUS.UNMOUNTED;
-      }
-    }
-  }
-
-  /**
-   * Cancel a fiber and all its children.
-   */
-  cancel() {
-    this._walk((f) => {
-      if (!f.isRendered) {
-        f.root.counter--;
-      }
-      f.isCompleted = true;
-      return f.child;
-    });
-  }
-
-  /**
-   * This is the global error handler for errors occurring in Owl main lifecycle
-   * methods.  Caught errors are triggered on the QWeb instance, and are
-   * potentially given to some parent component which implements `catchError`.
-   *
-   * If there are no such component, we destroy everything. This is better than
-   * being in a corrupted state.
-   */
-  handleError(error: Error) {
-    let component = this.component;
-    this.vnode = component.__owl__.vnode || h("div");
-
-    const qweb = component.env.qweb;
-    let root = component;
-
-    function handle(error) {
-      let canCatch = false;
-      qweb.trigger("error", error);
-      while (component && !(canCatch = !!component.catchError)) {
-        root = component;
-        component = component.__owl__.parent!;
-      }
-      if (canCatch) {
-        try {
-          component.catchError!(error);
-        } catch (e) {
-          root = component;
-          component = component.__owl__.parent!;
-          return handle(e);
-        }
-        return true;
-      }
-      return false;
-    }
-
-    let isHandled = handle(error);
-
-    if (!isHandled) {
-      // the 3 next lines aim to mark the root fiber as being in error, and
-      // to force it to end, without waiting for its children
-      this.root.counter = 0;
-      this.root.error = error;
-      scheduler.flush();
-      // at this point, the state of the application is corrupted and we could
-      // have a lot of issues or crashes. So we destroy the application in a try
-      // catch and swallow these errors because the fiber is already in error,
-      // and this is the actual issue that needs to be solved, not those followup
-      // errors.
-      try {
-        root.destroy();
-      } catch (e) {}
-    }
-  }
-}

src/component/fibers.ts

@@ -0,0 +1,185 @@
+import type { BDom } from "../blockdom";
+import { mount } from "../blockdom";
+import type { ComponentNode } from "./component_node";
+import { STATUS } from "./status";
+// import { mountBlock } from "./bdom/block";
+
+export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
+  let current = node.fiber;
+  if (current) {
+    // current is necessarily a rootfiber here
+    let root = parent.root;
+    cancelFibers(root, current.children);
+    current.children = [];
+    current.parent = parent;
+    root.counter++;
+    current.root = root;
+    return current;
+  }
+  return new Fiber(node, parent);
+}
+
+export function makeRootFiber(node: ComponentNode): Fiber {
+  let current = node.fiber;
+  if (current) {
+    let root = current.root;
+    root.counter -= cancelFibers(root, current.children);
+    current.children = [];
+    root.counter++;
+    current.bdom = null;
+    return current;
+  }
+  const fiber = new RootFiber(node);
+  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(root: any, fibers: Fiber[]): number {
+  let result = 0;
+  for (let fiber of fibers) {
+    fiber.node.fiber = null;
+    fiber.root = root;
+    if (!fiber.bdom) {
+      result++;
+    }
+    result += cancelFibers(root, fiber.children);
+  }
+  return result;
+}
+
+export class Fiber {
+  node: ComponentNode;
+  bdom: BDom | null = null;
+  root: RootFiber;
+  parent: Fiber | null;
+  children: Fiber[] = [];
+  appliedToDom = false;
+
+  constructor(node: ComponentNode, parent: Fiber | null) {
+    this.node = node;
+    node.fiber = this;
+    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;
+  error: Error | null = null;
+  resolve: any;
+  promise: Promise<any>;
+  reject: any;
+
+  // only add stuff in this if they have registered some hooks
+  willPatch: Fiber[] = [];
+  patched: Fiber[] = [];
+  mounted: Fiber[] = [];
+
+  constructor(node: ComponentNode) {
+    super(node, null);
+    this.counter = 1;
+
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+
+  complete() {
+    const node = this.node;
+
+    // Step 1: calling all willPatch lifecycle hooks
+    for (let fiber 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 = fiber.node;
+      if (node.fiber === fiber) {
+        const component = node.component;
+        for (let cb of node.willPatch) {
+          cb.call(component);
+        }
+      }
+    }
+
+    // Step 2: patching the dom
+    node.bdom!.patch(this.bdom!, Object.keys(node.children).length > 0);
+    this.appliedToDom = true;
+
+    // Step 3: calling all destroyed hooks
+    for (let node of __internal__destroyed) {
+      for (let cb of node.destroyed) {
+        cb();
+      }
+    }
+    __internal__destroyed.length = 0;
+
+    // Step 4: calling all mounted lifecycle hooks
+    let current;
+    let mountedFibers = this.mounted;
+    while ((current = mountedFibers.pop())) {
+      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())) {
+      if (current.appliedToDom) {
+        for (let cb of current.node.patched) {
+          cb();
+        }
+      }
+    }
+
+    // unregistering the fiber
+    node.fiber = null;
+  }
+}
+
+export let __internal__destroyed: ComponentNode[] = [];
+
+export class MountFiber extends RootFiber {
+  target: HTMLElement;
+
+  constructor(node: ComponentNode, target: HTMLElement) {
+    super(node);
+    this.target = target;
+  }
+  complete() {
+    const node = this.node;
+    node.bdom = this.bdom;
+    mount(node.bdom!, this.target);
+    node.status = STATUS.MOUNTED;
+    this.appliedToDom = true;
+    let current;
+    let mountedFibers = this.mounted;
+    while ((current = mountedFibers.pop())) {
+      if (current.appliedToDom) {
+        for (let cb of current.node.mounted) {
+          cb();
+        }
+      }
+    }
+    node.fiber = null;
+  }
+}

src/component/handler.ts

@@ -0,0 +1,10 @@
+export function mainEventHandler(data: any, ev: Event) {
+  if (typeof data === "function") {
+    data(ev);
+  } else {
+    const ctx = data[0];
+    const method = data[1];
+    const args = data[2] || [];
+    ctx.__owl__.component[method](...args, ev);
+  }
+}

src/component/props_validation.ts

@@ -1,115 +0,0 @@
-import { QWeb } from "../qweb/index";
-
-//------------------------------------------------------------------------------
-// Prop validation helper
-//------------------------------------------------------------------------------
-
-/**
- * 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.
- */
-
-QWeb.utils.validateProps = function (Widget, props: Object) {
-  const propsDef = (<any>Widget).props;
-  if (propsDef instanceof Array) {
-    // list of strings (prop names)
-    for (let i = 0, l = propsDef.length; i < l; i++) {
-      const propName = propsDef[i];
-      if (propName[propName.length - 1] === "?") {
-        // optional prop
-        break;
-      }
-      if (!(propName in props)) {
-        throw new Error(`Missing props '${propsDef[i]}' (component '${Widget.name}')`);
-      }
-    }
-    for (let key in props) {
-      if (!propsDef.includes(key) && !propsDef.includes(key + "?")) {
-        throw new Error(`Unknown prop '${key}' given to component '${Widget.name}'`);
-      }
-    }
-  } else if (propsDef) {
-    // propsDef is an object now
-    for (let propName in propsDef) {
-      if (props[propName] === undefined) {
-        if (propsDef[propName] && !propsDef[propName].optional) {
-          throw new Error(`Missing props '${propName}' (component '${Widget.name}')`);
-        } else {
-          continue;
-        }
-      }
-      let isValid;
-      try {
-        isValid = isValidProp(props[propName], propsDef[propName]);
-      } catch (e) {
-        e.message = `Invalid prop '${propName}' in component ${Widget.name} (${e.message})`;
-        throw e;
-      }
-      if (!isValid) {
-        throw new Error(`Invalid Prop '${propName}' in component '${Widget.name}'`);
-      }
-    }
-    for (let propName in props) {
-      if (!(propName in propsDef)) {
-        throw new Error(`Unknown prop '${propName}' given to component '${Widget.name}'`);
-      }
-    }
-  }
-};
-
-/**
- * Check if an invidual prop value matches its (static) prop definition
- */
-function isValidProp(prop, propDef): 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

@@ -1,24 +1,12 @@
-import { Fiber } from "./fiber";
-import { browser } from "../browser";
+import { Fiber, RootFiber } from "./fibers";
+import { STATUS } from "./status";
 
-/**
- * Owl Scheduler Class
- *
- * The scheduler is the part of Owl that will effectively apply a rendering
- * whenever a fiber is ready.
- *
- * Briefly, it can be used to register root fibers.  Whenever there is an
- * active root fiber, it will poll continuously each animation frame (so, about
- * once every 16ms) and whenever a root fiber is ready, it will apply it.
- */
-
-interface Task {
-  fiber: Fiber;
-  callback: (err?: Error) => void;
-}
+// -----------------------------------------------------------------------------
+//  Scheduler
+// -----------------------------------------------------------------------------
 
 export class Scheduler {
-  tasks: Task[] = [];
+  tasks: Set<RootFiber> = new Set();
   isRunning: boolean = false;
   requestAnimationFrame: Window["requestAnimationFrame"];
 
@@ -35,37 +23,10 @@ export class Scheduler {
     this.isRunning = false;
   }
 
-  addFiber(fiber: Fiber): Promise<void> {
-    // if the fiber was remapped into a larger rendering fiber, it may not be a
-    // root fiber.  But we only want to register root fibers
-    fiber = fiber.root;
-    return new Promise((resolve, reject) => {
-      if (fiber.error) {
-        return reject(fiber.error);
-      }
-      this.tasks.push({
-        fiber,
-        callback: () => {
-          if (fiber.error) {
-            return reject(fiber.error);
-          }
-          resolve();
-        },
-      });
-      if (!this.isRunning) {
-        this.start();
-      }
-    });
-  }
-
-  rejectFiber(fiber: Fiber, reason: string) {
-    fiber = fiber.root;
-    const index = this.tasks.findIndex((t) => t.fiber === fiber);
-    if (index >= 0) {
-      const [task] = this.tasks.splice(index, 1);
-      fiber.cancel();
-      fiber.error = new Error(reason);
-      task.callback();
+  addFiber(fiber: Fiber) {
+    this.tasks.add(fiber.root);
+    if (!this.isRunning) {
+      this.start();
     }
   }
 
@@ -74,28 +35,35 @@ export class Scheduler {
    * Other tasks are left unchanged.
    */
   flush() {
-    let tasks = this.tasks;
-    this.tasks = [];
-    tasks = tasks.filter((task) => {
-      if (task.fiber.isCompleted) {
-        task.callback();
-        return false;
+    this.tasks.forEach((fiber) => {
+      if (fiber.root !== fiber) {
+        // this is wrong! should be something like
+        // if (this.tasks.has(fiber.root)) {
+        //   // parent rendering has completed
+        //   fiber.resolve();
+        //   this.tasks.delete(fiber);
+        // }
+        this.tasks.delete(fiber);
+        return;
       }
-      if (task.fiber.counter === 0) {
-        if (!task.fiber.error) {
-          try {
-            task.fiber.complete();
-          } catch (e) {
-            task.fiber.handleError(e);
-          }
+      if (fiber.error) {
+        this.tasks.delete(fiber);
+        fiber.reject(fiber.error);
+        return;
+      }
+      if (fiber.node.status === STATUS.DESTROYED) {
+        this.tasks.delete(fiber);
+        return;
+      }
+      if (fiber.counter === 0) {
+        if (!fiber.error) {
+          fiber.complete();
         }
-        task.callback();
-        return false;
+        fiber.resolve();
+        this.tasks.delete(fiber);
       }
-      return true;
     });
-    this.tasks = tasks.concat(this.tasks);
-    if (this.tasks.length === 0) {
+    if (this.tasks.size === 0) {
       this.stop();
     }
   }
@@ -109,5 +77,3 @@ export class Scheduler {
     });
   }
 }
-
-export const scheduler = new Scheduler(browser.requestAnimationFrame);

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/component/styles.ts

@@ -1,70 +0,0 @@
-/**
- * Owl Style System
- *
- * This files contains the Owl code related to processing (extended) css strings
- * and creating/adding <style> tags to the document head.
- */
-
-export const STYLESHEETS: { [id: string]: HTMLStyleElement } = {};
-
-export function processSheet(str: string): string {
-  const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-  const selectorStack: string[][] = [];
-  const parts: string[] = [];
-  let rules: string[] = [];
-  function generateSelector(stackIndex: number, parentSelector?: string) {
-    const parts: string[] = [];
-    for (const selector of selectorStack[stackIndex]) {
-      let part = (parentSelector && parentSelector + " " + selector) || selector;
-      if (part.includes("&")) {
-        part = selector.replace(/&/g, parentSelector || "");
-      }
-      if (stackIndex < selectorStack.length - 1) {
-        part = generateSelector(stackIndex + 1, part);
-      }
-      parts.push(part);
-    }
-    return parts.join(", ");
-  }
-  function generateRules() {
-    if (rules.length) {
-      parts.push(generateSelector(0) + " {");
-      parts.push(...rules);
-      parts.push("}");
-      rules = [];
-    }
-  }
-  while (tokens.length) {
-    let token = tokens.shift()!;
-    if (token === "}") {
-      generateRules();
-      selectorStack.pop();
-    } else {
-      if (tokens[0] === "{") {
-        generateRules();
-        selectorStack.push(token.split(/\s*,\s*/));
-        tokens.shift();
-      }
-      if (tokens[0] === ";") {
-        rules.push("  " + token + ";");
-      }
-    }
-  }
-  return parts.join("\n");
-}
-export function registerSheet(id: string, css: string) {
-  const sheet = document.createElement("style");
-  sheet.innerHTML = processSheet(css);
-  STYLESHEETS[id] = sheet;
-}
-
-export function activateSheet(id, name) {
-  const sheet = STYLESHEETS[id];
-  if (!sheet) {
-    throw new Error(
-      `Invalid css stylesheet for component '${name}'. Did you forget to use the 'css' tag helper?`
-    );
-  }
-  sheet.setAttribute("component", name);
-  document.head.appendChild(sheet);
-}

src/config.ts

@@ -1,44 +0,0 @@
-import { QWeb } from "./qweb/index";
-import { TRANSLATABLE_ATTRS } from "./qweb/qweb";
-
-/**
- * This file creates and exports the OWL 'config' object, with keys:
- *  - 'mode': 'prod' or 'dev',
- *  - 'env': the environment to use in root components.
- */
-
-interface Config {
-  mode: string;
-  enableTransitions: boolean;
-  translatableAttributes: string[];
-}
-
-export const config = {
-  translatableAttributes: TRANSLATABLE_ATTRS,
-} as Config;
-
-Object.defineProperty(config, "mode", {
-  get() {
-    return QWeb.dev ? "dev" : "prod";
-  },
-  set(mode: string) {
-    QWeb.dev = mode === "dev";
-    if (QWeb.dev) {
-      console.info(`Owl is running in 'dev' mode.
-
-This is not suitable for production use.
-See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for more information.`);
-    } else {
-      console.log(`Owl is now running in 'prod' mode.`);
-    }
-  },
-});
-
-Object.defineProperty(config, "enableTransitions", {
-  get() {
-    return QWeb.enableTransitions;
-  },
-  set(value: boolean) {
-    QWeb.enableTransitions = value;
-  },
-});

src/context.ts

@@ -1,138 +0,0 @@
-import { Component } from "./component/component";
-import { scheduler } from "./component/scheduler";
-import { EventBus } from "./core/event_bus";
-import { Observer } from "./core/observer";
-
-/**
- * The `Context` object provides a way to share data between an arbitrary number
- * of component. 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.
- */
-
-function partitionBy<T>(arr: T[], fn: (t: T) => boolean) {
-  let lastGroup: T[] | false = false;
-  let lastValue;
-  return arr.reduce((acc: T[][], cur) => {
-    let curVal = fn(cur);
-    if (lastGroup) {
-      if (curVal === lastValue) {
-        lastGroup.push(cur);
-      } else {
-        lastGroup = false;
-      }
-    }
-    if (!lastGroup) {
-      lastGroup = [cur];
-      acc.push(lastGroup);
-    }
-    lastValue = curVal;
-    return acc;
-  }, []);
-}
-
-export class Context extends EventBus {
-  state: any;
-  observer: Observer;
-  rev: number = 1;
-  // mapping from component id to last observed context id
-  mapping: { [componentId: number]: number } = {};
-
-  constructor(state: Object = {}) {
-    super();
-    this.observer = new Observer();
-    this.observer.notifyCB = () => {
-      // notify components in the next microtask tick to ensure that subscribers
-      // are notified only once for all changes that occur in the same micro tick
-      let rev = this.rev;
-      return Promise.resolve().then(() => {
-        if (rev === this.rev) {
-          this.__notifyComponents();
-        }
-      });
-    };
-    this.state = this.observer.observe(state);
-    this.subscriptions.update = [];
-  }
-
-  /**
-   * Instead of using trigger to emit an update event, we actually implement
-   * our own function to do that.  The reason is that we need to be smarter than
-   * a simple trigger function: we need to wait for parent components to be
-   * done before doing children components.  More precisely, if an update
-   * as an effect of destroying a children, we do not want to call any code
-   * from the child, and certainly not render it.
-   *
-   * This method implements a simple grouping algorithm by depth. If we have
-   * connected components of depths [2, 4,4,4,4, 3,8,8], the Context will notify
-   * them in the following groups: [2], [4,4,4,4], [3], [8,8]. Each group will
-   * be updated sequentially, but each components in a given group will be done in
-   * parallel.
-   *
-   * This is a very simple algorithm, but it avoids checking if a given
-   * component is a child of another.
-   */
-  async __notifyComponents() {
-    const rev = ++this.rev;
-    const subscriptions = this.subscriptions.update;
-    const groups = partitionBy(subscriptions, (s) => (s.owner ? s.owner.__owl__.depth : -1));
-    for (let group of groups) {
-      const proms = group.map((sub) => sub.callback.call(sub.owner, rev));
-      // at this point, each component in the current group has registered a
-      // top level fiber in the scheduler. It could happen that rendering these
-      // components is done (if they have no children).  This is why we manually
-      // flush the scheduler.  This will force the scheduler to check
-      // immediately if they are done, which will cause their rendering
-      // promise to resolve earlier, which means that there is a chance of
-      // processing the next group in the same frame.
-      scheduler.flush();
-      await Promise.all(proms);
-    }
-  }
-}
-
-/**
- * The`useContext` hook is the normal way for a component to register themselve
- * to context state changes. The `useContext` method returns the context state
- */
-export function useContext(ctx: Context): any {
-  const component: Component = Component.current!;
-  return useContextWithCB(ctx, component, component.render.bind(component));
-}
-
-export function useContextWithCB(ctx: Context, component: Component, method): any {
-  const __owl__ = component.__owl__;
-  const id = __owl__.id;
-  const mapping = ctx.mapping;
-  if (id in mapping) {
-    return ctx.state;
-  }
-  if (!__owl__.observer) {
-    __owl__.observer = new Observer();
-    __owl__.observer.notifyCB = component.render.bind(component);
-  }
-
-  mapping[id] = 0;
-  const renderFn = __owl__.renderFn;
-  __owl__.renderFn = function (comp, params) {
-    mapping[id] = ctx.rev;
-    return renderFn(comp, params);
-  };
-  ctx.on("update", component, async (contextRev) => {
-    if (mapping[id] < contextRev) {
-      mapping[id] = contextRev;
-      await method();
-    }
-  });
-  const __destroy = component.__destroy;
-  component.__destroy = (parent) => {
-    ctx.off("update", component);
-    delete mapping[id];
-    __destroy.call(component, parent);
-  };
-  return ctx.state;
-}

src/core/event_bus.ts

@@ -1,79 +0,0 @@
-/**
- * We define here a simple event bus: it can
- * - emit events
- * - add/remove listeners.
- *
- * This is a useful pattern of communication in many cases.  For OWL, each
- * components and stores are event buses.
- */
-
-//------------------------------------------------------------------------------
-// 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 component 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 i = 0, iLen = subs.length; i < iLen; i++) {
-      const sub = subs[i];
-      sub.callback.call(sub.owner, ...args);
-    }
-  }
-
-  /**
-   * Remove all subscriptions.
-   */
-  clear() {
-    this.subscriptions = {};
-  }
-}

src/core/observer.ts

@@ -1,99 +0,0 @@
-/**
- * Owl Observer
- *
- * This code contains the logic that allows Owl to observe and react to state
- * changes.
- *
- * This is a Observer class that can observe any JS values.  The way it works
- * can be summarized thusly:
- * - primitive values are not observed at all
- * - Objects and arrays are observed by replacing them with a Proxy
- * - each object/array metadata are tracked in a weakmap, and keep a revision
- *   number
- *
- * Note that this code is loosely inspired by Vue.
- */
-
-//------------------------------------------------------------------------------
-// Observer
-//------------------------------------------------------------------------------
-export class Observer {
-  rev: number = 1;
-  allowMutations: boolean = true;
-  weakMap: WeakMap<any, any> = new WeakMap();
-
-  notifyCB() {}
-
-  observe<T>(value: T, parent?: any): T {
-    if (
-      value === null ||
-      typeof value !== "object" ||
-      value instanceof Date ||
-      value instanceof Promise
-    ) {
-      // fun fact: typeof null === 'object'
-      return value;
-    }
-    let metadata = this.weakMap.get(value) || this._observe(value, parent);
-    return metadata.proxy;
-  }
-
-  revNumber(value): number {
-    const metadata = this.weakMap.get(value);
-    return metadata ? metadata.rev : 0;
-  }
-
-  _observe(value, parent) {
-    var self = this;
-
-    const proxy = new Proxy(value, {
-      get(target, k) {
-        const targetValue = target[k];
-        return self.observe(targetValue, value);
-      },
-      set(target, key: string, newVal): boolean {
-        const value = target[key];
-        if (newVal !== value) {
-          if (!self.allowMutations) {
-            throw new Error(
-              `Observed state cannot be changed here! (key: "${key}", val: "${newVal}")`
-            );
-          }
-          self._updateRevNumber(target);
-          target[key] = newVal;
-          self.notifyCB();
-        }
-        return true;
-      },
-      deleteProperty(target, key) {
-        if (key in target) {
-          delete target[key];
-          self._updateRevNumber(target);
-          self.notifyCB();
-        }
-        return true;
-      },
-    });
-
-    const metadata = {
-      value,
-      proxy,
-      rev: this.rev,
-      parent,
-    };
-
-    this.weakMap.set(value, metadata);
-    this.weakMap.set(metadata.proxy, metadata);
-    return metadata;
-  }
-
-  _updateRevNumber(target: any) {
-    this.rev++;
-    let metadata = this.weakMap.get(target);
-    let parent = target;
-    do {
-      metadata = this.weakMap.get(parent);
-      metadata.rev++;
-    } while ((parent = metadata.parent) && parent !== target);
-  }
-}

src/core/owl_event.ts

@@ -1,15 +0,0 @@
-import { Component } from "../component/component";
-
-/**
- * We define here OwlEvent, a subclass of CustomEvent, with an additional
- * attribute:
- *  - originalComponent: the component that triggered the event
- */
-
-export class OwlEvent<T> extends CustomEvent<T> {
-  originalComponent: Component;
-  constructor(component, eventType, options) {
-    super(eventType, options);
-    this.originalComponent = component;
-  }
-}

src/event_bus.ts

@@ -0,0 +1,5 @@
+export class EventBus extends EventTarget {
+  trigger(name: string, payload?: any) {
+    this.dispatchEvent(new CustomEvent(name, { detail: payload }));
+  }
+}

src/hooks.ts

@@ -1,182 +0,0 @@
-import { Component, Env } from "./component/component";
-import { Observer } from "./core/observer";
-
-/**
- * Owl Hook System
- *
- * This file introduces the concept of hooks, similar to React or Vue hooks.
- * We have currently an implementation of:
- * - useState (reactive state)
- * - onMounted
- * - onWillUnmount
- * - useRef
- */
-
-// -----------------------------------------------------------------------------
-// useState
-// -----------------------------------------------------------------------------
-
-/**
- * This is the main way a component can be made reactive.  The useState hook
- * will return an observed object (or array).  Changes to that value will then
- * trigger a rerendering of the current component.
- */
-export function useState<T>(state: T): T {
-  const component: Component = Component.current!;
-  const __owl__ = component.__owl__;
-  if (!__owl__.observer) {
-    __owl__.observer = new Observer();
-    __owl__.observer.notifyCB = component.render.bind(component);
-  }
-  return __owl__.observer.observe(state);
-}
-
-// -----------------------------------------------------------------------------
-// Life cycle hooks
-// -----------------------------------------------------------------------------
-function makeLifecycleHook(method: string, reverse: boolean = false) {
-  if (reverse) {
-    return function (cb) {
-      const component: Component = Component.current!;
-      if (component.__owl__[method]) {
-        const current = component.__owl__[method];
-        component.__owl__[method] = function () {
-          current.call(component);
-          cb.call(component);
-        };
-      } else {
-        component.__owl__[method] = cb;
-      }
-    };
-  } else {
-    return function (cb) {
-      const component: Component = Component.current!;
-      if (component.__owl__[method]) {
-        const current = component.__owl__[method];
-        component.__owl__[method] = function () {
-          cb.call(component);
-          current.call(component);
-        };
-      } else {
-        component.__owl__[method] = cb;
-      }
-    };
-  }
-}
-
-function makeAsyncHook(method: string) {
-  return function (cb) {
-    const component: Component = Component.current!;
-    if (component.__owl__[method]) {
-      const current = component.__owl__[method];
-      component.__owl__[method] = function (...args) {
-        return Promise.all([current.call(component, ...args), cb.call(component, ...args)]);
-      };
-    } else {
-      component.__owl__[method] = cb;
-    }
-  };
-}
-
-export const onMounted = makeLifecycleHook("mountedCB", true);
-export const onWillUnmount = makeLifecycleHook("willUnmountCB");
-export const onWillPatch = makeLifecycleHook("willPatchCB");
-export const onPatched = makeLifecycleHook("patchedCB", true);
-
-export const onWillStart = makeAsyncHook("willStartCB");
-export const onWillUpdateProps = makeAsyncHook("willUpdatePropsCB");
-
-// -----------------------------------------------------------------------------
-// useRef
-// -----------------------------------------------------------------------------
-
-/**
- * The purpose of this hook is to allow components to get a reference to a sub
- * html node or component.
- */
-interface Ref<C extends Component = Component> {
-  el: HTMLElement | null;
-  comp: C | null;
-}
-
-export function useRef<C extends Component = Component>(name: string): Ref<C> {
-  const __owl__ = Component.current!.__owl__;
-  return {
-    get el(): HTMLElement | null {
-      const val = __owl__.refs && __owl__.refs[name];
-      if (val instanceof HTMLElement) {
-        return val;
-      } else if (val instanceof Component) {
-        return val.el;
-      }
-      return null;
-    },
-    get comp(): C | null {
-      const val = __owl__.refs && __owl__.refs[name];
-      return val instanceof Component ? (val as C) : null;
-    },
-  };
-}
-
-// -----------------------------------------------------------------------------
-// "Builder" hooks
-// -----------------------------------------------------------------------------
-
-/**
- * This hook is useful as a building block for some customized hooks, that may
- * need a reference to the component calling them.
- */
-export function useComponent<P, E extends Env>(): Component<P, E> {
-  return Component.current as any;
-}
-
-/**
- * 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 Component.current.env as any;
-}
-
-// -----------------------------------------------------------------------------
-// useSubEnv
-// -----------------------------------------------------------------------------
-
-/**
- * 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(nextEnv) {
-  const component = Component.current!;
-  component.env = Object.assign(Object.create(component.env), nextEnv);
-}
-
-// -----------------------------------------------------------------------------
-// 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,
-  eventParams?
-) {
-  const boundHandler = handler.bind(Component.current);
-
-  onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
-  onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
-}

src/index.ts

@@ -1,42 +1,73 @@
-/**
- * This file is the main file packaged by rollup (see rollup.config.js).  From
- * this file, we export all public owl elements.
- *
- * Note that dynamic values, such as a date or a commit hash are added by rollup
- */
-import { EventBus } from "./core/event_bus";
-import { Observer } from "./core/observer";
-import { QWeb } from "./qweb/index";
-import { config } from "./config";
-import * as _store from "./store";
-import * as _utils from "./utils";
-import * as _tags from "./tags";
-import { AsyncRoot } from "./misc/async_root";
-import { Portal } from "./misc/portal";
-import * as _hooks from "./hooks";
-import * as _context from "./context";
-import { Link } from "./router/link";
-import { RouteComponent } from "./router/route_component";
-import { Router } from "./router/router";
+import {
+  config,
+  createBlock,
+  html,
+  list,
+  mount as blockMount,
+  multi,
+  patch,
+  remove,
+  text,
+  toggler,
+} from "./blockdom";
+import { mainEventHandler } from "./component/handler";
 
-export { Component, mount } from "./component/component";
-export { QWeb };
-export { config };
-export { browser } from "./browser";
+config.shouldNormalizeDom = false;
+config.mainEventHandler = mainEventHandler;
 
-export const Context = _context.Context;
-export const useState = _hooks.useState;
-export const core = { EventBus, Observer };
-export const router = { Router, RouteComponent, Link };
-export const Store = _store.Store;
-export const utils = _utils;
-export const tags = _tags;
-export const misc = { AsyncRoot, Portal };
-export const hooks = Object.assign({}, _hooks, {
-  useContext: _context.useContext,
-  useDispatch: _store.useDispatch,
-  useGetters: _store.useGetters,
-  useStore: _store.useStore,
-});
+export const blockDom = {
+  config,
+  // bdom entry points
+  mount: blockMount,
+  patch,
+  remove,
+  // bdom block types
+  list,
+  multi,
+  text,
+  toggler,
+  createBlock,
+  html,
+};
+
+// import { makeBlockClass } from "./_old_bdom/element";
+import { App } from "./app";
+import { Component } from "./component/component";
+import { getCurrent } from "./component/component_node";
+// import { getCurrent } from "./b_node";
+
+export { App, Component };
+
+export async function mount<T extends typeof Component>(
+  C: T,
+  target: HTMLElement
+): Promise<InstanceType<T>> {
+  const app = new App(C);
+  return app.mount(target);
+}
+
+export function useComponent(): Component {
+  const current = getCurrent();
+  return current!.component;
+}
+
+export { status } from "./component/status";
+export { Portal } from "./misc/portal";
+export { Memo } from "./misc/memo";
+export { xml } from "./tags";
+export { useState } from "./reactivity";
+export { useRef } from "./refs";
+export { EventBus } from "./event_bus";
+
+export {
+  onWillStart,
+  onMounted,
+  onWillUnmount,
+  onWillUpdateProps,
+  onWillPatch,
+  onPatched,
+  onRender,
+  onDestroyed,
+} from "./lifecycle_hooks";
 
 export const __info__ = {};

src/lifecycle_hooks.ts

@@ -0,0 +1,49 @@
+import { getCurrent } from "./component/component_node";
+
+// -----------------------------------------------------------------------------
+//  hooks
+// -----------------------------------------------------------------------------
+
+export function onWillStart(fn: () => Promise<void> | void | any) {
+  const node = getCurrent()!;
+  node.willStart.push(fn);
+}
+
+export function onWillUpdateProps(fn: (nextProps: any) => Promise<void> | void | any) {
+  const node = getCurrent()!;
+  node.willUpdateProps.push(fn);
+}
+
+export function onMounted(fn: () => void | any) {
+  const node = getCurrent()!;
+  node.mounted.push(fn);
+}
+
+export function onWillPatch(fn: () => Promise<void> | any | void) {
+  const node = getCurrent()!;
+  node.willPatch.push(fn);
+}
+
+export function onPatched(fn: () => void | any) {
+  const node = getCurrent()!;
+  node.patched.push(fn);
+}
+
+export function onWillUnmount(fn: () => Promise<void> | void | any) {
+  const node = getCurrent()!;
+  node.willUnmount.push(fn);
+}
+
+export function onDestroyed(fn: () => Promise<void> | void | any) {
+  const node = getCurrent()!;
+  node.destroyed.push(fn);
+}
+
+export function onRender(fn: () => void | any) {
+  const node = getCurrent()!;
+  const renderFn = node.renderFn;
+  node.renderFn = () => {
+    fn();
+    return renderFn();
+  };
+}

src/misc/async_root.ts

@@ -1,19 +0,0 @@
-import { Component } from "../component/component";
-import { xml } from "../tags";
-
-/**
- * AsyncRoot
- *
- * Owl is by default asynchronous, and the user interface will wait for all its
- * subcomponents to be rendered before updating the DOM. This is most of the
- * time what we want, but in some cases, it makes sense to "detach" a component
- * from this coordination.  This is the goal of the AsyncRoot component.
- */
-
-export class AsyncRoot extends Component {
-  static template = xml`<t t-slot="default"/>`;
-
-  async __updateProps(nextProps, parentFiber) {
-    this.render(parentFiber.force);
-  }
-}

src/misc/memo.ts

@@ -0,0 +1,47 @@
+import { Component } from "../component/component";
+import type { ComponentNode } from "../component/component_node";
+import { xml } from "../tags";
+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 (p1[k] !== p2[k]) {
+      return false;
+    }
+  }
+  return true;
+}

src/misc/portal.ts

@@ -1,171 +1,65 @@
-import { Component, portalSymbol } from "../component/component";
-import { VNode, patch } from "../vdom/index";
+import type { ComponentNode } from "../component/component_node";
+import { Component } from "../component/component";
 import { xml } from "../tags";
-import { OwlEvent } from "../core/owl_event";
-import { useSubEnv } from "../hooks";
+import { BDom, text, VNode } from "../blockdom";
 
-/**
- * Portal
- *
- * The Portal component allows to render a part of a component outside it's DOM.
- * It is for example useful for dialogs: for css reasons, dialogs are in general
- * placed in a specific spot of the DOM (e.g. directly in the body). With the
- * Portal, a component can conditionally specify in its tempate that it contains
- * a dialog, and where this dialog should be inserted in the DOM.
- *
- * The Portal component ensures that the communication between the content of
- * the Portal and its parent properly works: business events reaching the Portal
- * are re-triggered on an empty <portal> node located in the parent's DOM.
- */
+const VText: any = text("").constructor;
 
-interface Props {
-  target: string;
+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() {
+    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<Props> {
-  static template = xml`<portal><t t-slot="default"/></portal>`;
-  static props = {
-    target: {
-      type: String,
-    },
-  };
+export class Portal extends Component {
+  static template = xml`<t t-slot="default"/>`;
 
-  // boolean to indicate whether or not we must listen to 'dom-appended' event
-  // to hook on the moment when the target is inserted into the DOM (because it
-  // is not when the portal is rendered)
-  doTargetLookUp: boolean = true;
-  // set of encountered events that need to be redirected
-  _handledEvents: Set<string> = new Set();
-  // function that will be the event's tunnel (needs to be an arrow function to
-  // avoid having to rebind `this`)
-  _handlerTunnel: (f: OwlEvent<any>) => void = (ev: OwlEvent<any>) => {
-    ev.stopPropagation();
-    this.__trigger(ev.originalComponent, ev.type, ev.detail);
-  };
-  // Storing the parent's env
-  parentEnv: any = null;
-  // represents the element that is moved somewhere else
-  portal: VNode | null = null;
-  // the target where we will move `portal`
-  target: Element | null = null;
-
-  constructor(parent, props) {
-    super(parent, props);
-    this.parentEnv = parent ? parent.env : {};
-    // put a callback in the env that is propagated to children s.t. portal can
-    // register an handler to those events just before children will trigger them
-    useSubEnv({
-      [portalSymbol]: (ev) => {
-        if (!this._handledEvents.has(ev.type)) {
-          this.portal!.elm!.addEventListener(ev.type, this._handlerTunnel);
-          this._handledEvents.add(ev.type);
-        }
-      },
-    });
-  }
-  /**
-   * Override to revert back to a classic Component's structure
-   *
-   * @override
-   */
-  __callWillUnmount() {
-    super.__callWillUnmount();
-    this.el!.appendChild(this.portal!.elm!);
-    this.doTargetLookUp = true;
-  }
-  /**
-   * At each DOM change, we must ensure that the portal contains exactly one
-   * child
-   */
-  __checkVNodeStructure(vnode: VNode) {
-    const children = vnode.children!;
-    let countRealNodes = 0;
-    for (let child of children) {
-      if ((child as VNode).sel) {
-        countRealNodes++;
-      }
-    }
-    if (countRealNodes !== 1) {
-      throw new Error(`Portal must have exactly one non-text child (has ${countRealNodes})`);
-    }
-  }
-  /**
-   * Ensure the target is still there at whichever time we render
-   */
-  __checkTargetPresence() {
-    if (!this.target || !document.contains(this.target)) {
-      throw new Error(`Could not find any match for "${this.props.target}"`);
-    }
-  }
-  /**
-   * Move the portal's element to the target
-   */
-  __deployPortal() {
-    this.__checkTargetPresence();
-    this.target!.appendChild(this.portal!.elm!);
-  }
-  /**
-   * Override to remove from the DOM the element we have teleported
-   *
-   * @override
-   */
-  __destroy(parent) {
-    if (this.portal && this.portal.elm) {
-      const displacedElm = this.portal.elm!;
-      const parent = displacedElm.parentNode;
-      if (parent) {
-        parent.removeChild(displacedElm);
-      }
-    }
-    super.__destroy(parent);
-  }
-  /**
-   * Override to patch the element that has been teleported
-   *
-   * @override
-   */
-  __patch(target, vnode) {
-    if (this.doTargetLookUp) {
-      const target = document.querySelector(this.props.target);
-      if (!target) {
-        this.env.qweb.on("dom-appended", this, () => {
-          this.doTargetLookUp = false;
-          this.env.qweb.off("dom-appended", this);
-          this.target = document.querySelector(this.props.target);
-          this.__deployPortal();
-        });
-      } else {
-        this.doTargetLookUp = false;
-        this.target = target;
-      }
-    }
-    this.__checkVNodeStructure(vnode);
-    const shouldDeploy =
-      (!this.portal || this.el!.contains(this.portal.elm!)) && !this.doTargetLookUp;
-
-    if (!this.doTargetLookUp && !shouldDeploy) {
-      // Only on pure patching, provided the
-      // this.target's parent has not been unmounted
-      this.__checkTargetPresence();
-    }
-
-    const portalPatch = this.portal ? this.portal : document.createElement(vnode.children[0].sel);
-    this.portal = patch(portalPatch, vnode.children![0] as VNode);
-    vnode.children = [];
-
-    super.__patch(target, vnode);
-
-    if (shouldDeploy) {
-      this.__deployPortal();
-    }
-  }
-  /**
-   * Override to set the env
-   */
-  __trigger(component: Component, eventType: string, payload?: any) {
-    const env = this.env;
-    this.env = this.parentEnv;
-    super.__trigger(component, eventType, payload);
-    this.env = env;
+  constructor(props: any, env: any, node: ComponentNode) {
+    super(props, env, node);
+    node._render = function (fiber: any) {
+      const bdom = new VPortal(props.target, this.renderFn());
+      fiber.bdom = bdom;
+      fiber.root.counter--;
+    };
   }
 }

src/qweb/base_directives.ts

@@ -1,394 +0,0 @@
-import { CompilationContext, INTERP_REGEXP } from "./compilation_context";
-import { QWeb } from "./qweb";
-import { htmlToVDOM } from "../vdom/html_to_vdom";
-import { QWebVar } from "./expression_parser";
-
-/**
- * Owl QWeb Directives
- *
- * This file contains the implementation of most standard QWeb directives:
- * - t-esc
- * - t-raw
- * - t-set/t-value
- * - t-if/t-elif/t-else
- * - t-call
- * - t-foreach/t-as
- * - t-debug
- * - t-log
- */
-
-//------------------------------------------------------------------------------
-// t-esc and t-raw
-//------------------------------------------------------------------------------
-QWeb.utils.htmlToVDOM = htmlToVDOM;
-
-function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: CompilationContext) {
-  ctx.rootContext.shouldDefineScope = true;
-  if (value === "0") {
-    if (ctx.parentNode) {
-      // the 'zero' magical symbol is where we can find the result of the rendering
-      // of  the body of the t-call.
-      ctx.rootContext.shouldDefineUtils = true;
-      const zeroArgs = ctx.escaping
-        ? `{text: utils.vDomToString(scope[utils.zero])}`
-        : `...scope[utils.zero]`;
-      ctx.addLine(`c${ctx.parentNode}.push(${zeroArgs});`);
-    }
-    return;
-  }
-
-  let exprID: string;
-  if (typeof value === "string") {
-    exprID = `_${ctx.generateID()}`;
-    ctx.addLine(`let ${exprID} = ${ctx.formatExpression(value)};`);
-  } else {
-    exprID = `scope.${value.id}`;
-  }
-  ctx.addIf(`${exprID} != null`);
-
-  if (ctx.escaping) {
-    let protectID;
-    if (value.hasBody) {
-      ctx.rootContext.shouldDefineUtils = true;
-      protectID = ctx.startProtectScope();
-      ctx.addLine(
-        `${exprID} = ${exprID} instanceof utils.VDomArray ? utils.vDomToString(${exprID}) : ${exprID};`
-      );
-    }
-    if (ctx.parentTextNode) {
-      ctx.addLine(`vn${ctx.parentTextNode}.text += ${exprID};`);
-    } else if (ctx.parentNode) {
-      ctx.addLine(`c${ctx.parentNode}.push({text: ${exprID}});`);
-    } else {
-      let nodeID = ctx.generateID();
-      ctx.rootContext.rootNode = nodeID;
-      ctx.rootContext.parentTextNode = nodeID;
-      ctx.addLine(`let vn${nodeID} = {text: ${exprID}};`);
-      if (ctx.rootContext.shouldDefineResult) {
-        ctx.addLine(`result = vn${nodeID}`);
-      }
-    }
-    if (value.hasBody) {
-      ctx.stopProtectScope(protectID);
-    }
-  } else {
-    ctx.rootContext.shouldDefineUtils = true;
-    if (value.hasBody) {
-      ctx.addLine(
-        `const vnodeArray = ${exprID} instanceof utils.VDomArray ? ${exprID} : utils.htmlToVDOM(${exprID});`
-      );
-      ctx.addLine(`c${ctx.parentNode}.push(...vnodeArray);`);
-    } else {
-      ctx.addLine(`c${ctx.parentNode}.push(...utils.htmlToVDOM(${exprID}));`);
-    }
-  }
-  if (node.childNodes.length) {
-    ctx.addElse();
-    qweb._compileChildren(node, ctx);
-  }
-
-  ctx.closeIf();
-}
-
-QWeb.addDirective({
-  name: "esc",
-  priority: 70,
-  atNodeEncounter({ node, qweb, ctx }): boolean {
-    let value = ctx.getValue(node.getAttribute("t-esc")!);
-    compileValueNode(value, node, qweb, ctx.subContext("escaping", true));
-    return true;
-  },
-});
-
-QWeb.addDirective({
-  name: "raw",
-  priority: 80,
-  atNodeEncounter({ node, qweb, ctx }): boolean {
-    let value = ctx.getValue(node.getAttribute("t-raw")!);
-    compileValueNode(value, node, qweb, ctx);
-    return true;
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-set
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "set",
-  extraNames: ["value"],
-  priority: 60,
-  atNodeEncounter({ node, qweb, ctx }): boolean {
-    ctx.rootContext.shouldDefineScope = true;
-    const variable = node.getAttribute("t-set")!;
-    let value = node.getAttribute("t-value")!;
-    ctx.variables[variable] = ctx.variables[variable] || ({} as QWebVar);
-    let qwebvar = ctx.variables[variable];
-    const hasBody = node.hasChildNodes();
-
-    qwebvar.id = variable;
-    qwebvar.expr = `scope.${variable}`;
-    if (value) {
-      const formattedValue = ctx.formatExpression(value);
-      let scopeExpr = `scope`;
-      if (ctx.protectedScopeNumber) {
-        ctx.rootContext.shouldDefineUtils = true;
-        scopeExpr = `utils.getScope(scope, '${variable}')`;
-      }
-      ctx.addLine(`${scopeExpr}.${variable} = ${formattedValue};`);
-      qwebvar.value = formattedValue;
-    }
-
-    if (hasBody) {
-      ctx.rootContext.shouldDefineUtils = true;
-      if (value) {
-        ctx.addIf(`!(${qwebvar.expr})`);
-      }
-      const tempParentNodeID = ctx.generateID();
-      const _parentNode = ctx.parentNode;
-      ctx.parentNode = tempParentNodeID;
-
-      ctx.addLine(`let c${tempParentNodeID} = new utils.VDomArray();`);
-      const nodeCopy = node.cloneNode(true) as Element;
-      for (let attr of ["t-set", "t-value", "t-if", "t-else", "t-elif"]) {
-        nodeCopy.removeAttribute(attr);
-      }
-      qweb._compileNode(nodeCopy, ctx);
-
-      ctx.addLine(`${qwebvar.expr} = c${tempParentNodeID}`);
-      qwebvar.value = `c${tempParentNodeID}`;
-      qwebvar.hasBody = true;
-
-      ctx.parentNode = _parentNode;
-      if (value) {
-        ctx.closeIf();
-      }
-    }
-    return true;
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-if, t-elif, t-else
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "if",
-  priority: 20,
-  atNodeEncounter({ node, ctx }): boolean {
-    let cond = ctx.getValue(node.getAttribute("t-if")!);
-    ctx.addIf(typeof cond === "string" ? ctx.formatExpression(cond) : `scope.${cond.id!}`);
-    return false;
-  },
-  finalize({ ctx }) {
-    ctx.closeIf();
-  },
-});
-
-QWeb.addDirective({
-  name: "elif",
-  priority: 30,
-  atNodeEncounter({ node, ctx }): boolean {
-    let cond = ctx.getValue(node.getAttribute("t-elif")!);
-    ctx.addLine(
-      `else if (${typeof cond === "string" ? ctx.formatExpression(cond) : `scope.${cond.id}`}) {`
-    );
-    ctx.indent();
-    return false;
-  },
-  finalize({ ctx }) {
-    ctx.closeIf();
-  },
-});
-
-QWeb.addDirective({
-  name: "else",
-  priority: 40,
-  atNodeEncounter({ ctx }): boolean {
-    ctx.addLine(`else {`);
-    ctx.indent();
-    return false;
-  },
-  finalize({ ctx }) {
-    ctx.closeIf();
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-call
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "call",
-  priority: 50,
-  atNodeEncounter({ node, qweb, ctx }): boolean {
-    // Step 1: sanity checks
-    // ------------------------------------------------
-    ctx.rootContext.shouldDefineScope = true;
-    ctx.rootContext.shouldDefineUtils = true;
-    const subTemplate = node.getAttribute("t-call")!;
-    const isDynamic = INTERP_REGEXP.test(subTemplate);
-    const nodeTemplate = qweb.templates[subTemplate];
-    if (!isDynamic && !nodeTemplate) {
-      throw new Error(`Cannot find template "${subTemplate}" (t-call)`);
-    }
-
-    // Step 2: compile target template in sub templates
-    // ------------------------------------------------
-    let subIdstr: string;
-    if (isDynamic) {
-      const _id = ctx.generateID();
-      ctx.addLine(`let tname${_id} = ${ctx.interpolate(subTemplate)};`);
-      ctx.addLine(`let tid${_id} = this.subTemplates[tname${_id}];`);
-      ctx.addIf(`!tid${_id}`);
-      ctx.addLine(`tid${_id} = this.constructor.nextId++;`);
-      ctx.addLine(`this.subTemplates[tname${_id}] = tid${_id};`);
-      ctx.addLine(
-        `this.constructor.subTemplates[tid${_id}] = this._compile(tname${_id}, {hasParent: true, defineKey: true});`
-      );
-      ctx.closeIf();
-      subIdstr = `tid${_id}`;
-    } else {
-      let subId = qweb.subTemplates[subTemplate];
-      if (!subId) {
-        subId = QWeb.nextId++;
-        qweb.subTemplates[subTemplate] = subId;
-        const subTemplateFn = qweb._compile(subTemplate, { hasParent: true, defineKey: true });
-        QWeb.subTemplates[subId] = subTemplateFn;
-      }
-      subIdstr = `'${subId}'`;
-    }
-
-    // Step 3: compile t-call body if necessary
-    // ------------------------------------------------
-    let hasBody = node.hasChildNodes();
-    const protectID = ctx.startProtectScope();
-    if (hasBody) {
-      // we add a sub scope to protect the ambient scope
-      ctx.addLine(`{`);
-      ctx.indent();
-      const nodeCopy = node.cloneNode(true) as Element;
-      for (let attr of ["t-if", "t-else", "t-elif", "t-call"]) {
-        nodeCopy.removeAttribute(attr);
-      }
-      // this local scope is intended to trap c__0
-      ctx.addLine(`{`);
-      ctx.indent();
-      ctx.addLine("let c__0 = [];");
-      qweb._compileNode(nodeCopy, ctx.subContext("parentNode", "__0"));
-      ctx.rootContext.shouldDefineUtils = true;
-      ctx.addLine("scope[utils.zero] = c__0;");
-      ctx.dedent();
-      ctx.addLine(`}`);
-    }
-
-    // Step 4: add the appropriate function call to current component
-    // ------------------------------------------------
-    const parentComponent = ctx.rootContext.shouldDefineParent
-      ? `parent`
-      : `utils.getComponent(context)`;
-    const key = ctx.generateTemplateKey();
-    const parentNode = ctx.parentNode ? `c${ctx.parentNode}` : "result";
-    const extra = `Object.assign({}, extra, {parentNode: ${parentNode}, parent: ${parentComponent}, key: ${key}})`;
-    if (ctx.parentNode) {
-      ctx.addLine(`this.constructor.subTemplates[${subIdstr}].call(this, scope, ${extra});`);
-    } else {
-      // this is a t-call with no parentnode, we need to extract the result
-      ctx.rootContext.shouldDefineResult = true;
-      ctx.addLine(`result = []`);
-      ctx.addLine(`this.constructor.subTemplates[${subIdstr}].call(this, scope, ${extra});`);
-      ctx.addLine(`result = result[0]`);
-    }
-
-    // Step 5: restore previous scope
-    // ------------------------------------------------
-    if (hasBody) {
-      ctx.dedent();
-      ctx.addLine(`}`);
-    }
-    ctx.stopProtectScope(protectID);
-
-    return true;
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-foreach
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "foreach",
-  extraNames: ["as"],
-  priority: 10,
-  atNodeEncounter({ node, qweb, ctx }): boolean {
-    ctx.rootContext.shouldDefineScope = true;
-    ctx = ctx.subContext("loopNumber", ctx.loopNumber + 1);
-    const elems = node.getAttribute("t-foreach")!;
-    const name = node.getAttribute("t-as")!;
-    let arrayID = ctx.generateID();
-    ctx.addLine(`let _${arrayID} = ${ctx.formatExpression(elems)};`);
-    ctx.addLine(`if (!_${arrayID}) { throw new Error('QWeb error: Invalid loop expression')}`);
-    let keysID = ctx.generateID();
-    let valuesID = ctx.generateID();
-    ctx.addLine(`let _${keysID} = _${valuesID} = _${arrayID};`);
-    ctx.addIf(`!(_${arrayID} instanceof Array)`);
-    ctx.addLine(`_${keysID} = Object.keys(_${arrayID});`);
-    ctx.addLine(`_${valuesID} = Object.values(_${arrayID});`);
-    ctx.closeIf();
-    ctx.addLine(`let _length${keysID} = _${keysID}.length;`);
-    let varsID = ctx.startProtectScope(true);
-    const loopVar = `i${ctx.loopNumber}`;
-    ctx.addLine(`for (let ${loopVar} = 0; ${loopVar} < _length${keysID}; ${loopVar}++) {`);
-    ctx.indent();
-
-    ctx.addLine(`scope.${name}_first = ${loopVar} === 0`);
-    ctx.addLine(`scope.${name}_last = ${loopVar} === _length${keysID} - 1`);
-    ctx.addLine(`scope.${name}_index = ${loopVar}`);
-    ctx.addLine(`scope.${name} = _${keysID}[${loopVar}]`);
-    ctx.addLine(`scope.${name}_value = _${valuesID}[${loopVar}]`);
-    const nodeCopy = <Element>node.cloneNode(true);
-    let shouldWarn =
-      !nodeCopy.hasAttribute("t-key") &&
-      node.children.length === 1 &&
-      node.children[0].tagName !== "t" &&
-      !node.children[0].hasAttribute("t-key");
-    if (shouldWarn) {
-      console.warn(
-        `Directive t-foreach should always be used with a t-key! (in template: '${ctx.templateName}')`
-      );
-    }
-    if (nodeCopy.hasAttribute("t-key")) {
-      const expr = ctx.formatExpression(nodeCopy.getAttribute("t-key")!);
-      ctx.addLine(`let key${ctx.loopNumber} = ${expr};`);
-      nodeCopy.removeAttribute("t-key");
-    } else {
-      ctx.addLine(`let key${ctx.loopNumber} = i${ctx.loopNumber};`);
-    }
-
-    nodeCopy.removeAttribute("t-foreach");
-    qweb._compileNode(nodeCopy, ctx);
-    ctx.dedent();
-    ctx.addLine("}");
-    ctx.stopProtectScope(varsID);
-    return true;
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-debug
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "debug",
-  priority: 1,
-  atNodeEncounter({ ctx }) {
-    ctx.addLine("debugger;");
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-log
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "log",
-  priority: 1,
-  atNodeEncounter({ ctx, value }) {
-    const expr = ctx.formatExpression(value);
-    ctx.addLine(`console.log(${expr})`);
-  },
-});

src/qweb/compilation_context.ts

@@ -1,211 +0,0 @@
-import { compileExpr, compileExprToArray, QWebVar } from "./expression_parser";
-
-export const INTERP_REGEXP = /\{\{.*?\}\}/g;
-//------------------------------------------------------------------------------
-// Compilation Context
-//------------------------------------------------------------------------------
-
-export class CompilationContext {
-  static nextID: number = 1;
-  code: string[] = [];
-  variables: { [key: string]: QWebVar } = {};
-  escaping: boolean = false;
-  parentNode: number | null | string = null;
-  parentTextNode: number | null = null;
-  rootNode: number | null = null;
-  indentLevel: number = 0;
-  rootContext: CompilationContext;
-  shouldDefineParent: boolean = false;
-  shouldDefineScope: boolean = false;
-  protectedScopeNumber: number = 0;
-  shouldDefineQWeb: boolean = false;
-  shouldDefineUtils: boolean = false;
-  shouldDefineRefs: boolean = false;
-  shouldDefineResult: boolean = true;
-  loopNumber: number = 0;
-  inPreTag: boolean = false;
-  templateName: string;
-  allowMultipleRoots: boolean = false;
-  hasParentWidget: boolean = false;
-  hasKey0: boolean = false;
-  keyStack: boolean[] = [];
-
-  constructor(name?: string) {
-    this.rootContext = this;
-    this.templateName = name || "noname";
-    this.addLine("let h = this.h;");
-  }
-
-  generateID(): number {
-    return CompilationContext.nextID++;
-  }
-
-  /**
-   * This method generates a "template key", which is basically a unique key
-   * which depends on the currently set keys, and on the iteration numbers (if
-   * we are in a loop).
-   *
-   * Such a key is necessary when we need to associate an id to some element
-   * generated by a template (for example, a component)
-   */
-  generateTemplateKey(prefix: string = ""): string {
-    const id = this.generateID();
-    if (this.loopNumber === 0 && !this.hasKey0) {
-      return `'${prefix}__${id}__'`;
-    }
-    let key = `\`${prefix}__${id}__`;
-    let start = this.hasKey0 ? 0 : 1;
-    for (let i = start; i < this.loopNumber + 1; i++) {
-      key += `\${key${i}}__`;
-    }
-    this.addLine(`let k${id} = ${key}\`;`);
-    return `k${id}`;
-  }
-
-  generateCode(): string[] {
-    if (this.shouldDefineResult) {
-      this.code.unshift("    let result;");
-    }
-
-    if (this.shouldDefineScope) {
-      this.code.unshift("    let scope = Object.create(context);");
-    }
-    if (this.shouldDefineRefs) {
-      this.code.unshift("    context.__owl__.refs = context.__owl__.refs || {};");
-    }
-    if (this.shouldDefineParent) {
-      if (this.hasParentWidget) {
-        this.code.unshift("    let parent = extra.parent;");
-      } else {
-        this.code.unshift("    let parent = context;");
-      }
-    }
-    if (this.shouldDefineQWeb) {
-      this.code.unshift("    let QWeb = this.constructor;");
-    }
-    if (this.shouldDefineUtils) {
-      this.code.unshift("    let utils = this.constructor.utils;");
-    }
-    return this.code;
-  }
-
-  withParent(node: number): CompilationContext {
-    if (
-      !this.allowMultipleRoots &&
-      this === this.rootContext &&
-      (this.parentNode || this.parentTextNode)
-    ) {
-      throw new Error("A template should not have more than one root node");
-    }
-    if (!this.rootContext.rootNode) {
-      this.rootContext.rootNode = node;
-    }
-    if (!this.parentNode && this.rootContext.shouldDefineResult) {
-      this.addLine(`result = vn${node};`);
-    }
-    return this.subContext("parentNode", node);
-  }
-
-  subContext(key: keyof CompilationContext, value: any): CompilationContext {
-    const newContext = Object.create(this);
-    newContext[key] = value;
-    return newContext;
-  }
-
-  indent() {
-    this.rootContext.indentLevel++;
-  }
-
-  dedent() {
-    this.rootContext.indentLevel--;
-  }
-
-  addLine(line: string): number {
-    const prefix = new Array(this.indentLevel + 2).join("    ");
-    this.code.push(prefix + line);
-    return this.code.length - 1;
-  }
-
-  addIf(condition: string) {
-    this.addLine(`if (${condition}) {`);
-    this.indent();
-  }
-
-  addElse() {
-    this.dedent();
-    this.addLine("} else {");
-    this.indent();
-  }
-
-  closeIf() {
-    this.dedent();
-    this.addLine("}");
-  }
-
-  getValue(val: any): QWebVar | string {
-    return val in this.variables ? this.getValue(this.variables[val]) : val;
-  }
-
-  /**
-   * Prepare an expression for being consumed at render time.  Its main job
-   * is to
-   * - replace unknown variables by a lookup in the context
-   * - replace already defined variables by their internal name
-   */
-  formatExpression(expr: string): string {
-    this.rootContext.shouldDefineScope = true;
-    return compileExpr(expr, this.variables);
-  }
-  captureExpression(expr: string): string {
-    this.rootContext.shouldDefineScope = true;
-    const argId = this.generateID();
-    const tokens = compileExprToArray(expr, this.variables);
-    const done = new Set();
-    return tokens
-      .map((tok) => {
-        if (tok.varName) {
-          if (!done.has(tok.varName)) {
-            done.add(tok.varName);
-            this.addLine(`const ${tok.varName}_${argId} = ${tok.value};`);
-          }
-          tok.value = `${tok.varName}_${argId}`;
-        }
-        return tok.value;
-      })
-      .join("");
-  }
-
-  /**
-   * Perform string interpolation on the given string. Note that if the whole
-   * string is an expression, it simply returns it (formatted and enclosed in
-   * parentheses).
-   * For instance:
-   *   'Hello {{x}}!' -> `Hello ${x}`
-   *   '{{x ? 'a': 'b'}}' -> (x ? 'a' : 'b')
-   */
-  interpolate(s: string): string {
-    let matches = s.match(INTERP_REGEXP);
-    if (matches && matches[0].length === s.length) {
-      return `(${this.formatExpression(s.slice(2, -2))})`;
-    }
-
-    let r = s.replace(/\{\{.*?\}\}/g, (s) => "${" + this.formatExpression(s.slice(2, -2)) + "}");
-    return "`" + r + "`";
-  }
-  startProtectScope(codeBlock?: boolean): number {
-    const protectID = this.generateID();
-    this.rootContext.protectedScopeNumber++;
-    this.rootContext.shouldDefineScope = true;
-    const scopeExpr = `Object.create(scope);`;
-    this.addLine(`let _origScope${protectID} = scope;`);
-    this.addLine(`scope = ${scopeExpr}`);
-    if (!codeBlock) {
-      this.addLine(`scope.__access_mode__ = 'ro';`);
-    }
-    return protectID;
-  }
-  stopProtectScope(protectID: number) {
-    this.rootContext.protectedScopeNumber--;
-    this.addLine(`scope = _origScope${protectID};`);
-  }
-}

src/qweb/compiler.ts

@@ -0,0 +1,997 @@
+import { BDom } from "../blockdom";
+import { compileExpr, compileExprToArray, interpolate, INTERP_REGEXP } from "./inline_expressions";
+import {
+  AST,
+  ASTComment,
+  ASTComponent,
+  ASTDebug,
+  ASTDomNode,
+  ASTLog,
+  ASTMulti,
+  ASTSlot,
+  ASTTCall,
+  ASTTCallBlock,
+  ASTTEsc,
+  ASTText,
+  ASTTForEach,
+  ASTTif,
+  ASTTKey,
+  ASTTRaw,
+  ASTTSet,
+  ASTType,
+  parse,
+} from "./parser";
+
+export type Template = (context: any, vnode: any, key?: string) => BDom;
+export type TemplateFunction = (blocks: any, utils: any) => Template;
+
+type BlockType = "block" | "text" | "multi" | "list" | "html";
+
+export function compileTemplate(template: string, name?: string): TemplateFunction {
+  const compiler = new QWebCompiler(template, name);
+  return compiler.compile();
+}
+
+// using a non-html document so that <inner/outer>HTML serializes as XML instead
+// of HTML (as we will parse it as xml later)
+const xmlDoc = document.implementation.createDocument(null, null, null);
+
+// -----------------------------------------------------------------------------
+// BlockDescription
+// -----------------------------------------------------------------------------
+
+class BlockDescription {
+  static nextBlockId = 1;
+  static nextDataId = 1;
+
+  varName: string;
+  blockName: string;
+  isRoot: boolean = false;
+  hasDynamicChildren: boolean = false;
+  children: BlockDescription[] = [];
+  data: string[] = [];
+  dom?: Node;
+  currentDom?: Element;
+  childNumber: number = 0;
+  target: CodeTarget;
+  type: BlockType;
+  parentVar: string = "";
+  id: number;
+
+  constructor(target: CodeTarget, type: BlockType) {
+    this.id = BlockDescription.nextBlockId++;
+    this.varName = "b" + this.id;
+    this.blockName = "block" + this.id;
+    this.target = target;
+    this.type = type;
+  }
+
+  insertData(str: string): number {
+    const id = "d" + BlockDescription.nextDataId++;
+    this.target.addLine(`let ${id} = ${str};`);
+    return this.data.push(id) - 1;
+  }
+
+  insert(dom: Node) {
+    if (this.currentDom) {
+      this.currentDom.appendChild(dom);
+    } else {
+      this.dom = dom;
+    }
+  }
+
+  generateExpr(expr: string): string {
+    if (this.type === "block") {
+      const hasChildren = this.children.length;
+      let params = this.data.length ? `[${this.data.join(", ")}]` : hasChildren ? "[]" : "";
+      if (hasChildren) {
+        params += ", [" + this.children.map((c) => c.varName).join(", ") + "]";
+      }
+      return `${this.blockName}(${params})`;
+    } else if (this.type === "list") {
+      return `list(c${this.id})`;
+    }
+    return expr;
+  }
+
+  asXmlString() {
+    // Can't use outerHTML on text/comment nodes
+    // append dom to any element and use innerHTML instead
+    const t = xmlDoc.createElement('t');
+    t.appendChild(this.dom!);
+    return t.innerHTML;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Compiler code
+// -----------------------------------------------------------------------------
+const FNAMEREGEXP = /^[$A-Z_][0-9A-Z_$]*$/i;
+
+interface Context {
+  block: BlockDescription | null;
+  index: number | string;
+  forceNewBlock: boolean;
+  preventRoot?: boolean;
+  isLast?: boolean;
+}
+
+class CodeTarget {
+  name: string;
+  signature: string = "";
+  indentLevel = 0;
+  loopLevel = 0;
+  code: string[] = [];
+  hasRoot = false;
+  hasCache = false;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  addLine(line: string, idx?: number) {
+    const prefix = new Array(this.indentLevel + 2).join("  ");
+    if (idx === undefined) {
+      this.code.push(prefix + line);
+    } else {
+      this.code.splice(idx, 0, prefix + line);
+    }
+  }
+}
+
+export class QWebCompiler {
+  blocks: BlockDescription[] = [];
+  nextId = 1;
+  nextBlockId = 1;
+  shouldProtectScope: boolean = false;
+  shouldDefineAssign: boolean = false;
+  shouldDefineKey0: boolean = false;
+  hasSafeContext: boolean | null = null;
+  hasRef: boolean = false;
+  // hasTCall: boolean = false;
+  isDebug: boolean = false;
+  functions: CodeTarget[] = [];
+  target = new CodeTarget("main");
+  templateName: string;
+  template: string;
+  ast: AST;
+  staticCalls: { id: string; template: string }[] = [];
+
+  constructor(template: string, name?: string) {
+    this.template = template;
+    this.ast = parse(template);
+    // console.warn(this.ast);
+    if (name) {
+      this.templateName = name;
+    } else {
+      if (template.length > 250) {
+        this.templateName = template.slice(0, 250) + "...";
+      } else {
+        this.templateName = template;
+      }
+    }
+  }
+
+  compile(): TemplateFunction {
+    const ast = this.ast;
+    this.isDebug = ast.type === ASTType.TDebug;
+    BlockDescription.nextBlockId = 1;
+    BlockDescription.nextDataId = 1;
+    this.compileAST(ast, { block: null, index: 0, forceNewBlock: false, isLast: true });
+    const code = this.generateCode();
+    // console.warn(code);
+    return new Function("bdom, helpers", code) as TemplateFunction;
+  }
+
+  addLine(line: string) {
+    this.target.addLine(line);
+  }
+
+  generateId(prefix: string = ""): string {
+    return `${prefix}${this.nextId++}`;
+  }
+
+  generateBlockName(): string {
+    return `block${this.blocks.length + 1}`;
+  }
+
+  insertAnchor(block: BlockDescription) {
+    const tag = `block-child-${block.children.length}`;
+    const anchor = xmlDoc.createElement(tag);
+    block.insert(anchor);
+  }
+
+  createBlock(
+    parentBlock: BlockDescription | null,
+    type: BlockType,
+    ctx: Context
+  ): BlockDescription {
+    const hasRoot = this.target.hasRoot;
+    const block = new BlockDescription(this.target, type);
+    if (!hasRoot && !ctx.preventRoot) {
+      this.target.hasRoot = true;
+      block.isRoot = true;
+    }
+    if (parentBlock) {
+      parentBlock.children.push(block);
+      if (parentBlock.type === "list") {
+        block.parentVar = `c${parentBlock.id}`;
+      }
+    }
+    return block;
+  }
+
+  insertBlock(expression: string, block: BlockDescription, ctx: Context): string | null {
+    let id: string | null = null;
+    const blockExpr = block.generateExpr(expression);
+    if (block.parentVar) {
+      this.addLine(
+        `${block.parentVar}[${ctx.index}] = withKey(${blockExpr}, key${this.target.loopLevel});`
+      );
+    } else if (block.isRoot && !ctx.preventRoot) {
+      this.addLine(`return ${blockExpr};`);
+    } else {
+      this.addLine(`let ${block.varName} = ${blockExpr};`);
+    }
+    return id;
+  }
+
+  generateCode(): string {
+    let mainCode = this.target.code;
+    this.target.code = [];
+    this.target.indentLevel = 0;
+    // define blocks and utility functions
+    this.addLine(`let { text, createBlock, list, multi, html, toggler, component } = bdom;`);
+    this.addLine(
+      `let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;`
+    );
+    if (this.shouldDefineAssign) {
+      this.addLine(`let assign = Object.assign;`);
+    }
+
+    for (let { id, template } of this.staticCalls) {
+      this.addLine(`const ${id} = getTemplate(${template});`);
+    }
+
+    // define all blocks
+    if (this.blocks.length) {
+      this.addLine(``);
+      for (let block of this.blocks) {
+        if (block.dom) {
+          this.addLine(`let ${block.blockName} = createBlock(\`${block.asXmlString()}\`);`);
+        }
+      }
+    }
+
+    // define all slots
+    for (let fn of this.functions) {
+      this.generateFunctions(fn);
+    }
+
+    // // generate main code
+    this.target.indentLevel = 0;
+    this.addLine(``);
+    this.addLine(`return function template(ctx, node, key = "") {`);
+    if (this.hasRef) {
+      this.addLine(`  const refs = ctx.__owl__.refs;`);
+    }
+    if (this.shouldProtectScope) {
+      this.addLine(`  ctx = Object.create(ctx);`);
+    }
+    if (this.target.hasCache) {
+      this.addLine(`  let cache = ctx.cache || {};`);
+      this.addLine(`  let nextCache = ctx.cache = {};`);
+    }
+    // if (this.shouldDefineKey0) {
+    //   this.addLine(`  let key0;`);
+    // }
+    for (let line of mainCode) {
+      this.addLine(line);
+    }
+    // console.warn(this.target.code.join('\n'))
+    if (!this.target.hasRoot) {
+      throw new Error("missing root block");
+    }
+    this.addLine("}");
+    const code = this.target.code.join("\n");
+
+    if (this.isDebug) {
+      const msg = `[Owl Debug]\n${code}`;
+      console.log(msg);
+    }
+    return code;
+  }
+
+  generateFunctions(fn: CodeTarget) {
+    this.addLine("");
+    this.addLine(`const ${fn.name} = ${fn.signature}`);
+    if (fn.hasCache) {
+      this.addLine(`let cache = ctx.cache || {};`);
+      this.addLine(`let nextCache = ctx.cache = {};`);
+    }
+    for (let line of fn.code) {
+      this.addLine(line);
+    }
+    this.addLine(`}`);
+  }
+
+  captureExpression(expr: string): string {
+    const tokens = compileExprToArray(expr);
+    const mapping = new Map<string, string>();
+    return tokens
+      .map((tok) => {
+        if (tok.varName) {
+          if (!mapping.has(tok.varName)) {
+            const varId = this.generateId("v");
+            mapping.set(tok.varName, varId);
+            this.addLine(`const ${varId} = ${tok.value};`);
+          }
+          tok.value = mapping.get(tok.varName)!;
+        }
+        return tok.value;
+      })
+      .join("");
+  }
+
+  compileAST(ast: AST, ctx: Context) {
+    switch (ast.type) {
+      case ASTType.Comment:
+        this.compileComment(ast, ctx);
+        break;
+      case ASTType.Text:
+        this.compileText(ast, ctx);
+        break;
+      case ASTType.DomNode:
+        this.compileTDomNode(ast, ctx);
+        break;
+      case ASTType.TEsc:
+        this.compileTEsc(ast, ctx);
+        break;
+      case ASTType.TRaw:
+        this.compileTRaw(ast, ctx);
+        break;
+      case ASTType.TIf:
+        this.compileTIf(ast, ctx);
+        break;
+      case ASTType.TForEach:
+        this.compileTForeach(ast, ctx);
+        break;
+      case ASTType.TKey:
+        this.compileTKey(ast, ctx);
+        break;
+      case ASTType.Multi:
+        this.compileMulti(ast, ctx);
+        break;
+      case ASTType.TCall:
+        this.compileTCall(ast, ctx);
+        break;
+      case ASTType.TCallBlock:
+        this.compileTCallBlock(ast, ctx);
+        break;
+      case ASTType.TSet:
+        this.compileTSet(ast, ctx);
+        break;
+      case ASTType.TComponent:
+        this.compileComponent(ast, ctx);
+        break;
+      case ASTType.TDebug:
+        this.compileDebug(ast, ctx);
+        break;
+      case ASTType.TLog:
+        this.compileLog(ast, ctx);
+        break;
+      case ASTType.TSlot:
+        this.compileTSlot(ast, ctx);
+        break;
+    }
+  }
+
+  compileDebug(ast: ASTDebug, ctx: Context) {
+    this.addLine(`debugger;`);
+    if (ast.content) {
+      this.compileAST(ast.content, ctx);
+    }
+  }
+
+  compileLog(ast: ASTLog, ctx: Context) {
+    this.addLine(`console.log(${compileExpr(ast.expr)});`);
+    if (ast.content) {
+      this.compileAST(ast.content, ctx);
+    }
+  }
+  compileComment(ast: ASTComment, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    const isNewBlock = !block || forceNewBlock;
+    if (isNewBlock) {
+      block = this.createBlock(block, "block", ctx);
+      this.blocks.push(block);
+    }
+    const text = xmlDoc.createComment(ast.value);
+    block!.insert(text);
+    if (isNewBlock) {
+      this.insertBlock("", block!, ctx);
+    }
+  }
+
+  compileText(ast: ASTText, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    if (!block || forceNewBlock) {
+      block = this.createBlock(block, "text", ctx);
+      this.insertBlock(`text(\`${ast.value}\`)`, block, {
+        ...ctx,
+        forceNewBlock: forceNewBlock && !block,
+      });
+    } else {
+      const createFn = ast.type === ASTType.Text ? xmlDoc.createTextNode : xmlDoc.createComment;
+      block.insert(createFn.call(xmlDoc, ast.value));
+    }
+  }
+
+  generateHandlerCode(handler: string, event: string = ""): string {
+    let args: string = "";
+    const name: string = handler.replace(/\(.*\)/, function (_args) {
+      args = _args.slice(1, -1);
+      return "";
+    });
+    const isMethodCall = name.match(FNAMEREGEXP);
+    if (isMethodCall) {
+      let handlerFn: string;
+      if (args) {
+        const argId = this.generateId("arg");
+        this.addLine(`const ${argId} = [${compileExpr(args)}];`);
+        handlerFn = `'${name}', ${argId}`;
+      } else {
+        handlerFn = `'${name}'`;
+      }
+      return `[${event ? `\`${event}\`` + ", " : ""}ctx, ${handlerFn!}]`;
+    } else {
+      let code = this.captureExpression(handler);
+      code = `{const res = (() => { return ${code} })(); if (typeof res === 'function') { res(e) }}`;
+      let handlerFn = `(e) => ${code}`;
+      if (event) {
+        handlerFn = `[\`${event}\`, ${handlerFn}]`;
+      }
+      return handlerFn;
+    }
+  }
+
+  compileTDomNode(ast: ASTDomNode, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    const isNewBlock = !block || forceNewBlock;
+    let codeIdx = this.target.code.length;
+    if (isNewBlock) {
+      block = this.createBlock(block, "block", ctx);
+      this.blocks.push(block);
+    }
+
+    // attributes
+    const attrs: { [key: string]: string } = {};
+    for (let key in ast.attrs) {
+      if (key.startsWith("t-attf")) {
+        let expr = interpolate(ast.attrs[key]);
+        const idx = block!.insertData(expr);
+        attrs["block-attribute-" + idx] = key.slice(7);
+        // console.warn('ccc', staticAttrs)
+      } else if (key.startsWith("t-att")) {
+        let expr = compileExpr(ast.attrs[key]);
+        const idx = block!.insertData(expr);
+        if (key === "t-att") {
+          attrs[`block-attributes`] = String(idx);
+        } else {
+          attrs[`block-attribute-${idx}`] = key.slice(6);
+        }
+      } else {
+        attrs[key] = ast.attrs[key];
+      }
+    }
+
+    // event handlers
+    for (let ev in ast.on) {
+      const name = this.generateHandlerCode(ast.on[ev]);
+      const idx = block!.insertData(name);
+      attrs[`block-handler-${idx}`] = ev;
+    }
+
+    // t-ref
+    if (ast.ref) {
+      this.hasRef = true;
+      const isDynamic = INTERP_REGEXP.test(ast.ref);
+      if (isDynamic) {
+        const str = ast.ref.replace(
+          INTERP_REGEXP,
+          (expr) => "${" + this.captureExpression(expr.slice(2, -2)) + "}"
+        );
+        const idx = block!.insertData(`(el) => refs[\`${str}\`] = el`);
+        attrs["block-ref"] = String(idx);
+      } else {
+        const idx = block!.insertData(`(el) => refs[\`${ast.ref}\`] = el`);
+        attrs["block-ref"] = String(idx);
+      }
+    }
+
+    const dom = xmlDoc.createElement(ast.tag);
+    for (const [attr, val] of Object.entries(attrs)) {
+      if (!(attr === "class" && val === "")) {
+        dom.setAttribute(attr, val);
+      }
+    }
+    block!.insert(dom);
+    if (ast.content.length) {
+      const initialDom = block!.currentDom;
+      block!.currentDom = dom;
+      const children = ast.content;
+      for (let i = 0; i < children.length; i++) {
+        const child = ast.content[i];
+        const subCtx: Context = {
+          block: block,
+          index: block!.childNumber,
+          forceNewBlock: false,
+          isLast: ctx.isLast && i === children.length - 1,
+        };
+        this.compileAST(child, subCtx);
+      }
+      block!.currentDom = initialDom;
+    }
+
+    if (isNewBlock) {
+      this.insertBlock(`${block!.blockName}(ddd)`, block!, ctx)!;
+      // may need to rewrite code!
+      if (block!.children.length && block!.hasDynamicChildren) {
+        const code = this.target.code;
+        const children = block!.children.slice();
+        let current = children.shift();
+        for (let i = codeIdx; i < code.length; i++) {
+          if (code[i].trimStart().startsWith(`let ${current!.varName}`)) {
+            code[i] = code[i].replace(`let ${current!.varName}`, current!.varName);
+            current = children.shift();
+            if (!current) break;
+          }
+        }
+        this.target.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+      }
+    }
+  }
+
+  compileTEsc(ast: ASTTEsc, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    let expr: string;
+    if (ast.expr === "0") {
+      expr = `ctx[zero]`;
+    } else {
+      expr = compileExpr(ast.expr);
+      if (ast.defaultValue) {
+        expr = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+      }
+    }
+    if (!block || forceNewBlock) {
+      block = this.createBlock(block, "text", ctx);
+      this.insertBlock(`text(${expr})`, block, { ...ctx, forceNewBlock: forceNewBlock && !block });
+    } else {
+      const idx = block.insertData(expr);
+      const text = xmlDoc.createElement(`block-text-${idx}`);
+      block.insert(text);
+    }
+  }
+
+  compileTRaw(ast: ASTTRaw, ctx: Context) {
+    let { block } = ctx;
+    if (block) {
+      this.insertAnchor(block);
+    }
+    block = this.createBlock(block, "html", ctx);
+    let expr = ast.expr === "0" ? "ctx[zero]" : compileExpr(ast.expr);
+    if (ast.body) {
+      const nextId = BlockDescription.nextBlockId;
+      const subCtx: Context = { block: null, index: 0, forceNewBlock: true };
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      expr = `withDefault(${expr}, b${nextId})`;
+    }
+    this.insertBlock(`html(${expr})`, block, ctx);
+  }
+
+  compileTIf(ast: ASTTif, ctx: Context, nextNode?: ASTDomNode) {
+    let { block, forceNewBlock, index } = ctx;
+    let currentIndex = index;
+    const codeIdx = this.target.code.length;
+    const isNewBlock = !block || (block.type !== "multi" && forceNewBlock);
+    if (block) {
+      block.hasDynamicChildren = true;
+    }
+    if (!block || (block.type !== "multi" && forceNewBlock)) {
+      block = this.createBlock(block, "multi", ctx);
+    }
+    this.addLine(`if (${compileExpr(ast.condition)}) {`);
+    this.target.indentLevel++;
+    this.insertAnchor(block!);
+    const subCtx: Context = { block: block, index: currentIndex, forceNewBlock: true };
+    this.compileAST(ast.content, subCtx);
+    this.target.indentLevel--;
+    if (ast.tElif) {
+      for (let clause of ast.tElif) {
+        this.addLine(`} else if (${compileExpr(clause.condition)}) {`);
+        this.target.indentLevel++;
+        this.insertAnchor(block);
+        const subCtx: Context = {
+          block: block,
+          index: currentIndex,
+          forceNewBlock: true,
+        };
+        this.compileAST(clause.content, subCtx);
+        this.target.indentLevel--;
+      }
+    }
+    if (ast.tElse) {
+      this.addLine(`} else {`);
+      this.target.indentLevel++;
+      this.insertAnchor(block);
+      const subCtx: Context = {
+        block: block,
+        index: currentIndex,
+        forceNewBlock: true,
+      };
+      this.compileAST(ast.tElse, subCtx);
+      this.target.indentLevel--;
+    }
+    this.addLine("}");
+    if (isNewBlock) {
+      // note: this part is duplicated from end of compiledomnode:
+      if (block!.children.length) {
+        const code = this.target.code;
+        const children = block!.children.slice();
+        let current = children.shift();
+        for (let i = codeIdx; i < code.length; i++) {
+          if (code[i].trimStart().startsWith(`let ${current!.varName}`)) {
+            code[i] = code[i].replace(`let ${current!.varName}`, current!.varName);
+            current = children.shift();
+            if (!current) break;
+          }
+        }
+        this.target.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+      }
+
+      // note: this part is duplicated from end of compilemulti:
+      const args = block!.children.map((c) => c.varName).join(", ");
+      this.insertBlock(`multi([${args}])`, block!, ctx)!;
+    }
+  }
+
+  compileTForeach(ast: ASTTForEach, ctx: Context) {
+    let { block } = ctx;
+    if (block) {
+      this.insertAnchor(block);
+    }
+    block = this.createBlock(block, "list", ctx);
+    this.target.loopLevel++;
+    const loopVar = `i${this.target.loopLevel}`;
+    this.addLine(`ctx = Object.create(ctx);`);
+    // const cId = this.generateId();
+    const vals = `v${block.id}`;
+    const keys = `k${block.id}`;
+    const l = `l${block.id}`;
+    const c = `c${block.id}`;
+    this.addLine(
+      `const [${keys}, ${vals}, ${l}, ${c}] = prepareList(${compileExpr(ast.collection)});`
+    );
+    this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
+    this.target.indentLevel++;
+    this.addLine(`ctx[\`${ast.elem}\`] = ${vals}[${loopVar}];`);
+    if (!ast.hasNoFirst) {
+      this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
+    }
+    if (!ast.hasNoLast) {
+      this.addLine(`ctx[\`${ast.elem}_last\`] = ${loopVar} === ${vals}.length - 1;`);
+    }
+    if (!ast.hasNoIndex) {
+      this.addLine(`ctx[\`${ast.elem}_index\`] = ${loopVar};`);
+    }
+    if (!ast.hasNoValue) {
+      this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
+    }
+    this.addLine(`let key${this.target.loopLevel} = ${ast.key ? compileExpr(ast.key) : loopVar};`);
+    let id: string;
+    if (ast.memo) {
+      this.target.hasCache = true;
+      this.shouldDefineAssign = true;
+      id = this.generateId();
+      this.addLine(`let memo${id} = ${compileExpr(ast.memo)}`);
+      this.addLine(`let vnode${id} = cache[key${this.target.loopLevel}];`);
+      this.addLine(`if (vnode${id}) {`);
+      this.target.indentLevel++;
+      this.addLine(`if (shallowEqual(vnode${id}.memo, memo${id})) {`);
+      this.target.indentLevel++;
+      this.addLine(`${c}[${loopVar}] = vnode${id};`);
+      this.addLine(`nextCache[key${this.target.loopLevel}] = vnode${id};`);
+      this.addLine(`continue;`);
+      this.target.indentLevel--;
+      this.addLine("}");
+      this.target.indentLevel--;
+      this.addLine("}");
+    }
+
+    const subCtx: Context = {
+      block: block, //collectionBlock,
+      index: loopVar,
+      forceNewBlock: true,
+    };
+    this.compileAST(ast.body, subCtx);
+    if (!ast.key) {
+      console.warn(
+        `"Directive t-foreach should always be used with a t-key! (in template: '${this.templateName}')"`
+      );
+    }
+    if (ast.memo) {
+      this.addLine(
+        `nextCache[key${this.target.loopLevel}] = assign(${c}[${loopVar}], {memo: memo${id!}});`
+      );
+    }
+    this.target.indentLevel--;
+    this.target.loopLevel--;
+    this.addLine(`}`);
+    if (!ctx.isLast) {
+      this.addLine(`ctx = ctx.__proto__;`);
+    }
+    this.insertBlock("l", block, ctx);
+  }
+
+  compileTKey(ast: ASTTKey, ctx: Context) {
+    this.compileAST(ast.content, ctx);
+  }
+
+  compileMulti(ast: ASTMulti, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    const isNewBlock = !block || forceNewBlock;
+    let codeIdx = this.target.code.length;
+    if (isNewBlock) {
+      const n = ast.content.filter((c) => c.type !== ASTType.TSet).length;
+      if (n <= 1) {
+        for (let child of ast.content) {
+          this.compileAST(child, ctx);
+        }
+        return;
+      }
+      block = this.createBlock(block, "multi", ctx);
+    }
+    let index = 0;
+    for (let i = 0, l = ast.content.length; i < l; i++) {
+      const child = ast.content[i];
+      const isTSet = child.type === ASTType.TSet;
+      const subCtx: Context = {
+        block: block,
+        index: index,
+        forceNewBlock: !isTSet,
+        preventRoot: ctx.preventRoot,
+        isLast: ctx.isLast && i === l - 1,
+      };
+      this.compileAST(child, subCtx);
+      if (!isTSet) {
+        index++;
+      }
+    }
+    if (isNewBlock) {
+      if (block!.hasDynamicChildren) {
+        if (block!.children.length) {
+          const code = this.target.code;
+          const children = block!.children.slice();
+          let current = children.shift();
+          for (let i = codeIdx; i < code.length; i++) {
+            if (code[i].trimStart().startsWith(`let ${current!.varName}`)) {
+              code[i] = code[i].replace(`let ${current!.varName}`, current!.varName);
+              current = children.shift();
+              if (!current) break;
+            }
+          }
+          this.target.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+        }
+      }
+
+      const args = block!.children.map((c) => c.varName).join(", ");
+      this.insertBlock(`multi([${args}])`, block!, ctx)!;
+    }
+  }
+
+  compileTCall(ast: ASTTCall, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    // this.hasTCall = true;
+    if (ast.body) {
+      this.addLine(`ctx = Object.create(ctx);`);
+      const nextId = BlockDescription.nextBlockId;
+      const subCtx: Context = { block: null, index: 0, forceNewBlock: true, preventRoot: true };
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      if (nextId !== BlockDescription.nextBlockId) {
+        this.addLine(`ctx[zero] = b${nextId};`);
+      }
+    }
+    const isDynamic = INTERP_REGEXP.test(ast.name);
+    const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
+    if (block) {
+      if (!forceNewBlock) {
+        this.insertAnchor(block);
+      }
+    }
+    const key = `key + \`${this.generateComponentKey()}\``;
+    if (isDynamic) {
+      const templateVar = this.generateId("template");
+      this.addLine(`const ${templateVar} = ${subTemplate};`);
+      block = this.createBlock(block, "multi", ctx);
+      this.insertBlock(`call(${templateVar}, ctx, node, ${key})`, block!, {
+        ...ctx,
+        forceNewBlock: !block,
+      });
+    } else {
+      const id = this.generateId(`callTemplate_`);
+      this.staticCalls.push({ id, template: subTemplate });
+      // console.warn('coucoup', this.target.hasRoot)
+      block = this.createBlock(block, "multi", ctx);
+      this.insertBlock(`${id}(ctx, node, ${key})`, block!, { ...ctx, forceNewBlock: !block });
+    }
+    if (ast.body && !ctx.isLast) {
+      this.addLine(`ctx = ctx.__proto__;`);
+    }
+  }
+
+  compileTCallBlock(ast: ASTTCallBlock, ctx: Context) {
+    let { block, forceNewBlock } = ctx;
+    if (block) {
+      if (!forceNewBlock) {
+        this.insertAnchor(block);
+      }
+    }
+    block = this.createBlock(block, "multi", ctx);
+    this.insertBlock(compileExpr(ast.name), block, { ...ctx, forceNewBlock: !block });
+  }
+
+  compileTSet(ast: ASTTSet, ctx: Context) {
+    this.shouldProtectScope = true;
+    const expr = ast.value ? compileExpr(ast.value || "") : "null";
+    if (ast.body) {
+      const subCtx: Context = { block: null, index: 0, forceNewBlock: true };
+      const nextId = `b${BlockDescription.nextBlockId}`;
+      this.compileAST({ type: ASTType.Multi, content: ast.body }, subCtx);
+      const value = ast.value ? (nextId ? `withDefault(${expr}, ${nextId})` : expr) : nextId;
+      this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
+    } else {
+      let value: string;
+      if (ast.defaultValue) {
+        if (ast.value) {
+          value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+        } else {
+          value = `\`${ast.defaultValue}\``;
+        }
+      } else {
+        value = expr;
+      }
+      this.addLine(`ctx[\`${ast.name}\`] = ${value};`);
+    }
+  }
+
+  generateComponentKey() {
+    const parts = [this.generateId("__")];
+    for (let i = 0; i < this.target.loopLevel; i++) {
+      parts.push(`\${key${i + 1}}`);
+    }
+    return parts.join("__");
+  }
+
+  compileComponent(ast: ASTComponent, ctx: Context) {
+    let { block } = ctx;
+    let extraArgs: { [key: string]: string } = {};
+
+    // props
+    const props: string[] = [];
+    for (let p in ast.props) {
+      props.push(`${p}: ${compileExpr(ast.props[p]) || undefined}`);
+    }
+    const propString = `{${props.join(",")}}`;
+
+    // cmap key
+    const key = this.generateComponentKey();
+    let expr: string;
+    if (ast.isDynamic) {
+      expr = this.generateId("Comp");
+      this.addLine(`let ${expr} = ${compileExpr(ast.name)};`);
+    } else {
+      expr = `\`${ast.name}\``;
+    }
+    let blockArgs = `${expr}, ${propString}, key + \`${key}\`, node, ctx`;
+
+    // slots
+    const hasSlot = !!Object.keys(ast.slots).length;
+    let slotDef: string;
+    if (hasSlot) {
+      if (this.hasSafeContext === null) {
+        this.hasSafeContext = !this.template.includes("t-set") && !this.template.includes("t-call");
+      }
+      let ctxStr = "ctx";
+      if (this.target.loopLevel || !this.hasSafeContext) {
+        ctxStr = this.generateId("ctx");
+        this.addLine(`const ${ctxStr} = capture(ctx);`);
+      }
+      let slotStr: string[] = [];
+      const initialTarget = this.target;
+      for (let slotName in ast.slots) {
+        let name = this.generateId("slot");
+        const slot = new CodeTarget(name);
+        slot.signature = "ctx => (node, key) => {";
+        this.functions.push(slot);
+        this.target = slot;
+        const subCtx: Context = { block: null, index: 0, forceNewBlock: true };
+        this.compileAST(ast.slots[slotName], subCtx);
+        if (this.hasRef) {
+          slot.signature = "ctx => node => {";
+          slot.code.unshift(`  const refs = ctx.__owl__.refs`);
+          slotStr.push(`'${slotName}': ${name}(${ctxStr})`);
+        } else {
+          slotStr.push(`'${slotName}': ${name}(${ctxStr})`);
+        }
+      }
+      this.target = initialTarget;
+      slotDef = `{${slotStr.join(", ")}}`;
+      extraArgs.slots = slotDef;
+    }
+
+    // handlers
+    const hasHandlers = Object.keys(ast.handlers).length;
+    if (hasHandlers) {
+      const vars = Object.keys(ast.handlers).map((ev) => {
+        let id = this.generateId("h");
+        this.addLine(`let ${id} = ${this.generateHandlerCode(ast.handlers[ev], ev)};`);
+        return id;
+      });
+      extraArgs.handlers = `[${vars}]`;
+    }
+
+    if (block && ctx.forceNewBlock === false) {
+      // todo: check the forcenewblock condition
+      this.insertAnchor(block);
+    }
+    let blockExpr = `component(${blockArgs})`;
+    if (Object.keys(extraArgs).length) {
+      this.shouldDefineAssign = true;
+      const content = Object.keys(extraArgs).map((k) => `${k}: ${extraArgs[k]}`);
+      blockExpr = `assign(${blockExpr}, {${content.join(", ")}})`;
+    }
+    if (ast.isDynamic) {
+      blockExpr = `toggler(${expr}, ${blockExpr})`;
+    }
+    block = this.createBlock(block, "multi", ctx);
+    this.insertBlock(blockExpr, block, ctx);
+  }
+
+  compileTSlot(ast: ASTSlot, ctx: Context) {
+    let { block } = ctx;
+    let blockString: string;
+    let slotName;
+    let dynamic = false;
+    if (ast.name.match(INTERP_REGEXP)) {
+      dynamic = true;
+      slotName = interpolate(ast.name);
+    } else {
+      slotName = "'" + ast.name + "'";
+    }
+    if (ast.defaultContent) {
+      let name = this.generateId("defaultSlot");
+      const slot = new CodeTarget(name);
+      slot.signature = "ctx => {";
+      this.functions.push(slot);
+      const initialTarget = this.target;
+      const subCtx: Context = { block: null, index: 0, forceNewBlock: true };
+      this.target = slot;
+      this.compileAST(ast.defaultContent, subCtx);
+      this.target = initialTarget;
+      blockString = `callSlot(ctx, node, key, ${slotName}, ${name}, ${dynamic})`;
+    } else {
+      if (dynamic) {
+        let name = this.generateId("slot");
+        this.addLine(`const ${name} = ${slotName};`);
+        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}))`;
+      } else {
+        blockString = `callSlot(ctx, node, key, ${slotName})`;
+      }
+    }
+    if (block) {
+      this.insertAnchor(block);
+    }
+    block = this.createBlock(block, "multi", ctx);
+    this.insertBlock(blockString, block, { ...ctx, forceNewBlock: false });
+  }
+}

src/qweb/extensions.ts

@@ -1,377 +0,0 @@
-import { STATUS } from "../component/component";
-import { VNode } from "../vdom/index";
-import { INTERP_REGEXP } from "./compilation_context";
-import { QWeb } from "./qweb";
-import { browser } from "../browser";
-
-/**
- * Owl QWeb Extensions
- *
- * This file contains the implementation of non standard QWeb directives, added
- * by Owl and that will only work on Owl projects:
- *
- * - t-on
- * - t-ref
- * - t-transition
- * - t-mounted
- * - t-slot
- * - t-model
- */
-
-//------------------------------------------------------------------------------
-// t-on
-//------------------------------------------------------------------------------
-// these are pieces of code that will be injected into the event handler if
-// modifiers are specified
-export const MODS_CODE = {
-  prevent: "e.preventDefault();",
-  self: "if (e.target !== this.elm) {return}",
-  stop: "e.stopPropagation();",
-};
-
-interface HandlerInfo {
-  event: string;
-  handler: string;
-}
-
-const FNAMEREGEXP = /^[$A-Z_][0-9A-Z_$]*$/i;
-
-export function makeHandlerCode(
-  ctx,
-  fullName,
-  value,
-  putInCache: boolean,
-  modcodes = MODS_CODE
-): HandlerInfo {
-  let [event, ...mods] = fullName.slice(5).split(".");
-  if (mods.includes("capture")) {
-    event = "!" + event;
-  }
-  if (!event) {
-    throw new Error("Missing event name with t-on directive");
-  }
-  let code: string;
-  // check if it is a method with no args, a method with args or an expression
-  let args: string = "";
-  const name: string = value.replace(/\(.*\)/, function (_args) {
-    args = _args.slice(1, -1);
-    return "";
-  });
-  const isMethodCall = name.match(FNAMEREGEXP);
-
-  // then generate code
-  if (isMethodCall) {
-    ctx.rootContext.shouldDefineUtils = true;
-    const comp = `utils.getComponent(context)`;
-    if (args) {
-      const argId = ctx.generateID();
-      ctx.addLine(`let args${argId} = [${ctx.formatExpression(args)}];`);
-      code = `${comp}['${name}'](...args${argId}, e);`;
-      putInCache = false;
-    } else {
-      code = `${comp}['${name}'](e);`;
-    }
-  } else {
-    // if we get here, then it is an expression
-    // we need to capture every variable in it
-    putInCache = false;
-    code = ctx.captureExpression(value);
-    code = `const res = (() => { return ${code} })(); if (typeof res === 'function') { res(e) }`;
-  }
-  const modCode = mods.map((mod) => modcodes[mod]).join("");
-  let handler = `function (e) {if (context.__owl__.status === ${STATUS.DESTROYED}){return}${modCode}${code}}`;
-  if (putInCache) {
-    const key = ctx.generateTemplateKey(event);
-    ctx.addLine(`extra.handlers[${key}] = extra.handlers[${key}] || ${handler};`);
-    handler = `extra.handlers[${key}]`;
-  }
-  return { event, handler };
-}
-
-QWeb.addDirective({
-  name: "on",
-  priority: 90,
-  atNodeCreation({ ctx, fullName, value, nodeID }) {
-    const { event, handler } = makeHandlerCode(ctx, fullName, value, true);
-    ctx.addLine(`p${nodeID}.on['${event}'] = ${handler};`);
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-ref
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "ref",
-  priority: 95,
-  atNodeCreation({ ctx, value, addNodeHook }) {
-    ctx.rootContext.shouldDefineRefs = true;
-    const refKey = `ref${ctx.generateID()}`;
-    ctx.addLine(`const ${refKey} = ${ctx.interpolate(value)};`);
-    addNodeHook("create", `context.__owl__.refs[${refKey}] = n.elm;`);
-    addNodeHook("destroy", `delete context.__owl__.refs[${refKey}];`);
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-transition
-//------------------------------------------------------------------------------
-QWeb.utils.nextFrame = function (cb: () => void) {
-  requestAnimationFrame(() => requestAnimationFrame(cb));
-};
-
-QWeb.utils.transitionInsert = function (vn: VNode, name: string) {
-  const elm = <HTMLElement>vn.elm;
-  // remove potential duplicated vnode that is currently being removed, to
-  // prevent from having twice the same node in the DOM during an animation
-  const dup = elm.parentElement && elm.parentElement!.querySelector(`*[data-owl-key='${vn.key}']`);
-  if (dup) {
-    dup.remove();
-  }
-
-  elm.classList.add(name + "-enter");
-  elm.classList.add(name + "-enter-active");
-  elm.classList.remove(name + "-leave-active");
-  elm.classList.remove(name + "-leave-to");
-  const finalize = () => {
-    elm.classList.remove(name + "-enter-active");
-    elm.classList.remove(name + "-enter-to");
-  };
-  this.nextFrame(() => {
-    elm.classList.remove(name + "-enter");
-    elm.classList.add(name + "-enter-to");
-    whenTransitionEnd(elm, finalize);
-  });
-};
-
-QWeb.utils.transitionRemove = function (vn: VNode, name: string, rm: () => void) {
-  const elm = <HTMLElement>vn.elm;
-  elm.setAttribute("data-owl-key", vn.key!);
-
-  elm.classList.add(name + "-leave");
-  elm.classList.add(name + "-leave-active");
-  const finalize = () => {
-    if (!elm.classList.contains(name + "-leave-active")) {
-      return;
-    }
-    elm.classList.remove(name + "-leave-active");
-    elm.classList.remove(name + "-leave-to");
-    rm();
-  };
-  this.nextFrame(() => {
-    elm.classList.remove(name + "-leave");
-    elm.classList.add(name + "-leave-to");
-    whenTransitionEnd(elm, finalize);
-  });
-};
-
-function getTimeout(delays: Array<string>, durations: Array<string>): number {
-  /* istanbul ignore next */
-  while (delays.length < durations.length) {
-    delays = delays.concat(delays);
-  }
-
-  return Math.max.apply(
-    null,
-    durations.map((d, i) => {
-      return toMs(d) + toMs(delays[i]);
-    })
-  );
-}
-
-// Old versions of Chromium (below 61.0.3163.100) formats floating pointer numbers
-// in a locale-dependent way, using a comma instead of a dot.
-// If comma is not replaced with a dot, the input will be rounded down (i.e. acting
-// as a floor function) causing unexpected behaviors
-function toMs(s: string): number {
-  return Number(s.slice(0, -1).replace(",", ".")) * 1000;
-}
-
-function whenTransitionEnd(elm: HTMLElement, cb) {
-  if (!elm.parentNode) {
-    // if we get here, this means that the element was removed for some other
-    // reasons, and in that case, we don't want to work on animation since nothing
-    // will be displayed anyway.
-    return;
-  }
-
-  const styles = window.getComputedStyle(elm);
-  const delays: Array<string> = (styles.transitionDelay || "").split(", ");
-  const durations: Array<string> = (styles.transitionDuration || "").split(", ");
-  const timeout: number = getTimeout(delays, durations);
-  if (timeout > 0) {
-    const transitionEndCB = () => {
-      if (!elm.parentNode) return;
-      cb();
-      browser.clearTimeout(fallbackTimeout);
-      elm.removeEventListener("transitionend", transitionEndCB);
-    };
-    elm.addEventListener("transitionend", transitionEndCB, { once: true });
-    const fallbackTimeout = browser.setTimeout(transitionEndCB, timeout + 1);
-  } else {
-    cb();
-  }
-}
-
-QWeb.addDirective({
-  name: "transition",
-  priority: 96,
-  atNodeCreation({ ctx, value, addNodeHook }) {
-    if (!QWeb.enableTransitions) {
-      return;
-    }
-    ctx.rootContext.shouldDefineUtils = true;
-    let name = value;
-    const hooks = {
-      insert: `utils.transitionInsert(vn, '${name}');`,
-      remove: `utils.transitionRemove(vn, '${name}', rm);`,
-    };
-    for (let hookName in hooks) {
-      addNodeHook(hookName, hooks[hookName]);
-    }
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-slot
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "slot",
-  priority: 80,
-  atNodeEncounter({ ctx, value, node, qweb }): boolean {
-    const slotKey = ctx.generateID();
-    const valueExpr = value.match(INTERP_REGEXP) ? ctx.interpolate(value) : `'${value}'`;
-    ctx.addLine(
-      `const slot${slotKey} = this.constructor.slots[context.__owl__.slotId + '_' + ${valueExpr}];`
-    );
-    ctx.addIf(`slot${slotKey}`);
-    let parentNode = `c${ctx.parentNode}`;
-    if (!ctx.parentNode) {
-      ctx.rootContext.shouldDefineResult = true;
-      ctx.rootContext.shouldDefineUtils = true;
-      parentNode = `children${ctx.generateID()}`;
-      ctx.addLine(`let ${parentNode}= []`);
-      ctx.addLine(`result = {}`);
-    }
-    ctx.addLine(
-      `slot${slotKey}.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: ${parentNode}, parent: extra.parent || context}));`
-    );
-    if (!ctx.parentNode) {
-      ctx.addLine(`utils.defineProxy(result, ${parentNode}[0]);`);
-    }
-    if (node.hasChildNodes()) {
-      ctx.addElse();
-      const nodeCopy = <Element>node.cloneNode(true);
-      nodeCopy.removeAttribute("t-slot");
-      qweb._compileNode(nodeCopy, ctx);
-    }
-    ctx.closeIf();
-    return true;
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-model
-//------------------------------------------------------------------------------
-QWeb.utils.toNumber = function (val: string): number | string {
-  const n = parseFloat(val);
-  return isNaN(n) ? val : n;
-};
-
-const hasDotAtTheEnd = /\.[\w_]+\s*$/;
-const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
-
-QWeb.addDirective({
-  name: "model",
-  priority: 42,
-  atNodeCreation({ ctx, nodeID, value, node, fullName, addNodeHook }) {
-    const type = node.getAttribute("type");
-    let handler;
-    let event = fullName.includes(".lazy") ? "change" : "input";
-
-    // First step: we need to understand the structure of the expression, and
-    // from it, extract a base expression (that we can capture, which is
-    // important because it will be used in a handler later) and a formatted
-    // expression (which uses the captured base expression)
-    //
-    // Also, we support 2 kinds of values: some.expr.value or some.expr[value]
-    // For the first one, we have:
-    // - base expression = scope[some].expr
-    // - expression = exprX.value (where exprX is the var that captures the base expr)
-    // and for the expression with brackets:
-    // - base expression = scope[some].expr
-    // - expression = exprX[keyX] (where exprX is the var that captures the base expr
-    //        and keyX captures scope[value])
-    let expr: string;
-    let baseExpr: string;
-
-    if (hasDotAtTheEnd.test(value)) {
-      // we manage the case where the expr has a dot: some.expr.value
-      const index = value.lastIndexOf(".");
-      baseExpr = value.slice(0, index);
-      ctx.addLine(`let expr${nodeID} = ${ctx.formatExpression(baseExpr)};`);
-      expr = `expr${nodeID}${value.slice(index)}`;
-    } else if (hasBracketsAtTheEnd.test(value)) {
-      // we manage here the case where the expr ends in a bracket expression:
-      //    some.expr[value]
-      const index = value.lastIndexOf("[");
-      baseExpr = value.slice(0, index);
-      ctx.addLine(`let expr${nodeID} = ${ctx.formatExpression(baseExpr)};`);
-      let exprKey = value.trimRight().slice(index + 1, -1);
-      ctx.addLine(`let exprKey${nodeID} = ${ctx.formatExpression(exprKey)};`);
-      expr = `expr${nodeID}[exprKey${nodeID}]`;
-    } else {
-      throw new Error(`Invalid t-model expression: "${value}" (it should be assignable)`);
-    }
-
-    const key = ctx.generateTemplateKey();
-    if (node.tagName === "select") {
-      ctx.addLine(`p${nodeID}.props = {value: ${expr}};`);
-      addNodeHook("create", `n.elm.value=${expr};`);
-      event = "change";
-      handler = `(ev) => {${expr} = ev.target.value}`;
-    } else if (type === "checkbox") {
-      ctx.addLine(`p${nodeID}.props = {checked: ${expr}};`);
-      handler = `(ev) => {${expr} = ev.target.checked}`;
-    } else if (type === "radio") {
-      const nodeValue = node.getAttribute("value")!;
-      ctx.addLine(`p${nodeID}.props = {checked:${expr} === '${nodeValue}'};`);
-      handler = `(ev) => {${expr} = ev.target.value}`;
-      event = "click";
-    } else {
-      ctx.addLine(`p${nodeID}.props = {value: ${expr}};`);
-      const trimCode = fullName.includes(".trim") ? ".trim()" : "";
-      let valueCode = `ev.target.value${trimCode}`;
-      if (fullName.includes(".number")) {
-        ctx.rootContext.shouldDefineUtils = true;
-        valueCode = `utils.toNumber(${valueCode})`;
-      }
-      handler = `(ev) => {${expr} = ${valueCode}}`;
-    }
-    ctx.addLine(`extra.handlers[${key}] = extra.handlers[${key}] || (${handler});`);
-    ctx.addLine(`p${nodeID}.on['${event}'] = extra.handlers[${key}];`);
-  },
-});
-
-//------------------------------------------------------------------------------
-// t-key
-//------------------------------------------------------------------------------
-QWeb.addDirective({
-  name: "key",
-  priority: 45,
-  atNodeEncounter({ ctx, value, node }) {
-    if (ctx.loopNumber === 0) {
-      ctx.keyStack.push(ctx.rootContext.hasKey0);
-      ctx.rootContext.hasKey0 = true;
-    }
-    ctx.addLine("{");
-    ctx.indent();
-    ctx.addLine(`let key${ctx.loopNumber} = ${ctx.formatExpression(value)};`);
-  },
-  finalize({ ctx }) {
-    ctx.dedent();
-    ctx.addLine("}");
-    if (ctx.loopNumber === 0) {
-      ctx.rootContext.hasKey0 = ctx.keyStack.pop() as boolean;
-    }
-  },
-});

src/qweb/index.ts

@@ -1,4 +0,0 @@
-import "./base_directives";
-import "./extensions";
-
-export { CompiledTemplate, QWeb } from "./qweb";

src/qweb/inline_expressions.ts

@@ -25,11 +25,12 @@
 // 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 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 = Object.assign(Object.create(null), {
+const WORD_REPLACEMENT: { [key: string]: string } = Object.assign(Object.create(null), {
   and: "&&",
   or: "||",
   gt: ">",
@@ -117,7 +118,7 @@ let tokenizeString: Tokenizer = function (expr) {
     return {
       type: "TEMPLATE_STRING",
       value: s,
-      replace(replacer) {
+      replace(replacer: any) {
         return s.replace(/\$\{(.*?)\}/g, (match, group) => {
           return "${" + replacer(group) + "}";
         });
@@ -223,8 +224,9 @@ export function tokenize(expr: string): Token[] {
 // Expression "evaluator"
 //------------------------------------------------------------------------------
 
-const isLeftSeparator = (token) => token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
-const isRightSeparator = (token) =>
+const isLeftSeparator = (token: Token) =>
+  token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
+const isRightSeparator = (token: Token) =>
   token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
 
 /**
@@ -252,10 +254,9 @@ const isRightSeparator = (token) =>
  * 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, scope: { [key: string]: QWebVar }): Token[] {
-  scope = Object.create(scope);
+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 {
 
@@ -298,7 +299,7 @@ export function compileExprToArray(expr: string, scope: { [key: string]: QWebVar
       }
     }
     if (token.type === "TEMPLATE_STRING") {
-      token.value = token.replace((expr) => compileExpr(expr, scope));
+      token.value = token.replace!((expr: any) => compileExpr(expr));
     }
     if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
       if (token.type === "RIGHT_PAREN") {
@@ -306,22 +307,20 @@ export function compileExprToArray(expr: string, scope: { [key: string]: QWebVar
         while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
           if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
             tokens[j].value = tokens[j].originalValue!;
-            scope[tokens[j].value] = { id: tokens[j].value, expr: tokens[j].value };
+            localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
           }
           j--;
         }
       } else {
-        scope[token.value] = { id: token.value, expr: token.value };
+        localVars.add(token.value); //] = { id: token.value, expr: token.value };
       }
     }
 
     if (isVar) {
       token.varName = token.value;
-      if (token.value in scope && "id" in scope[token.value]) {
-        token.value = scope[token.value].expr!;
-      } else {
+      if (!localVars.has(token.value)) {
         token.originalValue = token.value;
-        token.value = `scope['${token.value}']`;
+        token.value = `ctx['${token.value}']`;
       }
     }
     i++;
@@ -329,8 +328,21 @@ export function compileExprToArray(expr: string, scope: { [key: string]: QWebVar
   return tokens;
 }
 
-export function compileExpr(expr: string, scope: { [key: string]: QWebVar }): string {
-  return compileExprToArray(expr, scope)
+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/qweb/parser.ts

@@ -0,0 +1,798 @@
+// -----------------------------------------------------------------------------
+// AST Type definition
+// -----------------------------------------------------------------------------
+
+export const enum ASTType {
+  Text,
+  Comment,
+  DomNode,
+  Multi,
+  TEsc,
+  TIf,
+  TSet,
+  TCall,
+  TRaw,
+  TForEach,
+  TKey,
+  TComponent,
+  TDebug,
+  TLog,
+  TSlot,
+  TCallBlock,
+}
+
+export interface ASTText {
+  type: ASTType.Text;
+  value: string;
+}
+
+export interface ASTComment {
+  type: ASTType.Comment;
+  value: string;
+}
+
+export interface ASTDomNode {
+  type: ASTType.DomNode;
+  tag: string;
+  attrs: { [key: string]: string };
+  content: AST[];
+  ref: string | null;
+  on: { [key: string]: string };
+}
+
+export interface ASTMulti {
+  type: ASTType.Multi;
+  content: AST[];
+}
+
+export interface ASTTEsc {
+  type: ASTType.TEsc;
+  expr: string;
+  defaultValue: string;
+}
+
+export interface ASTTRaw {
+  type: ASTType.TRaw;
+  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;
+  isOnlyChild: boolean;
+  hasNoComponent: boolean;
+  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;
+  props: { [name: string]: string };
+  handlers: { [event: string]: string };
+  slots: { [name: string]: AST };
+}
+
+export interface ASTSlot {
+  type: ASTType.TSlot;
+  name: 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 type AST =
+  | ASTText
+  | ASTComment
+  | ASTDomNode
+  | ASTMulti
+  | ASTTEsc
+  | ASTTif
+  | ASTTSet
+  | ASTTCall
+  | ASTTRaw
+  | ASTTForEach
+  | ASTTKey
+  | ASTComponent
+  | ASTSlot
+  | ASTTCallBlock
+  | ASTLog
+  | ASTDebug;
+
+// -----------------------------------------------------------------------------
+// Parser
+// -----------------------------------------------------------------------------
+interface ParsingContext {
+  inPreTag: boolean;
+}
+
+export function parse(xml: string): AST {
+  const template = `<t>${xml}</t>`;
+  const doc = parseXML(template);
+  const ctx = { inPreTag: false };
+  const ast = parseNode(doc.firstChild!, ctx);
+  if (!ast) {
+    return { type: ASTType.Text, value: "" };
+  }
+  return ast;
+}
+
+function parseNode(node: ChildNode, ctx: ParsingContext): AST | null {
+  if (!(node instanceof Element)) {
+    return parseTextCommentNode(node, ctx);
+  }
+  return (
+    parseTDebugLog(node, ctx) ||
+    parseTForEach(node, ctx) ||
+    parseTIf(node, ctx) ||
+    parseTCall(node, ctx) ||
+    parseTCallBlock(node, ctx) ||
+    parseTEscNode(node, ctx) ||
+    parseTKey(node, ctx) ||
+    parseTSlot(node, ctx) ||
+    parseTRawNode(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;
+  }
+  const children: AST[] = [];
+  for (let child of node.childNodes) {
+    const ast = parseNode(child, ctx);
+    if (ast) {
+      children.push(ast);
+    }
+  }
+  switch (children.length) {
+    case 0:
+      return null;
+    case 1:
+      return children[0];
+    default:
+      return {
+        type: ASTType.Multi,
+        content: children,
+      };
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Text and Comment Nodes
+// -----------------------------------------------------------------------------
+const lineBreakRE = /[\r\n]/;
+const whitespaceRE = /\s+/g;
+
+function parseTextCommentNode(node: ChildNode, ctx: ParsingContext): AST | null {
+  if (node.nodeType === 3) {
+    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 === 8) {
+    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
+// -----------------------------------------------------------------------------
+
+function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
+  if (node.tagName === "t") {
+    return null;
+  }
+  const children: AST[] = [];
+  if (node.tagName === "pre") {
+    ctx = { inPreTag: true };
+  }
+  let ref = null;
+  if (node.hasAttribute("t-ref")) {
+    ref = node.getAttribute("t-ref");
+    node.removeAttribute("t-ref");
+  }
+
+  for (let child of node.childNodes) {
+    const ast = parseNode(child, ctx);
+    if (ast) {
+      children.push(ast);
+    }
+  }
+
+  const attrs: ASTDomNode["attrs"] = {};
+  const on: ASTDomNode["on"] = {};
+
+  for (let attr of node.getAttributeNames()) {
+    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-") && !attr.startsWith("t-att")) {
+        throw new Error(`Unknown QWeb directive: '${attr}'`);
+      }
+      attrs[attr] = value;
+    }
+  }
+  if (children.length === 1 && children[0].type === ASTType.TForEach) {
+    children[0].isOnlyChild = true;
+  }
+  return {
+    type: ASTType.DomNode,
+    tag: node.tagName,
+    attrs,
+    on,
+    ref,
+    content: children,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// 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 && ast.type === ASTType.DomNode) {
+    return {
+      type: ASTType.DomNode,
+      tag: ast.tag,
+      attrs: ast.attrs,
+      on: ast.on,
+      ref,
+      content: [tesc],
+    };
+  }
+  if (ast && ast.type === ASTType.TComponent) {
+    return {
+      ...ast,
+      slots: { default: tesc },
+    };
+  }
+  return tesc;
+}
+
+// -----------------------------------------------------------------------------
+// t-raw
+// -----------------------------------------------------------------------------
+
+function parseTRawNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-raw")) {
+    return null;
+  }
+  const expr = node.getAttribute("t-raw")!;
+  node.removeAttribute("t-raw");
+
+  const tRaw: AST = { type: ASTType.TRaw, expr, body: null };
+  const ref = node.getAttribute("t-ref");
+  node.removeAttribute("t-ref");
+  const ast = parseNode(node, ctx);
+  if (!ast) {
+    return tRaw;
+  }
+  if (ast && ast.type === ASTType.DomNode) {
+    tRaw.body = ast.content.length ? ast.content : null;
+    return {
+      type: ASTType.DomNode,
+      tag: ast.tag,
+      attrs: ast.attrs,
+      on: ast.on,
+      ref,
+      content: [tRaw],
+    };
+  }
+
+  return tRaw;
+}
+
+// -----------------------------------------------------------------------------
+// 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");
+  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,
+    isOnlyChild: false,
+    hasNoComponent: hasNoComponent(body),
+    hasNoFirst,
+    hasNoLast,
+    hasNoIndex,
+    hasNoValue,
+  };
+}
+
+/**
+ * @returns true if we are sure the ast does not contain any component
+ */
+function hasNoComponent(ast: AST): boolean {
+  switch (ast.type) {
+    case ASTType.TComponent:
+    case ASTType.TRaw:
+    case ASTType.TCall:
+    case ASTType.TCallBlock:
+    case ASTType.TSlot:
+      return false;
+    case ASTType.TSet:
+    case ASTType.Text:
+    case ASTType.Comment:
+    case ASTType.TEsc:
+      return true;
+    case ASTType.TKey:
+      return hasNoComponent(ast.content);
+    case ASTType.TDebug:
+    case ASTType.TLog:
+      return ast.content ? hasNoComponent(ast.content) : true;
+    case ASTType.TForEach:
+      return ast.hasNoComponent;
+    case ASTType.Multi:
+    case ASTType.DomNode: {
+      for (let elem of ast.content) {
+        if (!hasNoComponent(elem)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    case ASTType.TIf: {
+      if (!hasNoComponent(ast.content)) {
+        return false;
+      }
+      if (ast.tElif) {
+        for (let elem of ast.tElif) {
+          if (!hasNoComponent(elem.content)) {
+            return false;
+          }
+        }
+      }
+      if (ast.tElse && !hasNoComponent(ast.tElse)) {
+        return false;
+      }
+      return true;
+    }
+  }
+}
+
+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: tcall },
+      };
+    }
+  }
+  const body: AST[] = [];
+  for (let child of node.childNodes) {
+    const ast = parseNode(child, ctx);
+    if (ast) {
+      body.push(ast);
+    }
+  }
+
+  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);
+  if (!content) {
+    throw new Error("hmmm");
+  }
+
+  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 = [];
+    for (let child of node.childNodes) {
+      let childAst = parseNode(child, ctx);
+      if (childAst) {
+        body.push(childAst);
+      }
+    }
+  }
+  return { type: ASTType.TSet, name, value, defaultValue, body };
+}
+
+// -----------------------------------------------------------------------------
+// Components
+// -----------------------------------------------------------------------------
+
+function parseComponent(node: Element, ctx: ParsingContext): AST | null {
+  let name = node.tagName;
+  const firstLetter = name[0];
+  let isDynamic = node.hasAttribute("t-component");
+
+  if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
+    return null;
+  }
+  if (isDynamic) {
+    name = node.getAttribute("t-component")!;
+    node.removeAttribute("t-component");
+  }
+
+  const props: ASTComponent["props"] = {};
+  const handlers: ASTComponent["handlers"] = {};
+  for (let name of node.getAttributeNames()) {
+    const value = node.getAttribute(name)!;
+    if (name.startsWith("t-on-")) {
+      handlers[name.slice(5)] = value;
+    } 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) {
+      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) {
+        slots[name] = slotAst;
+      }
+    }
+
+    // default slot
+    const defaultContent = parseChildNodes(clone, ctx);
+    if (defaultContent) {
+      slots.default = defaultContent;
+    }
+  }
+  return { type: ASTType.TComponent, name, isDynamic, props, handlers, slots };
+}
+
+// -----------------------------------------------------------------------------
+// Slots
+// -----------------------------------------------------------------------------
+
+function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-slot")) {
+    return null;
+  }
+  return {
+    type: ASTType.TSlot,
+    name: node.getAttribute("t-slot")!,
+    defaultContent: parseChildNodes(node, ctx),
+  };
+}
+
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+
+function parseChildNodes(node: Element, ctx: ParsingContext): AST | null {
+  const children: AST[] = [];
+  for (let child of node.childNodes) {
+    const childAst = parseNode(child, ctx);
+    if (childAst) {
+      children.push(childAst);
+    }
+  }
+  switch (children.length) {
+    case 0:
+      return null;
+    case 1:
+      return children[0];
+    default:
+      return { type: ASTType.Multi, content: children };
+  }
+}
+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);
+  }
+  let tbranch = doc.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"
+      );
+    }
+  }
+
+  return doc;
+}

src/qweb/qweb.ts

@@ -1,930 +0,0 @@
-import { EventBus } from "../core/event_bus";
-import { h, patch, VNode } from "../vdom/index";
-import { CompilationContext } from "./compilation_context";
-import { shallowEqual, escape } from "../utils";
-import { addNS } from "../vdom/vdom";
-
-/**
- * Owl QWeb Engine
- *
- * In this file, you will find a QWeb engine/template compiler.  It is the core
- * of how Owl component works.
- *
- * Briefly, Owl QWeb compiles XML templates into functions that output a virtual
- * DOM representation.
- *
- * We have here:
- * - a CompilationContext class, which is an internal object that contains all
- *   compilation specific information, while a template is being compiled.
- * - a QWeb class: this is the code of the QWeb compiler.
- *
- * Note that this file does not contain the implementation of the QWeb
- * directives (see qweb_directives.ts and qweb_extensions.ts).
- */
-
-//------------------------------------------------------------------------------
-// Types
-//------------------------------------------------------------------------------
-export type EvalContext = { [key: string]: any };
-export type CompiledTemplate = (context: EvalContext, extra: any) => VNode;
-
-interface Template {
-  elem: Element;
-  fn: CompiledTemplate;
-}
-
-interface CompilationInfo {
-  node: Element;
-  qweb: QWeb;
-  ctx: CompilationContext;
-  fullName: string;
-  value: string;
-}
-
-interface NodeCreationCompilationInfo extends CompilationInfo {
-  nodeID: number;
-  addNodeHook: Function;
-}
-
-export interface Directive {
-  name: string;
-  extraNames?: string[];
-  priority: number;
-  // if return true, then directive is fully applied and there is no need to
-  // keep processing node. Otherwise, we keep going.
-  atNodeEncounter?(info: CompilationInfo): boolean | void;
-  atNodeCreation?(info: NodeCreationCompilationInfo): void;
-  finalize?(info: CompilationInfo): void;
-}
-
-interface QWebConfig {
-  templates?: string;
-  translateFn?(text: string): string;
-}
-
-//------------------------------------------------------------------------------
-// Const/global stuff/helpers
-//------------------------------------------------------------------------------
-
-export const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
-
-const lineBreakRE = /[\r\n]/;
-const whitespaceRE = /\s+/g;
-const translationRE = /^(\s*)([\s\S]+?)(\s*)$/;
-
-const NODE_HOOKS_PARAMS = {
-  create: "(_, n)",
-  insert: "vn",
-  remove: "(vn, rm)",
-  destroy: "()",
-};
-
-interface Utils {
-  toClassObj(expr: any): Object;
-  shallowEqual(p1: Object, p2: Object): boolean;
-  [key: string]: any;
-}
-
-function isComponent(obj): boolean {
-  return obj && obj.hasOwnProperty("__owl__");
-}
-
-class VDomArray extends Array {
-  toString() {
-    return vDomToString(this);
-  }
-}
-
-function vDomToString(vdom: VNode[]): string {
-  return vdom
-    .map((vnode) => {
-      if (vnode.sel) {
-        const node = document.createElement(vnode.sel);
-        const result = patch(node, vnode);
-        return (<HTMLElement>result.elm).outerHTML;
-      } else {
-        return vnode.text;
-      }
-    })
-    .join("");
-}
-
-const UTILS: Utils = {
-  zero: Symbol("zero"),
-  toClassObj(expr) {
-    const result = {};
-    if (typeof expr === "string") {
-      // we transform here a list of classes into an object:
-      //  'hey you' becomes {hey: true, you: true}
-      expr = expr.trim();
-      if (!expr) {
-        return {};
-      }
-      let words = expr.split(/\s+/);
-      for (let i = 0; i < words.length; i++) {
-        result[words[i]] = true;
-      }
-      return result;
-    }
-    // this is already an object, but we may need to split keys:
-    // {'a b': true, 'a c': false} should become {a: true, b: true, c: false}
-    for (let key in expr) {
-      const value = expr[key];
-      const words = key.split(/\s+/);
-      for (let word of words) {
-        result[word] = result[word] || value;
-      }
-    }
-    return result;
-  },
-  /**
-   * This method combines the current context with the variables defined in a
-   * scope for use in a slot.
-   *
-   * The implementation is kind of tricky because we want to preserve the
-   * prototype chain structure of the cloned result. So we need to traverse the
-   * prototype chain, cloning each level respectively.
-   */
-  combine(context, scope) {
-    let clone = context;
-    const scopeStack = [];
-    while (!isComponent(scope)) {
-      scopeStack.push(scope);
-      scope = scope.__proto__;
-    }
-    while (scopeStack.length) {
-      let scope = scopeStack.pop();
-      clone = Object.create(clone);
-      Object.assign(clone, scope);
-    }
-    return clone;
-  },
-  shallowEqual,
-  addNameSpace(vnode) {
-    addNS(vnode.data, vnode.children, vnode.sel);
-  },
-  VDomArray,
-  vDomToString,
-  getComponent(obj) {
-    while (obj && !isComponent(obj)) {
-      obj = obj.__proto__;
-    }
-    return obj;
-  },
-  getScope(obj, property: string) {
-    const obj0 = obj;
-    while (
-      obj &&
-      !obj.hasOwnProperty(property) &&
-      !(obj.hasOwnProperty("__access_mode__") && obj.__access_mode__ === "ro")
-    ) {
-      const newObj = obj.__proto__;
-      if (!newObj || isComponent(newObj)) {
-        return obj0;
-      }
-      obj = newObj;
-    }
-    return obj;
-  },
-};
-
-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;
-}
-
-function escapeQuotes(str: string): string {
-  return str.replace(/\'/g, "\\'");
-}
-
-//------------------------------------------------------------------------------
-// QWeb rendering engine
-//------------------------------------------------------------------------------
-
-export class QWeb extends EventBus {
-  templates: { [name: string]: Template };
-  static utils = UTILS;
-  static components = Object.create(null);
-
-  static DIRECTIVE_NAMES: { [key: string]: 1 } = {
-    name: 1,
-    att: 1,
-    attf: 1,
-    translation: 1,
-    tag: 1,
-  };
-  static DIRECTIVES: Directive[] = [];
-
-  static TEMPLATES: { [name: string]: Template } = {};
-
-  static nextId: number = 1;
-
-  h = h;
-  // dev mode enables better error messages or more costly validations
-  static dev: boolean = false;
-  static enableTransitions: boolean = true;
-
-  // slots contains sub templates defined with t-set inside t-component nodes, and
-  // are meant to be used by the t-slot directive.
-  static slots = {};
-  static nextSlotId = 1;
-
-  // subTemplates are stored in two objects: a (local) mapping from a name to an
-  // id, and a (global) mapping from an id to the compiled function.  This is
-  // necessary to ensure that global templates can be called with more than one
-  // QWeb instance.
-  subTemplates: { [key: string]: number } = {};
-  static subTemplates: { [id: number]: Function } = {};
-
-  isUpdating: boolean = false;
-  translateFn?: QWebConfig["translateFn"];
-
-  constructor(config: QWebConfig = {}) {
-    super();
-    this.templates = Object.create(QWeb.TEMPLATES);
-    if (config.templates) {
-      this.addTemplates(config.templates);
-    }
-    if (config.translateFn) {
-      this.translateFn = config.translateFn;
-    }
-  }
-
-  static addDirective(directive: Directive) {
-    if (directive.name in QWeb.DIRECTIVE_NAMES) {
-      throw new Error(`Directive "${directive.name} already registered`);
-    }
-    QWeb.DIRECTIVES.push(directive);
-    QWeb.DIRECTIVE_NAMES[directive.name] = 1;
-    QWeb.DIRECTIVES.sort((d1, d2) => d1.priority - d2.priority);
-    if (directive.extraNames) {
-      directive.extraNames.forEach((n) => (QWeb.DIRECTIVE_NAMES[n] = 1));
-    }
-  }
-
-  static registerComponent(name: string, Component: any) {
-    if (QWeb.components[name]) {
-      throw new Error(`Component '${name}' has already been registered`);
-    }
-    QWeb.components[name] = Component;
-  }
-
-  /**
-   * Register globally a template.  All QWeb instances will obtain their
-   * templates from their own template map, and then, from the global static
-   * TEMPLATES property.
-   */
-  static registerTemplate(name: string, template: string) {
-    if (QWeb.TEMPLATES[name]) {
-      throw new Error(`Template '${name}' has already been registered`);
-    }
-    const qweb = new QWeb();
-    qweb.addTemplate(name, template);
-    QWeb.TEMPLATES[name] = qweb.templates[name];
-  }
-
-  /**
-   * Add a template to the internal template map.  Note that it is not
-   * immediately compiled.
-   */
-  addTemplate(name: string, xmlString: string, allowDuplicate?: boolean) {
-    if (allowDuplicate && name in this.templates) {
-      return;
-    }
-    const doc = parseXML(xmlString);
-    if (!doc.firstChild) {
-      throw new Error("Invalid template (should not be empty)");
-    }
-    this._addTemplate(name, <Element>doc.firstChild);
-  }
-
-  /**
-   * Load templates from a xml (as a string or xml document).  This will look up
-   * for the first <templates> tag, and will consider each child of this as a
-   * template, with the name given by the t-name attribute.
-   */
-  addTemplates(xmlstr: string | Document) {
-    if (!xmlstr) {
-      return;
-    }
-    const doc = typeof xmlstr === "string" ? parseXML(xmlstr) : xmlstr;
-    const templates = doc.getElementsByTagName("templates")[0];
-    if (!templates) {
-      return;
-    }
-    for (let elem of <any>templates.children) {
-      const name = elem.getAttribute("t-name");
-      this._addTemplate(name, elem);
-    }
-  }
-
-  _addTemplate(name: string, elem: Element) {
-    if (name in this.templates) {
-      throw new Error(`Template ${name} already defined`);
-    }
-    this._processTemplate(elem);
-    const template = {
-      elem,
-      fn: function (this: QWeb, context, extra) {
-        const compiledFunction = this._compile(name);
-        template.fn = compiledFunction;
-        return compiledFunction.call(this, context, extra);
-      },
-    };
-    this.templates[name] = template;
-  }
-
-  _processTemplate(elem: Element) {
-    let tbranch = elem.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 = function (name) {
-        return prevElem.getAttribute(name);
-      };
-      let nattr = function (name) {
-        return +!!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"
-        );
-      }
-    }
-  }
-  /**
-   * Render a template
-   *
-   * @param {string} name the template should already have been added
-   */
-  render(name: string, context: EvalContext = {}, extra: any = null): VNode {
-    const template = this.templates[name];
-    if (!template) {
-      throw new Error(`Template ${name} does not exist`);
-    }
-    return template.fn.call(this, context, extra);
-  }
-
-  /**
-   * Render a template to a html string.
-   *
-   * Note that this is more limited than the `render` method: it is not suitable
-   * to render a full component tree, since this is an asynchronous operation.
-   * This method can only render templates without components.
-   */
-  renderToString(name: string, context: EvalContext = {}, extra?: any): string {
-    const vnode = this.render(name, context, extra);
-    if (vnode.sel === undefined) {
-      return vnode.text!;
-    }
-    const node = document.createElement(vnode.sel);
-    const elem = patch(node, vnode).elm as HTMLElement;
-    function escapeTextNodes(node) {
-      if (node.nodeType === 3) {
-        node.textContent = escape(node.textContent);
-      }
-      for (let n of node.childNodes) {
-        escapeTextNodes(n);
-      }
-    }
-    escapeTextNodes(elem);
-    return elem.outerHTML;
-  }
-
-  /**
-   * Force all widgets connected to this QWeb instance to rerender themselves.
-   *
-   * This method is mostly useful for external code that want to modify the
-   * application in some cases.  For example, a router plugin.
-   */
-  forceUpdate() {
-    this.isUpdating = true;
-    Promise.resolve().then(() => {
-      if (this.isUpdating) {
-        this.isUpdating = false;
-        this.trigger("update");
-      }
-    });
-  }
-
-  _compile(
-    name: string,
-    options: {
-      elem?: Element;
-      hasParent?: boolean;
-      defineKey?: boolean;
-    } = {}
-  ): CompiledTemplate {
-    const elem = options.elem || this.templates[name].elem;
-    const isDebug = elem.attributes.hasOwnProperty("t-debug");
-    const ctx = new CompilationContext(name);
-    if (elem.tagName !== "t") {
-      ctx.shouldDefineResult = false;
-    }
-    if (options.hasParent) {
-      ctx.variables = Object.create(null);
-      ctx.parentNode = ctx.generateID();
-      ctx.allowMultipleRoots = true;
-      ctx.shouldDefineParent = true;
-      ctx.hasParentWidget = true;
-      ctx.shouldDefineResult = false;
-      ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
-      if (options.defineKey) {
-        ctx.addLine(`let key0 = extra.key || "";`);
-        ctx.hasKey0 = true;
-      }
-    }
-    this._compileNode(elem, ctx);
-
-    if (!options.hasParent) {
-      if (ctx.shouldDefineResult) {
-        ctx.addLine(`return result;`);
-      } else {
-        if (!ctx.rootNode) {
-          throw new Error(`A template should have one root node (${ctx.templateName})`);
-        }
-        ctx.addLine(`return vn${ctx.rootNode};`);
-      }
-    }
-
-    let code = ctx.generateCode();
-    const templateName = ctx.templateName.replace(/`/g, "'").slice(0, 200);
-    code.unshift(`    // Template name: "${templateName}"`);
-
-    let template;
-    try {
-      template = new Function("context, extra", code.join("\n")) as CompiledTemplate;
-    } catch (e) {
-      console.groupCollapsed(`Invalid Code generated by ${templateName}`);
-      console.warn(code.join("\n"));
-      console.groupEnd();
-      throw new Error(
-        `Invalid generated code while compiling template '${templateName}': ${e.message}`
-      );
-    }
-    if (isDebug) {
-      const tpl = this.templates[name];
-      if (tpl) {
-        const msg = `Template: ${tpl.elem.outerHTML}\nCompiled code:\n${template.toString()}`;
-        console.log(msg);
-      }
-    }
-    return template;
-  }
-
-  /**
-   * Generate code from an xml node
-   *
-   */
-  _compileNode(node: ChildNode, ctx: CompilationContext) {
-    if (!(node instanceof Element)) {
-      // this is a text node, there are no directive to apply
-      let text = node.textContent!;
-      if (!ctx.inPreTag) {
-        if (lineBreakRE.test(text) && !text.trim()) {
-          return;
-        }
-        text = text.replace(whitespaceRE, " ");
-      }
-      if (this.translateFn) {
-        if ((node.parentNode as any).getAttribute("t-translation") !== "off") {
-          const match = translationRE.exec(text);
-          text = match[1] + this.translateFn(match[2]) + match[3];
-        }
-      }
-      if (ctx.parentNode) {
-        if (node.nodeType === 3) {
-          ctx.addLine(`c${ctx.parentNode}.push({text: \`${text}\`});`);
-        } else if (node.nodeType === 8) {
-          ctx.addLine(`c${ctx.parentNode}.push(h('!', \`${text}\`));`);
-        }
-      } else if (ctx.parentTextNode) {
-        ctx.addLine(`vn${ctx.parentTextNode}.text += \`${text}\`;`);
-      } else {
-        // this is an unusual situation: this text node is the result of the
-        // template rendering.
-        let nodeID = ctx.generateID();
-        ctx.addLine(`let vn${nodeID} = {text: \`${text}\`};`);
-        ctx.addLine(`result = vn${nodeID};`);
-        ctx.rootContext.rootNode = nodeID;
-        ctx.rootContext.parentTextNode = nodeID;
-      }
-      return;
-    }
-
-    if (node.tagName !== "t" && node.hasAttribute("t-call")) {
-      const tCallNode = document.implementation.createDocument(
-        "http://www.w3.org/1999/xhtml",
-        "t",
-        null
-      ).documentElement;
-      tCallNode.setAttribute("t-call", node.getAttribute("t-call")!);
-      node.removeAttribute("t-call");
-      node.prepend(tCallNode);
-    }
-
-    const firstLetter = node.tagName[0];
-    if (firstLetter === firstLetter.toUpperCase()) {
-      // this is a component, we modify in place the xml document to change
-      // <SomeComponent ... /> to <SomeComponent t-component="SomeComponent" ... />
-      node.setAttribute("t-component", node.tagName);
-    } else if (node.tagName !== "t" && node.hasAttribute("t-component")) {
-      throw new Error(
-        `Directive 't-component' can only be used on <t> nodes (used on a <${node.tagName}>)`
-      );
-    }
-    const attributes = (<Element>node).attributes;
-
-    const validDirectives: {
-      directive: Directive;
-      value: string;
-      fullName: string;
-    }[] = [];
-
-    const finalizers: typeof validDirectives = [];
-
-    // maybe this is not optimal: we iterate on all attributes here, and again
-    // just after for each directive.
-    for (let i = 0; i < attributes.length; i++) {
-      let attrName = attributes[i].name;
-      if (attrName.startsWith("t-")) {
-        let dName = attrName.slice(2).split(/-|\./)[0];
-        if (!(dName in QWeb.DIRECTIVE_NAMES)) {
-          throw new Error(`Unknown QWeb directive: '${attrName}'`);
-        }
-        if (node.tagName !== "t" && (attrName === "t-esc" || attrName === "t-raw")) {
-          const tNode = document.implementation.createDocument(
-            "http://www.w3.org/1999/xhtml",
-            "t",
-            null
-          ).documentElement;
-          tNode.setAttribute(attrName, node.getAttribute(attrName)!);
-          for (let child of Array.from(node.childNodes)) {
-            tNode.appendChild(child);
-          }
-          node.appendChild(tNode);
-          node.removeAttribute(attrName);
-        }
-      }
-    }
-
-    const DIR_N = QWeb.DIRECTIVES.length;
-    const ATTR_N = attributes.length;
-    let withHandlers = false;
-    for (let i = 0; i < DIR_N; i++) {
-      let directive = QWeb.DIRECTIVES[i];
-      let fullName;
-      let value;
-      for (let j = 0; j < ATTR_N; j++) {
-        const name = attributes[j].name;
-        if (
-          name === "t-" + directive.name ||
-          name.startsWith("t-" + directive.name + "-") ||
-          name.startsWith("t-" + directive.name + ".")
-        ) {
-          fullName = name;
-          value = attributes[j].textContent;
-          validDirectives.push({ directive, value, fullName });
-          if (directive.name === "on" || directive.name === "model") {
-            withHandlers = true;
-          }
-        }
-      }
-    }
-
-    for (let { directive, value, fullName } of validDirectives) {
-      if (directive.finalize) {
-        finalizers.push({ directive, value, fullName });
-      }
-      if (directive.atNodeEncounter) {
-        const isDone = directive.atNodeEncounter({
-          node,
-          qweb: this,
-          ctx,
-          fullName,
-          value,
-        });
-        if (isDone) {
-          for (let { directive, value, fullName } of finalizers) {
-            directive.finalize!({ node, qweb: this, ctx, fullName, value });
-          }
-          return;
-        }
-      }
-    }
-
-    if (node.nodeName !== "t" || node.hasAttribute("t-tag")) {
-      let nodeHooks = {};
-      let addNodeHook = function (hook, handler) {
-        nodeHooks[hook] = nodeHooks[hook] || [];
-        nodeHooks[hook].push(handler);
-      };
-      if (node.tagName === "select" && node.hasAttribute("t-att-value")) {
-        const value = node.getAttribute("t-att-value");
-        let exprId = ctx.generateID();
-        ctx.addLine(`let expr${exprId} = ${ctx.formatExpression(value)};`);
-        let expr = `expr${exprId}`;
-        node.setAttribute("t-att-value", expr);
-        addNodeHook("create", `n.elm.value=${expr};`);
-      }
-      let nodeID = this._compileGenericNode(node, ctx, withHandlers);
-      ctx = ctx.withParent(nodeID);
-
-      for (let { directive, value, fullName } of validDirectives) {
-        if (directive.atNodeCreation) {
-          directive.atNodeCreation({
-            node,
-            qweb: this,
-            ctx,
-            fullName,
-            value,
-            nodeID,
-            addNodeHook,
-          });
-        }
-      }
-
-      if (Object.keys(nodeHooks).length) {
-        ctx.addLine(`p${nodeID}.hook = {`);
-        for (let hook in nodeHooks) {
-          ctx.addLine(`  ${hook}: ${NODE_HOOKS_PARAMS[hook]} => {`);
-          for (let handler of nodeHooks[hook]) {
-            ctx.addLine(`    ${handler}`);
-          }
-          ctx.addLine(`  },`);
-        }
-        ctx.addLine(`};`);
-      }
-    }
-    if (node.nodeName === "pre") {
-      ctx = ctx.subContext("inPreTag", true);
-    }
-
-    this._compileChildren(node, ctx);
-    // svg support
-    // we hadd svg namespace if it is a svg or if it is a g, but only if it is
-    // the root node.  This is the easiest way to support svg sub components:
-    // they need to have a g tag as root. Otherwise, we would need a complete
-    // list of allowed svg tags.
-    const shouldAddNS =
-      node.nodeName === "svg" || (node.nodeName === "g" && ctx.rootNode === ctx.parentNode);
-    if (shouldAddNS) {
-      ctx.rootContext.shouldDefineUtils = true;
-      ctx.addLine(`utils.addNameSpace(vn${ctx.parentNode});`);
-    }
-
-    for (let { directive, value, fullName } of finalizers) {
-      directive.finalize!({ node, qweb: this, ctx, fullName, value });
-    }
-  }
-
-  _compileGenericNode(
-    node: ChildNode,
-    ctx: CompilationContext,
-    withHandlers: boolean = true
-  ): number {
-    // nodeType 1 is generic tag
-    if (node.nodeType !== 1) {
-      throw new Error("unsupported node type");
-    }
-    const attributes = (<Element>node).attributes;
-    const attrs: string[] = [];
-    const props: string[] = [];
-    const tattrs: number[] = [];
-
-    function handleProperties(key, val) {
-      let isProp = false;
-      switch (node.nodeName) {
-        case "input":
-          let type = (<Element>node).getAttribute("type");
-          if (type === "checkbox" || type === "radio") {
-            if (key === "checked" || key === "indeterminate") {
-              isProp = true;
-            }
-          }
-          if (key === "value" || key === "readonly" || key === "disabled") {
-            isProp = true;
-          }
-          break;
-        case "option":
-          isProp = key === "selected" || key === "disabled";
-          break;
-        case "textarea":
-          isProp = key === "readonly" || key === "disabled" || key === "value";
-          break;
-        case "select":
-          isProp = key === "disabled" || key === "value";
-          break;
-        case "button":
-        case "optgroup":
-          isProp = key === "disabled";
-          break;
-      }
-      if (isProp) {
-        props.push(`${key}: ${val}`);
-      }
-    }
-    let classObj = "";
-
-    for (let i = 0; i < attributes.length; i++) {
-      let name = attributes[i].name;
-      let value = attributes[i].textContent!;
-
-      if (this.translateFn && TRANSLATABLE_ATTRS.includes(name)) {
-        value = this.translateFn(value);
-      }
-
-      // regular attributes
-      if (!name.startsWith("t-") && !(<Element>node).getAttribute("t-attf-" + name)) {
-        const attID = ctx.generateID();
-        if (name === "class") {
-          if ((value = value.trim())) {
-            let classDef = value
-              .split(/\s+/)
-              .map((a) => `'${escapeQuotes(a)}':true`)
-              .join(",");
-            if (classObj) {
-              ctx.addLine(`Object.assign(${classObj}, {${classDef}})`);
-            } else {
-              classObj = `_${ctx.generateID()}`;
-              ctx.addLine(`let ${classObj} = {${classDef}};`);
-            }
-          }
-        } else {
-          ctx.addLine(`let _${attID} = '${escapeQuotes(value)}';`);
-          if (!name.match(/^[a-zA-Z]+$/)) {
-            // attribute contains 'non letters' => we want to quote it
-            name = '"' + name + '"';
-          }
-          attrs.push(`${name}: _${attID}`);
-          handleProperties(name, `_${attID}`);
-        }
-      }
-
-      // dynamic attributes
-      if (name.startsWith("t-att-")) {
-        let attName = name.slice(6);
-        const v = ctx.getValue(value);
-        let formattedValue = typeof v === "string" ? ctx.formatExpression(v) : `scope.${v.id}`;
-
-        if (attName === "class") {
-          ctx.rootContext.shouldDefineUtils = true;
-          formattedValue = `utils.toClassObj(${formattedValue})`;
-          if (classObj) {
-            ctx.addLine(`Object.assign(${classObj}, ${formattedValue})`);
-          } else {
-            classObj = `_${ctx.generateID()}`;
-            ctx.addLine(`let ${classObj} = ${formattedValue};`);
-          }
-        } else {
-          const attID = ctx.generateID();
-          if (!attName.match(/^[a-zA-Z]+$/)) {
-            // attribute contains 'non letters' => we want to quote it
-            attName = '"' + attName + '"';
-          }
-          // we need to combine dynamic with non dynamic attributes:
-          // class="a" t-att-class="'yop'" should be rendered as class="a yop"
-          const attValue = (<Element>node).getAttribute(attName);
-          if (attValue) {
-            const attValueID = ctx.generateID();
-            ctx.addLine(`let _${attValueID} = ${formattedValue};`);
-            formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
-            const attrIndex = attrs.findIndex((att) => att.startsWith(attName + ":"));
-            attrs.splice(attrIndex, 1);
-          }
-          if (node.nodeName === "select" && attName === "value") {
-            attrs.push(`${attName}: ${v}`);
-            handleProperties(attName, v);
-          } else {
-            ctx.addLine(`let _${attID} = ${formattedValue};`);
-            attrs.push(`${attName}: _${attID}`);
-            handleProperties(attName, "_" + attID);
-          }
-        }
-      }
-
-      if (name.startsWith("t-attf-")) {
-        let attName = name.slice(7);
-        if (!attName.match(/^[a-zA-Z]+$/)) {
-          // attribute contains 'non letters' => we want to quote it
-          attName = '"' + attName + '"';
-        }
-        const formattedExpr = ctx.interpolate(value);
-        const attID = ctx.generateID();
-        let staticVal = (<Element>node).getAttribute(attName);
-        if (staticVal) {
-          ctx.addLine(`let _${attID} = '${staticVal} ' + ${formattedExpr};`);
-        } else {
-          ctx.addLine(`let _${attID} = ${formattedExpr};`);
-        }
-        attrs.push(`${attName}: _${attID}`);
-      }
-
-      // t-att= attributes
-      if (name === "t-att") {
-        let id = ctx.generateID();
-        ctx.addLine(`let _${id} = ${ctx.formatExpression(value!)};`);
-        tattrs.push(id);
-      }
-    }
-    let nodeID = ctx.generateID();
-    let key = ctx.loopNumber || ctx.hasKey0 ? `\`\${key${ctx.loopNumber}}_${nodeID}\`` : nodeID;
-    const parts = [`key:${key}`];
-    if (attrs.length + tattrs.length > 0) {
-      parts.push(`attrs:{${attrs.join(",")}}`);
-    }
-    if (props.length > 0) {
-      parts.push(`props:{${props.join(",")}}`);
-    }
-    if (classObj) {
-      parts.push(`class:${classObj}`);
-    }
-    if (withHandlers) {
-      parts.push(`on:{}`);
-    }
-
-    ctx.addLine(`let c${nodeID} = [], p${nodeID} = {${parts.join(",")}};`);
-    for (let id of tattrs) {
-      ctx.addIf(`_${id} instanceof Array`);
-      ctx.addLine(`p${nodeID}.attrs[_${id}[0]] = _${id}[1];`);
-      ctx.addElse();
-      ctx.addLine(`for (let key in _${id}) {`);
-      ctx.indent();
-      ctx.addLine(`p${nodeID}.attrs[key] = _${id}[key];`);
-      ctx.dedent();
-      ctx.addLine(`}`);
-      ctx.closeIf();
-    }
-    let nodeName = `'${node.nodeName}'`;
-    if ((<Element>node).hasAttribute("t-tag")) {
-      const tagExpr = (<Element>node).getAttribute("t-tag");
-      (<Element>node).removeAttribute("t-tag");
-      nodeName = `tag${ctx.generateID()}`;
-      ctx.addLine(`let ${nodeName} = ${ctx.formatExpression(tagExpr)};`);
-    }
-    ctx.addLine(`let vn${nodeID} = h(${nodeName}, p${nodeID}, c${nodeID});`);
-    if (ctx.parentNode) {
-      ctx.addLine(`c${ctx.parentNode}.push(vn${nodeID});`);
-    } else if (ctx.loopNumber || ctx.hasKey0) {
-      ctx.rootContext.shouldDefineResult = true;
-      ctx.addLine(`result = vn${nodeID};`);
-    }
-
-    return nodeID;
-  }
-
-  _compileChildren(node: ChildNode, ctx: CompilationContext) {
-    if (node.childNodes.length > 0) {
-      for (let child of Array.from(node.childNodes)) {
-        this._compileNode(child, ctx);
-      }
-    }
-  }
-}

src/qweb/template_helpers.ts

@@ -0,0 +1,129 @@
+// import { compileTemplate, Template } from "./qweb/index";
+import { BDom, createBlock, html, list, multi, text, toggler } from "../blockdom";
+import { component } from "../component/component_node";
+import { Template, compileTemplate } from "./compiler";
+
+const bdom = { text, createBlock, list, multi, html, toggler, component };
+
+export const globalTemplates: { [key: string]: string } = {};
+
+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,
+  defaultSlot?: (ctx: any, key: string) => BDom,
+  dynamic?: boolean
+): BDom | null {
+  const slots = ctx.__owl__.slots;
+  const slotFn = slots[name];
+  const slotBDom = slotFn ? slotFn(parent, key) : null;
+  if (defaultSlot) {
+    let child1: BDom | undefined = undefined;
+    let child2: BDom | undefined = undefined;
+    // const result = new BMulti(2);
+    if (slotBDom) {
+      child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+    } else {
+      child2 = defaultSlot(parent, key);
+    }
+    return multi([child1, child2]);
+  }
+  return slotBDom;
+}
+
+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)];
+}
+export const UTILS = {
+  // elem,
+  // setText,
+  withDefault,
+  zero: Symbol("zero"),
+  callSlot,
+  capture,
+  // toClassObj,
+  withKey,
+  prepareList,
+  shallowEqual,
+};
+
+export class TemplateSet {
+  rawTemplates: { [name: string]: string } = Object.create(globalTemplates);
+  templates: { [name: string]: Template } = {};
+  utils: typeof UTILS;
+
+  constructor() {
+    const call = (subTemplate: string, ctx: any, parent: any) => {
+      const template = this.getTemplate(subTemplate);
+      return toggler(subTemplate, template(ctx, parent));
+    };
+
+    const getTemplate = (name: string) => this.getTemplate(name);
+    this.utils = Object.assign({}, UTILS, { getTemplate, call });
+  }
+
+  addTemplate(name: string, template: string, options: { allowDuplicate?: boolean } = {}) {
+    if (name in this.rawTemplates && !options.allowDuplicate) {
+      throw new Error(`Template ${name} already defined`);
+    }
+    this.rawTemplates[name] = template;
+  }
+
+  getTemplate(name: string): Template {
+    if (!(name in this.templates)) {
+      const rawTemplate = this.rawTemplates[name];
+      if (rawTemplate === undefined) {
+        throw new Error(`Missing template: "${name}"`);
+      }
+      const templateFn = compileTemplate(rawTemplate, name);
+
+      // first add a function to lazily get the template, in case there is a
+      // recursive call to the template name
+      this.templates[name] = (context, parent) => this.templates[name](context, parent);
+      const template = templateFn(bdom, this.utils);
+      this.templates[name] = template;
+    }
+    return this.templates[name];
+  }
+}
+
+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;
+}

src/reactivity.ts

@@ -0,0 +1,144 @@
+import { getCurrent } from "./component/component_node";
+
+export function useState<T>(state: T): T {
+  const node = getCurrent()!;
+  return observe(state, () => node.render());
+}
+
+type CB = () => void;
+const observers: WeakMap<any, PSet<CB>> = new WeakMap();
+
+/**
+ * PSet (for Prototypal Set) are sets that can lookup in their "parent sets", if
+ * any.
+ */
+
+class PSet<T> extends Set<T> {
+  parent?: PSet<T>;
+
+  static createChild<T>(parent: PSet<T>): PSet<T> {
+    const pset: PSet<T> = new PSet();
+    pset.parent = parent;
+    return pset;
+  }
+
+  has(key: T): boolean {
+    if (super.has(key)) {
+      return true;
+    }
+    return this.parent ? this.parent.has(key) : false;
+  }
+
+  *[Symbol.iterator](): Generator<T> {
+    let iterator = super[Symbol.iterator]();
+    for (let elem of iterator) {
+      yield elem;
+    }
+    if (this.parent) {
+      for (let elem of this.parent) {
+        yield elem;
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+
+export function observe<T>(value: T, cb: CB): T {
+  if (isNotObservable(value)) {
+    return value;
+  }
+  if (observers.has(value)) {
+    const callbacks = observers.get(value)!;
+    callbacks.add(cb);
+    return value;
+  }
+  const callbacks: PSet<CB> = new PSet();
+  callbacks.add(cb);
+  return observeValue(value, callbacks);
+}
+
+export function unobserve<T>(value: T, cb: () => void) {
+  if (isNotObservable(value)) {
+    return;
+  }
+  if (observers.has(value)) {
+    const callbacks = observers.get(value)!;
+    callbacks.delete(cb);
+  }
+}
+
+function isNotObservable(value: any): boolean {
+  return (
+    value === null || typeof value !== "object" || value instanceof Date || value instanceof Promise
+  );
+}
+
+/**
+ * value should
+ * 1. be observable
+ * 2. not yet be observed
+ */
+function observeValue(value: any, callbacks: PSet<CB>): any {
+  const proxy = new Proxy(value as any, {
+    get(target: any, key: any): any {
+      const current = target[key];
+      if (isNotObservable(current)) {
+        return current;
+      }
+      if (observers.has(current)) {
+        // this is wrong ?
+        observers.get(current)!.parent = callbacks;
+        return current;
+      }
+      const subCallbacks = PSet.createChild(callbacks);
+      const subValue = observeValue(current, subCallbacks);
+      target[key] = subValue;
+      return subValue;
+    },
+    set(target: any, key: any, value: any): boolean {
+      // TODO: check if current !== target or proxy ??
+      const current = target[key];
+      if (current !== value) {
+        if (isNotObservable(value)) {
+          target[key] = value;
+        } else {
+          // TODO: test following scenario:
+          // 1. obj1 = observer({a:1}, somecb);
+          // 2. unobserve(obj1, somecb)
+          // 3. obj1.a = {b: 2};
+          // check that somecb was not called
+          // obj1.a.b = 3;
+          // check again that somecb was not called
+          if (observers.has(value)) {
+            const pset = observers.get(value)!;
+            pset.parent = callbacks;
+            target[key] = value;
+          } else {
+            const subCallbacks = PSet.createChild(callbacks);
+            target[key] = observeValue(value, subCallbacks);
+          }
+        }
+        notify(target);
+      }
+      return true;
+    },
+    deleteProperty(target: any, key: any) {
+      if (key in target) {
+        delete target[key];
+        notify(target);
+      }
+      return true;
+    },
+  });
+  observers.set(value, callbacks);
+  observers.set(proxy, callbacks);
+  return proxy;
+}
+
+function notify(value: any) {
+  const cbs = observers.get(value)!;
+  for (let cb of cbs) {
+    cb();
+  }
+}

src/refs.ts

@@ -0,0 +1,36 @@
+// -----------------------------------------------------------------------------
+// useRef
+// -----------------------------------------------------------------------------
+
+import type { Component } from "./component/component";
+import { getCurrent } from "./component/component_node";
+
+/**
+ * The purpose of this hook is to allow components to get a reference to a sub
+ * html node or component.
+ */
+interface Ref<C extends Component = Component> {
+  el: HTMLElement | null;
+  comp: C | null;
+}
+
+export function useRef<C extends Component = Component>(name: string): Ref<C> {
+  const node = getCurrent()!;
+  return {
+    get el(): HTMLElement | null {
+      const val = node.refs[name];
+      return val!;
+      // if (val instanceof HTMLElement) {
+      //   return val;
+      // } else if (val instanceof Component) {
+      //   return val.el;
+      // }
+      // return null;
+    },
+    get comp(): C | null {
+      return null;
+      // const val = node.refs && node.refs[name];
+      // return val instanceof Component ? (val as C) : null;
+    },
+  };
+}

src/router/link.ts

@@ -1,48 +0,0 @@
-import { Component } from "../component/component";
-import { xml } from "../tags";
-import { Destination, RouterEnv } from "./router";
-
-type Props = Destination;
-
-export class Link<Env extends RouterEnv> extends Component<Props, Env> {
-  static template = xml`
-    <a  t-att-class="{'router-link-active': isActive }"
-        t-att-href="href"
-        t-on-click="navigate">
-        <t t-slot="default"/>
-    </a>
-  `;
-
-  href: string = this.env.router.destToPath(this.props);
-
-  async willUpdateProps(nextProps) {
-    this.href = this.env.router.destToPath(nextProps);
-  }
-
-  get isActive() {
-    if (this.env.router.mode === "hash") {
-      return (<any>document.location).hash === this.href;
-    }
-    return (<any>document.location).pathname === this.href;
-  }
-
-  navigate(ev) {
-    // don't redirect with control keys
-    if (ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey) {
-      return;
-    }
-    // don't redirect on right click
-    if (ev.button !== undefined && ev.button !== 0) {
-      return;
-    }
-    // don't redirect if `target="_blank"`
-    if (ev.currentTarget && ev.currentTarget.getAttribute) {
-      const target = ev.currentTarget.getAttribute("target");
-      if (/\b_blank\b/i.test(target)) {
-        return;
-      }
-    }
-    ev.preventDefault();
-    this.env.router.navigate(this.props);
-  }
-}

src/router/route_component.ts

@@ -1,19 +0,0 @@
-import { Component } from "../component/component";
-import { xml } from "../tags";
-import { EnvWithRouter } from "./router";
-
-export class RouteComponent extends Component<{}, EnvWithRouter> {
-  static template = xml`
-    <t>
-        <t
-            t-if="routeComponent"
-            t-component="routeComponent"
-            t-key="env.router.currentRouteName"
-            t-props="env.router.currentParams" />
-    </t>
-  `;
-
-  get routeComponent(): any {
-    return this.env.router.currentRoute && this.env.router.currentRoute.component;
-  }
-}

src/router/router.ts

@@ -1,294 +0,0 @@
-import { Env } from "../component/component";
-import { QWeb } from "../qweb/index";
-import { shallowEqual } from "../utils";
-
-type NavigationGuard = (info: {
-  env: Env;
-  to: Route | null;
-  from: Route | null;
-}) => boolean | Destination;
-
-export interface Route {
-  name: string;
-  path: string;
-  extractionRegExp: RegExp;
-  component?: any;
-  redirect?: Destination;
-  params: string[];
-  beforeRouteEnter?: NavigationGuard;
-}
-
-export type RouteParams = { [key: string]: string | number };
-
-export interface RouterEnv extends Env {
-  router: Router;
-}
-
-export interface Destination {
-  path?: string;
-  to?: string;
-  params?: RouteParams;
-}
-
-interface PositiveMatchResult {
-  type: "match";
-  route: Route;
-  params: RouteParams;
-}
-
-interface NegativeMatchResult {
-  type: "nomatch";
-}
-
-interface CancelledMatch {
-  type: "cancelled";
-}
-
-type MatchResult = PositiveMatchResult | NegativeMatchResult | CancelledMatch;
-
-interface Options {
-  mode: Router["mode"];
-}
-
-export interface EnvWithRouter extends Env {
-  router: Router;
-}
-
-const paramRegexp = /\{\{(.*?)\}\}/;
-const globalParamRegexp = new RegExp(paramRegexp.source, "g");
-
-export class Router {
-  currentRoute: Route | null = null;
-  currentParams: RouteParams | null = null;
-  mode: "history" | "hash";
-
-  routes: { [id: string]: Route };
-  routeIds: string[];
-  env: RouterEnv;
-
-  constructor(
-    env: Partial<EnvWithRouter>,
-    routes: Partial<Route>[],
-    options: Options = { mode: "history" }
-  ) {
-    env.router = this;
-    this.mode = options.mode;
-    this.env = env as RouterEnv;
-
-    this.routes = {};
-    this.routeIds = [];
-    let nextId = 1;
-    for (let partialRoute of routes) {
-      if (!partialRoute.name) {
-        partialRoute.name = "__route__" + nextId++;
-      }
-      if (partialRoute.component) {
-        QWeb.registerComponent("__component__" + partialRoute.name, partialRoute.component);
-      }
-      if (partialRoute.redirect) {
-        this.validateDestination(partialRoute.redirect);
-      }
-      partialRoute.params = partialRoute.path ? findParams(partialRoute.path) : [];
-      partialRoute.extractionRegExp = makeExtractionRegExp(partialRoute.path);
-      this.routes[partialRoute.name] = partialRoute as Route;
-      this.routeIds.push(partialRoute.name);
-    }
-  }
-
-  //--------------------------------------------------------------------------
-  // Public API
-  //--------------------------------------------------------------------------
-
-  async start() {
-    (this as any)._listener = (ev) => this._navigate(this.currentPath(), ev);
-    window.addEventListener("popstate", (this as any)._listener);
-    if (this.mode === "hash") {
-      window.addEventListener("hashchange", (this as any)._listener);
-    }
-    const result = await this.matchAndApplyRules(this.currentPath());
-    if (result.type === "match") {
-      this.currentRoute = result.route;
-      this.currentParams = result.params;
-      const currentPath = this.routeToPath(result.route, result.params);
-      if (currentPath !== this.currentPath()) {
-        this.setUrlFromPath(currentPath);
-      }
-    }
-  }
-
-  async navigate(to: Destination): Promise<boolean> {
-    const path = this.destToPath(to);
-    return this._navigate(path);
-  }
-  async _navigate(path: string, ev?: any): Promise<boolean> {
-    const initialName = this.currentRouteName;
-    const initialParams = this.currentParams;
-    const result = await this.matchAndApplyRules(path);
-    if (result.type === "match") {
-      let finalPath = this.routeToPath(result.route, result.params);
-      if (path.indexOf("?") > -1) {
-        finalPath += "?" + path.split("?")[1];
-      }
-      const isPopStateEvent = ev && ev instanceof PopStateEvent;
-      if (!isPopStateEvent) {
-        this.setUrlFromPath(finalPath);
-      }
-      this.currentRoute = result.route;
-      this.currentParams = result.params;
-    } else if (result.type === "nomatch") {
-      this.currentRoute = null;
-      this.currentParams = null;
-    }
-    const didChange =
-      this.currentRouteName !== initialName || !shallowEqual(this.currentParams, initialParams);
-    if (didChange) {
-      this.env.qweb.forceUpdate();
-      return true;
-    }
-    return false;
-  }
-
-  destToPath(dest: Destination): string {
-    this.validateDestination(dest);
-    return dest.path || this.routeToPath(this.routes[dest.to!], dest.params!);
-  }
-
-  get currentRouteName(): string | null {
-    return this.currentRoute && this.currentRoute.name;
-  }
-
-  //--------------------------------------------------------------------------
-  // Private helpers
-  //--------------------------------------------------------------------------
-
-  private setUrlFromPath(path: string) {
-    const separator = this.mode === "hash" ? location.pathname : "";
-    const url = location.origin + separator + path;
-    if (url !== window.location.href) {
-      window.history.pushState({}, path, url);
-    }
-  }
-
-  private validateDestination(dest: Destination) {
-    if ((!dest.path && !dest.to) || (dest.path && dest.to)) {
-      throw new Error(`Invalid destination: ${JSON.stringify(dest)}`);
-    }
-  }
-
-  private routeToPath(route: Route, params: RouteParams): string {
-    const prefix = this.mode === "hash" ? "#" : "";
-    return (
-      prefix +
-      route.path.replace(globalParamRegexp, (match, param) => {
-        const [key] = param.split(".");
-        return <string>params[key];
-      })
-    );
-  }
-
-  private currentPath(): string {
-    let result = this.mode === "history" ? window.location.pathname : window.location.hash.slice(1);
-    return result || "/";
-  }
-
-  private match(path: string): MatchResult {
-    for (let routeId of this.routeIds) {
-      let route = this.routes[routeId];
-      let params = this.getRouteParams(route, path);
-      if (params) {
-        return {
-          type: "match",
-          route: route,
-          params: params,
-        };
-      }
-    }
-    return { type: "nomatch" };
-  }
-
-  private async matchAndApplyRules(path: string): Promise<MatchResult> {
-    const result = this.match(path);
-    if (result.type === "match") {
-      return this.applyRules(result);
-    }
-    return result;
-  }
-
-  private async applyRules(matchResult: PositiveMatchResult): Promise<MatchResult> {
-    const route = matchResult.route;
-    if (route.redirect) {
-      const path = this.destToPath(route.redirect);
-      return this.matchAndApplyRules(path);
-    }
-    if (route.beforeRouteEnter) {
-      const result = await route.beforeRouteEnter({
-        env: this.env,
-        from: this.currentRoute,
-        to: route,
-      });
-      if (result === false) {
-        return { type: "cancelled" };
-      } else if (result !== true) {
-        // we want to navigate to another destination
-        const path = this.destToPath(result);
-        return this.matchAndApplyRules(path);
-      }
-    }
-
-    return matchResult;
-  }
-
-  private getRouteParams(route: Route, path: string): RouteParams | false {
-    if (route.path === "*") {
-      return {};
-    }
-    if (path.indexOf("?") > -1) {
-      path = path.split("?")[0];
-    }
-    if (path.startsWith("#")) {
-      path = path.slice(1);
-    }
-    const paramsMatch = path.match(route.extractionRegExp);
-    if (!paramsMatch) {
-      return false;
-    }
-    const result = {};
-    route.params.forEach((param, index) => {
-      const [key, suffix] = param.split(".");
-      const paramValue = paramsMatch[index + 1];
-      if (suffix === "number") {
-        return (result[key] = parseInt(paramValue, 10));
-      }
-      return (result[key] = paramValue);
-    });
-    return result;
-  }
-}
-
-function findParams(str: string): string[] {
-  const result: string[] = [];
-  let m;
-  do {
-    m = globalParamRegexp.exec(str);
-    if (m) {
-      result.push(m[1]);
-    }
-  } while (m);
-  return result;
-}
-
-function escapeRegExp(str: string) {
-  return str.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
-}
-
-function makeExtractionRegExp(path: string) {
-  // replace param strings with capture groups so that we can build a regex to match over the path
-  const extractionString = path
-    .split(paramRegexp)
-    .map((part, index) => {
-      return index % 2 ? "(.*)" : escapeRegExp(part);
-    })
-    .join("");
-  // Example: /home/{{param1}}/{{param2}} => ^\/home\/(.*)\/(.*)$
-  return new RegExp(`^${extractionString}$`);
-}

src/store.ts

@@ -1,173 +0,0 @@
-import { Component, Env } from "./component/component";
-import { Context, useContextWithCB } from "./context";
-import { onWillUpdateProps } from "./hooks";
-
-/**
- * Owl Store
- *
- * We have here:
- * - a Store class
- * - useStore hook
- * - useDispatch hook
- * - useGetters hook
- *
- * The Owl store is our answer to the problem of managing complex state across
- * components. The main idea is that the store owns some state, allow external
- * code to modify it through actions, and for each state changes,
- * connected component will be notified, and updated if necessary.
- *
- * Note that this code is partly inspired by VueX and React/Redux
- */
-
-//------------------------------------------------------------------------------
-// Store Definition
-//------------------------------------------------------------------------------
-
-export interface EnvWithStore extends Env {
-  store: Store;
-}
-
-export type Action = ({ state, dispatch, env, getters }, ...payload: any) => any;
-export type Getter = ({ state: any, getters }, payload?) => any;
-
-interface StoreConfig {
-  env?: Env;
-  state?: any;
-  actions?: { [name: string]: Action };
-  getters?: { [name: string]: Getter };
-}
-
-export class Store extends Context {
-  actions: any;
-  env: any;
-  getters: { [name: string]: (payload?) => any };
-  updateFunctions: { [key: number]: (() => boolean)[] };
-
-  constructor(config: StoreConfig) {
-    super(config.state);
-    this.actions = config.actions;
-    this.env = config.env;
-    this.getters = {};
-    this.updateFunctions = [];
-    if (config.getters) {
-      const firstArg = {
-        state: this.state,
-        getters: this.getters,
-      };
-      for (let g in config.getters) {
-        this.getters[g] = config.getters[g].bind(this, firstArg);
-      }
-    }
-  }
-
-  dispatch(action: string, ...payload: any): Promise<void> | void {
-    if (!this.actions[action]) {
-      throw new Error(`[Error] action ${action} is undefined`);
-    }
-    const result = this.actions[action](
-      {
-        dispatch: this.dispatch.bind(this),
-        env: this.env,
-        state: this.state,
-        getters: this.getters,
-      },
-      ...payload
-    );
-    return result;
-  }
-
-  __notifyComponents(): Promise<void> {
-    this.trigger("before-update");
-    return super.__notifyComponents();
-  }
-}
-
-interface SelectorOptions {
-  store?: Store;
-  isEqual?: (a: any, b: any) => boolean;
-  onUpdate?: (result: any) => any;
-}
-
-const isStrictEqual = (a, b) => a === b;
-
-export function useStore(selector, options: SelectorOptions = {}): any {
-  const component = Component.current as Component<any, EnvWithStore>;
-  const componentId = component.__owl__.id;
-  const store = options.store || (component.env.store as Store);
-  if (!(store instanceof Store)) {
-    throw new Error(`No store found when connecting '${component.constructor.name}'`);
-  }
-  let result = selector(store.state, component.props);
-  const hashFn = store.observer.revNumber.bind(store.observer);
-  let revNumber = hashFn(result);
-  const isEqual = options.isEqual || isStrictEqual;
-  if (!store.updateFunctions[componentId]) {
-    store.updateFunctions[componentId] = [];
-  }
-  function selectCompareUpdate(state, props): boolean {
-    const oldResult = result;
-    result = selector(state, props);
-    const newRevNumber = hashFn(result);
-    if ((newRevNumber > 0 && revNumber !== newRevNumber) || !isEqual(oldResult, result)) {
-      revNumber = newRevNumber;
-      return true;
-    }
-    return false;
-  }
-  if (options.onUpdate) {
-    store.on("before-update", component, () => {
-      const newValue = selector(store!.state, component.props!);
-      options.onUpdate(newValue);
-    });
-  }
-  store.updateFunctions[componentId].push(function (): boolean {
-    return selectCompareUpdate(store!.state, component.props);
-  });
-
-  useContextWithCB(store, component, function (): Promise<void> | void {
-    let shouldRender = false;
-    for (let fn of store.updateFunctions[componentId]) {
-      shouldRender = fn() || shouldRender;
-    }
-    if (shouldRender) {
-      return component.render();
-    }
-  });
-  onWillUpdateProps((props) => {
-    selectCompareUpdate(store.state, props);
-  });
-
-  const __destroy = component.__destroy;
-  component.__destroy = (parent) => {
-    delete store.updateFunctions[componentId];
-    if (options.onUpdate) {
-      store.off("before-update", component);
-    }
-    __destroy.call(component, parent);
-  };
-
-  if (typeof result !== "object" || result === null) {
-    return result;
-  }
-  return new Proxy(result, {
-    get(target, k) {
-      return result[k];
-    },
-    set(target, k, v) {
-      throw new Error("Store state should only be modified through actions");
-    },
-    has(target, k) {
-      return k in result;
-    },
-  });
-}
-
-export function useDispatch(store?: Store): Store["dispatch"] {
-  store = store || (Component.current!.env as EnvWithStore).store;
-  return store.dispatch.bind(store);
-}
-
-export function useGetters(store?: Store): Store["getters"] {
-  store = store || (Component.current!.env as EnvWithStore).store;
-  return store.getters;
-}

src/tags.ts

@@ -1,44 +1,14 @@
-import { QWeb } from "./qweb/index";
-import { registerSheet } from "./component/styles";
+import { globalTemplates } from "./qweb/template_helpers";
 
-/**
- * Owl Tags
- *
- * We have here a (very) small collection of tag functions:
- *
- * - xml
- *
- * The plan is to add a few other tags such as css, globalcss.
- */
+// -----------------------------------------------------------------------------
+//  Global templates
+// -----------------------------------------------------------------------------
 
-/**
- * XML tag helper for defining templates.  With this, one can simply define
- * an inline template with just the template xml:
- * ```js
- *   class A extends Component {
- *     static template = xml`<div>some template</div>`;
- *   }
- * ```
- */
-export function xml(strings, ...args) {
-  const name = `__template__${QWeb.nextId++}`;
+export function xml(strings: TemplateStringsArray, ...args: any[]) {
+  const name = `__template__${xml.nextId++}`;
   const value = String.raw(strings, ...args);
-  QWeb.registerTemplate(name, value);
+  globalTemplates[name] = value;
   return name;
 }
 
-/**
- * CSS tag helper for defining inline stylesheets.  With this, one can simply define
- * an inline stylesheet with just the following code:
- * ```js
- *   class A extends Component {
- *     static style = css`.component-a { color: red; }`;
- *   }
- * ```
- */
-export function css(strings, ...args) {
-  const name = `__sheet__${QWeb.nextId++}`;
-  const value = String.raw(strings, ...args);
-  registerSheet(name, value);
-  return name;
-}
+xml.nextId = 1;

src/utils.ts

@@ -1,103 +0,0 @@
-/**
- * Owl Utils
- *
- * We have here a small collection of utility functions:
- *
- * - whenReady
- * - loadJS
- * - loadFile
- * - escape
- * - debounce
- */
-
-import { browser } from "./browser";
-
-export function whenReady(fn?: any) {
-  return new Promise(function (resolve) {
-    if (document.readyState !== "loading") {
-      resolve();
-    } else {
-      document.addEventListener("DOMContentLoaded", resolve, false);
-    }
-  }).then(fn || function () {});
-}
-
-const loadedScripts: { [key: string]: Promise<void> } = {};
-
-export function loadJS(url: string): Promise<void> {
-  if (url in loadedScripts) {
-    return loadedScripts[url];
-  }
-  const promise: Promise<void> = new Promise(function (resolve, reject) {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = url;
-    script.onload = function () {
-      resolve();
-    };
-    script.onerror = function () {
-      reject(`Error loading file '${url}'`);
-    };
-    const head = document.head || document.getElementsByTagName("head")[0];
-    head.appendChild(script);
-  });
-  loadedScripts[url] = promise;
-  return promise;
-}
-
-export async function loadFile(url: string): Promise<string> {
-  const result = await browser.fetch(url);
-  if (!result.ok) {
-    throw new Error("Error while fetching xml templates");
-  }
-  return await result.text();
-}
-
-export function escape(str: string | number | undefined): string {
-  if (str === undefined) {
-    return "";
-  }
-  if (typeof str === "number") {
-    return String(str);
-  }
-  const p = document.createElement("p");
-  p.textContent = str;
-  return p.innerHTML;
-}
-
-/**
- * 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.
- *
- * Inspired by https://davidwalsh.name/javascript-debounce-function
- */
-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;
-    browser.clearTimeout(timeout);
-    timeout = browser.setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-}
-
-export function shallowEqual(p1, p2): boolean {
-  for (let k in p1) {
-    if (p1[k] !== p2[k]) {
-      return false;
-    }
-  }
-  return true;
-}

src/vdom/html_to_vdom.ts

@@ -1,34 +0,0 @@
-import { VNode, h, addNS } from "./vdom";
-
-const parser = new DOMParser();
-
-export function htmlToVDOM(html: string): VNode[] {
-  const doc = parser.parseFromString(html, "text/html");
-  const result: VNode[] = [];
-  for (let child of doc.body.childNodes) {
-    result.push(htmlToVNode(child));
-  }
-  return result;
-}
-
-function htmlToVNode(node: ChildNode): VNode {
-  if (!(node instanceof Element)) {
-    if (node instanceof Comment) {
-      return h("!", node.textContent);
-    }
-    return { text: node.textContent! } as VNode;
-  }
-  const attrs = {};
-  for (let attr of node.attributes) {
-    attrs[attr.name] = attr.textContent;
-  }
-  const children: VNode[] = [];
-  for (let c of node.childNodes) {
-    children.push(htmlToVNode(c));
-  }
-  const vnode = h((node as Element).tagName, { attrs }, children);
-  if (vnode.sel === "svg") {
-    addNS(vnode.data, (vnode as any).children, vnode.sel);
-  }
-  return vnode;
-}

src/vdom/index.ts

@@ -1,9 +0,0 @@
-import { attrsModule, classModule, eventListenersModule, propsModule } from "./modules";
-import { init } from "./vdom";
-//------------------------------------------------------------------------------
-// patch
-//------------------------------------------------------------------------------
-
-export { h, VNode } from "./vdom";
-
-export const patch = init([eventListenersModule, attrsModule, propsModule, classModule]);

src/vdom/modules.ts

@@ -1,247 +0,0 @@
-import { Module, VNode, VNodeData } from "./vdom";
-
-//------------------------------------------------------------------------------
-// module/props.ts
-//------------------------------------------------------------------------------
-
-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/eventlisteners.ts
-//------------------------------------------------------------------------------
-
-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 (let i = 0, iLen = handler.length; i < iLen; 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) {
-    if (on[name]) {
-      invokeHandler(on[name], vnode, event);
-    } else if (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
-        const capture = name.charAt(0) === "!";
-        name = capture ? name.slice(1) : name;
-        oldElm.removeEventListener(name, oldListener, capture);
-      }
-    } else {
-      for (name in oldOn) {
-        // remove listener if existing listener removed
-        if (!on[name]) {
-          const capture = name.charAt(0) === "!";
-          name = capture ? name.slice(1) : name;
-          oldElm.removeEventListener(name, oldListener, capture);
-        }
-      }
-    }
-  }
-
-  // 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
-        const capture = name.charAt(0) === "!";
-        name = capture ? name.slice(1) : name;
-        elm.addEventListener(name, listener, capture);
-      }
-    } else {
-      for (name in on) {
-        // add listener if new listener added
-        if (!oldOn[name]) {
-          const capture = name.charAt(0) === "!";
-          name = capture ? name.slice(1) : name;
-          elm.addEventListener(name, listener, capture);
-        }
-      }
-    }
-  }
-}
-
-export const eventListenersModule = {
-  create: updateEventListeners,
-  update: updateEventListeners,
-  destroy: updateEventListeners,
-} as Module;
-
-//------------------------------------------------------------------------------
-// attributes.ts
-//------------------------------------------------------------------------------
-
-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;
-
-//------------------------------------------------------------------------------
-// class.ts
-//------------------------------------------------------------------------------
-function updateClass(oldVnode: VNode, vnode: VNode): void {
-  var cur: any,
-    name: string,
-    elm: Element,
-    oldClass = (oldVnode.data as VNodeData).class,
-    klass = (vnode.data as VNodeData).class;
-
-  if (!oldClass && !klass) return;
-  if (oldClass === klass) return;
-  oldClass = oldClass || {};
-  klass = klass || {};
-
-  elm = vnode.elm as Element;
-
-  for (name in oldClass) {
-    if (name && !klass[name] && !Object.prototype.hasOwnProperty.call(klass, name)) {
-      // was `true` and now not provided
-      elm.classList.remove(name);
-    }
-  }
-  for (name in klass) {
-    cur = klass[name];
-    if (cur !== oldClass[name]) {
-      (elm.classList as any)[cur ? "add" : "remove"](name);
-    }
-  }
-}
-
-export const classModule = { create: updateClass, update: updateClass } as Module;

src/vdom/vdom.ts

@@ -1,616 +0,0 @@
-/**
- * Owl VDOM
- *
- * This file contains an implementation of a virtual DOM, which is a system that
- * can generate in-memory representations of a DOM tree, compare them, and
- * eventually change a concrete DOM tree to match its representation, in an
- * hopefully efficient way.
- *
- * Note that this code is a fork of Snabbdom, slightly tweaked/optimized for our
- * needs (see https://github.com/snabbdom/snabbdom).
- *
- * The main exported values are:
- * - interface VNode
- * - h function (a helper function to generate a vnode)
- * - patch function (to apply a vnode to an actual DOM node)
- */
-
-// 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;
-  }
-}
-
-type Props = Record<string, any>;
-type Attrs = Record<string, string | number | boolean>;
-type On = { [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void } & {
-  [event: string]: EventListener;
-};
-
-export interface Module {
-  pre: PreHook;
-  create: CreateHook;
-  update: UpdateHook;
-  destroy: DestroyHook;
-  remove: RemoveHook;
-  post: PostHook;
-}
-
-//------------------------------------------------------------------------------
-// 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;
-}
-
-export interface VNodeData {
-  props?: Props;
-  attrs?: Attrs;
-  on?: On;
-  hook?: Hooks;
-  key?: Key;
-  ns?: string; // for SVGs
-  [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, data, children, text, elm, 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,
-      iLen: number,
-      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) {
-      const elm =
-        vnode.elm ||
-        (vnode.elm =
-          isDef(data) && isDef((i = (data as VNodeData).ns))
-            ? api.createElementNS(i, sel)
-            : api.createElement(sel));
-      for (i = 0, iLen = cbs.create.length; i < iLen; ++i) cbs.create[i](emptyNode, vnode);
-      if (array(children)) {
-        for (i = 0, iLen = children.length; i < iLen; ++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,
-      iLen: number,
-      j: number,
-      jLen: number,
-      data = vnode.data;
-    if (data !== undefined) {
-      if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode);
-      for (i = 0, iLen = cbs.destroy.length; i < iLen; ++i) cbs.destroy[i](vnode);
-      if (vnode.children !== undefined) {
-        for (j = 0, jLen = vnode.children.length; j < jLen; ++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,
-        iLen: number,
-        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, iLen = cbs.remove.length; i < iLen; ++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, iLen: number, 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, iLen = cbs.update.length; i < iLen; ++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, iLen: number, elm: Node, parent: Node;
-    const insertedVnodeQueue: VNodeQueue = [];
-    for (i = 0, iLen = cbs.pre.length; i < iLen; ++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, iLen = insertedVnodeQueue.length; i < iLen; ++i) {
-      (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(
-        insertedVnodeQueue[i]
-      );
-    }
-    for (i = 0, iLen = cbs.post.length; i < iLen; ++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;
-}
-
-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;
-}
-
-const htmlDomApi = {
-  createElement,
-  createElementNS,
-  createTextNode,
-  createComment,
-  insertBefore,
-  removeChild,
-  appendChild,
-  parentNode,
-  nextSibling,
-  tagName,
-  setTextContent,
-} 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>;
-
-export function addNS(data: any, children: VNodes | undefined, sel: string | undefined): void {
-  if (sel === "dummy") {
-    // we do not need to add the namespace on dummy elements, they come from a
-    // subcomponent, which will handle the namespace itself
-    return;
-  }
-  data.ns = "http://www.w3.org/2000/svg";
-  if (sel !== "foreignObject" && children !== undefined) {
-    for (let i = 0, iLen = children.length; i < iLen; ++i) {
-      const child = children[i];
-      let childData = child.data;
-      if (childData !== undefined) {
-        addNS(childData, (child as VNode).children as VNodes, child.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,
-    iLen: 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, iLen = children.length; i < iLen; ++i) {
-      if (primitive(children[i]))
-        children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
-    }
-  }
-  return vnode(sel, data, children, text, undefined);
-}

tests/__snapshots__/animations.test.ts.snap

@@ -1,200 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`animations t-transition combined with component 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Parent\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'Child'
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined);
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Child\`;
-        let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        const __patch2 = w2.__patch;
-        w2.__patch = (t, vn) => {__patch2.call(w2, t, vn); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => {
-          w2.destroy();
-        };
-        delete w2.__owl__.transitionInserted;
-        utils.transitionRemove(vn, 'chimay', finalize);}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`animations t-transition combined with t-component and t-if 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Parent\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    if (scope['state'].display) {
-        // Component 'Child'
-        let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-        let props2 = {};
-        if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-            w2.destroy();
-            w2 = false;
-        }
-        if (w2) {
-            w2.__updateProps(props2, extra.fiber, undefined);
-            let pvnode = w2.__owl__.pvnode;
-            c1.push(pvnode);
-        } else {
-            let componentKey2 = \`Child\`;
-            let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
-            if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-            w2 = new W2(parent, props2);
-            const __patch2 = w2.__patch;
-            w2.__patch = (t, vn) => {__patch2.call(w2, t, vn); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
-            parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-            let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => {
-          w2.destroy();
-        };
-        delete w2.__owl__.transitionInserted;
-        utils.transitionRemove(vn, 'chimay', finalize);}}});
-            c1.push(pvnode);
-            w2.__owl__.pvnode = pvnode;
-        }
-        w2.__owl__.parentLastFiberId = extra.fiber.id;
-    }
-    return vn1;
-}"
-`;
-
-exports[`animations t-transition combined with t-component, remove and re-add before transitionend 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__2\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    if (scope['state'].flag) {
-        // Component 'Child'
-        let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-        let props2 = {};
-        if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-            w2.destroy();
-            w2 = false;
-        }
-        if (w2) {
-            w2.__updateProps(props2, extra.fiber, undefined);
-            let pvnode = w2.__owl__.pvnode;
-            c1.push(pvnode);
-        } else {
-            let componentKey2 = \`Child\`;
-            let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
-            if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-            w2 = new W2(parent, props2);
-            const __patch2 = w2.__patch;
-            w2.__patch = (t, vn) => {__patch2.call(w2, t, vn); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
-            parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-            let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => {
-          w2.destroy();
-        };
-        delete w2.__owl__.transitionInserted;
-        utils.transitionRemove(vn, 'chimay', finalize);}}});
-            c1.push(pvnode);
-            w2.__owl__.pvnode = pvnode;
-        }
-        w2.__owl__.parentLastFiberId = extra.fiber.id;
-    }
-    return vn1;
-}"
-`;
-
-exports[`animations t-transition with no delay/duration 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('span', p1, c1);
-    p1.hook = {
-      insert: vn => {
-        utils.transitionInsert(vn, 'jupiler');
-      },
-      remove: (vn, rm) => {
-        utils.transitionRemove(vn, 'jupiler', rm);
-      },
-    };
-    c1.push({text: \`blue\`});
-    return vn1;
-}"
-`;
-
-exports[`animations t-transition, on a simple node (insert) 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('span', p1, c1);
-    p1.hook = {
-      insert: vn => {
-        utils.transitionInsert(vn, 'chimay');
-      },
-      remove: (vn, rm) => {
-        utils.transitionRemove(vn, 'chimay', rm);
-      },
-    };
-    c1.push({text: \`blue\`});
-    return vn1;
-}"
-`;
-
-exports[`animations t-transition, on a simple node, not in the DOM 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"test\\"
-    let utils = this.constructor.utils;
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('span', p1, c1);
-    p1.hook = {
-      insert: vn => {
-        utils.transitionInsert(vn, 'chimay');
-      },
-      remove: (vn, rm) => {
-        utils.transitionRemove(vn, 'chimay', rm);
-      },
-    };
-    c1.push({text: \`blue\`});
-    return vn1;
-}"
-`;

tests/__snapshots__/store_hooks.test.ts.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`various scenarios scenarios with async store updates and some components events 1`] = `"<div><button>Do stuff</button><div><span>Attachment 100</span><span>Name: text.txt</span></div></div>"`;
-
-exports[`various scenarios scenarios with async store updates and some components events 2`] = `"<div><button>Do stuff</button></div>"`;

tests/animations.test.ts

@@ -1,452 +0,0 @@
-import { Component, Env } from "../src/component/component";
-import { useRef, useState } from "../src/hooks";
-import { QWeb } from "../src/qweb/index";
-import { xml } from "../src/tags";
-import {
-  makeDeferred,
-  makeTestEnv,
-  makeTestFixture,
-  nextFrame,
-  patchNextFrame,
-  renderToDOM,
-  unpatchNextFrame,
-} from "./helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-// We create before each test:
-// - fixture: a div, appended to the DOM, intended to be the target of dom
-//   manipulations.  Note that it is removed after each test.
-// - qweb: a new QWeb instance
-// - env: a WEnv, necessary to create new components
-// - cssEl: a stylesheet injected into the dom
-
-let fixture: HTMLElement;
-let qweb: QWeb;
-let env: Env;
-let cssEl: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-  Component.env = env;
-  qweb = new QWeb();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-class Widget extends Component<any, any> {}
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-describe("animations", () => {
-  beforeEach(() => {
-    cssEl = document.createElement("style");
-    let css = `
-      .chimay-enter-active, .chimay-leave-active {
-        transition-property: opacity;
-        transition-duration: 0.1s;
-      }
-      .chimay-enter, .chimay-leave-to {
-        opacity: 0;
-      }
-    `;
-    cssEl.textContent = css.trim();
-    document.head.appendChild(cssEl);
-  });
-
-  afterEach(() => {
-    document.head.removeChild(cssEl);
-    unpatchNextFrame();
-  });
-
-  test("t-transition, on a simple node (insert)", async () => {
-    expect.assertions(5);
-    qweb.addTemplate("test", `<span t-transition="chimay">blue</span>`);
-
-    let def = makeDeferred();
-    patchNextFrame((cb) => {
-      expect(node.className).toBe("chimay-enter chimay-enter-active");
-      cb();
-      expect(node.className).toBe("chimay-enter-active chimay-enter-to");
-      def.resolve();
-    });
-    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
-    fixture.appendChild(node);
-
-    expect(node.className).toBe("chimay-enter chimay-enter-active");
-    await def; // wait for the mocked repaint to be done
-    node.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(node.className).toBe("");
-  });
-
-  test("t-transition, on a simple node, not in the DOM", async () => {
-    expect.assertions(5);
-    qweb.addTemplate("test", `<span t-transition="chimay">blue</span>`);
-
-    let def = makeDeferred();
-    patchNextFrame((cb) => {
-      expect(node.className).toBe("chimay-enter chimay-enter-active");
-      cb();
-      expect(node.className).toBe("chimay-enter-active chimay-enter-to");
-      def.resolve();
-    });
-    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
-
-    expect(node.className).toBe("chimay-enter chimay-enter-active");
-    await def; // wait for the mocked repaint to be done
-    node.dispatchEvent(new Event("transitionend"));
-    // we check here that the css classes have not been removed, since the
-    // element is not in the dom, we actually do not want to do anything.
-    expect(node.className).toBe("chimay-enter-active chimay-enter-to");
-  });
-
-  test("t-transition with no delay/duration", async () => {
-    expect.assertions(4);
-    qweb.addTemplate("test", `<span t-transition="jupiler">blue</span>`);
-
-    let def = makeDeferred();
-    patchNextFrame((cb) => {
-      expect(node.className).toBe("jupiler-enter jupiler-enter-active");
-      cb();
-      expect(node.className).toBe("");
-      def.resolve();
-    });
-    let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
-    fixture.appendChild(node);
-    expect(node.className).toBe("jupiler-enter jupiler-enter-active");
-    await def;
-  });
-
-  test("t-transition on a conditional node", async () => {
-    expect.assertions(7);
-
-    env.qweb.addTemplate(
-      "TestWidget",
-      `<div><span t-if="!state.hide" t-transition="chimay">blue</span></div>`
-    );
-    class TestWidget extends Widget {
-      state = useState({ hide: false });
-    }
-    const widget = new TestWidget();
-
-    // insert widget into the DOM
-    let def = makeDeferred();
-    var spanNode;
-    patchNextFrame((cb) => {
-      expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
-      cb();
-      expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
-      def.resolve();
-    });
-    await widget.mount(fixture);
-    spanNode = widget.el!.children[0];
-    expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
-    await def; // wait for the mocked repaint to be done
-    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(spanNode.className).toBe("");
-
-    // remove span from the DOM
-    def = makeDeferred();
-    widget.state.hide = true;
-    patchNextFrame((cb) => {
-      expect(spanNode.className).toBe("chimay-leave chimay-leave-active");
-      cb();
-      expect(spanNode.className).toBe("chimay-leave-active chimay-leave-to");
-      def.resolve();
-    });
-    await def; // wait for the mocked repaint to be done
-    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(spanNode.className).toBe("");
-  });
-
-  test("t-transition combined with t-ref", async () => {
-    expect.assertions(5);
-
-    env.qweb.addTemplate(
-      "TestWidget",
-      `<div><span t-ref="span" t-transition="chimay">blue</span></div>`
-    );
-    class TestWidget extends Widget {
-      state = useState({ hide: false });
-      span = useRef("span");
-    }
-    const widget = new TestWidget();
-
-    // insert widget into the DOM
-    let def = makeDeferred();
-    var spanNode;
-    patchNextFrame((cb) => {
-      expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
-      cb();
-      expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
-      def.resolve();
-    });
-    await widget.mount(fixture);
-    spanNode = widget.el!.children[0];
-    expect(widget.span.el).toBe(spanNode);
-    expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
-    await def; // wait for the mocked repaint to be done
-    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(spanNode.className).toBe("");
-  });
-
-  test("t-transition combined with component", async () => {
-    expect.assertions(5);
-
-    env.qweb.addTemplate("Parent", `<div><Child t-transition="chimay"/></div>`);
-    env.qweb.addTemplate("Child", `<span>blue</span>`);
-    class Child extends Widget {}
-    class Parent extends Widget {
-      static components = { Child: Child };
-    }
-    const widget = new Parent();
-
-    let def = makeDeferred();
-    var spanNode;
-    patchNextFrame((cb) => {
-      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
-      );
-      cb();
-      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
-      );
-      def.resolve();
-    });
-    await widget.mount(fixture);
-    spanNode = widget.el!.children[0];
-
-    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
-    expect(fixture.innerHTML).toBe(
-      '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
-    );
-
-    await def; // wait for the mocked repaint to be done
-    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
-  });
-
-  test("t-transition combined with t-component and t-if", async () => {
-    expect.assertions(8);
-
-    env.qweb.addTemplate(
-      "Parent",
-      `<div><t t-if="state.display" t-component="Child" t-transition="chimay"/></div>`
-    );
-    env.qweb.addTemplate("Child", `<span>blue</span>`);
-    class Child extends Widget {}
-    class Parent extends Widget {
-      static components = { Child: Child };
-      state = useState({ display: true });
-    }
-    const widget = new Parent();
-
-    let def = makeDeferred();
-    var spanNode;
-    patchNextFrame((cb) => {
-      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
-      );
-      cb();
-      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
-      );
-      def.resolve();
-    });
-    await widget.mount(fixture);
-    spanNode = widget.el!.children[0];
-
-    expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
-    expect(fixture.innerHTML).toBe(
-      '<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
-    );
-
-    await def; // wait for the mocked repaint to be done
-    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
-
-    // remove span from the DOM
-    def = makeDeferred();
-    widget.state.display = false;
-    patchNextFrame((cb) => {
-      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-leave chimay-leave-active" data-owl-key="__3__">blue</span></div>'
-      );
-      cb();
-      expect(fixture.innerHTML).toBe(
-        '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__3__">blue</span></div>'
-      );
-      def.resolve();
-    });
-    await def; // wait for the mocked repaint to be done
-    spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe("<div></div>");
-  });
-
-  test("t-transition, remove and re-add before transitionend", async () => {
-    expect.assertions(11);
-
-    env.qweb.addTemplates(
-      `<templates>
-        <div t-name="Parent">
-          <button t-on-click="toggle">Toggle</button>
-          <span t-if="state.flag" t-transition="chimay">blue</span>
-        </div>
-      </templates>`
-    );
-    class Parent extends Widget {
-      state = useState({ flag: false });
-
-      toggle() {
-        this.state.flag = !this.state.flag;
-      }
-    }
-
-    const widget = new Parent();
-    await widget.mount(fixture);
-    let button = widget.el!.querySelector("button");
-
-    let def = makeDeferred();
-    let phase = "enter";
-    patchNextFrame((cb) => {
-      let spans = fixture.querySelectorAll("span");
-      expect(spans.length).toBe(1);
-      expect(spans[0].className).toBe(`chimay-${phase} chimay-${phase}-active`);
-      cb();
-      expect(spans[0].className).toBe(`chimay-${phase}-active chimay-${phase}-to`);
-      def.resolve();
-    });
-
-    // click display the span
-    button!.click();
-    await def; // wait for the mocked repaint to be done
-    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><button>Toggle</button><span class="">blue</span></div>');
-
-    // click to remove the span, and click again to re-add it before transitionend
-    def = makeDeferred();
-    phase = "leave";
-    button!.click();
-
-    await def; // wait for the mocked repaint to be done
-    def = makeDeferred();
-    phase = "enter";
-    button!.click();
-
-    await def; // wait for the mocked repaint to be done
-    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><button>Toggle</button><span class="">blue</span></div>');
-  });
-
-  test("t-transition combined with t-component, remove and re-add before transitionend", async () => {
-    expect.assertions(12);
-
-    class Child extends Widget {
-      static template = xml`<span>blue</span>`;
-    }
-    class Parent extends Widget {
-      static template = xml`
-        <div t-name="Parent">
-          <t t-if="state.flag" t-component="Child" t-transition="chimay"/>
-        </div>`;
-      static components = { Child };
-      state = useState({ flag: false });
-    }
-
-    const widget = new Parent();
-    await widget.mount(fixture);
-    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
-
-    let def = makeDeferred();
-    let phase = "enter";
-    patchNextFrame((cb) => {
-      let spans = fixture.querySelectorAll("span");
-      expect(spans.length).toBe(1);
-      expect(spans[0].className).toBe(`chimay-${phase} chimay-${phase}-active`);
-      cb();
-      expect(spans[0].className).toBe(`chimay-${phase}-active chimay-${phase}-to`);
-      def.resolve();
-    });
-
-    // display the span
-    widget.state.flag = true;
-    await def; // wait for the mocked repaint to be done
-    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
-
-    // click to remove the span, and click again to re-add it before transitionend
-    def = makeDeferred();
-    phase = "leave";
-
-    widget.state.flag = false;
-
-    await def; // wait for the mocked repaint to be done
-    def = makeDeferred();
-    phase = "enter";
-    widget.state.flag = true;
-
-    await def; // wait for the mocked repaint to be done
-    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
-    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__3__">blue</span></div>');
-  });
-
-  test("transitionInsert is called the correct amount of times", async () => {
-    const oldTransitionInsert = QWeb.utils.transitionInsert;
-    QWeb.utils.transitionInsert = jest.fn(oldTransitionInsert);
-
-    class Child extends Widget {
-      static template = xml`<span>blue</span>`;
-    }
-    class Parent extends Widget {
-      static template = xml`
-        <div t-name="Parent">
-          <Child t-if="state.flag" t-transition="chimay"/>
-        </div>`;
-      static components = { Child };
-      state = useState({ flag: false });
-    }
-
-    patchNextFrame((cb) => cb());
-
-    const widget = new Parent();
-    await widget.mount(fixture);
-
-    widget.state.flag = true;
-
-    await nextFrame(3);
-    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
-    expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
-    expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
-
-    widget.state.flag = false;
-    await nextFrame(3);
-    expect(fixture.innerHTML).toBe(
-      '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__3__">blue</span></div>'
-    );
-    expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
-
-    widget.state.flag = true;
-    await nextFrame(3);
-    expect(fixture.innerHTML).toBe(
-      '<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__3__">blue</span></div>'
-    );
-    expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);
-
-    widget.state.flag = false;
-    await nextFrame(3);
-    widget.state.flag = true;
-    await nextFrame(3);
-
-    expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
-    widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
-    expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__3__">blue</span></div>');
-    QWeb.utils.transitionInsert = oldTransitionInsert;
-  });
-});

tests/blockdom/block.test.ts

@@ -0,0 +1,265 @@
+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.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,123 @@
+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("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 (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("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("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 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,108 @@
+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]();
+    }
+  };
+
+  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"]);
+});

tests/blockdom/block_refs.test.ts

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

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,79 @@
+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");
+  });
+});

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,57 @@
+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);
+  });
+});

tests/component/__snapshots__/class_style.test.ts.snap

@@ -1,156 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`class and style attributes with t-component dynamic t-att-style is properly added and updated on widget root el 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"ParentWidget\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'child'
-    const _4 = scope['state'].style;
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined).then(()=>{if (w2.__owl__.status === 5) {return};w2.el.style=_4;});;
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`child\`;
-        let W2 = scope['child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.style = _4;}});});
-        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v2) 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"ParentWidget\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    context.__owl__.refs = context.__owl__.refs || {};
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'Child'
-    const ref4 = \`child\`;
-    let _5 = {'a':true};
-    Object.assign(_5, {b:scope['state'].b})
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined);
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Child\`;
-        let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){}});});
-        let pvnode = h('dummy', {key: '__3__', hook: {insert(vn) {context.__owl__.refs[ref4] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref4];}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.classObj=_5;
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v2) 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Child\\"
-    let utils = this.constructor.utils;
-    let scope = Object.create(context);
-    let h = this.h;
-    let _7 = {'c':true};
-    Object.assign(_7, utils.toClassObj({d:scope['state'].d}))
-    let c8 = [], p8 = {key:8,class:_7};
-    let vn8 = h('span', p8, c8);
-    return vn8;
-}"
-`;
-
-exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v3) 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"ParentWidget\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    context.__owl__.refs = context.__owl__.refs || {};
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'Child'
-    const ref4 = \`child\`;
-    let _5 = {'a':true};
-    Object.assign(_5, utils.toClassObj(scope['state'].b?'b':''))
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined);
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Child\`;
-        let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){}});});
-        let pvnode = h('dummy', {key: '__3__', hook: {insert(vn) {context.__owl__.refs[ref4] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref4];}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.classObj=_5;
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v3) 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Child\\"
-    let utils = this.constructor.utils;
-    let scope = Object.create(context);
-    let h = this.h;
-    let _7 = {'c':true};
-    Object.assign(_7, utils.toClassObj(scope['state'].d?'d':''))
-    let c8 = [], p8 = {key:8,class:_7};
-    let vn8 = h('span', p8, c8);
-    return vn8;
-}"
-`;