[IMP] qweb: t-call with params

Author: Polymorphe57

src/compiler/code_generator.ts

@@ -15,6 +15,7 @@ import {
   ASTMulti,
   ASTSlot,
   ASTTCall,
+  ASTTCall2,
   ASTTCallBlock,
   ASTTEsc,
   ASTText,
@@ -500,6 +501,8 @@ export class CodeGenerator {
         return this.compileMulti(ast, ctx);
       case ASTType.TCall:
         return this.compileTCall(ast, ctx);
+      case ASTType.TCall2:
+        return this.compileTCall2(ast, ctx);
       case ASTType.TCallBlock:
         return this.compileTCallBlock(ast, ctx);
       case ASTType.TSet:
@@ -1092,6 +1095,65 @@ export class CodeGenerator {
     return block.varName;
   }
 
+  compileTCall2(ast: ASTTCall2, ctx: Context): string {
+    let { block, forceNewBlock } = ctx;
+    const ctxVar = ctx.ctxVar || "ctx";
+
+    debugger;
+
+    const attrs = ast.attrs
+      ? this.formatPropObject(ast.attrs, ast.attrsTranslationCtx, ctx.translationCtx) // should use ctxVar
+      : [];
+    let ctxString = `{${attrs.join(",")}}`;
+    if (ast.context) {
+      const dynCtxVar = generateId("ctx");
+      this.addLine(`let ${dynCtxVar} = ${compileExpr(ast.context)};`);
+      ctxString = `Object.assign({}, ${dynCtxVar}${attrs.length ? ", " + ctxString : ""})`;
+    }
+
+    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};`);
+      }
+    }
+
+    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}, ${ctxString}, node, ${key})`, block!, {
+        ...ctx,
+        forceNewBlock: !block,
+      });
+    } else {
+      const id = generateId(`callTemplate_`);
+      this.staticDefs.push({ id, expr: `app.getTemplate(${subTemplate})` });
+      this.insertBlock(`${id}.call(this, ${ctxString}, node, ${key})`, block!, {
+        ...ctx,
+        forceNewBlock: !block,
+      });
+    }
+    if (ast.body && !ctx.isLast) {
+      this.addLine(`${ctxVar} = ${ctxVar}.__proto__;`);
+    }
+    return block.varName;
+  }
+
   compileTCallBlock(ast: ASTTCallBlock, ctx: Context): string {
     let { block, forceNewBlock } = ctx;
     if (block) {

src/compiler/parser.ts

@@ -18,6 +18,7 @@ export const enum ASTType {
   TIf,
   TSet,
   TCall,
+  TCall2,
   TOut,
   TForEach,
   TKey,
@@ -130,6 +131,15 @@ export interface ASTTCall extends BaseAST {
   context: string | null;
 }
 
+export interface ASTTCall2 extends BaseAST {
+  type: ASTType.TCall2;
+  name: string;
+  attrs: Attrs | null;
+  attrsTranslationCtx: Attrs | null;
+  body: AST[] | null;
+  context: string | null;
+}
+
 interface SlotDefinition {
   content: AST | null;
   scope: string | null;
@@ -200,6 +210,7 @@ export type AST =
   | ASTTif
   | ASTTSet
   | ASTTCall
+  | ASTTCall2
   | ASTTOut
   | ASTTForEach
   | ASTTKey
@@ -664,11 +675,34 @@ function parseTCall(node: Element, ctx: ParsingContext): AST | null {
       };
     }
   }
-  const body = parseChildren(node, ctx);
 
+  const body = parseChildren(node, ctx);
+  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 (!attrs && !attrsTranslationCtx) {
+    return {
+      type: ASTType.TCall,
+      name: subTemplate,
+      body: body.length ? body : null,
+      context,
+    };
+  }
   return {
-    type: ASTType.TCall,
+    type: ASTType.TCall2,
     name: subTemplate,
+    attrs,
+    attrsTranslationCtx,
     body: body.length ? body : null,
     context,
   };

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

@@ -826,6 +826,33 @@ exports[`t-call (template calling) t-call on a div with t-call-context 2`] = `
 }"
 `;
 
+exports[`t-call (template calling) t-call with attributes 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const callTemplate_1 = app.getTemplate(\`sub\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return callTemplate_1.call(this, {'v1': ctx['val1'],'v2': ctx['val2']}, node, key + \`__1\`);
+  }
+}"
+`;
+
+exports[`t-call (template calling) t-call with attributes 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['v1'];
+    let txt2 = ctx['v2'];
+    return block1([txt1, txt2]);
+  }
+}"
+`;
+
 exports[`t-call (template calling) t-call with body content as root of a template 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/compiler/parser.test.ts

@@ -1493,7 +1493,7 @@ describe("qweb parser", () => {
           scope: null,
         },
       },
-      type: 11,
+      type: ASTType.TComponent,
     });
   });
 

tests/compiler/t_call.test.ts

@@ -538,4 +538,14 @@ describe("t-call (template calling)", () => {
 
     expect(context.renderToString("main")).toBe("grandchild<p>Some content...</p>");
   });
+
+  test("t-call with attributes", () => {
+    const context = new TestContext();
+    context.addTemplate("sub", `<span><t t-esc="v1"/><t t-esc="v2"/></span>`);
+    context.addTemplate("main", `<t t-call="sub" v1="val1" v2="val2"/>`);
+
+    expect(context.renderToString("main", { val1: "abc", val2: "def" })).toBe(
+      "<span>abcdef</span>"
+    );
+  });
 });