[REL] v1.0.13

# 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 ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.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,6 @@ node_modules
 # Extras temp file
 /tools/owl.js
 
-release-notes.md
+release-notes.md
+
+.rpt2_cache

README.md

@@ -121,8 +121,7 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.0.8.js](https://github.com/odoo/owl/releases/download/v1.0.8/owl.js)
-- [owl-1.0.8.min.js](https://github.com/odoo/owl/releases/download/v1.0.8/owl.min.js)
+- [owl-1.0.13](https://github.com/odoo/owl/releases/tag/v1.0.13)
 
 ## License
 

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/props_validation.md

@@ -30,7 +30,7 @@ class ComponentB extends owl.Component {
     count: {type: Number},
     messages: {
       type: Array,
-      element: {type: Object, shape: {id: Boolean, text: 'string' }
+      element: {type: Object, shape: {id: Boolean, text: String }
     },
    date: Date,
    combinedVal: [Number, Boolean]

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

package.json

@@ -1,23 +1,20 @@
 {
   "name": "@odoo/owl",
-  "version": "1.0.8",
+  "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": "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,9 +35,9 @@
     "url": "https://github.com/odoo/owl/issues"
   },
   "homepage": "https://github.com/odoo/owl#readme",
-  "dependencies": {},
   "devDependencies": {
-    "@types/jest": "^23.3.12",
+    "@types/jest": "^23.3.14",
+    "@types/node": "^14.11.8",
     "chalk": "^3.0.0",
     "cpx": "^1.5.0",
     "git-rev-sync": "^1.12.0",
@@ -51,7 +48,8 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
     "rollup": "^1.6.0",
-    "rollup-plugin-typescript2": "^0.20.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.27.3",
     "sass": "^1.16.1",
     "source-map-support": "^0.5.10",
     "ts-jest": "^23.10.5",

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.0.8
+- 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,70 @@
-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,
+    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/component/component.ts

@@ -433,8 +433,8 @@ export class Component<Props extends {} = any, T extends Env = Env> {
    * 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);
+  trigger<T = any>(eventType: string, payload?: T) {
+    this.__trigger<T>(this, eventType, payload);
   }
 
   //--------------------------------------------------------------------------
@@ -496,9 +496,9 @@ export class Component<Props extends {} = any, T extends Env = Env> {
     }
     this.willUnmount();
     __owl__.isMounted = false;
-    if (this.__owl__.currentFiber) {
-      this.__owl__.currentFiber.isCompleted = true;
-      this.__owl__.currentFiber.root.counter = 0;
+    if (__owl__.currentFiber) {
+      __owl__.currentFiber.isCompleted = true;
+      __owl__.currentFiber.root.counter = 0;
     }
     const children = __owl__.children;
     for (let id in children) {
@@ -512,9 +512,9 @@ export class Component<Props extends {} = any, T extends Env = Env> {
    * Private trigger method, allows to choose the component which triggered
    * the event in the first place
    */
-  __trigger(component: Component, eventType: string, payload?: any) {
+  __trigger<T>(component: Component, eventType: string, payload?: T) {
     if (this.el) {
-      const ev = new OwlEvent(component, eventType, {
+      const ev = new OwlEvent<T>(component, eventType, {
         bubbles: true,
         cancelable: true,
         detail: payload,
@@ -656,9 +656,28 @@ export class Component<Props extends {} = any, T extends Env = Env> {
       // 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) {
-        let child = __owl__.children[childKey];
-        if (!child.__owl__.isMounted && child.__owl__.parentLastFiberId < fiber.id) {
-          child.destroy();
+        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) {

src/component/directive.ts

@@ -227,7 +227,9 @@ QWeb.addDirective({
       if (name.startsWith("t-on-")) {
         events.push([name, value]);
       } else if (name === "t-transition") {
-        transition = value;
+        if (QWeb.enableTransitions) {
+          transition = value;
+        }
       } else if (!name.startsWith("t-")) {
         if (name !== "class" && name !== "style") {
           // this is a prop!
@@ -400,7 +402,6 @@ QWeb.addDirective({
 
     if (hasSlots) {
       const clone = <Element>node.cloneNode(true);
-      const slotNodes = Array.from(clone.querySelectorAll("[t-set-slot]"));
 
       // 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
@@ -410,27 +411,45 @@ QWeb.addDirective({
       // 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 el of clone.children) {
-        if (el.getAttribute("t-set") && el.hasChildNodes()) {
-          slotNodes.push(el);
+      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];
-          slotNode.parentElement!.removeChild(slotNode);
-          let key = slotNode.getAttribute("t-set-slot")!;
-          slotNode.removeAttribute("t-set-slot");
-
-          // here again, this code should be removed when we stop supporting
-          // using t-set to define the content of named slots.
-          if (!key) {
-            key = slotNode.getAttribute("t-set")!;
-            slotNode.removeAttribute("t-set");
+          // 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;
           }
-          const slotFn = qweb._compile(`slot_${key}_template`, slotNode, ctx);
+          if (isInSubComponent) {
+            continue;
+          }
+          let key = slotNode.getAttribute("t-set-slot")!;
+          if (slotNames.has(key)) {
+            continue;
+          }
+          slotNames.add(key);
+          slotNode.removeAttribute("t-set-slot");
+          slotNode.parentElement!.removeChild(slotNode);
+
+          const slotFn = qweb._compile(`slot_${key}_template`, { elem: slotNode, hasParent: true });
           QWeb.slots[`${slotId}_${key}`] = slotFn;
         }
       }
@@ -439,7 +458,7 @@ QWeb.addDirective({
         for (let child of Object.values(clone.childNodes)) {
           t.appendChild(child);
         }
-        const slotFn = qweb._compile(`slot_default_template`, t, ctx);
+        const slotFn = qweb._compile(`slot_default_template`, { elem: t, hasParent: true });
         QWeb.slots[`${slotId}_default`] = slotFn;
       }
     }

src/component/fiber.ts

@@ -238,12 +238,20 @@ export class Fiber {
       } 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;
         }
       }
-      component.__owl__.currentFiber = null;
+      if (fiber === component.__owl__.currentFiber) {
+        component.__owl__.currentFiber = null;
+      }
     }
 
     // insert into the DOM (mount case)

src/component/props_validation.ts

@@ -37,7 +37,7 @@ QWeb.utils.validateProps = function (Widget, props: Object) {
         if (propsDef[propName] && !propsDef[propName].optional) {
           throw new Error(`Missing props '${propName}' (component '${Widget.name}')`);
         } else {
-          break;
+          continue;
         }
       }
       let isValid;

src/config.ts

@@ -8,6 +8,7 @@ import { QWeb } from "./qweb/index";
 
 interface Config {
   mode: string;
+  enableTransitions: boolean;
 }
 
 export const config = {} as Config;
@@ -28,3 +29,12 @@ Object.defineProperty(config, "mode", {
     }
   },
 });
+
+Object.defineProperty(config, "enableTransitions", {
+  get() {
+    return QWeb.enableTransitions;
+  },
+  set(value: boolean) {
+    QWeb.enableTransitions = value;
+  },
+});

src/core/observer.ts

@@ -25,7 +25,12 @@ export class Observer {
   notifyCB() {}
 
   observe<T>(value: T, parent?: any): T {
-    if (value === null || typeof value !== "object" || value instanceof Date) {
+    if (
+      value === null ||
+      typeof value !== "object" ||
+      value instanceof Date ||
+      value instanceof Promise
+    ) {
       // fun fact: typeof null === 'object'
       return value;
     }

src/qweb/base_directives.ts

@@ -1,4 +1,4 @@
-import { CompilationContext } from "./compilation_context";
+import { CompilationContext, INTERP_REGEXP } from "./compilation_context";
 import { QWeb } from "./qweb";
 import { htmlToVDOM } from "../vdom/html_to_vdom";
 import { QWebVar } from "./expression_parser";
@@ -223,74 +223,85 @@ QWeb.addDirective({
     // ------------------------------------------------
     ctx.rootContext.shouldDefineScope = true;
     ctx.rootContext.shouldDefineUtils = true;
-    if (node.nodeName !== "t") {
-      throw new Error("Invalid tag for t-call directive (should be 't')");
-    }
     const subTemplate = node.getAttribute("t-call")!;
+    const isDynamic = INTERP_REGEXP.test(subTemplate);
     const nodeTemplate = qweb.templates[subTemplate];
-    if (!nodeTemplate) {
+    if (!isDynamic && !nodeTemplate) {
       throw new Error(`Cannot find template "${subTemplate}" (t-call)`);
     }
 
     // Step 2: compile target template in sub templates
     // ------------------------------------------------
-    if (!qweb.subTemplates[subTemplate]) {
-      qweb.subTemplates[subTemplate] = true;
-      const subTemplateFn = qweb._compile(subTemplate, nodeTemplate.elem, ctx, true);
-      qweb.subTemplates[subTemplate] = subTemplateFn;
+    let subIdstr: string;
+    if (isDynamic) {
+      const _id = ctx.generateID();
+      ctx.addLine(`let tname${_id} = ${ctx.interpolate(subTemplate)};`);
+      ctx.addLine(`let tid${_id} = this.subTemplates[tname${_id}];`);
+      ctx.addIf(`!tid${_id}`);
+      ctx.addLine(`tid${_id} = this.constructor.nextId++;`);
+      ctx.addLine(`this.subTemplates[tname${_id}] = tid${_id};`);
+      ctx.addLine(
+        `this.constructor.subTemplates[tid${_id}] = this._compile(tname${_id}, {hasParent: true, defineKey: true});`
+      );
+      ctx.closeIf();
+      subIdstr = `tid${_id}`;
+    } else {
+      let subId = qweb.subTemplates[subTemplate];
+      if (!subId) {
+        subId = QWeb.nextId++;
+        qweb.subTemplates[subTemplate] = subId;
+        const subTemplateFn = qweb._compile(subTemplate, { hasParent: true, defineKey: true });
+        QWeb.subTemplates[subId] = subTemplateFn;
+      }
+      subIdstr = `'${subId}'`;
     }
 
     // Step 3: compile t-call body if necessary
     // ------------------------------------------------
     let hasBody = node.hasChildNodes();
-    let protectID;
+    const protectID = ctx.startProtectScope();
     if (hasBody) {
       // we add a sub scope to protect the ambient scope
       ctx.addLine(`{`);
       ctx.indent();
-      protectID = ctx.startProtectScope();
       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);
+      qweb._compileNode(nodeCopy, ctx.subContext("parentNode", "__0"));
       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 callingScope = hasBody ? "scope" : "Object.assign(Object.create(context), scope)";
     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.subTemplates['${subTemplate}'].call(this, ${callingScope}, ${extra});`);
+      ctx.addLine(`this.constructor.subTemplates[${subIdstr}].call(this, scope, ${extra});`);
     } else {
       // this is a t-call with no parentnode, we need to extract the result
       ctx.rootContext.shouldDefineResult = true;
       ctx.addLine(`result = []`);
-      ctx.addLine(`this.subTemplates['${subTemplate}'].call(this, ${callingScope}, ${extra});`);
+      ctx.addLine(`this.constructor.subTemplates[${subIdstr}].call(this, scope, ${extra});`);
       ctx.addLine(`result = result[0]`);
     }
 
     // Step 5: restore previous scope
     // ------------------------------------------------
     if (hasBody) {
-      ctx.stopProtectScope(protectID);
       ctx.dedent();
       ctx.addLine(`}`);
     }
+    ctx.stopProtectScope(protectID);
 
     return true;
   },

src/qweb/extensions.ts

@@ -205,6 +205,9 @@ QWeb.addDirective({
   name: "transition",
   priority: 96,
   atNodeCreation({ ctx, value, addNodeHook }) {
+    if (!QWeb.enableTransitions) {
+      return;
+    }
     ctx.rootContext.shouldDefineUtils = true;
     let name = value;
     const hooks = {
@@ -262,6 +265,9 @@ QWeb.utils.toNumber = function (val: string): number | string {
   return isNaN(n) ? val : n;
 };
 
+const hasDotAtTheEnd = /\.[\w_]+\s*$/;
+const hasBracketsAtTheEnd = /\[[^\[]+\]\s*$/;
+
 QWeb.addDirective({
   name: "model",
   priority: 42,
@@ -270,15 +276,41 @@ QWeb.addDirective({
     let handler;
     let event = fullName.includes(".lazy") ? "change" : "input";
 
-    // we keep here a reference to the "base expression" (if the expression
-    // is `t-model="some.expr.value", then the base expression is "some.expr").
-    // This is necessary so we can capture it in the handler closure.
-    let expr = ctx.formatExpression(value);
-    const index = expr.lastIndexOf(".");
-    const baseExpr = expr.slice(0, index);
-    ctx.addLine(`let expr${nodeID} = ${baseExpr};`);
+    // 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)`);
+    }
 
-    expr = `expr${nodeID}.${expr.slice(index + 1)}`;
     const key = ctx.generateTemplateKey();
     if (node.tagName === "select") {
       ctx.addLine(`p${nodeID}.props = {value: ${expr}};`);

src/qweb/qweb.ts

@@ -66,8 +66,6 @@ interface QWebConfig {
 // Const/global stuff/helpers
 //------------------------------------------------------------------------------
 
-const DISABLED_TAGS = ["input", "textarea", "button", "select", "option", "optgroup"];
-
 const TRANSLATABLE_ATTRS = ["label", "title", "placeholder", "alt"];
 
 const lineBreakRE = /[\r\n]/;
@@ -86,10 +84,30 @@ interface Utils {
   [key: string]: any;
 }
 
-function isComponent(obj) {
+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) {
@@ -111,20 +129,8 @@ const UTILS: Utils = {
   addNameSpace(vnode) {
     addNS(vnode.data, vnode.children, vnode.sel);
   },
-  VDomArray: class VDomArray extends Array {},
-  vDomToString: function (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("");
-  },
+  VDomArray,
+  vDomToString,
   getComponent(obj) {
     while (obj && !isComponent(obj)) {
       obj = obj.__proto__;
@@ -206,16 +212,19 @@ export class QWeb extends EventBus {
   h = h;
   // dev mode enables better error messages or more costly validations
   static dev: boolean = false;
+  static enableTransitions: boolean = true;
 
   // slots contains sub templates defined with t-set inside t-component nodes, and
   // are meant to be used by the t-slot directive.
   static slots = {};
   static nextSlotId = 1;
 
-  // recursiveTemplates contains sub templates called with t-call, but which
-  // ends up in recursive situations.  This is very similar to the slot situation,
-  // as in we need to propagate the scope.
-  subTemplates = {};
+  // 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"];
@@ -304,7 +313,7 @@ export class QWeb extends EventBus {
     const template = {
       elem,
       fn: function (this: QWeb, context, extra) {
-        const compiledFunction = this._compile(name, elem);
+        const compiledFunction = this._compile(name);
         template.fn = compiledFunction;
         return compiledFunction.call(this, context, extra);
       },
@@ -409,30 +418,33 @@ export class QWeb extends EventBus {
 
   _compile(
     name: string,
-    elem: Element,
-    parentContext?: CompilationContext,
-    defineKey?: boolean
+    options: {
+      elem?: Element;
+      hasParent?: boolean;
+      defineKey?: boolean;
+    } = {}
   ): CompiledTemplate {
+    const elem = options.elem || this.templates[name].elem;
     const isDebug = elem.attributes.hasOwnProperty("t-debug");
     const ctx = new CompilationContext(name);
     if (elem.tagName !== "t") {
       ctx.shouldDefineResult = false;
     }
-    if (parentContext) {
-      ctx.variables = Object.create(parentContext.variables);
-      ctx.parentNode = parentContext.parentNode || ctx.generateID();
+    if (options.hasParent) {
+      ctx.variables = Object.create(null);
+      ctx.parentNode = ctx.generateID();
       ctx.allowMultipleRoots = true;
       ctx.hasParentWidget = true;
       ctx.shouldDefineResult = false;
       ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
-      if (defineKey) {
+      if (options.defineKey) {
         ctx.addLine(`let key0 = extra.key || "";`);
         ctx.hasKey0 = true;
       }
     }
     this._compileNode(elem, ctx);
 
-    if (!parentContext) {
+    if (!options.hasParent) {
       if (ctx.shouldDefineResult) {
         ctx.addLine(`return result;`);
       } else {
@@ -507,10 +519,17 @@ export class QWeb extends EventBus {
       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 <t t-component="SomeComponent" ... />
+      // <SomeComponent ... /> to <SomeComponent t-component="SomeComponent" ... />
       node.setAttribute("t-component", node.tagName);
     } else if (node.tagName !== "t" && node.hasAttribute("t-component")) {
       throw new Error(
@@ -664,22 +683,31 @@ export class QWeb extends EventBus {
     const props: string[] = [];
     const tattrs: number[] = [];
 
-    function handleBooleanProps(key, val) {
+    function handleProperties(key, val) {
       let isProp = false;
-      if (node.nodeName === "input" && key === "checked") {
-        let type = (<Element>node).getAttribute("type");
-        if (type === "checkbox" || type === "radio") {
-          isProp = true;
-        }
-      }
-      if (node.nodeName === "option" && key === "selected") {
-        isProp = true;
-      }
-      if (key === "disabled" && DISABLED_TAGS.indexOf(node.nodeName) > -1) {
-        isProp = true;
-      }
-      if ((key === "readonly" && node.nodeName === "input") || node.nodeName === "textarea") {
-        isProp = true;
+      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}`);
@@ -718,7 +746,7 @@ export class QWeb extends EventBus {
             name = '"' + name + '"';
           }
           attrs.push(`${name}: _${attID}`);
-          handleBooleanProps(name, attID);
+          handleProperties(name, attID);
         }
       }
 
@@ -755,7 +783,7 @@ export class QWeb extends EventBus {
           }
           ctx.addLine(`let _${attID} = ${formattedValue};`);
           attrs.push(`${attName}: _${attID}`);
-          handleBooleanProps(attName, attID);
+          handleProperties(attName, attID);
         }
       }
 

src/vdom/html_to_vdom.ts

@@ -1,4 +1,4 @@
-import { VNode, h } from "./vdom";
+import { VNode, h, addNS } from "./vdom";
 
 const parser = new DOMParser();
 
@@ -13,6 +13,9 @@ export function htmlToVDOM(html: string): VNode[] {
 
 function htmlToVNode(node: ChildNode): VNode {
   if (!(node instanceof Element)) {
+    if (node instanceof Comment) {
+      return h("!", node.textContent);
+    }
     return { text: node.textContent! } as VNode;
   }
   const attrs = {};
@@ -23,5 +26,9 @@ function htmlToVNode(node: ChildNode): VNode {
   for (let c of node.childNodes) {
     children.push(htmlToVNode(c));
   }
-  return h((node as Element).tagName, { attrs }, children);
+  const vnode = h((node as Element).tagName, { attrs }, children);
+  if (vnode.sel === "svg") {
+    addNS(vnode.data, (vnode as any).children, vnode.sel);
+  }
+  return vnode;
 }

tests/animations.test.ts

@@ -1,15 +1,15 @@
 import { Component, Env } from "../src/component/component";
+import { useRef, useState } from "../src/hooks";
 import { QWeb } from "../src/qweb/index";
-import { useState, useRef } from "../src/hooks";
 import { xml } from "../src/tags";
 import {
   makeDeferred,
-  makeTestFixture,
   makeTestEnv,
+  makeTestFixture,
+  nextFrame,
   patchNextFrame,
   renderToDOM,
   unpatchNextFrame,
-  nextTick,
 } from "./helpers";
 
 //------------------------------------------------------------------------------
@@ -420,29 +420,29 @@ describe("animations", () => {
 
     widget.state.flag = true;
 
-    await nextTick();
+    await nextFrame();
     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();
+    await nextFrame();
     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();
+    await nextFrame();
     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();
+    await nextFrame();
     widget.state.flag = true;
-    await nextTick();
+    await nextFrame();
 
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
     widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));

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

@@ -534,11 +534,11 @@ exports[`other directives with t-component slot setted value (with t-set) not ac
         w3.__owl__.pvnode = pvnode;
     }
     w3.__owl__.parentLastFiberId = extra.fiber.id;
-    let c5 = [], p5 = {key:5};
-    let vn5 = h('p', p5, c5);
-    c1.push(vn5);
+    let c6 = [], p6 = {key:6};
+    let vn6 = h('p', p6, c6);
+    c1.push(vn6);
     if (scope.iter != null) {
-        c5.push({text: scope.iter});
+        c6.push({text: scope.iter});
     }
     return vn1;
 }"
@@ -1253,12 +1253,16 @@ exports[`other directives with t-component t-set can't alter from within callee
     if (scope.iter != null) {
         c2.push({text: scope.iter});
     }
-    this.subTemplates['ChildWidget'].call(this, Object.assign(Object.create(context), scope), Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__4__'}));
-    let c5 = [], p5 = {key:5};
-    let vn5 = h('p', p5, c5);
-    c1.push(vn5);
+    let _origScope6 = scope;
+    scope = Object.create(scope);
+    scope.__access_mode__ = 'ro';
+    this.constructor.subTemplates['2'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__7__'}));
+    scope = _origScope6;
+    let c8 = [], p8 = {key:8};
+    let vn8 = h('p', p8, c8);
+    c1.push(vn8);
     if (scope.iter != null) {
-        c5.push({text: scope.iter});
+        c8.push({text: scope.iter});
     }
     return vn1;
 }"
@@ -1280,23 +1284,23 @@ exports[`other directives with t-component t-set can't alter in t-call body 1`]
     if (scope.iter != null) {
         c2.push({text: scope.iter});
     }
+    let _origScope6 = scope;
+    scope = Object.create(scope);
+    scope.__access_mode__ = 'ro';
     {
-        let _origScope4 = scope;
-        scope = Object.create(scope);
-        scope.__access_mode__ = 'ro';
         {
             let c__0 = [];
             utils.getScope(scope, 'iter').iter = 'inCall';
             scope[utils.zero] = c__0;
         }
-        this.subTemplates['ChildWidget'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__5__'}));
-        scope = _origScope4;
+        this.constructor.subTemplates['2'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__7__'}));
     }
-    let c6 = [], p6 = {key:6};
-    let vn6 = h('p', p6, c6);
-    c1.push(vn6);
+    scope = _origScope6;
+    let c8 = [], p8 = {key:8};
+    let vn8 = h('p', p8, c8);
+    c1.push(vn8);
     if (scope.iter != null) {
-        c6.push({text: scope.iter});
+        c8.push({text: scope.iter});
     }
     return vn1;
 }"
@@ -1401,6 +1405,47 @@ exports[`other directives with t-component t-set outside modified in t-foreach 1
 }"
 `;
 
+exports[`props evaluation  t-set with a body expression can be used as textual prop 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);
+    let c2 = new utils.VDomArray();
+    c2.push({text: \`42\`});
+    scope.abc = c2
+    // Component 'Child'
+    let w3 = '__4__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__4__']] : false;
+    let props3 = {val:scope.abc};
+    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
+        w3.destroy();
+        w3 = false;
+    }
+    if (w3) {
+        w3.__updateProps(props3, extra.fiber, undefined);
+        let pvnode = w3.__owl__.pvnode;
+        c1.push(pvnode);
+    } else {
+        let componentKey3 = \`Child\`;
+        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child'];
+        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+        w3 = new W3(parent, props3);
+        parent.__owl__.cmap['__4__'] = w3.__owl__.id;
+        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: '__4__', hook: {remove() {},destroy(vn) {w3.destroy();}}});
+        c1.push(pvnode);
+        w3.__owl__.pvnode = pvnode;
+    }
+    w3.__owl__.parentLastFiberId = extra.fiber.id;
+    return vn1;
+}"
+`;
+
 exports[`random stuff/miscellaneous can inject values in tagged templates 1`] = `
 "function anonymous(context, extra
 ) {
@@ -1410,7 +1455,11 @@ exports[`random stuff/miscellaneous can inject values in tagged templates 1`] =
     let h = this.h;
     let c1 = [], p1 = {key:1};
     let vn1 = h('div', p1, c1);
-    this.subTemplates['__template__1'].call(this, Object.assign(Object.create(context), scope), Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__4__'}));
+    let _origScope5 = scope;
+    scope = Object.create(scope);
+    scope.__access_mode__ = 'ro';
+    this.constructor.subTemplates['3'].call(this, scope, Object.assign({}, extra, {parentNode: c1, parent: utils.getComponent(context), key: '__6__'}));
+    scope = _origScope5;
     return vn1;
 }"
 `;
@@ -1525,15 +1574,15 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
     let h = this.h;
-    let c1 = extra.parentNode;
+    let c2 = extra.parentNode;
     let key0 = extra.key || \\"\\";
-    let c2 = [], p2 = {key:\`\${key0}_2\`,on:{}};
-    let vn2 = h('p', p2, c2);
-    c1.push(vn2);
-    let k3 = \`click__3__\${key0}__\`;
-    extra.handlers[k3] = extra.handlers[k3] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
-    p2.on['click'] = extra.handlers[k3];
-    c2.push({text: \`lucas\`});
+    let c3 = [], p3 = {key:\`\${key0}_3\`,on:{}};
+    let vn3 = h('p', p3, c3);
+    c2.push(vn3);
+    let k4 = \`click__4__\${key0}__\`;
+    extra.handlers[k4] = extra.handlers[k4] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
+    p3.on['click'] = extra.handlers[k4];
+    c3.push({text: \`lucas\`});
 }"
 `;
 
@@ -1544,14 +1593,14 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
     let utils = this.constructor.utils;
     let scope = Object.create(context);
     let h = this.h;
-    let c1 = extra.parentNode;
+    let c2 = extra.parentNode;
     let key0 = extra.key || \\"\\";
-    let c2 = [], p2 = {key:\`\${key0}_2\`,on:{}};
-    let vn2 = h('p', p2, c2);
-    c1.push(vn2);
-    let args3 = [scope['a']];
-    p2.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args3, e);};
-    c2.push({text: \`lucas\`});
+    let c3 = [], p3 = {key:\`\${key0}_3\`,on:{}};
+    let vn3 = h('p', p3, c3);
+    c2.push(vn3);
+    let args4 = [scope['a']];
+    p3.on['click'] = function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](...args4, e);};
+    c3.push({text: \`lucas\`});
 }"
 `;
 
@@ -1564,32 +1613,32 @@ exports[`t-call parent is set within t-call 1`] = `
     let parent = extra.parent;
     let scope = Object.create(context);
     let h = this.h;
-    let c1 = extra.parentNode;
+    let c2 = extra.parentNode;
     let key0 = extra.key || \\"\\";
     // Component 'Child'
-    let k3 = \`__3__\${key0}__\`;
-    let w2 = k3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k3]] : false;
-    let props2 = {};
-    if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
-        w2.destroy();
-        w2 = false;
+    let k4 = \`__4__\${key0}__\`;
+    let w3 = k4 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k4]] : false;
+    let props3 = {};
+    if (w3 && w3.__owl__.currentFiber && !w3.__owl__.vnode) {
+        w3.destroy();
+        w3 = false;
     }
-    if (w2) {
-        w2.__updateProps(props2, extra.fiber, undefined);
-        let pvnode = w2.__owl__.pvnode;
-        c1.push(pvnode);
+    if (w3) {
+        w3.__updateProps(props3, extra.fiber, undefined);
+        let pvnode = w3.__owl__.pvnode;
+        c2.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[k3] = w2.__owl__.id;
-        let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-        let pvnode = h('dummy', {key: k3, hook: {remove() {},destroy(vn) {w2.destroy();}}});
-        c1.push(pvnode);
-        w2.__owl__.pvnode = pvnode;
+        let componentKey3 = \`Child\`;
+        let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| scope['Child'];
+        if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
+        w3 = new W3(parent, props3);
+        parent.__owl__.cmap[k4] = w3.__owl__.id;
+        let fiber = w3.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+        let pvnode = h('dummy', {key: k4, hook: {remove() {},destroy(vn) {w3.destroy();}}});
+        c2.push(pvnode);
+        w3.__owl__.pvnode = pvnode;
     }
-    w2.__owl__.parentLastFiberId = extra.fiber.id;
+    w3.__owl__.parentLastFiberId = extra.fiber.id;
 }"
 `;
 
@@ -1683,6 +1732,33 @@ exports[`t-model directive basic use, on an input 1`] = `
 }"
 `;
 
+exports[`t-model directive basic use, on an input with bracket expression 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"__template__1\\"
+    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,on:{}};
+    let vn2 = h('input', p2, c2);
+    c1.push(vn2);
+    let expr2 = scope['state'];
+    let exprKey2 = 'text';
+    p2.props = {value: expr2[exprKey2]};
+    extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2[exprKey2] = ev.target.value});
+    p2.on['input'] = extra.handlers['__3__'];
+    let c4 = [], p4 = {key:4};
+    let vn4 = h('span', p4, c4);
+    c1.push(vn4);
+    let _5 = scope['state'].text;
+    if (_5 != null) {
+        c4.push({text: _5});
+    }
+    return vn1;
+}"
+`;
+
 exports[`t-model directive basic use, on another key in component 1`] = `
 "function anonymous(context, extra
 ) {
@@ -1749,6 +1825,46 @@ exports[`t-model directive in a t-foreach 1`] = `
 }"
 `;
 
+exports[`t-model directive in a t-foreach, part 2 1`] = `
+"function anonymous(context, extra
+) {
+    // Template name: \\"__template__1\\"
+    let scope = Object.create(context);
+    let h = this.h;
+    let c1 = [], p1 = {key:1};
+    let vn1 = h('div', p1, c1);
+    let _2 = scope['state'];
+    if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
+    let _3 = _4 = _2;
+    if (!(_2 instanceof Array)) {
+        _3 = Object.keys(_2);
+        _4 = Object.values(_2);
+    }
+    let _length3 = _3.length;
+    let _origScope5 = scope;
+    scope = Object.create(scope);
+    for (let i1 = 0; i1 < _length3; i1++) {
+        scope.thing_first = i1 === 0
+        scope.thing_last = i1 === _length3 - 1
+        scope.thing_index = i1
+        scope.thing = _3[i1]
+        scope.thing_value = _4[i1]
+        let key1 = scope['thing_index'];
+        let c6 = [], p6 = {key:\`\${key1}_6\`,on:{}};
+        let vn6 = h('input', p6, c6);
+        c1.push(vn6);
+        let expr6 = scope['state'];
+        let exprKey6 = scope['thing_index'];
+        let k7 = \`__7__\${key1}__\`;
+        p6.props = {value: expr6[exprKey6]};
+        extra.handlers[k7] = extra.handlers[k7] || ((ev) => {expr6[exprKey6] = ev.target.value});
+        p6.on['input'] = extra.handlers[k7];
+    }
+    scope = _origScope5;
+    return vn1;
+}"
+`;
+
 exports[`t-model directive on a select 1`] = `
 "function anonymous(context, extra
 ) {
@@ -1833,7 +1949,7 @@ exports[`t-model directive on an input type=radio 1`] = `
     let _2 = 'radio';
     let _3 = 'one';
     let _4 = 'One';
-    let c5 = [], p5 = {key:5,attrs:{type: _2,id: _3,value: _4},on:{}};
+    let c5 = [], p5 = {key:5,attrs:{type: _2,id: _3,value: _4},props:{value: _4},on:{}};
     let vn5 = h('input', p5, c5);
     c1.push(vn5);
     let expr5 = scope['state'];
@@ -1843,7 +1959,7 @@ exports[`t-model directive on an input type=radio 1`] = `
     let _7 = 'radio';
     let _8 = 'two';
     let _9 = 'Two';
-    let c10 = [], p10 = {key:10,attrs:{type: _7,id: _8,value: _9},on:{}};
+    let c10 = [], p10 = {key:10,attrs:{type: _7,id: _8,value: _9},props:{value: _9},on:{}};
     let vn10 = h('input', p10, c10);
     c1.push(vn10);
     let expr10 = scope['state'];

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

@@ -44,23 +44,23 @@ exports[`t-slot directive can define and call slots 2`] = `
 ) {
     // 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}));
+    let c10 = [], p10 = {key:10};
+    let vn10 = h('div', p10, c10);
+    c9.push(vn10);
+    const slot11 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
+    if (slot11) {
+        slot11.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c10, parent: extra.parent || context}));
     }
-    return vn6;
+    let c12 = [], p12 = {key:12};
+    let vn12 = h('div', p12, c12);
+    c9.push(vn12);
+    const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
+    if (slot13) {
+        slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
+    }
+    return vn9;
 }"
 `;
 
@@ -69,11 +69,11 @@ exports[`t-slot directive can define and call slots 3`] = `
 ) {
     // 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\`});
+    let c4 = extra.parentNode;
+    let c5 = [], p5 = {key:5};
+    let vn5 = h('span', p5, c5);
+    c4.push(vn5);
+    c5.push({text: \`header\`});
 }"
 `;
 
@@ -82,11 +82,11 @@ exports[`t-slot directive can define and call slots 4`] = `
 ) {
     // 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\`});
+    let c6 = extra.parentNode;
+    let c7 = [], p7 = {key:7};
+    let vn7 = h('span', p7, c7);
+    c6.push(vn7);
+    c7.push({text: \`footer\`});
 }"
 `;
 
@@ -134,23 +134,23 @@ exports[`t-slot directive can define and call slots using old t-set keyword 2`]
 ) {
     // 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}));
+    let c10 = [], p10 = {key:10};
+    let vn10 = h('div', p10, c10);
+    c9.push(vn10);
+    const slot11 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
+    if (slot11) {
+        slot11.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c10, parent: extra.parent || context}));
     }
-    return vn6;
+    let c12 = [], p12 = {key:12};
+    let vn12 = h('div', p12, c12);
+    c9.push(vn12);
+    const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
+    if (slot13) {
+        slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
+    }
+    return vn9;
 }"
 `;
 
@@ -159,11 +159,11 @@ exports[`t-slot directive can define and call slots using old t-set keyword 3`]
 ) {
     // 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\`});
+    let c4 = extra.parentNode;
+    let c5 = [], p5 = {key:5};
+    let vn5 = h('span', p5, c5);
+    c4.push(vn5);
+    c5.push({text: \`header\`});
 }"
 `;
 
@@ -172,11 +172,11 @@ exports[`t-slot directive can define and call slots using old t-set keyword 4`]
 ) {
     // 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\`});
+    let c6 = extra.parentNode;
+    let c7 = [], p7 = {key:7};
+    let vn7 = h('span', p7, c7);
+    c6.push(vn7);
+    c7.push({text: \`footer\`});
 }"
 `;
 
@@ -185,11 +185,11 @@ exports[`t-slot directive content is the default slot 1`] = `
 ) {
     // 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\`});
+    let c4 = extra.parentNode;
+    let c5 = [], p5 = {key:5};
+    let vn5 = h('span', p5, c5);
+    c4.push(vn5);
+    c5.push({text: \`sts rocks\`});
 }"
 `;
 
@@ -215,8 +215,8 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
 ) {
     // Template name: \\"slot_default_template\\"
     let h = this.h;
-    let c1 = extra.parentNode;
-    c1.push({text: \`sts rocks\`});
+    let c4 = extra.parentNode;
+    c4.push({text: \`sts rocks\`});
 }"
 `;
 
@@ -225,15 +225,15 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
 ) {
     // 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 c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
     let vn5 = h('span', p5, c5);
-    c1.push(vn5);
-    c5.push({text: \`rocks\`});
+    c4.push(vn5);
+    c5.push({text: \`sts\`});
+    let c6 = [], p6 = {key:6};
+    let vn6 = h('span', p6, c6);
+    c4.push(vn6);
+    c6.push({text: \`rocks\`});
 }"
 `;
 
@@ -242,15 +242,15 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
 ) {
     // 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 c4 = extra.parentNode;
     let c5 = [], p5 = {key:5};
     let vn5 = h('span', p5, c5);
-    c1.push(vn5);
-    c5.push({text: \`rocks\`});
+    c4.push(vn5);
+    c5.push({text: \`sts\`});
+    let c6 = [], p6 = {key:6};
+    let vn6 = h('span', p6, c6);
+    c4.push(vn6);
+    c6.push({text: \`rocks\`});
 }"
 `;
 
@@ -278,22 +278,22 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
     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 = {
+    let c8 = extra.parentNode;
+    let c9 = [], p9 = {key:9,on:{}};
+    let vn9 = h('button', p9, c9);
+    c8.push(vn9);
+    extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
+    p9.on['click'] = extra.handlers['click__10__'];
+    const ref11 = \`myButton\`;
+    p9.hook = {
       create: (_, n) => {
-        context.__owl__.refs[ref10] = n.elm;
+        context.__owl__.refs[ref11] = n.elm;
       },
       destroy: () => {
-        delete context.__owl__.refs[ref10];
+        delete context.__owl__.refs[ref11];
       },
     };
-    c8.push({text: \`do something\`});
+    c9.push({text: \`do something\`});
 }"
 `;
 
@@ -303,13 +303,13 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
     // 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\`});
+    let c8 = extra.parentNode;
+    let c9 = [], p9 = {key:9,on:{}};
+    let vn9 = h('button', p9, c9);
+    c8.push(vn9);
+    extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['doSomething'](e);};
+    p9.on['click'] = extra.handlers['click__10__'];
+    c9.push({text: \`do something\`});
 }"
 `;
 
@@ -319,14 +319,14 @@ exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
     // 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}));
+    let _12 = scope['props'].to;
+    let c13 = [], p13 = {key:13,attrs:{href: _12}};
+    let vn13 = h('a', p13, c13);
+    const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot14) {
+        slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context}));
     }
-    return vn12;
+    return vn13;
 }"
 `;
 
@@ -401,11 +401,11 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
     // 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});
+    let c10 = extra.parentNode;
+    c10.push({text: \`User \`});
+    let _11 = scope['user'].name;
+    if (_11 != null) {
+        c10.push({text: _11});
     }
 }"
 `;
@@ -416,14 +416,14 @@ exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
     // 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}));
+    let _12 = scope['props'].to;
+    let c13 = [], p13 = {key:13,attrs:{href: _12}};
+    let vn13 = h('a', p13, c13);
+    const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot14) {
+        slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context}));
     }
-    return vn11;
+    return vn13;
 }"
 `;
 
@@ -499,9 +499,10 @@ exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
     // 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});
+    let c10 = extra.parentNode;
+    let _11 = scope['userdescr'];
+    if (_11 != null) {
+        c10.push({text: _11});
     }
 }"
 `;
@@ -552,9 +553,10 @@ exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
     // 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});
+    let c4 = extra.parentNode;
+    let _5 = scope['userdescr'];
+    if (_5 != null) {
+        c4.push({text: _5});
     }
 }"
 `;
@@ -564,13 +566,13 @@ exports[`t-slot directive t-set t-value in a slot 1`] = `
 ) {
     // 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}));
+    let c5 = [], p5 = {key:5};
+    let vn5 = h('span', p5, c5);
+    const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot6) {
+        slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c5, parent: extra.parent || context}));
     }
-    return vn4;
+    return vn5;
 }"
 `;
 
@@ -581,12 +583,12 @@ exports[`t-slot directive template can just return a slot 1`] = `
     let utils = this.constructor.utils;
     let result;
     let h = this.h;
-    const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot6) {
-        let children7= []
+    const slot7 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot7) {
+        let children8= []
         result = {}
-        slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children7, parent: extra.parent || context}));
-        utils.defineProxy(result, children7[0]);
+        slot7.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children8, parent: extra.parent || context}));
+        utils.defineProxy(result, children8[0]);
     }
     return result;
 }"

tests/component/component.test.ts

@@ -1725,6 +1725,47 @@ describe("props evaluation ", () => {
     await widget.mount(fixture);
     expect(normalize(fixture.innerHTML)).toBe("<div><span>42</span></div>");
   });
+
+  test("t-set with a body expression can be used as textual prop", async () => {
+    class Child extends Component {
+      static template = xml`<span t-esc="props.val"/>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-set="abc">42</t>
+          <Child val="abc"/>
+        </div>`;
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
+    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
+  });
+
+  test("t-set with a body expression can be passed in props, and then t-raw", async () => {
+    class Child extends Component {
+      static template = xml`
+        <span>
+          <t t-esc="props.val"/>
+          <t t-raw="props.val"/>
+        </span>`;
+    }
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <t t-set="abc"><p>43</p></t>
+          <Child val="abc"/>
+        </div>`;
+    }
+
+    const widget = new Parent();
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>&lt;p&gt;4343&lt;/p&gt;<p>43</p></span></div>");
+  });
 });
 
 describe("other directives with t-component", () => {
@@ -3015,6 +3056,85 @@ describe("random stuff/miscellaneous", () => {
     expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
     expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
   });
+
+  test("update props of component without concrete own node", async () => {
+    class Custom extends Component {
+      static template = xml`
+        <div class="widget-subkey">
+          <t t-esc="props.key"/>__<t t-esc="props.subKey"/>
+        </div>`;
+    }
+    class Child extends Component {
+      static components = { Custom };
+      static template = xml`
+        <t t-component="Custom"
+          t-key="props.subKey"
+          key="props.key"
+          subKey="props.subKey"/>`;
+    }
+
+    class Parent extends Component {
+      static components = { Child };
+      static template = xml`
+        <div>
+          <Child t-key="childProps.key" t-props="childProps"/>
+        </div>`;
+      childProps = {
+        key: 1,
+        subKey: 1,
+      };
+    }
+    const parent = new Parent(null);
+    await parent.mount(fixture);
+    expect(fixture.textContent!.trim()).toBe("1__1");
+
+    // First step: change the Custom's instance
+    Object.assign(parent.childProps, {
+      subKey: 2,
+    });
+    parent.render();
+    await nextTick();
+    expect(fixture.textContent!.trim()).toBe("1__2");
+
+    // Second step, change both Child's and Custom's instance
+    Object.assign(parent.childProps, {
+      key: 2,
+      subKey: 3,
+    });
+    parent.render();
+    await nextTick();
+    expect(fixture.textContent!.trim()).toBe("2__3");
+  });
+
+  test("two renderings initiated between willPatch and patched", async () => {
+    let app;
+
+    class Panel extends Component {
+      static template = xml`<abc><t t-esc="props.val"/></abc>`;
+      mounted() {
+        app.render();
+      }
+      willUnmount() {
+        app.render();
+      }
+    }
+
+    // Main root component
+    class App extends Component {
+      static components = { Panel };
+      static template = xml`<div><Panel t-key="'panel_' + state.panel" val="state.panel"/></div>`;
+
+      state = useState({ panel: "Panel1" });
+    }
+
+    app = new App();
+    await app.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><abc>Panel1</abc></div>");
+    app.state.panel = "Panel2";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><abc>Panel2</abc></div>");
+  });
 });
 
 describe("widget and observable state", () => {
@@ -3138,6 +3258,46 @@ describe("t-model directive", () => {
     expect(env.qweb.templates[SomeComponent.template].fn.toString()).toMatchSnapshot();
   });
 
+  test("basic use, on an input with bracket expression", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div>
+          <input t-model="state['text']"/>
+          <span><t t-esc="state.text"/></span>
+        </div>`;
+      state = useState({ text: "" });
+    }
+    const comp = new SomeComponent();
+    await comp.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><input><span></span></div>");
+
+    const input = fixture.querySelector("input")!;
+    await editInput(input, "test");
+    expect(comp.state.text).toBe("test");
+    expect(fixture.innerHTML).toBe("<div><input><span>test</span></div>");
+    expect(env.qweb.templates[SomeComponent.template].fn.toString()).toMatchSnapshot();
+  });
+
+  test("throws if invalid expression", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div>
+          <input t-model="state"/>
+        </div>`;
+      state = useState({ text: "" });
+    }
+    const comp = new SomeComponent();
+    let error;
+    try {
+      await comp.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe(`Invalid t-model expression: "state" (it should be assignable)`);
+  });
+
   test("basic use, on another key in component", async () => {
     env.qweb.addTemplates(`
     <templates>
@@ -3427,6 +3587,28 @@ describe("t-model directive", () => {
     expect(env.qweb.templates[SomeComponent.template].fn.toString()).toMatchSnapshot();
   });
 
+  test("in a t-foreach, part 2", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div>
+          <t t-foreach="state" t-as="thing" t-key="thing_index" >
+            <input t-model="state[thing_index]"/>
+          </t>
+        </div>
+      `;
+      state = useState(["zuko", "iroh"]);
+    }
+    const comp = new SomeComponent();
+    await comp.mount(fixture);
+    expect(comp.state).toEqual(["zuko", "iroh"]);
+
+    const input = fixture.querySelectorAll("input")[1]!;
+    input.value = "uncle iroh";
+    input.dispatchEvent(new Event("input"));
+    expect(comp.state).toEqual(["zuko", "uncle iroh"]);
+    expect(env.qweb.templates[SomeComponent.template].fn.toString()).toMatchSnapshot();
+  });
+
   test("two inputs in a div with a t-key", async () => {
     class SomeComponent extends Component {
       static template = xml`
@@ -3825,7 +4007,9 @@ describe("t-call", () => {
 
     expect(fixture.innerHTML).toBe("<div><p>lucas</p></div>");
     fixture.querySelector("p")!.click();
-    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+    const subId = env.qweb.subTemplates["sub"];
+    const subFn = QWeb.subTemplates[subId] as any;
+    expect(subFn.toString()).toMatchSnapshot();
   });
 
   test("parent is set within t-call", async () => {
@@ -3847,7 +4031,10 @@ describe("t-call", () => {
 
     expect(fixture.innerHTML).toBe("<div><span>lucas</span></div>");
     expect(child.__owl__.parent).toBe(parent);
-    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+    const subId = env.qweb.subTemplates["sub"];
+    const subFn = QWeb.subTemplates[subId] as any;
+
+    expect(subFn.toString()).toMatchSnapshot();
   });
 
   test("t-call in t-foreach and children component", async () => {
@@ -3889,7 +4076,9 @@ describe("t-call", () => {
 
     expect(fixture.innerHTML).toBe("<span>lucas</span>");
     expect(child.__owl__.parent).toBe(parent);
-    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+    const subId = env.qweb.subTemplates["sub"];
+    const subFn = QWeb.subTemplates[subId] as any;
+    expect(subFn.toString()).toMatchSnapshot();
   });
 
   test("handlers with arguments are properly bound through a t-call", async () => {
@@ -3905,7 +4094,9 @@ describe("t-call", () => {
     }
     const parent = new Parent();
     await parent.mount(fixture);
-    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+    const subId = env.qweb.subTemplates["sub"];
+    const subFn = QWeb.subTemplates[subId] as any;
+    expect(subFn.toString()).toMatchSnapshot();
 
     fixture.querySelector("p")!.click();
   });

tests/component/props_validation.test.ts

@@ -786,6 +786,31 @@ describe("props validation", () => {
     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", () => {

tests/component/slots.test.ts

@@ -929,4 +929,160 @@ describe("t-slot directive", () => {
     expect(fixture.innerHTML).toBe("<div><span>dash</span></div>");
     expect(env.qweb.templates[Dialog.template].fn.toString()).toMatchSnapshot();
   });
+
+  test("slot and t-esc", async () => {
+    class Dialog extends Component {
+      static template = xml`<span><t t-slot="default"/></span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Dialog><t t-esc="'toph'"/></Dialog></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>toph</span></div>");
+  });
+
+  test("slot and (inline) t-esc", async () => {
+    class Dialog extends Component {
+      static template = xml`<span><t t-slot="default"/></span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Dialog t-esc="'toph'"/></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>toph</span></div>");
+  });
+
+  test("slot and t-call", async () => {
+    env.qweb.addTemplate("sokka", "<p>sokka</p>");
+    class Dialog extends Component {
+      static template = xml`<span><t t-slot="default"/></span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Dialog><t t-call="sokka"/></Dialog></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span><p>sokka</p></span></div>");
+  });
+
+  test("slot and (inline) t-call", async () => {
+    env.qweb.addTemplate("sokka", "<p>sokka</p>");
+    class Dialog extends Component {
+      static template = xml`<span><t t-slot="default"/></span>`;
+    }
+    class Parent extends Component {
+      static template = xml`<div><Dialog t-call="sokka"/></div>`;
+      static components = { Dialog };
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span><p>sokka</p></span></div>");
+  });
+
+  test("named slot inside slot", async () => {
+    class Child extends Component {
+      static template = xml`
+        <div>
+          <t t-slot="brol"/>
+          <t t-slot="default"/>
+        </div>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <Child>
+            <t t-set-slot="brol">
+              <p>A<t t-esc="value"/></p>
+            </t>
+            <Child>
+              <t t-set-slot="brol">
+                <p>B<t t-esc="value"/></p>
+              </t>
+            </Child>
+          </Child>
+        </div>`;
+      static components = { Child };
+      value = "blip";
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><div><p>Ablip</p><div><p>Bblip</p></div></div></div>");
+  });
+
+  test("named slots inside slot, again", async () => {
+    class Child extends Component {
+      static template = xml`
+        <child>
+          <t t-slot="brol1">default1</t>
+          <t t-slot="brol2">default2</t>
+          <t t-slot="default"/>
+        </child>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <Child>
+            <t t-set-slot="brol1">
+              <p>A<t t-esc="value"/></p>
+            </t>
+            <Child>
+              <t t-set-slot="brol2">
+                <p>B<t t-esc="value"/></p>
+              </t>
+            </Child>
+          </Child>
+        </div>`;
+      static components = { Child };
+      value = "blip";
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe(
+      "<div><child><p>Ablip</p>default2<child>default1<p>Bblip</p></child></child></div>"
+    );
+  });
+
+  test("named slot inside slot, part 3", async () => {
+    class Child extends Component {
+      static template = xml`
+        <div>
+          <t t-slot="brol"/>
+          <t t-slot="default"/>
+        </div>`;
+    }
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <Child>
+            <t t-set-slot="brol">
+              <p>A<t t-esc="value"/></p>
+            </t>
+            <Child>
+              <t>
+                <t t-set-slot="brol">
+                  <p>B<t t-esc="value"/></p>
+                </t>
+              </t>
+            </Child>
+          </Child>
+        </div>`;
+      static components = { Child };
+      value = "blip";
+    }
+    const parent = new Parent();
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><div><p>Ablip</p><div><p>Bblip</p></div></div></div>");
+  });
 });

tests/component/un_mounting.test.ts

@@ -509,4 +509,103 @@ describe("unmounting and remounting", () => {
     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/core/observer.test.ts

@@ -68,6 +68,23 @@ describe("observer", () => {
     expect(obj.date).not.toBe(date);
   });
 
+  test("properly handle promises (i.e.: treat them like primitive values", async () => {
+    const observer = new Observer();
+    let resolved = false;
+    const prom = new Promise((r) => r());
+    const obj: any = observer.observe({ prom });
+    expect(obj.prom).toBeInstanceOf(Promise);
+
+    obj.prom.then(() => (resolved = true));
+
+    expect(observer.revNumber(obj)).toBe(1);
+
+    expect(resolved).toBe(false);
+    await Promise.resolve();
+    expect(resolved).toBe(true);
+    expect(observer.revNumber(obj)).toBe(1);
+  });
+
   test("can change values in array", () => {
     const observer = new Observer();
     const obj: any = observer.observe({ arr: [1, 2] });

tests/helpers.ts

@@ -8,12 +8,6 @@ import "../src/qweb/extensions";
 import "../src/component/directive";
 import { browser } from "../src/browser";
 
-// modifies scheduler to make it faster to test components
-scheduler.requestAnimationFrame = function (callback: FrameRequestCallback) {
-  setTimeout(callback, 1);
-  return 1;
-};
-
 // Some static cleanup
 let nextSlotId;
 let slots;
@@ -43,9 +37,13 @@ export function nextMicroTick(): Promise<void> {
 }
 
 export async function nextTick(): Promise<void> {
-  return new Promise(function (resolve) {
-    setTimeout(() => scheduler.requestAnimationFrame(() => resolve()));
-  });
+  await new Promise((resolve) => setTimeout(resolve));
+  await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
+}
+
+export async function nextFrame(): Promise<void> {
+  await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
+  await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
 }
 
 export function makeTestFixture() {
@@ -134,7 +132,7 @@ export function renderToString(
 // is useful for animations tests, as we hook before repaints to trigger
 // animations (thanks to requestAnimationFrame). Patching nextFrame allows to
 // simulate calls to this hook. One must not forget to unpatch afterwards.
-let nextFrame = QWeb.utils.nextFrame;
+let _nextFrame = QWeb.utils.nextFrame;
 export function patchNextFrame(f: Function) {
   QWeb.utils.nextFrame = (cb: () => void) => {
     setTimeout(() => f(cb));
@@ -142,7 +140,7 @@ export function patchNextFrame(f: Function) {
 }
 
 export function unpatchNextFrame() {
-  QWeb.utils.nextFrame = nextFrame;
+  QWeb.utils.nextFrame = _nextFrame;
 }
 
 export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, value: string) {

tests/qweb/qweb.test.ts

@@ -238,6 +238,13 @@ describe("t-raw", () => {
       "<span><span>hello</span><ok>world</ok></span>"
     );
   });
+
+  test("t-raw with comment", () => {
+    qweb.addTemplate("test", `<span><t t-raw="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "<p>text<!-- top secret --></p>" })).toBe(
+      "<span><p>text<!-- top secret --></p></span>"
+    );
+  });
 });
 
 describe("t-set", () => {
@@ -747,7 +754,7 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("caller", '<div><t t-call="_basic-callee"/></div>');
     const expected = "<div><span>ok</span></div>";
     expect(renderToString(qweb, "caller")).toBe(expected);
-    expect(qweb.subTemplates["_basic-callee"].toString()).toMatchSnapshot();
+    expect(qweb.subTemplates["_basic-callee"]).toBeTruthy();
   });
 
   test("basic caller, no parent node", () => {
@@ -755,7 +762,7 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("caller", '<t t-call="_basic-callee"/>');
     const expected = "<div>ok</div>";
     expect(renderToString(qweb, "caller")).toBe(expected);
-    expect(qweb.subTemplates["_basic-callee"].toString()).toMatchSnapshot();
+    expect(qweb.subTemplates["_basic-callee"]).toBeTruthy();
   });
 
   test("t-call with t-if", () => {
@@ -763,13 +770,14 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("caller", '<div><t t-if="flag" t-call="sub"/></div>');
     const expected = "<div><span>ok</span></div>";
     expect(renderToString(qweb, "caller", { flag: true })).toBe(expected);
-    expect(qweb.subTemplates["sub"].toString()).toMatchSnapshot();
+    expect(qweb.subTemplates["sub"]).toBeTruthy();
   });
 
-  test("t-call not allowed on a non t node", () => {
-    qweb.addTemplate("_basic-callee", "<t>ok</t>");
+  test("t-call allowed on a non t node", () => {
+    qweb.addTemplate("_basic-callee", "<span>ok</span>");
     qweb.addTemplate("caller", '<div t-call="_basic-callee"/>');
-    expect(() => renderToString(qweb, "caller")).toThrow("Invalid tag");
+    const expected = "<div><span>ok</span></div>";
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("with unused body", () => {
@@ -898,7 +906,8 @@ describe("t-call (template calling", () => {
     `);
     const expected = "<div><span>hey</span></div>";
     expect(renderToString(qweb, "recursive")).toBe(expected);
-    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
+    const subId = qweb.subTemplates["recursive"];
+    const recursiveFn = QWeb.subTemplates[subId] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -926,7 +935,8 @@ describe("t-call (template calling", () => {
     expect(renderToString(qweb, "Parent", { root }, { fiber: { vars: {}, scope: {} } })).toBe(
       expected
     );
-    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
+    const subId = qweb.subTemplates["nodeTemplate"];
+    const recursiveFn = QWeb.subTemplates[subId] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -953,7 +963,8 @@ describe("t-call (template calling", () => {
     const expected =
       "<div><div><p>a</p><div><p>b</p><div><p>d</p></div></div><div><p>c</p></div></div></div>";
     expect(renderToString(qweb, "Parent", { root }, { fiber: {} })).toBe(expected);
-    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
+    const subId = qweb.subTemplates["nodeTemplate"];
+    const recursiveFn = QWeb.subTemplates[subId] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -985,7 +996,8 @@ describe("t-call (template calling", () => {
     const expected =
       "<div><div><p>a 2</p><div><p>b 3</p><div><p>c 4</p><div><p>d 5</p></div></div></div></div></div>";
     expect(renderToString(qweb, "Parent", { root })).toBe(expected);
-    const recursiveFn = Object.values(qweb.subTemplates)[0] as any;
+    const subId = qweb.subTemplates["nodeTemplate"];
+    const recursiveFn = QWeb.subTemplates[subId] as any;
     expect(recursiveFn.toString()).toMatchSnapshot();
   });
 
@@ -1057,6 +1069,52 @@ describe("t-call (template calling", () => {
     const context = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
     expect(trim(renderToString(qweb, "wrapper", context))).toBe(expected);
   });
+
+  test("two different QWeb instances, and shared templates", () => {
+    QWeb.registerTemplate("sub", `<span>ok</span>`);
+    QWeb.registerTemplate("main", `<div><t t-call="sub"/></div>`);
+
+    const qweb1 = new QWeb();
+    const qweb2 = new QWeb();
+
+    expect(renderToString(qweb1, "main")).toBe("<div><span>ok</span></div>");
+    expect(renderToString(qweb2, "main")).toBe("<div><span>ok</span></div>");
+  });
+
+  test("t-call with t-set inside and body text content", () => {
+    qweb.addTemplate("sub", `<p><t t-esc="val"/></p>`);
+    qweb.addTemplate(
+      "main",
+      `
+      <div>
+        <t t-call="sub">
+          <t t-set="val">yip yip</t>
+        </t>
+      </div>`
+    );
+    const expected = "<div><p>yip yip</p></div>";
+    expect(renderToString(qweb, "main")).toBe(expected);
+  });
+
+  test("t-call with body content as root of a template", () => {
+    qweb.addTemplate("antony", `<foo><t t-raw="0"/></foo>`);
+    qweb.addTemplate("main", `<t><t t-call="antony"><p>antony</p></t></t>`);
+    const expected = "<foo><p>antony</p></foo>";
+    expect(renderToString(qweb, "main")).toBe(expected);
+  });
+
+  test("dynamic t-call", () => {
+    qweb.addTemplate("foo", `<foo><t t-esc="val"/></foo>`);
+    qweb.addTemplate("bar", `<bar><t t-esc="val"/></bar>`);
+    qweb.addTemplate("main", `<div><t t-call="{{template}}"/></div>`);
+    const expected = "<div><foo>foo</foo></div>";
+    expect(renderToString(qweb, "main", { template: "foo", val: "foo" })).toBe(expected);
+    const expected2 = "<div><bar>quux</bar></div>";
+    expect(renderToString(qweb, "main", { template: "bar", val: "quux" })).toBe(expected2);
+    // duplicate call because there was a specific bug with some id that was
+    // incremented each rendering.
+    expect(renderToString(qweb, "main", { template: "bar", val: "quux" })).toBe(expected2);
+  });
 });
 
 describe("foreach", () => {
@@ -1147,6 +1205,63 @@ describe("foreach", () => {
     );
   });
 
+  test("t-call without body in t-foreach in t-foreach", () => {
+    qweb.addTemplate(
+      "test_called",
+      `<t>
+        <t t-set="c" t-value="'x' + '_' + a + '_'+ b" />
+        [<t t-esc="a" />]
+        [<t t-esc="b" />]
+        [<t t-esc="c" />]
+       </t>`
+    );
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-foreach="numbers" t-as="a">
+          <t t-foreach="letters" t-as="b">
+            <t t-call="test_called" />
+          </t>
+          <span t-esc="c"/>
+        </t>
+        <span>[<t t-esc="a" />][<t t-esc="b" />][<t t-esc="c" />]</span>
+      </div>`
+    );
+    const context = { numbers: [1, 2, 3], letters: ["a", "b"] };
+    expect(renderToString(qweb, "test", context)).toBe(
+      "<div> [1] [a] [x_1_a]  [1] [b] [x_1_b] <span></span> [2] [a] [x_2_a]  [2] [b] [x_2_b] <span></span> [3] [a] [x_3_a]  [3] [b] [x_3_b] <span></span><span>[][][]</span></div>"
+    );
+  });
+
+  test("t-call with body in t-foreach in t-foreach", () => {
+    qweb.addTemplate(
+      "test_called",
+      `<t>
+        [<t t-esc="a" />]
+        [<t t-esc="b" />]
+        [<t t-esc="c" />]
+       </t>`
+    );
+    qweb.addTemplate(
+      "test",
+      `<div>
+        <t t-foreach="numbers" t-as="a">
+          <t t-foreach="letters" t-as="b">
+            <t t-call="test_called" >
+              <t t-set="c" t-value="'x' + '_' + a + '_'+ b" />
+            </t>
+          </t>
+          <span t-esc="c"/>
+        </t>
+        <span>[<t t-esc="a" />][<t t-esc="b" />][<t t-esc="c" />]</span>
+      </div>`
+    );
+    const context = { numbers: [1, 2, 3], letters: ["a", "b"] };
+    expect(renderToString(qweb, "test", context)).toBe(
+      "<div> [1] [a] [x_1_a]  [1] [b] [x_1_b] <span></span> [2] [a] [x_2_a]  [2] [b] [x_2_b] <span></span> [3] [a] [x_3_a]  [3] [b] [x_3_b] <span></span><span>[][][]</span></div>"
+    );
+  });
+
   test("throws error if invalid loop expression", () => {
     qweb.addTemplate(
       "test",
@@ -1762,7 +1877,7 @@ describe("loading templates", () => {
   });
 });
 
-describe("special cases for some boolean html attributes/properties", () => {
+describe("special cases for some specific html attributes/properties", () => {
   test("input type= checkbox, with t-att-checked", () => {
     qweb.addTemplate("test", `<input type="checkbox" t-att-checked="flag"/>`);
     const result = renderToString(qweb, "test", { flag: true });
@@ -1789,6 +1904,33 @@ describe("special cases for some boolean html attributes/properties", () => {
     );
     renderToString(qweb, "test", { flag: true });
   });
+
+  test("input with t-att-value", () => {
+    // render input with initial value
+    qweb.addTemplate("test", `<input  t-att-value="v"/>`);
+    const vnode1 = qweb.render("test", { v: "zucchini" });
+    const vnode2 = patch(document.createElement("input"), vnode1);
+    let elm = vnode2.elm as HTMLInputElement;
+    expect(elm.value).toBe("zucchini");
+
+    // change value manually in input, to simulate user input
+    elm.value = "tomato";
+    expect(elm.value).toBe("tomato");
+
+    // rerender with a different value, and patch actual dom, to check that
+    // input value was properly reset by owl
+    const vnode3 = qweb.render("test", { v: "potato" });
+    patch(vnode2, vnode3);
+    expect(elm.value).toBe("potato");
+  });
+
+  test("input of type checkbox with t-att-indeterminate", () => {
+    qweb.addTemplate("test", `<input type="checkbox" t-att-indeterminate="v"/>`);
+    const vnode1 = qweb.render("test", { v: true });
+    const vnode2 = patch(document.createElement("input"), vnode1);
+    let elm = vnode2.elm as HTMLInputElement;
+    expect(elm.indeterminate).toBe(true);
+  });
 });
 
 describe("whitespace handling", () => {

tests/router/__snapshots__/link.test.ts.snap

@@ -7,16 +7,16 @@ exports[`Link component can render simple cases 1`] = `
     let utils = this.constructor.utils;
     let scope = Object.create(context);
     let h = this.h;
-    let _4 = utils.toObj({'router-link-active':scope['isActive']});
-    let _5 = scope['href'];
-    let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}};
-    let vn6 = h('a', p6, c6);
-    extra.handlers['click__7__'] = extra.handlers['click__7__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['navigate'](e);};
-    p6.on['click'] = extra.handlers['click__7__'];
-    const slot8 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
-    if (slot8) {
-        slot8.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c6, parent: extra.parent || context}));
+    let _5 = utils.toObj({'router-link-active':scope['isActive']});
+    let _6 = scope['href'];
+    let c7 = [], p7 = {key:7,attrs:{href: _6},class:_5,on:{}};
+    let vn7 = h('a', p7, c7);
+    extra.handlers['click__8__'] = extra.handlers['click__8__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['navigate'](e);};
+    p7.on['click'] = extra.handlers['click__8__'];
+    const slot9 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot9) {
+        slot9.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c7, parent: extra.parent || context}));
     }
-    return vn6;
+    return vn7;
 }"
 `;

tests/vdom.test.ts

@@ -1105,4 +1105,11 @@ describe("html to vdom", function () {
     elm = patch(vnode0, nodeList[0]).elm;
     expect(elm.outerHTML).toEqual(`<span a="1" b="2">abc<div>1</div></span>`);
   });
+
+  test("svg", function () {
+    const nodeList = htmlToVDOM(`<svg></svg>`);
+    expect(nodeList).toHaveLength(1);
+    elm = patch(vnode0, nodeList[0]).elm;
+    expect(elm).toBeInstanceOf(SVGSVGElement);
+  });
 });

tools/release.js

@@ -3,10 +3,9 @@ const readline = require("readline");
 const fs = require("fs");
 const exec = require("child_process").exec;
 const chalk = require("chalk");
-const GitHub = require("github-api");
 
 const REL_NOTES_FILE = `release-notes.md`;
-const STEPS = 10;
+const STEPS = 8;
 
 const rl = readline.createInterface({
   input: process.stdin,
@@ -28,7 +27,8 @@ async function startRelease() {
   // ---------------------------------------------------------------------------
   log(`Step 1/${STEPS}: collecting info...`);
   const current = package.version;
-  const next = await ask("Next version: ");
+  let next = await ask("Next version: ");
+  if (next[0] === 'v') next = next.substring(1);
   let file = await ask(`Release notes (${REL_NOTES_FILE}): `);
   file = file || REL_NOTES_FILE;
   let content;
@@ -39,11 +39,12 @@ async function startRelease() {
     log("Cannot find release notes... Aborting");
     return;
   }
-
-  // Todo: add playground update feature
-  // let shouldUpdateStr = await ask("Update Playground? (y/n)");
-  // const shouldUpdatePlayground = shouldUpdateStr === "y";
-  const token = await ask("Github token: ");
+  let shouldBeDraft = await ask(`Should be a draft [y/n] ? (n)`);
+  let draft = ""
+  if (shouldBeDraft.toLowerCase() === 'y')
+  {
+    draft = "--draft";
+  }
 
   // ---------------------------------------------------------------------------
   log(`Step 2/${STEPS}: running tests...`);
@@ -52,14 +53,12 @@ async function startRelease() {
     log("Test suite does not pass. Aborting.");
     return;
   }
-  await ask("Ready for next step...");
 
   // ---------------------------------------------------------------------------
   log(`Step 3/${STEPS}: updating package.json, readme.md and roadmap.md...`);
   await replaceInFile("./package.json", current, next);
   await replaceInFile("./README.md", current, next);
   await replaceInFile("./roadmap.md", current, next);
-  await ask("Ready for next step...");
 
   // ---------------------------------------------------------------------------
   log(`Step 4/${STEPS}: creating git commit...`);
@@ -68,61 +67,40 @@ async function startRelease() {
     log("Git commit failed. Aborting.");
     return;
   }
-  await ask("Ready for next step...");
 
-  // -------------------j--------------------------------------------------------
-  log(`Step 5/${STEPS}: building owl (iife version)...`);
+  // ----------------------------------------------------------------------------
+  log(`Step 5/${STEPS}: building owl...`);
+  await execCommand("npm run prettier");
   const buildResult = await execCommand("npm run build");
   if (buildResult !== 0) {
     log("Build failed. Aborting.");
     return;
   }
-  await ask("Ready for next step...");
 
   // ---------------------------------------------------------------------------
-  log(`Step 6/${STEPS}: minifying owl...`);
-  const minifyResult = await execCommand("npm run minify");
-  if (minifyResult !== 0) {
-    log("Minify failed. Aborting.");
-    return;
-  }
-  await ask("Ready for next step...");
-
-  // ---------------------------------------------------------------------------
-  log(`Step 7/${STEPS}: pushing on github...`);
+  log(`Step 6/${STEPS}: pushing on github...`);
   const pushResult = await execCommand("git push");
   if (pushResult !== 0) {
     log("git push failed. Aborting.");
     return;
   }
-  await ask("Ready for next step...");
 
   // ---------------------------------------------------------------------------
-  log(`Step 8/${STEPS}: publishing release notes on github...`);
-  const options = {
-    tag_name: `v${next}`,
-    name: `v${next}`,
-    body: content,
-    draft: true // todo: remove this someday
-  };
-  const result = await createRelease(token, options);
-  await ask("Ready for next step...");
 
-  // ---------------------------------------------------------------------------
-  log(`Step 9/${STEPS}: adding assets to release...`);
-  await ask("Please add owl.js and owl.min.js to draft release, then confirm");
-  // todo: do this with curl
-  // curl \
-  //   -H "Authorization: token $GITHUB_TOKEN" \
-  //   -H "Content-Type: $(file -b --mime-type $FILE)" \
-  //   --data-binary @$FILE \
-  //   "https://uploads.github.com/repos/hubot/singularity/releases/123/assets?name=$(basename $FILE)"
+  log(`Step 7/${STEPS}: Creating the release...`);
+  const relaseResult = await execCommand(`gh release create v${next} dist/*.js ${draft} -F release-notes.md`);
+  if (relaseResult !== 0) {
+    log("github release failed. Aborting.");
+    return;
+  }
 
-  // ---------------------------------------------------------------------------
-  log(`Step 10/${STEPS}: publishing module on npm...`);
+  log(`Step 8/${STEPS}: publishing module on npm...`);
   await execCommand("npm run publish");
-
+  
   log("Owl Release process completed! Thank you for your patience");
+  await execCommand(`gh release view`);
+  await execCommand(`gh release view -w`);
+
 }
 
 // -----------------------------------------------------------------------------
@@ -199,16 +177,3 @@ async function replaceInFile(file, from, to) {
     });
   });
 }
-
-function createRelease(token, options) {
-  return new Promise((resolve, reject) => {
-    var gh = new GitHub({ token });
-    gh.getRepo("odoo", "owl").createRelease(options, (err, result, req) => {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(result);
-      }
-    });
-  });
-}

tools/server.py

@@ -14,9 +14,9 @@ URL = 'http://{0}:{1}/tools'.format(HOST, PORT)
 # With this, we can simply copy the playground folder as is in the gh-page when
 # we want to update the playground.
 class OWLHandler(SimpleHTTPRequestHandler):
-    def do_GET(self):
+    def do_GET(self): 
         if self.path == '/tools/owl.js':
-            self.path = '/dist/owl.js'
+            self.path = '/dist/owl.iife.js'
         return SimpleHTTPRequestHandler.do_GET(self)
 
     def end_headers(self):

tsconfig.json

@@ -1,20 +1,107 @@
 {
+  /**
+   ** Commented-out options have their default values.
+   **/
+  "include": [
+    "src/**/*.ts",
+    "src/*.ts"
+  ],
+                                                                // "exclude": [],
+  // "files": [],                                               // A list of relative or absolute file paths to include.
+  // "extends": "",                                             // A string containing a path to another configuration file to inherit from.
+  // "references": [],                                          // An array of objects `{"path": "./to/dirOrConfig"}` that specifies projects to reference.
+  // "compileOnSave": false,                                    // Signals to the IDE to generate all files for a given tsconfig.json upon saving.
   "compilerOptions": {
-    "module": "commonjs",
-    "preserveConstEnums": true,
-    "noImplicitThis": true,
-    "removeComments": false,
-    "declaration": true,
-    "target": "esnext",
-    "outDir": "dist",
-    "alwaysStrict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": false,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "strictPropertyInitialization": true,
-    "strictNullChecks": true,
-    "declarationDir": "dist/types"
-  },
-  "include": ["src/**/*.ts","src/*.ts"]
+                                                                // Main options
+    "target": "esnext",                                         // Specify ECMAScript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'.
+    "module": "esnext",                                         // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
+    // "lib": ["esnext", "dom"],                                // Specify library files to be included in the compilation.
+    // "allowJs": false,                                        // Allow javascript files to be compiled.
+    // "checkJs": false,                                        // Report errors in .js files.
+    // "outFile": "./",                                         // Concatenate and emit output to single file.
+    "outDir": "dist",                                           // Redirect output structure to the directory.
+    // "rootDir": "./",                                         // Specify the root directory of input files. Use to control the output directory structure with `--outDir`.
+    // "project": "",                                           // Compile a project given a valid configuration file.
+                                                                // Compilation options
+    // "composite": true,                                       // Enable project compilation
+    // "diagnostics": false,                                    // Show diagnostic information.
+    // "incremental": true,                                     // Enable incremental compilation by reading/writing information from prior compilations to a file on disk.
+    // "isolatedModules": false,                                // Transpile each file as a separate module (similar to 'ts.transpileModule').
+    // "listEmittedFiles": false,                               // Print names of generated files part of the compilation.
+    // "listFiles": true,                                       // Print names of files part of the compilation.
+    // "noErrorTruncation": false,                              // Do not truncate error messages.
+    // "preserveWatchOutput": false,                            // Keep outdated console output in watch mode instead of clearing the screen.
+    // "traceResolution": false,                                // Enable tracing of the name resolution process.
+    // "tsBuildInfoFile": ".tsbuildinfo",                       // Specify file to store incremental compilation information.
+                                                                // Strict typechecking options
+    // "strict": false,                                         // Enable all strict type-checking options.
+    // "noImplicitAny": true,                                   // Raise error on expressions and declarations with an implied 'any' type.
+    // "noImplicitThis": true,                                  // Raise error on 'this' expressions with an implied 'any' type.
+    // "strictBindCallApply": true,                             // Enable stricter checking of of the `bind`, `call`, and `apply` methods on functions.
+    // "strictFunctionTypes": true,                             // Disable bivariant parameter checking for function types.
+    // "strictNullChecks": true,                                // In strict null checking mode, the null and undefined values are not in the domain of every type and are only assignable to themselves and any.
+    // "strictPropertyInitialization": true,                    // Ensure non-undefined class properties are initialized in the constructor. This option requires `--strictNullChecks` be enabled in order to take effect.
+    // "alwaysStrict": true,                                    // Parse in strict mode and emit "use strict" for each source file.
+                                                                // Additional checks
+    // "allowUnreachableCode": false,                           // Do not report errors on unreachable code.
+    // "allowUnusedLabels": false,                              // Do not report errors on unused labels.
+    "forceConsistentCasingInFileNames": true,                   // Disallow inconsistently-cased references to the same file.
+    // "noStrictGenericChecks": false,                          // Disable strict checking of generic signatures in function types.
+    "noUnusedLocals": true,                                     // Report errors on unused locals.
+    "noUnusedParameters": false,                                // Report errors on unused parameters.
+    "noImplicitReturns": true,                                  // Report error when not all code paths in function return a value.
+    "noFallthroughCasesInSwitch": true,                         // Report errors for fallthrough cases in switch statement.
+    // "skipLibCheck": false,                                   // Skip type checking of all declaration files (*.d.ts).
+    // "suppressExcessPropertyErrors": false,                   // Suppress excess property checks for object literals.
+    // "suppressImplicitAnyIndexErrors": false,                 // Suppress noImplicitAny errors for indexing objects lacking index signatures.
+                                                                // Module resolution options
+    "moduleResolution": "node",                                 // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
+    // "baseUrl": "./",                                         // Base directory to resolve non-absolute module names.
+    // "paths": {},                                             // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
+    // "rootDirs": [],                                          // List of root folders whose combined content represents the structure of the project at runtime.
+    // "typeRoots": [],                                         // List of folders to include type definitions from.
+    "types": [
+      "jest",
+      "node"
+    ],                                                // Type declaration files to be included in compilation.
+    // "allowSyntheticDefaultImports": false                    // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
+    "esModuleInterop": true,                                    // Emit '__importStar' and '__importDefault' helpers for runtime babel ecosystem compatibility and enable '--allowSyntheticDefaultImports' for typesystem compatibility.
+    // "maxNodeModuleJsDepth": 0,                               // The maximum dependency depth to search under node_modules and load JavaScript files. Only applicable with --allowJs.
+    // "preserveSymlinks": false,                               // Do not resolve the real path of symlinks.
+    "resolveJsonModule": true,                                  // Include modules imported with '.json' extension.
+                                                                // Emit options
+    "declaration": true,                                        // Generates corresponding '.d.ts' file.
+    "declarationDir": "dist/types",                             // Output directory for generated declaration files.
+    // "declarationMap": false,                                 // Generates a sourcemap for each corresponding '.d.ts' file.
+    // "emitBOM": false,                                        // Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.
+    // "emitDeclarationOnly": false,                            // Only emit ‘.d.ts’ declaration files.
+    // "importHelpers": false,                                  // Import emit helpers from 'tslib'.
+    // "newLine": "LF",                                         // Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix).”
+    // "noEmit": true,                                          // Do not emit outputs.
+    // "noEmitHelpers": false,                                  // Do not generate custom helper functions like __extends in compiled output.
+    // "noEmitOnError": false,                                  // Do not emit outputs if any errors were reported.
+    // "noImplicitUseStrict": false,                            // Do not emit "use strict" directives in module output.
+    // "noResolve": false,                                      // Do not add triple-slash references or module import targets to the list of compiled files.
+    "preserveConstEnums": true,                                 // Do not erase const enum declarations in generated code.
+    // "removeComments": false,                                 // Remove all comments except copy-right header comments beginning with 
+    // "experimentalDecorators": true,                          // Enables experimental support for ES7 decorators.
+    // "emitDecoratorMetadata": true,                           // Enables experimental support for emitting type metadata for decorators.
+                                                                // Source map options
+    // "sourceMap": false,                                      // Generates corresponding '.map' file.
+    // "sourceRoot": "",                                        // Specify the location where debugger should locate TypeScript files instead of source locations.
+    // "mapRoot": "",                                           // Specify the location where debugger should locate map files instead of generated locations.
+    // "inlineSourceMap": true,                                 // Emit a single file with source maps instead of having a separate file.
+    // "inlineSources": true,                                   // Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set.
+                                                                // JSX options
+    // "jsx": "preserve",                                       // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
+    // "jsxFactory": "React.createElement",                     // Specify the JSX factory function to use when targeting react JSX emit, e.g. 'React.createElement' or 'h'.
+                                                                // Other options
+    // "allowUmdGlobalAccess": true,                            // Allow accessing UMD globals from modules.
+    // "charset": "utf8",                                       // The character set of the input files.
+    // "downlevelIteration": false,                             // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
+    // "disableSizeLimit": false,                               // Disable size limitation on JavaScript project.
+    // "keyofStringsOnly": false,                               // Resolve 'keyof' to string valued property names only (no numbers or symbols).
+    // "noLib": false,                                          // Do not include the default library file (lib.d.ts).
+    // "pretty": true,                                          // Stylize errors and messages using color and context.
+  }
 }