[REL] v2.0.0-beta-7

# 2.0.0-beta-7

- fix: concurrency: do not render delayed fibers when cancelled
- imp: allow duplicate templates if and only if they are the same

CHANGELOG.md

@@ -44,7 +44,6 @@ All changes are documented here in no particular order.
 - breaking: style/class on components are now regular props ([details](#10-styleclass-on-components-are-now-regular-props))
 - new: components can use the `.bind` suffix to bind function props ([doc](doc/reference/props.md#binding-function-props))
 - breaking: `t-on` does not accept expressions, only functions ([details](#30-t-on-does-not-accept-expressions-only-functions))
-- breaking: `t-on` does not work on components any more ([details](#12-t-on-does-not-work-on-components-any-more))
 - new: an error is thrown if an handler defined in a `t-on-` directive is not a function (failed silently previously in some cases)
 - breaking: `t-component` no longer accepts strings ([details](#17-t-component-no-longer-accepts-strings))
 - new: the `this` variable in template expressions is now bound to the component
@@ -313,41 +312,6 @@ Documentation:
 - [Mounting a component](doc/reference/app.md#mount-helper)
 
 
-### 12. `t-on` does not work on components any more
-
-In owl 1, it was possible to bind an event listener on a component tag in a
-template:
-
-```xml
-<SomeComponent t-on-some-event="doSomething"/>
-```
-
-This does not work any more.
-
-Rationale: with the support of fragments, there is no longer a canonical html
-element that we can refer. So, this makes it difficult to implement correctly
-and efficiently. Also, we noticed in practice that the event system was an issue
-in some cases, when components need to communicate before they are mounted. In
-those cases, the better solution is to directly use a callback.  Also, another
-conceptual issue with this is that it kind of breaks the component encapsulation.
-The child component kind of leak its own implementation to the outside world.
-
-Migration: a quick fix that may work in some cases is to simply bind the event
-handler on a parent htmlelement. A better way to do it, if possible, is to change
-the component API to accept explicitely a callback as props. 
-
-```xml
-<SomeComponent onSomeEvent="doSomething"/>
-<!-- or alternatively: -->
-<SomeComponent onSomeEvent.bind="doSomething"/>
-```
-
-Note that one of the example above uses the `.bind` suffix, to bind the function
-prop to the component.  Most of the time, binding the function is necessary, and
-using the `.bind` suffix is very helpful in that case.
-
-Documentation: [Binding function props](doc/reference/props.md#binding-function-props)
-
 ### 13. Portal does no longer transfer DOM events
 
 In Owl 1, a Portal component would listen to events emitted on its portalled

README.md

@@ -82,6 +82,7 @@ Are you new to Owl? This is the place to start!
 - [Component](doc/reference/component.md)
 - [Component Lifecycle](doc/reference/component.md#lifecycle)
 - [Concurrency Model](doc/reference/concurrency_model.md)
+- [Dev mode](doc/reference/app.md#dev-mode)
 - [Dynamic sub components](doc/reference/component.md#dynamic-sub-components)
 - [Environment](doc/reference/environment.md)
 - [Error Handling](doc/reference/error_handling.md)

doc/learning/tutorial_todoapp.md

@@ -240,7 +240,7 @@ class Task extends Component {
   static template = xml /* xml */`
     <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
       <input type="checkbox" t-att-checked="props.task.isCompleted"/>
-      <span><t t-esc="props.task.title"/></span>
+      <span><t t-esc="props.task.text"/></span>
     </div>`;
   static props = ["task"];
 }
@@ -743,7 +743,7 @@ the user experience.
 ```xml
 <input type="checkbox" t-att-checked="props.task.isCompleted"
     t-att-id="props.task.id"
-    t-on-click="dispatch('toggleTask', props.task.id)"/>
+    t-on-click="() => store.toggleTask(props.task)"/>
 <label t-att-for="props.task.id"><t t-esc="props.task.text"/></label>
 ```
 

doc/reference/app.md

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

doc/reference/component.md

@@ -76,7 +76,8 @@ The `Component` class has a very small API.
 
   By default, the render initiated by this method will stop at each child
   component if their props are (shallow) equal. To force a render to update
-  all child components, one can use the optional `deep` argument.
+  all child components, one can use the optional `deep` argument. Note that the
+  value of the `deep` argument needs to be a boolean, not a truthy value.
 
 ## Static Properties
 

doc/reference/event_handling.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta-7",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

src/app/app.ts

@@ -67,7 +67,7 @@ export class App<
   }
 
   makeNode(Component: ComponentConstructor, props: any): ComponentNode {
-    return new ComponentNode(Component, props, this);
+    return new ComponentNode(Component, props, this, null, null);
   }
 
   mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
@@ -101,6 +101,7 @@ export class App<
 
   destroy() {
     if (this.root) {
+      this.scheduler.flush();
       this.root.destroy();
     }
   }

src/app/template_helpers.ts

@@ -1,4 +1,4 @@
-import { BDom, multi, text, toggler } from "../blockdom";
+import { BDom, multi, text, toggler, createCatcher } from "../blockdom";
 import { validateProps } from "../component/props_validation";
 import { Markup } from "../utils";
 import { html } from "../blockdom/index";
@@ -27,7 +27,7 @@ function callSlot(
   const { __render, __ctx, __scope } = slots[name] || {};
   const slotScope = Object.create(__ctx || {});
   if (__scope) {
-    slotScope[__scope] = extra || {};
+    slotScope[__scope] = extra;
   }
   const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
   if (defaultContent) {
@@ -199,4 +199,5 @@ export const helpers = {
   LazyValue,
   safeOutput,
   bind,
+  createCatcher,
 };

src/app/template_set.ts

@@ -79,18 +79,20 @@ export class TemplateSet {
     this.helpers = makeHelpers(this.getTemplate.bind(this));
   }
 
-  addTemplate(
-    name: string,
-    template: string | Element,
-    options: { allowDuplicate?: boolean } = {}
-  ) {
-    if (name in this.rawTemplates && !options.allowDuplicate) {
-      throw new Error(`Template ${name} already defined`);
+  addTemplate(name: string, template: string | Element) {
+    if (name in this.rawTemplates) {
+      const rawTemplate = this.rawTemplates[name];
+      const currentAsString = typeof rawTemplate === "string" ? rawTemplate : rawTemplate.outerHTML;
+      const newAsString = typeof template === "string" ? template : template.outerHTML;
+      if (currentAsString === newAsString) {
+        return;
+      }
+      throw new Error(`Template ${name} already defined with different content`);
     }
     this.rawTemplates[name] = template;
   }
 
-  addTemplates(xml: string | Document, options: { allowDuplicate?: boolean } = {}) {
+  addTemplates(xml: string | Document) {
     if (!xml) {
       // empty string
       return;
@@ -98,7 +100,7 @@ export class TemplateSet {
     xml = xml instanceof Document ? xml : parseXML(xml);
     for (const template of xml.querySelectorAll("[t-name]")) {
       const name = template.getAttribute("t-name")!;
-      this.addTemplate(name, template, options);
+      this.addTemplate(name, template);
     }
   }
 

src/blockdom/attributes.ts

@@ -139,7 +139,8 @@ export function updateClass(this: HTMLElement, val: any, oldVal: any) {
 
 export function makePropSetter(name: string): Setter<HTMLElement> {
   return function setProp(this: HTMLElement, value: any) {
-    (this as any)[name] = value || "";
+    // support 0, fallback to empty string for other falsy values
+    (this as any)[name] = value === 0 ? 0 : value || "";
   };
 }
 

src/blockdom/event_catcher.ts

@@ -0,0 +1,89 @@
+import { createEventHandler } from "./events";
+import type { VNode } from "./index";
+
+type EventsSpec = { [name: string]: number };
+
+type Catcher = (child: VNode, handlers: any[]) => VNode;
+
+export function createCatcher(eventsSpec: EventsSpec): Catcher {
+  let setupFns: any[] = [];
+  let removeFns: any[] = [];
+  for (let name in eventsSpec) {
+    let index = eventsSpec[name];
+    let { setup, remove } = createEventHandler(name);
+    setupFns[index] = setup;
+    removeFns[index] = remove;
+  }
+  let n = setupFns.length;
+
+  class VCatcher {
+    child: VNode;
+    handlers: any[];
+
+    parentEl?: HTMLElement | undefined;
+    afterNode: Node | null = null;
+
+    constructor(child: VNode, handlers: any[]) {
+      this.child = child;
+      this.handlers = handlers;
+    }
+
+    mount(parent: HTMLElement, afterNode: Node | null) {
+      this.parentEl = parent;
+      this.afterNode = afterNode;
+      this.child.mount(parent, afterNode);
+      for (let i = 0; i < n; i++) {
+        let origFn = this.handlers[i][0];
+        const self = this;
+        this.handlers[i][0] = function (ev: any) {
+          const target = ev.target;
+          let currentNode: any = self.child.firstNode();
+          const afterNode = self.afterNode;
+          while (currentNode !== afterNode) {
+            if (currentNode.contains(target)) {
+              return origFn.call(this, ev);
+            }
+            currentNode = currentNode.nextSibling;
+          }
+        };
+        setupFns[i].call(parent, this.handlers[i]);
+      }
+    }
+
+    moveBefore(other: VCatcher | null, afterNode: Node | null) {
+      this.afterNode = null;
+      this.child.moveBefore(other ? other.child : null, afterNode);
+    }
+
+    patch(other: VCatcher, withBeforeRemove: boolean) {
+      if (this === other) {
+        return;
+      }
+      this.handlers = other.handlers;
+      this.child.patch(other.child, withBeforeRemove);
+    }
+
+    beforeRemove() {
+      this.child.beforeRemove();
+    }
+
+    remove() {
+      for (let i = 0; i < n; i++) {
+        removeFns[i].call(this.parentEl!);
+      }
+      this.child.remove();
+    }
+
+    firstNode(): Node | undefined {
+      return this.child.firstNode();
+    }
+
+    toString(): string {
+      return this.child.toString();
+    }
+  }
+
+  return function (child: VNode, handlers: any[]): VNode<VCatcher> {
+    return new VCatcher(child, handlers);
+  };
+}

src/blockdom/events.ts

@@ -5,6 +5,7 @@ type EventHandlerSetter = (this: HTMLElement, data: any) => void;
 interface EventHandlerCreator {
   setup: EventHandlerSetter;
   update: EventHandlerSetter;
+  remove: (this: HTMLElement) => void;
 }
 
 export function createEventHandler(rawEvent: string): EventHandlerCreator {
@@ -38,11 +39,15 @@ function createElementHandler(evName: string, capture: boolean = false): EventHa
     this.addEventListener(evName, listener, { capture });
   }
 
+  function remove(this: HTMLElement) {
+    delete (this as any)[eventKey];
+    this.removeEventListener(evName, listener, { capture });
+  }
   function update(this: HTMLElement, data: any) {
     (this as any)[eventKey] = data;
   }
 
-  return { setup, update };
+  return { setup, update, remove };
 }
 
 // Synthetic handler: a form of event delegation that allows placing only one
@@ -60,7 +65,12 @@ function createSyntheticHandler(evName: string, capture: boolean = false): Event
     _data[currentId] = data;
     (this as any)[eventKey] = _data;
   }
-  return { setup, update: setup };
+
+  function remove(this: HTMLElement) {
+    delete (this as any)[eventKey];
+  }
+
+  return { setup, update: setup, remove };
 }
 
 function nativeToSyntheticEvent(eventKey: string, event: Event) {

src/blockdom/index.ts

@@ -6,6 +6,7 @@ export { list } from "./list";
 export { multi } from "./multi";
 export { text, comment } from "./text";
 export { html } from "./html";
+export { createCatcher } from "./event_catcher";
 
 export interface VNode<T = any> {
   mount(parent: HTMLElement, afterNode: Node | null): void;

src/compiler/code_generator.ts

@@ -20,6 +20,8 @@ import {
   ASTTranslation,
   ASTType,
   ASTTPortal,
+  EventHandlers,
+  Attrs,
 } from "./parser";
 
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
@@ -157,9 +159,11 @@ class CodeTarget {
   // maps ref name to [id, expr]
   refInfo: { [name: string]: [string, string] } = {};
   shouldProtectScope: boolean = false;
+  on: EventHandlers | null;
 
-  constructor(name: string) {
+  constructor(name: string, on?: EventHandlers | null) {
     this.name = name;
+    this.on = on || null;
   }
 
   addLine(line: string, idx?: number) {
@@ -216,7 +220,7 @@ export class CodeGenerator {
   translateFn: (s: string) => string;
   translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
-  staticCalls: { id: string; template: string }[] = [];
+  staticDefs: { id: string; expr: string }[] = [];
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
@@ -262,8 +266,8 @@ export class CodeGenerator {
       mainCode.push(`// Template name: "${this.templateName}"`);
     }
 
-    for (let { id, template } of this.staticCalls) {
-      mainCode.push(`const ${id} = getTemplate(${template});`);
+    for (let { id, expr } of this.staticDefs) {
+      mainCode.push(`const ${id} = ${expr};`);
     }
 
     // define all blocks
@@ -303,20 +307,23 @@ export class CodeGenerator {
     return code;
   }
 
-  compileInNewTarget(prefix: string, ast: AST, ctx: Context): string {
+  compileInNewTarget(prefix: string, ast: AST, ctx: Context, on?: EventHandlers | null): string {
     const name = this.generateId(prefix);
     const initialTarget = this.target;
-    const target = new CodeTarget(name);
+    const target = new CodeTarget(name, on);
     this.targets.push(target);
     this.target = target;
-    const subCtx: Context = createContext(ctx);
-    this.compileAST(ast, subCtx);
+    this.compileAST(ast, createContext(ctx));
     this.target = initialTarget;
     return name;
   }
 
-  addLine(line: string) {
-    this.target.addLine(line);
+  addLine(line: string, idx?: number) {
+    this.target.addLine(line, idx);
+  }
+
+  define(varName: string, expr: string) {
+    this.addLine(`const ${varName} = ${expr};`);
   }
 
   generateId(prefix: string = ""): string {
@@ -368,9 +375,12 @@ export class CodeGenerator {
     }
 
     if (block.isRoot && !ctx.preventRoot) {
+      if (this.target.on) {
+        blockExpr = this.wrapWithEventCatcher(blockExpr, this.target.on);
+      }
       this.addLine(`return ${blockExpr};`);
     } else {
-      this.addLine(`let ${block.varName} = ${blockExpr};`);
+      this.define(block.varName, blockExpr);
     }
   }
 
@@ -399,7 +409,7 @@ export class CodeGenerator {
           if (!mapping.has(tok.varName)) {
             const varId = this.generateId("v");
             mapping.set(tok.varName, varId);
-            this.addLine(`const ${varId} = ${tok.value};`);
+            this.define(varId, tok.value);
           }
           tok.value = mapping.get(tok.varName)!;
         }
@@ -544,12 +554,12 @@ export class CodeGenerator {
       this.blocks.push(block);
       if (ast.dynamicTag) {
         const tagExpr = this.generateId("tag");
-        this.addLine(`let ${tagExpr} = ${compileExpr(ast.dynamicTag)};`);
+        this.define(tagExpr, compileExpr(ast.dynamicTag));
         block.dynamicTagName = tagExpr;
       }
     }
     // attributes
-    const attrs: { [key: string]: string } = {};
+    const attrs: Attrs = {};
     const nameSpace = ast.ns || ctx.nameSpace;
     if (nameSpace && isNewBlock) {
       // specific namespace uri
@@ -639,11 +649,11 @@ export class CodeGenerator {
 
       const baseExpression = compileExpr(baseExpr);
       const bExprId = this.generateId("bExpr");
-      this.addLine(`const ${bExprId} = ${baseExpression};`);
+      this.define(bExprId, baseExpression);
 
       const expression = compileExpr(expr);
       const exprId = this.generateId("expr");
-      this.addLine(`const ${exprId} = ${expression};`);
+      this.define(exprId, expression);
 
       const fullExpression = `${bExprId}[${exprId}]`;
 
@@ -654,7 +664,7 @@ export class CodeGenerator {
       } else if (hasDynamicChildren) {
         const bValueId = this.generateId("bValue");
         tModelSelectedExpr = `${bValueId}`;
-        this.addLine(`let ${tModelSelectedExpr} = ${fullExpression}`);
+        this.define(tModelSelectedExpr, fullExpression);
       } else {
         idx = block!.insertData(`${fullExpression}`, "attr");
         attrs[`block-attribute-${idx}`] = targetAttr;
@@ -704,13 +714,13 @@ export class CodeGenerator {
         const children = block!.children.slice();
         let current = children.shift();
         for (let i = codeIdx; i < code.length; i++) {
-          if (code[i].trimStart().startsWith(`let ${current!.varName} `)) {
-            code[i] = code[i].replace(`let ${current!.varName}`, current!.varName);
+          if (code[i].trimStart().startsWith(`const ${current!.varName} `)) {
+            code[i] = code[i].replace(`const ${current!.varName}`, current!.varName);
             current = children.shift();
             if (!current) break;
           }
         }
-        this.target.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
     }
   }
@@ -799,13 +809,13 @@ export class CodeGenerator {
         const children = block!.children.slice();
         let current = children.shift();
         for (let i = codeIdx; i < code.length; i++) {
-          if (code[i].trimStart().startsWith(`let ${current!.varName} `)) {
-            code[i] = code[i].replace(`let ${current!.varName}`, current!.varName);
+          if (code[i].trimStart().startsWith(`const ${current!.varName} `)) {
+            code[i] = code[i].replace(`const ${current!.varName}`, current!.varName);
             current = children.shift();
             if (!current) break;
           }
         }
-        this.target.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+        this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
       }
 
       // note: this part is duplicated from end of compilemulti:
@@ -828,12 +838,10 @@ export class CodeGenerator {
     const l = `l_block${block.id}`;
     const c = `c_block${block.id}`;
     this.helpers.add("prepareList");
-    this.addLine(
-      `const [${keys}, ${vals}, ${l}, ${c}] = prepareList(${compileExpr(ast.collection)});`
-    );
+    this.define(`[${keys}, ${vals}, ${l}, ${c}]`, `prepareList(${compileExpr(ast.collection)});`);
     // Throw errors on duplicate keys in dev mode
     if (this.dev) {
-      this.addLine(`const keys${block.id} = new Set();`);
+      this.define(`keys${block.id}`, `new Set()`);
     }
     this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
     this.target.indentLevel++;
@@ -850,7 +858,7 @@ export class CodeGenerator {
     if (!ast.hasNoValue) {
       this.addLine(`ctx[\`${ast.elem}_value\`] = ${keys}[${loopVar}];`);
     }
-    this.addLine(`let key${this.target.loopLevel} = ${ast.key ? compileExpr(ast.key) : loopVar};`);
+    this.define(`key${this.target.loopLevel}`, ast.key ? compileExpr(ast.key) : loopVar);
     if (this.dev) {
       // Throw error on duplicate keys in dev mode
       this.addLine(
@@ -862,8 +870,8 @@ export class CodeGenerator {
     if (ast.memo) {
       this.target.hasCache = true;
       id = this.generateId();
-      this.addLine(`let memo${id} = ${compileExpr(ast.memo)}`);
-      this.addLine(`let vnode${id} = cache[key${this.target.loopLevel}];`);
+      this.define(`memo${id}`, compileExpr(ast.memo));
+      this.define(`vnode${id}`, `cache[key${this.target.loopLevel}];`);
       this.addLine(`if (vnode${id}) {`);
       this.target.indentLevel++;
       this.addLine(`if (shallowEqual(vnode${id}.memo, memo${id})) {`);
@@ -897,7 +905,7 @@ export class CodeGenerator {
 
   compileTKey(ast: ASTTKey, ctx: Context) {
     const tKeyExpr = this.generateId("tKey_");
-    this.addLine(`const ${tKeyExpr} = ${compileExpr(ast.expr)};`);
+    this.define(tKeyExpr, compileExpr(ast.expr));
     ctx = createContext(ctx, {
       tKeyExpr,
       block: ctx.block,
@@ -943,13 +951,13 @@ export class CodeGenerator {
           const children = block!.children.slice();
           let current = children.shift();
           for (let i = codeIdx; i < code.length; i++) {
-            if (code[i].trimStart().startsWith(`let ${current!.varName} `)) {
-              code[i] = code[i].replace(`let ${current!.varName}`, current!.varName);
+            if (code[i].trimStart().startsWith(`const ${current!.varName} `)) {
+              code[i] = code[i].replace(`const ${current!.varName}`, current!.varName);
               current = children.shift();
               if (!current) break;
             }
           }
-          this.target.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
+          this.addLine(`let ${block!.children.map((c) => c.varName)};`, codeIdx);
         }
       }
 
@@ -982,7 +990,7 @@ export class CodeGenerator {
     const key = `key + \`${this.generateComponentKey()}\``;
     if (isDynamic) {
       const templateVar = this.generateId("template");
-      this.addLine(`const ${templateVar} = ${subTemplate};`);
+      this.define(templateVar, subTemplate);
       block = this.createBlock(block, "multi", ctx);
       this.helpers.add("call");
       this.insertBlock(`call(this, ${templateVar}, ctx, node, ${key})`, block!, {
@@ -992,7 +1000,7 @@ export class CodeGenerator {
     } else {
       const id = this.generateId(`callTemplate_`);
       this.helpers.add("getTemplate");
-      this.staticCalls.push({ id, template: subTemplate });
+      this.staticDefs.push({ id, expr: `getTemplate(${subTemplate})` });
       block = this.createBlock(block, "multi", ctx);
       this.insertBlock(`${id}.call(this, ctx, node, ${key})`, block!, {
         ...ctx,
@@ -1087,30 +1095,31 @@ export class CodeGenerator {
 
   compileComponent(ast: ASTComponent, ctx: Context) {
     let { block } = ctx;
-
     // props
-    const hasSlotsProp = "slots" in ast.props;
+    const hasSlotsProp = "slots" in (ast.props || {});
     const props: string[] = [];
-    const propExpr = this.formatPropObject(ast.props);
+    const propExpr = this.formatPropObject(ast.props || {});
     if (propExpr) {
       props.push(propExpr);
     }
 
     // slots
-    const hasSlot = !!Object.keys(ast.slots).length;
     let slotDef: string = "";
-    if (hasSlot) {
+    if (ast.slots) {
       let ctxStr = "ctx";
       if (this.target.loopLevel || !this.hasSafeContext) {
         ctxStr = this.generateId("ctx");
         this.helpers.add("capture");
-        this.addLine(`const ${ctxStr} = capture(ctx);`);
+        this.define(ctxStr, `capture(ctx)`);
       }
       let slotStr: string[] = [];
       for (let slotName in ast.slots) {
-        const slotAst = ast.slots[slotName].content;
-        const name = this.compileInNewTarget("slot", slotAst, ctx);
-        const params = [`__render: ${name}, __ctx: ${ctxStr}`];
+        const slotAst = ast.slots[slotName];
+        const params = [];
+        if (slotAst.content) {
+          const name = this.compileInNewTarget("slot", slotAst.content, ctx, slotAst.on);
+          params.push(`__render: ${name}, __ctx: ${ctxStr}`);
+        }
         const scope = ast.slots[slotName].scope;
         if (scope) {
           params.push(`__scope: "${scope}"`);
@@ -1141,7 +1150,7 @@ export class CodeGenerator {
     let propVar: string;
     if ((slotDef && (ast.dynamicProps || hasSlotsProp)) || this.dev) {
       propVar = this.generateId("props");
-      this.addLine(`const ${propVar!} = ${propString};`);
+      this.define(propVar!, propString);
       propString = propVar!;
     }
 
@@ -1155,7 +1164,7 @@ export class CodeGenerator {
     let expr: string;
     if (ast.isDynamic) {
       expr = this.generateId("Comp");
-      this.addLine(`let ${expr} = ${compileExpr(ast.name)};`);
+      this.define(expr, compileExpr(ast.name));
     } else {
       expr = `\`${ast.name}\``;
     }
@@ -1178,10 +1187,32 @@ export class CodeGenerator {
     if (ast.isDynamic) {
       blockExpr = `toggler(${expr}, ${blockExpr})`;
     }
+
+    // event handling
+    if (ast.on) {
+      blockExpr = this.wrapWithEventCatcher(blockExpr, ast.on);
+    }
+
     block = this.createBlock(block, "multi", ctx);
     this.insertBlock(blockExpr, block, ctx);
   }
 
+  wrapWithEventCatcher(expr: string, on: EventHandlers): string {
+    this.helpers.add("createCatcher");
+    let name = this.generateId("catcher");
+    let spec: any = {};
+    let handlers: any[] = [];
+    for (let ev in on) {
+      let handlerId = this.generateId("hdlr");
+      let idx = handlers.push(handlerId) - 1;
+      spec[ev] = idx;
+      const handler = this.generateHandlerCode(ev, on[ev]);
+      this.define(handlerId, handler);
+    }
+    this.staticDefs.push({ id: name, expr: `createCatcher(${JSON.stringify(spec)})` });
+    return `${name}(${expr}, [${handlers.join(",")}])`;
+  }
+
   compileTSlot(ast: ASTSlot, ctx: Context) {
     this.helpers.add("callSlot");
     let { block } = ctx;
@@ -1202,12 +1233,17 @@ export class CodeGenerator {
     } else {
       if (dynamic) {
         let name = this.generateId("slot");
-        this.addLine(`const ${name} = ${slotName};`);
-        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}), ${dynamic}, ${scope})`;
+        this.define(name, slotName);
+        blockString = `toggler(${name}, callSlot(ctx, node, key, ${name}, ${dynamic}, ${scope}))`;
       } else {
         blockString = `callSlot(ctx, node, key, ${slotName}, ${dynamic}, ${scope})`;
       }
     }
+    // event handling
+    if (ast.on) {
+      blockString = this.wrapWithEventCatcher(blockString, ast.on);
+    }
+
     if (block) {
       this.insertAnchor(block);
     }
@@ -1230,7 +1266,7 @@ export class CodeGenerator {
     if (this.target.loopLevel || !this.hasSafeContext) {
       ctxStr = this.generateId("ctx");
       this.helpers.add("capture");
-      this.addLine(`const ${ctxStr} = capture(ctx);`);
+      this.define(ctxStr, `capture(ctx);`);
     }
     const blockString = `component(Portal, {target: ${ast.target},slots: {'default': {__render: ${name}, __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx)`;
     if (block) {

src/compiler/inline_expressions.ts

@@ -199,15 +199,18 @@ const TOKENIZERS = [
 export function tokenize(expr: string): Token[] {
   const result: Token[] = [];
   let token: boolean | Token = true;
+  let error: any;
+  let current = expr;
 
+  try {
     while (token) {
-    expr = expr.trim();
-    if (expr) {
+      current = current.trim();
+      if (current) {
         for (let tokenizer of TOKENIZERS) {
-        token = tokenizer(expr);
+          token = tokenizer(current);
           if (token) {
             result.push(token);
-          expr = expr.slice(token.size || token.value.length);
+            current = current.slice(token.size || token.value.length);
             break;
           }
         }
@@ -215,8 +218,11 @@ export function tokenize(expr: string): Token[] {
         token = false;
       }
     }
-  if (expr.length) {
-    throw new Error(`Tokenizer error: could not tokenize "${expr}"`);
+  } catch (e) {
+    error = e; // Silence all errors and throw a generic error below
+  }
+  if (current.length || error) {
+    throw new Error(`Tokenizer error: could not tokenize \`${expr}\``);
   }
   return result;
 }

src/compiler/parser.ts

@@ -2,6 +2,9 @@
 // AST Type definition
 // -----------------------------------------------------------------------------
 
+export type EventHandlers = { [eventName: string]: string };
+export type Attrs = { [attrs: string]: string };
+
 export const enum ASTType {
   Text,
   Comment,
@@ -34,25 +37,25 @@ export interface ASTComment {
 }
 
 interface TModelInfo {
-  hasDynamicChildren?: boolean;
   baseExpr: string;
   expr: string;
   targetAttr: string;
-  specialInitTargetAttr: string | null;
   eventType: "change" | "click" | "input";
   shouldTrim: boolean;
   shouldNumberize: boolean;
+  hasDynamicChildren: boolean;
+  specialInitTargetAttr: string | null;
 }
 
 export interface ASTDomNode {
   type: ASTType.DomNode;
   tag: string;
-  dynamicTag: string | null;
-  attrs: { [key: string]: string };
   content: AST[];
+  attrs: Attrs | null;
   ref: string | null;
-  on: { [key: string]: string };
-  model?: TModelInfo | null;
+  on: EventHandlers | null;
+  model: TModelInfo | null;
+  dynamicTag: string | null;
   ns: string | null;
 }
 
@@ -93,13 +96,13 @@ export interface ASTTForEach {
   type: ASTType.TForEach;
   collection: string;
   elem: string;
-  key: string | null;
   body: AST;
   memo: string;
   hasNoFirst: boolean;
   hasNoLast: boolean;
   hasNoIndex: boolean;
   hasNoValue: boolean;
+  key: string | null;
 }
 
 export interface ASTTKey {
@@ -114,19 +117,28 @@ export interface ASTTCall {
   body: AST[] | null;
 }
 
+interface SlotDefinition {
+  content: AST | null;
+  scope: string | null;
+  on: EventHandlers | null;
+  attrs: Attrs | null;
+}
+
 export interface ASTComponent {
   type: ASTType.TComponent;
   name: string;
   isDynamic: boolean;
   dynamicProps: string | null;
-  props: { [name: string]: string };
-  slots: { [name: string]: { content: AST; attrs?: { [key: string]: string }; scope?: string } };
+  on: EventHandlers | null;
+  props: { [name: string]: string } | null;
+  slots: { [name: string]: SlotDefinition } | null;
 }
 
 export interface ASTSlot {
   type: ASTType.TSlot;
   name: string;
-  attrs: { [key: string]: string };
+  attrs: Attrs | null;
+  on: EventHandlers | null;
   defaultContent: AST | null;
 }
 
@@ -319,8 +331,8 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
   node.removeAttribute("t-ref");
 
   const nodeAttrsNames = node.getAttributeNames();
-  const attrs: ASTDomNode["attrs"] = {};
-  const on: ASTDomNode["on"] = {};
+  let attrs: ASTDomNode["attrs"] = null;
+  let on: EventHandlers | null = null;
   let model: TModelInfo | null = null;
 
   for (let attr of nodeAttrsNames) {
@@ -329,6 +341,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       if (attr === "t-on") {
         throw new Error("Missing event name with t-on directive");
       }
+      on = on || {};
       on[attr.slice(5)] = value;
     } else if (attr.startsWith("t-model")) {
       if (!["input", "select", "textarea"].includes(tagName)) {
@@ -366,6 +379,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
         targetAttr: isCheckboxInput ? "checked" : "value",
         specialInitTargetAttr: isRadioInput ? "checked" : null,
         eventType,
+        hasDynamicChildren: false,
         shouldTrim: hasTrimMod && (isOtherInput || isTextarea),
         shouldNumberize: hasNumberMod && (isOtherInput || isTextarea),
       };
@@ -384,6 +398,7 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       if (tModel && ["t-att-value", "t-attf-value"].includes(attr)) {
         tModel.hasDynamicChildren = true;
       }
+      attrs = attrs || {};
       attrs[attr] = value;
     }
   }
@@ -554,7 +569,7 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
     if (ast && ast.type === ASTType.TComponent) {
       return {
         ...ast,
-        slots: { default: { content: tcall } },
+        slots: { default: { content: tcall, scope: null, on: null, attrs: null } },
       };
     }
   }
@@ -650,7 +665,6 @@ function parseTSetNode(node: Element, ctx: ParsingContext): AST | null {
 
 // Error messages when trying to use an unsupported directive on a component
 const directiveErrorMap = new Map([
-  ["t-on", "t-on is no longer supported on components. Consider passing a callback in props."],
   [
     "t-ref",
     "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop.",
@@ -684,19 +698,26 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
 
   const defaultSlotScope = node.getAttribute("t-slot-scope");
   node.removeAttribute("t-slot-scope");
+  let on: ASTComponent["on"] = null;
 
-  const props: ASTComponent["props"] = {};
+  let props: ASTComponent["props"] = null;
   for (let name of node.getAttributeNames()) {
     const value = node.getAttribute(name)!;
     if (name.startsWith("t-")) {
+      if (name.startsWith("t-on-")) {
+        on = on || {};
+        on[name.slice(5)] = value;
+      } else {
         const message = directiveErrorMap.get(name.split("-").slice(0, 2).join("-"));
         throw new Error(message || `unsupported directive on Component: ${name}`);
+      }
     } else {
+      props = props || {};
       props[name] = value;
     }
   }
 
-  const slots: ASTComponent["slots"] = {};
+  let slots: ASTComponent["slots"] | null = null;
   if (node.hasChildNodes()) {
     const clone = <Element>node.cloneNode(true);
 
@@ -728,34 +749,34 @@ function parseComponent(node: Element, ctx: ParsingContext): AST | null {
       slotNode.removeAttribute("t-set-slot");
       slotNode.remove();
       const slotAst = parseNode(slotNode, ctx);
-      if (slotAst) {
-        const slotInfo: any = { content: slotAst };
-        const attrs: { [key: string]: string } = {};
+      let on: SlotDefinition["on"] = null;
+      let attrs: Attrs | null = null;
+      let scope: string | null = null;
       for (let attributeName of slotNode.getAttributeNames()) {
         const value = slotNode.getAttribute(attributeName)!;
         if (attributeName === "t-slot-scope") {
-            slotInfo.scope = value;
+          scope = value;
           continue;
-          }
+        } else if (attributeName.startsWith("t-on-")) {
+          on = on || {};
+          on[attributeName.slice(5)] = value;
+        } else {
+          attrs = attrs || {};
           attrs[attributeName] = value;
         }
-        if (Object.keys(attrs).length) {
-          slotInfo.attrs = attrs;
-        }
-        slots[name] = slotInfo;
       }
+      slots = slots || {};
+      slots[name] = { content: slotAst, on, attrs, scope };
     }
 
     // default slot
     const defaultContent = parseChildNodes(clone, ctx);
     if (defaultContent) {
-      slots.default = { content: defaultContent };
-      if (defaultSlotScope) {
-        slots.default.scope = defaultSlotScope;
+      slots = slots || {};
+      slots.default = { content: defaultContent, on, attrs: null, scope: defaultSlotScope };
     }
   }
-  }
-  return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots };
+  return { type: ASTType.TComponent, name, isDynamic, dynamicProps, props, slots, on };
 }
 
 // -----------------------------------------------------------------------------
@@ -768,15 +789,23 @@ function parseTSlot(node: Element, ctx: ParsingContext): AST | null {
   }
   const name = node.getAttribute("t-slot")!;
   node.removeAttribute("t-slot");
-  const attrs: { [key: string]: string } = {};
+  let attrs: Attrs | null = null;
+  let on: ASTComponent["on"] = null;
   for (let attributeName of node.getAttributeNames()) {
     const value = node.getAttribute(attributeName)!;
+    if (attributeName.startsWith("t-on-")) {
+      on = on || {};
+      on[attributeName.slice(5)] = value;
+    } else {
+      attrs = attrs || {};
       attrs[attributeName] = value;
     }
+  }
   return {
     type: ASTType.TSlot,
     name,
     attrs,
+    on,
     defaultContent: parseChildNodes(node, ctx),
   };
 }

src/component/component.ts

@@ -37,6 +37,6 @@ export class Component<Props = any, Env = any> {
   setup() {}
 
   render(deep: boolean = false) {
-    this.__owl__.render(deep);
+    this.__owl__.render(deep === true);
   }
 }

src/component/component_node.ts

@@ -2,23 +2,16 @@ import type { App, Env } from "../app/app";
 import { BDom, VNode } from "../blockdom";
 import {
   clearReactivesForCallback,
+  getSubscriptions,
+  NonReactive,
   Reactive,
   reactive,
   TARGET,
-  NonReactive,
-  getSubscriptions,
 } from "../reactivity";
 import { batched, Callback } from "../utils";
 import { Component, ComponentConstructor } from "./component";
 import { fibersInError, handleError } from "./error_handling";
-import {
-  Fiber,
-  makeChildFiber,
-  makeRootFiber,
-  MountFiber,
-  MountOptions,
-  RootFiber,
-} from "./fibers";
+import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
 import { applyDefaultProps } from "./props_validation";
 import { STATUS } from "./status";
 
@@ -54,17 +47,10 @@ export function useState<T extends object>(state: T): Reactive<T> | NonReactive<
   const node = getCurrent();
   let render = batchedRenderFunctions.get(node)!;
   if (!render) {
-    render = batched(node.render.bind(node));
+    render = batched(node.render.bind(node, false));
     batchedRenderFunctions.set(node, render);
     // manual implementation of onWillDestroy to break cyclic dependency
     node.willDestroy.push(clearReactivesForCallback.bind(null, render));
-    if (node.app.dev) {
-      Object.defineProperty(node, "subscriptions", {
-        get() {
-          return getSubscriptions(render);
-        },
-      });
-    }
   }
   return reactive(state, render);
 }
@@ -93,13 +79,8 @@ export function component<P extends object>(
   let node: any = ctx.children[key];
   let isDynamic = typeof name !== "string";
 
-  if (node) {
-    if (node.status < STATUS.MOUNTED) {
-      node.destroy();
+  if (node && node.status === STATUS.DESTROYED) {
     node = undefined;
-    } else if (node.status === STATUS.DESTROYED) {
-      node = undefined;
-    }
   }
   if (isDynamic && node && node.component.constructor !== name) {
     node = undefined;
@@ -128,11 +109,11 @@ export function component<P extends object>(
         throw new Error(`Cannot find the definition of component "${name}"`);
       }
     }
-    node = new ComponentNode(C, props, ctx.app, ctx);
+    node = new ComponentNode(C, props, ctx.app, ctx, key);
     ctx.children[key] = node;
-
     node.initiateRender(new Fiber(node, parentFiber));
   }
+  parentFiber.childrenMap[key] = node;
   return node;
 }
 
@@ -150,6 +131,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   bdom: BDom | null = null;
   status: STATUS = STATUS.NEW;
   forceNextRender: boolean = false;
+  parentKey: string | null;
 
   renderFn: Function;
   parent: ComponentNode | null;
@@ -166,10 +148,17 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   patched: LifecycleHook[] = [];
   willDestroy: LifecycleHook[] = [];
 
-  constructor(C: ComponentConstructor<P, E>, props: P, app: App, parent?: ComponentNode) {
+  constructor(
+    C: ComponentConstructor<P, E>,
+    props: P,
+    app: App,
+    parent: ComponentNode | null,
+    parentKey: string | null
+  ) {
     currentNode = this;
     this.app = app;
-    this.parent = parent || null;
+    this.parent = parent;
+    this.parentKey = parentKey;
     this.level = parent ? parent.level + 1 : 0;
     applyDefaultProps(props, C);
     const env = (parent && parent.childEnv) || app.env;
@@ -200,13 +189,13 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     if (this.status === STATUS.NEW && this.fiber === fiber) {
-      this._render(fiber);
+      fiber.render();
     }
   }
 
-  async render(deep: boolean = false) {
+  async render(deep: boolean) {
     let current = this.fiber;
-    if (current && current.root!.locked) {
+    if (current && (current.root!.locked || (current as any).bdom === true)) {
       await Promise.resolve();
       // situation may have changed after the microtask tick
       current = this.fiber;
@@ -228,6 +217,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     const fiber = makeRootFiber(this);
     fiber.deep = deep;
     this.fiber = fiber;
+
     this.app.scheduler.addFiber(fiber);
     await Promise.resolve();
     if (this.status === STATUS.DESTROYED) {
@@ -245,16 +235,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     //   embedded in a rendering coming from above, so the fiber will be rendered
     //   in the next microtick anyway, so we should not render it again.
     if (this.fiber === fiber && (current || !fiber.parent)) {
-      this._render(fiber);
-    }
-  }
-
-  _render(fiber: Fiber | RootFiber) {
-    try {
-      fiber.bdom = this.renderFn();
-      fiber.root!.counter--;
-    } catch (e) {
-      handleError({ node: this, error: e });
+      fiber.render();
     }
   }
 
@@ -276,9 +257,15 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     for (let child of Object.values(this.children)) {
       child._destroy();
     }
+    if (this.willDestroy.length) {
+      try {
         for (let cb of this.willDestroy) {
           cb.call(component);
         }
+      } catch (e) {
+        handleError({ error: e, node: this });
+      }
+    }
     this.status = STATUS.DESTROYED;
   }
 
@@ -298,7 +285,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
       return;
     }
     component.props = props;
-    this._render(fiber);
+    fiber.render();
     const parentRoot = parentFiber.root!;
     if (this.willPatch.length) {
       parentRoot.willPatch.push(fiber);
@@ -348,6 +335,7 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     bdom.mount(parent, anchor);
     this.status = STATUS.MOUNTED;
     this.fiber!.appliedToDom = true;
+    this.children = this.fiber!.childrenMap;
     this.fiber = null;
   }
 
@@ -365,10 +353,8 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
   }
   _patch() {
     const hasChildren = Object.keys(this.children).length > 0;
+    this.children = this.fiber!.childrenMap;
     this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
-    if (hasChildren) {
-      this.cleanOutdatedChildren();
-    }
     this.fiber!.appliedToDom = true;
     this.fiber = null;
   }
@@ -381,17 +367,15 @@ export class ComponentNode<P extends object = any, E = any> implements VNode<Com
     this.bdom!.remove();
   }
 
-  cleanOutdatedChildren() {
-    const children = this.children;
-    for (const key in children) {
-      const node = children[key];
-      const status = node.status;
-      if (status !== STATUS.MOUNTED) {
-        delete children[key];
-        if (status !== STATUS.DESTROYED) {
-          node.destroy();
-        }
-      }
+  // ---------------------------------------------------------------------------
+  // Some debug helpers
+  // ---------------------------------------------------------------------------
+  get name(): string {
+    return this.component.constructor.name;
   }
+
+  get subscriptions(): ReturnType<typeof getSubscriptions> {
+    const render = batchedRenderFunctions.get(this);
+    return render ? getSubscriptions(render) : [];
   }
 }

src/component/error_handling.ts

@@ -5,7 +5,7 @@ import type { Fiber } from "./fibers";
 export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
 export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
 
-function _handleError(node: ComponentNode | null, error: any, isFirstRound = false): boolean {
+function _handleError(node: ComponentNode | null, error: any): boolean {
   if (!node) {
     return false;
   }
@@ -16,22 +16,19 @@ function _handleError(node: ComponentNode | null, error: any, isFirstRound = fal
 
   const errorHandlers = nodeErrorHandlers.get(node);
   if (errorHandlers) {
-    let stopped = false;
+    let handled = false;
     // execute in the opposite order
     for (let i = errorHandlers.length - 1; i >= 0; i--) {
       try {
         errorHandlers[i](error);
-        stopped = true;
+        handled = true;
         break;
       } catch (e) {
         error = e;
       }
     }
 
-    if (stopped) {
-      if (isFirstRound && fiber && fiber.node.fiber) {
-        fiber.root!.counter--;
-      }
+    if (handled) {
       return true;
     }
   }
@@ -54,7 +51,7 @@ export function handleError(params: ErrorParams) {
 
   fibersInError.set(fiber.root!, error);
 
-  const handled = _handleError(node, error, true);
+  const handled = _handleError(node, error);
   if (!handled) {
     console.warn(`[Owl] Unhandled error. Destroying the root component`);
     try {

src/component/fibers.ts

@@ -16,8 +16,14 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   let current = node.fiber;
   if (current) {
     let root = current.root!;
-    root.counter = root.counter + 1 - cancelFibers(current.children);
+    // lock root fiber because canceling children fibers may destroy components,
+    // which means any arbitrary code can be run in onWillDestroy, which may
+    // trigger new renderings
+    root.locked = true;
+    root.setCounter(root.counter + 1 - cancelFibers(current.children));
+    root.locked = false;
     current.children = [];
+    current.childrenMap = {};
     current.bdom = null;
     if (fibersInError.has(current)) {
       fibersInError.delete(current);
@@ -36,13 +42,22 @@ export function makeRootFiber(node: ComponentNode): Fiber {
   return fiber;
 }
 
+function throwOnRender() {
+  throw new Error("Attempted to render cancelled fiber");
+}
+
 /**
  * @returns number of not-yet rendered fibers cancelled
  */
 function cancelFibers(fibers: Fiber[]): number {
   let result = 0;
   for (let fiber of fibers) {
-    fiber.node.fiber = null;
+    let node = fiber.node;
+    fiber.render = throwOnRender;
+    if (node.status === STATUS.NEW) {
+      node.destroy();
+    }
+    node.fiber = null;
     if (fiber.bdom) {
       // if fiber has been rendered, this means that the component props have
       // been updated. however, this fiber will not be patched to the dom, so
@@ -50,7 +65,7 @@ function cancelFibers(fibers: Fiber[]): number {
       // the same props, and skip the render completely. With the next line,
       // we kindly request the component code to force a render, so it works as
       // expected.
-      fiber.node.forceNextRender = true;
+      node.forceNextRender = true;
     } else {
       result++;
     }
@@ -67,6 +82,7 @@ export class Fiber {
   children: Fiber[] = [];
   appliedToDom = false;
   deep: boolean = false;
+  childrenMap: ComponentNode["children"] = {};
 
   constructor(node: ComponentNode, parent: Fiber | null) {
     this.node = node;
@@ -74,13 +90,50 @@ export class Fiber {
     if (parent) {
       this.deep = parent.deep;
       const root = parent.root!;
-      root.counter++;
+      root.setCounter(root.counter + 1);
       this.root = root;
       parent.children.push(this);
     } else {
       this.root = this as any;
     }
   }
+
+  render() {
+    // if some parent has a fiber => register in followup
+    let prev = this.root!.node;
+    let scheduler = prev.app.scheduler;
+    let current = prev.parent;
+    while (current) {
+      if (current.fiber) {
+        let root = current.fiber.root!;
+        if (root.counter === 0 && prev.parentKey! in current.fiber.childrenMap) {
+          current = root.node;
+        } else {
+          scheduler.delayedRenders.push(this);
+          return;
+        }
+      }
+      prev = current;
+      current = current.parent;
+    }
+
+    // there are no current rendering from above => we can render
+    this._render();
+  }
+
+  _render() {
+    const node = this.node;
+    const root = this.root;
+    if (root) {
+      try {
+        (this.bdom as any) = true;
+        this.bdom = node.renderFn();
+      } catch (e) {
+        handleError({ node, error: e });
+      }
+      root.setCounter(root.counter - 1);
+    }
+  }
 }
 
 export class RootFiber extends Fiber {
@@ -144,6 +197,13 @@ export class RootFiber extends Fiber {
       handleError({ fiber: current || this, error: e });
     }
   }
+
+  setCounter(newValue: number) {
+    this.counter = newValue;
+    if (newValue === 0) {
+      this.node.app.scheduler.flush();
+    }
+  }
 }
 
 type Position = "first-child" | "last-child";
@@ -165,6 +225,7 @@ export class MountFiber extends RootFiber {
     let current: Fiber | undefined = this;
     try {
       const node = this.node;
+      node.children = this.childrenMap;
       (node.app.constructor as any).validateTarget(this.target);
       if (node.bdom) {
         // this is a complicated situation: if we mount a fiber with an existing

src/component/lifecycle_hooks.ts

@@ -1,14 +1,28 @@
 import { getCurrent } from "./component_node";
 import { nodeErrorHandlers } from "./error_handling";
 
+const TIMEOUT = Symbol("timeout");
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
   const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
     cause: any;
   };
+  const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
+  const node = getCurrent();
   return (...args: any[]) => {
     try {
       const result = fn(...args);
       if (result instanceof Promise) {
+        if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
+          const fiber = node.fiber;
+          Promise.race([
+            result,
+            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
+          ]).then((res) => {
+            if (res === TIMEOUT && node.fiber === fiber) {
+              console.warn(timeoutError);
+            }
+          });
+        }
         return result.catch((cause) => {
           error.cause = cause;
           if (cause instanceof Error) {
@@ -77,21 +91,23 @@ export function onWillRender(fn: () => void | any) {
   const node = getCurrent();
   const renderFn = node.renderFn;
   const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.renderFn = decorate(() => {
-    fn.call(node.component);
+  fn = decorate(fn.bind(node.component), "onWillRender");
+  node.renderFn = () => {
+    fn();
     return renderFn();
-  }, "onWillRender");
+  };
 }
 
 export function onRendered(fn: () => void | any) {
   const node = getCurrent();
   const renderFn = node.renderFn;
   const decorate = node.app.dev ? wrapError : (fn: any) => fn;
-  node.renderFn = decorate(() => {
+  fn = decorate(fn.bind(node.component), "onRendered");
+  node.renderFn = () => {
     const result = renderFn();
-    fn.call(node.component);
+    fn();
     return result;
-  }, "onRendered");
+  };
 }
 
 type OnErrorCallback = (error: any) => void | any;

src/component/scheduler.ts

@@ -11,27 +11,16 @@ export class Scheduler {
   // interactions with other code, such as test frameworks that override them
   static requestAnimationFrame = window.requestAnimationFrame.bind(window);
   tasks: Set<RootFiber> = new Set();
-  isRunning: boolean = false;
   requestAnimationFrame: Window["requestAnimationFrame"];
+  frame: number = 0;
+  delayedRenders: Fiber[] = [];
 
   constructor() {
     this.requestAnimationFrame = Scheduler.requestAnimationFrame;
   }
 
-  start() {
-    this.isRunning = true;
-    this.scheduleTasks();
-  }
-
-  stop() {
-    this.isRunning = false;
-  }
-
   addFiber(fiber: Fiber) {
     this.tasks.add(fiber.root!);
-    if (!this.isRunning) {
-      this.start();
-    }
   }
 
   /**
@@ -39,7 +28,30 @@ export class Scheduler {
    * Other tasks are left unchanged.
    */
   flush() {
-    this.tasks.forEach((fiber) => {
+    if (this.delayedRenders.length) {
+      let renders = this.delayedRenders;
+      this.delayedRenders = [];
+      for (let f of renders) {
+        if (f.root && f.node.status !== STATUS.DESTROYED && f.node.fiber === f) {
+          f.render();
+        }
+      }
+    }
+
+    if (this.frame === 0) {
+      this.frame = this.requestAnimationFrame(() => {
+        this.frame = 0;
+        this.tasks.forEach((fiber) => this.processFiber(fiber));
+        for (let task of this.tasks) {
+          if (task.node.status === STATUS.DESTROYED) {
+            this.tasks.delete(task);
+          }
+        }
+      });
+    }
+  }
+
+  processFiber(fiber: RootFiber) {
     if (fiber.root !== fiber) {
       this.tasks.delete(fiber);
       return;
@@ -60,18 +72,5 @@ export class Scheduler {
       }
       this.tasks.delete(fiber);
     }
-    });
-    if (this.tasks.size === 0) {
-      this.stop();
-    }
-  }
-
-  scheduleTasks() {
-    this.requestAnimationFrame(() => {
-      this.flush();
-      if (this.isRunning) {
-        this.scheduleTasks();
-      }
-    });
   }
 }

src/hooks.ts

@@ -57,7 +57,6 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------
 
-const NO_OP = () => {};
 /**
  * @param {...any} dependencies the dependencies computed by computeDependencies
  * @returns {void|(()=>void)} a cleanup function that reverses the side
@@ -78,11 +77,11 @@ type Effect = (...dependencies: any[]) => void | (() => void);
  *      NaN !== NaN, which will cause the effect to rerun on every patch.
  */
 export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
-  let cleanup: () => void;
+  let cleanup: (() => void) | void;
   let dependencies: any[];
   onMounted(() => {
     dependencies = computeDependencies();
-    cleanup = effect(...dependencies) || NO_OP;
+    cleanup = effect(...dependencies);
   });
 
   onPatched(() => {
@@ -90,12 +89,14 @@ export function useEffect(effect: Effect, computeDependencies: () => any[] = ()
     const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
     if (shouldReapply) {
       dependencies = newDeps;
+      if (cleanup) {
         cleanup();
-      cleanup = effect(...dependencies) || NO_OP;
+      }
+      cleanup = effect(...dependencies);
     }
   });
 
-  onWillUnmount(() => cleanup());
+  onWillUnmount(() => cleanup && cleanup());
 }
 
 // -----------------------------------------------------------------------------

src/reactivity.ts

@@ -232,6 +232,11 @@ function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T
       if (key === TARGET) {
         return target;
       }
+      // non-writable non-configurable properties cannot be made reactive
+      const desc = Object.getOwnPropertyDescriptor(target, key);
+      if (desc && !desc.writable && !desc.configurable) {
+        return Reflect.get(target, key, proxy);
+      }
       observeTargetKey(target, key, callback);
       return possiblyReactive(Reflect.get(target, key, proxy), callback);
     },
@@ -308,6 +313,28 @@ function makeIteratorObserver(
     }
   };
 }
+/**
+ * Creates a forEach function that will delegate to forEach on the underlying
+ * collection while observing key changes, and keys as they're iterated over,
+ * and making the passed keys/values reactive.
+ *
+ * @param target @see reactive
+ * @param callback @see reactive
+ */
+function makeForEachObserver(target: any, callback: Callback) {
+  return function forEach(forEachCb: (val: any, key: any, target: any) => void, thisArg: any) {
+    observeTargetKey(target, KEYCHANGES, callback);
+    target.forEach(function (val: any, key: any, targetObj: any) {
+      observeTargetKey(target, key, callback);
+      forEachCb.call(
+        thisArg,
+        possiblyReactive(val, callback),
+        possiblyReactive(key, callback),
+        possiblyReactive(targetObj, callback)
+      );
+    }, thisArg);
+  };
+}
 /**
  * Creates a function that will delegate to an underlying method, and check if
  * that method has modified the presence or value of a key, and notify the
@@ -370,6 +397,7 @@ const rawTypeToFuncHandlers = {
     values: makeIteratorObserver("values", target, callback),
     entries: makeIteratorObserver("entries", target, callback),
     [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+    forEach: makeForEachObserver(target, callback),
     clear: makeClearNotifier(target),
     get size() {
       observeTargetKey(target, KEYCHANGES, callback);
@@ -385,6 +413,7 @@ const rawTypeToFuncHandlers = {
     values: makeIteratorObserver("values", target, callback),
     entries: makeIteratorObserver("entries", target, callback),
     [Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
+    forEach: makeForEachObserver(target, callback),
     clear: makeClearNotifier(target),
     get size() {
       observeTargetKey(target, KEYCHANGES, callback);

src/utils.ts

@@ -15,11 +15,13 @@ export function batched(callback: Callback): Callback {
     await Promise.resolve();
     if (!called) {
       called = true;
-      callback();
       // wait for all calls in this microtick to fall through before resetting "called"
-      // so that only the first call to the batched function calls the original callback
-      await Promise.resolve();
-      called = false;
+      // so that only the first call to the batched function calls the original callback.
+      // Schedule this before calling the callback so that calls to the batched function
+      // within the callback will proceed only after resetting called to false, and have
+      // a chance to execute the callback again
+      Promise.resolve().then(() => (called = false));
+      callback();
     }
   };
 }

tests/__snapshots__/reactivity.test.ts.snap

@@ -131,7 +131,7 @@ exports[`Reactivity: useState parent and children subscribed to same context 1`]
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     let txt1 = ctx['contextObj'].b;
     return block1([txt1], [b2]);
   }
@@ -223,8 +223,8 @@ exports[`Reactivity: useState two components are updated in parallel 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -252,8 +252,8 @@ exports[`Reactivity: useState two components can subscribe to same context 1`] =
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -281,8 +281,8 @@ exports[`Reactivity: useState two independent components on different levels are
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = component(\`Parent\`, {}, key + \`__2\`, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -310,7 +310,7 @@ exports[`Reactivity: useState two independent components on different levels are
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -340,14 +340,14 @@ exports[`Reactivity: useState useless atoms should be deleted 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`id\`] = v_block2[i1];
-      let key1 = ctx['id'];
+      const key1 = ctx['id'];
       c_block2[i1] = withKey(component(\`Quantity\`, {id: ctx['id']}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     let txt1 = ctx['total'];
     let txt2 = Object.keys(ctx['state']).length;
     return block1([txt1, txt2], [b2]);

tests/blockdom/block_attributes.test.ts

@@ -169,13 +169,25 @@ describe("properties", () => {
     expect(input.value).toBe("potato");
   });
 
-  test("input with value attribute, and undefined given", () => {
+  test("input with value attribute, and falsy value given", () => {
     const block = createBlock(`<input block-attribute-0="value"/>`);
 
     const tree = block([undefined]);
     mount(tree, fixture);
     const input = fixture.querySelector("input")!;
     expect(input.value).toBe("");
+
+    patch(tree, block([null]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([0]));
+    expect(input.value).toBe("0");
+
+    patch(tree, block([""]));
+    expect(input.value).toBe("");
+
+    patch(tree, block([false]));
+    expect(input.value).toBe("");
   });
 
   test("input type=checkbox with checked attribute", () => {

tests/blockdom/event_catcher.test.ts

@@ -0,0 +1,54 @@
+import { config, createBlock, createCatcher, mount } from "../../src/blockdom";
+import { makeTestFixture } from "./helpers";
+import { mainEventHandler } from "../../src/component/handler";
+
+//------------------------------------------------------------------------------
+// Setup and helpers
+//------------------------------------------------------------------------------
+
+let fixture: HTMLElement;
+config.mainEventHandler = mainEventHandler;
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+test("simple event catcher", async () => {
+  const catcher = createCatcher({ click: 0 });
+  const block = createBlock("<div></div>");
+  let n = 0;
+  let ctx = {};
+  let handler = [() => n++, ctx];
+  const tree = catcher(block(), [handler]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<div></div>");
+
+  expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
+  expect(n).toBe(0);
+  (fixture.firstChild as HTMLDivElement).click();
+  expect(n).toBe(1);
+});
+
+test("do not catch events outside of itself", async () => {
+  const catcher = createCatcher({ click: 0 });
+  const childBlock = createBlock("<div></div>");
+  const parentBlock = createBlock("<button><block-child-0/></button>");
+  let n = 0;
+  let ctx = {};
+  let handler = [() => n++, ctx];
+  const tree = parentBlock([], [catcher(childBlock(), [handler])]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe("<button><div></div></button>");
+
+  expect(n).toBe(0);
+  fixture.querySelector("div")!.click();
+  expect(n).toBe(1);
+  fixture.querySelector("button")!.click();
+  expect(n).toBe(1);
+});

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

@@ -70,17 +70,17 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`action\`] = v_block2[i1];
       ctx[\`action_index\`] = i1;
-      let key1 = ctx['action_index'];
+      const key1 = ctx['action_index'];
       const v1 = ctx['activate'];
       const v2 = ctx['action'];
       let hdlr1 = [()=>v1(v2), ctx];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -140,10 +140,10 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`value\`] = v_block1[i1];
-      let key1 = ctx['value'];
+      const key1 = ctx['value'];
       let hdlr1 = [ctx['add'], ctx];
       c_block1[i1] = withKey(block2([hdlr1]), key1);
     }
@@ -188,14 +188,14 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`value\`] = v_block1[i1];
       ctx[\`value_first\`] = i1 === 0;
       ctx[\`value_last\`] = i1 === v_block1.length - 1;
       ctx[\`value_index\`] = i1;
       ctx[\`value_value\`] = k_block1[i1];
-      let key1 = ctx['value'];
+      const key1 = ctx['value'];
       c_block1[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
     }
     return list(c_block1);
@@ -271,7 +271,7 @@ exports[`t-on t-on modifiers (native listener) t-on combined with t-out 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['onClick'], ctx];
-    let b2 = safeOutput(ctx['html']);
+    const b2 = safeOutput(ctx['html']);
     return block1([hdlr1], [b2]);
   }
 }"
@@ -347,17 +347,17 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`project\`] = v_block2[i1];
-      let key1 = ctx['project'];
+      const key1 = ctx['project'];
       const v1 = ctx['onEdit'];
       const v2 = ctx['project'];
       let hdlr1 = [\\"prevent\\", _ev=>v1(v2.id,_ev), ctx];
       let txt1 = ctx['project'].name;
       c_block2[i1] = withKey(block3([hdlr1, txt1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -478,7 +478,7 @@ exports[`t-on t-on with t-call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -508,7 +508,7 @@ exports[`t-on t-on, with arguments and t-call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/misc.test.ts.snap

@@ -30,28 +30,28 @@ exports[`misc complex template 1`] = `
       b3 = block3();
     }
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['batch'].slot_ids.filter(_slot=>_slot.build_id.id&&!_slot.trigger_id.manual&&(ctx['options'].trigger_display[_slot.trigger_id.id])));
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['batch'].slot_ids.filter(_slot=>_slot.build_id.id&&!_slot.trigger_id.manual&&(ctx['options'].trigger_display[_slot.trigger_id.id])));;
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`slot\`] = v_block4[i1];
-      let key1 = ctx['slot'].id;
+      const key1 = ctx['slot'].id;
       c_block4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'], slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     ctx = ctx.__proto__;
     b4 = list(c_block4);
     ctx = Object.create(ctx);
-    const [k_block6, v_block6, l_block6, c_block6] = prepareList([1,2,3,4]);
+    const [k_block6, v_block6, l_block6, c_block6] = prepareList([1,2,3,4]);;
     for (let i1 = 0; i1 < l_block6; i1++) {
       ctx[\`x\`] = v_block6[i1];
-      let key1 = ctx['x'];
+      const key1 = ctx['x'];
       c_block6[i1] = withKey(block7(), key1);
     }
     ctx = ctx.__proto__;
     b6 = list(c_block6);
     ctx = Object.create(ctx);
-    const [k_block8, v_block8, l_block8, c_block8] = prepareList(ctx['commit_links']);
+    const [k_block8, v_block8, l_block8, c_block8] = prepareList(ctx['commit_links']);;
     for (let i1 = 0; i1 < l_block8; i1++) {
       ctx[\`commit_link\`] = v_block8[i1];
-      let key1 = ctx['commit_link'].id;
+      const key1 = ctx['commit_link'].id;
       let b10,b11,b12,b13;
       let attr5 = \`/runbot/commit/\${ctx['commit_link'].commit_id}\`;
       let attr6 = \`badge badge-light batch_commit match_type_\${ctx['commit_link'].match_type}\`;
@@ -96,35 +96,35 @@ exports[`misc global 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`value\`] = v_block2[i1];
       ctx[\`value_first\`] = i1 === 0;
       ctx[\`value_last\`] = i1 === v_block2.length - 1;
       ctx[\`value_index\`] = i1;
       ctx[\`value_value\`] = k_block2[i1];
-      let key1 = ctx['value'];
+      const key1 = ctx['value'];
       let txt1 = ctx['value'];
-      let b4 = block4([txt1]);
+      const b4 = block4([txt1]);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       setContextValue(ctx, \\"foo\\", 'aaa');
-      let b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
+      const b6 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
       ctx = ctx.__proto__;
-      let b7 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
+      const b7 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
       setContextValue(ctx, \\"foo\\", 'bbb');
-      let b8 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
-      let b5 = multi([b6, b7, b8]);
+      const b8 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
+      const b5 = multi([b6, b7, b8]);
       ctx[zero] = b5;
-      let b9 = callTemplate_4.call(this, ctx, node, key + \`__4__\${key1}\`);
+      const b9 = callTemplate_4.call(this, ctx, node, key + \`__4__\${key1}\`);
       ctx = ctx.__proto__;
       c_block2[i1] = withKey(multi([b4, b9]), key1);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
-    let b10 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
+    const b2 = list(c_block2);
+    const b10 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
     return block1([], [b2, b10]);
   }
 }"
@@ -155,7 +155,7 @@ exports[`misc global 3`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let attr1 = 'agüero';
-    let b2 = ctx[zero];
+    const b2 = ctx[zero];
     return block1([attr1], [b2]);
   }
 }"
@@ -170,8 +170,8 @@ exports[`misc global 4`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = text(\`toto default\`);
-    let b2 = withDefault(safeOutput(ctx['toto']), b3);
+    const b3 = text(\`toto default\`);
+    const b2 = withDefault(safeOutput(ctx['toto']), b3);
     return block1([], [b2]);
   }
 }"
@@ -221,10 +221,10 @@ exports[`misc other complex template 1`] = `
     let attr1 = \`/runbot/\${ctx['project'].slug}\`;
     let txt1 = ctx['project'].name;
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`project\`] = v_block2[i1];
-      let key1 = ctx['project'].id;
+      const key1 = ctx['project'].id;
       let hdlr1 = [ctx['selectProject'](ctx['project']), ctx];
       let txt2 = ctx['project'].name;
       c_block2[i1] = withKey(block3([hdlr1, txt2]), key1);
@@ -241,12 +241,12 @@ exports[`misc other complex template 1`] = `
         if (ctx['nb_assigned_errors']&&ctx['nb_assigned_errors']>0) {
           let attr3 = \`You have \${ctx['nb_assigned_errors']} random bug assigned\`;
           let txt3 = ctx['nb_assigned_errors'];
-          let b8 = block8([attr3, txt3]);
-          let b9 = block9();
+          const b8 = block8([attr3, txt3]);
+          const b9 = block9();
           b7 = multi([b8, b9]);
         } else if (ctx['nb_build_errors']&&ctx['nb_build_errors']>0) {
-          let b11 = block11();
-          let b12 = block12();
+          const b11 = block11();
+          const b12 = block12();
           b10 = multi([b11, b12]);
         }
         let txt4 = ctx['user'].name.length>25?ctx['user'].namesubstring(0,23)+'...':ctx['user'].name;
@@ -261,17 +261,17 @@ exports[`misc other complex template 1`] = `
     let hdlr3 = [ctx['toggleMore'], ctx];
     if (ctx['categories']&&ctx['categories'].length>1) {
       ctx = Object.create(ctx);
-      const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);
+      const [k_block15, v_block15, l_block15, c_block15] = prepareList(ctx['categories']);;
       for (let i1 = 0; i1 < l_block15; i1++) {
         ctx[\`category\`] = v_block15[i1];
-        let key1 = ctx['category'].id;
+        const key1 = ctx['category'].id;
         let attr6 = ctx['category'].id;
         let attr7 = ctx['category'].id==ctx['options'].active_category_id;
         let txt5 = ctx['category'].name;
         c_block15[i1] = withKey(block16([attr6, attr7, txt5]), key1);
       }
       ctx = ctx.__proto__;
-      let b15 = list(c_block15);
+      const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
     let attr8 = ctx['search'].value;
@@ -280,10 +280,10 @@ exports[`misc other complex template 1`] = `
     let hdlr6 = [ctx['clearSearch'], ctx];
     if (ctx['triggers']) {
       ctx = Object.create(ctx);
-      const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);
+      const [k_block18, v_block18, l_block18, c_block18] = prepareList(ctx['triggers']);;
       for (let i1 = 0; i1 < l_block18; i1++) {
         ctx[\`trigger\`] = v_block18[i1];
-        let key1 = ctx['trigger'].id;
+        const key1 = ctx['trigger'].id;
         let b20;
         if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
           let attr9 = \`trigger_\${ctx['trigger'].id}\`;
@@ -298,12 +298,12 @@ exports[`misc other complex template 1`] = `
         c_block18[i1] = withKey(multi([b20]), key1);
       }
       ctx = ctx.__proto__;
-      let b18 = list(c_block18);
+      const b18 = list(c_block18);
       let hdlr8 = [ctx['triggerAll'], ctx];
       let hdlr9 = [ctx['triggerNone'], ctx];
       let hdlr10 = [ctx['triggerDefault'], ctx];
       let hdlr11 = [ctx['toggleSettingsMenu'], ctx];
-      let b21 = block21([hdlr8, hdlr9, hdlr10, hdlr11]);
+      const b21 = block21([hdlr8, hdlr9, hdlr10, hdlr11]);
       b17 = multi([b18, b21]);
     }
     if (ctx['load_infos']) {
@@ -316,8 +316,8 @@ exports[`misc other complex template 1`] = `
     if (!ctx['project']) {
       b24 = block24();
     } else {
-      let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky, category_custom_views: ctx['category_custom_views'], search: ctx['search']}, key + \`__2\`, node, ctx);
-      let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev, search: ctx['search']}, key + \`__3\`, node, ctx);
+      const b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky, category_custom_views: ctx['category_custom_views'], search: ctx['search']}, key + \`__2\`, node, ctx);
+      const b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev, search: ctx['search']}, key + \`__3\`, node, ctx);
       b25 = block25([], [b26, b27]);
     }
     return block1([attr1, txt1, hdlr2, hdlr3, attr8, hdlr4, hdlr5, ref1, hdlr6, ref2], [b2, b4, b14, b17, b22, b23, b24, b25]);

tests/compiler/__snapshots__/qweb_memory.test.ts.snap

@@ -10,14 +10,14 @@ exports[`memory t-foreach does not leak stuff in global scope 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
-      let key1 = ctx['item_index'];
+      const key1 = ctx['item_index'];
       c_block2[i1] = withKey(text(ctx['item']), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/simple_templates.test.ts.snap

@@ -211,8 +211,8 @@ exports[`simple templates, mostly static multiple root nodes 1`] = `
   let block3 = createBlock(\`<span>hey</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = block3();
+    const b2 = block2();
+    const b3 = block3();
     return multi([b2, b3]);
   }
 }"
@@ -246,8 +246,8 @@ exports[`simple templates, mostly static static text and dynamic text (no t tag)
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`hello \`);
-    let b3 = text(ctx['text']);
+    const b2 = text(\`hello \`);
+    const b3 = text(ctx['text']);
     return multi([b2, b3]);
   }
 }"
@@ -259,8 +259,8 @@ exports[`simple templates, mostly static static text and dynamic text 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`hello \`);
-    let b3 = text(ctx['text']);
+    const b2 = text(\`hello \`);
+    const b3 = text(ctx['text']);
     return multi([b2, b3]);
   }
 }"
@@ -347,8 +347,8 @@ exports[`simple templates, mostly static two t-escs next to each other 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['text1']);
-    let b3 = text(ctx['text2']);
+    const b2 = text(ctx['text1']);
+    const b3 = text(ctx['text2']);
     return multi([b2, b3]);
   }
 }"
@@ -360,8 +360,8 @@ exports[`simple templates, mostly static two t-escs next to each other 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['text1']);
-    let b3 = text(ctx['text2']);
+    const b2 = text(ctx['text1']);
+    const b3 = text(ctx['text2']);
     return multi([b2, b3]);
   }
 }"

tests/compiler/__snapshots__/svg.test.ts.snap

@@ -66,7 +66,7 @@ exports[`properly support svg svg creates new block if it is within html -- 2 1`
     if (ctx['hasPath']) {
       b3 = block3();
     }
-    let b2 = block2([], [b3]);
+    const b2 = block2([], [b3]);
     return block1([], [b2]);
   }
 }"
@@ -81,7 +81,7 @@ exports[`properly support svg svg creates new block if it is within html 1`] = `
   let block2 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><polygon fill=\\"#000000\\" points=\\"0 0 4 4 8 0\\" transform=\\"translate(5 7)\\"/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
+    const b2 = block2();
     return block1([], [b2]);
   }
 }"
@@ -97,7 +97,7 @@ exports[`properly support svg svg namespace added to sub templates if root tag i
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_call.test.ts.snap

@@ -10,7 +10,7 @@ exports[`t-call (template calling) basic caller 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -69,12 +69,12 @@ exports[`t-call (template calling) call with several sub nodes on same line 1`]
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b3 = block3();
-    let b4 = text(\` \`);
-    let b5 = block5();
-    let b2 = multi([b3, b4, b5]);
+    const b3 = block3();
+    const b4 = text(\` \`);
+    const b5 = block5();
+    const b2 = multi([b3, b4, b5]);
     ctx[zero] = b2;
-    let b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b6]);
   }
 }"
@@ -89,7 +89,7 @@ exports[`t-call (template calling) call with several sub nodes on same line 2`]
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
+    const b2 = ctx[zero];
     return block1([], [b2]);
   }
 }"
@@ -109,12 +109,12 @@ exports[`t-call (template calling) cascading t-call t-out='0' 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b3 = block3();
-    let b4 = text(\` \`);
-    let b5 = block5();
-    let b2 = multi([b3, b4, b5]);
+    const b3 = block3();
+    const b4 = text(\` \`);
+    const b5 = block5();
+    const b2 = multi([b3, b4, b5]);
     ctx[zero] = b2;
-    let b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b6 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b6]);
   }
 }"
@@ -133,11 +133,11 @@ exports[`t-call (template calling) cascading t-call t-out='0' 2`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b3 = block3();
-    let b4 = ctx[zero];
-    let b2 = multi([b3, b4]);
+    const b3 = block3();
+    const b4 = ctx[zero];
+    const b2 = multi([b3, b4]);
     ctx[zero] = b2;
-    let b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b5]);
   }
 }"
@@ -156,11 +156,11 @@ exports[`t-call (template calling) cascading t-call t-out='0' 3`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b3 = block3();
-    let b4 = ctx[zero];
-    let b2 = multi([b3, b4]);
+    const b3 = block3();
+    const b4 = ctx[zero];
+    const b2 = multi([b3, b4]);
     ctx[zero] = b2;
-    let b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b5 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b5]);
   }
 }"
@@ -175,7 +175,7 @@ exports[`t-call (template calling) cascading t-call t-out='0' 4`] = `
   let block1 = createBlock(\`<div><span>cascade 2</span><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
+    const b2 = ctx[zero];
     return block1([], [b2]);
   }
 }"
@@ -194,10 +194,10 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
-    let b3 = text(\` \`);
-    let b4 = block4();
-    let b1 = multi([b2, b3, b4]);
+    const b2 = block2();
+    const b3 = text(\` \`);
+    const b4 = block4();
+    const b1 = multi([b2, b3, b4]);
     ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
@@ -216,9 +216,9 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
-    let b3 = ctx[zero];
-    let b1 = multi([b2, b3]);
+    const b2 = block2();
+    const b3 = ctx[zero];
+    const b1 = multi([b2, b3]);
     ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
@@ -237,9 +237,9 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
-    let b3 = ctx[zero];
-    let b1 = multi([b2, b3]);
+    const b2 = block2();
+    const b3 = ctx[zero];
+    const b1 = multi([b2, b3]);
     ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
@@ -255,8 +255,8 @@ exports[`t-call (template calling) cascading t-call t-out='0', without external
   let block2 = createBlock(\`<span>cascade 2</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = ctx[zero];
+    const b2 = block2();
+    const b3 = ctx[zero];
     return multi([b2, b3]);
   }
 }"
@@ -272,7 +272,7 @@ exports[`t-call (template calling) dynamic t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const template1 = (ctx['template']);
-    let b2 = call(this, template1, ctx, node, key + \`__1\`);
+    const b2 = call(this, template1, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -319,7 +319,7 @@ exports[`t-call (template calling) inherit context 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"foo\\", 1);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -370,7 +370,7 @@ exports[`t-call (template calling) recursive template, part 2 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"node\\", ctx['root']);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -390,21 +390,21 @@ exports[`t-call (template calling) recursive template, part 2 2`] = `
     ctx[isBoundary] = 1
     let txt1 = ctx['node'].val;
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
       ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
       ctx[\`subtree_value\`] = k_block2[i1];
-      let key1 = ctx['subtree_index'];
+      const key1 = ctx['subtree_index'];
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       setContextValue(ctx, \\"node\\", ctx['subtree']);
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([txt1], [b2]);
   }
 }"
@@ -425,7 +425,7 @@ exports[`t-call (template calling) recursive template, part 3 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"node\\", ctx['root']);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -445,21 +445,21 @@ exports[`t-call (template calling) recursive template, part 3 2`] = `
     ctx[isBoundary] = 1
     let txt1 = ctx['node'].val;
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
       ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
       ctx[\`subtree_value\`] = k_block2[i1];
-      let key1 = ctx['subtree_index'];
+      const key1 = ctx['subtree_index'];
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       setContextValue(ctx, \\"node\\", ctx['subtree']);
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([txt1], [b2]);
   }
 }"
@@ -481,7 +481,7 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"recursive_idx\\", 1);
     setContextValue(ctx, \\"node\\", ctx['root']);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -503,21 +503,21 @@ exports[`t-call (template calling) recursive template, part 4: with t-set recurs
     let txt1 = ctx['node'].val;
     let txt2 = ctx['recursive_idx'];
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['node'].children||[]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`subtree\`] = v_block2[i1];
       ctx[\`subtree_first\`] = i1 === 0;
       ctx[\`subtree_last\`] = i1 === v_block2.length - 1;
       ctx[\`subtree_index\`] = i1;
       ctx[\`subtree_value\`] = k_block2[i1];
-      let key1 = ctx['subtree_index'];
+      const key1 = ctx['subtree_index'];
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       setContextValue(ctx, \\"node\\", ctx['subtree']);
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([txt1, txt2], [b2]);
   }
 }"
@@ -538,7 +538,7 @@ exports[`t-call (template calling) scoped parameters 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"foo\\", 42);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt1 = ctx['foo'];
     return block1([txt1], [b2]);
@@ -573,7 +573,7 @@ exports[`t-call (template calling) scoped parameters, part 2 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"foo\\", 42);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt1 = ctx['foo'];
     return block1([txt1], [b2]);
@@ -602,7 +602,7 @@ exports[`t-call (template calling) t-call allowed on a non t node 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -633,7 +633,7 @@ exports[`t-call (template calling) t-call with body content as root of a templat
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b1 = block1();
+    const b1 = block1();
     ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
@@ -649,7 +649,7 @@ exports[`t-call (template calling) t-call with body content as root of a templat
   let block1 = createBlock(\`<foo><block-child-0/></foo>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
+    const b2 = ctx[zero];
     return block1([], [b2]);
   }
 }"
@@ -702,7 +702,7 @@ exports[`t-call (template calling) t-call with t-set inside and body text conten
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"val\\", \`yip yip\`);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -735,14 +735,14 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`v\`] = v_block2[i1];
       ctx[\`v_first\`] = i1 === 0;
       ctx[\`v_last\`] = i1 === v_block2.length - 1;
       ctx[\`v_index\`] = i1;
       ctx[\`v_value\`] = k_block2[i1];
-      let key1 = ctx['v_index'];
+      const key1 = ctx['v_index'];
       setContextValue(ctx, \\"val\\", ctx['v'].val);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
@@ -750,7 +750,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside 1`] = `
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -783,7 +783,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 1`] =
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"w\\", 'fromwrapper');
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -802,14 +802,14 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`v\`] = v_block2[i1];
       ctx[\`v_first\`] = i1 === 0;
       ctx[\`v_last\`] = i1 === v_block2.length - 1;
       ctx[\`v_index\`] = i1;
       ctx[\`v_value\`] = k_block2[i1];
-      let key1 = ctx['v_index'];
+      const key1 = ctx['v_index'];
       setContextValue(ctx, \\"val\\", ctx['v'].val);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
@@ -817,7 +817,7 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 2`] =
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
       ctx = ctx.__proto__;
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -832,8 +832,8 @@ exports[`t-call (template calling) t-call with t-set inside and outside. 2 3`] =
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['val3'];
-    let b2 = block2([txt1]);
-    let b3 = text(ctx['w']);
+    const b2 = block2([txt1]);
+    const b3 = text(ctx['w']);
     return multi([b2, b3]);
   }
 }"
@@ -908,7 +908,7 @@ exports[`t-call (template calling) t-esc inside t-call, with t-set outside 1`] =
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v\\", \`Hi\`);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -938,7 +938,7 @@ exports[`t-call (template calling) with unused body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b1 = text(\`WHEEE\`);
+    const b1 = text(\`WHEEE\`);
     ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
@@ -999,7 +999,7 @@ exports[`t-call (template calling) with used body 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b1 = text(\`ok\`);
+    const b1 = text(\`ok\`);
     ctx[zero] = b1;
     return callTemplate_1.call(this, ctx, node, key + \`__1\`);
   }
@@ -1036,7 +1036,7 @@ exports[`t-call (template calling) with used setbody 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"foo\\", 'ok');
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_debug_log.test.ts.snap

@@ -44,7 +44,7 @@ exports[`debugging t-debug on sub template 2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_esc.test.ts.snap

@@ -82,15 +82,15 @@ exports[`t-esc falsy values in text nodes 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['v1']);
-    let b3 = text(\`:\`);
-    let b4 = text(ctx['v2']);
-    let b5 = text(\`:\`);
-    let b6 = text(ctx['v3']);
-    let b7 = text(\`:\`);
-    let b8 = text(ctx['v4']);
-    let b9 = text(\`:\`);
-    let b10 = text(ctx['v5']);
+    const b2 = text(ctx['v1']);
+    const b3 = text(\`:\`);
+    const b4 = text(ctx['v2']);
+    const b5 = text(\`:\`);
+    const b6 = text(ctx['v3']);
+    const b7 = text(\`:\`);
+    const b8 = text(ctx['v4']);
+    const b9 = text(\`:\`);
+    const b10 = text(ctx['v5']);
     return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
   }
 }"
@@ -160,9 +160,9 @@ exports[`t-esc t-esc=0 is escaped 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
+    const b2 = block2();
     ctx[zero] = b2;
-    let b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b3]);
   }
 }"

tests/compiler/__snapshots__/t_foreach.test.ts.snap

@@ -10,13 +10,13 @@ exports[`t-foreach does not pollute the rendering context 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       c_block2[i1] = withKey(text(ctx['item']), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -33,14 +33,14 @@ exports[`t-foreach iterate on items (on a element node) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1,2]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       let txt1 = ctx['item'];
       c_block2[i1] = withKey(block3([txt1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -56,22 +56,22 @@ exports[`t-foreach iterate on items 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
       ctx[\`item_value\`] = k_block2[i1];
-      let key1 = ctx['item'];
-      let b4 = text(\` [\`);
-      let b5 = text(ctx['item_index']);
-      let b6 = text(\`: \`);
-      let b7 = text(ctx['item']);
-      let b8 = text(\` \`);
-      let b9 = text(ctx['item_value']);
-      let b10 = text(\`] \`);
+      const key1 = ctx['item'];
+      const b4 = text(\` [\`);
+      const b5 = text(ctx['item_index']);
+      const b6 = text(\`: \`);
+      const b7 = text(ctx['item']);
+      const b8 = text(\` \`);
+      const b9 = text(ctx['item_value']);
+      const b10 = text(\`] \`);
       c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -87,22 +87,22 @@ exports[`t-foreach iterate, dict param 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['value']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
       ctx[\`item_value\`] = k_block2[i1];
-      let key1 = ctx['item_index'];
-      let b4 = text(\` [\`);
-      let b5 = text(ctx['item_index']);
-      let b6 = text(\`: \`);
-      let b7 = text(ctx['item']);
-      let b8 = text(\` \`);
-      let b9 = text(ctx['item_value']);
-      let b10 = text(\`] \`);
+      const key1 = ctx['item_index'];
+      const b4 = text(\` [\`);
+      const b5 = text(ctx['item_index']);
+      const b6 = text(\`: \`);
+      const b7 = text(ctx['item']);
+      const b8 = text(\` \`);
+      const b9 = text(ctx['item_value']);
+      const b10 = text(\`] \`);
       c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -118,13 +118,13 @@ exports[`t-foreach iterate, position 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(5));;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_first\`] = i1 === 0;
       ctx[\`elem_last\`] = i1 === v_block2.length - 1;
       ctx[\`elem_index\`] = i1;
-      let key1 = ctx['elem'];
+      const key1 = ctx['elem'];
       let b4,b5,b6,b7,b8,b9;
       b4 = text(\` -\`);
       if (ctx['elem_first']) {
@@ -138,7 +138,7 @@ exports[`t-foreach iterate, position 1`] = `
       b9 = text(\`) \`);
       c_block2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -154,13 +154,13 @@ exports[`t-foreach simple iteration (in a node) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       c_block2[i1] = withKey(text(ctx['item']), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -174,10 +174,10 @@ exports[`t-foreach simple iteration 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       c_block1[i1] = withKey(text(ctx['item']), key1);
     }
     return list(c_block1);
@@ -196,14 +196,14 @@ exports[`t-foreach simple iteration with two nodes inside 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       let txt1 = ctx['item'];
-      let b3 = block3([txt1]);
+      const b3 = block3([txt1]);
       let txt2 = ctx['item'];
-      let b4 = block4([txt2]);
+      const b4 = block4([txt2]);
       c_block1[i1] = withKey(multi([b3, b4]), key1);
     }
     return list(c_block1);
@@ -225,23 +225,23 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`a\`] = v_block2[i1];
       ctx[\`a_first\`] = i1 === 0;
       ctx[\`a_last\`] = i1 === v_block2.length - 1;
       ctx[\`a_index\`] = i1;
       ctx[\`a_value\`] = k_block2[i1];
-      let key1 = ctx['a'];
+      const key1 = ctx['a'];
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
       for (let i2 = 0; i2 < l_block4; i2++) {
         ctx[\`b\`] = v_block4[i2];
         ctx[\`b_first\`] = i2 === 0;
         ctx[\`b_last\`] = i2 === v_block4.length - 1;
         ctx[\`b_index\`] = i2;
         ctx[\`b_value\`] = k_block4[i2];
-        let key2 = ctx['b'];
+        const key2 = ctx['b'];
         ctx = Object.create(ctx);
         ctx[isBoundary] = 1;
         setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
@@ -249,13 +249,13 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
         ctx = ctx.__proto__;
       }
       ctx = ctx.__proto__;
-      let b4 = list(c_block4);
+      const b4 = list(c_block4);
       let txt1 = ctx['c'];
-      let b6 = block6([txt1]);
+      const b6 = block6([txt1]);
       c_block2[i1] = withKey(multi([b4, b6]), key1);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
@@ -270,13 +270,13 @@ exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\` [\`);
-    let b3 = text(ctx['a']);
-    let b4 = text(\`] [\`);
-    let b5 = text(ctx['b']);
-    let b6 = text(\`] [\`);
-    let b7 = text(ctx['c']);
-    let b8 = text(\`] \`);
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['a']);
+    const b4 = text(\`] [\`);
+    const b5 = text(ctx['b']);
+    const b6 = text(\`] [\`);
+    const b7 = text(ctx['c']);
+    const b8 = text(\`] \`);
     return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
@@ -294,33 +294,33 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`a\`] = v_block2[i1];
       ctx[\`a_first\`] = i1 === 0;
       ctx[\`a_last\`] = i1 === v_block2.length - 1;
       ctx[\`a_index\`] = i1;
       ctx[\`a_value\`] = k_block2[i1];
-      let key1 = ctx['a'];
+      const key1 = ctx['a'];
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['letters']);;
       for (let i2 = 0; i2 < l_block4; i2++) {
         ctx[\`b\`] = v_block4[i2];
         ctx[\`b_first\`] = i2 === 0;
         ctx[\`b_last\`] = i2 === v_block4.length - 1;
         ctx[\`b_index\`] = i2;
         ctx[\`b_value\`] = k_block4[i2];
-        let key2 = ctx['b'];
+        const key2 = ctx['b'];
         c_block4[i2] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
       }
       ctx = ctx.__proto__;
-      let b4 = list(c_block4);
+      const b4 = list(c_block4);
       let txt1 = ctx['c'];
-      let b6 = block6([txt1]);
+      const b6 = block6([txt1]);
       c_block2[i1] = withKey(multi([b4, b6]), key1);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     let txt2 = ctx['a'];
     let txt3 = ctx['b'];
     let txt4 = ctx['c'];
@@ -339,13 +339,13 @@ exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"c\\", 'x'+'_'+ctx['a']+'_'+ctx['b']);
-    let b2 = text(\` [\`);
-    let b3 = text(ctx['a']);
-    let b4 = text(\`] [\`);
-    let b5 = text(ctx['b']);
-    let b6 = text(\`] [\`);
-    let b7 = text(ctx['c']);
-    let b8 = text(\`] \`);
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['a']);
+    const b4 = text(\`] [\`);
+    const b5 = text(ctx['b']);
+    const b6 = text(\`] [\`);
+    const b7 = text(ctx['c']);
+    const b8 = text(\`] \`);
     return multi([b2, b3, b4, b5, b6, b7, b8]);
   }
 }"
@@ -361,25 +361,25 @@ exports[`t-foreach t-foreach in t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['numbers']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
-      let key1 = ctx['number'];
+      const key1 = ctx['number'];
       ctx = Object.create(ctx);
-      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['letters']);;
       for (let i2 = 0; i2 < l_block3; i2++) {
         ctx[\`letter\`] = v_block3[i2];
-        let key2 = ctx['letter'];
-        let b5 = text(\` [\`);
-        let b6 = text(ctx['number']);
-        let b7 = text(ctx['letter']);
-        let b8 = text(\`] \`);
+        const key2 = ctx['letter'];
+        const b5 = text(\` [\`);
+        const b6 = text(ctx['number']);
+        const b7 = text(ctx['letter']);
+        const b8 = text(\`] \`);
         c_block3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
       }
       ctx = ctx.__proto__;
       c_block2[i1] = withKey(list(c_block3), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -395,10 +395,10 @@ exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['elems']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
-      let key1 = ctx['elem'].id;
+      const key1 = ctx['elem'].id;
       let b3;
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
@@ -422,10 +422,10 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['elems']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`elem\`] = v_block2[i1];
-      let key1 = ctx['elem'].id;
+      const key1 = ctx['elem'].id;
       let b4;
       if (ctx['elem'].id<3) {
         let txt1 = ctx['elem'].text;
@@ -433,7 +433,7 @@ exports[`t-foreach t-foreach with t-if inside 1`] = `
       }
       c_block2[i1] = withKey(multi([b4]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -450,13 +450,13 @@ exports[`t-foreach t-key on t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['things']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`thing\`] = v_block2[i1];
-      let key1 = ctx['thing'];
+      const key1 = ctx['thing'];
       c_block2[i1] = withKey(block3(), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -473,15 +473,15 @@ exports[`t-foreach throws error if invalid loop expression 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['abc']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['abc']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
       ctx[\`item_index\`] = i1;
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       const tKey_1 = ctx['item_index'];
       c_block2[i1] = withKey(block3(), tKey_1 + key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -500,12 +500,12 @@ exports[`t-foreach with t-memo 1`] = `
     let cache = ctx.cache || {};
     let nextCache = ctx.cache = {};
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'].id;
-      let memo1 = [ctx['item'].x]
-      let vnode1 = cache[key1];
+      const key1 = ctx['item'].id;
+      const memo1 = [ctx['item'].x];
+      const vnode1 = cache[key1];;
       if (vnode1) {
         if (shallowEqual(vnode1.memo, memo1)) {
           c_block2[i1] = vnode1;
@@ -518,7 +518,7 @@ exports[`t-foreach with t-memo 1`] = `
       c_block2[i1] = withKey(block3([txt1, txt2]), key1);
       nextCache[key1] = Object.assign(c_block2[i1], {memo: memo1});
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_if.test.ts.snap

@@ -29,8 +29,8 @@ exports[`t-if a t-if with two inner nodes 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['condition']) {
-      let b3 = block3();
-      let b4 = block4();
+      const b3 = block3();
+      const b4 = block4();
       b2 = multi([b3, b4]);
     }
     return multi([b2]);
@@ -187,8 +187,8 @@ exports[`t-if div containing a t-if with two inner nodes 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['condition']) {
-      let b3 = block3();
-      let b4 = block4();
+      const b3 = block3();
+      const b4 = block4();
       b2 = multi([b3, b4]);
     }
     return block1([], [b2]);
@@ -208,8 +208,8 @@ exports[`t-if dynamic content after t-if with two children nodes 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['condition']) {
-      let b3 = block3();
-      let b4 = block4();
+      const b3 = block3();
+      const b4 = block4();
       b2 = multi([b3, b4]);
     }
     let txt1 = ctx['text'];
@@ -318,8 +318,8 @@ exports[`t-if t-if and t-else with two nodes 1`] = `
     if (ctx['condition']) {
       b2 = text(\`1\`);
     } else {
-      let b4 = block4();
-      let b5 = block5();
+      const b4 = block4();
+      const b5 = block5();
       b3 = multi([b4, b5]);
     }
     return multi([b2, b3]);
@@ -526,8 +526,8 @@ exports[`t-if two t-ifs next to each other 1`] = `
       b2 = block2([txt1]);
     }
     if (ctx['condition']) {
-      let b4 = block4();
-      let b5 = block5();
+      const b4 = block4();
+      const b5 = block5();
       b3 = multi([b4, b5]);
     }
     return block1([], [b2, b3]);

tests/compiler/__snapshots__/t_key.test.ts.snap

@@ -56,14 +56,14 @@ exports[`t-key t-key directive in a list 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['beers']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['beers']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`beer\`] = v_block2[i1];
-      let key1 = ctx['beer'].id;
+      const key1 = ctx['beer'].id;
       let txt1 = ctx['beer'].name;
       c_block2[i1] = withKey(block3([txt1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_out.test.ts.snap

@@ -9,7 +9,7 @@ exports[`t-out literal 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput('ok');
+    const b2 = safeOutput('ok');
     return block1([], [b2]);
   }
 }"
@@ -40,9 +40,9 @@ exports[`t-out multiple calls to t-out 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
+    const b2 = block2();
     ctx[zero] = b2;
-    let b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b3]);
   }
 }"
@@ -57,8 +57,8 @@ exports[`t-out multiple calls to t-out 2`] = `
   let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
-    let b3 = ctx[zero];
+    const b2 = ctx[zero];
+    const b3 = ctx[zero];
     return block1([], [b2, b3]);
   }
 }"
@@ -73,7 +73,7 @@ exports[`t-out not escaping 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -92,9 +92,9 @@ exports[`t-out t-out 0 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b2 = block2();
+    const b2 = block2();
     ctx[zero] = b2;
-    let b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b3 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b3]);
   }
 }"
@@ -109,7 +109,7 @@ exports[`t-out t-out 0 2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx[zero];
+    const b2 = ctx[zero];
     return block1([], [b2]);
   }
 }"
@@ -124,7 +124,7 @@ exports[`t-out t-out and another sibling node 1`] = `
   let block1 = createBlock(\`<span><span>hello</span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -147,7 +147,7 @@ exports[`t-out t-out bdom 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`var\`] = new LazyValue(value1, ctx, node);
-    let b3 = safeOutput(ctx['var']);
+    const b3 = safeOutput(ctx['var']);
     return block1([], [b3]);
   }
 }"
@@ -162,7 +162,7 @@ exports[`t-out t-out block 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['bdom']);
+    const b2 = safeOutput(ctx['bdom']);
     return block1([], [b2]);
   }
 }"
@@ -177,7 +177,7 @@ exports[`t-out t-out escaped 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -192,7 +192,7 @@ exports[`t-out t-out markedup 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -207,8 +207,8 @@ exports[`t-out t-out on a node with a body, as a default 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = text(\`nope\`);
-    let b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b3 = text(\`nope\`);
+    const b2 = withDefault(safeOutput(ctx['var']), b3);
     return block1([], [b2]);
   }
 }"
@@ -224,8 +224,8 @@ exports[`t-out t-out on a node with a dom node in body, as a default 1`] = `
   let block3 = createBlock(\`<div>nope</div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = block3();
-    let b2 = withDefault(safeOutput(ctx['var']), b3);
+    const b3 = block3();
+    const b2 = withDefault(safeOutput(ctx['var']), b3);
     return block1([], [b2]);
   }
 }"
@@ -240,7 +240,7 @@ exports[`t-out t-out switch escaped 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -255,7 +255,7 @@ exports[`t-out t-out switch escaped on markup 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -270,7 +270,7 @@ exports[`t-out t-out switch markup 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -297,10 +297,10 @@ exports[`t-out t-out switch markup on bdom 1`] = `
     let b3,b5;
     ctx[\`bdom\`] = new LazyValue(value1, ctx, node);
     if (ctx['hasBdom']) {
-      let b4 = safeOutput(ctx['bdom']);
+      const b4 = safeOutput(ctx['bdom']);
       b3 = block3([], [b4]);
     } else {
-      let b6 = safeOutput(ctx['var']);
+      const b6 = safeOutput(ctx['var']);
       b5 = block5([], [b6]);
     }
     return block1([], [b3, b5]);
@@ -317,7 +317,7 @@ exports[`t-out t-out switch markup on escaped 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -344,7 +344,7 @@ exports[`t-out t-out with arbitrary object 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -359,7 +359,7 @@ exports[`t-out t-out with arbitrary object 2 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -374,7 +374,7 @@ exports[`t-out t-out with comment 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -401,7 +401,7 @@ exports[`t-out variable 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -416,7 +416,7 @@ exports[`t-out with a String class 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -431,7 +431,7 @@ exports[`t-out with an extended String class 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -446,7 +446,7 @@ exports[`t-raw is deprecated should warn 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"
@@ -461,7 +461,7 @@ exports[`t-raw is deprecated t-out is actually called in t-raw's place 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['var']);
+    const b2 = safeOutput(ctx['var']);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_ref.test.ts.snap

@@ -41,7 +41,7 @@ exports[`t-ref ref in a t-call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -94,17 +94,17 @@ exports[`t-ref refs in a loop 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       const tKey_1 = ctx['item'];
       const v1 = ctx['item'];
       let ref1 = (el) => refs[\`\${v1}\`] = el;
       let txt1 = ctx['item'];
       c_block2[i1] = withKey(block3([ref1, txt1]), tKey_1 + key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

tests/compiler/__snapshots__/t_set.test.ts.snap

@@ -208,7 +208,7 @@ exports[`t-set t-set body is evaluated immediately 1`] = `
     setContextValue(ctx, \\"v1\\", 'before');
     ctx[\`v2\`] = new LazyValue(value1, ctx, node);
     setContextValue(ctx, \\"v1\\", 'after');
-    let b3 = safeOutput(ctx['v2']);
+    const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
   }
 }"
@@ -228,7 +228,7 @@ exports[`t-set t-set can't alter from within callee 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -271,7 +271,7 @@ exports[`t-set t-set can't alter in t-call body 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"iter\\", 'inCall');
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
@@ -349,16 +349,16 @@ exports[`t-set t-set outside modified in t-foreach 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       let txt1 = ctx['iter'];
       c_block2[i1] = withKey(block3([txt1]), key1);
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     let txt2 = ctx['iter'];
     return block1([txt2], [b2]);
   }
@@ -379,16 +379,16 @@ exports[`t-set t-set outside modified in t-foreach increment-after operator 1`]
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       let txt1 = ctx['iter'];
       c_block2[i1] = withKey(block3([txt1]), key1);
       setContextValue(ctx, \\"iter\\", ctx['iter']++);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     let txt2 = ctx['iter'];
     return block1([txt2], [b2]);
   }
@@ -409,16 +409,16 @@ exports[`t-set t-set outside modified in t-foreach increment-before operator 1`]
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       let txt1 = ctx['iter'];
       c_block2[i1] = withKey(block3([txt1]), key1);
       setContextValue(ctx, \\"iter\\", ++ctx['iter']);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     let txt2 = ctx['iter'];
     return block1([txt2], [b2]);
   }
@@ -439,16 +439,16 @@ exports[`t-set t-set should reuse variable if possible 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"v\\", 1);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['list']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_index\`] = i1;
-      let key1 = ctx['elem_index'];
+      const key1 = ctx['elem_index'];
       let txt1 = ctx['v'];
       setContextValue(ctx, \\"v\\", ctx['elem']);
       c_block2[i1] = withKey(block3([txt1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -463,8 +463,8 @@ exports[`t-set t-set with content and sub t-esc 1`] = `
   let block1 = createBlock(\`<div><block-text-0/></div>\`);
   
   function value1(ctx, node, key = \\"\\") {
-    let b3 = text(ctx['beep']);
-    let b4 = text(\` boop\`);
+    const b3 = text(ctx['beep']);
+    const b4 = text(\` boop\`);
     return multi([b3, b4]);
   }
   
@@ -500,7 +500,7 @@ exports[`t-set t-set with t-value (falsy) and body 1`] = `
     ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", true);
-    let b3 = safeOutput(ctx['v2']);
+    const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
   }
 }"
@@ -528,7 +528,7 @@ exports[`t-set t-set with t-value (truthy) and body 1`] = `
     ctx[\`v2\`] = withDefault(ctx['v3'], new LazyValue(value1, ctx, node));
     setContextValue(ctx, \\"v1\\", 'after');
     setContextValue(ctx, \\"v3\\", false);
-    let b3 = safeOutput(ctx['v2']);
+    const b3 = safeOutput(ctx['v2']);
     return block1([], [b3]);
   }
 }"

tests/compiler/__snapshots__/t_tag.test.ts.snap

@@ -8,7 +8,7 @@ exports[`qweb t-tag can fallback if falsy tag 1`] = `
   let block1 = tag => createBlock(\`<\${tag || 'fallback'}/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['tag'];
+    const tag1 = ctx['tag'];
     return toggler(tag1, block1(tag1)());
   }
 }"
@@ -22,7 +22,7 @@ exports[`qweb t-tag can update 1`] = `
   let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['tag'];
+    const tag1 = ctx['tag'];
     return toggler(tag1, block1(tag1)());
   }
 }"
@@ -36,7 +36,7 @@ exports[`qweb t-tag simple usecases 1`] = `
   let block1 = tag => createBlock(\`<\${tag || 't'}/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = 'div';
+    const tag1 = 'div';
     return toggler(tag1, block1(tag1)());
   }
 }"
@@ -50,7 +50,7 @@ exports[`qweb t-tag simple usecases 2`] = `
   let block1 = tag => createBlock(\`<\${tag || 't'}>text</\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['tag'];
+    const tag1 = ctx['tag'];
     return toggler(tag1, block1(tag1)());
   }
 }"
@@ -64,7 +64,7 @@ exports[`qweb t-tag with multiple attributes 1`] = `
   let block1 = tag => createBlock(\`<\${tag || 't'} class=\\"blueberry\\" taste=\\"raspberry\\">gooseberry</\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['tag'];
+    const tag1 = ctx['tag'];
     return toggler(tag1, block1(tag1)());
   }
 }"
@@ -78,7 +78,7 @@ exports[`qweb t-tag with multiple child nodes 1`] = `
   let block1 = tag => createBlock(\`<\${tag || 't'}> pear <span>apple</span> strawberry </\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['tag'];
+    const tag1 = ctx['tag'];
     return toggler(tag1, block1(tag1)());
   }
 }"
@@ -93,9 +93,9 @@ exports[`qweb t-tag with multiple t-tag in same template 1`] = `
   let block2 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['outer'];
-    let tag2 = ctx['inner'];
-    let b2 = toggler(tag2, block2(tag2)());
+    const tag1 = ctx['outer'];
+    const tag2 = ctx['inner'];
+    const b2 = toggler(tag2, block2(tag2)());
     return toggler(tag1, block1(tag1)([], [b2]));
   }
 }"
@@ -110,10 +110,10 @@ exports[`qweb t-tag with multiple t-tag in same template, part 2 1`] = `
   let block3 = tag => createBlock(\`<\${tag || 't'}>baz</\${tag || 't'}>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let tag1 = ctx['brother'];
-    let b2 = toggler(tag1, block2(tag1)());
-    let tag2 = ctx['brother'];
-    let b3 = toggler(tag2, block3(tag2)());
+    const tag1 = ctx['brother'];
+    const b2 = toggler(tag1, block2(tag1)());
+    const tag2 = ctx['brother'];
+    const b3 = toggler(tag2, block3(tag2)());
     return multi([b2, b3]);
   }
 }"

tests/compiler/__snapshots__/template_set.test.ts.snap

@@ -50,7 +50,7 @@ exports[`loading templates can load a few templates from a xml string 1`] = `
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -65,8 +65,8 @@ exports[`loading templates can load a few templates from a xml string 2`] = `
   let block3 = createBlock(\`<li>foo</li>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = block3();
+    const b2 = block2();
+    const b3 = block3();
     return multi([b2, b3]);
   }
 }"
@@ -82,7 +82,7 @@ exports[`loading templates can load a few templates from an XMLDocument 1`] = `
   let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -97,8 +97,8 @@ exports[`loading templates can load a few templates from an XMLDocument 2`] = `
   let block3 = createBlock(\`<li>foo</li>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = block3();
+    const b2 = block2();
+    const b3 = block3();
     return multi([b2, b3]);
   }
 }"

tests/compiler/error_handling.test.ts

@@ -12,15 +12,6 @@ describe("error handling", () => {
     expect(() => context.renderToString("invalidname")).toThrow("Missing template");
   });
 
-  test("cannot add twice the same template", () => {
-    const context = new TestContext();
-    context.addTemplate("test", `<t></t>`);
-    expect(() => context.addTemplate("test", "<div/>", { allowDuplicate: true })).not.toThrow(
-      "already defined"
-    );
-    expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
-  });
-
   test("addTemplates throw if parser error", () => {
     const context = new TestContext();
     expect(() => {

tests/compiler/inline_expressions.test.ts

@@ -65,14 +65,14 @@ describe("tokenizer", () => {
   });
 
   test("strings", () => {
-    expect(() => tokenize("'")).toThrow("Invalid expression");
-    expect(() => tokenize("'\\")).toThrow("Invalid expression");
-    expect(() => tokenize("'\\'")).toThrow("Invalid expression");
+    expect(() => tokenize("'")).toThrow("Tokenizer error: could not tokenize `'`");
+    expect(() => tokenize("'\\")).toThrow("Tokenizer error: could not tokenize `'\\`");
+    expect(() => tokenize("'\\'")).toThrow("Tokenizer error: could not tokenize `'\\'`");
     expect(tokenize("'hello ged'")).toEqual([{ type: "VALUE", value: "'hello ged'" }]);
     expect(tokenize("'hello \\'ged\\''")).toEqual([{ type: "VALUE", value: "'hello \\'ged\\''" }]);
 
-    expect(() => tokenize('"')).toThrow("Invalid expression");
-    expect(() => tokenize('"\\"')).toThrow("Invalid expression");
+    expect(() => tokenize('"')).toThrow('Tokenizer error: could not tokenize `"`');
+    expect(() => tokenize('"\\"')).toThrow('Tokenizer error: could not tokenize `"\\"`');
     expect(tokenize('"hello ged"')).toEqual([{ type: "VALUE", value: '"hello ged"' }]);
     expect(tokenize('"hello ged"}')).toEqual([
       { type: "VALUE", value: '"hello ged"' },

tests/compiler/validation.test.ts

@@ -11,11 +11,12 @@ describe("basic validation", () => {
     expect(() => context.getTemplate("invalidname")).toThrow("Missing template");
   });
 
-  test("cannot add twice the same template", () => {
+  test("cannot add a different template with the same name", () => {
     const context = new TemplateSet();
-    expect(() => context.addTemplate("test", "<div/>", { allowDuplicate: true })).not.toThrow(
-      "already defined"
-    );
+    context.addTemplate("test", `<t/>`);
+    // Same template with the same name is fine
+    expect(() => context.addTemplate("test", "<t/>")).not.toThrow();
+    // Different template with the same name crashes
     expect(() => context.addTemplate("test", "<div/>")).toThrow("already defined");
   });
 

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

@@ -6,7 +6,7 @@ exports[`basics GrandChild display is controlled by its GrandParent 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['myComp'];
+    const Comp1 = ctx['myComp'];
     return toggler(Comp1, component(Comp1, {displayGrandChild: ctx['displayGrandChild']}, key + \`__1\`, node, ctx));
   }
 }"
@@ -49,9 +49,9 @@ exports[`basics Multi root component 1`] = `
   let block4 = createBlock(\`<span>2</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = text(\`text\`);
-    let b4 = block4();
+    const b2 = block2();
+    const b3 = text(\`text\`);
+    const b4 = block4();
     return multi([b2, b3, b4]);
   }
 }"
@@ -102,7 +102,7 @@ exports[`basics a component inside a component 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -145,7 +145,7 @@ exports[`basics can handle empty props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -236,8 +236,8 @@ exports[`basics can mount a simple component with multiple roots 1`] = `
   let block3 = createBlock(\`<div/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
-    let b3 = block3();
+    const b2 = block2();
+    const b3 = block3();
     return multi([b2, b3]);
   }
 }"
@@ -477,15 +477,15 @@ exports[`basics list of two sub components inside other nodes 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = v_block2[i1];
-      let key1 = ctx['blip'].id;
-      let b4 = component(\`SubWidget\`, {}, key + \`__1__\${key1}\`, node, ctx);
-      let b5 = component(\`SubWidget\`, {}, key + \`__2__\${key1}\`, node, ctx);
+      const key1 = ctx['blip'].id;
+      const b4 = component(\`SubWidget\`, {}, key + \`__1__\${key1}\`, node, ctx);
+      const b5 = component(\`SubWidget\`, {}, key + \`__2__\${key1}\`, node, ctx);
       c_block2[i1] = withKey(block3([], [b4, b5]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -560,9 +560,9 @@ exports[`basics reconciliation alg is not confused in some specific situation 1`
   let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     const tKey_1 = 4;
-    let b3 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_1, component(\`Child\`, {}, tKey_1 + key + \`__2\`, node, ctx));
     return block1([], [b2, b3]);
   }
 }"
@@ -617,9 +617,9 @@ exports[`basics same t-keys in two different places 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = 1;
-    let b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, component(\`Child\`, {blip: '1'}, tKey_1 + key + \`__1\`, node, ctx));
     const tKey_2 = 1;
-    let b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, tKey_2 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_2, component(\`Child\`, {blip: '2'}, tKey_2 + key + \`__2\`, node, ctx));
     return block1([], [b2, b3]);
   }
 }"
@@ -952,8 +952,8 @@ exports[`basics two child components 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -981,7 +981,7 @@ exports[`basics update props of component without concrete own node 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['childProps'].key;
-    let b2 = toggler(tKey_1, component(\`Child\`, Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, component(\`Child\`, Object.assign({}, ctx['childProps']), tKey_1 + key + \`__1\`, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -1022,10 +1022,10 @@ exports[`basics updating a component with t-foreach as root 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       c_block1[i1] = withKey(text(ctx['item']), key1);
     }
     return list(c_block1);
@@ -1071,16 +1071,16 @@ exports[`basics widget after a t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`elem\`] = v_block2[i1];
       ctx[\`elem_index\`] = i1;
-      let key1 = ctx['elem_index'];
+      const key1 = ctx['elem_index'];
       c_block2[i1] = withKey(text(\`txt\`), key1);
     }
     ctx = ctx.__proto__;
-    let b2 = list(c_block2);
-    let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
+    const b2 = list(c_block2);
+    const b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2, b4]);
   }
 }"
@@ -1187,7 +1187,7 @@ exports[`support svg components add proper namespace to svg 1`] = `
   let block1 = createBlock(\`<svg block-ns=\\"http://www.w3.org/2000/svg\\"><block-child-0/></svg>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`GComp\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1216,15 +1216,15 @@ exports[`t-out in components can render list of t-out  1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].items);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
-      let b4 = text(ctx['item']);
-      let b5 = safeOutput(ctx['item']);
+      const key1 = ctx['item'];
+      const b4 = text(ctx['item']);
+      const b5 = safeOutput(ctx['item']);
       c_block2[i1] = withKey(multi([b4, b5]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -1237,8 +1237,8 @@ exports[`t-out in components can switch the contents of two t-out repeatedly 1`]
   let { safeOutput } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['state'].a);
-    let b3 = safeOutput(ctx['state'].b);
+    const b2 = safeOutput(ctx['state'].a);
+    const b3 = safeOutput(ctx['state'].b);
     return multi([b2, b3]);
   }
 }"
@@ -1253,7 +1253,7 @@ exports[`t-out in components update properly on state changes 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = safeOutput(ctx['state'].value);
+    const b2 = safeOutput(ctx['state'].value);
     return block1([], [b2]);
   }
 }"

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

@@ -7,16 +7,16 @@ exports[`Cascading renders after microtaskTick 1`] = `
   let { prepareList, withKey } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b3 = text(\` _ \`);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b3 = text(\` _ \`);
     ctx = Object.create(ctx);
-    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);;
     for (let i1 = 0; i1 < l_block4; i1++) {
       ctx[\`elem\`] = v_block4[i1];
-      let key1 = ctx['elem'].id;
+      const key1 = ctx['elem'].id;
       c_block4[i1] = withKey(text(ctx['elem'].id), key1);
     }
-    let b4 = list(c_block4);
+    const b4 = list(c_block4);
     return multi([b2, b3, b4]);
   }
 }"
@@ -30,10 +30,10 @@ exports[`Cascading renders after microtaskTick 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
-      let key1 = ctx['elem'].id;
+      const key1 = ctx['elem'].id;
       c_block1[i1] = withKey(component(\`Element\`, {id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     return list(c_block1);
@@ -52,6 +52,50 @@ exports[`Cascading renders after microtaskTick 3`] = `
 }"
 `;
 
+exports[`another scenario with delayed rendering 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(\`A\`);
+    if (ctx['state'].value<15) {
+      b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`another scenario with delayed rendering 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['props'].value);
+    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`another scenario with delayed rendering 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
 exports[`async rendering destroying a widget before start is over 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -169,7 +213,7 @@ exports[`concurrent renderings scenario 1 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -183,7 +227,7 @@ exports[`concurrent renderings scenario 1 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -213,7 +257,7 @@ exports[`concurrent renderings scenario 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].fromA;
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([txt1], [b2]);
   }
 }"
@@ -227,7 +271,7 @@ exports[`concurrent renderings scenario 2 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -256,7 +300,7 @@ exports[`concurrent renderings scenario 2bis 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -270,7 +314,7 @@ exports[`concurrent renderings scenario 2bis 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA, fromB: ctx['state'].fromB}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -299,7 +343,7 @@ exports[`concurrent renderings scenario 3 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -313,7 +357,7 @@ exports[`concurrent renderings scenario 3 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -327,7 +371,7 @@ exports[`concurrent renderings scenario 3 3`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -356,7 +400,7 @@ exports[`concurrent renderings scenario 4 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -370,7 +414,7 @@ exports[`concurrent renderings scenario 4 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentC\`, {fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -384,7 +428,7 @@ exports[`concurrent renderings scenario 4 3`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -413,7 +457,7 @@ exports[`concurrent renderings scenario 5 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -441,7 +485,7 @@ exports[`concurrent renderings scenario 6 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -469,7 +513,7 @@ exports[`concurrent renderings scenario 7 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -498,7 +542,7 @@ exports[`concurrent renderings scenario 8 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -528,8 +572,8 @@ exports[`concurrent renderings scenario 9 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].fromA;
-    let b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
-    let b3 = component(\`ComponentC\`, {fromA: ctx['state'].fromA}, key + \`__2\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b3 = component(\`ComponentC\`, {fromA: ctx['state'].fromA}, key + \`__2\`, node, ctx);
     return block1([txt1], [b2, b3]);
   }
 }"
@@ -557,7 +601,7 @@ exports[`concurrent renderings scenario 9 3`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentD\`, {fromA: ctx['props'].fromA, fromC: ctx['state'].fromC}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -586,7 +630,7 @@ exports[`concurrent renderings scenario 10 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -631,7 +675,7 @@ exports[`concurrent renderings scenario 11 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -660,7 +704,7 @@ exports[`concurrent renderings scenario 12 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -720,7 +764,7 @@ exports[`concurrent renderings scenario 14 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -734,7 +778,7 @@ exports[`concurrent renderings scenario 14 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -764,7 +808,7 @@ exports[`concurrent renderings scenario 15 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`B\`, {fromA: ctx['state'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -778,7 +822,7 @@ exports[`concurrent renderings scenario 15 2`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`C\`, {fromB: ctx['state'].fromB, fromA: ctx['props'].fromA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1008,9 +1052,9 @@ exports[`delay willUpdateProps 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['props'].value);
-    let b3 = text(\`_\`);
-    let b4 = text(ctx['state'].int);
+    const b2 = text(ctx['props'].value);
+    const b3 = text(\`_\`);
+    const b4 = text(ctx['state'].int);
     return multi([b2, b3, b4]);
   }
 }"
@@ -1033,8 +1077,8 @@ exports[`delay willUpdateProps with rendering grandchild 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`DelayedChild\`, {value: ctx['props'].state.value}, key + \`__1\`, node, ctx);
-    let b3 = component(\`ReactiveChild\`, {}, key + \`__2\`, node, ctx);
+    const b2 = component(\`DelayedChild\`, {value: ctx['props'].state.value}, key + \`__1\`, node, ctx);
+    const b3 = component(\`ReactiveChild\`, {}, key + \`__2\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -1046,9 +1090,9 @@ exports[`delay willUpdateProps with rendering grandchild 3`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['props'].value);
-    let b3 = text(\`_\`);
-    let b4 = text(ctx['state'].int);
+    const b2 = text(ctx['props'].value);
+    const b3 = text(\`_\`);
+    const b4 = text(ctx['state'].int);
     return multi([b2, b3, b4]);
   }
 }"
@@ -1067,6 +1111,337 @@ exports[`delay willUpdateProps with rendering grandchild 4`] = `
 }"
 `;
 
+exports[`delayed fiber does not get rendered if it was cancelled 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`A\`);
+    const b3 = component(\`B\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed fiber does not get rendered if it was cancelled 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`B\`);
+    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed fiber does not get rendered if it was cancelled 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`C\`);
+    const b3 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed fiber does not get rendered if it was cancelled 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`D\`);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`C\`, {value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block3 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    let txt1 = ctx['props'].value;
+    const b3 = block3([txt1]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, but then initial rendering is cancelled by yet another render 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`delayed rendering, destruction, stuff happens 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`A\`);
+    const b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, destruction, stuff happens 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(\`B\`);
+    if (ctx['state'].hasChild) {
+      b3 = component(\`C\`, {value: ctx['state'].someValue+ctx['props'].value}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, destruction, stuff happens 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block4 = createBlock(\`<p><block-text-0/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`C\`);
+    const b3 = component(\`D\`, {}, key + \`__1\`, node, ctx);
+    let txt1 = ctx['props'].value;
+    const b4 = block4([txt1]);
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
+exports[`delayed rendering, destruction, stuff happens 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block3 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`D\`);
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    const b3 = block3([hdlr1, txt1]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber and stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber and stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['props'].value);
+    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber and stuff 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(\`A\`);
+    if (ctx['state'].value<15) {
+      b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['props'].value);
+    const b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, reusing fiber then component is destroyed and  stuff 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`delayed rendering, then component is destroyed and  stuff 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`delayed rendering, then component is destroyed and  stuff 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(ctx['props'].value);
+    if (ctx['props'].value<10) {
+      b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`delayed rendering, then component is destroyed and  stuff 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    return block1([hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(\` A \`);
+    if (ctx['state'].flag) {
+      const b4 = component(\`B\`, {value: ctx['state'].valueB}, key + \`__1\`, node, ctx);
+      const b5 = component(\`C\`, {value: ctx['state'].valueC}, key + \`__2\`, node, ctx);
+      b3 = multi([b4, b5]);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].value);
+  }
+}"
+`;
+
+exports[`destroyed component causes other soon to be destroyed component to rerender, weird stuff happens 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['state'].val+ctx['props'].value);
+  }
+}"
+`;
+
 exports[`destroying/recreating a subcomponent, other scenario 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1172,7 +1547,7 @@ exports[`properly behave when destroyed/unmounted while rendering  2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`SubChild\`, {val: ctx['props'].val}, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubChild\`, {val: ctx['props'].val}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1244,6 +1619,70 @@ exports[`rendering parent twice, with different props on child and stuff 2`] = `
 }"
 `;
 
+exports[`renderings, destruction, patch, stuff, ... yet another variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`A\`);
+    const b3 = component(\`B\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
+    const b4 = component(\`D\`, {}, key + \`__2\`, node, ctx);
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
+exports[`renderings, destruction, patch, stuff, ... yet another variation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(\`B\`);
+    if (ctx['props'].value===33) {
+      b3 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`renderings, destruction, patch, stuff, ... yet another variation 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block3 = createBlock(\`<p block-handler-0=\\"click\\"><block-text-1/></p>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`D\`);
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    const b3 = block3([hdlr1, txt1]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`renderings, destruction, patch, stuff, ... yet another variation 4`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block3 = createBlock(\`<span block-handler-0=\\"click\\"><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\`C\`);
+    let hdlr1 = [ctx['increment'], ctx];
+    let txt1 = ctx['state'].val;
+    const b3 = block3([hdlr1, txt1]);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
 exports[`t-foreach with dynamic async component 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -1252,14 +1691,14 @@ exports[`t-foreach with dynamic async component 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['list']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['list']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`arr\`] = v_block1[i1];
       ctx[\`arr_index\`] = i1;
-      let key1 = ctx['arr_index'];
+      const key1 = ctx['arr_index'];
       let b3;
       if (ctx['arr']) {
-        let Comp1 = ctx['myComp'];
+        const Comp1 = ctx['myComp'];
         b3 = toggler(Comp1, component(Comp1, {key: ctx['arr'][0]}, key + \`__1__\${key1}\`, node, ctx));
       }
       c_block1[i1] = withKey(multi([b3]), key1);
@@ -1292,8 +1731,8 @@ exports[`t-key on dom node having a component 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    let Comp1 = ctx['myComp'];
-    let b2 = toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx)));
+    const Comp1 = ctx['myComp'];
+    const b2 = toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx)));
     return toggler(tKey_1, block1([], [b2]));
   }
 }"
@@ -1317,7 +1756,7 @@ exports[`t-key on dynamic async component (toggler is never patched) 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    let Comp1 = ctx['myComp'];
+    const Comp1 = ctx['myComp'];
     return toggler(tKey_1, toggler(Comp1, component(Comp1, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx)));
   }
 }"
@@ -1400,7 +1839,7 @@ exports[`update a sub-component twice in the same frame 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1428,7 +1867,7 @@ exports[`update a sub-component twice in the same frame, 2 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ChildA\`, {val: ctx['state'].valA}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -32,7 +32,7 @@ exports[`basics no component catching error lead to full app destruction 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -85,6 +85,64 @@ exports[`basics simple catchError 2`] = `
 }"
 `;
 
+exports[`can catch errors an error in onWillDestroy 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(ctx['state'].value);
+    if (ctx['state'].hasChild) {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors an error in onWillDestroy 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`can catch errors an error in onWillDestroy, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2,b3;
+    b2 = text(ctx['state'].value);
+    if (ctx['state'].hasChild) {
+      b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`can catch errors an error in onWillDestroy, variation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`can catch errors calling a hook outside setup should crash 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -109,7 +167,7 @@ exports[`can catch errors can catch an error in a component render function 1`]
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -128,7 +186,7 @@ exports[`can catch errors can catch an error in a component render function 2`]
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -162,7 +220,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -181,7 +239,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -197,13 +255,13 @@ exports[`can catch errors can catch an error in the constructor call of a compon
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
+    const b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx);
+    const b5 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -222,7 +280,7 @@ exports[`can catch errors can catch an error in the constructor call of a compon
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -281,7 +339,7 @@ exports[`can catch errors can catch an error in the initial call of a component
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -300,7 +358,7 @@ exports[`can catch errors can catch an error in the initial call of a component
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -356,7 +414,7 @@ exports[`can catch errors can catch an error in the initial call of a component
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -396,7 +454,7 @@ exports[`can catch errors can catch an error in the mounted call (in child of ch
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -479,7 +537,7 @@ exports[`can catch errors can catch an error in the mounted call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -498,7 +556,7 @@ exports[`can catch errors can catch an error in the mounted call 2`] = `
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -532,7 +590,7 @@ exports[`can catch errors can catch an error in the willPatch call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].message;
-    let b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([txt1], [b3]);
   }
 }"
@@ -551,7 +609,7 @@ exports[`can catch errors can catch an error in the willPatch call 2`] = `
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -585,7 +643,7 @@ exports[`can catch errors can catch an error in the willStart call 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -604,7 +662,7 @@ exports[`can catch errors can catch an error in the willStart call 2`] = `
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -633,13 +691,13 @@ exports[`can catch errors can catch an error origination from a child's willStar
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
+    const b3 = component(\`ClassicCompoent\`, {}, key + \`__1\`, node, ctx);
+    const b4 = component(\`ErrorComponent\`, {}, key + \`__2\`, node, ctx);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx);
+    const b5 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -658,7 +716,7 @@ exports[`can catch errors can catch an error origination from a child's willStar
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -718,7 +776,7 @@ exports[`can catch errors catchError in catchError 2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Boom\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -745,16 +803,16 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   let { prepareList, capture, markRaw, withKey } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['cp'].Comp;
+    const Comp1 = ctx['cp'].Comp;
     return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.values(ctx['state'].cps));
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.values(ctx['state'].cps));;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`cp\`] = v_block1[i1];
-      let key1 = ctx['cp'].id;
+      const key1 = ctx['cp'].id;
       const v1 = ctx['cp'];
       const ctx1 = capture(ctx);
       c_block1[i1] = withKey(component(\`ErrorHandler\`, {onError: ()=>this.cleanUp(v1.id),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, ctx), key1);
@@ -771,7 +829,7 @@ exports[`can catch errors catching error, rethrow, render parent  -- a main comp
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
+    return callSlot(ctx, node, key, 'default', false, null);
   }
 }"
 `;
@@ -820,16 +878,16 @@ exports[`can catch errors catching in child makes parent render 1`] = `
   let { prepareList, capture, markRaw, withKey } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['elem'][1];
+    const Comp1 = ctx['elem'][1];
     return toggler(Comp1, component(Comp1, {id: ctx['elem'][0]}, key + \`__1\`, node, ctx));
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(Object.entries(this.elements));;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
-      let key1 = ctx['elem'][0];
+      const key1 = ctx['elem'][0];
       const v1 = ctx['elem'];
       const ctx1 = capture(ctx);
       c_block1[i1] = withKey(component(\`Catch\`, {onError: (_error)=>this.onError(v1[0],_error),slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__2__\${key1}\`, node, ctx), key1);
@@ -846,7 +904,7 @@ exports[`can catch errors catching in child makes parent render 2`] = `
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
+    return callSlot(ctx, node, key, 'default', false, null);
   }
 }"
 `;
@@ -891,8 +949,8 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`OK\`, {}, key + \`__1\`, node, ctx);
-    let b4 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx);
+    const b2 = component(\`OK\`, {}, key + \`__1\`, node, ctx);
+    const b4 = component(\`ErrorBoundary\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__3\`, node, ctx);
     return block1([], [b2, b4]);
   }
 }"
@@ -922,7 +980,7 @@ exports[`can catch errors error in mounted on a component with a sibling (proper
     if (ctx['state'].error) {
       b2 = text(\`Error handled\`);
     } else {
-      b3 = callSlot(ctx, node, key, 'default', false, {});
+      b3 = callSlot(ctx, node, key, 'default', false, null);
     }
     return block1([], [b2, b3]);
   }
@@ -1010,7 +1068,7 @@ exports[`errors and promises a rendering error in a sub component will reject th
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1052,7 +1110,7 @@ exports[`errors and promises a rendering error will reject the render promise (w
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     let txt1 = ctx['x'].y;
     return block1([txt1], [b2]);
   }
@@ -1156,6 +1214,19 @@ exports[`errors and promises errors in mounted and in willUnmount 1`] = `
 }"
 `;
 
+exports[`errors and promises errors in onWillRender/onRender aren't wrapped more than once 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>abc</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`errors and promises errors in rerender 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -37,7 +37,7 @@ exports[`event handling handler receive the event as argument 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     let hdlr1 = [ctx['inc'], ctx];
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     let txt1 = ctx['state'].value;
     return block1([hdlr1, txt1], [b2]);
   }
@@ -99,16 +99,16 @@ exports[`event handling objects from scope are properly captured by t-on 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       let hdlr1 = [_ev=>v1(v2.val,_ev), ctx];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -140,16 +140,16 @@ exports[`event handling t-on with handler bound to dynamic argument on a t-forea
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = ctx['item'];
+      const key1 = ctx['item'];
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       let hdlr1 = [_ev=>v1(v2,_ev), ctx];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

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

@@ -147,7 +147,7 @@ exports[`basics top level sub widget with a parent 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -109,8 +109,8 @@ exports[`hooks parent and child env (with useChildSubEnv then useSubEnv) 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['env'].val);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(ctx['env'].val);
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -140,8 +140,8 @@ exports[`hooks parent and child env (with useChildSubEnv) 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['env'].val);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(ctx['env'].val);
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -167,8 +167,8 @@ exports[`hooks parent and child env (with useSubEnv) 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['env'].val);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(ctx['env'].val);
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -301,6 +301,19 @@ exports[`hooks useEffect hook effect with empty dependency list never reruns 1`]
 }"
 `;
 
+exports[`hooks useEffect hook properly behaves when the effect function throws 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`hooks useExternalListener 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -21,8 +21,8 @@ exports[`lifecycle hooks component semantics 1`] = `
   let block1 = createBlock(\`<div>A<block-child-0/><block-child-1/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
-    let b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
+    const b2 = component(\`B\`, {}, key + \`__1\`, node, ctx);
+    const b3 = component(\`C\`, {}, key + \`__2\`, node, ctx);
     return block1([], [b2, b3]);
   }
 }"
@@ -110,7 +110,7 @@ exports[`lifecycle hooks components are unmounted and destroyed if no longer in
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].flag) {
-      let b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+      const b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
       b2 = block2([], [b3]);
     }
     return multi([b2]);
@@ -196,7 +196,7 @@ exports[`lifecycle hooks hooks are called in proper order in widget creation/des
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -245,7 +245,7 @@ exports[`lifecycle hooks lifecycle semantics 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -458,7 +458,7 @@ exports[`lifecycle hooks mounted hook is called on subcomponents, in proper orde
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -502,7 +502,7 @@ exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper o
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -555,7 +555,7 @@ exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -658,6 +658,43 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 }"
 `;
 
+exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<span/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {prop: ctx['state'].prop};
+    helpers.validateProps(\`Child\`, props1, ctx);
+    return component(\`Child\`, props1, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`\`);
+  }
+}"
+`;
+
 exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -666,7 +703,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -680,7 +717,7 @@ exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents,
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
+    const b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -8,7 +8,7 @@ exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -36,10 +36,10 @@ exports[`basics arrow functions as prop correctly capture their scope 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
-      let key1 = ctx['item'].val;
+      const key1 = ctx['item'].val;
       const v1 = ctx['onClick'];
       const v2 = ctx['item'];
       c_block1[i1] = withKey(component(\`Child\`, {onClick: _ev=>v1(v2.val,_ev)}, key + \`__1__\${key1}\`, node, ctx), key1);
@@ -71,7 +71,7 @@ exports[`basics explicit object prop 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -158,7 +158,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`abc\`] = new LazyValue(value1, ctx, node);
-    let b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    const b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -174,7 +174,7 @@ exports[`basics t-set with a body expression can be passed in props, and then t-
   
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['props'].val;
-    let b2 = safeOutput(ctx['props'].val);
+    const b2 = safeOutput(ctx['props'].val);
     return block1([txt1], [b2]);
   }
 }"
@@ -192,7 +192,7 @@ exports[`basics t-set with a body expression can be used as textual prop 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"abc\\", \`42\`);
-    let b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -224,7 +224,7 @@ exports[`basics t-set works  1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"val\\", 42);
-    let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -23,7 +23,7 @@ exports[`default props can set default boolean values 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -59,7 +59,7 @@ exports[`default props can set default values 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -89,7 +89,7 @@ exports[`default props default values are also set whenever component is updated
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -171,7 +171,7 @@ exports[`props validation can validate a prop with multiple types 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -200,7 +200,7 @@ exports[`props validation can validate a prop with multiple types 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -229,7 +229,7 @@ exports[`props validation can validate a prop with multiple types 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -245,7 +245,7 @@ exports[`props validation can validate an array with given primitive type 1`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -274,7 +274,7 @@ exports[`props validation can validate an array with given primitive type 3`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -303,7 +303,7 @@ exports[`props validation can validate an array with given primitive type 5`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -319,7 +319,7 @@ exports[`props validation can validate an array with given primitive type 6`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -335,7 +335,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -364,7 +364,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -393,7 +393,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -422,7 +422,7 @@ exports[`props validation can validate an array with multiple sub element types
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -438,7 +438,7 @@ exports[`props validation can validate an object with simple shape 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -467,7 +467,7 @@ exports[`props validation can validate an object with simple shape 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -483,7 +483,7 @@ exports[`props validation can validate an object with simple shape 4`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -499,7 +499,7 @@ exports[`props validation can validate an object with simple shape 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -515,7 +515,7 @@ exports[`props validation can validate an optional props 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -544,7 +544,7 @@ exports[`props validation can validate an optional props 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -573,7 +573,7 @@ exports[`props validation can validate an optional props 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -589,7 +589,7 @@ exports[`props validation can validate recursively complicated prop def 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -618,7 +618,7 @@ exports[`props validation can validate recursively complicated prop def 3`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -647,7 +647,7 @@ exports[`props validation can validate recursively complicated prop def 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -663,7 +663,7 @@ exports[`props validation default values are applied before validating props at
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -693,7 +693,7 @@ exports[`props validation missing required boolean prop causes an error 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -709,7 +709,7 @@ exports[`props validation mix of optional and mandatory 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
     helpers.validateProps(\`Child\`, props1, ctx);
-    let b2 = component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -725,7 +725,7 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
   return function template(ctx, node, key = \\"\\") {
     const props1 = {message: 1};
     helpers.validateProps(\`Child\`, props1, ctx);
-    let b2 = component(\`Child\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -755,7 +755,7 @@ exports[`props validation props are validated whenever component is updated 1`]
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['state'].p};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -785,7 +785,7 @@ exports[`props validation props: list of strings 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -801,7 +801,7 @@ exports[`props validation validate simple types 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -817,7 +817,7 @@ exports[`props validation validate simple types 2`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -846,7 +846,7 @@ exports[`props validation validate simple types 4`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -862,7 +862,7 @@ exports[`props validation validate simple types 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -878,7 +878,7 @@ exports[`props validation validate simple types 6`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -907,7 +907,7 @@ exports[`props validation validate simple types 8`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -923,7 +923,7 @@ exports[`props validation validate simple types 9`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -939,7 +939,7 @@ exports[`props validation validate simple types 10`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -968,7 +968,7 @@ exports[`props validation validate simple types 12`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -984,7 +984,7 @@ exports[`props validation validate simple types 13`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1000,7 +1000,7 @@ exports[`props validation validate simple types 14`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1029,7 +1029,7 @@ exports[`props validation validate simple types 16`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1045,7 +1045,7 @@ exports[`props validation validate simple types 17`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1061,7 +1061,7 @@ exports[`props validation validate simple types 18`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1090,7 +1090,7 @@ exports[`props validation validate simple types 20`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1106,7 +1106,7 @@ exports[`props validation validate simple types 21`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1122,7 +1122,7 @@ exports[`props validation validate simple types 22`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1151,7 +1151,7 @@ exports[`props validation validate simple types 24`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1167,7 +1167,7 @@ exports[`props validation validate simple types, alternate form 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1183,7 +1183,7 @@ exports[`props validation validate simple types, alternate form 2`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1212,7 +1212,7 @@ exports[`props validation validate simple types, alternate form 4`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1228,7 +1228,7 @@ exports[`props validation validate simple types, alternate form 5`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1244,7 +1244,7 @@ exports[`props validation validate simple types, alternate form 6`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1273,7 +1273,7 @@ exports[`props validation validate simple types, alternate form 8`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1289,7 +1289,7 @@ exports[`props validation validate simple types, alternate form 9`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1305,7 +1305,7 @@ exports[`props validation validate simple types, alternate form 10`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1334,7 +1334,7 @@ exports[`props validation validate simple types, alternate form 12`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1350,7 +1350,7 @@ exports[`props validation validate simple types, alternate form 13`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1366,7 +1366,7 @@ exports[`props validation validate simple types, alternate form 14`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1395,7 +1395,7 @@ exports[`props validation validate simple types, alternate form 16`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1411,7 +1411,7 @@ exports[`props validation validate simple types, alternate form 17`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1427,7 +1427,7 @@ exports[`props validation validate simple types, alternate form 18`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1456,7 +1456,7 @@ exports[`props validation validate simple types, alternate form 20`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1472,7 +1472,7 @@ exports[`props validation validate simple types, alternate form 21`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1488,7 +1488,7 @@ exports[`props validation validate simple types, alternate form 22`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1517,7 +1517,7 @@ exports[`props validation validate simple types, alternate form 24`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {p: ctx['p']};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1533,7 +1533,7 @@ exports[`props validation validation is only done in dev mode 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const props1 = {};
     helpers.validateProps(\`SubComp\`, props1, ctx);
-    let b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, props1, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -1547,7 +1547,7 @@ exports[`props validation validation is only done in dev mode 2`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`SubComp\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`SubComp\`, {}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -1,5 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2;
+    if (ctx['state'].renderChild) {
+      b2 = component(\`Child\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
+    }
+    return multi([b2]);
+  }
+}"
+`;
+
+exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].state.content.a);
+  }
+}"
+`;
+
 exports[`reactivity in lifecycle can use a state hook 1`] = `
 "function anonymous(bdom, helpers
 ) {

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

@@ -77,7 +77,7 @@ exports[`refs refs are properly bound in slots 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let txt1 = ctx['state'].val;
     const ctx1 = capture(ctx);
-    let b3 = component(\`Dialog\`, {slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    const b3 = component(\`Dialog\`, {slots: markRaw({'footer': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
     return block1([txt1], [b3]);
   }
 }"
@@ -92,7 +92,7 @@ exports[`refs refs are properly bound in slots 2`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callSlot(ctx, node, key, 'footer', false, {});
+    const b2 = callSlot(ctx, node, key, 'footer', false, null);
     return block1([], [b2]);
   }
 }"
@@ -110,8 +110,8 @@ exports[`refs throws if there are 2 same refs at the same time 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const refs = ctx.__owl__.refs;
     const ref1 = multiRefSetter(refs, \`coucou\`);
-    let b2 = block2([ref1]);
-    let b3 = block3([ref1]);
+    const b2 = block2([ref1]);
+    const b3 = block3([ref1]);
     return multi([b2, b3]);
   }
 }"

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

@@ -17,8 +17,8 @@ exports[`force render in case of existing render 2`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
-    let b3 = text(ctx['props'].val);
+    const b2 = component(\`C\`, {}, key + \`__1\`, node, ctx);
+    const b3 = text(ctx['props'].val);
     return multi([b2, b3]);
   }
 }"
@@ -41,8 +41,8 @@ exports[`rendering semantics can force a render to update sub tree 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['state'].value);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(ctx['state'].value);
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -65,8 +65,8 @@ exports[`rendering semantics can render a parent without rendering child 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['state'].value);
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(ctx['state'].value);
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
 }"
@@ -127,15 +127,39 @@ exports[`rendering semantics props are reactive 2`] = `
 }"
 `;
 
+exports[`rendering semantics render need a boolean = true to be 'deep' 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['state'].value);
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`rendering semantics render need a boolean = true to be 'deep' 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
+
 exports[`rendering semantics render with deep=true followed by render with deep=false work as expected 1`] = `
 "function anonymous(bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`parent\`);
-    let b3 = text(ctx['state'].value);
-    let b4 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = text(\`parent\`);
+    const b3 = text(ctx['state'].value);
+    const b4 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     return multi([b2, b3, b4]);
   }
 }"
@@ -147,8 +171,8 @@ exports[`rendering semantics render with deep=true followed by render with deep=
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`child\`);
-    let b3 = text(ctx['env'].getValue());
+    const b2 = text(\`child\`);
+    const b3 = text(ctx['env'].getValue());
     return multi([b2, b3]);
   }
 }"
@@ -160,8 +184,8 @@ exports[`rendering semantics rendering is atomic (for one subtree) 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(ctx['state'].obj.val);
-    let b3 = component(\`B\`, {obj: ctx['state'].obj}, key + \`__1\`, node, ctx);
+    const b2 = text(ctx['state'].obj.val);
+    const b3 = component(\`B\`, {obj: ctx['state'].obj}, key + \`__1\`, node, ctx);
     return multi([b2, b3]);
   }
 }"

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

@@ -20,9 +20,9 @@ exports[`style and class handling can set class on multi root component 2`] = `
   let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
+    const b2 = block2();
     let attr1 = ctx['props'].class;
-    let b3 = block3([attr1]);
+    const b3 = block3([attr1]);
     return multi([b2, b3]);
   }
 }"
@@ -205,7 +205,7 @@ exports[`style and class handling class with extra whitespaces (variation) 1`] =
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {class: 'a  b c   d'}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -310,7 +310,7 @@ exports[`style and class handling empty class attribute is not added on widget r
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -438,7 +438,7 @@ exports[`style and class handling t-att-class is properly added/removed on widge
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -9,7 +9,7 @@ exports[`t-call dynamic t-call 1`] = `
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
-    let b1 = text(\` owl \`);
+    const b1 = text(\` owl \`);
     ctx[zero] = b1;
     const template1 = (ctx['current'].template);
     return call(this, template1, ctx, node, key + \`__1\`);
@@ -48,9 +48,9 @@ exports[`t-call dynamic t-call: key is propagated 1`] = `
   let { call } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
     const template1 = (ctx['sub']);
-    let b3 = call(this, template1, ctx, node, key + \`__2\`);
+    const b3 = call(this, template1, ctx, node, key + \`__2\`);
     return multi([b2, b3]);
   }
 }"
@@ -91,7 +91,7 @@ exports[`t-call handlers are properly bound through a dynamic t-call 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const template1 = ('__template__999');
-    let b2 = call(this, template1, ctx, node, key + \`__1\`);
+    const b2 = call(this, template1, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
     return block1([txt1], [b2]);
   }
@@ -122,7 +122,7 @@ exports[`t-call handlers are properly bound through a t-call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     let txt1 = ctx['counter'];
     return block1([txt1], [b2]);
   }
@@ -153,7 +153,7 @@ exports[`t-call handlers with arguments are properly bound through a t-call 1`]
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -184,7 +184,7 @@ exports[`t-call parent is set within t-call 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -266,7 +266,7 @@ exports[`t-call recursive t-call binding this -- static t-call 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"level\\", 0);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -288,11 +288,11 @@ exports[`t-call recursive t-call binding this -- static t-call 2`] = `
     if (ctx['level']<2) {
       let hdlr1 = [\\"stop\\", ctx['onClicked'].bind(this), ctx];
       let txt1 = ctx['level'];
-      let b3 = block3([hdlr1, txt1]);
+      const b3 = block3([hdlr1, txt1]);
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       setContextValue(ctx, \\"level\\", ctx['level']+1);
-      let b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+      const b4 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
       ctx = ctx.__proto__;
       b2 = multi([b3, b4]);
     }
@@ -316,7 +316,7 @@ exports[`t-call sub components in two t-calls 1`] = `
     if (ctx['state'].val===1) {
       b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     } else {
-      let b4 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
+      const b4 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
       b3 = block3([], [b4]);
     }
     return multi([b2, b3]);
@@ -360,17 +360,17 @@ exports[`t-call t-call in t-foreach and children component 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(['a','b','c']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
       ctx[\`val_first\`] = i1 === 0;
       ctx[\`val_last\`] = i1 === v_block2.length - 1;
       ctx[\`val_index\`] = i1;
       ctx[\`val_value\`] = k_block2[i1];
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       c_block2[i1] = withKey(callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

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

@@ -8,7 +8,7 @@ exports[`t-call-block simple t-call-block with static text 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = ctx['myBlock']();
+    const b2 = ctx['myBlock']();
     return block1([], [b2]);
   }
 }"

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

@@ -8,8 +8,8 @@ exports[`t-component can switch between dynamic components without the need for
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['constructor'].components[ctx['state'].child];
-    let b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    const Comp1 = ctx['constructor'].components[ctx['state'].child];
+    const b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -48,7 +48,7 @@ exports[`t-component can use dynamic components (the class) if given (with diffe
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
-    let Comp1 = ctx['myComponent'];
+    const Comp1 = ctx['myComponent'];
     return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__1\`, node, ctx)));
   }
 }"
@@ -87,7 +87,7 @@ exports[`t-component can use dynamic components (the class) if given 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['state'].child;
-    let Comp1 = ctx['myComponent'];
+    const Comp1 = ctx['myComponent'];
     return toggler(tKey_1, toggler(Comp1, component(Comp1, {}, tKey_1 + key + \`__1\`, node, ctx)));
   }
 }"
@@ -127,8 +127,8 @@ exports[`t-component modifying a sub widget 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['Counter'];
-    let b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
+    const Comp1 = ctx['Counter'];
+    const b2 = toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -156,7 +156,7 @@ exports[`t-component switching dynamic component 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['Child'];
+    const Comp1 = ctx['Child'];
     return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
   }
 }"
@@ -192,7 +192,7 @@ exports[`t-component t-component works in simple case 1`] = `
   let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
   
   return function template(ctx, node, key = \\"\\") {
-    let Comp1 = ctx['Child'];
+    const Comp1 = ctx['Child'];
     return toggler(Comp1, component(Comp1, {}, key + \`__1\`, node, ctx));
   }
 }"

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

@@ -11,14 +11,14 @@ exports[`list of components components in a node in a t-foreach  1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['items']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`item\`] = v_block2[i1];
-      let key1 = 'li_'+ctx['item'];
-      let b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
+      const key1 = 'li_'+ctx['item'];
+      const b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -46,11 +46,11 @@ exports[`list of components crash on duplicate key in dev mode 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList([1,2]);;
     const keys1 = new Set();
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`item\`] = v_block1[i1];
-      let key1 = 'child';
+      const key1 = 'child';
       if (keys1.has(key1)) { throw new Error(\`Got duplicate key in t-foreach: \${key1}\`)}
       keys1.add(key1);
       const props1 = {};
@@ -84,14 +84,14 @@ exports[`list of components list of sub components inside other nodes 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].blips);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`blip\`] = v_block2[i1];
-      let key1 = ctx['blip'].id;
-      let b4 = component(\`SubComponent\`, {}, key + \`__1__\${key1}\`, node, ctx);
+      const key1 = ctx['blip'].id;
+      const b4 = component(\`SubComponent\`, {}, key + \`__1__\${key1}\`, node, ctx);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -120,23 +120,23 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].s);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`section\`] = v_block2[i1];
       ctx[\`section_index\`] = i1;
-      let key1 = ctx['section_index'];
+      const key1 = ctx['section_index'];
       ctx = Object.create(ctx);
-      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);
+      const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['section'].blips);;
       for (let i2 = 0; i2 < l_block3; i2++) {
         ctx[\`blip\`] = v_block3[i2];
         ctx[\`blip_index\`] = i2;
-        let key2 = ctx['blip_index'];
+        const key2 = ctx['blip_index'];
         c_block3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, ctx), key2);
       }
       ctx = ctx.__proto__;
       c_block2[i1] = withKey(list(c_block3), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -168,23 +168,23 @@ exports[`list of components reconciliation alg works for t-foreach in t-foreach,
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].rows);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`row\`] = v_block2[i1];
-      let key1 = ctx['row'];
+      const key1 = ctx['row'];
       ctx = Object.create(ctx);
-      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);
+      const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state'].cols);;
       for (let i2 = 0; i2 < l_block4; i2++) {
         ctx[\`col\`] = v_block4[i2];
-        let key2 = ctx['col'];
-        let b6 = component(\`Child\`, {row: ctx['row'], col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
+        const key2 = ctx['col'];
+        const b6 = component(\`Child\`, {row: ctx['row'], col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
         c_block4[i2] = withKey(block5([], [b6]), key2);
       }
       ctx = ctx.__proto__;
-      let b4 = list(c_block4);
+      const b4 = list(c_block4);
       c_block2[i1] = withKey(block3([], [b4]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -212,10 +212,10 @@ exports[`list of components simple list 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state'].elems);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`elem\`] = v_block1[i1];
-      let key1 = ctx['elem'].id;
+      const key1 = ctx['elem'].id;
       c_block1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     return list(c_block1);
@@ -247,13 +247,13 @@ exports[`list of components sub components rendered in a loop 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
-      let key1 = ctx['number'];
+      const key1 = ctx['number'];
       c_block2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -283,13 +283,13 @@ exports[`list of components sub components with some state rendered in a loop 1`
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].numbers);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`number\`] = v_block2[i1];
-      let key1 = ctx['number'];
+      const key1 = ctx['number'];
       c_block2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -319,13 +319,13 @@ exports[`list of components switch component position 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['clist']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['clist']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`c\`] = v_block2[i1];
-      let key1 = ctx['c'];
+      const key1 = ctx['c'];
       c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -355,14 +355,14 @@ exports[`list of components t-foreach with t-component, and update 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(Array(2));;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`n\`] = v_block2[i1];
       ctx[\`n_index\`] = i1;
-      let key1 = ctx['n_index'];
+      const key1 = ctx['n_index'];
       c_block2[i1] = withKey(component(\`Child\`, {val: ctx['n_index']}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"

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

@@ -10,14 +10,14 @@ exports[`t-key t-foreach with t-key switch component position 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['clist']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['clist']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`c\`] = v_block2[i1];
-      let key1 = ctx['c'];
+      const key1 = ctx['c'];
       const tKey_1 = ctx['key1'];
       c_block2[i1] = withKey(component(\`Child\`, {key: ctx['c']+ctx['key1']}, tKey_1 + key + \`__1__\${key1}\`, node, ctx), tKey_1 + key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -72,7 +72,7 @@ exports[`t-key t-key on Component as a function 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key']}, tKey_1 + key + \`__1\`, node, ctx));
     return block1([], [b2]);
   }
 }"
@@ -101,9 +101,9 @@ exports[`t-key t-key on multiple Components 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
     const tKey_2 = ctx['key2'];
-    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
     return block1([], [b2, b3]);
   }
 }"
@@ -139,12 +139,12 @@ exports[`t-key t-key on multiple Components with t-call 1 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"key\\", ctx['key1']);
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     ctx = ctx.__proto__;
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1;
     setContextValue(ctx, \\"key\\", ctx['key2']);
-    let b3 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
+    const b3 = callTemplate_2.call(this, ctx, node, key + \`__2\`);
     return block1([], [b2, b3]);
   }
 }"
@@ -186,7 +186,7 @@ exports[`t-key t-key on multiple Components with t-call 2 1`] = `
   let block1 = createBlock(\`<span><block-child-0/></span>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
+    const b2 = callTemplate_1.call(this, ctx, node, key + \`__1\`);
     return block1([], [b2]);
   }
 }"
@@ -199,9 +199,9 @@ exports[`t-key t-key on multiple Components with t-call 2 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     const tKey_1 = ctx['key1'];
-    let b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
+    const b2 = toggler(tKey_1, component(\`Child\`, {key: ctx['key1']}, tKey_1 + key + \`__1\`, node, ctx));
     const tKey_2 = ctx['key2'];
-    let b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
+    const b3 = toggler(tKey_2, component(\`Child\`, {key: ctx['key2']}, tKey_2 + key + \`__2\`, node, ctx));
     return multi([b2, b3]);
   }
 }"

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

@@ -194,17 +194,17 @@ exports[`t-model directive in a t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`thing\`] = v_block2[i1];
-      let key1 = ctx['thing'].id;
+      const key1 = ctx['thing'].id;
       const bExpr1 = ctx['thing'];
       const expr1 = 'f';
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.checked; }];
       c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -221,18 +221,18 @@ exports[`t-model directive in a t-foreach, part 2 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`thing\`] = v_block2[i1];
       ctx[\`thing_index\`] = i1;
-      let key1 = ctx['thing_index'];
+      const key1 = ctx['thing_index'];
       const bExpr1 = ctx['state'];
       const expr1 = ctx['thing_index'];
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
       c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -249,18 +249,18 @@ exports[`t-model directive in a t-foreach, part 3 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['names']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`name\`] = v_block2[i1];
       ctx[\`name_index\`] = i1;
-      let key1 = ctx['name_index'];
+      const key1 = ctx['name_index'];
       const bExpr1 = ctx['state'].values;
       const expr1 = ctx['name'];
       let attr1 = bExpr1[expr1];
       let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
       c_block2[i1] = withKey(block3([attr1, hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -460,7 +460,7 @@ exports[`t-model directive t-model with dynamic values on select options -- 2 1`
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
-    let bValue1 = bExpr1[expr1]
+    const bValue1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let attr1 = ctx['options'][0];
     let attr2 = bValue1 === ctx['options'][0];
@@ -484,7 +484,7 @@ exports[`t-model directive t-model with dynamic values on select options -- 3 1`
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
-    let bValue1 = bExpr1[expr1]
+    const bValue1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let attr1 = ctx['options'][0];
     let attr2 = bValue1 === ctx['options'][0];
@@ -507,7 +507,7 @@ exports[`t-model directive t-model with dynamic values on select options 1`] = `
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
-    let bValue1 = bExpr1[expr1]
+    const bValue1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     let attr1 = ctx['options'][0];
     let attr2 = bValue1 === ctx['options'][0];
@@ -532,19 +532,19 @@ exports[`t-model directive t-model with dynamic values on select options in fore
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
     const expr1 = 'model';
-    let bValue1 = bExpr1[expr1]
+    const bValue1 = bExpr1[expr1];
     let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value; }];
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['options']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`v\`] = v_block2[i1];
-      let key1 = ctx['v'];
+      const key1 = ctx['v'];
       let attr1 = ctx['v'];
       let attr2 = bValue1 === ctx['v'];
       let txt1 = ctx['v'];
       c_block2[i1] = withKey(block3([attr1, attr2, txt1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([hdlr1], [b2]);
   }
 }"

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

@@ -14,17 +14,17 @@ exports[`t-on t-on expression captured in t-foreach 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 0);
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['arr']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       const v1 = ctx['otherState'];
       const v2 = ctx['iter'];
       let hdlr1 = [()=>v1.vals.push(v2+'_'+v2), ctx];
       setContextValue(ctx, \\"iter\\", ctx['iter']+1);
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -41,11 +41,11 @@ exports[`t-on t-on expression in t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
       ctx[\`val_index\`] = i1;
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
       const v1 = ctx['otherState'];
@@ -53,7 +53,7 @@ exports[`t-on t-on expression in t-foreach 1`] = `
       let hdlr1 = [()=>v1.vals.push(v2), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -73,11 +73,11 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"bossa\\", 'nova');
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
       ctx[\`val_index\`] = i1;
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       setContextValue(ctx, \\"bossa\\", ctx['bossa']+'_'+ctx['val_index']);
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
@@ -87,7 +87,7 @@ exports[`t-on t-on expression in t-foreach with t-set 1`] = `
       let hdlr1 = [()=>v1.vals.push(v2+'_'+v3), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -104,23 +104,82 @@ exports[`t-on t-on method call in t-foreach 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['state'].values);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`val\`] = v_block2[i1];
       ctx[\`val_index\`] = i1;
-      let key1 = ctx['val'];
+      const key1 = ctx['val'];
       let txt1 = ctx['val_index'];
       let txt2 = ctx['val']+'';
       const v1 = ctx['val'];
       let hdlr1 = [()=>this.addVal(v1), ctx];
       c_block2[i1] = withKey(block3([txt1, txt2, hdlr1]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
 `;
 
+exports[`t-on t-on on components 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { createCatcher } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  return function template(ctx, node, key = \\"\\") {
+    const hdlr1 = [ctx['increment'], ctx];
+    return catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+  }
+}"
+`;
+
+exports[`t-on t-on on components 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button><block-text-0/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['props'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
+exports[`t-on t-on on components, variation 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { createCatcher } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  let block1 = createBlock(\`<div><span/><block-child-0/><p/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const hdlr1 = [ctx['increment'], ctx];
+    const b2 = catcher1(component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx), [hdlr1]);
+    return block1([], [b2]);
+  }
+}"
+`;
+
+exports[`t-on t-on on components, variation 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  let block1 = createBlock(\`<button><block-text-0/></button>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['props'].value;
+    return block1([txt1]);
+  }
+}"
+`;
+
 exports[`t-on t-on on destroyed components 1`] = `
 "function anonymous(bdom, helpers
 ) {
@@ -151,3 +210,79 @@ exports[`t-on t-on on destroyed components 2`] = `
   }
 }"
 `;
+
+exports[`t-on t-on on t-set-slots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { capture, createCatcher, markRaw } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  let block6 = createBlock(\`<p>something</p>\`);
+  let block7 = createBlock(\`<p>paragraph</p>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    const b6 = block6();
+    const b7 = block7();
+    const hdlr1 = [()=>this.state.count++, ctx];
+    return catcher1(multi([b6, b7]), [hdlr1]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['state'].count);
+    const b4 = text(\`] \`);
+    const ctx1 = capture(ctx);
+    const b8 = component(\`Child\`, {slots: markRaw({'myslot': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    return multi([b2, b3, b4, b8]);
+  }
+}"
+`;
+
+exports[`t-on t-on on t-set-slots 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callSlot(ctx, node, key, 'myslot', false, null);
+  }
+}"
+`;
+
+exports[`t-on t-on on t-slots 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { markRaw } = helpers;
+  
+  let block1 = createBlock(\`<p>something</p>\`);
+  
+  function slot1(ctx, node, key = \\"\\") {
+    return block1();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    return component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
+exports[`t-on t-on on t-slots 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { callSlot, createCatcher } = helpers;
+  const catcher1 = createCatcher({\\"click\\":0});
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(\` [\`);
+    const b3 = text(ctx['state'].count);
+    const b4 = text(\`] \`);
+    const hdlr1 = [()=>this.state.count++, ctx];
+    const b5 = catcher1(callSlot(ctx, node, key, 'default', false, null), [hdlr1]);
+    return multi([b2, b3, b4, b5]);
+  }
+}"
+`;

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

@@ -8,7 +8,7 @@ exports[`t-props basic use 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, Object.assign({}, ctx['some'].obj), key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, Object.assign({}, ctx['some'].obj), key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -60,7 +60,7 @@ exports[`t-props t-props and other props 1`] = `
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, ctx);
+    const b2 = component(\`Comp\`, Object.assign({}, ctx['state1'], {a: ctx['a']}), key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -89,7 +89,7 @@ exports[`t-props t-props only 1`] = `
   let block1 = createBlock(\`<div><div><block-child-0/></div></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Comp\`, Object.assign({}, ctx['state']), key + \`__1\`, node, ctx);
+    const b2 = component(\`Comp\`, Object.assign({}, ctx['state']), key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"
@@ -117,7 +117,7 @@ exports[`t-props t-props with props 1`] = `
   let block1 = createBlock(\`<div><block-child-0/></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = component(\`Child\`, Object.assign({}, ctx['childProps'], {a: 1, b: 2}), key + \`__1\`, node, ctx);
+    const b2 = component(\`Child\`, Object.assign({}, ctx['childProps'], {a: 1, b: 2}), key + \`__1\`, node, ctx);
     return block1([], [b2]);
   }
 }"

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

@@ -21,7 +21,7 @@ exports[`t-set slot setted value (with t-set) not accessible with t-esc 1`] = `
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
     const ctx1 = capture(ctx);
-    let b2 = component(\`Childcomp\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Childcomp\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx1}})}, key + \`__1\`, node, ctx);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -57,8 +57,8 @@ exports[`t-set slots with a t-set with a component in body 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    let b3 = text(\` in slot \`);
-    let b4 = safeOutput(ctx['v']);
+    const b3 = text(\` in slot \`);
+    const b4 = safeOutput(ctx['v']);
     return multi([b3, b4]);
   }
   
@@ -80,8 +80,8 @@ exports[`t-set slots with a t-set with a component in body 2`] = `
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`Child \`);
-    let b3 = callSlot(ctx, node, key, 'default', false, {});
+    const b2 = text(\`Child \`);
+    const b3 = callSlot(ctx, node, key, 'default', false, null);
     return multi([b2, b3]);
   }
 }"
@@ -110,14 +110,14 @@ exports[`t-set slots with an t-set with a component in body 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    let b5 = text(\` tea \`);
-    let b6 = safeOutput(ctx['v']);
+    const b5 = text(\` tea \`);
+    const b6 = safeOutput(ctx['v']);
     return multi([b5, b6]);
   }
   
   function value1(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
-    let b4 = block4();
+    const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    const b4 = block4();
     return multi([b3, b4]);
   }
   
@@ -135,8 +135,8 @@ exports[`t-set slots with an t-set with a component in body 2`] = `
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`Blorg \`);
-    let b3 = callSlot(ctx, node, key, 'default', false, {});
+    const b2 = text(\`Blorg \`);
+    const b3 = callSlot(ctx, node, key, 'default', false, null);
     return multi([b2, b3]);
   }
 }"
@@ -184,8 +184,8 @@ exports[`t-set slots with an unused t-set with a component in body 2`] = `
   let { callSlot } = helpers;
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = text(\`Child \`);
-    let b3 = callSlot(ctx, node, key, 'default', false, {});
+    const b2 = text(\`Child \`);
+    const b3 = callSlot(ctx, node, key, 'default', false, null);
     return multi([b2, b3]);
   }
 }"
@@ -267,7 +267,7 @@ exports[`t-set t-set not altered by child comp 1`] = `
     ctx[isBoundary] = 1
     setContextValue(ctx, \\"iter\\", 'source');
     let txt1 = ctx['iter'];
-    let b2 = component(\`Childcomp\`, {}, key + \`__1\`, node, ctx);
+    const b2 = component(\`Childcomp\`, {}, key + \`__1\`, node, ctx);
     let txt2 = ctx['iter'];
     return block1([txt1, txt2], [b2]);
   }
@@ -335,7 +335,7 @@ exports[`t-set t-set with a component in body 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    let b3 = safeOutput(ctx['v']);
+    const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }
 }"
@@ -369,7 +369,7 @@ exports[`t-set t-set with something in body 1`] = `
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
     ctx[\`v\`] = new LazyValue(value1, ctx, node);
-    let b3 = safeOutput(ctx['v']);
+    const b3 = safeOutput(ctx['v']);
     return block1([], [b3]);
   }
 }"

tests/components/error_handling.test.ts

@@ -1,10 +1,12 @@
-import { Component, mount } from "../../src";
+import { Component, mount, onWillDestroy } from "../../src";
 import {
   onError,
   onMounted,
   onPatched,
   onWillPatch,
   onWillStart,
+  onWillRender,
+  onRendered,
   onWillUnmount,
   useState,
   xml,
@@ -199,6 +201,50 @@ describe("errors and promises", () => {
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
+  test("errors in onWillRender/onRender aren't wrapped more than once", async () => {
+    class App extends Component {
+      static template = xml`<div>abc</div>`;
+      setup() {
+        onWillRender(() => {
+          throw new Error("boom in onWillRender");
+        });
+        onRendered(() => {
+          throw new Error("boom in onRendered");
+        });
+      }
+    }
+
+    let error: Error;
+    try {
+      await mount(App, fixture, { test: true });
+    } catch (e) {
+      error = e as Error;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe(
+      `The following error occurred in onWillRender: "boom in onWillRender"`
+    );
+  });
+
+  test("error while rendering component isn't wrapped by onWillRender/onRendered", async () => {
+    class App extends Component {
+      static template = xml`<div t-att-class="{ 'invalid: 5 }">abc</div>`;
+      setup() {
+        onWillRender(() => {});
+        onRendered(() => {});
+      }
+    }
+
+    let error: Error;
+    try {
+      await mount(App, fixture, { test: true });
+    } catch (e) {
+      error = e as Error;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe("Tokenizer error: could not tokenize `{ 'invalid: 5 }`");
+  });
+
   test("an error in willPatch call will reject the render promise", async () => {
     class Root extends Component {
       static template = xml`<div><t t-esc="val"/></div>`;
@@ -1151,4 +1197,126 @@ describe("can catch errors", () => {
     expect(fixture.innerHTML).toBe("<div>Child 2</div>");
     expect(steps).toEqual(["Error Component"]);
   });
+
+  test("an error in onWillDestroy", async () => {
+    class Child extends Component {
+      static template = xml`<div>abc</div>`;
+      setup() {
+        useLogLifecycle();
+        onWillDestroy(() => {
+          throw new Error("boom");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <t t-esc="state.value"/>
+        <t t-if="state.hasChild"><Child/></t>`;
+      static components = { Child };
+
+      state = useState({ value: 1, hasChild: true });
+      setup() {
+        useLogLifecycle();
+        onError(() => {
+          this.state.value++;
+        });
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("1<div>abc</div>");
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
+    parent.state.hasChild = false;
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
+    expect(fixture.innerHTML).toBe("2");
+  });
+
+  test("an error in onWillDestroy, variation", async () => {
+    class Child extends Component {
+      static template = xml`<div>abc</div>`;
+      setup() {
+        useLogLifecycle();
+        onWillDestroy(() => {
+          throw new Error("boom");
+        });
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <t t-esc="state.value"/>
+        <t t-if="state.hasChild"><Child/></t>`;
+      static components = { Child };
+
+      state = useState({ value: 1, hasChild: false });
+      setup() {
+        useLogLifecycle();
+        onError(() => {
+          this.state.value++;
+        });
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("1");
+
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:mounted",
+    ]).toBeLogged();
+
+    parent.state.hasChild = true;
+    await nextMicroTick();
+    await nextMicroTick();
+    await nextMicroTick();
+    await nextMicroTick();
+    await nextMicroTick();
+    expect([
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+    ]).toBeLogged();
+    parent.state.hasChild = false;
+    await nextTick();
+    expect([
+      "Child:willDestroy",
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Parent:patched",
+    ]).toBeLogged();
+    expect(fixture.innerHTML).toBe("2");
+  });
 });

tests/components/hooks.test.ts

@@ -632,5 +632,35 @@ describe("hooks", () => {
         "cleaning up for 1",
       ]);
     });
+
+    test("properly behaves when the effect function throws", async () => {
+      let originalconsoleError = console.error;
+      let originalconsoleWarn = console.warn;
+      console.error = jest.fn(() => {});
+      console.warn = jest.fn(() => {});
+      class MyComponent extends Component {
+        static template = xml`<div/>`;
+        setup() {
+          useEffect(
+            () => {
+              throw new Error("Intentional error");
+            },
+            () => []
+          );
+        }
+      }
+
+      try {
+        await mount(MyComponent, fixture);
+      } catch (e: any) {
+        expect(e.message).toBe("Intentional error");
+      }
+      // no console.error because the error has been caught in this test
+      expect(console.error).toHaveBeenCalledTimes(0);
+      console.error = originalconsoleError;
+      // 1 console.warn because app is destroyed
+      expect(console.warn).toHaveBeenCalledTimes(1);
+      console.warn = originalconsoleWarn;
+    });
   });
 });

tests/components/lifecycle.test.ts

@@ -14,6 +14,7 @@ import {
   logStep,
   makeDeferred,
   makeTestFixture,
+  nextMicroTick,
   nextTick,
   snapshotEverything,
   useLogLifecycle,
@@ -104,6 +105,83 @@ describe("lifecycle hooks", () => {
     await mount(Test, fixture);
   });
 
+  test("timeout in onWillStart emits a warning", async () => {
+    const { warn } = console;
+    let warnArgs: any[];
+    console.warn = jest.fn((...args) => (warnArgs = args));
+    const { setTimeout } = window;
+    let timeoutCbs: any = {};
+    let timeoutId = 0;
+    window.setTimeout = ((cb: any) => {
+      timeoutCbs[++timeoutId] = cb;
+      return timeoutId;
+    }) as any;
+    class Test extends Component {
+      static template = xml`<span/>`;
+      setup() {
+        onWillStart(() => new Promise(() => {}));
+      }
+    }
+    mount(Test, fixture, { test: true });
+    nextTick();
+    for (const id in timeoutCbs) {
+      timeoutCbs[id]();
+      delete timeoutCbs[id];
+    }
+    await nextMicroTick();
+    await nextMicroTick();
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(warnArgs![0]!.message).toBe("onWillStart's promise hasn't resolved after 3 seconds");
+    console.warn = warn;
+    window.setTimeout = setTimeout;
+  });
+
+  test("timeout in onWillUpdateProps emits a warning", async () => {
+    class Child extends Component {
+      static template = xml``;
+      setup() {
+        onWillUpdateProps(() => new Promise(() => {}));
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<Child prop="state.prop"/>`;
+      static components = { Child };
+      state = useState({ prop: 1 });
+    }
+    const parent = await mount(Parent, fixture, { test: true });
+
+    const { warn } = console;
+    let warnArgs: any[];
+    console.warn = jest.fn((...args) => (warnArgs = args));
+    const { setTimeout } = window;
+    let timeoutCbs: any = {};
+    let timeoutId = 0;
+    window.setTimeout = ((cb: any) => {
+      timeoutCbs[++timeoutId] = cb;
+      return timeoutId;
+    }) as any;
+
+    parent.state.prop = 2;
+    let tick = nextTick();
+    for (const id in timeoutCbs) {
+      timeoutCbs[id]();
+      delete timeoutCbs[id];
+    }
+    await tick;
+    tick = nextTick();
+    for (const id in timeoutCbs) {
+      timeoutCbs[id]();
+      delete timeoutCbs[id];
+    }
+    await tick;
+    expect(console.warn).toHaveBeenCalledTimes(1);
+    expect(warnArgs![0]!.message).toBe(
+      "onWillUpdateProps's promise hasn't resolved after 3 seconds"
+    );
+    console.warn = warn;
+    window.setTimeout = setTimeout;
+  });
+
   test("mounted hook is called if mounted in DOM", async () => {
     let mounted = false;
     class Test extends Component {

tests/components/reactivity.test.ts

@@ -8,7 +8,7 @@ import {
   useState,
   xml,
 } from "../../src";
-import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
 
 let fixture: HTMLElement;
 
@@ -155,4 +155,48 @@ describe("reactivity in lifecycle", () => {
     expect(steps).toEqual([2]);
     expect(fixture.innerHTML).toBe("<div>2</div>");
   });
+
+  test("Child component doesn't render when state they depend on changes but their parent is about to unmount them", async () => {
+    class Child extends Component {
+      static template = xml`<t t-esc="props.state.content.a"/>`;
+      setup() {
+        useLogLifecycle();
+      }
+    }
+    class Parent extends Component {
+      static template = xml`<Child t-if="state.renderChild" state="state"/>`;
+      static components = { Child };
+      state: any = useState({ renderChild: true, content: { a: 2 } });
+      setup() {
+        useLogLifecycle();
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("2");
+    expect([
+      "Parent:setup",
+      "Parent:willStart",
+      "Parent:willRender",
+      "Child:setup",
+      "Child:willStart",
+      "Parent:rendered",
+      "Child:willRender",
+      "Child:rendered",
+      "Child:mounted",
+      "Parent:mounted",
+    ]).toBeLogged();
+
+    parent.state.content = null;
+    parent.state.renderChild = false;
+    await nextTick();
+    expect([
+      "Parent:willRender",
+      "Parent:rendered",
+      "Parent:willPatch",
+      "Child:willUnmount",
+      "Child:willDestroy",
+      "Parent:patched",
+    ]).toBeLogged();
+  });
 });

tests/components/rendering.test.ts

@@ -102,6 +102,43 @@ describe("rendering semantics", () => {
     expect(childN).toBe(2);
   });
 
+  test("render need a boolean = true to be 'deep'", async () => {
+    let childN = 0;
+    let parentN = 0;
+    class Child extends Component {
+      static template = xml`child`;
+      setup() {
+        onRendered(() => childN++);
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <t t-esc="state.value"/>
+        <Child/>
+      `;
+      static components = { Child };
+
+      state = { value: "A" };
+      setup() {
+        onRendered(() => parentN++);
+      }
+    }
+
+    const parent = await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("Achild");
+    expect(parentN).toBe(1);
+    expect(childN).toBe(1);
+
+    parent.state.value = "B";
+    parent.render("true" as any as boolean);
+    await nextTick();
+    expect(fixture.innerHTML).toBe("Bchild");
+    expect(parentN).toBe(2);
+    expect(childN).toBe(1);
+  });
+
   test("render with deep=true followed by render with deep=false work as expected", async () => {
     class Child extends Component {
       static template = xml`child<t t-esc="env.getValue()"/>`;

tests/components/slots.test.ts

@@ -74,6 +74,72 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("<span>other text</span>");
   });
 
+  test("simple dynamic slot with slot scope", async () => {
+    let child: any;
+    class Child extends Component {
+      static template = xml`<span><t t-slot="{{ 'slotName' }}" bool="state.bool"/></span>`;
+      state = useState({ bool: true });
+      setup() {
+        child = this;
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <t t-set-slot="slotName" t-slot-scope="slotScope">
+            <t t-if="slotScope.bool">some text</t>
+            <t t-else="slotScope.bool">other text</t>
+          </t>
+        </Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<span>some text</span>");
+
+    child.state.bool = false;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<span>other text</span>");
+  });
+
+  test("simple named and empty slot", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-slot="default" /><t t-slot="myEmptySlot"/></span>`;
+
+      setup() {
+        expect(this.props.slots["myEmptySlot"]).toBeTruthy();
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child>some text<t t-set-slot="myEmptySlot" /></Child>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<span>some text</span>");
+  });
+
+  test("simple named and empty slot -- 2", async () => {
+    class Child extends Component {
+      static template = xml`<span><t t-slot="myEmptySlot">default empty</t></span>`;
+
+      setup() {
+        expect(this.props.slots["myEmptySlot"]).toBeTruthy();
+        expect(this.props.slots["myEmptySlot"].myProp).toBe("myProp text");
+      }
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child><t t-set-slot="myEmptySlot" myProp="'myProp text'" /></Child>`;
+      static components = { Child };
+    }
+    await mount(Parent, fixture);
+
+    expect(fixture.innerHTML).toBe("<span>default empty</span>");
+  });
+
   test("default slot with slot scope: shorthand syntax", async () => {
     let child: any;
     class Child extends Component {

tests/components/t_on.test.ts

@@ -142,4 +142,107 @@ describe("t-on", () => {
     buttons[1].click();
     expect(comp.otherState.vals).toStrictEqual(["0_0", "1_1"]);
   });
+
+  test("t-on on components", async () => {
+    class Child extends Component {
+      static template = xml`<button t-esc="props.value"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`<Child t-on-click="increment" value="state.value"/>`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      increment() {
+        this.state.value++;
+      }
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<button>1</button>");
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<button>2</button>");
+  });
+
+  test("t-on on components, variation", async () => {
+    class Child extends Component {
+      static template = xml`<button t-esc="props.value"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <div>
+          <span/>
+          <Child t-on-click="increment" value="state.value"/>
+          <p/>
+        </div>`;
+      static components = { Child };
+      state = useState({ value: 1 });
+      increment() {
+        this.state.value++;
+      }
+    }
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe("<div><span></span><button>1</button><p></p></div>");
+
+    fixture.querySelector("span")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span></span><button>1</button><p></p></div>");
+
+    fixture.querySelector("button")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span></span><button>2</button><p></p></div>");
+
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span></span><button>2</button><p></p></div>");
+  });
+
+  test("t-on on t-slots", async () => {
+    class Child extends Component {
+      static template = xml`
+        [<t t-esc="state.count"/>]
+        <t t-slot="default" t-on-click="() => this.state.count++"/>`;
+
+      state = useState({ count: 0 });
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        <Child>
+          <p>something</p>
+        </Child>`;
+      static components = { Child };
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(" [0] <p>something</p>");
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe(" [1] <p>something</p>");
+  });
+
+  test("t-on on t-set-slots", async () => {
+    class Child extends Component {
+      static template = xml`<t t-slot="myslot"/>`;
+    }
+
+    class Parent extends Component {
+      static template = xml`
+        [<t t-esc="state.count"/>]
+        <Child>
+          <t t-set-slot="myslot" t-on-click="() => this.state.count++">
+            <p>something</p>
+            <p>paragraph</p>
+          </t>
+        </Child>`;
+      static components = { Child };
+      state = useState({ count: 0 });
+    }
+
+    await mount(Parent, fixture);
+    expect(fixture.innerHTML).toBe(" [0] <p>something</p><p>paragraph</p>");
+    fixture.querySelector("p")!.click();
+    await nextTick();
+    expect(fixture.innerHTML).toBe(" [1] <p>something</p><p>paragraph</p>");
+  });
 });

tests/helpers.ts

@@ -49,7 +49,7 @@ export async function nextTick(): Promise<void> {
 
 interface Deferred extends Promise<any> {
   resolve(val?: any): void;
-  reject(): void;
+  reject(val?: any): void;
 }
 
 export function makeDeferred(): Deferred {
@@ -138,7 +138,7 @@ const steps: string[] = [];
 export function logStep(step: string) {
   steps.push(step);
 }
-export function useLogLifecycle(key?: string) {
+export function useLogLifecycle(key?: string, skipAsyncHooks: boolean = false) {
   const component = useComponent();
   let name = component.constructor.name;
   if (key) {
@@ -147,20 +147,24 @@ export function useLogLifecycle(key?: string) {
   logStep(`${name}:setup`);
   expect(name + ": " + status(component)).toBe(name + ": " + "new");
 
+  if (!skipAsyncHooks) {
     onWillStart(() => {
       expect(name + ": " + status(component)).toBe(name + ": " + "new");
       logStep(`${name}:willStart`);
     });
+  }
 
   onMounted(() => {
     expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
     logStep(`${name}:mounted`);
   });
 
+  if (!skipAsyncHooks) {
     onWillUpdateProps(() => {
       expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
       logStep(`${name}:willUpdateProps`);
     });
+  }
 
   onWillRender(() => {
     logStep(`${name}:willRender`);

tests/misc/__snapshots__/portal.test.ts.snap

@@ -7,18 +7,18 @@ exports[`Portal Add and remove portals 1`] = `
   let { prepareList, Portal, capture, withKey } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
-    let b3 = text(\` Portal\`);
-    let b4 = text(ctx['portalId']);
+    const b3 = text(\` Portal\`);
+    const b4 = text(ctx['portalId']);
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`portalId\`] = v_block1[i1];
-      let key1 = ctx['portalId'];
-      const ctx1 = capture(ctx);
+      const key1 = ctx['portalId'];
+      const ctx1 = capture(ctx);;
       c_block1[i1] = withKey(component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     return list(c_block1);
@@ -41,11 +41,11 @@ exports[`Portal Add and remove portals on div 1`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`portalId\`] = v_block1[i1];
-      let key1 = ctx['portalId'];
-      const ctx1 = capture(ctx);
+      const key1 = ctx['portalId'];
+      const ctx1 = capture(ctx);;
       c_block1[i1] = withKey(component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
     return list(c_block1);
@@ -62,20 +62,20 @@ exports[`Portal Add and remove portals with t-foreach 1`] = `
   let block2 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b4 = text(\` Portal\`);
-    let b5 = text(ctx['portalId']);
+    const b4 = text(\` Portal\`);
+    const b5 = text(ctx['portalId']);
     return multi([b4, b5]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`portalId\`] = v_block1[i1];
-      let key1 = ctx['portalId'];
+      const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
-      const ctx1 = capture(ctx);
-      let b6 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
+      const ctx1 = capture(ctx);;
+      const b6 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
       c_block1[i1] = withKey(block2([txt1], [b6]), key1);
     }
     return list(c_block1);
@@ -92,20 +92,20 @@ exports[`Portal Add and remove portals with t-foreach and destroy 1`] = `
   let block2 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b4 = text(\` Portal\`);
-    let b5 = text(ctx['portalId']);
+    const b4 = text(\` Portal\`);
+    const b5 = text(ctx['portalId']);
     return multi([b4, b5]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['portalIds']);;
     for (let i1 = 0; i1 < l_block1; i1++) {
       ctx[\`portalId\`] = v_block1[i1];
-      let key1 = ctx['portalId'];
+      const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
-      const ctx1 = capture(ctx);
-      let b6 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
+      const ctx1 = capture(ctx);;
+      const b6 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
       c_block1[i1] = withKey(block2([txt1], [b6]), key1);
     }
     return list(c_block1);
@@ -123,23 +123,23 @@ exports[`Portal Add and remove portals with t-foreach inside div 1`] = `
   let block3 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b5 = text(\` Portal\`);
-    let b6 = text(ctx['portalId']);
+    const b5 = text(\` Portal\`);
+    const b6 = text(ctx['portalId']);
     return multi([b5, b6]);
   }
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['portalIds']);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['portalIds']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`portalId\`] = v_block2[i1];
-      let key1 = ctx['portalId'];
+      const key1 = ctx['portalId'];
       let txt1 = ctx['portalId'];
-      const ctx1 = capture(ctx);
-      let b7 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
+      const ctx1 = capture(ctx);;
+      const b7 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx);
       c_block2[i1] = withKey(block3([txt1], [b7]), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -158,7 +158,7 @@ exports[`Portal Portal composed with t-slot 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
+    const b3 = component(\`Child\`, {slots: markRaw({'default': {__render: slot1, __ctx: ctx}})}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -171,7 +171,7 @@ exports[`Portal Portal composed with t-slot 2`] = `
   let { Portal, callSlot } = helpers;
   
   function slot1(ctx, node, key = \\"\\") {
-    return callSlot(ctx, node, key, 'default', false, {});
+    return callSlot(ctx, node, key, 'default', false, null);
   }
   
   return function template(ctx, node, key = \\"\\") {
@@ -208,7 +208,7 @@ exports[`Portal basic use of portal 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -228,7 +228,7 @@ exports[`Portal basic use of portal in dev mode 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -248,7 +248,7 @@ exports[`Portal basic use of portal on div 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -345,14 +345,14 @@ exports[`Portal conditional use of Portal with child and div 2`] = `
   
   return function template(ctx, node, key = \\"\\") {
     ctx = Object.create(ctx);
-    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);
+    const [k_block2, v_block2, l_block2, c_block2] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
       ctx[\`elem\`] = v_block2[i1];
-      let key1 = ctx['elem'];
-      const ctx1 = capture(ctx);
+      const key1 = ctx['elem'];
+      const ctx1 = capture(ctx);;
       c_block2[i1] = withKey(component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
-    let b2 = list(c_block2);
+    const b2 = list(c_block2);
     return block1([], [b2]);
   }
 }"
@@ -368,7 +368,7 @@ exports[`Portal conditional use of Portal with child and div, variation 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasPortal) {
-      let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+      const b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
       b2 = block2([], [b3]);
     }
     return multi([b2]);
@@ -390,16 +390,16 @@ exports[`Portal conditional use of Portal with child and div, variation 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b2 = block2();
+    const b2 = block2();
     ctx = Object.create(ctx);
-    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);
+    const [k_block3, v_block3, l_block3, c_block3] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block3; i1++) {
       ctx[\`elem\`] = v_block3[i1];
-      let key1 = ctx['elem'];
-      const ctx1 = capture(ctx);
+      const key1 = ctx['elem'];
+      const ctx1 = capture(ctx);;
       c_block3[i1] = withKey(component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx1}}}, key + \`__1__\${key1}\`, node, ctx), key1);
     }
-    let b3 = list(c_block3);
+    const b3 = list(c_block3);
     return multi([b2, b3]);
   }
 }"
@@ -421,7 +421,7 @@ exports[`Portal conditional use of Portal with div 1`] = `
   return function template(ctx, node, key = \\"\\") {
     let b2;
     if (ctx['state'].hasPortal) {
-      let b4 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+      const b4 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
       b2 = block2([], [b4]);
     }
     return multi([b2]);
@@ -484,7 +484,7 @@ exports[`Portal portal could have dynamically no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b4 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -503,7 +503,7 @@ exports[`Portal portal destroys on crash 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -536,7 +536,7 @@ exports[`Portal portal with child and props 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -578,7 +578,7 @@ exports[`Portal portal with dynamic body 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b5 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -595,13 +595,13 @@ exports[`Portal portal with many children 1`] = `
   let block4 = createBlock(\`<p>2</p>\`);
   
   function slot1(ctx, node, key = \\"\\") {
-    let b3 = block3();
-    let b4 = block4();
+    const b3 = block3();
+    const b4 = block4();
     return multi([b3, b4]);
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b5 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b5 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b5]);
   }
 }"
@@ -624,7 +624,7 @@ exports[`Portal portal with no content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b4 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b4 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b4]);
   }
 }"
@@ -643,7 +643,7 @@ exports[`Portal portal with only text as content 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -663,7 +663,7 @@ exports[`Portal portal with target not in dom 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#does-not-exist',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -682,7 +682,7 @@ exports[`Portal portal's parent's env is not polluted 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -735,7 +735,7 @@ exports[`Portal simple catchError with portal 2`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -755,7 +755,7 @@ exports[`Portal with target in template (after portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -775,7 +775,7 @@ exports[`Portal with target in template (before portal) 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: '#local-target',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -795,7 +795,7 @@ exports[`Portal: Props validation target must be a valid selector 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: ' ',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: ' ',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -815,7 +815,7 @@ exports[`Portal: Props validation target must be a valid selector 2 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: 'aa',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
+    const b3 = component(Portal, {target: 'aa',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__1\`, node, ctx);
     return block1([], [b3]);
   }
 }"
@@ -834,7 +834,7 @@ exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
   }
   
   return function template(ctx, node, key = \\"\\") {
-    let b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
+    const b3 = component(Portal, {target: '#outside',slots: {'default': {__render: slot1, __ctx: ctx}}}, key + \`__2\`, node, ctx);
     return block1([], [b3]);
   }
 }"

tests/reactivity.test.ts

@@ -208,6 +208,46 @@ describe("Reactivity", () => {
     expect(n).toBe(1); // two operations but only one notification
   });
 
+  test("batched: modifying the reactive in the callback doesn't break reactivity", async () => {
+    let n = 0;
+    let obj = { a: 1 };
+    const state = createReactive(
+      obj,
+      batched(() => {
+        state.a; // subscribe to a
+        state.a = 2;
+        n++;
+      })
+    );
+    expect(n).toBe(0);
+    state.a = 2;
+    expect(n).toBe(0);
+    await nextMicroTick();
+    expect(n).toBe(0); // key has not be read yet
+    state.a = state.a + 5; // key is read and then modified
+    expect(n).toBe(0);
+    await nextMicroTick();
+    expect(n).toBe(1);
+    // the write a = 2 inside the batched callback triggered another notification, wait for it
+    await nextMicroTick();
+    expect(n).toBe(2);
+    // Should now be stable as we're writing the same value again
+    await nextMicroTick();
+    expect(n).toBe(2);
+
+    // Do it again to check it's not broken
+    state.a = state.a + 5; // key is read and then modified
+    expect(n).toBe(2);
+    await nextMicroTick();
+    expect(n).toBe(3);
+    // the write a = 2 inside the batched callback triggered another notification, wait for it
+    await nextMicroTick();
+    expect(n).toBe(4);
+    // Should now be stable as we're writing the same value again
+    await nextMicroTick();
+    expect(n).toBe(4);
+  });
+
   test("setting property to same value does not trigger callback", async () => {
     let n = 0;
     const state = createReactive({ a: 1 }, () => n++);
@@ -1095,6 +1135,13 @@ describe("Reactivity", () => {
     expect(n).toBe(1);
     expect(state.k).toEqual({ n: 2 });
   });
+
+  test("can access properties on reactive of frozen objects", async () => {
+    const obj = Object.freeze({ a: {} });
+    const state = createReactive(obj);
+    expect(() => state.a).not.toThrow();
+    expect(state.a).toBe(obj.a);
+  });
 });
 
 describe("Collections", () => {
@@ -1245,6 +1292,33 @@ describe("Collections", () => {
       reactiveObj.a = 1; // setting same value again shouldn't notify
       expect(observer).toHaveBeenCalledTimes(1);
     });
+
+    test("iterating with forEach returns reactives", async () => {
+      const keyObj = { a: 2 };
+      const thisArg = {};
+      const observer = jest.fn();
+      const state = reactive(new Set([keyObj]), observer);
+      let reactiveKeyObj: any, reactiveValObj: any, thisObj: any, mapObj: any;
+      state.forEach(function (this: any, val, key, map) {
+        [reactiveValObj, reactiveKeyObj, mapObj, thisObj] = [val, key, map, this];
+      }, thisArg);
+      expect(reactiveKeyObj).not.toBe(keyObj);
+      expect(reactiveValObj).not.toBe(keyObj);
+      expect(mapObj).toBe(state); // third argument should be the reactive
+      expect(thisObj).toBe(thisArg); // thisArg should not be made reactive
+      expect(toRaw(reactiveKeyObj as any)).toBe(keyObj);
+      expect(toRaw(reactiveValObj as any)).toBe(keyObj);
+      expect(reactiveKeyObj).toBe(reactiveValObj); // reactiveKeyObj and reactiveValObj should be the same object
+      reactiveKeyObj!.a = 0;
+      reactiveValObj!.a = 0;
+      expect(observer).toHaveBeenCalledTimes(0);
+      reactiveKeyObj!.a; // observe key "a" in key sub-reactive;
+      reactiveKeyObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(1);
+      reactiveKeyObj!.a = 1; // setting same value again shouldn't notify
+      reactiveValObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("WeakSet", () => {
@@ -1467,6 +1541,36 @@ describe("Collections", () => {
       reactiveValObj.a = 1;
       expect(observer).toHaveBeenCalledTimes(2);
     });
+
+    test("iterating with forEach returns reactives", async () => {
+      const keyObj = { a: 2 };
+      const valObj = { a: 2 };
+      const thisArg = {};
+      const observer = jest.fn();
+      const state = reactive(new Map([[keyObj, valObj]]), observer);
+      let reactiveKeyObj: any, reactiveValObj: any, thisObj: any, mapObj: any;
+      state.forEach(function (this: any, val, key, map) {
+        [reactiveValObj, reactiveKeyObj, mapObj, thisObj] = [val, key, map, this];
+      }, thisArg);
+      expect(reactiveKeyObj).not.toBe(keyObj);
+      expect(reactiveValObj).not.toBe(valObj);
+      expect(mapObj).toBe(state); // third argument should be the reactive
+      expect(thisObj).toBe(thisArg); // thisArg should not be made reactive
+      expect(toRaw(reactiveKeyObj as any)).toBe(keyObj);
+      expect(toRaw(reactiveValObj as any)).toBe(valObj);
+      reactiveKeyObj!.a = 0;
+      reactiveValObj!.a = 0;
+      expect(observer).toHaveBeenCalledTimes(0);
+      reactiveKeyObj!.a; // observe key "a" in key sub-reactive;
+      reactiveKeyObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(1);
+      reactiveValObj!.a; // observe key "a" in val sub-reactive;
+      reactiveValObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(2);
+      reactiveKeyObj!.a = 1; // setting same value again shouldn't notify
+      reactiveValObj!.a = 1;
+      expect(observer).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe("WeakMap", () => {

tests/utils.test.ts

@@ -50,4 +50,24 @@ describe("batched", () => {
     await nextMicroTick();
     expect(n).toBe(1);
   });
+
+  test("calling batched function from within the callback is not treated as part of the original batch", async () => {
+    let n = 0;
+    let fn = batched(() => {
+      n++;
+      if (n === 1) {
+        fn();
+      }
+    });
+
+    expect(n).toBe(0);
+    fn();
+    expect(n).toBe(0);
+    await nextMicroTick(); // First batch
+    expect(n).toBe(1);
+    await nextMicroTick(); // Second batch initiated from within the callback
+    expect(n).toBe(2);
+    await nextMicroTick();
+    expect(n).toBe(2);
+  });
 });

tools/playground/samples.js

@@ -24,8 +24,7 @@ class Root extends Component {
     }
 }
 
-// dev=false for benchmarking. we don't want to benchmark dev code!
-mount(Root, document.body, { templates: TEMPLATES, dev: false });`;
+mount(Root, document.body, { templates: TEMPLATES, dev: true });`;
 
 const COMPONENTS_XML = /*xml*/`
 <templates>
@@ -934,7 +933,7 @@ const env = {
   ui: createUI()
 };
 
-mount(Root, document.body, { templates: TEMPLATES, env });
+mount(Root, document.body, { templates: TEMPLATES, env, dev: true });
 `;
 
 const RESPONSIVE_XML = /*xml*/`
@@ -1741,7 +1740,8 @@ class Root extends Component {
 }
 
 
-mount(Root, document.body, { templates: TEMPLATES, dev: true });
+// dev=false for benchmarking. we don't want to benchmark dev code!
+mount(Root, document.body, { templates: TEMPLATES, dev: false });
 
 `;