PROTOTYPE: batch renders in animation frame instead of microtick

.eslintrc

@@ -1,47 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "node": true,
-        "es2022": true
-    },
-    "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint"],
-    "parserOptions": {
-        "sourceType": "module"
-    },
-    "root": true,
-    "rules": {
-        "no-restricted-globals": ["error", "event", "self"],
-        "no-const-assign": ["error"],
-        "no-debugger": ["error"],
-        "no-dupe-class-members": ["error"],
-        "no-dupe-keys": ["error"],
-        "no-dupe-args": ["error"],
-        "no-dupe-else-if": ["error"],
-        "no-unsafe-negation": ["error"],
-        "no-duplicate-imports": ["error"],
-        "valid-typeof": ["error"],
-        "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": false, "caughtErrors": "all" }],
-        "no-restricted-syntax": [
-            "error",
-            {
-                "selector": "MemberExpression[object.name='test'][property.name='only']",
-                "message": "test.only(...) is forbidden",
-            },
-            {
-                "selector": "MemberExpression[object.name='describe'][property.name='only']",
-                "message": "describe.only(...) is forbidden",
-            }
-        ],
-    },
-    "globals": {
-        "describe": true,
-        "expect": true,
-        "test": true,
-        "beforeEach": true,
-        "beforeAll": true,
-        "afterEach": true,
-        "afterAll": true,
-        "jest": true,
-    },
-}

.github/workflows/deploy.yml

@@ -22,8 +22,7 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
+    - run: npm install
     - run: npm run test
     - run: npm run check-formatting
-    - run: npm run lint
     - run: npm run build

.gitignore

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

CHANGELOG.md

@@ -31,7 +31,6 @@ All changes are documented here in no particular order.
 - breaking: Support for inline css (`css` tag and static `style`) has been removed ([details](#37-support-for-inline-css-css-tag-and-static-style-has-been-removed))
 - new: prop validation system can now describe that additional props are allowed (with `*`) ([doc](doc/reference/props.md#props-validation))
 - breaking: prop validation system does not allow default prop on a mandatory (not optional) prop ([doc](doc/reference/props.md#props-validation))
-- breaking: rendering a component does not necessarily render child components ([details](#40-rendering-a-component-does-not-necessarily-render-child-components))
 
 
 
@@ -44,6 +43,7 @@ All changes are documented here in no particular order.
 - breaking: style/class on components are now regular props ([details](#10-styleclass-on-components-are-now-regular-props))
 - new: components can use the `.bind` suffix to bind function props ([doc](doc/reference/props.md#binding-function-props))
 - breaking: `t-on` does not accept expressions, only functions ([details](#30-t-on-does-not-accept-expressions-only-functions))
+- breaking: `t-on` does not work on components any more ([details](#12-t-on-does-not-work-on-components-any-more))
 - new: an error is thrown if an handler defined in a `t-on-` directive is not a function (failed silently previously in some cases)
 - breaking: `t-component` no longer accepts strings ([details](#17-t-component-no-longer-accepts-strings))
 - new: the `this` variable in template expressions is now bound to the component
@@ -80,6 +80,7 @@ All changes are documented here in no particular order.
 - improved performance
 - much simpler code 
 - new App class to encapsulate a root Owl component (with the config for that application) ([doc](doc/reference/app.md))
+- new `Memo` component
 - new `useEffect` hook ([doc](doc/reference/hooks.md#useeffect))
 - breaking: `Context` is removed ([details](#15-context-is-removed))
 - breaking: `env` is now totally empty ([details](#16-env-is-now-totally-empty))
@@ -247,12 +248,35 @@ Rationale: `shouldUpdate` is a dangerous method to use, that may cause a lot of
 issues. Vue does not have such a mechanism (see https://github.com/vuejs/vue/issues/4255),
 because the reactivity system in Vue is smart enough to only rerender the minimal
 subset of components that is subscribed to a piece of state. Now, Owl 2 features
-a much more powerful reactivity system, so the same rationale applies: in a way,
-it's like each Owl 2 component has a `shouldUpdate` method that precisely tracks
-every value used by the component.
+a much more powerful reactivity system.
 
-Migration code: remove the `shouldUpdate` methods, and it should work as well
-as before.
+Migration code: remove the `shouldUpdate` methods. Then, maybe the following
+ideas may help:
+
+- try to organize the state/architecture to minimize the number of state updates
+- take advantage of the finer reactivity system. For example, if we have a list
+  of items, with a component for each item, we can write this:
+
+  ```js
+  class Item extends Component {
+      setup() {
+          this.item = useState(this.props.item); // and only use this, not props.item
+      }
+  }
+  ```
+  Doing so will make it that each `Item` component will register itself as an
+  observer of its own item, and will be the only component being rerendered when
+  its item object is updated.
+- use the `Memo` component to wrap some piece of template. `Memo` memoize its
+  content, and only update itself if its props are different (shallow comparison):
+  
+  ```xml
+    <Memo a="state.a" b="state.b"> 
+        <t t-esc="state.a"/>
+        <t t-esc="state.b"/>
+        <t t-esc="state.c"/>
+    </Memo>
+  ```
 
 ### 9. component.el is removed
 
@@ -312,6 +336,41 @@ Documentation:
 - [Mounting a component](doc/reference/app.md#mount-helper)
 
 
+### 12. `t-on` does not work on components any more
+
+In owl 1, it was possible to bind an event listener on a component tag in a
+template:
+
+```xml
+<SomeComponent t-on-some-event="doSomething"/>
+```
+
+This does not work any more.
+
+Rationale: with the support of fragments, there is no longer a canonical html
+element that we can refer. So, this makes it difficult to implement correctly
+and efficiently. Also, we noticed in practice that the event system was an issue
+in some cases, when components need to communicate before they are mounted. In
+those cases, the better solution is to directly use a callback.  Also, another
+conceptual issue with this is that it kind of breaks the component encapsulation.
+The child component kind of leak its own implementation to the outside world.
+
+Migration: a quick fix that may work in some cases is to simply bind the event
+handler on a parent htmlelement. A better way to do it, if possible, is to change
+the component API to accept explicitely a callback as props. 
+
+```xml
+<SomeComponent onSomeEvent="doSomething"/>
+<!-- or alternatively: -->
+<SomeComponent onSomeEvent.bind="doSomething"/>
+```
+
+Note that one of the example above uses the `.bind` suffix, to bind the function
+prop to the component.  Most of the time, binding the function is necessary, and
+using the `.bind` suffix is very helpful in that case.
+
+Documentation: [Binding function props](doc/reference/props.md#binding-function-props)
+
 ### 13. Portal does no longer transfer DOM events
 
 In Owl 1, a Portal component would listen to events emitted on its portalled
@@ -739,28 +798,4 @@ Rationale: the `browser` object caused more trouble than it was worth. Also, it
 seems like this should be done in user space, not at the framework level.  
 
 Migration: code should just be adapted to either use another browser object,
-or to use native browser function (and then, just mock them directly).
-
-## 40. Rendering a component does not necessarily render child components
-
-Before, if one had the following component tree:
-
-```mermaid
-  graph TD;
-      A-->B;
-      A-->C;
-```
-
-when `A` would render, it would also render `B` and `C`. Now, in Owl 2, it will 
-(shallow) compare the before and after props, and `B` or `C` will only be rerendered
-if their props have changed.
-
-Now, the question is what happens if the props have changed, but in a deeper way?
-In that case, Owl will know, because each props are now reactive. So, if some
-inner value read by `B` was changed, then only `B` will be updated.
-
-Rationale: This was just not possible in Owl 1, but it now possible. This is
-due to the rewriteof the underlying rendering engine and the reactivity
-system. The goal is to have a big performance boost in large screen with many
-components: now Owl only rerender what is strictly useful.
-
+or to use native browser function (and then, just mock them directly).

README.md

@@ -82,7 +82,6 @@ Are you new to Owl? This is the place to start!
 - [Component](doc/reference/component.md)
 - [Component Lifecycle](doc/reference/component.md#lifecycle)
 - [Concurrency Model](doc/reference/concurrency_model.md)
-- [Dev mode](doc/reference/app.md#dev-mode)
 - [Dynamic sub components](doc/reference/component.md#dynamic-sub-components)
 - [Environment](doc/reference/environment.md)
 - [Error Handling](doc/reference/error_handling.md)
@@ -93,7 +92,6 @@ Are you new to Owl? This is the place to start!
 - [Loading Templates](doc/reference/app.md#loading-templates)
 - [Mounting a component](doc/reference/app.md#mount-helper)
 - [Portal](doc/reference/portal.md)
-- [Precompiling templates](doc/reference/precompiling_templates.md)
 - [Props](doc/reference/props.md)
 - [Props Validation](doc/reference/props.md#props-validation)
 - [Reactivity](doc/reference/reactivity.md)
@@ -112,8 +110,6 @@ Are you new to Owl? This is the place to start!
 - [Comparison with React/Vue](doc/miscellaneous/comparison.md)
 - [Why did Odoo build Owl?](doc/miscellaneous/why_owl.md)
 - [Changelog (from owl 1.x to 2.x)](CHANGELOG.md)
-- [Notes on compiled templates](doc/miscellaneous/compiled_template.md)
-- [Owl devtools extension](doc/tools/devtools.md)
 
 ## Installing Owl
 
@@ -122,28 +118,8 @@ Owl is available on `npm` and can be installed with the following command:
 ```
 npm install @odoo/owl
 ```
+
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl](https://github.com/odoo/owl/releases/latest)
-
-## Installing Owl devtools
-
-The Owl devtools browser extension is also available in the [release](https://github.com/odoo/owl/releases/latest):
-Unzip the owl-devtools.zip file and follow the instructions depending on your browser:
-
-### Chrome
-
-Go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
-Select the devtools-chrome folder and that's it, your extension is active! 
-There is a convenient refresh button on the extension card (still on the same admin page) to update your code. 
-Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
-
-### Firefox 
-Go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
-Select any file in the devtools-firefox folder and that's it, your extension is active! 
-Here, you can use the reload button to refresh the extension.
-
-Note that you may have to open another window or reload your tab to see the extension working.
-Also note that the extension will only be active on pages that have a sufficient version of owl.
-
+- [owl-1.4.10](https://github.com/odoo/owl/releases/tag/v1.4.10)
 

doc/learning/tutorial_todoapp.md

@@ -174,9 +174,9 @@ class Root extends Component {
 ```
 
 The template contains a [`t-foreach`](../reference/templates.md#loops) loop to iterate
-through the tasks. It can find the `tasks` list from the component, since the rendering
-context contains the properties of the component. Note that we use the `id` of each task
-as a `t-key`, which is very common. There are two css classes: `task-list` and `task`,
+through the tasks. It can find the `tasks` list from the component, since the
+component is the rendering context. Note that we use the `id` of each task as a
+`t-key`, which is very common. There are two css classes: `task-list` and `task`,
 that we will use in the next section.
 
 Finally, notice the use of the `t-att-checked` attribute:
@@ -240,7 +240,7 @@ class Task extends Component {
   static template = xml /* xml */`
     <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
       <input type="checkbox" t-att-checked="props.task.isCompleted"/>
-      <span><t t-esc="props.task.text"/></span>
+      <span><t t-esc="props.task.title"/></span>
     </div>`;
   static props = ["task"];
 }
@@ -502,10 +502,6 @@ deleteTask(task) {
 Notice that the `onDelete` prop is defined with a `.bind` suffix: this is a special
 suffix that makes sure the function callback is bound to the component.
 
-Notice also that we have two functions named `deleteTask`. The one in the Task
-component just delegates the work to the Root component that owns the task list
-via the `onDelete` property.
-
 ## 10. Using a store
 
 Looking at the code, it is apparent that all the code handling tasks is scattered
@@ -747,7 +743,7 @@ the user experience.
 ```xml
 <input type="checkbox" t-att-checked="props.task.isCompleted"
     t-att-id="props.task.id"
-    t-on-click="() => store.toggleTask(props.task)"/>
+    t-on-click="dispatch('toggleTask', props.task.id)"/>
 <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
 ```
 
@@ -774,11 +770,10 @@ For reference, here is the final code:
     <meta charset="UTF-8" />
     <title>OWL Todo App</title>
     <link rel="stylesheet" href="app.css" />
-  </head>
-  <body>
     <script src="owl.js"></script>
     <script src="app.js"></script>
-  </body>
+  </head>
+  <body></body>
 </html>
 ```
 

doc/miscellaneous/compiled_template.md

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

doc/readme.md

@@ -45,5 +45,4 @@ Utility/helpers:
 - [`loadFile`](reference/utils.md#loadfile): an helper to load a file from the server
 - [`markup`](reference/templates.md#outputting-data): utility function to define strings that represent html (should not be escaped)
 - [`status`](reference/component.md#status-helper): utility function to get the status of a component (new, mounted or destroyed)
-- [`validate`](reference/utils.md#validate): validates if an object satisfies a specified schema
 - [`whenReady`](reference/utils.md#whenready): utility function to execute code when DOM is ready

doc/reference/app.md

@@ -51,18 +51,17 @@ The `config` object is an object with some of the following keys:
 
 - **`env (object)`**: if given, this will be the shared `env` given to each component
 - **`props (object)`**: the props given to the root component
-- **`dev (boolean, default=false)`**: if `true`, the application is rendered in
-  [`dev` mode](#dev-mode);
+- **`dev (boolean, default=false)`**: if `true`, the application is rendered in `dev`
+  mode, which activates some additional checks (in particular, the props validation
+  code is only performed in dev mode)
 - **`test (boolean, default=false)`**: `test` mode is the same as `dev` mode, except
-  that Owl will not log a message to warn that Owl is in `dev` mode.
+  that Owll will not log a message to warn that Owl is in `dev` mode.
 - **`translatableAttributes (string[])`**: a list of additional attributes that should
   be translated (see [translations](translations.md))
 - **`translateFn (function)`**: a function that will be called by owl to translate
   templates (see [translations](translations.md))
 - **`templates (string | xml document)`**: all the templates that will be used by
   the components created by the application.
-- **`warnIfNoStaticProps (boolean, default=false)`**: if true, Owl will log a warning
-  whenever it encounters a component that does not provide a [static props description](props.md#props-validation).
 
 ## `mount` helper
 
@@ -111,13 +110,3 @@ const { loadFile, mount } = owl;
   mount(Root, document.body, { env });
 })();
 ```
-
-## Dev mode
-
-Dev mode activates some additional checks and developer amenities:
-
-- [Props validation](./props.md#props-validation) is performed
-- [t-foreach](./templates.md#loops) loops check for key unicity
-- Lifecycle hooks are wrapped to report their errors in a more developer-friendly way
-- onWillStart and onWillUpdateProps will emit a warning in the console when they
-  take longer than 3 seconds in an effort to ease debugging the presence of deadlocks

doc/reference/component.md

@@ -68,17 +68,12 @@ The `Component` class has a very small API.
   component will go through the following lifecycle methods: `willUpdateProps`,
   `willPatch` and `patched`.
 
-* **`render(deep[=false])`**: calling this method directly will cause a rerender. Note
+* **`render()`**: calling this method directly will cause a rerender. Note
   that with the reactivity system, this should be rare to have to do it manually.
   Also, the rendering operation is asynchronous, so the DOM will only be updated
   slightly later (at the next animation frame, if no component delays the
   rendering)
 
-  By default, the render initiated by this method will stop at each child
-  component if their props are (shallow) equal. To force a render to update
-  all child components, one can use the optional `deep` argument. Note that the
-  value of the `deep` argument needs to be a boolean, not a truthy value.
-
 ## Static Properties
 
 - **`template (string)`**: this is the name of the template that
@@ -451,6 +446,5 @@ console.log(status(component));
 // logs either:
 // - 'new', if the component is new and has not been mounted yet
 // - 'mounted', if the component is currently mounted
-// - 'cancelled', if the component has not been mounted yet but will be destroyed soon
 // - 'destroyed' if the component is currently destroyed
 ```

doc/reference/context.md

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

doc/reference/event_handling.md

@@ -5,7 +5,6 @@
 - [Event Handling](#event-handling)
 - [Modifiers](#modifiers)
 - [Synthetic Events](#synthetic-events)
-- [On Components](#on-components)
 
 ## Event Handling
 
@@ -101,19 +100,3 @@ To enable it, one can just use the `.synthetic` suffix:
     </t>
 </div>
 ```
-
-## On Components
-
-The `t-on` directive also works on a child component:
-
-```xml
-<div>
-    in some template
-    <Child t-on-click="dosomething"/>
-</div>
-```
-
-This will catch all click events on any html element contained in the `Child`
-sub component. Note that if the child component is reduced to one (or more) text
-nodes, then clicking on it will not call the handler, since the event will be
-dispatched by the browser on the parent element (a `div` in this case).

doc/reference/hooks.md

@@ -112,16 +112,17 @@ of a component, rendered by Owl. It only work on a html element tagged by the
 
 ```xml
 <div>
-    <input t-ref="someInput"/>
+    <input t-ref="someDiv"/>
     <span>hello</span>
 </div>
 ```
 
-In this example, the component will be able to access the `input` with the `useRef` hook:
+In this example, the component will be able to access the `div` and the component
+`SubComponent` with the `useRef` hook:
 
 ```js
 class Parent extends Component {
-  inputRef = useRef("someInput");
+  inputRef = useRef("someComponent");
 
   someMethod() {
     // here, if component is mounted, refs are active:
@@ -138,18 +139,18 @@ The `t-ref` directive also accepts dynamic values with string interpolation
 `t-component` directives). For example,
 
 ```xml
-<div t-ref="div_{{someCondition ? '1' : '2'}}"/>
+<div t-ref="component_{{someCondition ? '1' : '2'}}"/>
 ```
 
 Here, the references need to be set like this:
 
 ```js
-this.ref1 = useRef("div_1");
-this.ref2 = useRef("div_2");
+this.ref1 = useRef("component_1");
+this.ref2 = useRef("component_2");
 ```
 
 References are only guaranteed to be active while the parent component is mounted.
-If this is not the case, accessing `el` on it will return `null`.
+If this is not the case, accessing `el` or `comp` on it will return `null`.
 
 ### `useSubEnv` and `useChildSubEnv`
 
@@ -233,8 +234,7 @@ are defined by a function instead of just the dependencies.
 
 The `useEffect` hook takes two function: the effect function and the dependency
 function. The effect function perform some task and return (optionally) a cleanup
-function. The dependency function returns a list of dependencies, these dependencies
-are passed as parameters in the effect function . If any of these
+function. The dependency function returns a list of dependencies. If any of these
 dependencies changes, then the current effect will be cleaned up and reexecuted.
 
 Here is an example without any dependencies:

doc/reference/precompiling_templates.md

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

doc/reference/props.md

@@ -4,7 +4,6 @@
 
 - [Overview](#overview)
 - [Definition](#definition)
-- [Props comparison](#props-comparison)
 - [Binding function props](#binding-function-props)
 - [Dynamic Props](#dynamic-props)
 - [Default Props](#default-props)
@@ -57,47 +56,6 @@ the `props` object contains the following keys:
 - for `ComponentA`: `a` and `b`,
 - for `ComponentB`: `model`,
 
-## Props comparison
-
-Whenever Owl encounters a subcomponent in a template, it performs a shallow
-comparison of all props. If they are all referentially equal, then the subcomponent
-will not even be updated. Otherwise, if at least one props has changed, then
-Owl will update it.
-
-However, in some cases, we know that two values are different, but they have the
-same effect, and should not be considered different by Owl. For example, anonymous
-functions in a template are always different, but most of them should not be
-considered different:
-
-```xml
-<t t-foreach="todos" t-as="todo" t-key="todo.id">
-  <Todo todo="todo" onDelete="() => deleteTodo(todo.id)" />
-</t>
-```
-
-In that case, one can use the `.alike` suffix:
-
-```xml
-<t t-foreach="todos" t-as="todo" t-key="todo.id">
-  <Todo todo="todo" onDelete.alike="() => deleteTodo(todo.id)" />
-</t>
-```
-
-This tells Owl that this specific prop should always be considered equivalent
-(or, in other words, should be removed from the list of comparable props).
-
-Note that even if most anonymous functions should probably be considered `alike`,
-it is not necessarily true in all cases. It depends on what values are captured
-by the anonymous function. The following example shows a case where it is probably
-wrong to use `.alike`.
-
-```xml
-<t t-foreach="todos" t-as="todo" t-key="todo.id">
-  <!-- Probably wrong! todo.isCompleted may change -->
-  <Todo todo="todo" toggle.alike="() => toggleTodo(todo.isCompleted)" />
-</t>
-```
-
 ## Binding function props
 
 It is common to have the need to pass a callback as a prop. Since Owl components
@@ -137,9 +95,6 @@ class SomeComponent extends Component {
 }
 ```
 
-The `.bind` suffix also implies `.alike`, so these props will not cause additional
-renderings.
-
 ## Dynamic Props
 
 The `t-props` directive can be used to specify totally dynamic props:
@@ -204,7 +159,6 @@ For each key, a `prop` definition is either a boolean, a constructor, a list of
 - a boolean: indicate that the props exists, and is mandatory.
 - a constructor: this should describe the type, for example: `id: Number` describe
   the props `id` as a number
-- an object describing a value as type. This is done by using the `value` key. For example, `{value: false}` specifies that the corresponding value should be equal to false.
 - a list of constructors. In that case, this means that we allow more than one
   type. For example, `id: [Number, String]` means that `id` can be either a string
   or a number.
@@ -212,7 +166,6 @@ For each key, a `prop` definition is either a boolean, a constructor, a list of
   - `type`: the main type of the prop being validated
   - `element`: if the type was `Array`, then the `element` key describes the type of each element in the array. If it is not set, then we only validate the array, not its elements,
   - `shape`: if the type was `Object`, then the `shape` key describes the interface of the object. If it is not set, then we only validate the object, not its elements,
-  - `values`: if the type was `Object`, then the `values` key describes the interface of values in the object, this allows validating objects that are used as mappings, where keys are not known in advance but the shape of the values is.
   - `validate`: this is a function which should return a boolean to determine if
     the value is valid or not. Useful for custom validation logic.
   - `optional`: if true, the prop is not mandatory
@@ -277,10 +230,6 @@ class ComponentB extends owl.Component {
         name: {type: String, optional: true},
         url: String
       ]},    // object, with keys id (number), name (string, optional) and url (string)
-    someObj3: {
-      type: Object,
-      values: { type: Array, element: String },
-    }, // object with arbitary keys where values are arrays of strings
     someFlag: Boolean,     // a boolean, mandatory (even if `false`)
     someVal: [Boolean, Date],   // either a boolean or a date
     otherValue: true,     // indicates that it is a prop
@@ -291,12 +240,9 @@ class ComponentB extends owl.Component {
     size: {
       validate:  e => ["small", "medium", "large"].includes(e)
     },
-    someId: [Number, {value: false}], // either a number or false
   };
 ```
 
-Note: the props validation code is done by using the [validate utility function](utils.md#validate).
-
 ## Good Practices
 
 A `props` object is a collection of values that come from the parent. As such,

doc/reference/reactivity.md

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

doc/reference/slots.md

@@ -175,7 +175,7 @@ class Notebook extends Component {
     <div class="notebook">
       <div class="tabs">
         <t t-foreach="tabNames" t-as="tab" t-key="tab_index">
-          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab_index">
+          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab">
             <t t-esc="props.slots[tab].title"/>
           </span>
         </t>
@@ -239,12 +239,6 @@ And the child component that includes the slot can provide values like this:
 <t t-slot="foo" bool="other_var" num="5">
 ```
 
-or this:
-
-```xml
-<t t-slot="foo" t-props="someObject">
-```
-
 In the case of the default slot, you may declare the slot scope directly on the
 component itself:
 

doc/reference/templates.md

@@ -115,7 +115,7 @@ It is useful to explain the various rules that apply on these expressions:
    <div><p t-if="console.log(1)">NOT valid</p></div>
    ```
 
-2. it can use anything in the rendering context (which typically contains the properties of the component):
+2. it can use anything in the rendering context (typically, the component):
 
    ```xml
    <p t-if="user.birthday === today()">Happy bithday!</p>
@@ -290,11 +290,10 @@ If an expression evaluates to a falsy value, it will not be set at all:
 
 It is sometimes convenient to format an attribute with string interpolation. In
 that case, the `t-attf-` directive can be used. It is useful when we need to mix
-literal and dynamic elements, such as css classes. The dynamic elements can be
-specified with either `{{...}}` or `#{...}`:
+literal and dynamic elements, such as css classes.
 
 ```xml
-<div t-attf-foo="a {{value1}} is #{value2} of {{value3}} ]"/>
+<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>
 <!-- result if values are set to 1,2 and 3: <div foo="a 0 is 1 of 2 ]"></div> -->
 ```
 
@@ -376,16 +375,15 @@ An important difference should be made with the usual `QWeb` behaviour: Owl
 requires the presence of a `t-key` directive, to be able to properly reconcile
 renderings.
 
-`t-foreach` can iterate on any iterable, and also has special support for objects
-and maps, it will expose the key of the current iteration as the contents of the
-`t-as`, and the corresponding value with the same name and the suffix `_value`.
+`t-foreach` can iterate on an array (the current item will be the current value)
+or an object (the current item will be the current key).
 
-In addition to the name passed via t-as, `t-foreach` provides a few other useful
-variables (note: `$as` will be replaced with the name passed to `t-as`):
+In addition to the name passed via t-as, `t-foreach` provides a few other
+variables for various data points (note: `$as` will be replaced with the name
+passed to `t-as`):
 
-- `$as_value`: the current iteration value, identical to `$as` for arrays and
-  other iterables, but for objects and maps, it provides the value (where `$as`
-  provides the key)
+- `$as_value`: the current iteration value, identical to `$as` for lists and
+  integers, but for objects, it provides the value (where `$as` provides the key)
 - `$as_index`: the current iteration index (the first item of the iteration has index 0)
 - `$as_first`: whether the current item is the first of the iteration
   (equivalent to `$as_index == 0`)
@@ -478,7 +476,7 @@ not work with other iterables, such as `Set`. However, it is only a matter of
 using the `...` javascript operator. For example:
 
 ```xml
-<t t-foreach="[...items]" t-as="item">...</t>
+<t t-foreach="...items" t-as="item">...</t>
 ```
 
 The `...` operator will convert the `Set` (or any other iterables) into a list,
@@ -541,14 +539,6 @@ This can be used to define variables scoped to a sub template:
 <!-- "var" does not exist here -->
 ```
 
-Note: by default, the rendering context for a sub template is simply the current
-rendering context. However, it may be useful to be able to specify a specific
-object as context. This can be done by using the `t-call-context` directive:
-
-```xml
-<t t-call="other-template" t-call-context="obj"/>
-```
-
 ### Dynamic sub templates
 
 The `t-call` directive can also be used to dynamically call a sub template,

doc/reference/utils.md

@@ -8,7 +8,6 @@ functions are all available in the `owl.utils` namespace.
 - [`whenReady`](#whenready): executing code when DOM is ready
 - [`loadFile`](#loadfile): loading a file (useful for templates)
 - [`EventBus`](#eventbus): a simple EventBus
-- [`validate`](#validate): a validation function
 
 ## `whenReady`
 
@@ -57,24 +56,3 @@ bus.addEventListener("event", () => console.log("something happened"));
 
 bus.trigger("event"); // 'something happened' is logged
 ```
-
-## `validate`
-
-The `validate` function is a function that validates if a given object satisfies a
-specified schema. It is actually used by Owl itself to perform
-[props validation](props.md#props-validation). For example:
-
-```js
-validate(
-  { a: "hey" },
-  {
-    id: Number,
-    url: [Boolean, { type: Array, element: Number }],
-  }
-);
-
-// throws an error with the following information:
-//    - unknown key 'a',
-//    - 'id' is missing (should be a number),
-//    - 'url' is missing (should be a boolean or list of numbers),
-```

doc/tools/devtools.md

@@ -1,56 +0,0 @@
-# Owl Devtools Browser extension
-
-The owl devtools browser extension is an extension available on chrome or firefox which adds an owl tab
-to the browser devtools in order to inspect all owl apps that are present on any web page, their components
-and allows to interract with their data to a certain extend. There is also a profiler available to visualize
-the components' lifecycle and be able to trace their origin.
-
-See the [`devtools doc`](devtools_guide.md) for more information.
-
-## Install the extension manually (for devs)
-
-In the owl root folder:
-
-```bash
-npm install
-```
-
-For chrome:
-
-```bash
-npm run build:devtools-chrome
-```
-
-For firefox:
-
-```bash
-npm run build:devtools-firefox
-```
-
-You can also run:
-
-```bash
-npm run dev:devtools-chrome
-```
-
-or
-
-```bash
-npm run dev:devtools-firefox
-```
-
-to avoid recompiling owl and gain time if it has already been done.
-
-To run the extension:
-
-In google chrome: go to your chrome extensions admin panel, activate developer mode and click on `Load unpacked`.
-Select the output folder (dist/devtools) and that's it, your extension is active!
-There is a convenient refresh button on the extension card (still on the same admin page) to update your code.
-Do note that if you got some problems, you may need to completly remove and reload the extension to completly refresh the extension.
-
-In firefox: go to the address about:debugging#/runtime/this-firefox and click on `Load temporary Add-on...`.
-Select any file of the output folder (dist/devtools) and that's it, your extension is active!
-Here, you can use the reload button to refresh the extension.
-
-Note that you may have to open another window or reload your tab to see the extension working.
-Also note that the extension will only be active on pages that have a sufficient version of owl.

doc/tools/devtools_guide.md

@@ -1,150 +0,0 @@
-# Owl Devtools Guide
-
-## Information popup
-
-After having installed the extension, a new icon will be added to your extension bar.
-If you don't see it, you can pin the extension using the extensions popup.
-
-<img src="screenshots/extensions.png"/>
-
-Clicking on the owl icon will open the information popup. This popup is useful
-to know in advance whether owl is loaded in the tab or not. This is also indicated
-by the icon itself: if it is flipped upside-down, it means that owl is not loaded in the
-active tab. Do note that old versions of owl are not supported by the extension and will
-therefore be indicated either as obsolete or absent by the extension popup.
-
-<img src="screenshots/popup.png"/>
-
-## First steps
-
-When you are on a page where owl is detected, you can open your devtools either with
-right-click -> Inspect or using F12. In the devtools menu, you can search for the Owl
-tab which is added by the extension. It will be present by default at the end of the list but
-you can drag and drop it at the position you want for easier navigation in the future.
-
-<img src="screenshots/find_owl_tab.png"/>
-
-When you open the tab, you arrive on the Components view by default which is one of the
-two available tabs at the top. Here is an example of the devtools on the Odoo CRM app:
-
-<img src="screenshots/crm.png"/>
-
-## Components tab
-
-The components tab is separated into two sub windows: the components tree in the left and
-the component details in the right. The components tree will display all the different
-components that are present in the tab in the form of a tree. The root of this tree is
-actually the app which is not a component but can still be inspected by the devtools like
-one. There can also be multiple apps loaded in the page like in the following:
-
-<img src="screenshots/multi_apps.png"/>
-
-There is a convenient search bar at the top of the components tree which will help finding
-the components tou want in the tree and also, an element picker can be used to directly select
-the component you want to focus on in the page which is especially useful when trying to find
-what you want. Just click on the elements picker icon and click on the element you want to focus
-on in the page and it will be selected in the devtools accordingly. Hovering any element in the
-page in this mode will highlight it and the same happens anytime in the components tree.
-
-<img src="screenshots/picker.png"/>
-
-In the tree itself, the navigation is quite simple and is similar to the one in the Elements tab
-of the browser's devtools. It is possible to navigate with the keyboard using the arrow keys and
-multiple shortcuts are available in a custom menu when right-clicking on a component. This menu
-allows to expand/fold all the children nodes of a component, fold its direct children only, inspect
-the source code of the component, send it as a global variable in the console, go to the Elements tab
-and focus on its content, force a rerender of the component, send its observed states to the console
-as a global variable, inspect its compiled template in the Sources tab or send its raw template
-to the console.
-
-<img src="screenshots/menu.png"/>
-
-The component details window in the right will show the component that is currently selected as well
-as its env, props, observed states and all the other variables that are present on its instance.
-While the props and the env are already present on the actual instance of the component and are
-pretty explicit by themselves, the observed state value is a bit more complicated to grasp.
-
-The observed state is actually information about which variables are observed by the component
-which will trigger a rerender of the component when it is modified. The keys represent which part of the
-variable is actually observed and the target is the actual variable. For simplicity, the properties
-that are not observed by the component are greyed out while the others are in bold. This means that
-editing bold ones will trigger a rerender while the greyed out ones will not.
-
-<img src="screenshots/states.png"/>
-
-In the given example, we have two keys/target pairs for two different variables. The first one indicates
-that adding or removing an element to the array will trigger a rerender since the length will have changed.
-Replacing the element at index 0, 1 or 2 will also have the same effect as implied by the keys. It doesn't
-mean that editing the properties of element at index 0, 1 or 2 will rerender the component though. It may
-be the case for some but this will be described in another keys/target pair. The second keys/target pair
-is actually the element at index 0 of the first pair. It only has id in the keys meaning that only the
-id property will actually trigger a rerender the component when modified. Be aware however that the other
-properties may be in the observed state of another component like a child one in this case. A greyed out
-property only implies it is not reactive for the selected component and not for the others.
-
-The navigation inside the properties is also similar to the one in console variables: properties have
-their prototype displayed and getters will get their value when clicked on (...). It is also possible to
-send any property to the console using the right-click context menu on it and functions can be inspected
-in the sources tab as well.
-
-<img src="screenshots/function_menu.png"/>
-
-There are several icons available to perform several of the actions described before in the components
-tree context menu and all these actions are also available by opening the menu by right-clicking on the
-component's name. Using the left click on the component's name will focus it in the components tree.
-
-It is also possible to edit any of the leaf node properties. To do so, you must double click on the
-property's value and modify it using the freshly created input then press enter to apply the changes.
-Do note that the modified values should be written in JSON format in order to be valid (examples:
-89, "yes", undefined, null, \["hello", 15\], {"a": 1}, true, ...). Whether it has an impact on the
-component or not and whether it produces an error is the responsability of the user.
-
-<img src="screenshots/edit.png"/>
-
-## Profiler
-
-The profiler tab is the other tab of the owl devtools. It consists in an actions bar at the top and
-a tree/list of events related to the owl components' renders. Here is an example of the events launched
-when entering the Odoo Crm app.
-
-<img src="screenshots/profiler.png"/>
-
-In the initial state, no event is displayed. You need to activate the recording of events before they
-are intercepted by the devtools using the record button.
-
-<img src="screenshots/record.png"/>
-
-The second button is used to clear all the events that have been recorded. The select can be used to
-switch between the tree view (which shows the causality between renders) and the events log view which
-simply displays the events in the exact order they were triggered. In this view, you can expand the create,
-update and destroy events which reveals the component that initiated the event.
-
-<img src="screenshots/events_log.png"/>
-
-The third button is only visible in tree view and allows to fold all the render events that were recorded.
-Some actions are also available when using the right-click on any event of the tree view for navigation
-purpose in a similar fashion as in the components tree.
-
-<img src="screenshots/tree_actions.png"/>
-
-There is also the Trace Renderings and Trace Subscriptions features. These features are independant of the
-recording of events and have no effect on the profiler tab. The Trace Renderings option is used to log in
-the console all the render events and allows to show their traceback information. Similarly, the Trace
-Subscriptions option logs all the properties that caused a render event and also allows to see the traceback
-of the modification
-
-<img src="screenshots/trace_rendering.png"/>
-<img src="screenshots/trace_subscriptions.png"/>
-
-## Options
-
-The owl devtools extension has a dark mode feature which defaults to your general devtools settings and can
-be toggled using the sun/moon icon at the top-right corner of the tab. All the examples above were created
-with the dark mode enabled. There is also a refresh button to completely reset the owl devtools.
-
-<img src="screenshots/darkmode.png"/>
-
-## Troubleshooting
-
-If the feedback from the page to the devtools seems to be cut, just close the devtools and refresh the page.
-This will eventually happen any time a tab stays opened for too long without being refreshed.

docs/assets/highlight.tomorrow.css

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

docs/assets/main.css

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

docs/assets/milligram.css

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

docs/assets/normalize.css

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

docs/counter.js

@@ -1,15 +0,0 @@
-import { mount, Component, useState, loadFile } from "@odoo/owl";
-
-class Counter extends Component {
-  static template = "Counter";
-  setup() {
-    this.state = useState({ value: 0 });
-  }
-
-  increment() {
-    this.state.value++;
-  }
-}
-const templates = await loadFile("./counter.xml");
-
-mount(Counter, document.getElementById("app-container"), { templates });

docs/counter.xml

@@ -1,7 +0,0 @@
-<templates>
-  <t t-name="Counter">
-    <button t-on-click="increment">
-      Click Me! [<t t-esc="state.value"/>]
-    </button>
-  </t>
-</templates>

docs/display_code.js

@@ -1,9 +0,0 @@
-import { loadFile } from "@odoo/owl";
-
-for (const [className, type] of [["xml", "xml"], ["javascript", "js"]]) {
-    loadFile(`./counter.${type}`).then(code => {
-        const el = document.querySelector(`code.${className}`);
-        el.textContent = code;
-        hljs.highlightBlock(el);
-    })
-}

docs/index.html

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

docs/playground/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>OWL Playground</title>
-    <link rel="icon" href="data:,">
-
-    <script src="libs/ace.js" type="text/javascript" charset="utf-8"></script>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
-    
-    <!-- Application JS/CSS -->
-    <link rel="stylesheet" href="playground.css">
-    <script type="module" src="playground.js"></script>
-  </head>
-  <body>
-  </body>
-</html>

docs/playground/samples/benchmark/benchmark.css

@@ -1,11 +0,0 @@
-tr.danger {
-  font-weight: bold;
-}
-
-.remove:hover {
-  font-weight: bold;
-}
-.remove {
-  cursor: pointer;
-}
-  

docs/playground/samples/benchmark/benchmark.js

@@ -1,124 +0,0 @@
-import { Component, mount, useState, onPatched} from "@odoo/owl";
-
-// -----------------------------------------------------------------------------
-// Data generation
-// -----------------------------------------------------------------------------
-
-let idCounter = 1;
-const adjectives = [
-    "pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain",
-    "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd",
-    "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
-const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
-const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
-
-function _random (max) { return Math.round(Math.random() * 1000) % max; };
-
-function buildData(count) {
-    const data = new Array(count);
-    for (let i = 0; i < count; i++) {
-        const label = `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`;
-        data[i] = {
-            id: idCounter++,
-            label,
-        };
-    }
-    return data;
-}
-
-// -----------------------------------------------------------------------------
-// Components
-// -----------------------------------------------------------------------------
-class Button extends Component {
-  static template = "Button";
-}
-
-
-class Row extends Component {
-  static template = "Row";
-}
-
-class Root extends Component {
-  static template = "Root";
-  static components = { Button, Row };
-
-  setup() {
-      this.state = useState({
-          rows: [],
-          selectedRowId: null
-      });
-      this.benchmarking = false;
-      onPatched(() => {
-          if (this.benchmarking) {
-              this.stop();
-          }
-      });
-    }
-    
-    start(descr) {
-        this.benchmarking = `[${descr}]`;
-        console.time(this.benchmarking);
-    }
-    stop() {
-        console.timeEnd(this.benchmarking);
-        this.benchmarking = false;  
-    }
-
-    run() {
-        this.start('add1000');
-        this.state.rows = buildData(1000);
-        this.state.selectedRowId = null;
-    }
-    
-    runLots() {
-        this.start('add10_000');
-        this.state.rows = buildData(10_000);
-        this.state.selectedRowId = null;
-    }
-    
-    add() {
-        this.start('append1000');
-        this.state.rows = this.state.rows.concat(buildData(1000));
-    }
-    
-    update() {
-        this.start('update1/10th');
-        let index = 0;
-        const rows = this.state.rows;
-        while (index < rows.length) {
-            rows[index].label = rows[index].label + " !!!";
-            index += 10;
-        }
-    }
-    
-    clear() {
-        this.start('clear');
-        this.state.rows = [];
-        this.state.selectedRowId = null;
-    }
-    
-    swapRows() {
-        this.start('swap');
-        const rows = this.state.rows;
-        if (rows.length > 998) {
-            let tmp = rows[1];
-            rows[1] = rows[998];
-            rows[998] = tmp;
-        }
-    }
-    
-    selectRow(id) {
-        this.start('select');
-        this.state.selectedRowId = id;
-    }
-    
-    removeRow(id) {
-        this.start('remove1');
-        const rows = this.state.rows;
-        rows.splice(rows.findIndex(row => row.id === id), 1);
-    }
-}
-
-
-// dev=false for benchmarking. we don't want to benchmark dev code!
-mount(Root, document.body, { templates: TEMPLATES, dev: false });

docs/playground/samples/benchmark/benchmark.xml

@@ -1,52 +0,0 @@
-<templates>
-    <t t-name="Button">
-        <div class='col-sm-6 smallpad'>
-            <button t-att-id="props.id" class='btn btn-primary btn-block' type='button' t-on-click="props.onClick">
-                <t t-esc="props.text"/>
-            </button>
-        </div>
-    </t>
-    <t t-name="Row">
-        <tr t-att-class="props.isSelected ? 'danger' : ''">
-            <td class="col-md-1" t-esc="props.row.id" />
-            <td class="col-md-4">
-                <a t-on-click="() => props.onSelect(props.row.id)" t-esc="props.row.label" />
-            </td>
-            <td class="col-md-1">
-                <a t-on-click="() =>  props.onRemove(props.row.id)" class="remove">[x]
-                    <span class='glyphicon glyphicon-remove' aria-hidden="true" />
-                </a>
-            </td>
-            <td class='col-md-6'/>
-        </tr>
-    </t>
-    <t t-name="Root">
-        <div class='container'>
-            <div class='jumbotron'>
-                <div class='row'>
-                    <div class='col-md-6'>
-                        <h1>Owl Keyed</h1>
-                    </div>
-                    <div class='col-md-6'>
-                        <div class='row'>
-                            <Button id="'run'" onClick.bind="run" text="'Create 1,000 rows'" />
-                            <Button id="'runlots'" onClick.bind="runLots" text="'Create 10,000 rows'" />
-                            <Button id="'add'" onClick.bind="add" text="'Append 1,000 rows'" />
-                            <Button id="'update'" onClick.bind="update" text="'Update every 10th row'" />
-                            <Button id="'clear'" onClick.bind="clear" text="'Clear'" />
-                            <Button id="'swaprows'" onClick.bind="swapRows" text="'Swap Rows'" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <table class='table table-hover table-striped test-data'>
-                <tbody>
-                    <t t-foreach="state.rows" t-as="row" t-key="row.id">
-                        <Row row="row" isSelected="row.id === state.selectedRowId" onSelect.bind="selectRow" onRemove.bind="removeRow"/>
-                    </t>
-                </tbody>
-            </table>
-            <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
-        </div>
-    </t>
-</templates>

docs/playground/samples/components/components.css

@@ -1,10 +0,0 @@
-.greeter {
-    font-size: 20px;
-    width: 300px;
-    height: 100px;
-    margin: 5px;
-    text-align: center;
-    line-height: 100px;
-    background-color: #eeeeee;
-    user-select: none;
-}

docs/playground/samples/components/components.js

@@ -1,26 +0,0 @@
-// In this example, we show how components can be defined and created.
-import { Component, useState, mount } from "@odoo/owl";
-
-class Greeter extends Component {
-    static template = "Greeter";
-    
-    setup() {
-        this.state = useState({ word: 'Hello' });
-    }
-
-    toggle() {
-        this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi';
-    }
-}
-
-// Main root component
-class Root extends Component {
-    static components = { Greeter };
-    static template = "Root"
-
-    setup() {
-        this.state = useState({ name: 'World'});
-    }
-}
-
-mount(Root, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/components/components.xml

@@ -1,9 +0,0 @@
-<templates>
-  <div t-name="Greeter" class="greeter" t-on-click="toggle">
-    <t t-esc="state.word"/>, <t t-esc="props.name"/>
-  </div>
-
-  <t t-name="Root">
-    <Greeter name="state.name"/>
-  </t>
-</templates>

docs/playground/samples/custom_hooks/custom_hooks.css

@@ -1,6 +0,0 @@
-
-button {
-    width: 120px;
-    height: 35px;
-    font-size: 16px;
-}

docs/playground/samples/custom_hooks/custom_hooks.js

@@ -1,40 +0,0 @@
-// In this example, we show how hooks can be used or defined.
-import { Component, mount, useState, onWillDestroy } from "@odoo/owl";
-
-// We define here a custom behaviour: this hook tracks the state of the mouse
-// position
-function useMouse() {
-    const position = useState({x:0, y: 0});
-
-    function update(e) {
-      position.x = e.clientX;
-      position.y = e.clientY;
-    }
-    window.addEventListener('mousemove', update);
-    onWillDestroy(() => {
-        window.removeEventListener('mousemove', update);
-    });
-
-    return position;
-}
-
-
-// Main root component
-class Root extends Component {
-    static template = "Root";
-
-    setup() {
-        // simple state hook (reactive object)
-        this.counter = useState({ value: 0 });
-
-        // this hooks is bound to the 'mouse' property.
-        this.mouse = useMouse();
-    }
-
-    increment() {
-        this.counter.value++;
-    }
-}
-
-// Application setup
-mount(Root, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/custom_hooks/custom_hooks.xml

@@ -1,7 +0,0 @@
-
-<templates>
-  <div t-name="Root">
-    <button t-on-click="increment">Click! <t t-esc="counter.value"/></button>
-    <div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>
-  </div>
-</templates>

docs/playground/samples/form/form.js

@@ -1,22 +0,0 @@
-// This example illustrate how the t-model directive can be used to synchronize
-// data between html inputs (and select/textareas) and the state of a component.
-// Note that there are two controls with t-model="color": they are totally
-// synchronized.
-import { Component, useState, mount } from "@odoo/owl";
-
-class Form extends Component {
-  static template = "Form";
-
-  setup() {
-    this.state = useState({
-      text: "",
-      othertext: "",
-      number: 11,
-      color: "",
-      bool: false
-    });
-  }
-}
-
-// Application setup
-mount(Form, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/form/form.xml

@@ -1,37 +0,0 @@
-<templates>
-  <div t-name="Form">
-    <h1>Form</h1>
-    <div>
-      Text (immediate): <input t-model="state.text"/>
-    </div>
-    <div>
-      Other text (lazy): <input t-model.lazy="state.othertext"/>
-    </div>
-    <div>
-      Number: <input  t-model.number="state.number"/>
-    </div>
-    <div>
-      Boolean: <input  type="checkbox" t-model="state.bool"/>
-    </div>
-    <div>
-      Color, with a select:
-      <select  t-model="state.color">
-        <option value="">Select a color</option>
-        <option value="red">Red</option>
-        <option value="blue">Blue</option>
-      </select>
-    </div>
-    <div>
-      Color, with radio buttons:
-        <span><input type="radio" name="color" id="red" value="red" t-model="state.color"/><label for="red">Red</label></span>
-        <span><input type="radio" name="color" id="blue" value="blue" t-model="state.color"/><label for="blue">Blue</label></span>
-    </div>
-    <hr/>
-    <h1>State</h1>
-    <div>Text: <t t-esc="state.text"/></div>
-    <div>Other Text: <t t-esc="state.othertext"/></div>
-    <div>Number: <t t-esc="state.number"/></div>
-    <div>Boolean: <t t-if="state.bool">True</t><t t-else="">False</t></div>
-    <div>Color: <t t-esc="state.color"/></div>
-  </div>
-</templates>

docs/playground/samples/jsconfig.json

@@ -1,7 +0,0 @@
-{
-    "compilerOptions": {
-        "paths": {
-            "owl": ["../../../src/index.ts"],
-        },
-    }
-}

docs/playground/samples/lifecycle_demo/lifecycle_demo.css

@@ -1,11 +0,0 @@
-button {
-    font-size: 18px;
-    margin: 5px;
-}
-
-.demo {
-    margin: 10px;
-    padding: 10px;
-    background-color: #dddddd;
-    width: 250px;
-}

docs/playground/samples/lifecycle_demo/lifecycle_demo.js

@@ -1,68 +0,0 @@
-// This example shows all the possible lifecycle hooks
-//
-// The root component controls a sub component (DemoComponent). It logs all its lifecycle
-// methods in the console.  Try modifying its state by clicking on it, or by
-// clicking on the two main buttons, and look into the console to see what
-// happens.
-import {
-    Component,
-    useState,
-    mount,
-    useComponent,
-    onWillStart,
-    onMounted,
-    onWillUnmount,
-    onWillUpdateProps,
-    onPatched,
-    onWillPatch,
-    onWillRender,
-    onRendered,
-    onWillDestroy,
-} from "@odoo/owl";
-  
-function useLogLifecycle() {
-    const component = useComponent();
-    const name = component.constructor.name;
-    onWillStart(() => console.log(`${name}:willStart`));
-    onMounted(() => console.log(`${name}:mounted`));
-    onWillUpdateProps(() => console.log(`${name}:willUpdateProps`));
-    onWillRender(() => console.log(`${name}:willRender`));
-    onRendered(() => console.log(`${name}:rendered`));
-    onWillPatch(() => console.log(`${name}:willPatch`));
-    onPatched(() => console.log(`${name}:patched`));
-    onWillUnmount(() => console.log(`${name}:willUnmount`));
-    onWillDestroy(() => console.log(`${name}:willDestroy`));
-}
-
-class DemoComponent extends Component {
-    static template = "DemoComponent";
-
-    setup() {
-        useLogLifecycle();
-        this.state = useState({ n: 0 });
-    }
-    increment() {
-        this.state.n++;
-    }
-}
-
-class Root extends Component {
-    static template = "Root";
-    static components = { DemoComponent };
-
-    setup() {
-        useLogLifecycle();
-        this.state = useState({ n: 0, flag: true });
-    }
-
-    increment() {
-        this.state.n++;
-    }
-
-    toggleSubComponent() {
-        this.state.flag = !this.state.flag;
-    }
-}
-
-mount(Root, document.body, { templates: TEMPLATES, dev: true });
-  

docs/playground/samples/lifecycle_demo/lifecycle_demo.xml

@@ -1,15 +0,0 @@
-<templates>
-  <div t-name="DemoComponent" t-on-click="increment" class="demo">
-    <div>Demo Sub Component</div>
-    <div>(click on me to update me)</div>
-    <div>Props: <t t-esc="props.n"/>, State: <t t-esc="state.n"/>. </div>
-  </div>
-
-  <div t-name="Root">
-    <button t-on-click="increment">Increment Parent State</button>
-    <button t-on-click="toggleSubComponent">Toggle SubComponent</button>
-    <div t-if="state.flag">
-      <DemoComponent n="state.n"/>
-    </div>
-  </div>
-</templates>

docs/playground/samples/responsive_app/responsive_app.css

@@ -1,56 +0,0 @@
-body {
-    margin: 0;
-}
-
-.app {
-    height: 100%;
-    flex-direction: column;
-}
-
-.app.desktop {
-    display: flex;
-}
-
-.navbar {
-    flex: 0 0 30px;
-    height: 30px;
-    background-color: cadetblue;
-    color: white;
-    line-height: 30px;
-}
-
-.controlpanel {
-    flex: 0 0 100px;
-    height: 100px;
-    background-color: #dddddd;
-    padding: 8px;
-}
-
-.content-wrapper {
-    flex: 1 1 auto;
-    position: relative;
-}
-
-.content {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-}
-
-.formview {
-    overflow-y: auto;
-    flex: 1 1 60%;
-    min-height: 200px;
-    padding: 8px;
-}
-
-.chatter {
-    overflow-y: auto;
-    flex: 1 1 40%;
-    background-color: #eeeeee;
-    color: #333333;
-    padding: 8px;
-}

docs/playground/samples/responsive_app/responsive_app.js

@@ -1,118 +0,0 @@
-// In this example, we show how one can design an application that is responsive:
-// its UI is different in mobile mode or in desktop mode.
-//
-// The main idea is to have a "isMobile" key in the environment, then listen
-// to resize events and update the env if needed.  Then, the whole interface
-// will be updated, creating and destroying components as needed.
-//
-// To see this in action, try resizing the window.  The application will switch
-// to mobile mode whenever it has less than 768px.
-import { Component, useState, mount, reactive, useEnv } from "@odoo/owl";
-
-//------------------------------------------------------------------------------
-// Helpers
-//------------------------------------------------------------------------------
-
-function debounce(func, wait, immediate) {
-  let timeout;
-  return function () {
-    const context = this;
-    const args = arguments;
-    function later() {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    }
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-}
-
-//------------------------------------------------------------------------------
-// Responsive hook
-//------------------------------------------------------------------------------
-
-function createUI() {
-  const getIsMobile = () => window.innerWidth <= 768;
-
-  const ui = reactive({ isMobile: getIsMobile() });
-
-    const updateEnv = debounce(() => {
-      const isMobile = getIsMobile();
-        if (ui.isMobile !== isMobile) {
-            ui.isMobile = isMobile;
-        }
-    }, 15);
-    window.addEventListener("resize", updateEnv);
-    return ui;
-}
-
-function useUI() {
-  const env = useEnv();
-  return useState(env.ui);
-}
-
-
-//------------------------------------------------------------------------------
-// Components
-//------------------------------------------------------------------------------
-class Navbar extends Component {
-  static template = "Navbar";
-}
-
-class MobileSearchView extends Component {
-  static template = "MobileSearchView";
-}
-
-class ControlPanel extends Component {
-  static template = "ControlPanel";
-  static components = { MobileSearchView };
-  setup() {
-    this.ui = useUI();
-  }
-}
-
-class AdvancedComponent extends Component {
-  static template = "AdvancedComponent";
-}
-
-class FormView extends Component {
-  static template = "FormView";
-  static components = { AdvancedComponent };
-  setup() {
-    this.ui = useUI();
-  }
-}
-
-class Chatter extends Component {
-    static template = "Chatter";
-
-    setup() {
-        this.messages = Array.from(Array(100).keys());
-    }
-}
-
-class Root extends Component {
-  static template = "Root";
-  static components = { Navbar, ControlPanel, FormView, Chatter };
-
-  setup() {
-    this.ui = useUI();
-  }
-}
-
-
-
-//------------------------------------------------------------------------------
-// Application Startup
-//------------------------------------------------------------------------------
-const env = {
-  ui: createUI()
-};
-
-mount(Root, document.body, { templates: TEMPLATES, env, dev: true });

docs/playground/samples/responsive_app/responsive_app.xml

@@ -1,42 +0,0 @@
-<templates>
-  <div t-name="Navbar" class="navbar">Navbar</div>
-
-  <div t-name="ControlPanel" class="controlpanel">
-    <h2>Control Panel</h2>
-    <MobileSearchView t-if="ui.isMobile" />
-  </div>
-
-  <div t-name="FormView" class="formview">
-    <h2>Form View</h2>
-    <AdvancedComponent t-if="!ui.isMobile" />
-  </div>
-
-  <div t-name="Chatter" class="chatter">
-    <h2>Chatter</h2>
-    <t t-foreach="messages" t-as="item" t-key="item"><div>Message <t t-esc="item"/></div></t>
-  </div>
-
-  <div t-name="MobileSearchView">Mobile searchview</div>
-
-  <div t-name="AdvancedComponent">
-    This component is only created in desktop mode.
-    <button>Button!</button>
-  </div>
-
-  <t t-name="maincontent">
-    <FormView />
-    <Chatter />
-  </t>
-  <div t-name="Root" class="app" t-att-class="{mobile: ui.isMobile, desktop: !ui.isMobile}">
-    <Navbar/>
-    <ControlPanel/>
-    <div class="content-wrapper" t-if="!ui.isMobile">
-      <div class="content">
-        <t t-call="maincontent"/>
-      </div>
-    </div>
-    <t t-else="">
-      <t t-call="maincontent"/>
-    </t>
-  </div>
-</templates>

docs/playground/samples/single_file_component/single_file_component.js

@@ -1,28 +0,0 @@
-// This example illustrates how one can write Owl components with
-// inline templates.
-
-import { Component, useState, xml, mount } from "@odoo/owl";
-
-// Counter component
-class Counter extends Component {
-  static template = xml`
-    <button t-on-click="() => state.value++">
-      Click! [<t t-esc="state.value"/>]
-    </button>`;
-
-  state = useState({ value: 0 })
-}
-
-// Root
-class Root extends Component {
-  static template = xml`
-    <div>
-      <Counter/>
-      <Counter/>
-    </div>`;
-  
-  static components = { Counter };
-}
-
-// Application setup
-mount(Root, document.body, { templates: TEMPLATES, dev: true});

docs/playground/samples/slots/slots.css

@@ -1,43 +0,0 @@
-.main {
-    display: flex;
-}
-
-.card {
-    display: flex;
-    flex-direction: column;
-    background-color: #eeeeee;
-    width: 200px;
-    height: 100px;
-    margin: 10px;
-    border: 1px solid gray;
-}
-
-.card.full {
-    height: 100px;
-}
-
-.card.small {
-    height: 25px;
-}
-
-.card-title {
-    flex: 0 0 25px;
-    font-weight: bold;
-    background-color: darkcyan;
-    color: white;
-    padding: 2px;
-}
-
-.card-title button {
-    float: right;
-}
-
-.card-content {
-    flex: 1 1 auto;
-    padding: 5px;
-    border-top: 1px solid white;
-}
-
-.card-footer {
-    border-top: 1px solid white;
-}

docs/playground/samples/slots/slots.js

@@ -1,49 +0,0 @@
-// We show here how slots can be used to create generic components.
-// In this example, the Card component is basically only a container. It is not
-// aware of its content. It just knows where it should be (with t-slot).
-// The parent component define the content with t-set-slot.
-//
-// Note that the t-on-click event, defined in the Root template, is executed in
-// the context of the Root component, even though it is inside the Card component
-import { Component, useState, mount } from "@odoo/owl";
-
-class Card extends Component {
-  static template = "Card";
-  
-  setup() {
-    this.state = useState({ showContent: true });
-  }
-
-  toggleDisplay() {
-    this.state.showContent = !this.state.showContent;
-  }
-}
-
-class Counter extends Component {
-  static template = "Counter";
-  
-  setup() {
-    this.state = useState({val: 1});
-  }
-
-  inc() {
-    this.state.val++;
-  }
-}
-
-// Main root component
-class Root extends Component {
-  static template = "Root"
-  static components = { Card, Counter };
-  
-  setup() {
-    this.state = useState({a: 1, b: 3});
-  }
-
-  inc(key, delta) {
-    this.state[key] += delta;
-  }
-}
-
-// Application setup
-mount(Root, document.body, { templates: TEMPLATES, dev: true});

docs/playground/samples/slots/slots.xml

@@ -1,33 +0,0 @@
-<templates>
-  <div t-name="Card" class="card" t-att-class="state.showContent ? 'full' : 'small'">
-    <div class="card-title">
-      <t t-esc="props.title"/><button t-on-click="toggleDisplay">Toggle</button>
-    </div>
-    <t t-if="state.showContent">
-      <div class="card-content" >
-        <t t-slot="content"/>
-      </div>
-      <div class="card-footer">
-        <t t-slot="footer"/>
-      </div>
-    </t>
-  </div>
-
-  <div t-name="Counter">
-    <t t-esc="state.val"/><button t-on-click="inc">Inc</button>
-  </div>
-
-  <div t-name="Root" class="main">
-    <Card title="'Title card A'">
-      <t t-set-slot="content">Content of card 1...  [<t t-esc="state.a"/>]</t>
-      <t t-set-slot="footer"><button t-on-click="() => this.inc('a', 1)">Increment A</button></t>
-    </Card>
-    <Card title="'Title card B'">
-      <t t-set-slot="content">
-        <div>Card 2... [<t t-esc="state.b"/>]</div>
-        <Counter />
-      </t>
-      <t t-set-slot="footer"><button t-on-click="() => this.inc('b', -1)">Decrement B</button></t>
-    </Card>
-  </div>
-</templates>

docs/playground/samples/todo_app/todo_app.css

@@ -1,379 +0,0 @@
-html,body {
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  font-size: 100%;
-  vertical-align: baseline;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  -webkit-appearance: none;
-  appearance: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
-  line-height: 1.4em;
-  background: #f5f5f5;
-  color: #4d4d4d;
-  min-width: 230px;
-  max-width: 550px;
-  margin: 0 auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-weight: 300;
-}
-
-:focus {
-  outline: 0;
-}
-
-.hidden {
-  display: none;
-}
-
-.todoapp {
-  background: #fff;
-  margin: 130px 0 40px 0;
-  position: relative;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
-}
-
-.todoapp input::-webkit-input-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-.todoapp input::-moz-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-.todoapp input::input-placeholder {
-  font-style: italic;
-  font-weight: 300;
-  color: #e6e6e6;
-}
-
-.todoapp h1 {
-  position: absolute;
-  top: -155px;
-  width: 100%;
-  font-size: 100px;
-  font-weight: 100;
-  text-align: center;
-  color: rgba(175, 47, 47, 0.15);
-  -webkit-text-rendering: optimizeLegibility;
-  -moz-text-rendering: optimizeLegibility;
-  text-rendering: optimizeLegibility;
-}
-
-.new-todo,
-.edit {
-  position: relative;
-  margin: 0;
-  width: 100%;
-  font-size: 24px;
-  font-family: inherit;
-  font-weight: inherit;
-  line-height: 1.4em;
-  border: 0;
-  color: inherit;
-  padding: 6px;
-  border: 1px solid #999;
-  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-  box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.new-todo {
-  padding: 16px 16px 16px 60px;
-  border: none;
-  background: rgba(0, 0, 0, 0.003);
-  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
-}
-
-.main {
-  position: relative;
-  z-index: 2;
-  border-top: 1px solid #e6e6e6;
-}
-
-.toggle-all {
-  width: 1px;
-  height: 1px;
-  border: none; /* Mobile Safari */
-  opacity: 0;
-  position: absolute;
-  right: 100%;
-  bottom: 100%;
-}
-
-.toggle-all + label {
-  width: 60px;
-  height: 34px;
-  font-size: 0;
-  position: absolute;
-  top: -52px;
-  left: -13px;
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-
-.toggle-all + label:before {
-  content: "❯";
-  font-size: 22px;
-  color: #e6e6e6;
-  padding: 10px 27px 10px 27px;
-}
-
-.toggle-all:checked + label:before {
-  color: #737373;
-}
-
-.todo-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.todo-list li {
-  position: relative;
-  font-size: 24px;
-  border-bottom: 1px solid #ededed;
-}
-
-.todo-list li:last-child {
-  border-bottom: none;
-}
-
-.todo-list li.editing {
-  border-bottom: none;
-  padding: 0;
-}
-
-.todo-list li.editing .edit {
-  display: block;
-  width: calc(100% - 43px);
-  padding: 12px 16px;
-  margin: 0 0 0 43px;
-}
-
-.todo-list li.editing .view {
-  display: none;
-}
-
-.todo-list li .toggle {
-  text-align: center;
-  width: 40px;
-  /* auto, since non-WebKit browsers doesn't support input styling */
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  margin: auto 0;
-  border: none; /* Mobile Safari */
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.todo-list li .toggle {
-  opacity: 0;
-}
-
-.todo-list li .toggle + label {
-  /*
-        Firefox requires \`#\` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
-        IE and Edge requires *everything* to be escaped to render, so we do that instead of just the \`#\` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
-    */
-  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center left;
-}
-
-.todo-list li .toggle:checked + label {
-  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
-}
-
-.todo-list li label {
-  word-break: break-all;
-  padding: 15px 15px 15px 60px;
-  display: block;
-  line-height: 1.2;
-  transition: color 0.4s;
-}
-
-.todo-list li.completed label {
-  color: #d9d9d9;
-  text-decoration: line-through;
-}
-
-.todo-list li .destroy {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 10px;
-  bottom: 0;
-  width: 40px;
-  height: 40px;
-  margin: auto 0;
-  font-size: 30px;
-  color: #cc9a9a;
-  margin-bottom: 11px;
-  transition: color 0.2s ease-out;
-}
-
-.todo-list li .destroy:hover {
-  color: #af5b5e;
-}
-
-.todo-list li .destroy:after {
-  content: "×";
-}
-
-.todo-list li:hover .destroy {
-  display: block;
-}
-
-.todo-list li .edit {
-  display: none;
-}
-
-.todo-list li.editing:last-child {
-  margin-bottom: -1px;
-}
-
-.footer {
-  color: #777;
-  padding: 10px 15px;
-  height: 20px;
-  text-align: center;
-  border-top: 1px solid #e6e6e6;
-}
-
-.footer:before {
-  content: "";
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 50px;
-  overflow: hidden;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
-    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
-    0 17px 2px -6px rgba(0, 0, 0, 0.2);
-}
-
-.todo-count {
-  float: left;
-  text-align: left;
-}
-
-.todo-count strong {
-  font-weight: 300;
-}
-
-.filters {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: absolute;
-  right: 0;
-  left: 0;
-}
-
-.filters li {
-  display: inline;
-}
-
-.filters li a {
-  color: inherit;
-  margin: 3px;
-  padding: 3px 7px;
-  text-decoration: none;
-  border: 1px solid transparent;
-  border-radius: 3px;
-}
-
-.filters li a:hover {
-  border-color: rgba(175, 47, 47, 0.1);
-}
-
-.filters li a.selected {
-  border-color: rgba(175, 47, 47, 0.2);
-}
-
-.clear-completed,
-html .clear-completed:active {
-  float: right;
-  position: relative;
-  line-height: 20px;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.clear-completed:hover {
-  text-decoration: underline;
-}
-
-.info {
-  margin: 65px auto 0;
-  color: #bfbfbf;
-  font-size: 10px;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  text-align: center;
-}
-
-.info p {
-  line-height: 1;
-}
-
-.info a {
-  color: inherit;
-  text-decoration: none;
-  font-weight: 400;
-}
-
-.info a:hover {
-  text-decoration: underline;
-}
-
-/*
-    Hack to remove background from Mobile Safari.
-    Can't use it globally since it destroys checkboxes in Firefox
-*/
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .toggle-all,
-  .todo-list li .toggle {
-    background: none;
-  }
-
-  .todo-list li .toggle {
-    height: 40px;
-  }
-}
-
-@media (max-width: 430px) {
-  .footer {
-    height: 50px;
-  }
-
-  .filters {
-    bottom: 10px;
-  }
-}
-
-.filters a {
-    cursor: pointer;
-}

docs/playground/samples/todo_app/todo_app.js

@@ -1,182 +0,0 @@
-// This example is an implementation of the TodoList application, from the
-// www.todomvc.com project.  This is a non trivial application with some
-// interesting user interactions. It uses the local storage for persistence.
-//
-// In this implementation, we use the owl reactivity mechanism.
-import { Component, useState, mount, useRef, reactive, useEnv, useEffect } from "@odoo/owl";
-
-//------------------------------------------------------------------------------
-// Constants, helpers
-//------------------------------------------------------------------------------
-const ENTER_KEY = 13;
-const ESC_KEY = 27;
-
-function useAutofocus(name) {
-    let ref = useRef(name);
-    useEffect(el => el && el.focus(), () => [ref.el]);
-}
-
-function useStore() {
-    const env = useEnv();
-    return useState(env.store);
-}
-
-//------------------------------------------------------------------------------
-// Task store
-//------------------------------------------------------------------------------
-class TaskList {
-    constructor(tasks) {
-        this.tasks = tasks || [];
-        const taskIds = this.tasks.map((t) => t.id);
-        this.nextId = taskIds.length ? Math.max(...taskIds) + 1 : 1;
-    }
-
-    addTask(text) {
-        text = text.trim();
-        if (text) {
-            const task = {
-                id: this.nextId++,
-                text: text,
-                isCompleted: false,
-            };
-            this.tasks.push(task);
-        }
-    }
-
-    toggleTask(task) {
-        task.isCompleted = !task.isCompleted;
-    }
-
-    toggleTask(id) {
-        const task = this.tasks.find(t => t.id === id);
-        task.isCompleted = !task.isCompleted;
-    }
-
-    toggleAll(value) {
-        for (let task of this.tasks) {
-            task.isCompleted = value;
-        }
-    }
-    
-    clearCompleted() {
-        const tasks = this.tasks.filter(t => t.isCompleted);
-        for (let task of tasks) {
-            this.deleteTask(task);
-        }
-    }
-    
-    deleteTask(id) {
-        const index = this.tasks.findIndex((t) => t.id === id);
-        this.tasks.splice(index, 1);
-    }
-    
-    updateTask(id, text) {
-        const value = text.trim();
-        if (!value) {
-            this.deleteTask(id);
-        } else {
-            const task = this.tasks.find(t => t.id === id);
-            task.text = value;
-        }
-    }
-}
-
-function createTaskStore() {
-    const saveTasks = () => localStorage.setItem("todoapp", JSON.stringify(taskStore.tasks));
-    const initialTasks = JSON.parse(localStorage.getItem("todoapp") || "[]");
-    const taskStore = reactive(new TaskList(initialTasks), saveTasks);
-    saveTasks();
-    return taskStore;
-}
-  
-//------------------------------------------------------------------------------
-// Todo
-//------------------------------------------------------------------------------
-class Todo extends Component {
-    static template = "Todo";
-    
-    setup() {
-        useAutofocus("input");
-        this.store = useStore();
-        this.state = useState({
-            isEditing: false
-        });
-    }
-
-    handleKeyup(ev) {
-        if (ev.keyCode === ENTER_KEY) {
-            this.updateText(ev.target.value);
-        }
-        if (ev.keyCode === ESC_KEY) {
-            ev.target.value = this.props.text;
-            this.state.isEditing = false;
-        }
-    }
-
-    handleBlur(ev) {
-        this.updateText(ev.target.value);
-    }
-
-    updateText(text) {
-        this.store.updateTask(this.props.id, text);
-        this.state.isEditing = false;
-    }
-}
-
-//------------------------------------------------------------------------------
-// TodoList
-//------------------------------------------------------------------------------
-class TodoList extends Component {
-    static template = "TodoList";
-    static components = { Todo };
-    
-    setup() {
-        this.store = useStore();
-        this.state = useState({ filter: "all" });
-    }
-
-    get displayedTasks() {
-      const tasks = this.store.tasks;
-      switch (this.state.filter) {
-        case "active":
-          return tasks.filter((t) => !t.isCompleted);
-        case "completed":
-          return tasks.filter((t) => t.isCompleted);
-        case "all":
-          return tasks;
-      }
-    }
-    
-    get allChecked() {
-        return this.store.tasks.every(todo => todo.isCompleted);
-    }
-
-    get remaining() {
-        return this.store.tasks.filter(todo => !todo.isCompleted).length;
-    }
-
-    get remainingText() {
-        const items = this.remaining < 2 ? "item" : "items";
-        return ` ${items} left`;
-    }
-
-    addTodo(ev) {
-        if (ev.keyCode === ENTER_KEY) {
-            const text = ev.target.value;
-            if (text.trim()) {
-                this.store.addTask(text);
-            }
-            ev.target.value = "";
-        }
-    }
-
-    setFilter(filter) {
-        this.state.filter = filter;
-    }
-}
-
-//------------------------------------------------------------------------------
-// App Initialization
-//------------------------------------------------------------------------------
-const env = { store: createTaskStore() };
-mount(TodoList, document.body, { env, templates: TEMPLATES, dev: true });

docs/playground/samples/todo_app/todo_app.xml

@@ -1,50 +0,0 @@
-<templates>
-  <section t-name="TodoList" class="todoapp">
-    <header class="header">
-      <h1>todos</h1>
-      <input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
-    </header>
-    <section class="main" t-if="store.tasks.length">
-      <input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
-      <label for="toggle-all"></label>
-      <ul class="todo-list">
-        <t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
-          <Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
-        </t>
-      </ul>
-    </section>
-    <footer class="footer" t-if="store.tasks.length">
-      <span class="todo-count">
-        <strong>
-            <t t-esc="remaining"/>
-        </strong>
-        <t t-esc="remainingText"/>
-      </span>
-      <ul class="filters">
-        <li>
-          <a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
-        </li>
-        <li>
-          <a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
-        </li>
-        <li>
-          <a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
-        </li>
-      </ul>
-      <button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
-        Clear completed
-      </button>
-    </footer>
-  </section>
-
-  <li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
-    <div class="view">
-      <input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
-      <label t-on-dblclick="() => state.isEditing = true">
-        <t t-esc="props.text"/>
-      </label>
-      <button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
-    </div>
-    <input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
-  </li>
-</templates>

docs/playground/samples/window_manager/window_manager.css

@@ -1,70 +0,0 @@
-body {
-    margin: 0;
-}
-
-.app {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-rows: auto 50px;
-}
-
-.window-manager {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: #eeeeee;
-    overflow: hidden;
-}
-
-.menubar {
-    background-color: #875a7b;
-    color: white;
-}
-
-.menubar button {
-    height: 40px;
-    font-size: 18px;
-    margin: 5px;
-}
-
-.window {
-    display: grid;
-    grid-template-rows: 30px auto;
-    border: 1px solid gray;
-    background-color: white;
-    position: absolute;
-    box-shadow: 1px 1px 2px 1px grey;
-}
-
-.window.dragging {
-    opacity: 0.75;
-}
-
-.window .header {
-    background-color: #875a7b;
-    display: grid;
-    grid-template-columns: auto 24px;
-    color: white;
-    line-height: 30px;
-    padding-left: 5px;
-    cursor: default;
-    user-select: none;
-}
-
-.window .header .close {
-    cursor: pointer;
-    font-size: 22px;
-    padding-left: 4px;
-    padding-right: 4px;
-    font-weight: bold;
-}
-
-.counter {
-    font-size: 20px;
-}
-.counter button {
-    width: 80px;
-    height:40px;
-    font-size: 20px;
-}

docs/playground/samples/window_manager/window_manager.js

@@ -1,192 +0,0 @@
-// This example is slightly more complex than usual. We demonstrate
-// here a way to manage sub windows in Owl, declaratively. This is still just a
-// demonstration. Managing windows can be as complex as we want.  For example,
-// we could implement the following features:
-// - resizing windows
-// - minimizing windows
-// - configuration options for windows to make a window non resizeable
-// - minimal width/height
-// - better heuristic for initial window position
-// - ...
-import { Component, useState, mount, useRef, reactive, useEnv, onMounted } from "@odoo/owl";
-
-// -----------------------------------------------------------------------------
-// Window manager code
-// -----------------------------------------------------------------------------
-
-class WindowManager {
-  // contains all components with metadata
-  static Windows = {};
-  windows = {}; // mapping id => info
-  nextId = 1;
-
-  add(type) {
-    const Comp = WindowManager.Windows[type];
-    const left = 50 + Math.round(Math.random()*(window.innerWidth - 50 - Comp.defaultWidth));
-    const top = 50 + Math.round(Math.random()*(window.innerHeight - 100 - Comp.defaultHeight));
-    const id = this.nextId++;
-    this.windows[id] = {
-      id, 
-      title: Comp.defaultTitle,
-      width: Comp.defaultWidth,
-      height: Comp.defaultHeight,
-      left,
-      top,
-      Component: Comp,
-    };
-  }
-  
-  close(id) {
-    delete this.windows[id];
-  }
-
-  updatePosition(id, left, top) {
-    const w = this.windows[id];
-    w.left = left;
-    w.top = top;
-  }
-
-  getWindows() {
-    return Object.values(this.windows);
-  }
-}
-
-function createWindowService() {
-  return reactive(new WindowManager());
-}
-
-function useWindowService() {
-  const env = useEnv();
-  return useState(env.windowService);
-}
-
-// -----------------------------------------------------------------------------
-// Generic Window Component
-// -----------------------------------------------------------------------------
-
-class Window extends Component {
-  static template = "Window";
-  static nextZIndex = 1;
-  zIndex = 0;
-
-  setup() {
-    this.windowService = useWindowService();
-    this.root = useRef('root');
-    onMounted(this.updateZIndex);
-  }
-
-  get style() {
-    let { width, height, top, left } = this.props.info;
-    return `width: ${width}px;height: ${height}px;top:${top}px;left:${left}px;z-index:${this.zIndex}`;
-  }
-
-  close() {
-    this.windowService.close(this.props.info.id);
-  }
-
-  startDragAndDrop(ev) {
-    this.updateZIndex();
-    const self = this;
-    const root = this.root;
-
-    const el = root.el;
-    el.classList.add('dragging');
-
-    const current = this.props.info;
-    const offsetX = current.left - ev.pageX;
-    const offsetY = current.top - ev.pageY;
-    let left, top;
-
-    window.addEventListener("mousemove", moveWindow);
-    window.addEventListener("mouseup", stopDnD, { once: true });
-
-    function moveWindow(ev) {
-      left = Math.max(offsetX + ev.pageX, 0);
-      top = Math.max(offsetY + ev.pageY, 0);
-      el.style.left = `${left}px`;
-      el.style.top = `${top}px`;
-    }
-    function stopDnD() {
-      window.removeEventListener("mousemove", moveWindow);
-      el.classList.remove('dragging');
-
-      if (top !== undefined && left !== undefined) {
-        self.windowService.updatePosition(current.id, left, top);
-      }
-    }
-  }
-
-  updateZIndex() {
-    this.zIndex = Window.nextZIndex++;
-    this.root.el.style['z-index'] = this.zIndex;
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Two concrete Window type implementations
-// -----------------------------------------------------------------------------
-
-class HelloWorld extends Component {
-  static template = "HelloWorld";
-  static defaultTitle = "Hello Owl!";
-  static defaultWidth = 200;
-  static defaultHeight = 100;
-}
-
-
-class Counter extends Component {
-  static template = "Counter";
-  static defaultTitle = "Click Counter";
-  static defaultWidth = 300;
-  static defaultHeight = 120;
-  
-  state = useState({ value: 0 });
-  
-  inc() {
-    this.state.value++;
-  }
-}
-
-// register window components
-WindowManager.Windows.Hello = HelloWorld;
-WindowManager.Windows.Counter = Counter;
-
-// -----------------------------------------------------------------------------
-// Window Container
-// -----------------------------------------------------------------------------
-
-class WindowContainer extends Component {
-  static template = "WindowContainer";
-  static components = { Window };
-    
-  setup() {
-    this.windowService = useWindowService();
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Root Component
-// -----------------------------------------------------------------------------
-
-class Root extends Component {
-  static template = "Root";
-  static components = { WindowContainer };
-    
-  setup() {
-    this.windowService = useWindowService();
-  }
-  
-  addWindow(type) {
-    this.windowService.add(type);
-  }
-}
-
-// -----------------------------------------------------------------------------
-// Setup
-// -----------------------------------------------------------------------------
-
-const env = {
-  windowService: createWindowService(),
-};
-
-mount(Root, document.body, { templates: TEMPLATES, env, dev: true });

docs/playground/samples/window_manager/window_manager.xml

@@ -1,32 +0,0 @@
-<templates>
-  <div t-name="Window" class="window" t-att-style="style" t-on-click="updateZIndex" t-ref="root">
-    <div class="header">
-      <span t-on-mousedown="startDragAndDrop"><t t-esc="props.info.title"/></span>
-      <span class="close" t-on-click.stop="close">×</span>
-    </div>
-    <t t-slot="default"/>
-  </div>
-
-  <div t-name="WindowContainer" class="window-manager">
-    <Window t-foreach="windowService.getWindows()" t-as="w" t-key="w.id" info="w">
-      <t t-component="w.Component"/>
-    </Window>
-  </div>
-
-  <div t-name="Root" class="app">
-    <WindowContainer/>
-    <div class="menubar">
-      <button t-on-click="() => this.addWindow('Hello')">Say Hello</button>
-      <button t-on-click="() => this.addWindow('Counter')">Counter</button>
-    </div>
-  </div>
-
-  <div t-name="HelloWorld">
-    Some content here...
-  </div>
-
-  <div t-name="Counter" class="counter">
-    <button t-on-click="inc">Click</button>
-    <span><t t-esc="state.value"/></span>
-  </div>
-</templates>

docs/playground/standalone_app/app.py

@@ -1,28 +0,0 @@
-#!/usr/bin/env python3
-
-import threading
-import time
-
-from http.server import SimpleHTTPRequestHandler, HTTPServer
-
-httpd = None
-def start_server():
-    global httpd
-    SimpleHTTPRequestHandler.extensions_map['.js'] = 'application/javascript'
-    httpd = HTTPServer(('0.0.0.0', 3600), SimpleHTTPRequestHandler)
-    httpd.serve_forever()
-
-url = 'http://127.0.0.1:3600'
-
-if __name__ == "__main__":
-    print("Owl Application")
-    print("---------------")
-    print("Server running on: {}".format(url))
-    threading.Thread(target=start_server, daemon=True).start()
-
-    while True:
-        try:
-            time.sleep(1)
-        except KeyboardInterrupt:
-            httpd.server_close()
-            quit(0)

docs/playground/standalone_app/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>OWL App</title>
-    <link rel="icon" href="data:,">
-
-    <link rel="stylesheet" href="app.css">
-    <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
-    <script type="module" src="app.js"></script>
-  </head>
-  <body>
-    <pre>
-This app requires a web server, simply opening the html file using your browser will not work.
-You can run a simple web server with one of the following:
-- if you have python3 installed, run app.py with python3 or run 'python3 -m http.server' in the app folder
-- if you have node/npm installed, run 'npx serve' in the app folder
-- if you have php installed, run 'php -S localhost:8080 -t .' in the app folder
-    </pre>
-    <script>if (window.location.protocol !== "file:") document.querySelector("pre").remove()</script>
-  </body>
-</html>

docs/readme.md

@@ -1,5 +0,0 @@
-# Github page and playground
-
-This folder contains the code for owl's [github page](https://odoo.github.io/owl)
-and the owl [playground](https://odoo.github.io/owl/playground/). If you're
-looking for the owl documentation, click [here](/doc)

package.json

@@ -1,10 +1,11 @@
 {
   "name": "@odoo/owl",
-  "version": "2.2",
+  "version": "2.0.0-alpha.2",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
+  "browser": "dist/owl.iife.js",
   "module": "dist/owl.es.js",
-  "types": "dist/types/owl.d.ts",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist"
   ],
@@ -13,26 +14,18 @@
   },
   "scripts": {
     "build:bundle": "rollup -c --failAfterWarnings",
-    "build:runtime": "rollup -c --failAfterWarnings runtime",
-    "build:compiler": "rollup -c --failAfterWarnings compiler",
     "build": "npm run build:bundle",
-    "build:devtools": "rollup -c ./tools/devtools/rollup.config.js",
-    "dev:devtools-chrome": "npm run build:devtools -- --config-browser=chrome",
-    "dev:devtools-firefox": "npm run build:devtools -- --config-browser=firefox",
-    "build:devtools-chrome": "npm run dev:devtools-chrome -- --config-env=production",
-    "build:devtools-firefox": "npm run dev:devtools-firefox -- --config-env=production",
     "test": "jest",
     "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
     "test:watch": "jest --watch",
-    "playground:serve": "python3 tools/playground_server.py || python tools/playground_server.py",
+    "playground:serve": "python3 tools/server.py || python tools/server.py",
     "playground": "npm run build && npm run playground:serve",
     "preplayground:watch": "npm run build",
     "playground:watch": "npm-run-all  --parallel playground:serve \"build:* -- --watch\"",
-    "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --write",
-    "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --check",
-    "lint": "eslint src/**/*.ts tests/**/*.ts",
-    "release": "node tools/release.js",
-    "compile_templates": "node tools/compile_xml.js"
+    "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
+    "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --check",
+    "publish": "npm run build && npm publish",
+    "release": "node tools/release.js"
   },
   "repository": {
     "type": "git",
@@ -47,29 +40,25 @@
   "devDependencies": {
     "@types/jest": "^27.0.1",
     "@types/node": "^14.11.8",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
     "chalk": "^3.0.0",
+    "cpx": "^1.5.0",
     "current-git-branch": "^1.1.0",
-    "eslint": "8.31.0",
-    "git-rev-sync": "^3.0.2",
+    "git-rev-sync": "^1.12.0",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
     "jest-diff": "^27.3.1",
     "jest-environment-jsdom": "^27.1.0",
+    "live-server": "^1.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "2.4.1",
     "rollup": "^2.56.3",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-execute": "^1.1.1",
-    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.1",
+    "sass": "^1.16.1",
     "source-map-support": "^0.5.10",
     "ts-jest": "^27.0.5",
-    "typescript": "4.5.2"
+    "typescript": "4.5.2",
+    "uglify-es": "^3.3.9"
   },
   "jest": {
     "testEnvironment": "jsdom",

roadmap.md

@@ -1,9 +1,28 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 2.X
+- Current version: 1.4.10
 - Status: stable
 
-Owl is currently stable. No (large) improvements is expected in the near future.
+This roadmap is only an attempt at predicting Owl's future.  Everything may
+change!
+
+
+### 1.x
+
+- add chrome and firefox devtools,
+- fix every bugs,
+- improve documentation,
+- small backward compatible improvements.
+
+### 2.x (2020? 2021? 2022?)
+
+- stop support for `t-set` directive to define the content of a slot
+
+Maybe:
+
+- reimplement vdom to use *block* system, like Vue 3, which should make Owl
+  much faster
+- refactor `QWeb` to use an intermediate representation (some kind of AST) to
+  allow additional optimisations.
+
 
-Note that we intend to keep maintaining owl, and as such, improvements and/or
-breaking changes may require a version bump in the future.

rollup.config.js

@@ -2,57 +2,28 @@ import pkg from "./package.json";
 import git from "git-rev-sync";
 import typescript from 'rollup-plugin-typescript2';
 import { terser } from "rollup-plugin-terser";
-import dts from "rollup-plugin-dts";
 
-let input, output;
-
-const IIFE_FILENAME = "dist/owl.iife.js";
-const CJS_FILENAME = "dist/owl.cjs.js";
-const ES_FILENAME = "dist/owl.es.js";
-
-if (pkg.module !== ES_FILENAME || pkg.main !== CJS_FILENAME) {
-  throw new Error("package.json has been modified. Build script should be updated accordingly");
-}  
+const name = "owl";
+const extend = true;
 
+/**
+ * Meta data to be added on the __info__ object.
+ * Used to let external tools know the current owl version.
+ */
 const outro = `
+__info__.version = '${pkg.version}';
 __info__.date = '${new Date().toISOString()}';
 __info__.hash = '${git.short()}';
 __info__.url = 'https://github.com/odoo/owl';
 `;
 
-switch (process.argv[4]) {
-  case "compiler": 
-    input = "src/compiler/index.ts",
-    output = [
-      getConfigForFormat('cjs', 'dist/compiler.js', ''),
-    ]
-    break;
-  case "runtime":
-    input = "src/runtime/index.ts";
-    output = [
-      getConfigForFormat('esm', addSuffix(ES_FILENAME,  'runtime'), outro),
-      getConfigForFormat('cjs', addSuffix(CJS_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro),
-      getConfigForFormat('iife', addSuffix(IIFE_FILENAME,  'runtime'), outro, true),
-    ]
-    break;
-  default:
-    input = "src/index.ts",
-    output = [
-      getConfigForFormat('esm', ES_FILENAME, outro),
-      getConfigForFormat('cjs', CJS_FILENAME, outro),
-      getConfigForFormat('iife', IIFE_FILENAME, outro),
-      getConfigForFormat('iife', IIFE_FILENAME, outro, true),
-    ]
-  }
-
 /**
  * Generate from a string depicting a path a new path for the minified version.
  * @param {string} pkgFileName file name
  */
-function addSuffix(pkgFileName, suffix) {
+function generateMinifiedNameFromPkgName(pkgFileName) {
   const parts = pkgFileName.split('.');
-  parts.splice(parts.length - 1, 0, suffix);
+  parts.splice(parts.length - 1, 0, "min");
   return parts.join('.');
 }
 
@@ -62,12 +33,12 @@ function addSuffix(pkgFileName, suffix) {
  * @param {string} generatedFileName generated file name
  * @param {boolean} minified should it be minified
  */
-function getConfigForFormat(format, generatedFileName, outro, minified = false) {
+function getConfigForFormat(format, generatedFileName, minified = false) {
   return {
-    file: minified ? addSuffix(generatedFileName, "min") : generatedFileName,
+    file: minified ? generateMinifiedNameFromPkgName(generatedFileName) : generatedFileName,
     format: format,
-    name: "owl",
-    extend: true,
+    name: name,
+    extend: extend,
     outro: outro,
     freeze: false,
     plugins: minified ? [terser()] : [],
@@ -75,19 +46,26 @@ function getConfigForFormat(format, generatedFileName, outro, minified = false)
   };
 }
 
-export default [
-  {
-    input,
-    output,
-    plugins: [
-      typescript({
-        useTsconfigDeclarationDir: true
-      }),
-    ]
-  },
-  {
-    input: "dist/types/index.d.ts",
-    output: [{ file: "dist/types/owl.d.ts", format: "es" }],
-    plugins: [dts()],
-  },
-];
+export default {
+  input: "src/index.ts",
+  output: [
+
+    /**
+     * Read about module formats:
+     *  https://auth0.com/blog/javascript-module-systems-showdown/
+     *  https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953
+     */
+
+    getConfigForFormat('esm', pkg.module),
+    getConfigForFormat('esm', pkg.module, true),
+    getConfigForFormat('cjs', pkg.main),
+    getConfigForFormat('cjs', pkg.main, true),
+    getConfigForFormat('iife', pkg.browser),
+    getConfigForFormat('iife', pkg.browser, true),
+  ],
+  plugins: [
+    typescript({
+      useTsconfigDeclarationDir: true
+    }),
+  ]
+};

src/app/app.ts

@@ -0,0 +1,111 @@
+import { Component, ComponentConstructor } from "../component/component";
+import { ComponentNode } from "../component/component_node";
+import { MountOptions } from "../component/fibers";
+import { Scheduler } from "../component/scheduler";
+import { TemplateSet, TemplateSetConfig } from "./template_set";
+import { nodeErrorHandlers } from "../component/error_handling";
+import { validateTarget } from "../utils";
+
+// reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
+
+export interface Env {
+  [key: string]: any;
+}
+
+export interface AppConfig<P, E> extends TemplateSetConfig {
+  props?: P;
+  env?: E;
+  test?: boolean;
+}
+
+export const DEV_MSG = () => {
+  const hash = (window as any).owl ? (window as any).owl.__info__.hash : "master";
+
+  return `Owl is running in 'dev' mode.
+
+This is not suitable for production use.
+See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
+};
+
+export class App<
+  T extends abstract new (...args: any) => any = any,
+  P = any,
+  E = any
+> extends TemplateSet {
+  static validateTarget = validateTarget;
+
+  Root: ComponentConstructor<P, E>;
+  props: P;
+  env: E;
+  scheduler = new Scheduler();
+  root: ComponentNode<P, E> | null = null;
+
+  constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
+    super(config);
+    this.Root = Root;
+    if (config.test) {
+      this.dev = true;
+    }
+    if (this.dev && !config.test) {
+      console.info(DEV_MSG());
+    }
+    const descrs = Object.getOwnPropertyDescriptors(config.env || {});
+    this.env = Object.freeze(Object.defineProperties({}, descrs)) as E;
+    this.props = config.props || ({} as P);
+  }
+
+  mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
+    App.validateTarget(target);
+    const node = this.makeNode(this.Root, this.props);
+    const prom = this.mountNode(node, target, options);
+    this.root = node;
+    return prom;
+  }
+
+  makeNode(Component: ComponentConstructor, props: any): ComponentNode {
+    return new ComponentNode(Component, props, this);
+  }
+
+  mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
+    const promise: any = new Promise((resolve, reject) => {
+      let isResolved = false;
+      // manually set a onMounted callback.
+      // that way, we are independant from the current node.
+      node.mounted.push(() => {
+        resolve(node.component);
+        isResolved = true;
+      });
+
+      // Manually add the last resort error handler on the node
+      let handlers = nodeErrorHandlers.get(node);
+      if (!handlers) {
+        handlers = [];
+        nodeErrorHandlers.set(node, handlers);
+      }
+      handlers.unshift((e) => {
+        if (isResolved) {
+          console.error(e);
+        } else {
+          reject(e);
+        }
+        throw e;
+      });
+    });
+    node.mountComponent(target, options);
+    return promise;
+  }
+
+  destroy() {
+    if (this.root) {
+      this.root.destroy();
+    }
+  }
+}
+
+export async function mount<T extends abstract new (...args: any) => any = any, P = any, E = any>(
+  C: T & ComponentConstructor<P, E>,
+  target: HTMLElement,
+  config: AppConfig<P, E> & MountOptions = {}
+): Promise<Component<P, E> & InstanceType<T>> {
+  return new App(C, config).mount(target, config);
+}

src/app/template_helpers.ts

@@ -0,0 +1,200 @@
+import { BDom, multi, text, toggler } from "../blockdom";
+import { validateProps } from "../component/props_validation";
+import { Markup } from "../utils";
+import { html } from "../blockdom/index";
+/**
+ * This file contains utility functions that will be injected in each template,
+ * to perform various useful tasks in the compiled code.
+ */
+
+function withDefault(value: any, defaultValue: any): any {
+  return value === undefined || value === null || value === false ? defaultValue : value;
+}
+
+function callSlot(
+  ctx: any,
+  parent: any,
+  key: string,
+  name: string,
+  dynamic: boolean,
+  extra: any,
+  defaultContent?: (ctx: any, node: any, key: string) => BDom
+): BDom {
+  key = key + "__slot_" + name;
+  const slots = (ctx.props && ctx.props.slots) || {};
+  const { __render, __ctx, __scope } = slots[name] || {};
+  const slotScope = Object.create(__ctx || {});
+  if (__scope) {
+    slotScope[__scope] = extra || {};
+  }
+  const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
+  if (defaultContent) {
+    let child1: BDom | undefined = undefined;
+    let child2: BDom | undefined = undefined;
+    if (slotBDom) {
+      child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
+    } else {
+      child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
+    }
+    return multi([child1, child2]);
+  }
+  return slotBDom || text("");
+}
+
+function capture(ctx: any): any {
+  const component = ctx.__owl__.component;
+  const result = Object.create(component);
+  for (let k in ctx) {
+    result[k] = ctx[k];
+  }
+  return result;
+}
+
+function withKey(elem: any, k: string) {
+  elem.key = k;
+  return elem;
+}
+
+function prepareList(collection: any): [any[], any[], number, any[]] {
+  let keys: any[];
+  let values: any[];
+
+  if (Array.isArray(collection)) {
+    keys = collection;
+    values = collection;
+  } else if (collection) {
+    values = Object.keys(collection);
+    keys = Object.values(collection);
+  } else {
+    throw new Error("Invalid loop expression");
+  }
+  const n = values.length;
+  return [keys, values, n, new Array(n)];
+}
+
+const isBoundary = Symbol("isBoundary");
+
+function setContextValue(ctx: { [key: string]: any }, key: string, value: any): void {
+  const ctx0 = ctx;
+  while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+    const newCtx = ctx.__proto__;
+    if (!newCtx) {
+      ctx = ctx0;
+      break;
+    }
+    ctx = newCtx;
+  }
+  ctx[key] = value;
+}
+
+function toNumber(val: string): number | string {
+  const n = parseFloat(val);
+  return isNaN(n) ? val : n;
+}
+
+function shallowEqual(l1: any[], l2: any[]): boolean {
+  for (let i = 0, l = l1.length; i < l; i++) {
+    if (l1[i] !== l2[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+class LazyValue {
+  fn: any;
+  ctx: any;
+  node: any;
+  constructor(fn: any, ctx: any, node: any) {
+    this.fn = fn;
+    this.ctx = capture(ctx);
+    this.node = node;
+  }
+
+  evaluate(): any {
+    return this.fn(this.ctx, this.node);
+  }
+
+  toString() {
+    return this.evaluate().toString();
+  }
+}
+
+/*
+ * Safely outputs `value` as a block depending on the nature of `value`
+ */
+export function safeOutput(value: any): ReturnType<typeof toggler> {
+  if (!value) {
+    return value;
+  }
+  let safeKey;
+  let block;
+  if (value instanceof Markup) {
+    safeKey = `string_safe`;
+    block = html(value as string);
+  } else if (value instanceof LazyValue) {
+    safeKey = `lazy_value`;
+    block = value.evaluate();
+  } else if (value instanceof String || typeof value === "string") {
+    safeKey = "string_unsafe";
+    block = text(value);
+  } else {
+    // Assuming it is a block
+    safeKey = "block_safe";
+    block = value;
+  }
+  return toggler(safeKey, block);
+}
+
+let boundFunctions = new WeakMap();
+
+function bind(ctx: any, fn: Function): Function {
+  let component = ctx.__owl__.component;
+  let boundFnMap = boundFunctions.get(component);
+  if (!boundFnMap) {
+    boundFnMap = new WeakMap();
+    boundFunctions.set(component, boundFnMap);
+  }
+  let boundFn = boundFnMap.get(fn);
+  if (!boundFn) {
+    boundFn = fn.bind(component);
+    boundFnMap.set(fn, boundFn);
+  }
+  return boundFn;
+}
+
+type RefMap = { [key: string]: HTMLElement | null };
+type RefSetter = (el: HTMLElement | null) => void;
+
+function multiRefSetter(refs: RefMap, name: string): RefSetter {
+  let count = 0;
+  return (el) => {
+    if (el) {
+      count++;
+      if (count > 1) {
+        throw new Error("Cannot have 2 elements with same ref name at the same time");
+      }
+    }
+    if (count === 0 || el) {
+      refs[name] = el;
+    }
+  };
+}
+
+export const UTILS = {
+  withDefault,
+  zero: Symbol("zero"),
+  isBoundary,
+  callSlot,
+  capture,
+  withKey,
+  prepareList,
+  setContextValue,
+  multiRefSetter,
+  shallowEqual,
+  toNumber,
+  validateProps,
+  LazyValue,
+  safeOutput,
+  bind,
+};

src/app/template_set.ts

@@ -1,11 +1,11 @@
-import { compile, Template, TemplateFunction } from "../compiler";
-import { comment, createBlock, html, list, multi, text, toggler } from "./blockdom";
-import { getCurrent } from "./component_node";
-import { Portal, portalTemplate } from "./portal";
-import { helpers } from "./template_helpers";
-import { OwlError } from "./error_handling";
+import { createBlock, html, list, multi, text, toggler, comment } from "../blockdom";
+import { compile, Template } from "../compiler";
+import { component, getCurrent } from "../component/component_node";
+import { UTILS } from "./template_helpers";
 
-const bdom = { text, createBlock, list, multi, html, toggler, comment };
+const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
+
+export const globalTemplates: { [key: string]: string | Element } = {};
 
 function parseXML(xml: string): Document {
   const parser = new DOMParser();
@@ -32,7 +32,7 @@ function parseXML(xml: string): Document {
         }
       }
     }
-    throw new OwlError(msg);
+    throw new Error(msg);
   }
   return doc;
 }
@@ -45,15 +45,18 @@ export interface TemplateSetConfig {
 }
 
 export class TemplateSet {
-  static registerTemplate(name: string, fn: TemplateFunction) {
-    globalTemplates[name] = fn;
-  }
   dev: boolean;
   rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
   templates: { [name: string]: Template } = {};
   translateFn?: (s: string) => string;
   translatableAttributes?: string[];
-  Portal = Portal;
+  utils: typeof UTILS = Object.assign({}, UTILS, {
+    call: (owner: any, subTemplate: string, ctx: any, parent: any, key: any) => {
+      const template = this.getTemplate(subTemplate);
+      return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    },
+    getTemplate: (name: string) => this.getTemplate(name),
+  });
 
   constructor(config: TemplateSetConfig = {}) {
     this.dev = config.dev || false;
@@ -64,25 +67,18 @@ export class TemplateSet {
     }
   }
 
-  addTemplate(name: string, template: string | Element) {
-    if (name in this.rawTemplates) {
-      const rawTemplate = this.rawTemplates[name];
-      const currentAsString =
-        typeof rawTemplate === "string"
-          ? rawTemplate
-          : rawTemplate instanceof Element
-          ? rawTemplate.outerHTML
-          : rawTemplate.toString();
-      const newAsString = typeof template === "string" ? template : template.outerHTML;
-      if (currentAsString === newAsString) {
-        return;
-      }
-      throw new OwlError(`Template ${name} already defined with different content`);
+  addTemplate(
+    name: string,
+    template: string | Element,
+    options: { allowDuplicate?: boolean } = {}
+  ) {
+    if (name in this.rawTemplates && !options.allowDuplicate) {
+      throw new Error(`Template ${name} already defined`);
     }
     this.rawTemplates[name] = template;
   }
 
-  addTemplates(xml: string | Document) {
+  addTemplates(xml: string | Document, options: { allowDuplicate?: boolean } = {}) {
     if (!xml) {
       // empty string
       return;
@@ -90,7 +86,7 @@ export class TemplateSet {
     xml = xml instanceof Document ? xml : parseXML(xml);
     for (const template of xml.querySelectorAll("[t-name]")) {
       const name = template.getAttribute("t-name")!;
-      this.addTemplate(name, template);
+      this.addTemplate(name, template, options);
     }
   }
 
@@ -103,37 +99,34 @@ export class TemplateSet {
           const componentName = getCurrent().component.constructor.name;
           extraInfo = ` (for component "${componentName}")`;
         } catch {}
-        throw new OwlError(`Missing template: "${name}"${extraInfo}`);
+        throw new Error(`Missing template: "${name}"${extraInfo}`);
       }
-      const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
-      const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
+      const templateFn = this._compileTemplate(name, rawTemplate);
       // first add a function to lazily get the template, in case there is a
       // recursive call to the template name
       const templates = this.templates;
       this.templates[name] = function (context, parent) {
         return templates[name].call(this, context, parent);
       };
-      const template = templateFn(this, bdom, helpers);
+      const template = templateFn(bdom, this.utils);
       this.templates[name] = template;
     }
     return this.templates[name];
   }
 
-  _compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
-    throw new OwlError(`Unable to compile a template. Please use owl full build instead`);
-  }
-
-  callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
-    const template = this.getTemplate(subTemplate);
-    return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
+  _compileTemplate(name: string, template: string | Element) {
+    return compile(template, {
+      name,
+      dev: this.dev,
+      translateFn: this.translateFn,
+      translatableAttributes: this.translatableAttributes,
+    });
   }
 }
 
 // -----------------------------------------------------------------------------
 //  xml tag helper
 // -----------------------------------------------------------------------------
-export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};
-
 export function xml(...args: Parameters<typeof String.raw>) {
   const name = `__template__${xml.nextId++}`;
   const value = String.raw(...args);
@@ -142,5 +135,3 @@ export function xml(...args: Parameters<typeof String.raw>) {
 }
 
 xml.nextId = 1;
-
-TemplateSet.registerTemplate("__portal__", portalTemplate);

src/blockdom/attributes.ts

@@ -36,18 +36,10 @@ export function createAttrUpdater(attr: string): Setter<HTMLElement> {
 
 export function attrsSetter(this: HTMLElement, attrs: any) {
   if (isArray(attrs)) {
-    if (attrs[0] === "class") {
-      setClass.call(this, attrs[1]);
-    } else {
-      setAttribute.call(this, attrs[0], attrs[1]);
-    }
+    setAttribute.call(this, attrs[0], attrs[1]);
   } else {
     for (let k in attrs) {
-      if (k === "class") {
-        setClass.call(this, attrs[k]);
-      } else {
-        setAttribute.call(this, k, attrs[k]);
-      }
+      setAttribute.call(this, k, attrs[k]);
     }
   }
 }
@@ -60,11 +52,7 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
       if (val === oldAttrs[1]) {
         return;
       }
-      if (name === "class") {
-        updateClass.call(this, val, oldAttrs[1]);
-      } else {
-        setAttribute.call(this, name, val);
-      }
+      setAttribute.call(this, name, val);
     } else {
       removeAttribute.call(this, oldAttrs[0]);
       setAttribute.call(this, name, val);
@@ -72,21 +60,13 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
   } else {
     for (let k in oldAttrs) {
       if (!(k in attrs)) {
-        if (k === "class") {
-          updateClass.call(this, "", oldAttrs[k]);
-        } else {
-          removeAttribute.call(this, k);
-        }
+        removeAttribute.call(this, k);
       }
     }
     for (let k in attrs) {
       const val = attrs[k];
       if (val !== oldAttrs[k]) {
-        if (k === "class") {
-          updateClass.call(this, val, oldAttrs[k]);
-        } else {
-          setAttribute.call(this, k, val);
-        }
+        setAttribute.call(this, k, val);
       }
     }
   }
@@ -113,10 +93,6 @@ function toClassObj(expr: string | number | { [c: string]: any }) {
       for (let key in expr as any) {
         const value = (expr as any)[key];
         if (value) {
-          key = trim.call(key);
-          if (!key) {
-            continue;
-          }
           const words = split.call(key, wordRegexp);
           for (let word of words) {
             result[word] = value;
@@ -160,3 +136,32 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
     }
   }
 }
+
+export function makePropSetter(name: string): Setter<HTMLElement> {
+  return function setProp(this: HTMLElement, value: any) {
+    (this as any)[name] = value || "";
+  };
+}
+
+export function isProp(tag: string, key: string): boolean {
+  switch (tag) {
+    case "input":
+      return (
+        key === "checked" ||
+        key === "indeterminate" ||
+        key === "value" ||
+        key === "readonly" ||
+        key === "disabled"
+      );
+    case "option":
+      return key === "selected" || key === "disabled";
+    case "textarea":
+      return key === "value" || key === "readonly" || key === "disabled";
+    case "select":
+      return key === "value" || key === "disabled";
+    case "button":
+    case "optgroup":
+      return key === "disabled";
+  }
+  return false;
+}

src/blockdom/block_compiler.ts

@@ -1,5 +1,12 @@
-import { OwlError } from "../error_handling";
-import { attrsSetter, attrsUpdater, createAttrUpdater, setClass, updateClass } from "./attributes";
+import {
+  attrsSetter,
+  attrsUpdater,
+  createAttrUpdater,
+  isProp,
+  makePropSetter,
+  setClass,
+  updateClass,
+} from "./attributes";
 import { config } from "./config";
 import { createEventHandler } from "./events";
 import type { VNode } from "./index";
@@ -17,13 +24,6 @@ const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
 
 const NO_OP = () => {};
 
-function makePropSetter(name: string): Setter<HTMLElement> {
-  return function setProp(this: HTMLElement, value: any) {
-    // support 0, fallback to empty string for other falsy values
-    (this as any)[name] = value === 0 ? 0 : value ? value.valueOf() : "";
-  };
-}
-
 // -----------------------------------------------------------------------------
 // Main compiler code
 // -----------------------------------------------------------------------------
@@ -100,7 +100,7 @@ function normalizeNode(node: HTMLElement | Text) {
 interface DynamicInfo {
   idx: number;
   refIdx?: number;
-  type: "text" | "child" | "handler" | "attribute" | "attributes" | "property" | "ref";
+  type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref";
   isOnlyChild?: boolean;
   name?: string;
   tag?: string;
@@ -156,15 +156,6 @@ function buildTree(
           : document.createElement(tagName);
       }
       if (el instanceof Element) {
-        if (!domParentTree) {
-          // some html elements may have side effects when setting their attributes.
-          // For example, setting the src attribute of an <img/> will trigger a
-          // request to get the corresponding image. This is something that we
-          // don't want at compile time. We avoid that by putting the content of
-          // the block in a <template/> element
-          const fragment = document.createElement("template").content;
-          fragment.appendChild(el);
-        }
         for (let i = 0; i < attrs.length; i++) {
           const attrName = attrs[i].name;
           const attrValue = attrs[i].value;
@@ -183,14 +174,6 @@ function buildTree(
               name: attrValue,
               tag: tagName,
             });
-          } else if (attrName.startsWith("block-property-")) {
-            const idx = parseInt(attrName.slice(15), 10);
-            info.push({
-              type: "property",
-              idx,
-              name: attrValue,
-              tag: tagName,
-            });
           } else if (attrName === "block-attributes") {
             info.push({
               type: "attributes",
@@ -262,7 +245,7 @@ function buildTree(
       };
     }
   }
-  throw new OwlError("boom");
+  throw new Error("boom");
 }
 
 function addRef(tree: IntermediateTree) {
@@ -384,22 +367,15 @@ function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
           };
         }
         break;
-      case "property": {
-        const refIdx = info.refIdx!;
-        const setProp = makePropSetter(info.name!);
-        ctx.locations.push({
-          idx: info.idx,
-          refIdx,
-          setData: setProp,
-          updateData: setProp,
-        });
-        break;
-      }
       case "attribute": {
         const refIdx = info.refIdx!;
         let updater: any;
         let setter: any;
-        if (info.name === "class") {
+        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 {
@@ -531,13 +507,9 @@ function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
       return this.el!;
     }
 
-    moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-      this.parentEl = parent;
-      nodeInsertBefore.call(parent, this.el!, node);
-    }
-
-    moveBeforeVNode(other: Block | null, afterNode: Node | null) {
-      nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
+    moveBefore(other: Block | null, afterNode: Node | null) {
+      const target = other ? other.el! : afterNode;
+      nodeInsertBefore.call(this.parentEl, this.el!, target);
     }
 
     toString() {

src/blockdom/events.ts

@@ -1,4 +1,3 @@
-import { inOwnerDocument } from "../utils";
 import { config } from "./config";
 
 type EventHandlerSetter = (this: HTMLElement, data: any) => void;
@@ -6,7 +5,6 @@ type EventHandlerSetter = (this: HTMLElement, data: any) => void;
 interface EventHandlerCreator {
   setup: EventHandlerSetter;
   update: EventHandlerSetter;
-  remove: (this: HTMLElement) => void;
 }
 
 export function createEventHandler(rawEvent: string): EventHandlerCreator {
@@ -28,8 +26,8 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
   }
 
   function listener(ev: Event) {
-    const currentTarget = ev.currentTarget as HTMLElement;
-    if (!currentTarget || !inOwnerDocument(currentTarget)) return;
+    const currentTarget = ev.currentTarget;
+    if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
     const data = (currentTarget as any)[eventKey];
     if (!data) return;
     config.mainEventHandler(data, ev, currentTarget);
@@ -40,15 +38,11 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
     this.addEventListener(evName, listener, { capture });
   }
 
-  function remove(this: HTMLElement) {
-    delete (this as any)[eventKey];
-    this.removeEventListener(evName, listener, { capture });
-  }
   function update(this: HTMLElement, data: any) {
     (this as any)[eventKey] = data;
   }
 
-  return { setup, update, remove };
+  return { setup, update };
 }
 
 // Synthetic handler: a form of event delegation that allows placing only one
@@ -66,12 +60,7 @@ function createSyntheticHandler(evName: string, capture: boolean = false): Event
     _data[currentId] = data;
     (this as any)[eventKey] = _data;
   }
-
-  function remove(this: HTMLElement) {
-    delete (this as any)[eventKey];
-  }
-
-  return { setup, update: setup, remove };
+  return { setup, update: setup };
 }
 
 function nativeToSyntheticEvent(eventKey: string, event: Event) {

src/blockdom/html.ts

@@ -29,16 +29,12 @@ class VHtml {
     }
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    for (let elem of this.content) {
-      nodeInsertBefore.call(parent, elem, node);
-    }
-  }
-
-  moveBeforeVNode(other: VHtml | null, afterNode: Node | null) {
+  moveBefore(other: VHtml | null, afterNode: Node | null) {
     const target = other ? other.content[0] : afterNode;
-    this.moveBeforeDOMNode(target);
+    const parent = this.parentEl;
+    for (let elem of this.content) {
+      nodeInsertBefore.call(parent, elem, target);
+    }
   }
 
   patch(other: VHtml) {

src/blockdom/index.ts

@@ -6,12 +6,10 @@ export { list } from "./list";
 export { multi } from "./multi";
 export { text, comment } from "./text";
 export { html } from "./html";
-export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement): void;
-  moveBeforeVNode(other: T | null, afterNode: Node | null): void;
+  moveBefore(other: T | null, afterNode: Node | null): void;
   patch(other: T, withBeforeRemove: boolean): void;
   beforeRemove(): void;
   remove(): void;

src/blockdom/list.ts

@@ -38,23 +38,14 @@ class VList {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    for (let i = 0, l = children.length; i < l; i++) {
-      children[i].moveBeforeDOMNode(node, parent);
-    }
-    parent!.insertBefore(this.anchor!, node);
-  }
-
-  moveBeforeVNode(other: VList | null, afterNode: Node | null) {
+  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].moveBeforeVNode(null, afterNode);
+      children[i].moveBefore(null, afterNode);
     }
     this.parentEl!.insertBefore(this.anchor!, afterNode);
   }
@@ -75,7 +66,7 @@ class VList {
       patch: cPatch,
       remove: cRemove,
       beforeRemove,
-      moveBeforeVNode: cMoveBefore,
+      moveBefore: cMoveBefore,
       firstNode: cFirstNode,
     } = proto;
 

src/blockdom/multi.ts

@@ -38,22 +38,7 @@ export class VMulti {
     this.parentEl = parent;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    const children = this.children;
-    const anchors = this.anchors;
-    for (let i = 0, l = children.length; i < l; i++) {
-      let child = children[i];
-      if (child) {
-        child.moveBeforeDOMNode(node, parent);
-      } else {
-        const anchor = anchors![i];
-        nodeInsertBefore.call(parent, anchor, node);
-      }
-    }
-  }
-
-  moveBeforeVNode(other: VMulti | null, afterNode: Node | null) {
+  moveBefore(other: VMulti | null, afterNode: Node | null) {
     if (other) {
       const next = other!.children[0];
       afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
@@ -64,7 +49,7 @@ export class VMulti {
     for (let i = 0, l = children.length; i < l; i++) {
       let child = children[i];
       if (child) {
-        child.moveBeforeVNode(null, afterNode);
+        child.moveBefore(null, afterNode);
       } else {
         const anchor = anchors![i];
         nodeInsertBefore.call(parent, anchor, afterNode);

src/blockdom/text.ts

@@ -23,13 +23,9 @@ abstract class VSimpleNode {
     this.el = node;
   }
 
-  moveBeforeDOMNode(node: Node | null, parent = this.parentEl) {
-    this.parentEl = parent;
-    nodeInsertBefore.call(parent, this.el!, node);
-  }
-
-  moveBeforeVNode(other: VText | null, afterNode: Node | null) {
-    nodeInsertBefore.call(this.parentEl, this.el!, other ? other.el! : afterNode);
+  moveBefore(other: VText | null, afterNode: Node | null) {
+    const target = other ? other.el! : afterNode;
+    nodeInsertBefore.call(this.parentEl, this.el!, target);
   }
 
   beforeRemove() {}

src/blockdom/toggler.ts

@@ -20,12 +20,8 @@ class VToggler {
     this.child.mount(parent, afterNode);
   }
 
-  moveBeforeDOMNode(node: Node | null, parent?: HTMLElement) {
-    this.child.moveBeforeDOMNode(node, parent);
-  }
-
-  moveBeforeVNode(other: VToggler | null, afterNode: Node | null) {
-    this.moveBeforeDOMNode((other && other.firstNode()) || afterNode);
+  moveBefore(other: VToggler | null, afterNode: Node | null) {
+    this.child.moveBefore(other ? other.child : null, afterNode);
   }
 
   patch(other: VToggler, withBeforeRemove: boolean) {

src/compiler/index.ts

@@ -1,11 +1,10 @@
-import type { TemplateSet } from "../runtime/template_set";
-import type { BDom } from "../runtime/blockdom";
+import type { BDom } from "../blockdom";
 import { CodeGenerator, Config } from "./code_generator";
 import { parse } from "./parser";
 
 export type Template = (context: any, vnode: any, key?: string) => BDom;
 
-export type TemplateFunction = (app: TemplateSet, bdom: any, helpers: any) => Template;
+export type TemplateFunction = (blocks: any, utils: any) => Template;
 
 interface CompileOptions extends Config {
   name?: string;
@@ -27,5 +26,5 @@ export function compile(
   const codeGenerator = new CodeGenerator(ast, { ...options, hasSafeContext });
   const code = codeGenerator.generateCode();
   // template function
-  return new Function("app, bdom, helpers", code) as TemplateFunction;
+  return new Function("bdom, helpers", code) as TemplateFunction;
 }