[FIX] qweb: properly display falsy values

While it is not tested, nor documented, the reference QWeb
implementation display the `false` value as "false". So, we have to
adapt the Owl implementation to match that behaviour.

At the same time, this commit uses 'let' instead of 'var' in various places,
to make the compiled code more consistant.

src/qweb/base_directives.ts

@@ -39,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(`var ${exprID} = ${ctx.formatExpression(value)};`);
+    ctx.addLine(`let ${exprID} = ${ctx.formatExpression(value)};`);
   } else {
     exprID = `scope.${value.id}`;
   }
-  ctx.addIf(`${exprID} || ${exprID} === 0`);
+  ctx.addIf(`${exprID} != null`);
 
   if (ctx.escaping) {
     let protectID;
@@ -61,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(`var vn${nodeID} = {text: ${exprID}};`);
+      ctx.addLine(`let vn${nodeID} = {text: ${exprID}};`);
       if (ctx.rootContext.shouldDefineResult) {
         ctx.addLine(`result = vn${nodeID}`);
       }
@@ -140,7 +140,7 @@ QWeb.addDirective({
       const _parentNode = ctx.parentNode;
       ctx.parentNode = tempParentNodeID;
 
-      ctx.addLine(`const c${tempParentNodeID} = new utils.VDomArray();`);
+      ctx.addLine(`let c${tempParentNodeID} = new utils.VDomArray();`);
       const nodeCopy = node.cloneNode(true) as Element;
       for (let attr of ["t-set", "t-value", "t-if", "t-else", "t-elif"]) {
         nodeCopy.removeAttribute(attr);
@@ -301,16 +301,16 @@ QWeb.addDirective({
     const elems = node.getAttribute("t-foreach")!;
     const name = node.getAttribute("t-as")!;
     let arrayID = ctx.generateID();
-    ctx.addLine(`var _${arrayID} = ${ctx.formatExpression(elems)};`);
+    ctx.addLine(`let _${arrayID} = ${ctx.formatExpression(elems)};`);
     ctx.addLine(`if (!_${arrayID}) { throw new Error('QWeb error: Invalid loop expression')}`);
     let keysID = ctx.generateID();
     let valuesID = ctx.generateID();
-    ctx.addLine(`var _${keysID} = _${valuesID} = _${arrayID};`);
+    ctx.addLine(`let _${keysID} = _${valuesID} = _${arrayID};`);
     ctx.addIf(`!(_${arrayID} instanceof Array)`);
     ctx.addLine(`_${keysID} = Object.keys(_${arrayID});`);
     ctx.addLine(`_${valuesID} = Object.values(_${arrayID});`);
     ctx.closeIf();
-    ctx.addLine(`var _length${keysID} = _${keysID}.length;`);
+    ctx.addLine(`let _length${keysID} = _${keysID}.length;`);
     let varsID = ctx.startProtectScope();
     const loopVar = `i${ctx.loopNumber}`;
     ctx.addLine(`for (let ${loopVar} = 0; ${loopVar} < _length${keysID}; ${loopVar}++) {`);

src/qweb/compilation_context.ts

@@ -31,7 +31,7 @@ export class CompilationContext {
   constructor(name?: string) {
     this.rootContext = this;
     this.templateName = name || "noname";
-    this.addLine("var h = this.h;");
+    this.addLine("let h = this.h;");
   }
 
   generateID(): number {
@@ -180,7 +180,7 @@ export class CompilationContext {
   startProtectScope(): number {
     const protectID = this.generateID();
     this.rootContext.shouldDefineScope = true;
-    this.addLine(`const _origScope${protectID} = scope;`);
+    this.addLine(`let _origScope${protectID} = scope;`);
     this.addLine(`scope = Object.assign(Object.create(context), scope);`);
     return protectID;
   }

src/qweb/qweb.ts

@@ -466,7 +466,7 @@ 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(`var vn${nodeID} = {text: \`${text}\`};`);
+        ctx.addLine(`let vn${nodeID} = {text: \`${text}\`};`);
         ctx.addLine(`result = vn${nodeID};`);
         ctx.rootContext.rootNode = nodeID;
         ctx.rootContext.parentTextNode = nodeID;
@@ -678,7 +678,7 @@ export class QWeb extends EventBus {
             ctx.addLine(`let ${classObj} = {${classDef}};`);
           }
         } else {
-          ctx.addLine(`var _${attID} = '${value}';`);
+          ctx.addLine(`let _${attID} = '${value}';`);
           if (!name.match(/^[a-zA-Z]+$/)) {
             // attribute contains 'non letters' => we want to quote it
             name = '"' + name + '"';
@@ -714,12 +714,12 @@ export class QWeb extends EventBus {
           const attValue = (<Element>node).getAttribute(attName);
           if (attValue) {
             const attValueID = ctx.generateID();
-            ctx.addLine(`var _${attValueID} = ${formattedValue};`);
+            ctx.addLine(`let _${attValueID} = ${formattedValue};`);
             formattedValue = `'${attValue}' + (_${attValueID} ? ' ' + _${attValueID} : '')`;
             const attrIndex = attrs.findIndex(att => att.startsWith(attName + ":"));
             attrs.splice(attrIndex, 1);
           }
-          ctx.addLine(`var _${attID} = ${formattedValue};`);
+          ctx.addLine(`let _${attID} = ${formattedValue};`);
           attrs.push(`${attName}: _${attID}`);
           handleBooleanProps(attName, attID);
         }
@@ -735,9 +735,9 @@ export class QWeb extends EventBus {
         const attID = ctx.generateID();
         let staticVal = (<Element>node).getAttribute(attName);
         if (staticVal) {
-          ctx.addLine(`var _${attID} = '${staticVal} ' + ${formattedExpr};`);
+          ctx.addLine(`let _${attID} = '${staticVal} ' + ${formattedExpr};`);
         } else {
-          ctx.addLine(`var _${attID} = ${formattedExpr};`);
+          ctx.addLine(`let _${attID} = ${formattedExpr};`);
         }
         attrs.push(`${attName}: _${attID}`);
       }
@@ -745,7 +745,7 @@ export class QWeb extends EventBus {
       // t-att= attributes
       if (name === "t-att") {
         let id = ctx.generateID();
-        ctx.addLine(`var _${id} = ${ctx.formatExpression(value!)};`);
+        ctx.addLine(`let _${id} = ${ctx.formatExpression(value!)};`);
         tattrs.push(id);
       }
     }
@@ -777,7 +777,7 @@ export class QWeb extends EventBus {
       ctx.addLine(`}`);
       ctx.closeIf();
     }
-    ctx.addLine(`var vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`);
+    ctx.addLine(`let vn${nodeID} = h('${node.nodeName}', p${nodeID}, c${nodeID});`);
     if (ctx.parentNode) {
       ctx.addLine(`c${ctx.parentNode}.push(vn${nodeID});`);
     }

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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     if (scope['state'].display) {
         // Component 'Child'
         let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     if (scope['state'].flag) {
         // Component 'Child'
         let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -141,9 +141,9 @@ exports[`animations t-transition with no delay/duration 1`] = `
 ) {
     // Template name: \\"test\\"
     let utils = this.constructor.utils;
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('span', p1, c1);
+    let 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;
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('span', p1, c1);
+    let vn1 = h('span', p1, c1);
     p1.hook = {
       insert: vn => {
         utils.transitionInsert(vn, 'chimay');

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

@@ -8,18 +8,18 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = scope['state'].s;
+    let _2 = scope['state'].s;
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    var _3 = _4 = _2;
+    let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
         _3 = Object.keys(_2);
         _4 = Object.values(_2);
     }
-    var _length3 = _3.length;
+    let _length3 = _3.length;
-    const _origScope5 = scope;
+    let _origScope5 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length3; i1++) {
         scope.section_first = i1 === 0
@@ -27,15 +27,15 @@ exports[`basic widget properties reconciliation alg works for t-foreach in t-for
         scope.section_index = i1
         scope.section = _3[i1]
         scope.section_value = _4[i1]
-        var _6 = scope['section'].blips;
+        let _6 = scope['section'].blips;
         if (!_6) { throw new Error('QWeb error: Invalid loop expression')}
-        var _7 = _8 = _6;
+        let _7 = _8 = _6;
         if (!(_6 instanceof Array)) {
             _7 = Object.keys(_6);
             _8 = Object.values(_6);
         }
-        var _length7 = _7.length;
+        let _length7 = _7.length;
-        const _origScope9 = scope;
+        let _origScope9 = scope;
         scope = Object.assign(Object.create(context), scope);
         for (let i2 = 0; i2 < _length7; i2++) {
             scope.blip_first = i2 === 0
@@ -83,9 +83,9 @@ exports[`basic widget properties t-key on a component with t-if, and a sibling c
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     if (false) {
         const nodeKey2 = 'str';
         // Component 'Child'
@@ -148,9 +148,9 @@ exports[`class and style attributes with t-component dynamic t-att-style is prop
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     const _4 = scope['state'].style;
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -188,9 +188,9 @@ exports[`class and style attributes with t-component t-att-class is properly add
     let parent = context;
     context.__owl__.refs = context.__owl__.refs || {};
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Child'
     const ref4 = \`child\`;
     let _5 = {'a':true};
@@ -228,11 +228,11 @@ exports[`class and style attributes with t-component t-att-class is properly add
     // Template name: \\"Child\\"
     let utils = this.constructor.utils;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let _7 = {'c':true};
     Object.assign(_7, utils.toObj({d:scope['state'].d}))
     let c8 = [], p8 = {key:8,class:_7};
-    var vn8 = h('span', p8, c8);
+    let vn8 = h('span', p8, c8);
     return vn8;
 }"
 `;
@@ -246,9 +246,9 @@ exports[`class and style attributes with t-component t-att-class is properly add
     let parent = context;
     context.__owl__.refs = context.__owl__.refs || {};
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Child'
     const ref4 = \`child\`;
     let _5 = {'a':true};
@@ -286,11 +286,11 @@ exports[`class and style attributes with t-component t-att-class is properly add
     // Template name: \\"Child\\"
     let utils = this.constructor.utils;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let _7 = {'c':true};
     Object.assign(_7, utils.toObj(scope['state'].d?'d':''))
     let c8 = [], p8 = {key:8,class:_7};
-    var vn8 = h('span', p8, c8);
+    let vn8 = h('span', p8, c8);
     return vn8;
 }"
 `;
@@ -303,18 +303,18 @@ exports[`composition sub components with some state rendered in a loop 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = scope['state'].numbers;
+    let _2 = scope['state'].numbers;
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    var _3 = _4 = _2;
+    let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
         _3 = Object.keys(_2);
         _4 = Object.values(_2);
     }
-    var _length3 = _3.length;
+    let _length3 = _3.length;
-    const _origScope5 = scope;
+    let _origScope5 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length3; i1++) {
         scope.number_first = i1 === 0
@@ -361,9 +361,9 @@ exports[`composition t-component with dynamic value 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component '{{state.widget}}'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -399,9 +399,9 @@ exports[`composition t-component with dynamic value 2 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Widget{{state.widget}}'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -437,9 +437,9 @@ exports[`dynamic t-props basic use 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = Object.assign({}, scope['some'].obj);
@@ -475,11 +475,11 @@ exports[`other directives with t-component t-on with getter as handler 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = scope['state'].counter;
+    let _2 = scope['state'].counter;
-    if (_2 || _2 === 0) {
+    if (_2 != null) {
         c1.push({text: _2});
     }
     // Component 'Child'
@@ -517,9 +517,9 @@ exports[`other directives with t-component t-on with handler bound to argument 1
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let args4 = [3];
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -556,9 +556,9 @@ exports[`other directives with t-component t-on with handler bound to empty obje
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let args4 = [{}];
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -595,9 +595,9 @@ exports[`other directives with t-component t-on with handler bound to empty obje
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let args4 = [{}];
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -634,9 +634,9 @@ exports[`other directives with t-component t-on with handler bound to object 1`]
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let args4 = [{val:3}];
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -673,11 +673,11 @@ exports[`other directives with t-component t-on with inline statement 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = scope['state'].counter;
+    let _2 = scope['state'].counter;
-    if (_2 || _2 === 0) {
+    if (_2 != null) {
         c1.push({text: _2});
     }
     // Component 'Child'
@@ -715,9 +715,9 @@ exports[`other directives with t-component t-on with no handler (only modifiers)
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'ComponentA'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -753,9 +753,9 @@ exports[`other directives with t-component t-on with prevent and self modifiers
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -791,9 +791,9 @@ exports[`other directives with t-component t-on with self and prevent modifiers
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -829,9 +829,9 @@ exports[`other directives with t-component t-on with self modifier 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -867,9 +867,9 @@ exports[`other directives with t-component t-on with stop and/or prevent modifie
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -902,9 +902,9 @@ exports[`random stuff/miscellaneous can inject values in tagged templates 1`] =
 ) {
     // Template name: \\"__template__2\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     this.subTemplates['__template__1'].call(this, Object.assign(Object.create(context), scope), Object.assign({}, extra, {parentNode: c1}));
     return vn1;
 }"
@@ -918,9 +918,9 @@ exports[`random stuff/miscellaneous snapshotting compiled code 1`] = `
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     const nodeKey2 = 'somestring';
     // Component 'child'
     let k4 = \`__4__\` + nodeKey2;
@@ -958,18 +958,18 @@ exports[`random stuff/miscellaneous t-on with handler bound to dynamic argument
     let QWeb = this.constructor;
     let parent = context;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = scope['items'];
+    let _2 = scope['items'];
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    var _3 = _4 = _2;
+    let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
         _3 = Object.keys(_2);
         _4 = Object.values(_2);
     }
-    var _length3 = _3.length;
+    let _length3 = _3.length;
-    const _origScope5 = scope;
+    let _origScope5 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length3; i1++) {
         scope.item_first = i1 === 0
@@ -1014,10 +1014,10 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
 ) {
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('p', p2, c2);
+    let vn2 = h('p', p2, c2);
     c1.push(vn2);
     extra.handlers['click__3__'] = extra.handlers['click__3__'] || function (e) {if (!context.__owl__.isMounted){return}utils.getComponent(context)['update'](e);};
     p2.on['click'] = extra.handlers['click__3__'];
@@ -1031,10 +1031,10 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
     // Template name: \\"sub\\"
     let utils = this.constructor.utils;
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('p', p2, c2);
+    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);};
@@ -1047,21 +1047,21 @@ exports[`t-model directive .lazy modifier 1`] = `
 ) {
     // Template name: \\"__template__1\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('input', p2, c2);
+    let vn2 = h('input', p2, c2);
     c1.push(vn2);
     let expr2 = scope['state'];
     p2.props = {value: expr2.text};
     extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value});
     p2.on['change'] = extra.handlers['__3__'];
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     c1.push(vn4);
-    var _5 = scope['state'].text;
+    let _5 = scope['state'].text;
-    if (_5 || _5 === 0) {
+    if (_5 != null) {
         c4.push({text: _5});
     }
     return vn1;
@@ -1073,21 +1073,21 @@ exports[`t-model directive basic use, on an input 1`] = `
 ) {
     // Template name: \\"__template__1\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('input', p2, c2);
+    let vn2 = h('input', p2, c2);
     c1.push(vn2);
     let expr2 = scope['state'];
     p2.props = {value: expr2.text};
     extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value});
     p2.on['input'] = extra.handlers['__3__'];
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     c1.push(vn4);
-    var _5 = scope['state'].text;
+    let _5 = scope['state'].text;
-    if (_5 || _5 === 0) {
+    if (_5 != null) {
         c4.push({text: _5});
     }
     return vn1;
@@ -1099,21 +1099,21 @@ exports[`t-model directive basic use, on another key in component 1`] = `
 ) {
     // Template name: \\"SomeComponent\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('input', p2, c2);
+    let vn2 = h('input', p2, c2);
     c1.push(vn2);
     let expr2 = scope['some'];
     p2.props = {value: expr2.text};
     extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value});
     p2.on['input'] = extra.handlers['__3__'];
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     c1.push(vn4);
-    var _5 = scope['some'].text;
+    let _5 = scope['some'].text;
-    if (_5 || _5 === 0) {
+    if (_5 != null) {
         c4.push({text: _5});
     }
     return vn1;
@@ -1125,18 +1125,18 @@ exports[`t-model directive in a t-foreach 1`] = `
 ) {
     // Template name: \\"__template__1\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = scope['state'];
+    let _2 = scope['state'];
     if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
-    var _3 = _4 = _2;
+    let _3 = _4 = _2;
     if (!(_2 instanceof Array)) {
         _3 = Object.keys(_2);
         _4 = Object.values(_2);
     }
-    var _length3 = _3.length;
+    let _length3 = _3.length;
-    const _origScope5 = scope;
+    let _origScope5 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length3; i1++) {
         scope.thing_first = i1 === 0
@@ -1145,9 +1145,9 @@ exports[`t-model directive in a t-foreach 1`] = `
         scope.thing = _3[i1]
         scope.thing_value = _4[i1]
         const nodeKey6 = scope['thing'].id;
-        var _7 = 'checkbox';
+        let _7 = 'checkbox';
         let c8 = [], p8 = {key:nodeKey6,attrs:{type: _7},on:{}};
-        var vn8 = h('input', p8, c8);
+        let vn8 = h('input', p8, c8);
         c1.push(vn8);
         let expr8 = scope['thing'];
         let k9 = \`__9__\` + nodeKey6;
@@ -1165,11 +1165,11 @@ exports[`t-model directive on a select 1`] = `
 ) {
     // Template name: \\"SomeComponent\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('select', p2, c2);
+    let vn2 = h('select', p2, c2);
     c1.push(vn2);
     let expr2 = scope['state'];
     p2.props = {value: expr2.color};
@@ -1180,27 +1180,27 @@ exports[`t-model directive on a select 1`] = `
         n.elm.value=expr2.color;
       },
     };
-    var _4 = '';
+    let _4 = '';
     let c5 = [], p5 = {key:5,attrs:{value: _4}};
-    var vn5 = h('option', p5, c5);
+    let vn5 = h('option', p5, c5);
     c2.push(vn5);
     c5.push({text: \`Please select one\`});
-    var _6 = 'red';
+    let _6 = 'red';
     let c7 = [], p7 = {key:7,attrs:{value: _6}};
-    var vn7 = h('option', p7, c7);
+    let vn7 = h('option', p7, c7);
     c2.push(vn7);
     c7.push({text: \`Red\`});
-    var _8 = 'blue';
+    let _8 = 'blue';
     let c9 = [], p9 = {key:9,attrs:{value: _8}};
-    var vn9 = h('option', p9, c9);
+    let vn9 = h('option', p9, c9);
     c2.push(vn9);
     c9.push({text: \`Blue\`});
     let c10 = [], p10 = {key:10};
-    var vn10 = h('span', p10, c10);
+    let vn10 = h('span', p10, c10);
     c1.push(vn10);
     c10.push({text: \`Choice: \`});
-    var _11 = scope['state'].color;
+    let _11 = scope['state'].color;
-    if (_11 || _11 === 0) {
+    if (_11 != null) {
         c10.push({text: _11});
     }
     return vn1;
@@ -1212,21 +1212,21 @@ exports[`t-model directive on a sub state key 1`] = `
 ) {
     // Template name: \\"__template__1\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2,on:{}};
-    var vn2 = h('input', p2, c2);
+    let vn2 = h('input', p2, c2);
     c1.push(vn2);
     let expr2 = scope['state'].something;
     p2.props = {value: expr2.text};
     extra.handlers['__3__'] = extra.handlers['__3__'] || ((ev) => {expr2.text = ev.target.value});
     p2.on['input'] = extra.handlers['__3__'];
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     c1.push(vn4);
-    var _5 = scope['state'].something.text;
+    let _5 = scope['state'].something.text;
-    if (_5 || _5 === 0) {
+    if (_5 != null) {
         c4.push({text: _5});
     }
     return vn1;
@@ -1238,35 +1238,35 @@ exports[`t-model directive on an input type=radio 1`] = `
 ) {
     // Template name: \\"SomeComponent\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = 'radio';
+    let _2 = 'radio';
-    var _3 = 'one';
+    let _3 = 'one';
-    var _4 = 'One';
+    let _4 = 'One';
     let c5 = [], p5 = {key:5,attrs:{type: _2,id: _3,value: _4},on:{}};
-    var vn5 = h('input', p5, c5);
+    let vn5 = h('input', p5, c5);
     c1.push(vn5);
     let expr5 = scope['state'];
     p5.props = {checked:expr5.choice === 'One'};
     extra.handlers['__6__'] = extra.handlers['__6__'] || ((ev) => {expr5.choice = ev.target.value});
     p5.on['click'] = extra.handlers['__6__'];
-    var _7 = 'radio';
+    let _7 = 'radio';
-    var _8 = 'two';
+    let _8 = 'two';
-    var _9 = 'Two';
+    let _9 = 'Two';
     let c10 = [], p10 = {key:10,attrs:{type: _7,id: _8,value: _9},on:{}};
-    var vn10 = h('input', p10, c10);
+    let vn10 = h('input', p10, c10);
     c1.push(vn10);
     let expr10 = scope['state'];
     p10.props = {checked:expr10.choice === 'Two'};
     extra.handlers['__11__'] = extra.handlers['__11__'] || ((ev) => {expr10.choice = ev.target.value});
     p10.on['click'] = extra.handlers['__11__'];
     let c12 = [], p12 = {key:12};
-    var vn12 = h('span', p12, c12);
+    let vn12 = h('span', p12, c12);
     c1.push(vn12);
     c12.push({text: \`Choice: \`});
-    var _13 = scope['state'].choice;
+    let _13 = scope['state'].choice;
-    if (_13 || _13 === 0) {
+    if (_13 != null) {
         c12.push({text: _13});
     }
     return vn1;
@@ -1278,19 +1278,19 @@ exports[`t-model directive on an input, type=checkbox 1`] = `
 ) {
     // Template name: \\"SomeComponent\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
-    var _2 = 'checkbox';
+    let _2 = 'checkbox';
     let c3 = [], p3 = {key:3,attrs:{type: _2},on:{}};
-    var vn3 = h('input', p3, c3);
+    let vn3 = h('input', p3, c3);
     c1.push(vn3);
     let expr3 = scope['state'];
     p3.props = {checked: expr3.flag};
     extra.handlers['__4__'] = extra.handlers['__4__'] || ((ev) => {expr3.flag = ev.target.checked});
     p3.on['input'] = extra.handlers['__4__'];
     let c5 = [], p5 = {key:5};
-    var vn5 = h('span', p5, c5);
+    let vn5 = h('span', p5, c5);
     c1.push(vn5);
     if (scope['state'].flag) {
         c5.push({text: \`yes\`});
@@ -1311,7 +1311,7 @@ exports[`top level sub widgets basic use 1`] = `
     let parent = context;
     let scope = Object.create(context);
     let result;
-    var h = this.h;
+    let h = this.h;
     // Component 'Child'
     let w1 = '__2__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__2__']] : false;
     let vn3 = {};
@@ -1350,7 +1350,7 @@ exports[`top level sub widgets can select a sub widget  1`] = `
     let parent = context;
     let scope = Object.create(context);
     let result;
-    var h = this.h;
+    let h = this.h;
     if (scope['env'].flag) {
         // Component 'Child'
         let w1 = '__2__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__2__']] : false;

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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Child'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {message:1};

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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     // Component 'Dialog'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
     let props2 = {};
@@ -43,18 +43,18 @@ exports[`t-slot directive can define and call slots 2`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"Dialog\\"
-    var h = this.h;
+    let h = this.h;
     let c6 = [], p6 = {key:6};
-    var vn6 = h('div', p6, c6);
+    let vn6 = h('div', p6, c6);
     let c7 = [], p7 = {key:7};
-    var vn7 = h('div', p7, c7);
+    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};
-    var vn9 = h('div', p9, c9);
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c5 = [], p5 = {key:5};
-    var vn5 = h('span', p5, c5);
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    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}));
@@ -124,7 +124,7 @@ exports[`t-slot directive default slot work with text nodes 1`] = `
 "function anonymous(context, extra
 ) {
     // Template name: \\"slot_default_template\\"
-    var h = this.h;
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     c1.push(vn4);
     c4.push({text: \`sts\`});
     let c5 = [], p5 = {key:5};
-    var vn5 = h('span', p5, c5);
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     c1.push(vn4);
     c4.push({text: \`sts\`});
     let c5 = [], p5 = {key:5};
-    var vn5 = h('span', p5, c5);
+    let 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\\"
-    var h = this.h;
+    let h = this.h;
     let c4 = [], p4 = {key:4};
-    var vn4 = h('span', p4, c4);
+    let vn4 = h('span', p4, c4);
     const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
     if (slot5) {
         slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
@@ -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 || {};
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c8 = [], p8 = {key:8,on:{}};
-    var vn8 = h('button', p8, c8);
+    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__'];
@@ -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;
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
     let c8 = [], p8 = {key:8,on:{}};
-    var vn8 = h('button', p8, c8);
+    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__'];
@@ -228,10 +228,10 @@ exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
 ) {
     // Template name: \\"Link\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
-    var _12 = scope['props'].to;
+    let _12 = scope['props'].to;
     let c13 = [], p13 = {key:13,attrs:{href: _12}};
-    var vn13 = h('a', p13, c13);
+    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}));
@@ -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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2};
-    var vn2 = h('u', p2, c2);
+    let vn2 = h('u', p2, c2);
     c1.push(vn2);
-    var _3 = scope['state'].users;
+    let _3 = scope['state'].users;
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
-    var _4 = _5 = _3;
+    let _4 = _5 = _3;
     if (!(_3 instanceof Array)) {
         _4 = Object.keys(_3);
         _5 = Object.values(_3);
     }
-    var _length4 = _4.length;
+    let _length4 = _4.length;
-    const _origScope6 = scope;
+    let _origScope6 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length4; i1++) {
         scope.user_first = i1 === 0
@@ -272,7 +272,7 @@ exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
         scope.user_value = _5[i1]
         const nodeKey7 = scope['user'].id;
         let c8 = [], p8 = {key:nodeKey7};
-        var vn8 = h('li', p8, c8);
+        let vn8 = h('li', p8, c8);
         c2.push(vn8);
         // Component 'Link'
         let k10 = \`__10__\` + nodeKey7;
@@ -310,11 +310,11 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
 ) {
     // Template name: \\"slot_default_template\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c8 = extra.parentNode;
     c8.push({text: \`User \`});
-    var _11 = scope['user'].name;
+    let _11 = scope['user'].name;
-    if (_11 || _11 === 0) {
+    if (_11 != null) {
         c8.push({text: _11});
     }
 }"
@@ -325,10 +325,10 @@ exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
 ) {
     // Template name: \\"Link\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
-    var _11 = scope['props'].to;
+    let _11 = scope['props'].to;
     let c12 = [], p12 = {key:12,attrs:{href: _11}};
-    var vn12 = h('a', p12, c12);
+    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}));
@@ -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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     let c2 = [], p2 = {key:2};
-    var vn2 = h('u', p2, c2);
+    let vn2 = h('u', p2, c2);
     c1.push(vn2);
-    var _3 = scope['state'].users;
+    let _3 = scope['state'].users;
     if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
-    var _4 = _5 = _3;
+    let _4 = _5 = _3;
     if (!(_3 instanceof Array)) {
         _4 = Object.keys(_3);
         _5 = Object.values(_3);
     }
-    var _length4 = _4.length;
+    let _length4 = _4.length;
-    const _origScope6 = scope;
+    let _origScope6 = scope;
     scope = Object.assign(Object.create(context), scope);
     for (let i1 = 0; i1 < _length4; i1++) {
         scope.user_first = i1 === 0
@@ -369,7 +369,7 @@ exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
         scope.user_value = _5[i1]
         const nodeKey7 = scope['user'].id;
         let c8 = [], p8 = {key:nodeKey7};
-        var vn8 = h('li', p8, c8);
+        let vn8 = h('li', p8, c8);
         c2.push(vn8);
         scope.userdescr = 'User '+scope['user'].name;
         // Component 'Link'
@@ -408,9 +408,9 @@ exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
 ) {
     // Template name: \\"slot_default_template\\"
     let scope = Object.create(context);
-    var h = this.h;
+    let h = this.h;
     let c8 = extra.parentNode;
-    if (scope.userdescr || scope.userdescr === 0) {
+    if (scope.userdescr != null) {
         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);
-    var h = this.h;
+    let h = this.h;
     let c1 = [], p1 = {key:1};
-    var vn1 = h('div', p1, c1);
+    let vn1 = h('div', p1, c1);
     scope.userdescr = 'User '+scope['state'].user.name;
     // Component 'Link'
     let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
@@ -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);
-    var h = this.h;
+    let h = this.h;
     let c1 = extra.parentNode;
-    if (scope.userdescr || scope.userdescr === 0) {
+    if (scope.userdescr != null) {
         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;
-    var h = this.h;
+    let h = this.h;
     const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
     if (slot6) {
         let children7= []

tests/component/component.test.ts

@@ -4520,7 +4520,7 @@ describe("component error handling (catchError)", () => {
     }
     const app = new App();
     await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div><div>hey</div></div></div>");
+    expect(fixture.innerHTML).toBe("<div><div><div>heyfalse</div></div></div>");
     app.state.flag = true;
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
@@ -4555,7 +4555,7 @@ describe("component error handling (catchError)", () => {
     }
     const app = new App();
     await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div><div>hey</div></div>");
+    expect(fixture.innerHTML).toBe("<div><div>heyfalse</div></div>");
     app.state.flag = true;
     await nextTick();
     expect(fixture.innerHTML).toBe("");

tests/qweb/qweb.test.ts

@@ -152,6 +152,26 @@ describe("t-esc", () => {
     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>");
+  });
+
 });
 
 describe("t-raw", () => {

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);
-    var h = this.h;
+    let h = this.h;
     let _4 = utils.toObj({'router-link-active':scope['isActive']});
-    var _5 = scope['href'];
+    let _5 = scope['href'];
     let c6 = [], p6 = {key:6,attrs:{href: _5},class:_4,on:{}};
-    var vn6 = h('a', p6, c6);
+    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'];

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

@@ -9,7 +9,7 @@ exports[`RouteComponent can render simple cases 1`] = `
     let parent = context;
     let scope = Object.create(context);
     let result;
-    var h = this.h;
+    let h = this.h;
     if (scope['routeComponent']) {
         const nodeKey4 = scope['env'].router.currentRouteName;
         // Component 'routeComponent'