temp

# Owl v1.0.13

## Bug fixes

- fix: slots: prevent infinite loop in some cases

.github/workflows/deploy.yml

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

.gitignore

@@ -26,4 +26,8 @@ node_modules
 # Extras temp file
 /tools/owl.js
 
-release-notes.md
+release-notes.md
+
+.rpt2_cache
+
+/temp

README.md

@@ -1,5 +1,9 @@
 <h1 align="center">🦉 <a href="https://odoo.github.io/owl/">OWL Framework</a> 🦉</h1>
 
+ [![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](https://www.gnu.org/licenses/lgpl-3.0)
+[![npm version](https://badge.fury.io/js/@odoo%2Fowl.svg)](https://badge.fury.io/js/@odoo%2Fowl)
+[![Downloads](https://img.shields.io/npm/dm/@odoo%2Fowl.svg)](https://www.npmjs.com/package/@odoo/owl)
+
 _Class based components with hooks, reactive state and concurrent mode_
 
 ## Project Overview
@@ -121,8 +125,7 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.0.11.js](https://github.com/odoo/owl/releases/download/v1.0.11/owl.js)
-- [owl-1.0.11.min.js](https://github.com/odoo/owl/releases/download/v1.0.11/owl.min.js)
+- [owl-1.0.13](https://github.com/odoo/owl/releases/tag/v1.0.13)
 
 ## License
 

doc/learning/tutorial_todoapp.md

@@ -70,7 +70,9 @@ just put the following code:
 Note that we put everything inside an immediately executed function to avoid leaking
 anything to the global scope.
 
-Finally, `owl.js` should be the last version downloaded from the Owl repository (you can use `owl.min.js` if you prefer).
+Finally, `owl.js` should be the last version downloaded from the Owl repository (you can use `owl.min.js` if you prefer). Be aware that you should download the `owl.iife.js` or `owl.iife.min.js`, because these files
+are built to run directly on the browser (other files such as `owl.cjs.js` are
+built to be bundled by other tools).
 
 Now, the project should be ready. Loading the `index.html` file into a browser
 should show an empty page, with the title `Owl Todo App`, and it should log a

doc/reference/config.md

@@ -2,9 +2,10 @@
 
 The Owl framework is designed to work in many situations. However, it is
 sometimes necessary to customize some behaviour. This is done by using the
-global `config` object. It currently has one key:
+global `config` object. It provides two settings:
 
-- [`mode`](#mode).
+- [`mode`](#mode) (default value: `prod`),
+- [`enableTransitions`](#enabletransitions) (default value: `true`).
 
 ## Mode
 
@@ -25,3 +26,19 @@ So, changing this setting is best done at startup.
 
 An important job done by the `dev` mode is to validate props for each component
 creation and update. Also, extra props will cause an error.
+
+## `enableTransitions`
+
+Transitions are usually nice, but they can cause issues in some specific cases,
+such as automated tests. It is uncomfortable having to wait for a transition
+to end before moving to the next step.
+
+To solve this issue, Owl can be configured to ignore the `t-transition` directive.
+To do that, one only needs to set the `enableTransitions` flag to false:
+
+```js
+owl.config.enableTransitions = false;
+```
+
+Note that it suffers from the same drawback as the "dev" mode: all compiled
+templates, if any, will keep their current behaviours.

doc/reference/event_handling.md

@@ -78,6 +78,20 @@ The `t-on` directive allows to prebind its arguments. For example,
 Here, `expr` is a valid Owl expression, so it could be `true` or some variable
 from the rendering context.
 
+### Type Hinting
+
+Note that if you work with Typescript, the `trigger` method is generic on the type of the payload.
+
+You can then describe the type of the event, so you will see typing errors...
+
+```typescript
+this.trigger<MyCustomPayload>("my-custom-event", payload);
+```
+
+```typescript
+myCustomEventHandler(ev: OwlEvent<MyCustomPayload>) { ... }
+```
+
 ## Inline Event Handlers
 
 One can also directly specify inline statements. For example,

doc/reference/qweb_engine.md

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

doc/reference/qweb_templating_language.md

@@ -15,6 +15,7 @@
   - [Dynamic Attributes](#dynamic-attributes)
   - [Loops](#loops)
   - [Rendering Sub Templates](#rendering-sub-templates)
+  - [Dynamic Sub Templates](#dynamic-sub-templates)
   - [Translations](#translations)
   - [Debugging](#debugging)
 
@@ -452,6 +453,17 @@ are all equivalent:
 
 If there is no `t-key` directive, Owl will use the index as a default key.
 
+Note: the `t-foreach` directive only accepts arrays (lists) or objects. It does
+not work with other iterables, such as `Set`. However, it is only a matter of
+using the `...` javascript operator. For example:
+
+```xml
+<t t-foreach="...items" t-as="item">...</t>
+```
+
+The `...` operator will convert the `Set` (or any other iterables) into a list,
+which will work with Owl QWeb.
+
 ### Rendering Sub Templates
 
 QWeb templates can be used for top level rendering, but they can also be used
@@ -509,6 +521,22 @@ This can be used to define variables scoped to a sub template:
 <!-- "var" does not exist here -->
 ```
 
+### Dynamic sub templates
+
+The `t-call` directive can also be used to dynamically call a sub template,
+using string interpolation. For example:
+
+```xml
+<div t-name="main-template">
+    <t t-call="{{template}}">
+        <em>content</em>
+    </t>
+</div>
+```
+
+Here, the name of the template is obtained from the `template` value in the
+template rendering context.
+
 ### Translations
 
 By default, QWeb specify that templates should be translated. If this behaviour

doc/reference/router.md

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

doc/reference/tags.md

@@ -176,9 +176,9 @@ const uuid = generateUUID();
 class MyComponent extends Component {
   static template = xml`<div data-o-${uuid}="">...</div>`;
   static style = css`
-        [data-o-${uuid}] {
-            color: red;
-        }
-    `;
+    [data-o-${uuid}] {
+      color: red;
+    }
+  `;
 }
 ```

package.json

@@ -1,23 +1,20 @@
 {
   "name": "@odoo/owl",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Odoo Web Library (OWL)",
-  "main": "dist/owl.js",
+  "main": "dist/owl.cjs.js",
+  "browser": "dist/owl.iife.js",
+  "module": "dist/owl.es.js",
   "types": "dist/types/index.d.ts",
   "files": [
-    "dist/types/",
-    "dist/owl.js",
-    "dist/owl-iife.js"
+    "dist"
   ],
   "engines": {
     "node": ">=10.15.3"
   },
   "scripts": {
-    "build:js": "tsc --target esnext --module es6 --outDir dist/owl",
     "build:bundle": "rollup -c",
-    "build": "npm run build:js && npm run build:bundle",
-    "buildcommonjs": "npm run build:js && npm run build:bundle -- -f cjs",
-    "minify": "uglifyjs dist/owl.js -o dist/owl.min.js --compress --mangle",
+    "build": "npm run build:bundle",
     "test": "jest",
     "test:watch": "jest --watch",
     "tools:serve": "python3 tools/server.py || python tools/server.py",
@@ -25,7 +22,7 @@
     "pretools:watch": "npm run build",
     "tools:watch": "npm-run-all  --parallel tools:serve \"build:* -- --watch\"",
     "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md} --write",
-    "publish": "npm run build && mv dist/owl.js dist/owl-iife.js && npm run buildcommonjs && npm publish",
+    "publish": "npm run build && npm publish",
     "release": "node tools/release.js"
   },
   "repository": {
@@ -38,31 +35,34 @@
     "url": "https://github.com/odoo/owl/issues"
   },
   "homepage": "https://github.com/odoo/owl#readme",
-  "dependencies": {},
   "devDependencies": {
-    "@types/jest": "^23.3.12",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^14.11.8",
     "chalk": "^3.0.0",
     "cpx": "^1.5.0",
     "git-rev-sync": "^1.12.0",
     "github-api": "^3.3.0",
-    "jest": "^23.6.0",
-    "jest-environment-jsdom": "^24.7.1",
+    "jest": "^27.1.0",
+    "jest-environment-jsdom": "^27.1.0",
     "live-server": "^1.2.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "rollup": "^1.6.0",
-    "rollup-plugin-typescript2": "^0.20.1",
+    "rollup": "^2.56.3",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
     "sass": "^1.16.1",
     "source-map-support": "^0.5.10",
-    "ts-jest": "^23.10.5",
-    "typescript": "^3.7.2",
+    "ts-jest": "^27.0.5",
+    "typescript": "3.9.6",
     "uglify-es": "^3.3.9"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "roots": [
       "<rootDir>/src",
       "<rootDir>/tests"
     ],
+    "setupFiles": ["./tests/mocks/mockEventTarget.js"],
     "transform": {
       "^.+\\.ts?$": "ts-jest"
     },

roadmap.md

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

rollup.config.js

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

src/app.ts

@@ -0,0 +1,45 @@
+import { Component } from "./component/component";
+import { ComponentNode } from "./component/component_node";
+import { Scheduler } from "./component/scheduler";
+import { TemplateSet } from "./qweb/template_helpers";
+
+// reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
+
+export class App<T extends typeof Component = any> extends TemplateSet {
+  Root: T;
+  props: any;
+  env: any = {};
+  scheduler = new Scheduler(window.requestAnimationFrame.bind(window));
+  root: ComponentNode | null = null;
+  dev: boolean = true;
+
+  constructor(Root: T, props?: any) {
+    super();
+    this.Root = Root;
+    this.props = props;
+  }
+
+  configure(params: any) {
+    if (params.env) {
+      this.env = params.env;
+    }
+  }
+
+  mount(target: HTMLElement): Promise<InstanceType<T>> {
+    if (!(target instanceof HTMLElement)) {
+      throw new Error("Cannot mount component: the target is not a valid DOM element");
+    }
+    if (!document.body.contains(target)) {
+      throw new Error("Cannot mount a component on a detached dom node");
+    }
+    const node = new ComponentNode(this.Root, this.props, this);
+    this.root = node;
+    return node.mountComponent(target);
+  }
+
+  destroy() {
+    if (this.root) {
+      this.root.destroy();
+    }
+  }
+}

src/blockdom/attributes.ts

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

src/blockdom/block_compiler.ts

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

src/blockdom/config.ts

@@ -0,0 +1,16 @@
+export const config = {
+  // whether or not blockdom should normalize DOM whenever a block is created.
+  // Normalizing dom mean removing empty text nodes (or containing only spaces)
+  shouldNormalizeDom: true,
+
+  // this is the main event handler. Every event handler registered with blockdom
+  // will go through this function, giving it the data registered in the block
+  // and the event
+  mainEventHandler: (data: any, ev: Event) => {
+    if (typeof data === "function") {
+      data(ev);
+    } else if (Array.isArray(data)) {
+      data[0](data[1], ev);
+    }
+  },
+};

src/blockdom/events.ts

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

src/blockdom/html.ts

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

src/blockdom/index.ts

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

src/blockdom/list.ts

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

src/blockdom/multi.ts

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

src/blockdom/text.ts

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

src/blockdom/toggler.ts

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

src/browser.ts

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

src/component/component.ts

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

src/component/component_node.ts

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

src/component/directive.ts

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

src/component/fiber.ts

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

src/component/fibers.ts

@@ -0,0 +1,185 @@
+import type { BDom } from "../blockdom";
+import { mount } from "../blockdom";
+import type { ComponentNode } from "./component_node";
+import { STATUS } from "./status";
+// import { mountBlock } from "./bdom/block";
+
+export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
+  let current = node.fiber;
+  if (current) {
+    // current is necessarily a rootfiber here
+    let root = parent.root;
+    cancelFibers(root, current.children);
+    current.children = [];
+    current.parent = parent;
+    root.counter++;
+    current.root = root;
+    return current;
+  }
+  return new Fiber(node, parent);
+}
+
+export function makeRootFiber(node: ComponentNode): Fiber {
+  let current = node.fiber;
+  if (current) {
+    let root = current.root;
+    root.counter -= cancelFibers(root, current.children);
+    current.children = [];
+    root.counter++;
+    current.bdom = null;
+    return current;
+  }
+  const fiber = new RootFiber(node);
+  if (node.willPatch.length) {
+    fiber.willPatch.push(fiber);
+  }
+  if (node.patched.length) {
+    fiber.patched.push(fiber);
+  }
+
+  return fiber;
+}
+
+/**
+ * @returns number of not-yet rendered fibers cancelled
+ */
+function cancelFibers(root: any, fibers: Fiber[]): number {
+  let result = 0;
+  for (let fiber of fibers) {
+    fiber.node.fiber = null;
+    fiber.root = root;
+    if (!fiber.bdom) {
+      result++;
+    }
+    result += cancelFibers(root, fiber.children);
+  }
+  return result;
+}
+
+export class Fiber {
+  node: ComponentNode;
+  bdom: BDom | null = null;
+  root: RootFiber;
+  parent: Fiber | null;
+  children: Fiber[] = [];
+  appliedToDom = false;
+
+  constructor(node: ComponentNode, parent: Fiber | null) {
+    this.node = node;
+    node.fiber = this;
+    this.parent = parent;
+    if (parent) {
+      const root = parent.root;
+      root.counter++;
+      this.root = root;
+      parent.children.push(this);
+    } else {
+      this.root = this as any;
+    }
+  }
+}
+
+export class RootFiber extends Fiber {
+  counter: number = 1;
+  error: Error | null = null;
+  resolve: any;
+  promise: Promise<any>;
+  reject: any;
+
+  // only add stuff in this if they have registered some hooks
+  willPatch: Fiber[] = [];
+  patched: Fiber[] = [];
+  mounted: Fiber[] = [];
+
+  constructor(node: ComponentNode) {
+    super(node, null);
+    this.counter = 1;
+
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+  }
+
+  complete() {
+    const node = this.node;
+
+    // Step 1: calling all willPatch lifecycle hooks
+    for (let fiber of this.willPatch) {
+      // because of the asynchronous nature of the rendering, some parts of the
+      // UI may have been rendered, then deleted in a followup rendering, and we
+      // do not want to call onWillPatch in that case.
+      let node = fiber.node;
+      if (node.fiber === fiber) {
+        const component = node.component;
+        for (let cb of node.willPatch) {
+          cb.call(component);
+        }
+      }
+    }
+
+    // Step 2: patching the dom
+    node.bdom!.patch(this.bdom!, Object.keys(node.children).length > 0);
+    this.appliedToDom = true;
+
+    // Step 3: calling all destroyed hooks
+    for (let node of __internal__destroyed) {
+      for (let cb of node.destroyed) {
+        cb();
+      }
+    }
+    __internal__destroyed.length = 0;
+
+    // Step 4: calling all mounted lifecycle hooks
+    let current;
+    let mountedFibers = this.mounted;
+    while ((current = mountedFibers.pop())) {
+      if (current.appliedToDom) {
+        for (let cb of current.node.mounted) {
+          cb();
+        }
+      }
+    }
+
+    // Step 5: calling all patched hooks
+    let patchedFibers = this.patched;
+    while ((current = patchedFibers.pop())) {
+      if (current.appliedToDom) {
+        for (let cb of current.node.patched) {
+          cb();
+        }
+      }
+    }
+
+    // unregistering the fiber
+    node.fiber = null;
+  }
+}
+
+export let __internal__destroyed: ComponentNode[] = [];
+
+export class MountFiber extends RootFiber {
+  target: HTMLElement;
+
+  constructor(node: ComponentNode, target: HTMLElement) {
+    super(node);
+    this.target = target;
+  }
+  complete() {
+    const node = this.node;
+    node.bdom = this.bdom;
+    mount(node.bdom!, this.target);
+    node.status = STATUS.MOUNTED;
+    this.appliedToDom = true;
+    let current;
+    let mountedFibers = this.mounted;
+    while ((current = mountedFibers.pop())) {
+      if (current.appliedToDom) {
+        for (let cb of current.node.mounted) {
+          cb();
+        }
+      }
+    }
+    node.fiber = null;
+  }
+}

src/component/handler.ts

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

src/component/props_validation.ts

@@ -1,115 +0,0 @@
-import { QWeb } from "../qweb/index";
-
-//------------------------------------------------------------------------------
-// Prop validation helper
-//------------------------------------------------------------------------------
-
-/**
- * Validate the component props (or next props) against the (static) props
- * description.  This is potentially an expensive operation: it may needs to
- * visit recursively the props and all the children to check if they are valid.
- * This is why it is only done in 'dev' mode.
- */
-
-QWeb.utils.validateProps = function (Widget, props: Object) {
-  const propsDef = (<any>Widget).props;
-  if (propsDef instanceof Array) {
-    // list of strings (prop names)
-    for (let i = 0, l = propsDef.length; i < l; i++) {
-      const propName = propsDef[i];
-      if (propName[propName.length - 1] === "?") {
-        // optional prop
-        break;
-      }
-      if (!(propName in props)) {
-        throw new Error(`Missing props '${propsDef[i]}' (component '${Widget.name}')`);
-      }
-    }
-    for (let key in props) {
-      if (!propsDef.includes(key) && !propsDef.includes(key + "?")) {
-        throw new Error(`Unknown prop '${key}' given to component '${Widget.name}'`);
-      }
-    }
-  } else if (propsDef) {
-    // propsDef is an object now
-    for (let propName in propsDef) {
-      if (props[propName] === undefined) {
-        if (propsDef[propName] && !propsDef[propName].optional) {
-          throw new Error(`Missing props '${propName}' (component '${Widget.name}')`);
-        } else {
-          continue;
-        }
-      }
-      let isValid;
-      try {
-        isValid = isValidProp(props[propName], propsDef[propName]);
-      } catch (e) {
-        e.message = `Invalid prop '${propName}' in component ${Widget.name} (${e.message})`;
-        throw e;
-      }
-      if (!isValid) {
-        throw new Error(`Invalid Prop '${propName}' in component '${Widget.name}'`);
-      }
-    }
-    for (let propName in props) {
-      if (!(propName in propsDef)) {
-        throw new Error(`Unknown prop '${propName}' given to component '${Widget.name}'`);
-      }
-    }
-  }
-};
-
-/**
- * Check if an invidual prop value matches its (static) prop definition
- */
-function isValidProp(prop, propDef): boolean {
-  if (propDef === true) {
-    return true;
-  }
-  if (typeof propDef === "function") {
-    // Check if a value is constructed by some Constructor.  Note that there is a
-    // slight abuse of language: we want to consider primitive values as well.
-    //
-    // So, even though 1 is not an instance of Number, we want to consider that
-    // it is valid.
-    if (typeof prop === "object") {
-      return prop instanceof propDef;
-    }
-    return typeof prop === propDef.name.toLowerCase();
-  } else if (propDef instanceof Array) {
-    // If this code is executed, this means that we want to check if a prop
-    // matches at least one of its descriptor.
-    let result = false;
-    for (let i = 0, iLen = propDef.length; i < iLen; i++) {
-      result = result || isValidProp(prop, propDef[i]);
-    }
-    return result;
-  }
-  // propsDef is an object
-  if (propDef.optional && prop === undefined) {
-    return true;
-  }
-  let result = propDef.type ? isValidProp(prop, propDef.type) : true;
-  if (propDef.validate) {
-    result = result && propDef.validate(prop);
-  }
-  if (propDef.type === Array && propDef.element) {
-    for (let i = 0, iLen = prop.length; i < iLen; i++) {
-      result = result && isValidProp(prop[i], propDef.element);
-    }
-  }
-  if (propDef.type === Object && propDef.shape) {
-    const shape = propDef.shape;
-    for (let key in shape) {
-      result = result && isValidProp(prop[key], shape[key]);
-    }
-    if (result) {
-      for (let propName in prop) {
-        if (!(propName in shape)) {
-          throw new Error(`unknown prop '${propName}'`);
-        }
-      }
-    }
-  }
-  return result;
-}

src/component/scheduler.ts

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

src/component/status.ts

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

src/component/styles.ts

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

src/config.ts

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

src/context.ts

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

src/core/event_bus.ts

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

src/core/observer.ts

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

src/core/owl_event.ts

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

src/event_bus.ts

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

src/hooks.ts

@@ -1,162 +0,0 @@
-import { Component } from "./component/component";
-import { Observer } from "./core/observer";
-
-/**
- * Owl Hook System
- *
- * This file introduces the concept of hooks, similar to React or Vue hooks.
- * We have currently an implementation of:
- * - useState (reactive state)
- * - onMounted
- * - onWillUnmount
- * - useRef
- */
-
-// -----------------------------------------------------------------------------
-// useState
-// -----------------------------------------------------------------------------
-
-/**
- * This is the main way a component can be made reactive.  The useState hook
- * will return an observed object (or array).  Changes to that value will then
- * trigger a rerendering of the current component.
- */
-export function useState<T>(state: T): T {
-  const component: Component = Component.current!;
-  const __owl__ = component.__owl__;
-  if (!__owl__.observer) {
-    __owl__.observer = new Observer();
-    __owl__.observer.notifyCB = component.render.bind(component);
-  }
-  return __owl__.observer.observe(state);
-}
-
-// -----------------------------------------------------------------------------
-// Life cycle hooks
-// -----------------------------------------------------------------------------
-function makeLifecycleHook(method: string, reverse: boolean = false) {
-  if (reverse) {
-    return function (cb) {
-      const component: Component = Component.current!;
-      if (component.__owl__[method]) {
-        const current = component.__owl__[method];
-        component.__owl__[method] = function () {
-          current.call(component);
-          cb.call(component);
-        };
-      } else {
-        component.__owl__[method] = cb;
-      }
-    };
-  } else {
-    return function (cb) {
-      const component: Component = Component.current!;
-      if (component.__owl__[method]) {
-        const current = component.__owl__[method];
-        component.__owl__[method] = function () {
-          cb.call(component);
-          current.call(component);
-        };
-      } else {
-        component.__owl__[method] = cb;
-      }
-    };
-  }
-}
-
-function makeAsyncHook(method: string) {
-  return function (cb) {
-    const component: Component = Component.current!;
-    if (component.__owl__[method]) {
-      const current = component.__owl__[method];
-      component.__owl__[method] = function (...args) {
-        return Promise.all([current.call(component, ...args), cb.call(component, ...args)]);
-      };
-    } else {
-      component.__owl__[method] = cb;
-    }
-  };
-}
-
-export const onMounted = makeLifecycleHook("mountedCB", true);
-export const onWillUnmount = makeLifecycleHook("willUnmountCB");
-export const onWillPatch = makeLifecycleHook("willPatchCB");
-export const onPatched = makeLifecycleHook("patchedCB", true);
-
-export const onWillStart = makeAsyncHook("willStartCB");
-export const onWillUpdateProps = makeAsyncHook("willUpdatePropsCB");
-
-// -----------------------------------------------------------------------------
-// useRef
-// -----------------------------------------------------------------------------
-
-/**
- * The purpose of this hook is to allow components to get a reference to a sub
- * html node or component.
- */
-interface Ref<C extends Component = Component> {
-  el: HTMLElement | null;
-  comp: C | null;
-}
-
-export function useRef<C extends Component = Component>(name: string): Ref<C> {
-  const __owl__ = Component.current!.__owl__;
-  return {
-    get el(): HTMLElement | null {
-      const val = __owl__.refs && __owl__.refs[name];
-      if (val instanceof HTMLElement) {
-        return val;
-      } else if (val instanceof Component) {
-        return val.el;
-      }
-      return null;
-    },
-    get comp(): C | null {
-      const val = __owl__.refs && __owl__.refs[name];
-      return val instanceof Component ? (val as C) : null;
-    },
-  };
-}
-
-// -----------------------------------------------------------------------------
-// useSubEnv
-// -----------------------------------------------------------------------------
-
-/**
- * This hook is a simple way to let components use a sub environment.  Note that
- * like for all hooks, it is important that this is only called in the
- * constructor method.
- */
-export function useSubEnv(nextEnv) {
-  const component = Component.current!;
-  component.env = Object.assign(Object.create(component.env), nextEnv);
-}
-
-// -----------------------------------------------------------------------------
-// useExternalListener
-// -----------------------------------------------------------------------------
-
-/**
- * When a component needs to listen to DOM Events on element(s) that are not
- * part of his hierarchy, we can use the `useExternalListener` hook.
- * It will correctly add and remove the event listener, whenever the
- * component is mounted and unmounted.
- *
- * Example:
- *  a menu needs to listen to the click on window to be closed automatically
- *
- * Usage:
- *  in the constructor of the OWL component that needs to be notified,
- *  `useExternalListener(window, 'click', this._doSomething);`
- * */
-export function useExternalListener(
-  target: HTMLElement | typeof window,
-  eventName: string,
-  handler,
-  eventParams?
-) {
-  const boundHandler = handler.bind(Component.current);
-
-  onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
-  onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
-}

src/index.ts

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

src/lifecycle_hooks.ts

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

src/misc/async_root.ts

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

src/misc/memo.ts

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

src/misc/portal.ts

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

src/qweb/base_directives.ts

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

src/qweb/compilation_context.ts

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

src/qweb/compiler.ts

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

src/qweb/extensions.ts

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

src/qweb/index.ts

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

src/qweb/inline_expressions.ts

@@ -25,18 +25,19 @@
 // Misc types, constants and helpers
 //------------------------------------------------------------------------------
 
-const RESERVED_WORDS = "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(
-  ","
-);
+const RESERVED_WORDS =
+  "true,false,NaN,null,undefined,debugger,console,window,in,instanceof,new,function,return,this,eval,void,Math,RegExp,Array,Object,Date".split(
+    ","
+  );
 
-const WORD_REPLACEMENT = {
+const WORD_REPLACEMENT: { [key: string]: string } = Object.assign(Object.create(null), {
   and: "&&",
   or: "||",
   gt: ">",
   gte: ">=",
   lt: "<",
   lte: "<=",
-};
+});
 
 export interface QWebVar {
   id: string; // foo
@@ -57,6 +58,7 @@ type TKind =
   | "RIGHT_PAREN"
   | "COMMA"
   | "VALUE"
+  | "TEMPLATE_STRING"
   | "SYMBOL"
   | "OPERATOR"
   | "COLON";
@@ -67,9 +69,10 @@ interface Token {
   originalValue?: string;
   size?: number;
   varName?: string;
+  replace?: Function;
 }
 
-const STATIC_TOKEN_MAP: { [key: string]: TKind } = {
+const STATIC_TOKEN_MAP: { [key: string]: TKind } = Object.assign(Object.create(null), {
   "{": "LEFT_BRACE",
   "}": "RIGHT_BRACE",
   "[": "LEFT_BRACKET",
@@ -78,7 +81,7 @@ const STATIC_TOKEN_MAP: { [key: string]: TKind } = {
   ",": "COMMA",
   "(": "LEFT_PAREN",
   ")": "RIGHT_PAREN",
-};
+});
 
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof
@@ -89,7 +92,7 @@ type Tokenizer = (expr: string) => Token | false;
 let tokenizeString: Tokenizer = function (expr) {
   let s = expr[0];
   let start = s;
-  if (s !== "'" && s !== '"') {
+  if (s !== "'" && s !== '"' && s !== "`") {
     return false;
   }
   let i = 1;
@@ -111,6 +114,17 @@ let tokenizeString: Tokenizer = function (expr) {
     throw new Error("Invalid expression");
   }
   s += start;
+  if (start === "`") {
+    return {
+      type: "TEMPLATE_STRING",
+      value: s,
+      replace(replacer: any) {
+        return s.replace(/\$\{(.*?)\}/g, (match, group) => {
+          return "${" + replacer(group) + "}";
+        });
+      },
+    };
+  }
   return { type: "VALUE", value: s };
 };
 
@@ -210,6 +224,11 @@ export function tokenize(expr: string): Token[] {
 // Expression "evaluator"
 //------------------------------------------------------------------------------
 
+const isLeftSeparator = (token: Token) =>
+  token && (token.type === "LEFT_BRACE" || token.type === "COMMA");
+const isRightSeparator = (token: Token) =>
+  token && (token.type === "RIGHT_BRACE" || token.type === "COMMA");
+
 /**
  * This is the main function exported by this file. This is the code that will
  * process an expression (given as a string) and returns another expression with
@@ -235,16 +254,41 @@ export function tokenize(expr: string): Token[] {
  * the arrow operator, then we add the current (or some previous tokens) token to
  * the list of variables so it does not get replaced by a lookup in the context
  */
-export function compileExprToArray(expr: string, scope: { [key: string]: QWebVar }): Token[] {
-  scope = Object.create(scope);
+export function compileExprToArray(expr: string): Token[] {
+  const localVars = new Set<string>();
   const tokens = tokenize(expr);
-  for (let i = 0; i < tokens.length; i++) {
+  let i = 0;
+  let stack = []; // to track last opening [ or {
+
+  while (i < tokens.length) {
     let token = tokens[i];
     let prevToken = tokens[i - 1];
     let nextToken = tokens[i + 1];
+    let groupType = stack[stack.length - 1];
+
+    switch (token.type) {
+      case "LEFT_BRACE":
+      case "LEFT_BRACKET":
+        stack.push(token.type);
+        break;
+      case "RIGHT_BRACE":
+      case "RIGHT_BRACKET":
+        stack.pop();
+    }
+
     let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
     if (token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value)) {
       if (prevToken) {
+        // normalize missing tokens: {a} should be equivalent to {a:a}
+        if (
+          groupType === "LEFT_BRACE" &&
+          isLeftSeparator(prevToken) &&
+          isRightSeparator(nextToken)
+        ) {
+          tokens.splice(i + 1, 0, { type: "COLON", value: ":" }, { ...token });
+          nextToken = tokens[i + 1];
+        }
+
         if (prevToken.type === "OPERATOR" && prevToken.value === ".") {
           isVar = false;
         } else if (prevToken.type === "LEFT_BRACE" || prevToken.type === "COMMA") {
@@ -254,36 +298,51 @@ export function compileExprToArray(expr: string, scope: { [key: string]: QWebVar
         }
       }
     }
+    if (token.type === "TEMPLATE_STRING") {
+      token.value = token.replace!((expr: any) => compileExpr(expr));
+    }
     if (nextToken && nextToken.type === "OPERATOR" && nextToken.value === "=>") {
       if (token.type === "RIGHT_PAREN") {
         let j = i - 1;
         while (j > 0 && tokens[j].type !== "LEFT_PAREN") {
           if (tokens[j].type === "SYMBOL" && tokens[j].originalValue) {
             tokens[j].value = tokens[j].originalValue!;
-            scope[tokens[j].value] = { id: tokens[j].value, expr: tokens[j].value };
+            localVars.add(tokens[j].value); //] = { id: tokens[j].value, expr: tokens[j].value };
           }
           j--;
         }
       } else {
-        scope[token.value] = { id: token.value, expr: token.value };
+        localVars.add(token.value); //] = { id: token.value, expr: token.value };
       }
     }
 
     if (isVar) {
       token.varName = token.value;
-      if (token.value in scope && "id" in scope[token.value]) {
-        token.value = scope[token.value].expr!;
-      } else {
+      if (!localVars.has(token.value)) {
         token.originalValue = token.value;
-        token.value = `scope['${token.value}']`;
+        token.value = `ctx['${token.value}']`;
       }
     }
+    i++;
   }
   return tokens;
 }
 
-export function compileExpr(expr: string, scope: { [key: string]: QWebVar }): string {
-  return compileExprToArray(expr, scope)
+export function compileExpr(expr: string): string {
+  return compileExprToArray(expr)
     .map((t) => t.value)
     .join("");
 }
+
+export const INTERP_REGEXP = /\{\{.*?\}\}/g;
+const INTERP_GROUP_REGEXP = /\{\{.*?\}\}/g;
+
+export function interpolate(s: string): string {
+  let matches = s.match(INTERP_REGEXP);
+  if (matches && matches[0].length === s.length) {
+    return `(${compileExpr(s.slice(2, -2))})`;
+  }
+
+  let r = s.replace(INTERP_GROUP_REGEXP, (s) => "${" + compileExpr(s.slice(2, -2)) + "}");
+  return "`" + r + "`";
+}

src/qweb/parser.ts

@@ -0,0 +1,798 @@
+// -----------------------------------------------------------------------------
+// AST Type definition
+// -----------------------------------------------------------------------------
+
+export const enum ASTType {
+  Text,
+  Comment,
+  DomNode,
+  Multi,
+  TEsc,
+  TIf,
+  TSet,
+  TCall,
+  TRaw,
+  TForEach,
+  TKey,
+  TComponent,
+  TDebug,
+  TLog,
+  TSlot,
+  TCallBlock,
+}
+
+export interface ASTText {
+  type: ASTType.Text;
+  value: string;
+}
+
+export interface ASTComment {
+  type: ASTType.Comment;
+  value: string;
+}
+
+export interface ASTDomNode {
+  type: ASTType.DomNode;
+  tag: string;
+  attrs: { [key: string]: string };
+  content: AST[];
+  ref: string | null;
+  on: { [key: string]: string };
+}
+
+export interface ASTMulti {
+  type: ASTType.Multi;
+  content: AST[];
+}
+
+export interface ASTTEsc {
+  type: ASTType.TEsc;
+  expr: string;
+  defaultValue: string;
+}
+
+export interface ASTTRaw {
+  type: ASTType.TRaw;
+  expr: string;
+  body: AST[] | null;
+}
+
+export interface ASTTif {
+  type: ASTType.TIf;
+  condition: string;
+  content: AST;
+  tElif: { condition: string; content: AST }[] | null;
+  tElse: AST | null;
+}
+
+export interface ASTTSet {
+  type: ASTType.TSet;
+  name: string;
+  value: string | null; // value defined in attribute
+  defaultValue: string | null; // value defined in body, if text
+  body: AST[] | null; // content of body if not text
+}
+
+export interface ASTTForEach {
+  type: ASTType.TForEach;
+  collection: string;
+  elem: string;
+  key: string | null;
+  body: AST;
+  memo: string;
+  isOnlyChild: boolean;
+  hasNoComponent: boolean;
+  hasNoFirst: boolean;
+  hasNoLast: boolean;
+  hasNoIndex: boolean;
+  hasNoValue: boolean;
+}
+
+export interface ASTTKey {
+  type: ASTType.TKey;
+  expr: string;
+  content: AST;
+}
+
+export interface ASTTCall {
+  type: ASTType.TCall;
+  name: string;
+  body: AST[] | null;
+}
+
+export interface ASTComponent {
+  type: ASTType.TComponent;
+  name: string;
+  isDynamic: boolean;
+  props: { [name: string]: string };
+  handlers: { [event: string]: string };
+  slots: { [name: string]: AST };
+}
+
+export interface ASTSlot {
+  type: ASTType.TSlot;
+  name: string;
+  defaultContent: AST | null;
+}
+
+export interface ASTTCallBlock {
+  type: ASTType.TCallBlock;
+  name: string;
+}
+
+export interface ASTDebug {
+  type: ASTType.TDebug;
+  content: AST | null;
+}
+
+export interface ASTLog {
+  type: ASTType.TLog;
+  expr: string;
+  content: AST | null;
+}
+
+export type AST =
+  | ASTText
+  | ASTComment
+  | ASTDomNode
+  | ASTMulti
+  | ASTTEsc
+  | ASTTif
+  | ASTTSet
+  | ASTTCall
+  | ASTTRaw
+  | ASTTForEach
+  | ASTTKey
+  | ASTComponent
+  | ASTSlot
+  | ASTTCallBlock
+  | ASTLog
+  | ASTDebug;
+
+// -----------------------------------------------------------------------------
+// Parser
+// -----------------------------------------------------------------------------
+interface ParsingContext {
+  inPreTag: boolean;
+}
+
+export function parse(xml: string): AST {
+  const template = `<t>${xml}</t>`;
+  const doc = parseXML(template);
+  const ctx = { inPreTag: false };
+  const ast = parseNode(doc.firstChild!, ctx);
+  if (!ast) {
+    return { type: ASTType.Text, value: "" };
+  }
+  return ast;
+}
+
+function parseNode(node: ChildNode, ctx: ParsingContext): AST | null {
+  if (!(node instanceof Element)) {
+    return parseTextCommentNode(node, ctx);
+  }
+  return (
+    parseTDebugLog(node, ctx) ||
+    parseTForEach(node, ctx) ||
+    parseTIf(node, ctx) ||
+    parseTCall(node, ctx) ||
+    parseTCallBlock(node, ctx) ||
+    parseTEscNode(node, ctx) ||
+    parseTKey(node, ctx) ||
+    parseTSlot(node, ctx) ||
+    parseTRawNode(node, ctx) ||
+    parseComponent(node, ctx) ||
+    parseDOMNode(node, ctx) ||
+    parseTSetNode(node, ctx) ||
+    parseTNode(node, ctx)
+  );
+}
+
+// -----------------------------------------------------------------------------
+// <t /> tag
+// -----------------------------------------------------------------------------
+
+function parseTNode(node: Element, ctx: ParsingContext): AST | null {
+  if (node.tagName !== "t") {
+    return null;
+  }
+  const children: AST[] = [];
+  for (let child of node.childNodes) {
+    const ast = parseNode(child, ctx);
+    if (ast) {
+      children.push(ast);
+    }
+  }
+  switch (children.length) {
+    case 0:
+      return null;
+    case 1:
+      return children[0];
+    default:
+      return {
+        type: ASTType.Multi,
+        content: children,
+      };
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Text and Comment Nodes
+// -----------------------------------------------------------------------------
+const lineBreakRE = /[\r\n]/;
+const whitespaceRE = /\s+/g;
+
+function parseTextCommentNode(node: ChildNode, ctx: ParsingContext): AST | null {
+  if (node.nodeType === 3) {
+    let value = node.textContent || "";
+    if (!ctx.inPreTag) {
+      if (lineBreakRE.test(value) && !value.trim()) {
+        return null;
+      }
+      value = value.replace(whitespaceRE, " ");
+    }
+
+    return { type: ASTType.Text, value };
+  } else if (node.nodeType === 8) {
+    return { type: ASTType.Comment, value: node.textContent || "" };
+  }
+  return null;
+}
+
+// -----------------------------------------------------------------------------
+// debugging
+// -----------------------------------------------------------------------------
+
+function parseTDebugLog(node: Element, ctx: ParsingContext): AST | null {
+  if (node.hasAttribute("t-debug")) {
+    node.removeAttribute("t-debug");
+    return {
+      type: ASTType.TDebug,
+      content: parseNode(node, ctx),
+    };
+  }
+
+  if (node.hasAttribute("t-log")) {
+    const expr = node.getAttribute("t-log")!;
+    node.removeAttribute("t-log");
+    return {
+      type: ASTType.TLog,
+      expr,
+      content: parseNode(node, ctx),
+    };
+  }
+  return null;
+}
+
+// -----------------------------------------------------------------------------
+// Regular dom node
+// -----------------------------------------------------------------------------
+
+function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
+  if (node.tagName === "t") {
+    return null;
+  }
+  const children: AST[] = [];
+  if (node.tagName === "pre") {
+    ctx = { inPreTag: true };
+  }
+  let ref = null;
+  if (node.hasAttribute("t-ref")) {
+    ref = node.getAttribute("t-ref");
+    node.removeAttribute("t-ref");
+  }
+
+  for (let child of node.childNodes) {
+    const ast = parseNode(child, ctx);
+    if (ast) {
+      children.push(ast);
+    }
+  }
+
+  const attrs: ASTDomNode["attrs"] = {};
+  const on: ASTDomNode["on"] = {};
+
+  for (let attr of node.getAttributeNames()) {
+    const value = node.getAttribute(attr)!;
+    if (attr.startsWith("t-on")) {
+      if (attr === "t-on") {
+        throw new Error("Missing event name with t-on directive");
+      }
+      on[attr.slice(5)] = value;
+    } else {
+      if (attr.startsWith("t-") && !attr.startsWith("t-att")) {
+        throw new Error(`Unknown QWeb directive: '${attr}'`);
+      }
+      attrs[attr] = value;
+    }
+  }
+  if (children.length === 1 && children[0].type === ASTType.TForEach) {
+    children[0].isOnlyChild = true;
+  }
+  return {
+    type: ASTType.DomNode,
+    tag: node.tagName,
+    attrs,
+    on,
+    ref,
+    content: children,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-esc
+// -----------------------------------------------------------------------------
+
+function parseTEscNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-esc")) {
+    return null;
+  }
+  const escValue = node.getAttribute("t-esc")!;
+  node.removeAttribute("t-esc");
+  const tesc: AST = {
+    type: ASTType.TEsc,
+    expr: escValue,
+    defaultValue: node.textContent || "",
+  };
+  let ref = node.getAttribute("t-ref");
+  node.removeAttribute("t-ref");
+  const ast = parseNode(node, ctx);
+  if (!ast) {
+    return tesc;
+  }
+  if (ast && ast.type === ASTType.DomNode) {
+    return {
+      type: ASTType.DomNode,
+      tag: ast.tag,
+      attrs: ast.attrs,
+      on: ast.on,
+      ref,
+      content: [tesc],
+    };
+  }
+  if (ast && ast.type === ASTType.TComponent) {
+    return {
+      ...ast,
+      slots: { default: tesc },
+    };
+  }
+  return tesc;
+}
+
+// -----------------------------------------------------------------------------
+// t-raw
+// -----------------------------------------------------------------------------
+
+function parseTRawNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-raw")) {
+    return null;
+  }
+  const expr = node.getAttribute("t-raw")!;
+  node.removeAttribute("t-raw");
+
+  const tRaw: AST = { type: ASTType.TRaw, expr, body: null };
+  const ref = node.getAttribute("t-ref");
+  node.removeAttribute("t-ref");
+  const ast = parseNode(node, ctx);
+  if (!ast) {
+    return tRaw;
+  }
+  if (ast && ast.type === ASTType.DomNode) {
+    tRaw.body = ast.content.length ? ast.content : null;
+    return {
+      type: ASTType.DomNode,
+      tag: ast.tag,
+      attrs: ast.attrs,
+      on: ast.on,
+      ref,
+      content: [tRaw],
+    };
+  }
+
+  return tRaw;
+}
+
+// -----------------------------------------------------------------------------
+// t-foreach and t-key
+// -----------------------------------------------------------------------------
+
+function parseTForEach(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-foreach")) {
+    return null;
+  }
+  const html = node.outerHTML;
+  const collection = node.getAttribute("t-foreach")!;
+  node.removeAttribute("t-foreach");
+  const elem = node.getAttribute("t-as") || "";
+  node.removeAttribute("t-as");
+  const key = node.getAttribute("t-key");
+  node.removeAttribute("t-key");
+  const memo = node.getAttribute("t-memo") || "";
+  node.removeAttribute("t-memo");
+  const body = parseNode(node, ctx);
+
+  if (!body) {
+    return null;
+  }
+
+  const hasNoTCall = !html.includes("t-call");
+  const hasNoFirst = hasNoTCall && !html.includes(`${elem}_first`);
+  const hasNoLast = hasNoTCall && !html.includes(`${elem}_last`);
+  const hasNoIndex = hasNoTCall && !html.includes(`${elem}_index`);
+  const hasNoValue = hasNoTCall && !html.includes(`${elem}_value`);
+
+  return {
+    type: ASTType.TForEach,
+    collection,
+    elem,
+    body,
+    memo,
+    key,
+    isOnlyChild: false,
+    hasNoComponent: hasNoComponent(body),
+    hasNoFirst,
+    hasNoLast,
+    hasNoIndex,
+    hasNoValue,
+  };
+}
+
+/**
+ * @returns true if we are sure the ast does not contain any component
+ */
+function hasNoComponent(ast: AST): boolean {
+  switch (ast.type) {
+    case ASTType.TComponent:
+    case ASTType.TRaw:
+    case ASTType.TCall:
+    case ASTType.TCallBlock:
+    case ASTType.TSlot:
+      return false;
+    case ASTType.TSet:
+    case ASTType.Text:
+    case ASTType.Comment:
+    case ASTType.TEsc:
+      return true;
+    case ASTType.TKey:
+      return hasNoComponent(ast.content);
+    case ASTType.TDebug:
+    case ASTType.TLog:
+      return ast.content ? hasNoComponent(ast.content) : true;
+    case ASTType.TForEach:
+      return ast.hasNoComponent;
+    case ASTType.Multi:
+    case ASTType.DomNode: {
+      for (let elem of ast.content) {
+        if (!hasNoComponent(elem)) {
+          return false;
+        }
+      }
+      return true;
+    }
+    case ASTType.TIf: {
+      if (!hasNoComponent(ast.content)) {
+        return false;
+      }
+      if (ast.tElif) {
+        for (let elem of ast.tElif) {
+          if (!hasNoComponent(elem.content)) {
+            return false;
+          }
+        }
+      }
+      if (ast.tElse && !hasNoComponent(ast.tElse)) {
+        return false;
+      }
+      return true;
+    }
+  }
+}
+
+function parseTKey(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-key")) {
+    return null;
+  }
+  const key = node.getAttribute("t-key")!;
+  node.removeAttribute("t-key");
+  const body = parseNode(node, ctx);
+  if (!body) {
+    return null;
+  }
+  return { type: ASTType.TKey, expr: key, content: body };
+}
+
+// -----------------------------------------------------------------------------
+// t-call
+// -----------------------------------------------------------------------------
+
+function parseTCall(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-call")) {
+    return null;
+  }
+  const subTemplate = node.getAttribute("t-call")!;
+
+  node.removeAttribute("t-call");
+  if (node.tagName !== "t") {
+    const ast = parseNode(node, ctx);
+    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null };
+    if (ast && ast.type === ASTType.DomNode) {
+      ast.content = [tcall];
+      return ast;
+    }
+    if (ast && ast.type === ASTType.TComponent) {
+      return {
+        ...ast,
+        slots: { default: tcall },
+      };
+    }
+  }
+  const body: AST[] = [];
+  for (let child of node.childNodes) {
+    const ast = parseNode(child, ctx);
+    if (ast) {
+      body.push(ast);
+    }
+  }
+
+  return {
+    type: ASTType.TCall,
+    name: subTemplate,
+    body: body.length ? body : null,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-call-block
+// -----------------------------------------------------------------------------
+
+function parseTCallBlock(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-call-block")) {
+    return null;
+  }
+  const name = node.getAttribute("t-call-block")!;
+  return {
+    type: ASTType.TCallBlock,
+    name,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-if
+// -----------------------------------------------------------------------------
+
+function parseTIf(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-if")) {
+    return null;
+  }
+  const condition = node.getAttribute("t-if")!;
+  node.removeAttribute("t-if");
+  const content = parseNode(node, ctx);
+  if (!content) {
+    throw new Error("hmmm");
+  }
+
+  let nextElement = node.nextElementSibling;
+  // t-elifs
+  const tElifs: any[] = [];
+  while (nextElement && nextElement.hasAttribute("t-elif")) {
+    const condition = nextElement.getAttribute("t-elif");
+    nextElement.removeAttribute("t-elif");
+    const tElif = parseNode(nextElement, ctx);
+    const next = nextElement.nextElementSibling;
+    nextElement.remove();
+    nextElement = next;
+    if (tElif) {
+      tElifs.push({ condition, content: tElif });
+    }
+  }
+
+  // t-else
+  let tElse: AST | null = null;
+  if (nextElement && nextElement.hasAttribute("t-else")) {
+    nextElement.removeAttribute("t-else");
+    tElse = parseNode(nextElement, ctx);
+    nextElement.remove();
+  }
+
+  return {
+    type: ASTType.TIf,
+    condition,
+    content,
+    tElif: tElifs.length ? tElifs : null,
+    tElse,
+  };
+}
+
+// -----------------------------------------------------------------------------
+// t-set directive
+// -----------------------------------------------------------------------------
+
+function parseTSetNode(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-set")) {
+    return null;
+  }
+  const name = node.getAttribute("t-set")!;
+  const value = node.getAttribute("t-value") || null;
+  const defaultValue = node.innerHTML === node.textContent ? node.textContent || null : null;
+  let body: AST[] | null = null;
+  if (node.textContent !== node.innerHTML) {
+    body = [];
+    for (let child of node.childNodes) {
+      let childAst = parseNode(child, ctx);
+      if (childAst) {
+        body.push(childAst);
+      }
+    }
+  }
+  return { type: ASTType.TSet, name, value, defaultValue, body };
+}
+
+// -----------------------------------------------------------------------------
+// Components
+// -----------------------------------------------------------------------------
+
+function parseComponent(node: Element, ctx: ParsingContext): AST | null {
+  let name = node.tagName;
+  const firstLetter = name[0];
+  let isDynamic = node.hasAttribute("t-component");
+
+  if (!(firstLetter === firstLetter.toUpperCase() || isDynamic)) {
+    return null;
+  }
+  if (isDynamic) {
+    name = node.getAttribute("t-component")!;
+    node.removeAttribute("t-component");
+  }
+
+  const props: ASTComponent["props"] = {};
+  const handlers: ASTComponent["handlers"] = {};
+  for (let name of node.getAttributeNames()) {
+    const value = node.getAttribute(name)!;
+    if (name.startsWith("t-on-")) {
+      handlers[name.slice(5)] = value;
+    } else {
+      props[name] = value;
+    }
+  }
+
+  const slots: ASTComponent["slots"] = {};
+  if (node.hasChildNodes()) {
+    const clone = <Element>node.cloneNode(true);
+
+    // named slots
+    const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
+    for (let slotNode of slotNodes) {
+      const name = slotNode.getAttribute("t-set-slot")!;
+
+      // check if this is defined in a sub component (in which case it should
+      // be ignored)
+      let el = slotNode.parentElement!;
+      let isInSubComponent = false;
+      while (el !== clone) {
+        if (el!.hasAttribute("t-component") || el!.tagName[0] === el!.tagName[0].toUpperCase()) {
+          isInSubComponent = true;
+          break;
+        }
+        el = el.parentElement!;
+      }
+      if (isInSubComponent) {
+        continue;
+      }
+
+      slotNode.removeAttribute("t-set-slot");
+      slotNode.remove();
+      const slotAst = parseNode(slotNode, ctx);
+      if (slotAst) {
+        slots[name] = slotAst;
+      }
+    }
+
+    // default slot
+    const defaultContent = parseChildNodes(clone, ctx);
+    if (defaultContent) {
+      slots.default = defaultContent;
+    }
+  }
+  return { type: ASTType.TComponent, name, isDynamic, props, handlers, slots };
+}
+
+// -----------------------------------------------------------------------------
+// Slots
+// -----------------------------------------------------------------------------
+
+function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
+  if (!node.hasAttribute("t-slot")) {
+    return null;
+  }
+  return {
+    type: ASTType.TSlot,
+    name: node.getAttribute("t-slot")!,
+    defaultContent: parseChildNodes(node, ctx),
+  };
+}
+
+// -----------------------------------------------------------------------------
+// helpers
+// -----------------------------------------------------------------------------
+
+function parseChildNodes(node: Element, ctx: ParsingContext): AST | null {
+  const children: AST[] = [];
+  for (let child of node.childNodes) {
+    const childAst = parseNode(child, ctx);
+    if (childAst) {
+      children.push(childAst);
+    }
+  }
+  switch (children.length) {
+    case 0:
+      return null;
+    case 1:
+      return children[0];
+    default:
+      return { type: ASTType.Multi, content: children };
+  }
+}
+function parseXML(xml: string): Document {
+  const parser = new DOMParser();
+
+  const doc = parser.parseFromString(xml, "text/xml");
+  if (doc.getElementsByTagName("parsererror").length) {
+    let msg = "Invalid XML in template.";
+    const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
+    if (parsererrorText) {
+      msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
+      const re = /\d+/g;
+      const firstMatch = re.exec(parsererrorText);
+      if (firstMatch) {
+        const lineNumber = Number(firstMatch[0]);
+        const line = xml.split("\n")[lineNumber - 1];
+        const secondMatch = re.exec(parsererrorText);
+        if (line && secondMatch) {
+          const columnIndex = Number(secondMatch[0]) - 1;
+          if (line[columnIndex]) {
+            msg +=
+              `\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
+              `${line}\n${"-".repeat(columnIndex - 1)}^`;
+          }
+        }
+      }
+    }
+    throw new Error(msg);
+  }
+  let tbranch = doc.querySelectorAll("[t-elif], [t-else]");
+  for (let i = 0, ilen = tbranch.length; i < ilen; i++) {
+    let node = tbranch[i];
+    let prevElem = node.previousElementSibling!;
+    let pattr = (name: string) => prevElem.getAttribute(name);
+    let nattr = (name: string) => +!!node.getAttribute(name);
+    if (prevElem && (pattr("t-if") || pattr("t-elif"))) {
+      if (pattr("t-foreach")) {
+        throw new Error(
+          "t-if cannot stay at the same level as t-foreach when using t-elif or t-else"
+        );
+      }
+      if (
+        ["t-if", "t-elif", "t-else"].map(nattr).reduce(function (a, b) {
+          return a + b;
+        }) > 1
+      ) {
+        throw new Error("Only one conditional branching directive is allowed per node");
+      }
+      // All text (with only spaces) and comment nodes (nodeType 8) between
+      // branch nodes are removed
+      let textNode;
+      while ((textNode = node.previousSibling) !== prevElem) {
+        if (textNode!.nodeValue!.trim().length && textNode!.nodeType !== 8) {
+          throw new Error("text is not allowed between branching directives");
+        }
+        textNode!.remove();
+      }
+    } else {
+      throw new Error(
+        "t-elif and t-else directives must be preceded by a t-if or t-elif directive"
+      );
+    }
+  }
+
+  return doc;
+}

src/qweb/qweb.ts

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

src/qweb/template_helpers.ts

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

src/reactivity.ts

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

src/refs.ts

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

src/router/link.ts

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

src/router/route_component.ts

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

src/router/router.ts

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

src/store.ts

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

src/tags.ts

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

src/utils.ts

@@ -1,103 +0,0 @@
-/**
- * Owl Utils
- *
- * We have here a small collection of utility functions:
- *
- * - whenReady
- * - loadJS
- * - loadFile
- * - escape
- * - debounce
- */
-
-import { browser } from "./browser";
-
-export function whenReady(fn?: any) {
-  return new Promise(function (resolve) {
-    if (document.readyState !== "loading") {
-      resolve();
-    } else {
-      document.addEventListener("DOMContentLoaded", resolve, false);
-    }
-  }).then(fn || function () {});
-}
-
-const loadedScripts: { [key: string]: Promise<void> } = {};
-
-export function loadJS(url: string): Promise<void> {
-  if (url in loadedScripts) {
-    return loadedScripts[url];
-  }
-  const promise: Promise<void> = new Promise(function (resolve, reject) {
-    const script = document.createElement("script");
-    script.type = "text/javascript";
-    script.src = url;
-    script.onload = function () {
-      resolve();
-    };
-    script.onerror = function () {
-      reject(`Error loading file '${url}'`);
-    };
-    const head = document.head || document.getElementsByTagName("head")[0];
-    head.appendChild(script);
-  });
-  loadedScripts[url] = promise;
-  return promise;
-}
-
-export async function loadFile(url: string): Promise<string> {
-  const result = await browser.fetch(url);
-  if (!result.ok) {
-    throw new Error("Error while fetching xml templates");
-  }
-  return await result.text();
-}
-
-export function escape(str: string | number | undefined): string {
-  if (str === undefined) {
-    return "";
-  }
-  if (typeof str === "number") {
-    return String(str);
-  }
-  const p = document.createElement("p");
-  p.textContent = str;
-  return p.innerHTML;
-}
-
-/**
- * Returns a function, that, as long as it continues to be invoked, will not
- * be triggered. The function will be called after it stops being called for
- * N milliseconds. If `immediate` is passed, trigger the function on the
- * leading edge, instead of the trailing.
- *
- * Inspired by https://davidwalsh.name/javascript-debounce-function
- */
-export function debounce(func: Function, wait: number, immediate?: boolean): Function {
-  let timeout;
-  return function (this: any) {
-    const context = this;
-    const args = arguments;
-    function later() {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    }
-    const callNow = immediate && !timeout;
-    browser.clearTimeout(timeout);
-    timeout = browser.setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-}
-
-export function shallowEqual(p1, p2): boolean {
-  for (let k in p1) {
-    if (p1[k] !== p2[k]) {
-      return false;
-    }
-  }
-  return true;
-}

src/vdom/html_to_vdom.ts

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

src/vdom/index.ts

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

src/vdom/modules.ts

@@ -1,246 +0,0 @@
-import { Module, VNode, VNodeData } from "./vdom";
-
-//------------------------------------------------------------------------------
-// module/props.ts
-//------------------------------------------------------------------------------
-
-function updateProps(oldVnode: VNode, vnode: VNode): void {
-  var key: string,
-    cur: any,
-    old: any,
-    elm = vnode.elm,
-    oldProps = (oldVnode.data as VNodeData).props,
-    props = (vnode.data as VNodeData).props;
-
-  if (!oldProps && !props) return;
-  if (oldProps === props) return;
-  oldProps = oldProps || {};
-  props = props || {};
-
-  for (key in oldProps) {
-    if (!props[key]) {
-      delete (elm as any)[key];
-    }
-  }
-  for (key in props) {
-    cur = props[key];
-    old = oldProps[key];
-    if (old !== cur && (key !== "value" || (elm as any)[key] !== cur)) {
-      (elm as any)[key] = cur;
-    }
-  }
-}
-
-export const propsModule = {
-  create: updateProps,
-  update: updateProps,
-} as Module;
-
-//------------------------------------------------------------------------------
-// module/eventlisteners.ts
-//------------------------------------------------------------------------------
-
-function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
-  if (typeof handler === "function") {
-    // call function handler
-    handler.call(vnode, event, vnode);
-  } else if (typeof handler === "object") {
-    // call handler with arguments
-    if (typeof handler[0] === "function") {
-      // special case for single argument for performance
-      if (handler.length === 2) {
-        handler[0].call(vnode, handler[1], event, vnode);
-      } else {
-        var args = handler.slice(1);
-        args.push(event);
-        args.push(vnode);
-        handler[0].apply(vnode, args);
-      }
-    } else {
-      // call multiple handlers
-      for (let i = 0, iLen = handler.length; i < iLen; i++) {
-        invokeHandler(handler[i], vnode, event);
-      }
-    }
-  }
-}
-
-function handleEvent(event: Event, vnode: VNode) {
-  var name = event.type,
-    on = (vnode.data as VNodeData).on;
-
-  // call event handler(s) if exists
-  if (on) {
-    if (on[name]) {
-      invokeHandler(on[name], vnode, event);
-    } else if (on["!" + name]) {
-      invokeHandler(on["!" + name], vnode, event);
-    }
-  }
-}
-
-function createListener() {
-  return function handler(event: Event) {
-    handleEvent(event, (handler as any).vnode);
-  };
-}
-
-function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
-  var oldOn = (oldVnode.data as VNodeData).on,
-    oldListener = (oldVnode as any).listener,
-    oldElm: Element = oldVnode.elm as Element,
-    on = vnode && (vnode.data as VNodeData).on,
-    elm: Element = (vnode && vnode.elm) as Element,
-    name: string;
-
-  // optimization for reused immutable handlers
-  if (oldOn === on) {
-    return;
-  }
-
-  // remove existing listeners which no longer used
-  if (oldOn && oldListener) {
-    // if element changed or deleted we remove all existing listeners unconditionally
-    if (!on) {
-      for (name in oldOn) {
-        // remove listener if element was changed or existing listeners removed
-        const capture = name.charAt(0) === "!";
-        name = capture ? name.slice(1) : name;
-        oldElm.removeEventListener(name, oldListener, capture);
-      }
-    } else {
-      for (name in oldOn) {
-        // remove listener if existing listener removed
-        if (!on[name]) {
-          const capture = name.charAt(0) === "!";
-          name = capture ? name.slice(1) : name;
-          oldElm.removeEventListener(name, oldListener, capture);
-        }
-      }
-    }
-  }
-
-  // add new listeners which has not already attached
-  if (on) {
-    // reuse existing listener or create new
-    var listener = ((vnode as any).listener = (oldVnode as any).listener || createListener());
-    // update vnode for listener
-    listener.vnode = vnode;
-
-    // if element changed or added we add all needed listeners unconditionally
-    if (!oldOn) {
-      for (name in on) {
-        // add listener if element was changed or new listeners added
-        const capture = name.charAt(0) === "!";
-        name = capture ? name.slice(1) : name;
-        elm.addEventListener(name, listener, capture);
-      }
-    } else {
-      for (name in on) {
-        // add listener if new listener added
-        if (!oldOn[name]) {
-          const capture = name.charAt(0) === "!";
-          name = capture ? name.slice(1) : name;
-          elm.addEventListener(name, listener, capture);
-        }
-      }
-    }
-  }
-}
-
-export const eventListenersModule = {
-  create: updateEventListeners,
-  update: updateEventListeners,
-  destroy: updateEventListeners,
-} as Module;
-
-//------------------------------------------------------------------------------
-// attributes.ts
-//------------------------------------------------------------------------------
-
-const xlinkNS = "http://www.w3.org/1999/xlink";
-const xmlNS = "http://www.w3.org/XML/1998/namespace";
-const colonChar = 58;
-const xChar = 120;
-
-function updateAttrs(oldVnode: VNode, vnode: VNode): void {
-  var key: string,
-    elm: Element = vnode.elm as Element,
-    oldAttrs = (oldVnode.data as VNodeData).attrs,
-    attrs = (vnode.data as VNodeData).attrs;
-
-  if (!oldAttrs && !attrs) return;
-  if (oldAttrs === attrs) return;
-  oldAttrs = oldAttrs || {};
-  attrs = attrs || {};
-
-  // update modified attributes, add new attributes
-  for (key in attrs) {
-    const cur = attrs[key];
-    const old = oldAttrs[key];
-    if (old !== cur) {
-      if (cur === true) {
-        elm.setAttribute(key, "");
-      } else if (cur === false) {
-        elm.removeAttribute(key);
-      } else {
-        if (key.charCodeAt(0) !== xChar) {
-          elm.setAttribute(key, cur);
-        } else if (key.charCodeAt(3) === colonChar) {
-          // Assume xml namespace
-          elm.setAttributeNS(xmlNS, key, cur);
-        } else if (key.charCodeAt(5) === colonChar) {
-          // Assume xlink namespace
-          elm.setAttributeNS(xlinkNS, key, cur);
-        } else {
-          elm.setAttribute(key, cur);
-        }
-      }
-    }
-  }
-  // remove removed attributes
-  // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
-  // the other option is to remove all attributes with value == undefined
-  for (key in oldAttrs) {
-    if (!(key in attrs)) {
-      elm.removeAttribute(key);
-    }
-  }
-}
-
-export const attrsModule = {
-  create: updateAttrs,
-  update: updateAttrs,
-} as Module;
-
-//------------------------------------------------------------------------------
-// class.ts
-//------------------------------------------------------------------------------
-function updateClass(oldVnode: VNode, vnode: VNode): void {
-  var cur: any,
-    name: string,
-    elm: Element,
-    oldClass = (oldVnode.data as VNodeData).class,
-    klass = (vnode.data as VNodeData).class;
-
-  if (!oldClass && !klass) return;
-  if (oldClass === klass) return;
-  oldClass = oldClass || {};
-  klass = klass || {};
-
-  elm = vnode.elm as Element;
-
-  for (name in oldClass) {
-    if (name && !klass[name]) {
-      elm.classList.remove(name);
-    }
-  }
-  for (name in klass) {
-    cur = klass[name];
-    if (cur !== oldClass[name]) {
-      (elm.classList as any)[cur ? "add" : "remove"](name);
-    }
-  }
-}
-
-export const classModule = { create: updateClass, update: updateClass } as Module;

src/vdom/vdom.ts

@@ -1,616 +0,0 @@
-/**
- * Owl VDOM
- *
- * This file contains an implementation of a virtual DOM, which is a system that
- * can generate in-memory representations of a DOM tree, compare them, and
- * eventually change a concrete DOM tree to match its representation, in an
- * hopefully efficient way.
- *
- * Note that this code is a fork of Snabbdom, slightly tweaked/optimized for our
- * needs (see https://github.com/snabbdom/snabbdom).
- *
- * The main exported values are:
- * - interface VNode
- * - h function (a helper function to generate a vnode)
- * - patch function (to apply a vnode to an actual DOM node)
- */
-
-// because those in TypeScript are too restrictive: https://github.com/Microsoft/TSJS-lib-generator/pull/237
-declare global {
-  interface Element {
-    setAttribute(name: string, value: string | number | boolean): void;
-    setAttributeNS(
-      namespaceURI: string,
-      qualifiedName: string,
-      value: string | number | boolean
-    ): void;
-  }
-}
-
-type Props = Record<string, any>;
-type Attrs = Record<string, string | number | boolean>;
-type On = { [N in keyof HTMLElementEventMap]?: (ev: HTMLElementEventMap[N]) => void } & {
-  [event: string]: EventListener;
-};
-
-export interface Module {
-  pre: PreHook;
-  create: CreateHook;
-  update: UpdateHook;
-  destroy: DestroyHook;
-  remove: RemoveHook;
-  post: PostHook;
-}
-
-//------------------------------------------------------------------------------
-// vnode.ts
-//------------------------------------------------------------------------------
-type Key = string | number;
-
-export interface VNode {
-  sel: string | undefined;
-  data: VNodeData | undefined;
-  children: Array<VNode | string> | undefined;
-  elm: Node | undefined;
-  text: string | undefined;
-  key: Key | undefined;
-}
-
-export interface VNodeData {
-  props?: Props;
-  attrs?: Attrs;
-  on?: On;
-  hook?: Hooks;
-  key?: Key;
-  ns?: string; // for SVGs
-  [key: string]: any; // for any other 3rd party module
-}
-
-function vnode(
-  sel: string | undefined,
-  data: any | undefined,
-  children: Array<VNode | string> | undefined,
-  text: string | undefined,
-  elm: Element | Text | undefined
-): VNode {
-  let key = data === undefined ? undefined : data.key;
-  return { sel, data, children, text, elm, key };
-}
-
-//------------------------------------------------------------------------------
-// snabbdom.ts
-//------------------------------------------------------------------------------
-function isUndef(s: any): boolean {
-  return s === undefined;
-}
-function isDef(s: any): boolean {
-  return s !== undefined;
-}
-
-type VNodeQueue = Array<VNode>;
-
-const emptyNode = vnode("", {}, [], undefined, undefined);
-
-function sameVnode(vnode1: VNode, vnode2: VNode): boolean {
-  return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
-}
-
-function isVnode(vnode: any): vnode is VNode {
-  return vnode.sel !== undefined;
-}
-
-type KeyToIndexMap = { [key: string]: number };
-
-type ArraysOf<T> = { [K in keyof T]: T[K][] };
-
-type ModuleHooks = ArraysOf<Module>;
-
-function createKeyToOldIdx(
-  children: Array<VNode>,
-  beginIdx: number,
-  endIdx: number
-): KeyToIndexMap {
-  let i: number,
-    map: KeyToIndexMap = {},
-    key: Key | undefined,
-    ch;
-  for (i = beginIdx; i <= endIdx; ++i) {
-    ch = children[i];
-    if (ch != null) {
-      key = ch.key;
-      if (key !== undefined) map[key] = i;
-    }
-  }
-  return map;
-}
-
-const hooks: (keyof Module)[] = ["create", "update", "remove", "destroy", "pre", "post"];
-
-export function init(modules: Array<Partial<Module>>, domApi?: DOMAPI) {
-  let i: number,
-    j: number,
-    cbs = {} as ModuleHooks;
-
-  const api: DOMAPI = domApi !== undefined ? domApi : htmlDomApi;
-
-  for (i = 0; i < hooks.length; ++i) {
-    cbs[hooks[i]] = [];
-    for (j = 0; j < modules.length; ++j) {
-      const hook = modules[j][hooks[i]];
-      if (hook !== undefined) {
-        (cbs[hooks[i]] as Array<any>).push(hook);
-      }
-    }
-  }
-
-  function emptyNodeAt(elm: Element) {
-    const id = elm.id ? "#" + elm.id : "";
-    const c = elm.className ? "." + elm.className.split(" ").join(".") : "";
-    return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm);
-  }
-
-  function createRmCb(childElm: Node, listeners: number) {
-    return function rmCb() {
-      if (--listeners === 0) {
-        const parent = api.parentNode(childElm);
-        api.removeChild(parent, childElm);
-      }
-    };
-  }
-
-  function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
-    let i: any,
-      iLen: number,
-      data = vnode.data;
-    if (data !== undefined) {
-      if (isDef((i = data.hook)) && isDef((i = i.init))) {
-        i(vnode);
-        data = vnode.data;
-      }
-    }
-    let children = vnode.children,
-      sel = vnode.sel;
-    if (sel === "!") {
-      if (isUndef(vnode.text)) {
-        vnode.text = "";
-      }
-      vnode.elm = api.createComment(vnode.text as string);
-    } else if (sel !== undefined) {
-      const elm =
-        vnode.elm ||
-        (vnode.elm =
-          isDef(data) && isDef((i = (data as VNodeData).ns))
-            ? api.createElementNS(i, sel)
-            : api.createElement(sel));
-      for (i = 0, iLen = cbs.create.length; i < iLen; ++i) cbs.create[i](emptyNode, vnode);
-      if (array(children)) {
-        for (i = 0, iLen = children.length; i < iLen; ++i) {
-          const ch = children[i];
-          if (ch != null) {
-            api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue));
-          }
-        }
-      } else if (primitive(vnode.text)) {
-        api.appendChild(elm, api.createTextNode(vnode.text));
-      }
-      i = (vnode.data as VNodeData).hook; // Reuse variable
-      if (isDef(i)) {
-        if (i.create) i.create(emptyNode, vnode);
-        if (i.insert) insertedVnodeQueue.push(vnode);
-      }
-    } else {
-      vnode.elm = api.createTextNode(vnode.text as string);
-    }
-    return vnode.elm;
-  }
-
-  function addVnodes(
-    parentElm: Node,
-    before: Node | null,
-    vnodes: Array<VNode>,
-    startIdx: number,
-    endIdx: number,
-    insertedVnodeQueue: VNodeQueue
-  ) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx];
-      if (ch != null) {
-        api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before);
-      }
-    }
-  }
-
-  function invokeDestroyHook(vnode: VNode) {
-    let i: any,
-      iLen: number,
-      j: number,
-      jLen: number,
-      data = vnode.data;
-    if (data !== undefined) {
-      if (isDef((i = data.hook)) && isDef((i = i.destroy))) i(vnode);
-      for (i = 0, iLen = cbs.destroy.length; i < iLen; ++i) cbs.destroy[i](vnode);
-      if (vnode.children !== undefined) {
-        for (j = 0, jLen = vnode.children.length; j < jLen; ++j) {
-          i = vnode.children[j];
-          if (i != null && typeof i !== "string") {
-            invokeDestroyHook(i);
-          }
-        }
-      }
-    }
-  }
-
-  function removeVnodes(
-    parentElm: Node,
-    vnodes: Array<VNode>,
-    startIdx: number,
-    endIdx: number
-  ): void {
-    for (; startIdx <= endIdx; ++startIdx) {
-      let i: any,
-        iLen: number,
-        listeners: number,
-        rm: () => void,
-        ch = vnodes[startIdx];
-      if (ch != null) {
-        if (isDef(ch.sel)) {
-          invokeDestroyHook(ch);
-          listeners = cbs.remove.length + 1;
-          rm = createRmCb(ch.elm as Node, listeners);
-          for (i = 0, iLen = cbs.remove.length; i < iLen; ++i) cbs.remove[i](ch, rm);
-          if (isDef((i = ch.data)) && isDef((i = i.hook)) && isDef((i = i.remove))) {
-            i(ch, rm);
-          } else {
-            rm();
-          }
-        } else {
-          // Text node
-          api.removeChild(parentElm, ch.elm as Node);
-        }
-      }
-    }
-  }
-
-  function updateChildren(
-    parentElm: Node,
-    oldCh: Array<VNode>,
-    newCh: Array<VNode>,
-    insertedVnodeQueue: VNodeQueue
-  ) {
-    let oldStartIdx = 0,
-      newStartIdx = 0;
-    let oldEndIdx = oldCh.length - 1;
-    let oldStartVnode = oldCh[0];
-    let oldEndVnode = oldCh[oldEndIdx];
-    let newEndIdx = newCh.length - 1;
-    let newStartVnode = newCh[0];
-    let newEndVnode = newCh[newEndIdx];
-    let oldKeyToIdx: any;
-    let idxInOld: number;
-    let elmToMove: VNode;
-    let before: any;
-
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-      if (oldStartVnode == null) {
-        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-      } else if (oldEndVnode == null) {
-        oldEndVnode = oldCh[--oldEndIdx];
-      } else if (newStartVnode == null) {
-        newStartVnode = newCh[++newStartIdx];
-      } else if (newEndVnode == null) {
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
-        oldStartVnode = oldCh[++oldStartIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newEndVnode)) {
-        // Vnode moved right
-        patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
-        api.insertBefore(
-          parentElm,
-          oldStartVnode.elm as Node,
-          api.nextSibling(oldEndVnode.elm as Node)
-        );
-        oldStartVnode = oldCh[++oldStartIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldEndVnode, newStartVnode)) {
-        // Vnode moved left
-        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
-        api.insertBefore(parentElm, oldEndVnode.elm as Node, oldStartVnode.elm as Node);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        if (oldKeyToIdx === undefined) {
-          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-        }
-        idxInOld = oldKeyToIdx[newStartVnode.key as string];
-        if (isUndef(idxInOld)) {
-          // New element
-          api.insertBefore(
-            parentElm,
-            createElm(newStartVnode, insertedVnodeQueue),
-            oldStartVnode.elm as Node
-          );
-          newStartVnode = newCh[++newStartIdx];
-        } else {
-          elmToMove = oldCh[idxInOld];
-          if (elmToMove.sel !== newStartVnode.sel) {
-            api.insertBefore(
-              parentElm,
-              createElm(newStartVnode, insertedVnodeQueue),
-              oldStartVnode.elm as Node
-            );
-          } else {
-            patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
-            oldCh[idxInOld] = undefined as any;
-            api.insertBefore(parentElm, elmToMove.elm as Node, oldStartVnode.elm as Node);
-          }
-          newStartVnode = newCh[++newStartIdx];
-        }
-      }
-    }
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-      if (oldStartIdx > oldEndIdx) {
-        before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
-        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
-      } else {
-        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
-      }
-    }
-  }
-
-  function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
-    let i: any, iLen: number, hook: any;
-    if (isDef((i = vnode.data)) && isDef((hook = i.hook)) && isDef((i = hook.prepatch))) {
-      i(oldVnode, vnode);
-    }
-    const elm = (vnode.elm = oldVnode.elm as Node);
-    let oldCh = oldVnode.children;
-    let ch = vnode.children;
-    if (oldVnode === vnode) return;
-    if (vnode.data !== undefined) {
-      for (i = 0, iLen = cbs.update.length; i < iLen; ++i) cbs.update[i](oldVnode, vnode);
-      i = vnode.data.hook;
-      if (isDef(i) && isDef((i = i.update))) i(oldVnode, vnode);
-    }
-    if (isUndef(vnode.text)) {
-      if (isDef(oldCh) && isDef(ch)) {
-        if (oldCh !== ch)
-          updateChildren(elm, oldCh as Array<VNode>, ch as Array<VNode>, insertedVnodeQueue);
-      } else if (isDef(ch)) {
-        if (isDef(oldVnode.text)) api.setTextContent(elm, "");
-        addVnodes(
-          elm,
-          null,
-          ch as Array<VNode>,
-          0,
-          (ch as Array<VNode>).length - 1,
-          insertedVnodeQueue
-        );
-      } else if (isDef(oldCh)) {
-        removeVnodes(elm, oldCh as Array<VNode>, 0, (oldCh as Array<VNode>).length - 1);
-      } else if (isDef(oldVnode.text)) {
-        api.setTextContent(elm, "");
-      }
-    } else if (oldVnode.text !== vnode.text) {
-      if (isDef(oldCh)) {
-        removeVnodes(elm, oldCh as Array<VNode>, 0, (oldCh as Array<VNode>).length - 1);
-      }
-      api.setTextContent(elm, vnode.text as string);
-    }
-    if (isDef(hook) && isDef((i = hook.postpatch))) {
-      i(oldVnode, vnode);
-    }
-  }
-
-  return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
-    let i: number, iLen: number, elm: Node, parent: Node;
-    const insertedVnodeQueue: VNodeQueue = [];
-    for (i = 0, iLen = cbs.pre.length; i < iLen; ++i) cbs.pre[i]();
-
-    if (!isVnode(oldVnode)) {
-      oldVnode = emptyNodeAt(oldVnode);
-    }
-
-    if (sameVnode(oldVnode, vnode)) {
-      patchVnode(oldVnode, vnode, insertedVnodeQueue);
-    } else {
-      elm = oldVnode.elm as Node;
-      parent = api.parentNode(elm);
-
-      createElm(vnode, insertedVnodeQueue);
-
-      if (parent !== null) {
-        api.insertBefore(parent, vnode.elm as Node, api.nextSibling(elm));
-        removeVnodes(parent, [oldVnode], 0, 0);
-      }
-    }
-
-    for (i = 0, iLen = insertedVnodeQueue.length; i < iLen; ++i) {
-      (((insertedVnodeQueue[i].data as VNodeData).hook as Hooks).insert as any)(
-        insertedVnodeQueue[i]
-      );
-    }
-    for (i = 0, iLen = cbs.post.length; i < iLen; ++i) cbs.post[i]();
-    return vnode;
-  };
-}
-
-//------------------------------------------------------------------------------
-// is.ts
-//------------------------------------------------------------------------------
-const array = Array.isArray;
-function primitive(s: any): s is string | number {
-  return typeof s === "string" || typeof s === "number";
-}
-
-//------------------------------------------------------------------------------
-// htmldomapi.ts
-//------------------------------------------------------------------------------
-interface DOMAPI {
-  createElement: (tagName: any) => HTMLElement;
-  createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
-  createTextNode: (text: string) => Text;
-  createComment: (text: string) => Comment;
-  insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void;
-  removeChild: (node: Node, child: Node) => void;
-  appendChild: (node: Node, child: Node) => void;
-  parentNode: (node: Node) => Node;
-  nextSibling: (node: Node) => Node;
-  tagName: (elm: Element) => string;
-  setTextContent: (node: Node, text: string | null) => void;
-}
-
-function createElement(tagName: any): HTMLElement {
-  return document.createElement(tagName);
-}
-
-function createElementNS(namespaceURI: string, qualifiedName: string): Element {
-  return document.createElementNS(namespaceURI, qualifiedName);
-}
-
-function createTextNode(text: string): Text {
-  return document.createTextNode(text);
-}
-
-function createComment(text: string): Comment {
-  return document.createComment(text);
-}
-
-function insertBefore(parentNode: Node, newNode: Node, referenceNode: Node | null): void {
-  parentNode.insertBefore(newNode, referenceNode);
-}
-
-function removeChild(node: Node, child: Node): void {
-  node.removeChild(child);
-}
-
-function appendChild(node: Node, child: Node): void {
-  node.appendChild(child);
-}
-
-function parentNode(node: Node): Node | null {
-  return node.parentNode;
-}
-
-function nextSibling(node: Node): Node | null {
-  return node.nextSibling;
-}
-
-function tagName(elm: Element): string {
-  return elm.tagName;
-}
-
-function setTextContent(node: Node, text: string | null): void {
-  node.textContent = text;
-}
-
-const htmlDomApi = {
-  createElement,
-  createElementNS,
-  createTextNode,
-  createComment,
-  insertBefore,
-  removeChild,
-  appendChild,
-  parentNode,
-  nextSibling,
-  tagName,
-  setTextContent,
-} as DOMAPI;
-
-//------------------------------------------------------------------------------
-// hooks.ts
-//------------------------------------------------------------------------------
-type PreHook = () => any;
-type InitHook = (vNode: VNode) => any;
-type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
-type InsertHook = (vNode: VNode) => any;
-type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
-type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
-type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
-type DestroyHook = (vNode: VNode) => any;
-type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
-type PostHook = () => any;
-
-interface Hooks {
-  pre?: PreHook;
-  init?: InitHook;
-  create?: CreateHook;
-  insert?: InsertHook;
-  prepatch?: PrePatchHook;
-  update?: UpdateHook;
-  postpatch?: PostPatchHook;
-  destroy?: DestroyHook;
-  remove?: RemoveHook;
-  post?: PostHook;
-}
-
-//------------------------------------------------------------------------------
-// h.ts
-//------------------------------------------------------------------------------
-type VNodes = Array<VNode>;
-type VNodeChildElement = VNode | string | number | undefined | null;
-type ArrayOrElement<T> = T | T[];
-type VNodeChildren = ArrayOrElement<VNodeChildElement>;
-
-export function addNS(data: any, children: VNodes | undefined, sel: string | undefined): void {
-  if (sel === "dummy") {
-    // we do not need to add the namespace on dummy elements, they come from a
-    // subcomponent, which will handle the namespace itself
-    return;
-  }
-  data.ns = "http://www.w3.org/2000/svg";
-  if (sel !== "foreignObject" && children !== undefined) {
-    for (let i = 0, iLen = children.length; i < iLen; ++i) {
-      const child = children[i];
-      let childData = child.data;
-      if (childData !== undefined) {
-        addNS(childData, (child as VNode).children as VNodes, child.sel);
-      }
-    }
-  }
-}
-
-export function h(sel: string): VNode;
-export function h(sel: string, data: VNodeData): VNode;
-export function h(sel: string, children: VNodeChildren): VNode;
-export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
-export function h(sel: any, b?: any, c?: any): VNode {
-  var data: VNodeData = {},
-    children: any,
-    text: any,
-    i: number,
-    iLen: number;
-  if (c !== undefined) {
-    data = b;
-    if (array(c)) {
-      children = c;
-    } else if (primitive(c)) {
-      text = c;
-    } else if (c && c.sel) {
-      children = [c];
-    }
-  } else if (b !== undefined) {
-    if (array(b)) {
-      children = b;
-    } else if (primitive(b)) {
-      text = b;
-    } else if (b && b.sel) {
-      children = [b];
-    } else {
-      data = b;
-    }
-  }
-  if (children !== undefined) {
-    for (i = 0, iLen = children.length; i < iLen; ++i) {
-      if (primitive(children[i]))
-        children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
-    }
-  }
-  return vnode(sel, data, children, text, undefined);
-}

tests/__snapshots__/animations.test.ts.snap

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

tests/__snapshots__/store_hooks.test.ts.snap

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

tests/animations.test.ts

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

tests/blockdom/block.test.ts

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

tests/blockdom/block_attributes.test.ts

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

tests/blockdom/block_event_handling.test.ts

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

tests/blockdom/block_refs.test.ts

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

tests/blockdom/helpers.ts

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

tests/blockdom/html.test.ts

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

tests/blockdom/list.test.ts

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

tests/blockdom/multi.test.ts

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

tests/blockdom/remove_hook.test.ts

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

tests/blockdom/text.test.ts

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

tests/blockdom/toggler.test.ts

@@ -0,0 +1,57 @@
+import { createBlock, mount, patch, text, toggler } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("togglers", () => {
+  test("can mount and update text nodes", async () => {
+    const tree = toggler("key", text("foo"));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    const textnode = fixture.firstChild!;
+    expect(textnode.textContent).toBe("foo");
+    patch(tree, toggler("key", text("bar")));
+    expect(fixture.innerHTML).toBe("bar");
+    expect(fixture.firstChild).toBe(textnode);
+  });
+
+  test("can toggle between two text nodes (different key)", async () => {
+    const tree = toggler("key1", text("foo"));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    const textnode = fixture.firstChild!;
+    expect(textnode.textContent).toBe("foo");
+    patch(tree, toggler("key2", text("bar")));
+    expect(fixture.innerHTML).toBe("bar");
+    expect(fixture.firstChild).not.toBe(textnode);
+
+    // we check here that the key was properly reset
+    const other = fixture.firstChild;
+    patch(tree, toggler("key1", text("foo")));
+    expect(fixture.innerHTML).toBe("foo");
+    expect(fixture.firstChild).not.toBe(other);
+  });
+
+  test("can toggle between text node and block", async () => {
+    const block = createBlock("<p>hey</p>");
+    const tree = toggler("key1", text("foo"));
+    mount(tree, fixture);
+    expect(fixture.innerHTML).toBe("foo");
+    const textnode = fixture.firstChild!;
+    patch(tree, toggler("key2", block()));
+    expect(fixture.innerHTML).toBe("<p>hey</p>");
+    expect(fixture.firstChild).not.toBe(textnode);
+  });
+});

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

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

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

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`props validation props are validated in dev mode (code snapshot) 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"App\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'Child'
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {message:1};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined);
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Child\`;
-        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Child'];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;

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

@@ -1,601 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`t-slot directive can define and call slots 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Parent\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'Dialog'
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, Object.assign(Object.create(context), scope));
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Dialog\`;
-        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Dialog'];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        w2.__owl__.slotId = 1;
-        let fiber = w2.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`t-slot directive can define and call slots 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Dialog\\"
-    let h = this.h;
-    let c6 = [], p6 = {key:6};
-    let vn6 = h('div', p6, c6);
-    let c7 = [], p7 = {key:7};
-    let vn7 = h('div', p7, c7);
-    c6.push(vn7);
-    const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
-    if (slot8) {
-        slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
-    }
-    let c9 = [], p9 = {key:9};
-    let vn9 = h('div', p9, c9);
-    c6.push(vn9);
-    const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
-    if (slot10) {
-        slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
-    }
-    return vn6;
-}"
-`;
-
-exports[`t-slot directive can define and call slots 3`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_header_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    c1.push(vn4);
-    c4.push({text: \`header\`});
-}"
-`;
-
-exports[`t-slot directive can define and call slots 4`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_footer_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
-    c1.push(vn5);
-    c5.push({text: \`footer\`});
-}"
-`;
-
-exports[`t-slot directive can define and call slots using old t-set keyword 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__2\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    // Component 'Dialog'
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, Object.assign(Object.create(context), scope));
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Dialog\`;
-        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Dialog'];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        w2.__owl__.slotId = 1;
-        let fiber = w2.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`t-slot directive can define and call slots using old t-set keyword 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__1\\"
-    let h = this.h;
-    let c6 = [], p6 = {key:6};
-    let vn6 = h('div', p6, c6);
-    let c7 = [], p7 = {key:7};
-    let vn7 = h('div', p7, c7);
-    c6.push(vn7);
-    const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
-    if (slot8) {
-        slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
-    }
-    let c9 = [], p9 = {key:9};
-    let vn9 = h('div', p9, c9);
-    c6.push(vn9);
-    const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
-    if (slot10) {
-        slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
-    }
-    return vn6;
-}"
-`;
-
-exports[`t-slot directive can define and call slots using old t-set keyword 3`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_header_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    c1.push(vn4);
-    c4.push({text: \`header\`});
-}"
-`;
-
-exports[`t-slot directive can define and call slots using old t-set keyword 4`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_footer_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
-    c1.push(vn5);
-    c5.push({text: \`footer\`});
-}"
-`;
-
-exports[`t-slot directive content is the default slot 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_default_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    c1.push(vn4);
-    c4.push({text: \`sts rocks\`});
-}"
-`;
-
-exports[`t-slot directive dafault slots can define a default content 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__1\\"
-    let h = this.h;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot5) {
-        slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
-    } else {
-        c4.push({text: \`default content\`});
-    }
-    return vn4;
-}"
-`;
-
-exports[`t-slot directive default slot work with text nodes 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_default_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    c1.push({text: \`sts rocks\`});
-}"
-`;
-
-exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_default_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    c1.push(vn4);
-    c4.push({text: \`sts\`});
-    let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
-    c1.push(vn5);
-    c5.push({text: \`rocks\`});
-}"
-`;
-
-exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_content_template\\"
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    c1.push(vn4);
-    c4.push({text: \`sts\`});
-    let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
-    c1.push(vn5);
-    c5.push({text: \`rocks\`});
-}"
-`;
-
-exports[`t-slot directive named slots can define a default content 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__1\\"
-    let h = this.h;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
-    if (slot5) {
-        slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
-    } else {
-        c4.push({text: \`default content\`});
-    }
-    return vn4;
-}"
-`;
-
-exports[`t-slot directive refs are properly bound in slots 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_footer_template\\"
-    let utils = this.constructor.utils;
-    context.__owl__.refs = context.__owl__.refs || {};
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c8 = [], p8 = {key:8,on:{}};
-    let vn8 = h('button', p8, c8);
-    c1.push(vn8);
-    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
-    p8.on['click'] = extra.handlers['click__9__'];
-    const ref10 = \`myButton\`;
-    p8.hook = {
-      create: (_, n) => {
-        context.__owl__.refs[ref10] = n.elm;
-      },
-      destroy: () => {
-        delete context.__owl__.refs[ref10];
-      },
-    };
-    c8.push({text: \`do something\`});
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_footer_template\\"
-    let utils = this.constructor.utils;
-    let h = this.h;
-    let c1 = extra.parentNode;
-    let c8 = [], p8 = {key:8,on:{}};
-    let vn8 = h('button', p8, c8);
-    c1.push(vn8);
-    extra.handlers['click__9__'] = extra.handlers['click__9__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
-    p8.on['click'] = extra.handlers['click__9__'];
-    c8.push({text: \`do something\`});
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Link\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let _11 = scope['props'].to;
-    let c12 = [], p12 = {key:12,attrs:{href: _11}};
-    let vn12 = h('a', p12, c12);
-    const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot13) {
-        slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
-    }
-    return vn12;
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"App\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    let c2 = [], p2 = {key:2};
-    let vn2 = h('u', p2, c2);
-    c1.push(vn2);
-    let _3 = scope['state'].users;
-    if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
-    let _4 = _5 = _3;
-    if (!(_3 instanceof Array)) {
-        if (typeof _3[Symbol.iterator] === 'function') {
-            _4 = [..._3];
-        } else {
-            _4 = Object.keys(_3);
-            _5 = Object.values(_3);
-        }
-    }
-    let _length4 = _4.length;
-    let _origScope6 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length4; i1++) {
-        scope.user_first = i1 === 0
-        scope.user_last = i1 === _length4 - 1
-        scope.user_index = i1
-        scope.user = _4[i1]
-        scope.user_value = _5[i1]
-        let key1 = scope['user'].id;
-        let c7 = [], p7 = {key:\`\${key1}_7\`};
-        let vn7 = h('li', p7, c7);
-        c2.push(vn7);
-        // Component 'Link'
-        let k9 = \`__9__\${key1}__\`;
-        let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
-        let props8 = {to:'/user/'+scope['user'].id};
-        if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-            w8.destroy();
-            w8 = false;
-        }
-        if (w8) {
-            w8.__updateProps(props8, extra.fiber, Object.assign(Object.create(context), scope));
-            let pvnode = w8.__owl__.pvnode;
-            c7.push(pvnode);
-        } else {
-            let componentKey8 = \`Link\`;
-            let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| scope['Link'];
-            if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
-            w8 = new W8(parent, props8);
-            parent.__owl__.cmap[k9] = w8.__owl__.id;
-            w8.__owl__.slotId = 1;
-            let fiber = w8.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
-            c7.push(pvnode);
-            w8.__owl__.pvnode = pvnode;
-        }
-        w8.__owl__.parentLastFiberId = extra.fiber.id;
-    }
-    scope = _origScope6;
-    return vn1;
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_default_template\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c7 = extra.parentNode;
-    c7.push({text: \`User \`});
-    let _10 = scope['user'].name;
-    if (_10 != null) {
-        c7.push({text: _10});
-    }
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"Link\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let _10 = scope['props'].to;
-    let c11 = [], p11 = {key:11,attrs:{href: _10}};
-    let vn11 = h('a', p11, c11);
-    const slot12 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot12) {
-        slot12.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c11, parent: extra.parent || context}));
-    }
-    return vn11;
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"App\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    let c2 = [], p2 = {key:2};
-    let vn2 = h('u', p2, c2);
-    c1.push(vn2);
-    let _3 = scope['state'].users;
-    if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
-    let _4 = _5 = _3;
-    if (!(_3 instanceof Array)) {
-        if (typeof _3[Symbol.iterator] === 'function') {
-            _4 = [..._3];
-        } else {
-            _4 = Object.keys(_3);
-            _5 = Object.values(_3);
-        }
-    }
-    let _length4 = _4.length;
-    let _origScope6 = scope;
-    scope = Object.create(scope);
-    for (let i1 = 0; i1 < _length4; i1++) {
-        scope.user_first = i1 === 0
-        scope.user_last = i1 === _length4 - 1
-        scope.user_index = i1
-        scope.user = _4[i1]
-        scope.user_value = _5[i1]
-        let key1 = scope['user'].id;
-        let c7 = [], p7 = {key:\`\${key1}_7\`};
-        let vn7 = h('li', p7, c7);
-        c2.push(vn7);
-        utils.getScope(scope, 'userdescr').userdescr = 'User '+scope['user'].name;
-        // Component 'Link'
-        let k9 = \`__9__\${key1}__\`;
-        let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
-        let props8 = {to:'/user/'+scope['user'].id};
-        if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-            w8.destroy();
-            w8 = false;
-        }
-        if (w8) {
-            w8.__updateProps(props8, extra.fiber, Object.assign(Object.create(context), scope));
-            let pvnode = w8.__owl__.pvnode;
-            c7.push(pvnode);
-        } else {
-            let componentKey8 = \`Link\`;
-            let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| scope['Link'];
-            if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
-            w8 = new W8(parent, props8);
-            parent.__owl__.cmap[k9] = w8.__owl__.id;
-            w8.__owl__.slotId = 1;
-            let fiber = w8.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
-            c7.push(pvnode);
-            w8.__owl__.pvnode = pvnode;
-        }
-        w8.__owl__.parentLastFiberId = extra.fiber.id;
-    }
-    scope = _origScope6;
-    return vn1;
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_default_template\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c7 = extra.parentNode;
-    if (scope.userdescr != null) {
-        c7.push({text: scope.userdescr});
-    }
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"App\\"
-    let utils = this.constructor.utils;
-    let QWeb = this.constructor;
-    let parent = context;
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
-    scope.userdescr = 'User '+scope['state'].user.name;
-    // Component 'Link'
-    let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
-    let props2 = {to:'/user/'+scope['state'].user.id};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
-    }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, Object.assign(Object.create(context), scope));
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
-    } else {
-        let componentKey2 = \`Link\`;
-        let W2 = context.constructor.components[componentKey2] || QWeb.components[componentKey2]|| scope['Link'];
-        if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
-        w2 = new W2(parent, props2);
-        parent.__owl__.cmap['__3__'] = w2.__owl__.id;
-        w2.__owl__.slotId = 1;
-        let fiber = w2.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-        let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
-    }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
-    return vn1;
-}"
-`;
-
-exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"slot_default_template\\"
-    let scope = Object.create(context);
-    let h = this.h;
-    let c1 = extra.parentNode;
-    if (scope.userdescr != null) {
-        c1.push({text: scope.userdescr});
-    }
-}"
-`;
-
-exports[`t-slot directive t-set t-value in a slot 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__1\\"
-    let h = this.h;
-    let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
-    const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot5) {
-        slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
-    }
-    return vn4;
-}"
-`;
-
-exports[`t-slot directive template can just return a slot 1`] = `
-"function anonymous(context, extra
-) {
-    // Template name: \\"__template__2\\"
-    let utils = this.constructor.utils;
-    let result;
-    let h = this.h;
-    const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot6) {
-        let children7= []
-        result = {}
-        slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children7, parent: extra.parent || context}));
-        utils.defineProxy(result, children7[0]);
-    }
-    return result;
-}"
-`;

tests/component/class_style.test.ts

@@ -1,271 +0,0 @@
-import { Component, Env } from "../../src/component/component";
-import { QWeb } from "../../src/qweb/qweb";
-import { xml } from "../../src/tags";
-import { useState, useRef } from "../../src/hooks";
-import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-// We create before each test:
-// - fixture: a div, appended to the DOM, intended to be the target of dom
-//   manipulations.  Note that it is removed after each test.
-// - env: a WEnv, necessary to create new components
-
-let fixture: HTMLElement;
-let env: Env;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-  Component.env = env;
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-describe("class and style attributes with t-component", () => {
-  test("class is properly added on widget root el", async () => {
-    class Child extends Component {
-      static template = xml`<div class="c"/>`;
-    }
-    class ParentWidget extends Component {
-      static template = xml`<div><Child class="a b"/></div>`;
-      static components = { Child };
-    }
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div><div class="c a b"></div></div>`);
-  });
-
-  test("empty class attribute is not added on widget root el", async () => {
-    class Child extends Component {
-      static template = xml`<span/>`;
-    }
-    class Parent extends Component {
-      static template = xml`<div><Child class=""/></div>`;
-      static components = { Child };
-    }
-    const widget = new Parent();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
-  });
-
-  test("t-att-class is properly added/removed on widget root el", async () => {
-    class Child extends Component {
-      static template = xml`<div class="c"/>`;
-    }
-    class ParentWidget extends Component {
-      static template = xml`<div><Child t-att-class="{a:state.a, b:state.b}"/></div>`;
-      static components = { Child };
-      state = useState({ a: true, b: false });
-    }
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div><div class="c a"></div></div>`);
-    expect(QWeb.TEMPLATES[ParentWidget.template].fn.toString());
-
-    widget.state.a = false;
-    widget.state.b = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe(`<div><div class="c b"></div></div>`);
-  });
-
-  test("class with extra whitespaces", async () => {
-    env.qweb.addTemplate(
-      "ParentWidget",
-      `<div>
-              <Child class="a  b c   d"/>
-        </div>`
-    );
-    class Child extends Component {}
-    class ParentWidget extends Component {
-      static components = { Child };
-    }
-    env.qweb.addTemplate("Child", `<div/>`);
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div><div class="a b c d"></div></div>`);
-  });
-
-  test("t-att-class is properly added/removed on widget root el (v2)", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-          <div t-name="ParentWidget">
-            <Child class="a" t-att-class="{ b: state.b }" t-ref="child"/>
-          </div>
-          <span t-name="Child" class="c" t-att-class="{ d: state.d }"/>
-        </templates>`);
-
-    class Child extends Component {
-      state = useState({ d: true });
-    }
-    class ParentWidget extends Component {
-      static components = { Child };
-      state = useState({ b: true });
-      child = useRef("child");
-    }
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-
-    const span = fixture.querySelector("span")!;
-    expect(span.className).toBe("c d a b");
-
-    widget.state.b = false;
-    await nextTick();
-    expect(span.className).toBe("c d a");
-
-    (widget.child.comp as Child).state.d = false;
-    await nextTick();
-    expect(span.className).toBe("c a");
-
-    widget.state.b = true;
-    await nextTick();
-    expect(span.className).toBe("c a b");
-
-    (widget.child.comp as Child).state.d = true;
-    await nextTick();
-    expect(span.className).toBe("c a b d");
-    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
-    expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
-  });
-
-  test("t-att-class is properly added/removed on widget root el (v3)", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-          <div t-name="ParentWidget">
-            <Child class="a" t-att-class="state.b ? 'b' : ''" t-ref="child"/>
-          </div>
-          <span t-name="Child" class="c" t-att-class="state.d ? 'd' : ''"/>
-        </templates>`);
-
-    class Child extends Component {
-      state = useState({ d: true });
-    }
-    class ParentWidget extends Component {
-      static components = { Child };
-      state = useState({ b: true });
-      child = useRef("child");
-    }
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-
-    const span = fixture.querySelector("span")!;
-    expect(span.className).toBe("c d a b");
-
-    widget.state.b = false;
-    await nextTick();
-    expect(span.className).toBe("c d a");
-
-    (widget.child.comp as Child).state.d = false;
-    await nextTick();
-    expect(span.className).toBe("c a");
-
-    widget.state.b = true;
-    await nextTick();
-    expect(span.className).toBe("c a b");
-
-    (widget.child.comp as Child).state.d = true;
-    await nextTick();
-    expect(span.className).toBe("c a b d");
-    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
-    expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
-  });
-
-  test("class on components do not interfere with user defined classes", async () => {
-    env.qweb.addTemplates(`
-        <templates>
-          <div t-name="App" t-att-class="{ c: state.c }" />
-        </templates>`);
-
-    class App extends Component {
-      state = useState({ c: true });
-      mounted() {
-        this.el!.classList.add("user");
-      }
-    }
-
-    const widget = new App();
-    await widget.mount(fixture);
-
-    expect(fixture.innerHTML).toBe('<div class="c user"></div>');
-
-    widget.state.c = false;
-    await nextTick();
-
-    expect(fixture.innerHTML).toBe('<div class="user"></div>');
-  });
-
-  test("style is properly added on widget root el", async () => {
-    env.qweb.addTemplate(
-      "ParentWidget",
-      `
-          <div>
-              <t t-component="child" style="font-weight: bold;"/>
-          </div>`
-    );
-
-    class SomeComponent extends Component {
-      static template = xml`<div/>`;
-    }
-
-    class ParentWidget extends Component {
-      static components = { child: SomeComponent };
-    }
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe(`<div><div style="font-weight: bold;"></div></div>`);
-  });
-
-  test("dynamic t-att-style is properly added and updated on widget root el", async () => {
-    env.qweb.addTemplate(
-      "ParentWidget",
-      `
-          <div>
-              <t t-component="child" t-att-style="state.style"/>
-          </div>`
-    );
-
-    class SomeComponent extends Component {
-      static template = xml`<div/>`;
-    }
-
-    class ParentWidget extends Component {
-      static components = { child: SomeComponent };
-      state = useState({ style: "font-size: 20px" });
-    }
-    const widget = new ParentWidget();
-    await widget.mount(fixture);
-
-    expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
-
-    expect(fixture.innerHTML).toBe(`<div><div style="font-size: 20px;"></div></div>`);
-
-    widget.state.style = "font-size: 30px";
-    await nextTick();
-
-    expect(fixture.innerHTML).toBe(`<div><div style="font-size: 30px;"></div></div>`);
-  });
-
-  test("error in subcomponent with class", async () => {
-    class Child extends Component {
-      static template = xml`<div t-esc="this.will.crash"/>`;
-    }
-    class ParentWidget extends Component {
-      static template = xml`<div><Child class="a"/></div>`;
-      static components = { Child };
-    }
-    const widget = new ParentWidget();
-    let error;
-    try {
-      await widget.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot read property 'crash' of undefined");
-    expect(fixture.innerHTML).toBe("");
-  });
-});

tests/component/error_handling.test.ts

@@ -1,523 +0,0 @@
-import { Component, Env } from "../../src/component/component";
-import { useState } from "../../src/hooks";
-import { xml } from "../../src/tags";
-import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-// We create before each test:
-// - fixture: a div, appended to the DOM, intended to be the target of dom
-//   manipulations.  Note that it is removed after each test.
-// - env: a WEnv, necessary to create new components
-
-let fixture: HTMLElement;
-let env: Env;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-  Component.env = env;
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-describe("component error handling (catchError)", () => {
-  /**
-   * This test suite requires often to wait for 3 ticks. Here is why:
-   * - First tick is to let the app render and crash.
-   * - When we crash, we call the catchError handler in a setTimeout (because we
-   *   need to wait for the previous rendering to be completely stopped). So, we
-   *   need to wait for the second tick.
-   * - Then, when the handler changes the state, we need to wait for the interface
-   *   to be rerendered.
-   *  */
-
-  test("can catch an error in a component render function", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn();
-    const handler = jest.fn();
-    env.qweb.on("error", null, handler);
-    class ErrorComponent extends Component {
-      static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
-    }
-    class ErrorBoundary extends Component {
-      static template = xml`
-          <div>
-            <t t-if="state.error">Error handled</t>
-            <t t-else=""><t t-slot="default" /></t>
-          </div>`;
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static template = xml`
-          <div>
-            <ErrorBoundary><ErrorComponent flag="state.flag"/></ErrorBoundary>
-          </div>`;
-      state = useState({ flag: false });
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div><div>heyfalse</div></div></div>");
-    app.state.flag = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
-  });
-
-  test("no component catching error lead to full app destruction", async () => {
-    expect.assertions(6);
-    const handler = jest.fn();
-    env.qweb.on("error", null, handler);
-    const consoleError = console.error;
-    console.error = jest.fn();
-
-    class ErrorComponent extends Component {
-      static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
-    }
-
-    class App extends Component {
-      static template = xml`<div><ErrorComponent flag="state.flag"/></div>`;
-      static components = { ErrorComponent };
-      state = useState({ flag: false });
-      async render() {
-        try {
-          await super.render();
-        } catch (e) {
-          expect(e.message).toBe("Cannot read property 'this' of undefined");
-        }
-      }
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>heyfalse</div></div>");
-    app.state.flag = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-    expect(app.__owl__.isDestroyed).toBe(true);
-    expect(handler).toBeCalledTimes(1);
-  });
-
-  test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
-    const handler = jest.fn();
-    env.qweb.on("error", null, handler);
-    const consoleError = console.error;
-    console.error = jest.fn();
-    class ErrorComponent extends Component {
-      static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
-    }
-    class ErrorBoundary extends Component {
-      static template = xml`
-          <div>
-            <t t-if="state.error">Error handled</t>
-            <t t-else=""><t t-slot="default" /></t>
-          </div>`;
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static template = xml`
-          <div>
-              <ErrorBoundary><ErrorComponent /></ErrorBoundary>
-          </div>`;
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
-  });
-
-  test("can catch an error in the initial call of a component render function (parent updated)", async () => {
-    const handler = jest.fn();
-    env.qweb.on("error", null, handler);
-    const consoleError = console.error;
-    console.error = jest.fn();
-    class ErrorComponent extends Component {
-      static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
-    }
-    class ErrorBoundary extends Component {
-      static template = xml`
-          <div>
-            <t t-if="state.error">Error handled</t>
-            <t t-else=""><t t-slot="default" /></t>
-          </div>`;
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static template = xml`
-          <div>
-              <ErrorBoundary t-if="state.flag"><ErrorComponent /></ErrorBoundary>
-          </div>`;
-      state = useState({ flag: false });
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    app.state.flag = true;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
-  });
-
-  test("can catch an error in the constructor call of a component render function", async () => {
-    const handler = jest.fn();
-    env.qweb.on("error", null, handler);
-    const consoleError = console.error;
-    console.error = jest.fn();
-    env.qweb.addTemplates(`
-        <templates>
-          <div t-name="ErrorBoundary">
-              <t t-if="state.error">Error handled</t>
-              <t t-else=""><t t-slot="default" /></t>
-          </div>
-          <div t-name="ErrorComponent">Some text</div>
-          <div t-name="App">
-              <ErrorBoundary><ErrorComponent /></ErrorBoundary>
-          </div>
-        </templates>`);
-    class ErrorComponent extends Component {
-      constructor(parent) {
-        super(parent);
-        throw new Error("NOOOOO");
-      }
-    }
-    class ErrorBoundary extends Component {
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-    expect(handler).toBeCalledTimes(1);
-  });
-
-  test("can catch an error in the willStart call", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn();
-    class ErrorComponent extends Component {
-      static template = xml`<div t-name="ErrorComponent">Some text</div>`;
-      async willStart() {
-        // we wait a little bit to be in a different stack frame
-        await nextTick();
-        throw new Error("NOOOOO");
-      }
-    }
-    class ErrorBoundary extends Component {
-      static template = xml`
-          <div>
-            <t t-if="state.error">Error handled</t>
-            <t t-else=""><t t-slot="default" /></t>
-          </div>`;
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static template = xml`<div><ErrorBoundary><ErrorComponent /></ErrorBoundary></div>`;
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test.skip("can catch an error in the mounted call", async () => {
-    // we do not catch error in mounted anymore
-    console.error = jest.fn();
-    env.qweb.addTemplates(`
-        <templates>
-          <div t-name="ErrorBoundary">
-              <t t-if="state.error">Error handled</t>
-              <t t-else=""><t t-slot="default" /></t>
-          </div>
-          <div t-name="ErrorComponent">Some text</div>
-          <div t-name="App">
-              <ErrorBoundary><ErrorComponent /></ErrorBoundary>
-          </div>
-        </templates>`);
-    class ErrorComponent extends Component {
-      mounted() {
-        throw new Error("NOOOOO");
-      }
-    }
-    class ErrorBoundary extends Component {
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    await nextTick();
-    await nextTick();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
-  });
-
-  test.skip("can catch an error in the willPatch call", async () => {
-    // we do not catch error in willPatch anymore
-    const consoleError = console.error;
-    console.error = jest.fn();
-    class ErrorComponent extends Component {
-      static template = xml`<div><t t-esc="props.message"/></div>`;
-      willPatch() {
-        throw new Error("NOOOOO");
-      }
-    }
-    class ErrorBoundary extends Component {
-      static template = xml`
-          <div>
-            <t t-if="state.error">Error handled</t>
-            <t t-else=""><t t-slot="default" /></t>
-          </div>`;
-      state = useState({ error: false });
-
-      catchError() {
-        this.state.error = true;
-      }
-    }
-    class App extends Component {
-      static template = xml`
-          <div>
-              <span><t t-esc="state.message"/></span>
-            <ErrorBoundary><ErrorComponent message="state.message" /></ErrorBoundary>
-          </div>`;
-      state = useState({ message: "abc" });
-      static components = { ErrorBoundary, ErrorComponent };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>abc</span><div><div>abc</div></div></div>");
-    app.state.message = "def";
-    await nextTick();
-    await nextTick();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><span>def</span><div>Error handled</div></div>");
-    expect(console.error).toHaveBeenCalledTimes(1);
-    console.error = consoleError;
-  });
-
-  test("a rendering error will reject the mount promise", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn(() => {});
-    // we do not catch error in willPatch anymore
-    class App extends Component {
-      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
-    }
-
-    const app = new App();
-    let error;
-    try {
-      await app.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot read property 'crash' of undefined");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test("an error in mounted call will reject the mount promise", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn(() => {});
-
-    class App extends Component {
-      static template = xml`<div>abc</div>`;
-      mounted() {
-        throw new Error("boom");
-      }
-    }
-
-    const app = new App();
-    let error;
-    try {
-      await app.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("boom");
-    expect(fixture.innerHTML).toBe("");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test("an error in willPatch call will reject the render promise", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn(() => {});
-
-    class App extends Component {
-      static template = xml`<div><t t-esc="val"/></div>`;
-      val = 3;
-      willPatch() {
-        throw new Error("boom");
-      }
-    }
-
-    const app = new App();
-    await app.mount(fixture);
-    app.val = 4;
-    let error;
-    try {
-      await app.render();
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("boom");
-    expect(fixture.innerHTML).toBe("");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test("an error in patched call will reject the render promise", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn(() => {});
-
-    class App extends Component {
-      static template = xml`<div><t t-esc="val"/></div>`;
-      val = 3;
-      patched() {
-        throw new Error("boom");
-      }
-    }
-
-    const app = new App();
-    await app.mount(fixture);
-    app.val = 4;
-    let error;
-    try {
-      await app.render();
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("boom");
-    expect(fixture.innerHTML).toBe("");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test("a rendering error in a sub component will reject the mount promise", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn(() => {});
-    // we do not catch error in willPatch anymore
-    class Child extends Component {
-      static template = xml`<div><t t-esc="this.will.crash"/></div>`;
-    }
-    class App extends Component {
-      static template = xml`<div><Child/></div>`;
-      static components = { Child };
-    }
-
-    const app = new App();
-    let error;
-    try {
-      await app.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot read property 'crash' of undefined");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test("a rendering error will reject the render promise", async () => {
-    const consoleError = console.error;
-    console.error = jest.fn(() => {});
-    // we do not catch error in willPatch anymore
-    class App extends Component {
-      static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
-      flag = false;
-    }
-
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div></div>");
-    app.flag = true;
-    let error;
-    try {
-      await app.render();
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot read property 'crash' of undefined");
-
-    expect(console.error).toBeCalledTimes(0);
-    console.error = consoleError;
-  });
-
-  test("a rendering error will reject the render promise (with sub components)", async () => {
-    class Child extends Component {
-      static template = xml`<span></span>`;
-    }
-    class Parent extends Component {
-      static template = xml`<div><Child/><t t-esc="x.y"/></div>`;
-      static components = { Child };
-    }
-
-    let error;
-    try {
-      const parent = new Parent();
-      await parent.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot read property 'y' of undefined");
-  });
-});

tests/component/props_validation.test.ts

@@ -1,868 +0,0 @@
-import { Component, Env } from "../../src/component/component";
-import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
-import { useState } from "../../src/hooks";
-import { QWeb } from "../../src/qweb";
-import { xml } from "../../src/tags";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-let fixture: HTMLElement;
-let env: Env;
-let dev: boolean = false;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-  Component.env = env;
-  dev = QWeb.dev;
-  QWeb.dev = true;
-});
-
-afterEach(() => {
-  fixture.remove();
-  QWeb.dev = dev;
-});
-
-class Widget extends Component {}
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-describe("props validation", () => {
-  test("validation is only done in dev mode", async () => {
-    class TestWidget extends Widget {
-      static props = ["message"];
-      static template = xml`<div>hey</div>`;
-    }
-    class Parent extends Widget {
-      static components = { TestWidget };
-      static template = xml`<div><TestWidget /></div>`;
-    }
-
-    let error;
-    QWeb.dev = true;
-    try {
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe(`Missing props 'message' (component 'TestWidget')`);
-
-    error = undefined;
-
-    QWeb.dev = false;
-    try {
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-  });
-
-  test("props: list of strings", async () => {
-    class TestWidget extends Widget {
-      static props = ["message"];
-      static template = xml`<div>hey</div>`;
-    }
-    class Parent extends Widget {
-      static components = { TestWidget };
-      static template = xml`<div><TestWidget /></div>`;
-    }
-
-    let error;
-    try {
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe(`Missing props 'message' (component 'TestWidget')`);
-  });
-
-  test("validate simple types", async () => {
-    const Tests = [
-      { type: Number, ok: 1, ko: "1" },
-      { type: Boolean, ok: true, ko: "1" },
-      { type: String, ok: "1", ko: 1 },
-      { type: Object, ok: {}, ko: "1" },
-      { type: Date, ok: new Date(), ko: "1" },
-      { type: Function, ok: () => {}, ko: "1" },
-    ];
-
-    let props;
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      get p() {
-        return props.p;
-      }
-    }
-    for (let test of Tests) {
-      let TestWidget = class extends Widget {
-        static template = xml`<div>hey</div>`;
-        static props = { p: test.type };
-      };
-      Parent.components = { TestWidget };
-
-      let error;
-      props = {};
-      try {
-        const p = new Parent();
-        await p.mount(fixture);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).toBeDefined();
-      expect(error.message).toBe(`Missing props 'p' (component '_a')`);
-
-      error = undefined;
-      props = { p: test.ok };
-      try {
-        const p = new Parent();
-        await p.mount(fixture);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).toBeUndefined();
-
-      props = { p: test.ko };
-      try {
-        const p = new Parent();
-        await p.mount(fixture);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).toBeDefined();
-      expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
-    }
-  });
-
-  test("validate simple types, alternate form", async () => {
-    const Tests = [
-      { type: Number, ok: 1, ko: "1" },
-      { type: Boolean, ok: true, ko: "1" },
-      { type: String, ok: "1", ko: 1 },
-      { type: Object, ok: {}, ko: "1" },
-      { type: Date, ok: new Date(), ko: "1" },
-      { type: Function, ok: () => {}, ko: "1" },
-    ];
-
-    let props;
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      get p() {
-        return props.p;
-      }
-    }
-    for (let test of Tests) {
-      let TestWidget = class extends Component {
-        static props = { p: { type: test.type } };
-        static template = xml`<div>hey</div>`;
-      };
-      Parent.components = { TestWidget };
-
-      let error;
-      props = {};
-      try {
-        const p = new Parent();
-        await p.mount(fixture);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).toBeDefined();
-      expect(error.message).toBe(`Missing props 'p' (component '_a')`);
-
-      error = undefined;
-      props = { p: test.ok };
-      try {
-        const p = new Parent();
-        await p.mount(fixture);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).toBeUndefined();
-
-      props = { p: test.ko };
-      try {
-        const p = new Parent();
-        await p.mount(fixture);
-      } catch (e) {
-        error = e;
-      }
-      expect(error).toBeDefined();
-      expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
-    }
-  });
-
-  test("can validate a prop with multiple types", async () => {
-    class TestWidget extends Component {
-      static template = xml`<div>hey</div>`;
-      static props = { p: [String, Boolean] };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      static components = { TestWidget };
-      get p() {
-        return props.p;
-      }
-    }
-
-    let error;
-    let props;
-    try {
-      props = { p: "string" };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: true };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: 1 };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
-  });
-
-  test("can validate an optional props", async () => {
-    class TestWidget extends Component {
-      static template = xml`<div>hey</div>`;
-      static props = { p: { type: String, optional: true } };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      static components = { TestWidget };
-      get p() {
-        return props.p;
-      }
-    }
-
-    let error;
-    let props;
-    try {
-      props = { p: "key" };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = {};
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: 1 };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
-  });
-
-  test("can validate an array with given primitive type", async () => {
-    class TestWidget extends Component {
-      static template = xml`<div>hey</div>`;
-      static props = { p: { type: Array, element: String } };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      static components = { TestWidget };
-      get p() {
-        return props.p;
-      }
-    }
-
-    let error;
-    let props;
-    try {
-      props = { p: [] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: ["string"] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: [1] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-
-    error = undefined;
-    try {
-      props = { p: ["string", 1] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-  });
-
-  test("can validate an array with multiple sub element types", async () => {
-    class TestWidget extends Component {
-      static template = xml`<div>hey</div>`;
-      static props = { p: { type: Array, element: [String, Boolean] } };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      static components = { TestWidget };
-      get p() {
-        return props.p;
-      }
-    }
-
-    let error;
-    let props;
-    try {
-      props = { p: [] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: ["string"] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: [false, true, "string"] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: [true, 1] };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
-  });
-
-  test("can validate an object with simple shape", async () => {
-    class TestWidget extends Component {
-      static template = xml`<div>hey</div>`;
-      static props = {
-        p: { type: Object, shape: { id: Number, url: String } },
-      };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      static components = { TestWidget };
-      get p() {
-        return props.p;
-      }
-    }
-
-    let error;
-    let props;
-    try {
-      props = { p: { id: 1, url: "url" } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: { id: 1, url: "url", extra: true } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid prop 'p' in component TestWidget (unknown prop 'extra')");
-
-    try {
-      props = { p: { id: "1", url: "url" } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
-
-    error = undefined;
-    try {
-      props = { p: { id: 1 } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
-  });
-
-  test("can validate recursively complicated prop def", async () => {
-    class TestWidget extends Component {
-      static template = xml`<div>hey</div>`;
-      static props = {
-        p: {
-          type: Object,
-          shape: {
-            id: Number,
-            url: [Boolean, { type: Array, element: Number }],
-          },
-        },
-      };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="p"/></div>`;
-      static components = { TestWidget };
-      get p() {
-        return props.p;
-      }
-    }
-
-    let error;
-    let props;
-    try {
-      props = { p: { id: 1, url: true } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: { id: 1, url: [12] } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      props = { p: { id: 1, url: [12, true] } };
-      const p = new Parent();
-      await p.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
-  });
-
-  test("can validate optional attributes in nested sub props", () => {
-    class TestComponent extends Component {
-      static props = {
-        myprop: {
-          type: Array,
-          element: {
-            type: Object,
-            shape: {
-              num: { type: Number, optional: true },
-            },
-          },
-        },
-      };
-    }
-    let error;
-    try {
-      QWeb.utils.validateProps(TestComponent, { myprop: [{}] });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      QWeb.utils.validateProps(TestComponent, { myprop: [{ a: 1 }] });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe(
-      "Invalid prop 'myprop' in component TestComponent (unknown prop 'a')"
-    );
-  });
-
-  test("can validate with a custom validator", () => {
-    class TestComponent extends Component {
-      static props = {
-        size: {
-          validate: (e) => ["small", "medium", "large"].includes(e),
-        },
-      };
-    }
-    let error;
-    try {
-      QWeb.utils.validateProps(TestComponent, { size: "small" });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-
-    try {
-      QWeb.utils.validateProps(TestComponent, { size: "abcdef" });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'size' in component 'TestComponent'");
-  });
-
-  test("can validate with a custom validator, and a type", () => {
-    const validator = jest.fn((n) => 0 <= n && n <= 10);
-    class TestComponent extends Component {
-      static props = {
-        n: {
-          type: Number,
-          validate: validator,
-        },
-      };
-    }
-    let error;
-    try {
-      QWeb.utils.validateProps(TestComponent, { n: 3 });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeUndefined();
-    expect(validator).toBeCalledTimes(1);
-
-    try {
-      QWeb.utils.validateProps(TestComponent, { n: "str" });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
-    expect(validator).toBeCalledTimes(1);
-
-    error = null;
-    try {
-      QWeb.utils.validateProps(TestComponent, { n: 100 });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
-    expect(validator).toBeCalledTimes(2);
-  });
-
-  test("props are validated in dev mode (code snapshot)", async () => {
-    env.qweb.addTemplates(`
-      <templates>
-        <div t-name="App">
-          <Child message="1"/>
-        </div>
-        <div t-name="Child"><t t-esc="props.message"/></div>
-      </templates>`);
-
-    class Child extends Widget {
-      static props = ["message"];
-    }
-    class App extends Widget {
-      static components = { Child };
-    }
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-    // need to make sure there are 2 call to update props. one at component
-    // creation, and one at update time.
-    expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot();
-  });
-
-  test("props: list of strings with optional props", async () => {
-    class TestWidget extends Widget {
-      static props = ["message", "someProp?"];
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { someProp: 1 });
-    }).toThrow();
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1 });
-    }).not.toThrow();
-  });
-
-  test("props: can be defined with a boolean", async () => {
-    class TestWidget extends Widget {
-      static props = { message: true };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, {});
-    }).toThrow();
-  });
-
-  test("props with type array, and no element", async () => {
-    class TestWidget extends Widget {
-      static props = { myprop: { type: Array } };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { myprop: [1] });
-    }).not.toThrow();
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { myprop: 1 });
-    }).toThrow(`Invalid Prop 'myprop' in component 'TestWidget'`);
-  });
-
-  test("props with type object, and no shape", async () => {
-    class TestWidget extends Widget {
-      static props = { myprop: { type: Object } };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { myprop: { a: 3 } });
-    }).not.toThrow();
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { myprop: false });
-    }).toThrow(`Invalid Prop 'myprop' in component 'TestWidget'`);
-  });
-
-  test("props: extra props cause an error", async () => {
-    class TestWidget extends Widget {
-      static props = ["message"];
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1, flag: true });
-    }).toThrow();
-  });
-
-  test("props: extra props cause an error, part 2", async () => {
-    class TestWidget extends Widget {
-      static props = { message: true };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1, flag: true });
-    }).toThrow();
-  });
-
-  test("props: optional prop do not cause an error", async () => {
-    class TestWidget extends Widget {
-      static props = ["message?"];
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: 1 });
-    }).not.toThrow();
-  });
-
-  test("optional prop do not cause an error if value is undefined", async () => {
-    class TestWidget extends Widget {
-      static props = { message: { type: String, optional: true } };
-    }
-
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: undefined });
-    }).not.toThrow();
-    expect(() => {
-      QWeb.utils.validateProps(TestWidget, { message: null });
-    }).toThrow();
-  });
-
-  test("missing required boolean prop causes an error", async () => {
-    class TestWidget extends Widget {
-      static props = ["p"];
-      static template = xml`<span><t t-if="props.p">hey</t></span>`;
-    }
-
-    class App extends Widget {
-      static template = xml`<div><TestWidget/></div>`;
-      static components = { TestWidget };
-    }
-
-    const w = new App(undefined, {});
-    let error;
-    try {
-      await w.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Missing props 'p' (component 'TestWidget')");
-  });
-
-  test("props are validated whenever component is updated", async () => {
-    let error;
-    class TestWidget extends Component {
-      static props = { p: { type: Number } };
-      static template = xml`<div><t t-esc="props.p"/></div>`;
-
-      async __updateProps() {
-        try {
-          await Component.prototype.__updateProps.apply(this, arguments);
-        } catch (e) {
-          error = e;
-        }
-      }
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="state.p"/></div>`;
-      static components = { TestWidget };
-      state: any = useState({ p: 1 });
-    }
-
-    const w = new Parent();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-
-    w.state.p = undefined;
-    await nextTick();
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Missing props 'p' (component 'TestWidget')");
-  });
-
-  test("default values are applied before validating props at update", async () => {
-    class TestWidget extends Component {
-      static props = { p: { type: Number } };
-      static template = xml`<div><t t-esc="props.p"/></div>`;
-      static defaultProps = { p: 4 };
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget p="state.p"/></div>`;
-      static components = { TestWidget };
-      state: any = useState({ p: 1 });
-    }
-
-    const w = new Parent();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-
-    w.state.p = undefined;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
-  });
-
-  test("mix of optional and mandatory", async () => {
-    class Child extends Component {
-      static props = {
-        optional: { type: String, optional: true },
-        mandatory: Number,
-      };
-      static template = xml` <div><t t-esc="props.mandatory"/></div>`;
-    }
-
-    class App extends Component {
-      static components = { Child };
-      static template = xml`<div><Child/></div>`;
-    }
-
-    const w = new App(undefined, {});
-    let error;
-    try {
-      await w.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Missing props 'mandatory' (component 'Child')");
-  });
-});
-
-describe("default props", () => {
-  test("can set default values", async () => {
-    class TestWidget extends Component {
-      static defaultProps = { p: 4 };
-      static template = xml`<div><t t-esc="props.p"/></div>`;
-    }
-    class Parent extends Component {
-      static template = xml`<div><TestWidget /></div>`;
-      static components = { TestWidget };
-    }
-
-    const w = new Parent();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
-  });
-
-  test("default values are also set whenever component is updated", async () => {
-    class TestWidget extends Widget {
-      static template = xml`<div><t t-esc="props.p"/></div>`;
-      static defaultProps = { p: 4 };
-    }
-    class Parent extends Widget {
-      static template = xml`<div><TestWidget p="state.p"/></div>`;
-      static components = { TestWidget };
-      state: any = useState({ p: 1 });
-    }
-
-    const w = new Parent();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
-
-    w.state.p = undefined;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
-  });
-
-  test("can set default required boolean values", async () => {
-    class TestWidget extends Widget {
-      static props = ["p", "q"];
-      static defaultProps = { p: true, q: false };
-      static template = xml`<span><t t-if="props.p">hey</t><t t-if="!props.q">hey</t></span>`;
-    }
-
-    class App extends Widget {
-      static template = xml`<div><TestWidget/></div>`;
-      static components = { TestWidget };
-    }
-
-    const w = new App(undefined, {});
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>heyhey</span></div>");
-  });
-});

tests/component/styles.test.ts

@@ -1,170 +0,0 @@
-import { Component, Env } from "../../src/component/component";
-import { processSheet } from "../../src/component/styles";
-import { xml, css } from "../../src/tags";
-import { makeTestFixture, makeTestEnv } from "../helpers";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-// We create before each test:
-// - fixture: a div, appended to the DOM, intended to be the target of dom
-//   manipulations.  Note that it is removed after each test.
-// - env: an Env, necessary to create new components
-
-let fixture: HTMLElement;
-let env: Env;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-  Component.env = env;
-  document.head.innerHTML = "";
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-//------------------------------------------------------------------------------
-// Tests
-//------------------------------------------------------------------------------
-
-describe("styles and component", () => {
-  test("can define an inline stylesheet", async () => {
-    class App extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = css`
-        .app {
-          color: red;
-        }
-      `;
-    }
-    expect(document.head.innerHTML).toBe("");
-    const app = new App();
-
-    expect(document.head.innerHTML).toBe(`<style component=\"App\">.app {
-  color: red;
-}</style>`);
-
-    await app.mount(fixture);
-    const style = getComputedStyle(app.el!);
-    expect(style.color).toBe("red");
-    expect(fixture.innerHTML).toBe('<div class="app">text</div>');
-  });
-
-  test("inherited components properly apply css", async () => {
-    class App extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = css`
-        .app {
-          color: red;
-        }
-      `;
-    }
-    class SubApp extends App {
-      static style = css`
-        .app {
-          font-weight: bold;
-        }
-      `;
-    }
-    expect(document.head.innerHTML).toBe("");
-    const app = new SubApp();
-
-    expect(document.head.innerHTML).toBe(`<style component=\"SubApp\">.app {
-  font-weight: bold;
-}</style><style component=\"App\">.app {
-  color: red;
-}</style>`);
-
-    await app.mount(fixture);
-    const style = getComputedStyle(app.el!);
-    expect(style.color).toBe("red");
-    expect(style.fontWeight).toBe("bold");
-    expect(fixture.innerHTML).toBe('<div class="app">text</div>');
-  });
-
-  test("get a meaningful error message if css helper is missing", async () => {
-    class App extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = `.app {color: red;}`;
-    }
-    let error;
-    try {
-      new App();
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe(
-      "Invalid css stylesheet for component 'App'. Did you forget to use the 'css' tag helper?"
-    );
-  });
-
-  test("inline stylesheets are processed", async () => {
-    class App extends Component {
-      static template = xml`<div class="app">text</div>`;
-      static style = css`
-        .app {
-          color: red;
-          .some-class {
-            font-weight: bold;
-            width: 40px;
-          }
-
-          display: block;
-        }
-      `;
-    }
-    new App();
-
-    expect(document.head.querySelector("style")!.innerHTML).toBe(`.app {
-  color: red;
-}
-.app .some-class {
-  font-weight: bold;
-  width: 40px;
-}
-.app {
-  display: block;
-}`);
-  });
-
-  test("properly handle rules with commas", async () => {
-    const sheet = processSheet(`.parent-a, .parent-b {
-      .child-a, .child-b {
-        color: red;
-      }
-    }`);
-
-    expect(sheet)
-      .toBe(`.parent-a .child-a, .parent-a .child-b, .parent-b .child-a, .parent-b .child-b {
-  color: red;
-}`);
-  });
-
-  test("handle & selector", async () => {
-    let sheet = processSheet(`.btn {
-      &.danger {
-        color: red;
-      }
-    }`);
-
-    expect(sheet).toBe(`.btn.danger {
-  color: red;
-}`);
-
-    sheet = processSheet(`.some-class {
-      &.btn {
-        .other-class ~ & {
-          color: red;
-        }
-      }
-    }`);
-
-    expect(sheet).toBe(`.other-class ~ .some-class.btn {
-  color: red;
-}`);
-  });
-});

tests/component/un_mounting.test.ts

@@ -1,611 +0,0 @@
-import { Component, Env } from "../../src/component/component";
-import { useState } from "../../src/hooks";
-import { xml } from "../../src/tags";
-import { makeDeferred, makeTestEnv, makeTestFixture, nextTick, nextMicroTick } from "../helpers";
-import { scheduler } from "../../src/component/scheduler";
-
-//------------------------------------------------------------------------------
-// Setup and helpers
-//------------------------------------------------------------------------------
-
-// We create before each test:
-// - fixture: a div, appended to the DOM, intended to be the target of dom
-//   manipulations.  Note that it is removed after each test.
-// - env: a WEnv, necessary to create new components
-
-let fixture: HTMLElement;
-let env: Env;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-  env = makeTestEnv();
-  Component.env = env;
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-describe("mount targets", () => {
-  test("can attach a component to an existing node (if same tagname)", async () => {
-    class App extends Component {
-      static template = xml`<div t-att-class="state.customClass">app<p>another tag</p></div>`;
-      state = useState({ customClass: "custom" });
-    }
-    const div = document.createElement("div");
-    div.classList.add("arbitrary");
-    div.innerHTML = `<p>pre-existing</p>`;
-    fixture.appendChild(div);
-
-    const app = new App();
-    await app.mount(div, { position: "self" });
-
-    expect(fixture.innerHTML).toBe(
-      `<div class="arbitrary custom"><p>pre-existing</p>app<p>another tag</p></div>`
-    );
-    expect(div).toBe(app.el);
-
-    app.state.customClass = "custom2";
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      `<div class="arbitrary custom2"><p>pre-existing</p>app<p>another tag</p></div>`
-    );
-    expect(div).toBe(app.el);
-
-    app.unmount();
-    // This assert is a best guess
-    // The use case it covers was not really thought through
-    // and may change in the future
-    expect(fixture.innerHTML).toBe("");
-  });
-
-  test("cannot attach a component to an existing node (if not same tagname)", async () => {
-    class App extends Component {
-      static template = xml`<span>app</span>`;
-    }
-    const div = document.createElement("div");
-    fixture.appendChild(div);
-
-    const app = new App();
-    let error;
-    try {
-      await app.mount(div, { position: "self" });
-    } catch (e) {
-      error = e;
-    }
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot attach 'App' to target node (not same tag name)");
-  });
-
-  test("can mount a component (with position='first-child')", async () => {
-    class App extends Component {
-      static template = xml`<div>app</div>`;
-    }
-    const span = document.createElement("span");
-    fixture.appendChild(span);
-
-    const app = new App();
-    await app.mount(fixture, { position: "first-child" });
-    expect(fixture.innerHTML).toBe("<div>app</div><span></span>");
-  });
-
-  test("can mount a component (with position='last-child')", async () => {
-    class App extends Component {
-      static template = xml`<div>app</div>`;
-    }
-    const span = document.createElement("span");
-    fixture.appendChild(span);
-
-    const app = new App();
-    await app.mount(fixture, { position: "last-child" });
-    expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
-  });
-
-  test("default mount option is 'last-child'", async () => {
-    class App extends Component {
-      static template = xml`<div>app</div>`;
-    }
-    const span = document.createElement("span");
-    fixture.appendChild(span);
-
-    const app = new App();
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
-  });
-});
-
-describe("unmounting and remounting", () => {
-  test("widget can be unmounted and remounted", async () => {
-    const steps: string[] = [];
-    class MyWidget extends Component {
-      static template = xml`<div>Hey</div>`;
-      async willStart() {
-        steps.push("willstart");
-      }
-      mounted() {
-        steps.push("mounted");
-      }
-      willUnmount() {
-        steps.push("willunmount");
-      }
-      patched() {
-        throw new Error("patched should not be called");
-      }
-    }
-
-    const w = new MyWidget();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>Hey</div>");
-    expect(steps).toEqual(["willstart", "mounted"]);
-
-    w.unmount();
-    expect(fixture.innerHTML).toBe("");
-    expect(steps).toEqual(["willstart", "mounted", "willunmount"]);
-
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>Hey</div>");
-    expect(steps).toEqual(["willstart", "mounted", "willunmount", "mounted"]);
-  });
-
-  test("widget can be mounted twice without ill effect", async () => {
-    const steps: string[] = [];
-    class MyWidget extends Component {
-      static template = xml`<div>Hey</div>`;
-      async willStart() {
-        steps.push("willstart");
-      }
-      mounted() {
-        steps.push("mounted");
-      }
-      willUnmount() {
-        steps.push("willunmount");
-      }
-    }
-
-    const w = new MyWidget();
-    await w.mount(fixture);
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>Hey</div>");
-    expect(steps).toEqual(["willstart", "mounted"]);
-  });
-
-  test("state changes in willUnmount do not trigger rerender", async () => {
-    const steps: string[] = [];
-
-    class Child extends Component {
-      static template = xml`
-          <span><t t-esc="props.val"/><t t-esc="state.n"/></span>
-        `;
-      state = useState({ n: 2 });
-      __render(f) {
-        steps.push("render");
-        return super.__render(f);
-      }
-      willPatch() {
-        steps.push("willPatch");
-      }
-      patched() {
-        steps.push("patched");
-      }
-
-      willUnmount() {
-        steps.push("willUnmount");
-        this.state.n = 3;
-      }
-    }
-    class Parent extends Component {
-      static template = xml`
-          <div>
-            <Child t-if="state.flag" val="state.val"/>
-          </div>
-        `;
-      static components = { Child };
-      state = useState({ val: 1, flag: true });
-    }
-
-    const widget = new Parent();
-    await widget.mount(fixture);
-    expect(steps).toEqual(["render"]);
-    expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
-    widget.state.flag = false;
-    await nextTick();
-    // we make sure here that no call to __render is done
-    expect(steps).toEqual(["render", "willUnmount"]);
-  });
-
-  test("state changes in willUnmount will be applied on remount", async () => {
-    class TestWidget extends Component {
-      static template = xml`
-          <div><t t-esc="state.val"/></div>
-        `;
-      state = useState({ val: 1 });
-      willUnmount() {
-        this.state.val = 3;
-      }
-    }
-
-    const widget = new TestWidget();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>1</div>");
-    widget.unmount();
-    expect(fixture.innerHTML).toBe("");
-    await nextTick(); // wait for changes to be detected before remounting
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>3</div>");
-    // we want to make sure that there are no remaining tasks left at this point.
-    expect(Component.scheduler.tasks.length).toBe(0);
-  });
-
-  test("sub component is still active after being unmounted and remounted", async () => {
-    class Child extends Component {
-      static template = xml`
-          <p t-on-click="state.value++">
-            <t t-esc="state.value"/>
-          </p>`;
-
-      state = useState({ value: 1 });
-    }
-
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<div><Child/></div>`;
-    }
-
-    const w = new Parent();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
-
-    fixture.querySelector("p")!.click();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><p>2</p></div>");
-    w.unmount();
-    await nextTick();
-    await w.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><p>2</p></div>");
-    fixture.querySelector("p")!.click();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><p>3</p></div>");
-  });
-
-  test("change state just before mounting component", async () => {
-    const steps: number[] = [];
-    class TestWidget extends Component {
-      static template = xml`
-          <div><t t-esc="state.val"/></div>
-        `;
-      state = useState({ val: 1 });
-      __render(f) {
-        steps.push(this.state.val);
-        return super.__render(f);
-      }
-    }
-    TestWidget.prototype.__render = jest.fn(TestWidget.prototype.__render);
-
-    const widget = new TestWidget();
-    widget.state.val = 2;
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>2</div>");
-    expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(1);
-
-    // unmount and re-mount, as in this case, willStart won't be called, so it's
-    // slightly different
-    widget.unmount();
-    widget.state.val = 3;
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>3</div>");
-    expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(2);
-    expect(steps).toEqual([2, 3]);
-  });
-
-  test("change state while mounting component", async () => {
-    const steps: number[] = [];
-    class TestWidget extends Component {
-      static template = xml`
-          <div><t t-esc="state.val"/></div>
-        `;
-      state = useState({ val: 1 });
-      __render(f) {
-        steps.push(this.state.val);
-        return super.__render(f);
-      }
-    }
-    TestWidget.prototype.__render = jest.fn(TestWidget.prototype.__render);
-    TestWidget.prototype.__patch = jest.fn(TestWidget.prototype.__patch);
-
-    const widget = new TestWidget();
-    let prom = widget.mount(fixture);
-    widget.state.val = 2;
-    await prom;
-    expect(fixture.innerHTML).toBe("<div>2</div>");
-    expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(1);
-
-    // unmount and re-mount, as in this case, willStart won't be called, so it's
-    // slightly different
-    widget.unmount();
-    prom = widget.mount(fixture);
-    widget.state.val = 3;
-    await prom;
-    expect(fixture.innerHTML).toBe("<div>3</div>");
-    expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(3);
-    expect(TestWidget.prototype.__patch).toHaveBeenCalledTimes(2);
-    expect(steps).toEqual([2, 2, 3]);
-  });
-
-  test("change state while component is unmounted", async () => {
-    let child;
-    class Child extends Component {
-      static template = xml`<span t-esc="state.val"/>`;
-      state = useState({
-        val: "C1",
-      });
-      constructor(parent, props) {
-        super(parent, props);
-        child = this;
-      }
-    }
-
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<div><t t-esc="state.val"/><Child/></div>`;
-      state = useState({ val: "P1" });
-    }
-
-    const parent = new Parent();
-    await parent.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>P1<span>C1</span></div>");
-
-    parent.unmount();
-    expect(fixture.innerHTML).toBe("");
-
-    parent.state.val = "P2";
-    child.state.val = "C2";
-
-    await parent.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>P2<span>C2</span></div>");
-  });
-
-  test("unmount component during a re-rendering", async () => {
-    const def = makeDeferred();
-    class Child extends Component {
-      static template = xml`<span><t t-esc="props.val"/></span>`;
-      willUpdateProps() {
-        return def;
-      }
-    }
-    Child.prototype.__render = jest.fn(Child.prototype.__render);
-
-    class Parent extends Component {
-      static template = xml`<div><Child val="state.val"/></div>`;
-      static components = { Child };
-      state = useState({ val: 1 });
-    }
-
-    const parent = new Parent();
-    await parent.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
-    expect(Child.prototype.__render).toBeCalledTimes(1);
-
-    parent.state.val = 2;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
-
-    parent.unmount();
-    expect(fixture.innerHTML).toBe("");
-
-    def.resolve();
-    await nextTick();
-    expect(fixture.innerHTML).toBe("");
-    expect(Child.prototype.__render).toBeCalledTimes(1);
-  });
-
-  test("widget can be mounted on different target", async () => {
-    class MyWidget extends Component {
-      static template = xml`<div>Hey</div>`;
-      patched() {
-        throw new Error("patched should not be called");
-      }
-    }
-    const div = document.createElement("div");
-    const span = document.createElement("span");
-    fixture.appendChild(div);
-    fixture.appendChild(span);
-    const w = new MyWidget();
-    await w.mount(div);
-
-    expect(fixture.innerHTML).toBe("<div><div>Hey</div></div><span></span>");
-
-    await w.mount(span);
-    expect(fixture.innerHTML).toBe("<div></div><span><div>Hey</div></span>");
-  });
-
-  test("widget can be mounted on different target, another situation", async () => {
-    const def = makeDeferred();
-    const steps: string[] = [];
-
-    class MyWidget extends Component {
-      static template = xml`<div>Hey</div>`;
-      async willStart() {
-        return def;
-      }
-      patched() {
-        throw new Error("patched should not be called");
-      }
-    }
-    const div = document.createElement("div");
-    const span = document.createElement("span");
-    fixture.appendChild(div);
-    fixture.appendChild(span);
-    const w = new MyWidget();
-
-    w.mount(div).catch(() => steps.push("1 catch"));
-
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div></div><span></span>");
-
-    w.mount(span).then(() => steps.push("2 resolved"));
-
-    // we wait two microticks because this is the number of internal promises
-    // that need to be resolved/rejected, and because we want to prove here
-    // that the first mount operation is cancelled immediately, and not after
-    // one full tick.
-    await nextMicroTick();
-    await nextMicroTick();
-    expect(steps).toEqual(["1 catch"]);
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div></div><span></span>");
-
-    def.resolve();
-    await nextTick();
-    expect(steps).toEqual(["1 catch", "2 resolved"]);
-    expect(fixture.innerHTML).toBe("<div></div><span><div>Hey</div></span>");
-  });
-
-  test("widget can be mounted on same target, another situation", async () => {
-    const def = makeDeferred();
-    const steps: string[] = [];
-
-    class MyWidget extends Component {
-      static template = xml`<div>Hey</div>`;
-      async willStart() {
-        return def;
-      }
-      patched() {
-        throw new Error("patched should not be called");
-      }
-    }
-    const w = new MyWidget();
-
-    w.mount(fixture).then(() => steps.push("1 resolved"));
-
-    await nextTick();
-    expect(fixture.innerHTML).toBe("");
-
-    w.mount(fixture).then(() => steps.push("2 resolved"));
-
-    await nextTick();
-    expect(steps).toEqual([]);
-    expect(fixture.innerHTML).toBe("");
-
-    def.resolve();
-    await nextTick();
-    expect(steps).toEqual(["1 resolved", "2 resolved"]);
-    expect(fixture.innerHTML).toBe("<div>Hey</div>");
-  });
-
-  test("mounting a destroyed widget", async () => {
-    class MyWidget extends Component {
-      static template = xml`<div>Hey</div>`;
-    }
-    const w = new MyWidget();
-    w.destroy(); // because, why not
-
-    let error;
-    try {
-      await w.mount(fixture);
-    } catch (e) {
-      error = e;
-    }
-    expect(scheduler.tasks.length).toBe(0);
-    expect(error).toBeDefined();
-    expect(error.message).toBe("Cannot mount a destroyed component");
-  });
-
-  test("destroying a sub-component cleans itself from parent's vnode", async () => {
-    class C1 extends Component {
-      static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
-    }
-    class P extends Component {
-      static components = { C1 };
-      static template = xml`<div><div><C1 t-props="state" t-if="state.a"/></div></div>`;
-      state = {
-        a: "first",
-      };
-    }
-    const parent = new P();
-    await parent.mount(fixture);
-    expect(fixture.textContent).toBe("first");
-    parent.unmount();
-    parent.state.a = "";
-    parent.mount(fixture);
-    parent.state.a = "fixed";
-    await parent.render();
-    expect(fixture.textContent).toBe("fixed");
-  });
-
-  test("destroying a sub-component cleans itself from parent's vnode, part 2", async () => {
-    class C1 extends Component {
-      static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
-    }
-    class P extends Component {
-      static components = { C1 };
-      static template = xml`<div><div><C1 t-props="state" t-if="state.a"/>some text</div></div>`;
-      state = {
-        a: "first",
-      };
-    }
-    const parent = new P();
-    await parent.mount(fixture);
-    expect(fixture.textContent).toBe("firstsome text");
-    parent.unmount();
-    parent.state.a = "";
-    parent.mount(fixture);
-    parent.state.a = "fixed";
-    await parent.render();
-    expect(fixture.textContent).toBe("fixedsome text");
-  });
-
-  test("destroying a sub-component cleans itself from parent's vnode, part 3", async () => {
-    class C1 extends Component {
-      static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
-    }
-
-    class C2 extends Component {
-      static template = xml`<C1 a="props.a"/>`;
-      static components = { C1 };
-    }
-
-    class P extends Component {
-      static components = { C2 };
-      static template = xml`<div><div><C2 t-props="state" t-if="state.a"/></div></div>`;
-      state = {
-        a: "first",
-      };
-    }
-    const parent = new P();
-    await parent.mount(fixture);
-    expect(fixture.textContent).toBe("first");
-    parent.unmount();
-    parent.state.a = "";
-    parent.mount(fixture);
-    parent.state.a = "fixed";
-    await parent.render();
-    expect(fixture.textContent).toBe("fixed");
-  });
-
-  test("destroying a sub-component cleans itself from parent's vnode, part 4", async () => {
-    class C1 extends Component {
-      static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
-    }
-
-    class C2 extends Component {
-      static template = xml`<C1 a="props.a"/>`;
-      static components = { C1 };
-    }
-    class P extends Component {
-      static components = { C2 };
-      static template = xml`<div><div><C2 t-props="state" t-if="state.a"/>some text</div></div>`;
-      state = {
-        a: "first",
-      };
-    }
-    const parent = new P();
-    await parent.mount(fixture);
-    expect(fixture.textContent).toBe("firstsome text");
-    parent.unmount();
-    parent.state.a = "";
-    parent.mount(fixture);
-    parent.state.a = "fixed";
-    await parent.render();
-    expect(fixture.textContent).toBe("fixedsome text");
-  });
-});

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app destroy remove the widget from the DOM 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/components/__snapshots__/basics.test.ts.snap

@@ -0,0 +1,929 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics Multi root component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<span>1</span>\`);
+  let block4 = createBlock(\`<span>2</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let b3 = text(\`text\`);
+    let b4 = block4();
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
+exports[`basics a class component inside a class component, no external dom 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics a class component inside a class component, no external dom 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics a component cannot be mounted in a detached node 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics a component inside a component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics a component inside a component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-child-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics can be clicked on and updated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].counter;
+    const v1 = ctx['state'];
+    let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`basics can handle empty props 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].val;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics can handle empty props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics can mount a component with just some text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`just text\`);
+  }
+}"
+`;
+
+exports[`basics can mount a component with no text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
+exports[`basics can mount a simple component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can mount a simple component with multiple roots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block2 = createBlock(\`<span/>\`);
+  let block3 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = block2();
+    let b3 = block3();
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics can mount a simple component with props 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics cannot mount on a documentFragment 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics child can be updated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].value);
+  }
+}"
+`;
+
+exports[`basics child can be updated 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics class component with dynamic text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics class parent, class child component with props 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics class parent, class child component with props 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics component with dynamic content can be updated 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics do not remove previously rendered dom if not necessary 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics do not remove previously rendered dom if not necessary, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics has no el after creation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>a</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>b</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['props'].child==='a') {
+      b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
+    } else {
+      b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics higher order components parent and child 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics parent, child and grandchild 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hey</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics parent, child and grandchild 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics parent, child and grandchild 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics props is set on root component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics reconciliation alg is not confused in some specific situation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics same t-keys in two different places 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].blip;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics same t-keys in two different places 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {blip: '1'}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {blip: '2'}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics simple component with a dynamic text 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['value'];
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics simple component, useState 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].value;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics some simple sanity checks (el/status) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-elif works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-elif works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else if (!ctx['state'].flag) {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics t-else with empty string works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-else with empty string works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics t-else works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-else works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  let block2 = createBlock(\`<div>somediv</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = block2();
+    } else {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics t-if works with t-component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>hey</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-if works with t-component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (false) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return block1([], [b2, b3]);
+  }
+}"
+`;
+
+exports[`basics text after a conditional component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<p>simple vnode</p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics text after a conditional component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    let d1 = ctx['state'].text;
+    return block1([d1], [b2]);
+  }
+}"
+`;
+
+exports[`basics three level of components with collapsing root nodes 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics three level of components with collapsing root nodes 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics three level of components with collapsing root nodes 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics throws if mounting on target=null 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics two child components 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics two child components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics updating a component with t-foreach as root 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k1, v1, l1, c1] = prepareList(ctx['items']);
+    for (let i1 = 0; i1 < l1; i1++) {
+      ctx[\`item\`] = v1[i1];
+      let key1 = ctx['item'];
+      c1[i1] = withKey(text(ctx['item']), key1);
+    }
+    return list(c1);
+  }
+}"
+`;
+
+exports[`basics widget after a t-foreach 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics widget after a t-foreach 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k2, v2, l2, c2] = prepareList(Array(2));
+    for (let i1 = 0; i1 < l2; i1++) {
+      ctx[\`elem\`] = v2[i1];
+      ctx[\`elem_index\`] = i1;
+      let key1 = ctx['elem_index'];
+      c2[i1] = withKey(text(\`txt\`), key1);
+    }
+    ctx = ctx.__proto__;
+    let b2 = list(c2);
+    let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2, b4]);
+  }
+}"
+`;
+
+exports[`basics zero or one child components 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics zero or one child components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].hasChild) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;

tests/components/__snapshots__/error_handling.test.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics no component catching error lead to full app destruction 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics no component catching error lead to full app destruction 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`event handling can set handler on sub component 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`event handling can set handler on sub component 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  let assign = Object.assign;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let h2 = [\`click\`, ctx, 'inc'];
+    let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
+    let b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`event handling handler receive the event as argument 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>simple vnode</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`event handling handler receive the event as argument 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  let assign = Object.assign;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let h2 = [\`click\`, ctx, 'inc'];
+    let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
+    let b3 = text(ctx['state'].value);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`event handling support for callable expression in event handler 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['state'].value;
+    const v1 = ctx['obj'];
+    let d2 = (e) => {const res = (() => { return v1.onInput })(); if (typeof res === 'function') { res(e) }};
+    return block1([d1, d2]);
+  }
+}"
+`;

tests/components/__snapshots__/higher_order_component.test.ts.snap

@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basics basic use 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = ctx['props'].p;
+    return block1([d1]);
+  }
+}"
+`;
+
+exports[`basics basic use 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics can select a sub widget  1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>CHILD 1</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget  2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>CHILD 2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget  3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['env'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    if (!ctx['env'].flag) {
+      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>CHILD 1</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div>CHILD 2</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics can select a sub widget, part 2 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    if (ctx['state'].flag) {
+      b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    if (!ctx['state'].flag) {
+      b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`basics sub widget is interactive 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let d1 = [ctx, 'inc'];
+    let d2 = ctx['state'].val;
+    return block1([d1, d2]);
+  }
+}"
+`;
+
+exports[`basics sub widget is interactive 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics top level sub widget with a parent 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<span>Hello</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`basics top level sub widget with a parent 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`ComponentC\`, {}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`basics top level sub widget with a parent 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component } = bdom;
+  let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+  
+  let block1 = createBlock(\`<div><block-child-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
+    return block1([], [b2]);
+  }
+}"
+`;