allow t-if directive with t-widget

web/static/src/ts/core/qweb_vdom.ts

@@ -269,11 +269,16 @@ export class QWeb {
     if (isDebug) {
       ctx.code.unshift("    debugger");
     }
-    let template = new Function(
-      "context",
-      "extra",
-      ctx.code.join("\n")
-    ) as CompiledTemplate<VNode>;
+    let template;
+    try {
+      template = new Function(
+        "context",
+        "extra",
+        ctx.code.join("\n")
+      ) as CompiledTemplate<VNode>;
+    } catch (e) {
+      throw new Error(`Invalid template (or compiled code): ${e.message}`);
+    }
     if (isDebug) {
       console.log(
         `Template: ${
@@ -876,6 +881,10 @@ const widgetDirective: Directive = {
 
     ctx.addLine(`extra.promises.push(def${defID});`);
 
+    if (node.getAttribute("t-if")) {
+      ctx.closeIf();
+    }
+
     return true;
   }
 };

web/static/tests/core/component.test.ts

@@ -767,7 +767,7 @@ describe("props evaluation (with t-props directive)", () => {
   });
 });
 
-describe("t-on directive on widgets", () => {
+describe("other directives with t-widget", () => {
   test("t-on works as expected", async () => {
     let n = 0;
     class ParentWidget extends Widget {
@@ -789,6 +789,28 @@ describe("t-on directive on widgets", () => {
     child.trigger("customevent", 43);
     expect(n).toBe(1);
   });
+
+  test("t-if works with t-widget", async () => {
+    class ParentWidget extends Widget {
+      inlineTemplate = `<div><t t-widget="child" t-if="state.flag"/></div>`;
+      widgets = { child: Child };
+      state = { flag: true };
+    }
+    class Child extends Widget {
+      inlineTemplate = "<span>hey</span>";
+    }
+
+    const widget = new ParentWidget(env);
+    await widget.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+
+    await widget.updateState({ flag: false });
+    expect(fixture.innerHTML).toBe("<div></div>");
+
+    await widget.updateState({ flag: true });
+    expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
+  });
 });
 
 describe("random stuff/miscellaneous", () => {