cleanup variable scoping

Author: ged-odoo

src/compiler/code_generator.ts

@@ -578,7 +578,7 @@ export class CodeGenerator {
     if (modifiers.length) {
       modifiersCode = `${modifiers.join(",")}, `;
     }
-    return `[${modifiersCode}${this.captureExpression(handler)}, ctx]`;
+    return `[${modifiersCode}${compileExpr(handler)}, ctx]`;
   }
 
   compileTDomNode(ast: ASTDomNode, ctx: Context): string {
@@ -863,7 +863,10 @@ export class CodeGenerator {
     block = this.createBlock(block, "list", ctx);
     this.target.loopLevel++;
     const loopVar = `i${this.target.loopLevel}`;
-    this.addLine(`ctx = Object.create(ctx);`);
+    const ctxVar = generateId("ctx");
+    this.addLine(`const ${ctxVar} = ctx;`);
+    ctx.ctxVar = ctxVar
+    // this.addLine(`ctx = Object.create(ctx);`);
     const vals = `v_block${block.id}`;
     const keys = `k_block${block.id}`;
     const l = `l_block${block.id}`;
@@ -876,6 +879,7 @@ export class CodeGenerator {
     }
     this.addLine(`for (let ${loopVar} = 0; ${loopVar} < ${l}; ${loopVar}++) {`);
     this.target.indentLevel++;
+    this.addLine(`const ctx = Object.create(${ctxVar});`);
     this.addLine(`ctx[\`${ast.elem}\`] = ${keys}[${loopVar}];`);
     if (!ast.hasNoFirst) {
       this.addLine(`ctx[\`${ast.elem}_first\`] = ${loopVar} === 0;`);
@@ -929,9 +933,9 @@ export class CodeGenerator {
     this.target.indentLevel--;
     this.target.loopLevel--;
     this.addLine(`}`);
-    if (!ctx.isLast) {
-      this.addLine(`ctx = ctx.__proto__;`);
-    }
+    // if (!ctx.isLast) {
+      // this.addLine(`ctx = ${ctxVar};`);
+    // }
     this.insertBlock("l", block, ctx);
     return block.varName;
   }
@@ -1006,6 +1010,7 @@ export class CodeGenerator {
       ? this.formatPropObject(ast.attrs, ast.attrsTranslationCtx, ctx.translationCtx)
       : [];
     let ctxVar = ctx.ctxVar || "ctx";
+    let subCtxVar = generateId("ctx");
     const isDynamic = INTERP_REGEXP.test(ast.name);
     const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
     if (block && !forceNewBlock) {
@@ -1023,6 +1028,7 @@ export class CodeGenerator {
         this.helpers.add("zero");
         attrs.push(`[zero]: ${zeroStr}`);
       } else {
+        this.addLine(`const ${subCtxVar} = ${ctxVar}`);
         this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
         this.addLine(`${ctxVar}[isBoundary] = 1;`);
         this.helpers.add("isBoundary");
@@ -1032,6 +1038,7 @@ export class CodeGenerator {
           this.helpers.add("zero");
           this.addLine(`${ctxVar}[zero] = () => ${bl};`);
         }
+        this.addLine(`${ctxVar} = ${subCtxVar}`);
       }
     }
 

src/runtime/rendering/template_helpers.ts

@@ -81,18 +81,17 @@ function prepareList(collection: unknown): [unknown[], unknown[], number, undefi
 }
 
 const isBoundary = Symbol("isBoundary");
-
 function setContextValue(ctx: { [key: string]: any }, key: string, value: any): void {
-  const ctx0 = ctx;
-  while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
-    const newCtx = ctx.__proto__;
-    if (!newCtx) {
-      ctx = ctx0;
-      break;
+  // const ctx0 = ctx;
+  if (!(key in ctx)) {
+    ctx[key] = value;
+  } else {
+    while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
+      ctx = ctx.__proto__;
     }
-    ctx = newCtx;
+    ctx[key] = value;
   }
-  ctx[key] = value;
+  
 }
 
 function toNumber(val: string): number | string {

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

@@ -22,8 +22,7 @@ exports[`t-on can bind handlers with arguments 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['add'];
-    let hdlr1 = [()=>v1(5), ctx];
+    let hdlr1 = [()=>ctx['add'](5), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -37,8 +36,7 @@ exports[`t-on can bind handlers with empty  object 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['doSomething'];
-    let hdlr1 = [()=>v1({}), ctx];
+    let hdlr1 = [()=>ctx['doSomething']({}), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -52,8 +50,7 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
   let block1 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['doSomething'];
-    let hdlr1 = [()=>v1({}), ctx];
+    let hdlr1 = [()=>ctx['doSomething']({}), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -69,15 +66,14 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
   let block3 = createBlock(\`<li><a block-handler-0="click">link</a></li>\`);
   
   return function template(ctx, node, key = "") {
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(['someval']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`action\`] = k_block2[i1];
       ctx[\`action_index\`] = i1;
       const key1 = ctx['action_index'];
-      const v1 = ctx['activate'];
-      const v2 = ctx['action'];
-      let hdlr1 = [()=>v1(v2), ctx];
+      let hdlr1 = [()=>ctx['activate'](ctx['action']), ctx];
       c_block2[i1] = withKey(block3([hdlr1]), key1);
     }
     const b2 = list(c_block2);
@@ -94,8 +90,7 @@ exports[`t-on can bind handlers with object arguments 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['add'];
-    let hdlr1 = [()=>v1({val:5}), ctx];
+    let hdlr1 = [()=>ctx['add']({val:5}), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -139,9 +134,10 @@ exports[`t-on handler is bound to proper owner, part 2 1`] = `
   let block2 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`value\`] = k_block1[i1];
       const key1 = ctx['value'];
       let hdlr1 = [ctx['add'], ctx];
@@ -186,9 +182,10 @@ exports[`t-on handler is bound to proper owner, part 4 1`] = `
   const callTemplate_1 = app.getTemplate(\`sub\`);
   
   return function template(ctx, node, key = "") {
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block1, v_block1, l_block1, c_block1] = prepareList([1]);;
     for (let i1 = 0; i1 < l_block1; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`value\`] = k_block1[i1];
       ctx[\`value_first\`] = i1 === 0;
       ctx[\`value_last\`] = i1 === k_block1.length - 1;
@@ -330,14 +327,13 @@ exports[`t-on t-on modifiers (native listener) t-on with prevent modifier in t-f
   let block3 = createBlock(\`<a href="#" block-handler-0="click.prevent"> Edit <block-child-0/></a>\`);
   
   return function template(ctx, node, key = "") {
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block2, v_block2, l_block2, c_block2] = prepareList(ctx['projects']);;
     for (let i1 = 0; i1 < l_block2; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`project\`] = k_block2[i1];
       const key1 = ctx['project'];
-      const v1 = ctx['onEdit'];
-      const v2 = ctx['project'];
-      let hdlr1 = ["prevent", _ev=>v1(v2.id,_ev), ctx];
+      let hdlr1 = ["prevent", _ev=>ctx['onEdit'](ctx['project'].id,_ev), ctx];
       const b4 = safeOutput(ctx['project'].name);
       c_block2[i1] = withKey(block3([hdlr1], [b4]), key1);
     }
@@ -399,8 +395,7 @@ exports[`t-on t-on with inline statement (function call) 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.incrementCounter(2), ctx];
+    let hdlr1 = [()=>ctx['state'].incrementCounter(2), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -414,8 +409,7 @@ exports[`t-on t-on with inline statement 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Click</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.counter++, ctx];
+    let hdlr1 = [()=>ctx['state'].counter++, ctx];
     return block1([hdlr1]);
   }
 }"
@@ -429,8 +423,7 @@ exports[`t-on t-on with inline statement, part 2 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Toggle</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['state'];
-    let hdlr1 = [()=>v1.flag=!v1.flag, ctx];
+    let hdlr1 = [()=>ctx['state'].flag=!ctx['state'].flag, ctx];
     return block1([hdlr1]);
   }
 }"
@@ -444,9 +437,7 @@ exports[`t-on t-on with inline statement, part 3 1`] = `
   let block1 = createBlock(\`<button block-handler-0="click">Toggle</button>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['state'];
-    const v2 = ctx['someFunction'];
-    let hdlr1 = [()=>v1.n=v2(3), ctx];
+    let hdlr1 = [()=>ctx['state'].n=ctx['someFunction'](3), ctx];
     return block1([hdlr1]);
   }
 }"
@@ -504,9 +495,7 @@ exports[`t-on t-on, with arguments and t-call 2`] = `
   let block1 = createBlock(\`<p block-handler-0="click">lucas</p>\`);
   
   return function template(ctx, node, key = "") {
-    const v1 = ctx['this'];
-    const v2 = ctx['value'];
-    let hdlr1 = [()=>v1.update(v2), ctx];
+    let hdlr1 = [()=>ctx['this'].update(ctx['value']), ctx];
     return block1([hdlr1]);
   }
 }"

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

@@ -30,27 +30,28 @@ exports[`misc complex template 1`] = `
     if (ctx['batch'].state=='preparing') {
       b4 = block4();
     }
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block5, v_block5, l_block5, c_block5] = 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_block5; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`slot\`] = k_block5[i1];
       const key1 = ctx['slot'].id;
       c_block5[i1] = withKey(comp1({class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, this, null), key1);
     }
-    ctx = ctx.__proto__;
     b5 = list(c_block5);
-    ctx = Object.create(ctx);
+    const ctx2 = ctx;
     const [k_block7, v_block7, l_block7, c_block7] = prepareList([1,2,3,4]);;
     for (let i1 = 0; i1 < l_block7; i1++) {
+      const ctx = Object.create(ctx2);
       ctx[\`x\`] = k_block7[i1];
       const key1 = ctx['x'];
       c_block7[i1] = withKey(block8(), key1);
     }
-    ctx = ctx.__proto__;
     b7 = list(c_block7);
-    ctx = Object.create(ctx);
+    const ctx3 = ctx;
     const [k_block9, v_block9, l_block9, c_block9] = prepareList(ctx['commit_links']);;
     for (let i1 = 0; i1 < l_block9; i1++) {
+      const ctx = Object.create(ctx3);
       ctx[\`commit_link\`] = k_block9[i1];
       const key1 = ctx['commit_link'].id;
       let b11, b12, b13, b14, b15, b16;
@@ -96,9 +97,10 @@ exports[`misc global 1`] = `
   return function template(ctx, node, key = "") {
     ctx = Object.create(ctx);
     ctx[isBoundary] = 1
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block2, v_block2, l_block2, c_block2] = prepareList([4,5,6]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`value\`] = k_block2[i1];
       ctx[\`value_first\`] = i1 === 0;
       ctx[\`value_last\`] = i1 === k_block2.length - 1;
@@ -107,23 +109,26 @@ exports[`misc global 1`] = `
       const key1 = ctx['value'];
       const b5 = safeOutput(ctx['value']);
       const b4 = block4([], [b5]);
+      const ctx2 = ctx
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
+      const ctx3 = ctx
       ctx = Object.create(ctx);
       ctx[isBoundary] = 1;
       setContextValue(ctx, "foo", 'aaa');
+      ctx = ctx3
       const b8 = callTemplate_1.call(this, ctx, node, key + \`__1__\${key1}\`);
       ctx = ctx.__proto__;
       const b9 = callTemplate_2.call(this, ctx, node, key + \`__2__\${key1}\`);
       setContextValue(ctx, "foo", 'bbb');
       const b10 = callTemplate_3.call(this, ctx, node, key + \`__3__\${key1}\`);
       const b7 = multi([b8, b9, b10]);
       ctx[zero] = () => b7;
+      ctx = ctx2
       const b6 = callTemplate_4.call(this, ctx, node, key + \`__4__\${key1}\`);
       ctx = ctx.__proto__;
       c_block2[i1] = withKey(multi([b4, b6]), key1);
     }
-    ctx = ctx.__proto__;
     const b2 = list(c_block2);
     const b11 = callTemplate_5.call(this, ctx, node, key + \`__5\`);
     return block1([], [b2, b11]);
@@ -221,16 +226,16 @@ exports[`misc other complex template 1`] = `
     let b2, b3, b6, b18, b22, b28, b29, b31, b32;
     let attr1 = \`/runbot/\${ctx['project'].slug}\`;
     b2 = safeOutput(ctx['project'].name);
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block3, v_block3, l_block3, c_block3] = prepareList(ctx['projects']);;
     for (let i1 = 0; i1 < l_block3; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`project\`] = k_block3[i1];
       const key1 = ctx['project'].id;
       let hdlr1 = [ctx['selectProject'](ctx['project']), ctx];
       const b5 = safeOutput(ctx['project'].name);
       c_block3[i1] = withKey(block4([hdlr1], [b5]), key1);
     }
-    ctx = ctx.__proto__;
     b3 = list(c_block3);
     if (ctx['user']) {
       let b7, b8;
@@ -261,17 +266,17 @@ exports[`misc other complex template 1`] = `
     let hdlr2 = [ctx['toggleSettingsMenu'], ctx];
     let hdlr3 = [ctx['toggleMore'], ctx];
     if (ctx['categories']&&ctx['categories'].length>1) {
-      ctx = Object.create(ctx);
+      const ctx2 = ctx;
       const [k_block19, v_block19, l_block19, c_block19] = prepareList(ctx['categories']);;
       for (let i1 = 0; i1 < l_block19; i1++) {
+        const ctx = Object.create(ctx2);
         ctx[\`category\`] = k_block19[i1];
         const key1 = ctx['category'].id;
         let attr6 = ctx['category'].id;
         let prop1 = new Boolean(ctx['category'].id==ctx['options'].active_category_id);
         const b21 = safeOutput(ctx['category'].name);
         c_block19[i1] = withKey(block20([attr6, prop1], [b21]), key1);
       }
-      ctx = ctx.__proto__;
       const b19 = list(c_block19);
       b18 = block18([], [b19]);
     }
@@ -282,9 +287,10 @@ exports[`misc other complex template 1`] = `
     let hdlr6 = [ctx['clearSearch'], ctx];
     let ref2 = createRef(ctx['settings_menu']);
     if (ctx['triggers']) {
-      ctx = Object.create(ctx);
+      const ctx3 = ctx;
       const [k_block23, v_block23, l_block23, c_block23] = prepareList(ctx['triggers']);;
       for (let i1 = 0; i1 < l_block23; i1++) {
+        const ctx = Object.create(ctx3);
         ctx[\`trigger\`] = k_block23[i1];
         const key1 = ctx['trigger'].id;
         let b25;
@@ -300,7 +306,6 @@ exports[`misc other complex template 1`] = `
         }
         c_block23[i1] = withKey(multi([b25]), key1);
       }
-      ctx = ctx.__proto__;
       const b23 = list(c_block23);
       let hdlr8 = [ctx['triggerAll'], ctx];
       let hdlr9 = [ctx['triggerNone'], ctx];

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

@@ -9,9 +9,10 @@ exports[`memory t-foreach does not leak stuff in global scope 1`] = `
   let block1 = createBlock(\`<p><block-child-0/></p>\`);
   
   return function template(ctx, node, key = "") {
-    ctx = Object.create(ctx);
+    const ctx1 = ctx;
     const [k_block2, v_block2, l_block2, c_block2] = prepareList([3,2,1]);;
     for (let i1 = 0; i1 < l_block2; i1++) {
+      const ctx = Object.create(ctx1);
       ctx[\`item\`] = k_block2[i1];
       ctx[\`item_index\`] = i1;
       const key1 = ctx['item_index'];