wip

README.md

@@ -104,8 +104,8 @@ Submit a PR!
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.0.0-beta4.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta4/owl.js)
-- [owl-1.0.0-beta4.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta4/owl.min.js)
+- [owl-1.0.0-beta2.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta2/owl.js)
+- [owl-1.0.0-beta2.min.js](https://github.com/odoo/owl/releases/download/v1.0.0-beta2/owl.min.js)
 
 Some npm scripts are available:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owl-framework",
-  "version": "1.0.0-beta4",
+  "version": "1.0.0-beta2",
   "description": "Odoo Web Library (OWL)",
   "main": "src/index.ts",
   "engines": {

roadmap.md

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

src/core/observer.ts

@@ -29,6 +29,14 @@ export class Observer {
       // fun fact: typeof null === 'object'
       return value;
     }
+    if (
+      value instanceof Map ||
+      value instanceof WeakMap ||
+      value instanceof Set ||
+      value instanceof WeakSet
+    ) {
+      return value;
+    }
     let metadata = this.weakMap.get(value) || this._observe(value, parent);
     return metadata.proxy;
   }

src/qweb/base_directives.ts

@@ -1,7 +1,6 @@
 import { CompilationContext } from "./compilation_context";
 import { QWeb } from "./qweb";
 import { htmlToVDOM } from "../vdom/html_to_vdom";
-import { QWebVar } from "./expression_parser";
 
 /**
  * Owl QWeb Directives
@@ -40,11 +39,11 @@ function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: Compilatio
   let exprID: string;
   if (typeof value === "string") {
     exprID = `_${ctx.generateID()}`;
-    ctx.addLine(`let ${exprID} = ${ctx.formatExpression(value)};`);
+    ctx.addLine(`var ${exprID} = ${ctx.formatExpression(value)};`);
   } else {
     exprID = `scope.${value.id}`;
   }
-  ctx.addIf(`${exprID} != null`);
+  ctx.addIf(`${exprID} || ${exprID} === 0`);
 
   if (ctx.escaping) {
     let protectID;
@@ -62,7 +61,7 @@ function compileValueNode(value: any, node: Element, qweb: QWeb, ctx: Compilatio
       let nodeID = ctx.generateID();
       ctx.rootContext.rootNode = nodeID;
       ctx.rootContext.parentTextNode = nodeID;
-      ctx.addLine(`let vn${nodeID} = {text: ${exprID}};`);
+      ctx.addLine(`var vn${nodeID} = {text: ${exprID}};`);
       if (ctx.rootContext.shouldDefineResult) {
         ctx.addLine(`result = vn${nodeID}`);
       }
@@ -120,7 +119,7 @@ QWeb.addDirective({
     ctx.rootContext.shouldDefineScope = true;
     const variable = node.getAttribute("t-set")!;
     let value = node.getAttribute("t-value")!;
-    ctx.variables[variable] = ctx.variables[variable] || ({} as QWebVar);
+    ctx.variables[variable] = ctx.variables[variable] || {};
     let qwebvar = ctx.variables[variable];
     const hasBody = node.hasChildNodes();
 
@@ -141,7 +140,7 @@ QWeb.addDirective({
       const _parentNode = ctx.parentNode;
       ctx.parentNode = tempParentNodeID;
 
-      ctx.addLine(`let c${tempParentNodeID} = new utils.VDomArray();`);
+      ctx.addLine(`const c${tempParentNodeID} = new utils.VDomArray();`);
       const nodeCopy = node.cloneNode(true) as Element;
       for (let attr of ["t-set", "t-value", "t-if", "t-else", "t-elif"]) {
         nodeCopy.removeAttribute(attr);
@@ -216,7 +215,6 @@ QWeb.addDirective({
     // Step 1: sanity checks
     // ------------------------------------------------
     ctx.rootContext.shouldDefineScope = true;
-    ctx.rootContext.shouldDefineUtils = true;
     if (node.nodeName !== "t") {
       throw new Error("Invalid tag for t-call directive (should be 't')");
     }
@@ -230,7 +228,7 @@ QWeb.addDirective({
     // ------------------------------------------------
     if (!qweb.subTemplates[subTemplate]) {
       qweb.subTemplates[subTemplate] = true;
-      const subTemplateFn = qweb._compile(subTemplate, nodeTemplate.elem, ctx, true);
+      const subTemplateFn = qweb._compile(subTemplate, nodeTemplate.elem, ctx);
       qweb.subTemplates[subTemplate] = subTemplateFn;
     }
 
@@ -264,17 +262,17 @@ QWeb.addDirective({
     // 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 keyCode = ctx.loopNumber || ctx.hasKey0 ? `, key: ${ctx.generateTemplateKey()}` : "";
-    const parentNode = ctx.parentNode ? `c${ctx.parentNode}` : "result";
-    const extra = `Object.assign({}, extra, {parentNode: ${parentNode}, parent: ${parentComponent}${keyCode}})`;
     if (ctx.parentNode) {
-      ctx.addLine(`this.subTemplates['${subTemplate}'].call(this, ${callingScope}, ${extra});`);
+      ctx.addLine(
+        `this.subTemplates['${subTemplate}'].call(this, ${callingScope}, Object.assign({}, extra, {parentNode: c${ctx.parentNode}}));`
+      );
     } 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.subTemplates['${subTemplate}'].call(this, ${callingScope}, Object.assign({}, extra, {parentNode: result}));`
+      );
       ctx.addLine(`result = result[0]`);
     }
 
@@ -303,16 +301,16 @@ QWeb.addDirective({
     const elems = node.getAttribute("t-foreach")!;
     const name = node.getAttribute("t-as")!;
     let arrayID = ctx.generateID();
-    ctx.addLine(`let _${arrayID} = ${ctx.formatExpression(elems)};`);
+    ctx.addLine(`var _${arrayID} = ${ctx.formatExpression(elems)};`);
     ctx.addLine(`if (!_${arrayID}) { throw new Error('QWeb error: Invalid loop expression')}`);
     let keysID = ctx.generateID();
     let valuesID = ctx.generateID();
-    ctx.addLine(`let _${keysID} = _${valuesID} = _${arrayID};`);
+    ctx.addLine(`var _${keysID} = _${valuesID} = _${arrayID};`);
     ctx.addIf(`!(_${arrayID} instanceof Array)`);
     ctx.addLine(`_${keysID} = Object.keys(_${arrayID});`);
     ctx.addLine(`_${valuesID} = Object.values(_${arrayID});`);
     ctx.closeIf();
-    ctx.addLine(`let _length${keysID} = _${keysID}.length;`);
+    ctx.addLine(`var _length${keysID} = _${keysID}.length;`);
     let varsID = ctx.startProtectScope();
     const loopVar = `i${ctx.loopNumber}`;
     ctx.addLine(`for (let ${loopVar} = 0; ${loopVar} < _length${keysID}; ${loopVar}++) {`);
@@ -334,13 +332,6 @@ QWeb.addDirective({
         `Directive t-foreach should always be used with a t-key! (in template: '${ctx.templateName}')`
       );
     }
-    if (nodeCopy.hasAttribute("t-key")) {
-      const expr = ctx.formatExpression(nodeCopy.getAttribute("t-key")!);
-      ctx.addLine(`let key${ctx.loopNumber} = ${expr};`);
-      nodeCopy.removeAttribute("t-key");
-    } else {
-      ctx.addLine(`let key${ctx.loopNumber} = i${ctx.loopNumber};`);
-    }
 
     nodeCopy.removeAttribute("t-foreach");
     qweb._compileNode(nodeCopy, ctx);

src/qweb/compilation_context.ts

@@ -26,13 +26,12 @@ export class CompilationContext {
   templateName: string;
   allowMultipleRoots: boolean = false;
   hasParentWidget: boolean = false;
-  hasKey0: boolean = false;
-  keyStack: boolean[] = [];
+  currentKey: string = "";
 
   constructor(name?: string) {
     this.rootContext = this;
     this.templateName = name || "noname";
-    this.addLine("let h = this.h;");
+    this.addLine("var h = this.h;");
   }
 
   generateID(): number {
@@ -49,15 +48,20 @@ export class CompilationContext {
    */
   generateTemplateKey(prefix: string = ""): string {
     const id = this.generateID();
-    if (this.loopNumber === 0 && !this.hasKey0) {
+    if (this.loopNumber === 0 && !this.currentKey) {
       return `'${prefix}__${id}__'`;
     }
-    let key = `\`${prefix}__${id}__`;
-    let start = this.hasKey0 ? 0 : 1;
-    for (let i = start; i < this.loopNumber + 1; i++) {
-      key += `\${key${i}}__`;
+    let locationExpr = `\`${prefix}__${id}__`;
+    for (let i = 0; i < this.loopNumber - 1; i++) {
+      locationExpr += `\${i${i + 1}}__`;
+    }
+    if (this.currentKey) {
+      const k = this.currentKey;
+      this.addLine(`let k${id} = ${locationExpr}\` + ${k};`);
+    } else {
+      locationExpr += this.loopNumber ? `\${i${this.loopNumber}}__\`` : "`";
+      this.addLine(`let k${id} = ${locationExpr};`);
     }
-    this.addLine(`let k${id} = ${key}\`;`);
     return `k${id}`;
   }
 
@@ -112,11 +116,11 @@ export class CompilationContext {
   }
 
   indent() {
-    this.rootContext.indentLevel++;
+    this.indentLevel++;
   }
 
   dedent() {
-    this.rootContext.indentLevel--;
+    this.indentLevel--;
   }
 
   addLine(line: string): number {
@@ -176,7 +180,7 @@ export class CompilationContext {
   startProtectScope(): number {
     const protectID = this.generateID();
     this.rootContext.shouldDefineScope = true;
-    this.addLine(`let _origScope${protectID} = scope;`);
+    this.addLine(`const _origScope${protectID} = scope;`);
     this.addLine(`scope = Object.assign(Object.create(context), scope);`);
     return protectID;
   }

src/qweb/expression_parser.ts

@@ -81,7 +81,7 @@ const STATIC_TOKEN_MAP: { [key: string]: TKind } = {
 
 // note that the space after typeof is relevant. It makes sure that the formatted
 // expression has a space after typeof
-const OPERATORS = "...,.,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;".split(",");
+const OPERATORS = ".,===,==,+,!==,!=,!,||,&&,>=,>,<=,<,?,-,*,/,%,typeof ,=>,=,;".split(",");
 
 type Tokenizer = (expr: string) => Token | false;
 

src/qweb/extensions.ts

@@ -303,20 +303,9 @@ QWeb.addDirective({
 QWeb.addDirective({
   name: "key",
   priority: 45,
-  atNodeEncounter({ ctx, value, node }) {
-    if (ctx.loopNumber === 0) {
-      ctx.keyStack.push(ctx.rootContext.hasKey0);
-      ctx.rootContext.hasKey0 = true;
-    }
-    ctx.addLine("{");
-    ctx.indent();
-    ctx.addLine(`let key${ctx.loopNumber} = ${ctx.formatExpression(value)};`);
-  },
-  finalize({ ctx }) {
-    ctx.dedent();
-    ctx.addLine("}");
-    if (ctx.loopNumber === 0) {
-      ctx.rootContext.hasKey0 = ctx.keyStack.pop() as boolean;
-    }
+  atNodeEncounter({ ctx, value }) {
+    let id = ctx.generateID();
+    ctx.addLine(`const nodeKey${id} = ${ctx.formatExpression(value)};`);
+    ctx.currentKey = `nodeKey${id}`;
   }
 });

src/qweb/qweb.ts

@@ -119,7 +119,7 @@ const UTILS: Utils = {
           return vnode.text;
         }
       })
-      .join("");
+      .join();
   },
   getComponent(obj) {
     while (obj && !obj.hasOwnProperty("__owl__")) {
@@ -383,12 +383,7 @@ export class QWeb extends EventBus {
     });
   }
 
-  _compile(
-    name: string,
-    elem: Element,
-    parentContext?: CompilationContext,
-    defineKey?: boolean
-  ): CompiledTemplate {
+  _compile(name: string, elem: Element, parentContext?: CompilationContext): CompiledTemplate {
     const isDebug = elem.attributes.hasOwnProperty("t-debug");
     const ctx = new CompilationContext(name);
     if (elem.tagName !== "t") {
@@ -401,10 +396,6 @@ export class QWeb extends EventBus {
       ctx.hasParentWidget = true;
       ctx.shouldDefineResult = false;
       ctx.addLine(`let c${ctx.parentNode} = extra.parentNode;`);
-      if (defineKey) {
-        ctx.addLine(`let key0 = extra.key || "";`);
-        ctx.hasKey0 = true;
-      }
     }
     this._compileNode(elem, ctx);
 
@@ -475,13 +466,16 @@ export class QWeb extends EventBus {
         // this is an unusual situation: this text node is the result of the
         // template rendering.
         let nodeID = ctx.generateID();
-        ctx.addLine(`let vn${nodeID} = {text: \`${text}\`};`);
+        ctx.addLine(`var vn${nodeID} = {text: \`${text}\`};`);
         ctx.addLine(`result = vn${nodeID};`);
         ctx.rootContext.rootNode = nodeID;
         ctx.rootContext.parentTextNode = nodeID;
       }
       return;
     }
+    if (ctx !== ctx.rootContext) {
+      ctx = ctx.subContext("currentKey", ctx.currentKey);
+    }
 
     const firstLetter = node.tagName[0];
     if (firstLetter === firstLetter.toUpperCase()) {
@@ -684,7 +678,7 @@ export class QWeb extends EventBus {
             ctx.addLine(`let ${classObj} = {${classDef}};`);
           }
         } else {
-          ctx.addLine(`let _${attID} = '${value}';`);
+          ctx.addLine(`var _${attID} = '${value}';`);
           if (!name.match(/^[a-zA-Z]+$/)) {
             // attribute contains 'non letters' => we want to quote it
             name = '"' + name + '"';
@@ -720,12 +714,12 @@ export class QWeb extends EventBus {
           const attValue = (<Element>node).getAttribute(attName);
           if (attValue) {
             const attValueID = ctx.generateID();
-            ctx.addLine(`let _${attValueID} = ${formattedValue};`);
+            ctx.addLine(`var _${attValueID} = ${formattedValue};`);
             formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
             const attrIndex = attrs.findIndex(att => att.startsWith(attName + ":"));
             attrs.splice(attrIndex, 1);
           }
-          ctx.addLine(`let _${attID} = ${formattedValue};`);
+          ctx.addLine(`var _${attID} = ${formattedValue};`);
           attrs.push(`${attName}: _${attID}`);
           handleBooleanProps(attName, attID);
         }
@@ -741,9 +735,9 @@ export class QWeb extends EventBus {
         const attID = ctx.generateID();
         let staticVal = (<Element>node).getAttribute(attName);
         if (staticVal) {
-          ctx.addLine(`let _${attID} = '${staticVal} ' + ${formattedExpr};`);
+          ctx.addLine(`var _${attID} = '${staticVal} ' + ${formattedExpr};`);
         } else {
-          ctx.addLine(`let _${attID} = ${formattedExpr};`);
+          ctx.addLine(`var _${attID} = ${formattedExpr};`);
         }
         attrs.push(`${attName}: _${attID}`);
       }
@@ -751,13 +745,13 @@ export class QWeb extends EventBus {
       // t-att= attributes
       if (name === "t-att") {
         let id = ctx.generateID();
-        ctx.addLine(`let _${id} = ${ctx.formatExpression(value!)};`);
+        ctx.addLine(`var _${id} = ${ctx.formatExpression(value!)};`);
         tattrs.push(id);
       }
     }
     let nodeID = ctx.generateID();
-    let key = ctx.loopNumber || ctx.hasKey0 ? `\`\${key${ctx.loopNumber}}_${nodeID}\`` : nodeID;
-    const parts = [`key:${key}`];
+    let nodeKey = ctx.currentKey || nodeID;
+    const parts = [`key:${nodeKey}`];
     if (attrs.length + tattrs.length > 0) {
       parts.push(`attrs:{${attrs.join(",")}}`);
     }
@@ -783,12 +777,9 @@ export class QWeb extends EventBus {
       ctx.addLine(`}`);
       ctx.closeIf();
     }
-    ctx.addLine(`let vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`);
+    ctx.addLine(`var vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`);
     if (ctx.parentNode) {
       ctx.addLine(`c${ctx.parentNode}.push(vn${nodeID});`);
-    } else if (ctx.loopNumber || ctx.hasKey0) {
-      ctx.rootContext.shouldDefineResult = true;
-      ctx.addLine(`result = vn${nodeID};`);
     }
 
     return nodeID;

src/store.ts

@@ -141,9 +141,6 @@ export function useStore(selector, options: SelectorOptions = {}): any {
     },
     set(target, k, v) {
       throw new Error("Store state should only be modified through actions");
-    },
-    has(target, k) {
-      return k in result;
     }
   });
 }

tests/__snapshots__/animations.test.ts.snap

@@ -8,9 +8,9 @@ exports[`animations t-transition combined with component 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     // Component 'Child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -52,9 +52,9 @@ exports[`animations t-transition combined with t-component and t-if 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     if (scope['state'].display) {
         // Component 'Child'
         let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -98,9 +98,9 @@ exports[`animations t-transition combined with t-component, remove and re-add be
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     if (scope['state'].flag) {
         // Component 'Child'
         let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -141,9 +141,9 @@ exports[`animations t-transition with no delay/duration 1`] = `
 ) {
     // Template name: \\"test\\"
     let utils = this.constructor.utils;
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('span', p1, c1);
+    var vn1 = h('span', p1, c1);
     p1.hook = {
       insert: vn => {
         utils.transitionInsert(vn, 'jupiler');
@@ -162,9 +162,9 @@ exports[`animations t-transition, on a simple node (insert) 1`] = `
 ) {
     // Template name: \\"test\\"
     let utils = this.constructor.utils;
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('span', p1, c1);
+    var vn1 = h('span', p1, c1);
     p1.hook = {
       insert: vn => {
         utils.transitionInsert(vn, 'chimay');

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

@@ -8,9 +8,9 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     // Component 'Child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {message:1};

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

@@ -8,9 +8,9 @@ exports[`t-slot directive can define and call slots 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     // Component 'Dialog'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -43,18 +43,18 @@ exports[`t-slot directive can define and call slots 2`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"Dialog\\"
-    let h = this.h;
+    var h = this.h;
     let c6 = [], p6 = {key:6};
-    let vn6 = h('div', p6, c6);
+    var vn6 = h('div', p6, c6);
     let c7 = [], p7 = {key:7};
-    let vn7 = h('div', p7, c7);
+    var 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);
+    var vn9 = h('div', p9, c9);
     c6.push(vn9);
     const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
     if (slot10) {
@@ -68,10 +68,10 @@ exports[`t-slot directive can define and call slots 3`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_header_template\\"
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
+    var vn4 = h('span', p4, c4);
     c1.push(vn4);
     c4.push({text: \`header\`});
 }"
@@ -81,10 +81,10 @@ exports[`t-slot directive can define and call slots 4`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_footer_template\\"
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
+    var vn5 = h('span', p5, c5);
     c1.push(vn5);
     c5.push({text: \`footer\`});
 }"
@@ -94,10 +94,10 @@ exports[`t-slot directive content is the default slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
+    var vn4 = h('span', p4, c4);
     c1.push(vn4);
     c4.push({text: \`sts rocks\`});
 }"
@@ -107,9 +107,9 @@ exports[`t-slot directive dafault slots can define a default content 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"__template__1\\"
-    let h = this.h;
+    var h = this.h;
     let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
+    var 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}));
@@ -124,7 +124,7 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     c1.push({text: \`sts rocks\`});
 }"
@@ -134,14 +134,14 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
+    var vn4 = h('span', p4, c4);
     c1.push(vn4);
     c4.push({text: \`sts\`});
     let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
+    var vn5 = h('span', p5, c5);
     c1.push(vn5);
     c5.push({text: \`rocks\`});
 }"
@@ -151,14 +151,14 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_content_template\\"
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
+    var vn4 = h('span', p4, c4);
     c1.push(vn4);
     c4.push({text: \`sts\`});
     let c5 = [], p5 = {key:5};
-    let vn5 = h('span', p5, c5);
+    var vn5 = h('span', p5, c5);
     c1.push(vn5);
     c5.push({text: \`rocks\`});
 }"
@@ -168,9 +168,9 @@ exports[`t-slot directive named slots can define a default content 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"__template__1\\"
-    let h = this.h;
+    var h = this.h;
     let c4 = [], p4 = {key:4};
-    let vn4 = h('span', p4, c4);
+    var vn4 = h('span', p4, c4);
     const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
     if (slot5) {
         slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
@@ -187,10 +187,10 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
     // Template name: \\"slot_footer_template\\"
     let utils = this.constructor.utils;
     context.__owl__.refs = context.__owl__.refs || {};
-    let h = this.h;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c8 = [], p8 = {key:8,on:{}};
-    let vn8 = h('button', p8, c8);
+    var 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__'];
@@ -212,10 +212,10 @@ 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;
+    var h = this.h;
     let c1 = extra.parentNode;
     let c8 = [], p8 = {key:8,on:{}};
-    let vn8 = h('button', p8, c8);
+    var 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__'];
@@ -228,15 +228,15 @@ 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}));
+    var h = this.h;
+    var _12 = scope['props'].to;
+    let c13 = [], p13 = {key:13,attrs:{href: _12}};
+    var 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;
 }"
 `;
 
@@ -248,21 +248,21 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2};
-    let vn2 = h('u', p2, c2);
+    var vn2 = h('u', p2, c2);
     c1.push(vn2);
-    let _3 = scope['state'].users;
+    var _3 = scope['state'].users;
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
-    let _4 = _5 = _3;
+    var _4 = _5 = _3;
     if (!(_3 instanceof Array)) {
         _4 = Object.keys(_3);
         _5 = Object.values(_3);
     }
-    let _length4 = _4.length;
-    let _origScope6 = scope;
+    var _length4 = _4.length;
+    const _origScope6 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length4; i1++) {
         scope.user_first = i1 === 0
@@ -270,35 +270,35 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
         scope.user_index = i1
         scope.user = _4[i1]
         scope.user_value = _5[i1]
-        let key1 = scope['user'].id;
-        let c7 = [], p7 = {key:\`\${key1}_7\`};
-        let vn7 = h('li', p7, c7);
-        c2.push(vn7);
+        const nodeKey7 = scope['user'].id;
+        let c8 = [], p8 = {key:nodeKey7};
+        var vn8 = h('li', p8, c8);
+        c2.push(vn8);
         // Component 'Link'
-        let k9 = \`__9__\${key1}__\`;
-        let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
-        let props8 = {to:'/user/'+scope['user'].id};
-        if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-            w8.destroy();
-            w8 = false;
+        let k10 = \`__10__\` + nodeKey7;
+        let w9 = k10 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k10]] : false;
+        let props9 = {to:'/user/'+scope['user'].id};
+        if (w9 && w9.__owl__.currentFiber && !w9.__owl__.vnode) {
+            w9.destroy();
+            w9 = false;
         }
-        if (w8) {
-            w8.__updateProps(props8, extra.fiber, Object.assign(Object.create(context), scope));
-            let pvnode = w8.__owl__.pvnode;
-            c7.push(pvnode);
+        if (w9) {
+            w9.__updateProps(props9, extra.fiber, Object.assign(Object.create(context), scope));
+            let pvnode = w9.__owl__.pvnode;
+            c8.push(pvnode);
         } else {
-            let componentKey8 = \`Link\`;
-            let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| scope['Link'];
-            if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
-            w8 = new W8(parent, props8);
-            parent.__owl__.cmap[k9] = w8.__owl__.id;
-            w8.__owl__.slotId = 1;
-            let fiber = w8.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
-            c7.push(pvnode);
-            w8.__owl__.pvnode = pvnode;
+            let componentKey9 = \`Link\`;
+            let W9 = context.constructor.components[componentKey9] || QWeb.components[componentKey9]|| scope['Link'];
+            if (!W9) {throw new Error('Cannot find the definition of component \\"' + componentKey9 + '\\"')}
+            w9 = new W9(parent, props9);
+            parent.__owl__.cmap[k10] = w9.__owl__.id;
+            w9.__owl__.slotId = 1;
+            let fiber = w9.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k10, hook: {remove() {},destroy(vn) {w9.destroy();}}});
+            c8.push(pvnode);
+            w9.__owl__.pvnode = pvnode;
         }
-        w8.__owl__.parentLastFiberId = extra.fiber.id;
+        w9.__owl__.parentLastFiberId = extra.fiber.id;
     }
     scope = _origScope6;
     return vn1;
@@ -310,12 +310,12 @@ 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});
+    var h = this.h;
+    let c8 = extra.parentNode;
+    c8.push({text: \`User \`});
+    var _11 = scope['user'].name;
+    if (_11 || _11 === 0) {
+        c8.push({text: _11});
     }
 }"
 `;
@@ -325,15 +325,15 @@ 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}));
+    var h = this.h;
+    var _11 = scope['props'].to;
+    let c12 = [], p12 = {key:12,attrs:{href: _11}};
+    var vn12 = h('a', p12, c12);
+    const slot13 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
+    if (slot13) {
+        slot13.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c12, parent: extra.parent || context}));
     }
-    return vn11;
+    return vn12;
 }"
 `;
 
@@ -345,21 +345,21 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2};
-    let vn2 = h('u', p2, c2);
+    var vn2 = h('u', p2, c2);
     c1.push(vn2);
-    let _3 = scope['state'].users;
+    var _3 = scope['state'].users;
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
-    let _4 = _5 = _3;
+    var _4 = _5 = _3;
     if (!(_3 instanceof Array)) {
         _4 = Object.keys(_3);
         _5 = Object.values(_3);
     }
-    let _length4 = _4.length;
-    let _origScope6 = scope;
+    var _length4 = _4.length;
+    const _origScope6 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length4; i1++) {
         scope.user_first = i1 === 0
@@ -367,36 +367,36 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
         scope.user_index = i1
         scope.user = _4[i1]
         scope.user_value = _5[i1]
-        let key1 = scope['user'].id;
-        let c7 = [], p7 = {key:\`\${key1}_7\`};
-        let vn7 = h('li', p7, c7);
-        c2.push(vn7);
+        const nodeKey7 = scope['user'].id;
+        let c8 = [], p8 = {key:nodeKey7};
+        var vn8 = h('li', p8, c8);
+        c2.push(vn8);
         scope.userdescr = 'User '+scope['user'].name;
         // Component 'Link'
-        let k9 = \`__9__\${key1}__\`;
-        let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
-        let props8 = {to:'/user/'+scope['user'].id};
-        if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
-            w8.destroy();
-            w8 = false;
+        let k10 = \`__10__\` + nodeKey7;
+        let w9 = k10 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k10]] : false;
+        let props9 = {to:'/user/'+scope['user'].id};
+        if (w9 && w9.__owl__.currentFiber && !w9.__owl__.vnode) {
+            w9.destroy();
+            w9 = false;
         }
-        if (w8) {
-            w8.__updateProps(props8, extra.fiber, Object.assign(Object.create(context), scope));
-            let pvnode = w8.__owl__.pvnode;
-            c7.push(pvnode);
+        if (w9) {
+            w9.__updateProps(props9, extra.fiber, Object.assign(Object.create(context), scope));
+            let pvnode = w9.__owl__.pvnode;
+            c8.push(pvnode);
         } else {
-            let componentKey8 = \`Link\`;
-            let W8 = context.constructor.components[componentKey8] || QWeb.components[componentKey8]|| scope['Link'];
-            if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
-            w8 = new W8(parent, props8);
-            parent.__owl__.cmap[k9] = w8.__owl__.id;
-            w8.__owl__.slotId = 1;
-            let fiber = w8.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-            let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
-            c7.push(pvnode);
-            w8.__owl__.pvnode = pvnode;
+            let componentKey9 = \`Link\`;
+            let W9 = context.constructor.components[componentKey9] || QWeb.components[componentKey9]|| scope['Link'];
+            if (!W9) {throw new Error('Cannot find the definition of component \\"' + componentKey9 + '\\"')}
+            w9 = new W9(parent, props9);
+            parent.__owl__.cmap[k10] = w9.__owl__.id;
+            w9.__owl__.slotId = 1;
+            let fiber = w9.__prepare(extra.fiber, Object.assign(Object.create(context), scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k10, hook: {remove() {},destroy(vn) {w9.destroy();}}});
+            c8.push(pvnode);
+            w9.__owl__.pvnode = pvnode;
         }
-        w8.__owl__.parentLastFiberId = extra.fiber.id;
+        w9.__owl__.parentLastFiberId = extra.fiber.id;
     }
     scope = _origScope6;
     return vn1;
@@ -408,10 +408,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});
+    var h = this.h;
+    let c8 = extra.parentNode;
+    if (scope.userdescr || scope.userdescr === 0) {
+        c8.push({text: scope.userdescr});
     }
 }"
 `;
@@ -424,9 +424,9 @@ exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let c1 = [], p1 = {key:1};
-    let vn1 = h('div', p1, c1);
+    var vn1 = h('div', p1, c1);
     scope.userdescr = 'User '+scope['state'].user.name;
     // Component 'Link'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -461,9 +461,9 @@ 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;
+    var h = this.h;
     let c1 = extra.parentNode;
-    if (scope.userdescr != null) {
+    if (scope.userdescr || scope.userdescr === 0) {
         c1.push({text: scope.userdescr});
     }
 }"
@@ -475,7 +475,7 @@ exports[`t-slot directive template can just return a slot 1`] = `
     // Template name: \\"__template__2\\"
     let utils = this.constructor.utils;
     let result;
-    let h = this.h;
+    var h = this.h;
     const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot6) {
         let children7= []

tests/component/component.test.ts

@@ -322,36 +322,6 @@ describe("basic widget properties", () => {
     console.warn = warn;
   });
 
-  test("reconciliation alg works for t-foreach in t-foreach, 2", async () => {
-    class Child extends Component<any, any> {
-      static template = xml`<div><t t-esc="props.row + '_' + props.col"/></div>`;
-    }
-
-    class Parent extends Component<any, any> {
-      static template = xml`
-        <div>
-          <p t-foreach="state.rows" t-as="row" t-key="row">
-            <p t-foreach="state.cols" t-as="col" t-key="col">
-                <Child row="row" col="col"/>
-              </p>
-            </p>
-        </div>`;
-      static components = { Child };
-      state = useState({ rows: [1, 2], cols: ["a", "b"] });
-    }
-
-    const widget = new Parent();
-    await widget.mount(fixture);
-    expect(fixture.innerHTML).toBe(
-      "<div><p><p><div>1_a</div></p><p><div>1_b</div></p></p><p><p><div>2_a</div></p><p><div>2_b</div></p></p></div>"
-    );
-    widget.state.rows = [2, 1];
-    await nextTick();
-    expect(fixture.innerHTML).toBe(
-      "<div><p><p><div>2_a</div></p><p><div>2_b</div></p></p><p><p><div>1_a</div></p><p><div>1_b</div></p></p></div>"
-    );
-  });
-
   test("same t-keys in two different places", async () => {
     class Child extends Component<any, any> {
       static template = xml`<span><t t-esc="props.blip"/></span>`;
@@ -369,7 +339,6 @@ describe("basic widget properties", () => {
     const widget = new Parent();
     await widget.mount(fixture);
     expect(fixture.innerHTML).toBe("<div><div><span>1</span></div><div><span>2</span></div></div>");
-    expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
   });
 
   test("t-key on a component with t-if, and a sibling component", async () => {
@@ -4449,28 +4418,6 @@ describe("t-model directive", () => {
     expect(comp.state[2].f).toBe(false);
     expect(env.qweb.templates[SomeComponent.template].fn.toString()).toMatchSnapshot();
   });
-
-  test("two inputs in a div with a t-key", async () => {
-    class SomeComponent extends Component<any, any> {
-      static template = xml`
-        <div t-key="'key'">
-          <input class="a" t-if="state.flag"/>
-          <input class="b" t-if="!state.flag"/>
-        </div>
-      `;
-      state = useState({ flag: true });
-    }
-    const comp = new SomeComponent();
-    await comp.mount(fixture);
-    expect(fixture.innerHTML).toBe('<div><input class="a"></div>');
-    expect(env.qweb.templates[SomeComponent.template].fn.toString()).toMatchSnapshot();
-    fixture.querySelector("input")!.value = "asdf";
-    expect(fixture.querySelector("input")!.value).toBe("asdf");
-    comp.state.flag = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe('<div><input class="b"></div>');
-    expect(fixture.querySelector("input")!.value).toBe("");
-  });
 });
 
 describe("environment and plugins", () => {
@@ -4573,7 +4520,7 @@ describe("component error handling (catchError)", () => {
     }
     const app = new App();
     await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div><div>heyfalse</div></div></div>");
+    expect(fixture.innerHTML).toBe("<div><div><div>hey</div></div></div>");
     app.state.flag = true;
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
@@ -4608,7 +4555,7 @@ describe("component error handling (catchError)", () => {
     }
     const app = new App();
     await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>heyfalse</div></div>");
+    expect(fixture.innerHTML).toBe("<div><div>hey</div></div>");
     app.state.flag = true;
     await nextTick();
     expect(fixture.innerHTML).toBe("");
@@ -5630,70 +5577,6 @@ describe("t-call", () => {
     expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
   });
 
-  test("parent is set within t-call", async () => {
-    env.qweb.addTemplate("sub", `<Child/>`);
-    let child;
-    class Child extends Component<any, any> {
-      static template = xml`<span>lucas</span>`;
-      constructor() {
-        super(...arguments);
-        child = this;
-      }
-    }
-    class Parent extends Component<any, any> {
-      static components = { Child };
-      static template = xml`<div><t t-call="sub"/></div>`;
-    }
-    const parent = new Parent();
-    await parent.mount(fixture);
-
-    expect(fixture.innerHTML).toBe("<div><span>lucas</span></div>");
-    expect(child.__owl__.parent).toBe(parent);
-    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
-  });
-
-  test("t-call in t-foreach and children component", async () => {
-    env.qweb.addTemplate("sub", `<Child val="val"/>`);
-    class Child extends Component<any, any> {
-      static template = xml`<span><t t-esc="props.val"/></span>`;
-    }
-    class Parent extends Component<any, any> {
-      static components = { Child };
-      static template = xml`
-        <div>
-          <t t-foreach="['a', 'b', 'c']" t-as="val" t-key="val">
-            <t t-call="sub"/>
-          </t>
-        </div>`;
-    }
-    const parent = new Parent();
-    await parent.mount(fixture);
-
-    expect(fixture.innerHTML).toBe("<div><span>a</span><span>b</span><span>c</span></div>");
-  });
-
-  test("parent is set within t-call with no parentNode", async () => {
-    env.qweb.addTemplate("sub", `<Child/>`);
-    let child;
-    class Child extends Component<any, any> {
-      constructor() {
-        super(...arguments);
-        child = this;
-      }
-      static template = xml`<span>lucas</span>`;
-    }
-    class Parent extends Component<any, any> {
-      static components = { Child };
-      static template = xml`<t t-call="sub"/>`;
-    }
-    const parent = new Parent();
-    await parent.mount(fixture);
-
-    expect(fixture.innerHTML).toBe("<span>lucas</span>");
-    expect(child.__owl__.parent).toBe(parent);
-    expect(env.qweb.subTemplates["sub"].toString()).toMatchSnapshot();
-  });
-
   test("handlers with arguments are properly bound through a t-call", async () => {
     expect.assertions(3);
     env.qweb.addTemplate("sub", `<p t-on-click="update(a)">lucas</p>`);

tests/core/observer.test.ts

@@ -429,4 +429,44 @@ describe("observer", () => {
       obj.a.push(2);
     }).toThrow('Observed state cannot be changed here! (key: "1", val: "2")');
   });
+
+  test("functions are not observed, but are properly bound", () => {
+    const observer = new Observer();
+    const obj: any = observer.observe({ m: new Map() });
+    expect(observer.rev).toBe(1);
+    obj.m.set("a", 1);
+    expect(obj.m.get("a")).toBe(1);
+
+    // should be 2, but we do not support reactivity on maps/weakmaps/set/weakset
+    expect(observer.rev).toBe(1);
+  });
+
+  test("functions are correctly bound", async () => {
+    const observer = new Observer();
+    const obj: any = observer.observe({ set: new Set() });
+    expect(observer.revNumber(obj)).toBe(1);
+    obj.set.add('mojo');
+    expect(observer.revNumber(obj)).toBe(1);
+
+    const steps: string[] = [];
+    obj.set.forEach((elm)=>{steps.push(elm)});
+
+    expect(steps).toStrictEqual(['mojo']);
+
+    obj.set.clear();
+    expect(observer.revNumber(obj)).toBe(1);
+  });
+
+  test("functions are correctly bound", async () => {
+    const observer = new Observer();
+    const obj: any = observer.observe({ set: [] });
+    expect(observer.revNumber(obj)).toBe(1);
+    obj.set.push('mojo');
+    expect(observer.revNumber(obj)).toBe(2);
+
+    const steps: string[] = [];
+    obj.set.forEach((elm)=>{steps.push(elm)});
+
+    expect(steps).toStrictEqual(['mojo']);
+  });
 });

tests/qweb/qweb.test.ts

@@ -141,49 +141,17 @@ describe("t-esc", () => {
     qweb.addTemplate("test", `<span t-esc="var">nope</span>`);
     expect(renderToString(qweb, "test")).toBe("<span>nope</span>");
   });
-
   test("t-esc is escaped", () => {
     qweb.addTemplate("test", `<div><t t-set="var"><p>escaped</p></t><t t-esc="var"/></div>`);
     const domRendered = renderToDOM(qweb, "test");
     expect(domRendered.textContent).toBe("<p>escaped</p>");
   });
-
   test("t-esc=0 is escaped", () => {
     qweb.addTemplate("test", `<span><t t-esc="0"/></span>`);
     qweb.addTemplate("testCaller", `<div><t t-call="test"><p>escaped</p></t></div>`);
     const domRendered = renderToDOM(qweb, "testCaller") as HTMLElement;
     expect(domRendered.querySelector("span")!.textContent).toBe("<p>escaped</p>");
   });
-
-  test("div with falsy values", () => {
-    qweb.addTemplate(
-      "test",
-      `
-      <div>
-        <p t-esc="v1"/>
-        <p t-esc="v2"/>
-        <p t-esc="v3"/>
-        <p t-esc="v4"/>
-        <p t-esc="v5"/>
-      </div>`
-    );
-    const vals = {
-      v1: false,
-      v2: undefined,
-      v3: null,
-      v4: 0,
-      v5: ""
-    };
-    expect(renderToString(qweb, "test", vals)).toBe(
-      "<div><p>false</p><p></p><p></p><p>0</p><p></p></div>"
-    );
-  });
-
-  test("t-esc work with spread operator", () => {
-    qweb.addTemplate("test", `<span><t t-esc="[...state.list]"/></span>`);
-    const result = renderToString(qweb, "test", { state: { list: [1, 2] } });
-    expect(result).toBe("<span>1,2</span>");
-  });
 });
 
 describe("t-raw", () => {
@@ -290,18 +258,6 @@ describe("t-set", () => {
     );
   });
 
-  test("t-set with content and sub t-esc", () => {
-    qweb.addTemplate(
-      "test",
-      `<div>
-        <t t-set="setvar"><t t-esc="beep"/> boop</t>
-        <t t-esc="setvar"/>
-      </div>`
-    );
-
-    expect(renderToString(qweb, "test", { beep: "beep" })).toBe("<div>beep boop</div>");
-  });
-
   test("evaluate value expression, part 2", () => {
     qweb.addTemplate(
       "test",

tests/qweb/qweb_expressions.test.ts

@@ -50,12 +50,6 @@ describe("tokenizer", () => {
       { type: "OPERATOR", value: "typeof " },
       { type: "SYMBOL", value: "a" }
     ]);
-
-    expect(tokenize("a...1")).toEqual([
-      { type: "SYMBOL", value: "a" },
-      { type: "OPERATOR", value: "..." },
-      { type: "VALUE", value: "1" }
-    ]);
   });
 
   test("strings", () => {
@@ -183,10 +177,4 @@ describe("expression evaluation", () => {
     expect(compileExpr("a -= b", {})).toBe("scope['a']-=scope['b']");
     expect(compileExpr("a.b = !a.b", {})).toBe("scope['a'].b=!scope['a'].b");
   });
-
-  test("spread operator", () => {
-    expect(compileExpr("[...state.list]", {})).toBe("[...scope['state'].list]");
-    expect(compileExpr("f(...state.list)", {})).toBe("scope['f'](...scope['state'].list)");
-    expect(compileExpr("f([...list])", {})).toBe("scope['f']([...scope['list']])");
-  });
 });

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

@@ -6,11 +6,11 @@ exports[`Link component can render simple cases 1`] = `
     // Template name: \\"__template__1\\"
     let utils = this.constructor.utils;
     let scope = Object.create(context);
-    let h = this.h;
+    var h = this.h;
     let _4 = utils.toObj({'router-link-active':scope['isActive']});
-    let _5 = scope['href'];
+    var _5 = scope['href'];
     let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}};
-    let vn6 = h('a', p6, c6);
+    var 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'];

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

@@ -9,37 +9,35 @@ exports[`RouteComponent can render simple cases 1`] = `
     let parent = context;
     let scope = Object.create(context);
     let result;
-    let h = this.h;
+    var h = this.h;
     if (scope['routeComponent']) {
-        {
-            let key0 = scope['env'].router.currentRouteName;
-            // Component 'routeComponent'
-            let k5 = \`__5__\${key0}__\`;
-            let w4 = k5 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k5]] : false;
-            let vn6 = {};
-            result = vn6;
-            let props4 = Object.assign({}, scope['env'].router.currentParams);
-            if (w4 && w4.__owl__.currentFiber && !w4.__owl__.vnode) {
-                w4.destroy();
-                w4 = false;
-            }
-            if (w4) {
-                w4.__updateProps(props4, extra.fiber, undefined);
-                let pvnode = w4.__owl__.pvnode;
-                utils.defineProxy(vn6, pvnode);
-            } else {
-                let componentKey4 = \`routeComponent\`;
-                let W4 = context.constructor.components[componentKey4] || QWeb.components[componentKey4]|| scope['routeComponent'];
-                if (!W4) {throw new Error('Cannot find the definition of component \\"' + componentKey4 + '\\"')}
-                w4 = new W4(parent, props4);
-                parent.__owl__.cmap[k5] = w4.__owl__.id;
-                let fiber = w4.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
-                let pvnode = h('dummy', {key: k5, hook: {remove() {},destroy(vn) {w4.destroy();}}});
-                utils.defineProxy(vn6, pvnode);
-                w4.__owl__.pvnode = pvnode;
-            }
-            w4.__owl__.parentLastFiberId = extra.fiber.id;
+        const nodeKey4 = scope['env'].router.currentRouteName;
+        // Component 'routeComponent'
+        let k6 = \`__6__\` + nodeKey4;
+        let w5 = k6 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k6]] : false;
+        let vn7 = {};
+        result = vn7;
+        let props5 = Object.assign({}, scope['env'].router.currentParams);
+        if (w5 && w5.__owl__.currentFiber && !w5.__owl__.vnode) {
+            w5.destroy();
+            w5 = false;
         }
+        if (w5) {
+            w5.__updateProps(props5, extra.fiber, undefined);
+            let pvnode = w5.__owl__.pvnode;
+            utils.defineProxy(vn7, pvnode);
+        } else {
+            let componentKey5 = \`routeComponent\`;
+            let W5 = context.constructor.components[componentKey5] || QWeb.components[componentKey5]|| scope['routeComponent'];
+            if (!W5) {throw new Error('Cannot find the definition of component \\"' + componentKey5 + '\\"')}
+            w5 = new W5(parent, props5);
+            parent.__owl__.cmap[k6] = w5.__owl__.id;
+            let fiber = w5.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
+            let pvnode = h('dummy', {key: k6, hook: {remove() {},destroy(vn) {w5.destroy();}}});
+            utils.defineProxy(vn7, pvnode);
+            w5.__owl__.pvnode = pvnode;
+        }
+        w5.__owl__.parentLastFiberId = extra.fiber.id;
     }
     return result;
 }"

tests/store_hooks.test.ts

@@ -84,38 +84,6 @@ describe("connecting a component to store", () => {
     expect(fixture.innerHTML).toBe("<div><span>ok</span></div>");
   });
 
-  test("map works on the result of useStore when the resulting array changes for a bigger one", async () => {
-    const state = { smallerArray: [1], biggerArray: [2, 3], useSmallArray: true };
-    const store = new Store({ state });
-
-    class App extends Component<any, any> {
-      static template = xml`<div t-esc="mapAdd"/>`;
-      storeProps = {
-        array: useStore(state => {
-          if (state.useSmallArray) {
-            return state.smallerArray;
-          }
-          return state.biggerArray;
-        })
-      };
-      get mapAdd() {
-        return this.storeProps.array.map(a => {
-          return a + 1;
-        });
-      }
-    }
-
-    (<any>env).store = store;
-    const app = new App();
-
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>2</div>");
-
-    store.state.useSmallArray = false;
-    await nextTick();
-    expect(fixture.innerHTML).toBe("<div>3,4</div>");
-  });
-
   test("throw error if no store is found", async () => {
     class App extends Component<any, any> {
       static template = xml`<div></div>`;