[IMP] qweb: Make t-call parametric, enable lazy XML evaluation

The goal is to apply to OWL the same type of changes that were made in odoo/odoo#197296.

Author: Polymorphe57

src/compiler/code_generator.ts

@@ -32,6 +32,8 @@ import {
 } from "./parser";
 import { OwlError } from "../common/owl_error";
 
+const zero = Symbol("");
+
 type BlockType = "block" | "text" | "multi" | "list" | "html" | "comment";
 const whitespaceRE = /\s+/g;
 
@@ -279,7 +281,7 @@ export class CodeGenerator {
   translatableAttributes: string[] = TRANSLATABLE_ATTRS;
   ast: AST;
   staticDefs: { id: string; expr: string }[] = [];
-  slotNames: Set<String> = new Set();
+  slotNames: Set<String | Symbol> = new Set();
   helpers: Set<string> = new Set();
 
   constructor(ast: AST, options: CodeGenOptions) {
@@ -791,12 +793,24 @@ export class CodeGenerator {
     return block!.varName;
   }
 
+  compileZero() {
+    this.helpers.add("zero");
+    this.helpers.add("zero2");
+    this.helpers.add("callLazyBlock");
+    const isMultiple = this.slotNames.has(zero);
+    this.slotNames.add(zero);
+    let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
+    if (isMultiple) {
+      key = this.generateComponentKey(key);
+    }
+    return `zero2 in ctx ? callLazyBlock(ctx[zero2], node, ${key}) : ctx[zero]`;
+  }
+
   compileTEsc(ast: ASTTEsc, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     let expr: string;
     if (ast.expr === "0") {
-      this.helpers.add("zero");
-      expr = `ctx[zero]`;
+      expr = this.compileZero();
     } else {
       expr = compileExpr(ast.expr);
       if (ast.defaultValue) {
@@ -824,8 +838,7 @@ export class CodeGenerator {
     block = this.createBlock(block, "html", ctx);
     let blockStr;
     if (ast.expr === "0") {
-      this.helpers.add("zero");
-      blockStr = `ctx[zero]`;
+      blockStr = this.compileZero();
     } else if (ast.body) {
       let bodyValue = null;
       bodyValue = BlockDescription.nextBlockId;
@@ -1044,50 +1057,73 @@ export class CodeGenerator {
 
   compileTCall(ast: ASTTCall, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
+
+    const attrs: string[] = ast.attrs
+      ? this.formatPropObject(ast.attrs, ast.attrsTranslationCtx, ctx.translationCtx)
+      : [];
     let ctxVar = ctx.ctxVar || "ctx";
-    if (ast.context) {
+    if (!ast.attrs && ast.context) {
       ctxVar = generateId("ctx");
       this.addLine(`let ${ctxVar} = ${compileExpr(ast.context)};`);
     }
+
     const isDynamic = INTERP_REGEXP.test(ast.name);
     const subTemplate = isDynamic ? interpolate(ast.name) : "`" + ast.name + "`";
     if (block && !forceNewBlock) {
       this.insertAnchor(block);
     }
     block = this.createBlock(block, "multi", ctx);
     if (ast.body) {
-      this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
-      this.addLine(`${ctxVar}[isBoundary] = 1;`);
-      this.helpers.add("isBoundary");
-      const subCtx = createContext(ctx, { ctxVar });
-      const bl = this.compileMulti({ type: ASTType.Multi, content: ast.body }, subCtx);
-      if (bl) {
-        this.helpers.add("zero");
-        this.addLine(`${ctxVar}[zero] = ${bl};`);
+      if (ast.attrs) {
+        let ctxStr = "ctx";
+        if (this.target.loopLevel || !this.hasSafeContext) {
+          ctxStr = generateId("ctx");
+          this.helpers.add("capture");
+          this.define(ctxStr, `capture(ctx)`);
+        }
+        const name = this.compileInNewTarget("callBody", ast.body, ctx);
+        this.helpers.add("zero2");
+        attrs.push(`[zero2]: {__render: ${name}.bind(this), __ctx: ${ctxStr}}`);
+      } else {
+        this.addLine(`${ctxVar} = Object.create(${ctxVar});`);
+        this.addLine(`${ctxVar}[isBoundary] = 1;`);
+        this.helpers.add("isBoundary");
+        const subCtx = createContext(ctx, { ctxVar });
+        const bl = this.compileAST(ast.body, subCtx);
+        if (bl) {
+          this.helpers.add("zero");
+          this.addLine(`${ctxVar}[zero] = ${bl};`);
+        }
       }
     }
-
+    let ctxString = `{${attrs.join(", ")}}`;
+    if (ast.attrs && ast.context) {
+      const dynCtxVar = generateId("ctx");
+      this.addLine(`let ${dynCtxVar} = ${compileExpr(ast.context)};`);
+      ctxString = `Object.assign({}, ${dynCtxVar}${attrs.length ? ", " + ctxString : ""})`;
+    }
+    const ctxExpr = ast.attrs ? ctxString : ctxVar;
     const key = this.generateComponentKey();
     if (isDynamic) {
       const templateVar = generateId("template");
       if (!this.staticDefs.find((d) => d.id === "call")) {
         this.staticDefs.push({ id: "call", expr: `app.callTemplate.bind(app)` });
       }
       this.define(templateVar, subTemplate);
-      this.insertBlock(`call(this, ${templateVar}, ${ctxVar}, node, ${key})`, block!, {
+      this.insertBlock(`call(this, ${templateVar}, ${ctxExpr}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     } else {
       const id = generateId(`callTemplate_`);
       this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
-      this.insertBlock(`${id}.call(this, ${ctxVar}, node, ${key})`, block!, {
+      this.insertBlock(`${id}.call(this, ${ctxExpr}, node, ${key})`, block!, {
         ...ctx,
         forceNewBlock: !block,
       });
     }
-    if (ast.body && !ctx.isLast) {
-      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
+    if (!ast.attrs && ast.body && !ctx.isLast) {
+      this.addLine(`${ctxExpr} = ${ctxExpr}.__proto__;`);
     }
     return block.varName;
   }

src/compiler/parser.ts

@@ -126,7 +126,9 @@ export interface ASTTKey extends BaseAST {
 export interface ASTTCall extends BaseAST {
   type: ASTType.TCall;
   name: string;
-  body: AST[] | null;
+  attrs: Attrs | null;
+  attrsTranslationCtx: Attrs | null;
+  body: AST | null;
   context: string | null;
 }
 
@@ -642,9 +644,35 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
   node.removeAttribute("t-call");
   node.removeAttribute("t-call-context");
 
+  let attrs: Attrs | null = null;
+  let attrsTranslationCtx: Attrs | null = null;
+  for (let attributeName of node.getAttributeNames()) {
+    const value = node.getAttribute(attributeName)!;
+    if (attributeName.startsWith("t-translation-context-")) {
+      const attrName = attributeName.slice(22);
+      attrsTranslationCtx = attrsTranslationCtx || {};
+      attrsTranslationCtx[attrName] = value;
+    } else {
+      attrs = attrs || {};
+      attrs[attributeName] = value;
+    }
+  }
+
   if (node.tagName !== "t") {
+    if (attrs) {
+      throw new OwlError(
+        `Directive 't-call' with params can only be used on <t> nodes (used on a <${node.tagName}>)`
+      );
+    }
     const ast = parseNode(node, ctx);
-    const tcall: AST = { type: ASTType.TCall, name: subTemplate, body: null, context };
+    const tcall: AST = {
+      type: ASTType.TCall,
+      name: subTemplate,
+      attrs: null,
+      attrsTranslationCtx: null,
+      body: null,
+      context,
+    };
     if (ast && ast.type === ASTType.DomNode) {
       ast.content = [tcall];
       return ast;
@@ -664,12 +692,13 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
       };
     }
   }
-  const body = parseChildren(node, ctx);
-
+  const body = parseChildNodes(node, ctx);
   return {
     type: ASTType.TCall,
     name: subTemplate,
-    body: body.length ? body : null,
+    attrs,
+    attrsTranslationCtx,
+    body,
     context,
   };
 }

src/runtime/template_helpers.ts

@@ -47,6 +47,14 @@ function callSlot(
   return slotBDom || text("");
 }
 
+function callLazyBlock(slot: any, parent: any, key: string): BDom {
+  key = key + "__lazy_block";
+  const { __render, __ctx } = slot;
+  const slotScope = ObjectCreate(__ctx || {});
+  const slotBDom = __render ? __render(slotScope, parent, key) : null;
+  return slotBDom || text("");
+}
+
 function capture(ctx: any): any {
   const result = ObjectCreate(ctx);
   for (let k in ctx) {
@@ -237,8 +245,10 @@ function makeRefWrapper(node: ComponentNode) {
 export const helpers = {
   withDefault,
   zero: Symbol("zero"),
+  zero2: Symbol("zero2"),
   isBoundary,
   callSlot,
+  callLazyBlock,
   capture,
   withKey,
   prepareList,

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

@@ -150,13 +150,13 @@ exports[`misc global 3`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { zero } = helpers;
+  let { zero, zero2, callLazyBlock } = helpers;
   
   let block1 = createBlock(\`<año block-attribute-0=\\"falló\\"><block-child-0/></año>\`);
   
   return function template(ctx, node, key = \\"\\") {
     let attr1 = 'agüero';
-    const b2 = ctx[zero];
+    const b2 = zero2 in ctx ? callLazyBlock(ctx[zero2], node, key) : ctx[zero];
     return block1([attr1], [b2]);
   }
 }"