[REL] v2.0.0-beta-17

# v2.0.0-beta-17

- imp: types: expose ComponentConstructor for typing purpose
- fix: compiler: fix falsy values for properties not keeping input empty
- fix: app: allow mounting owl apps in iframe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.0.0-beta-16",
+  "version": "2.0.0-beta-17",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",

src/compiler/code_generator.ts

@@ -584,8 +584,12 @@ export class CodeGenerator {
         expr = compileExpr(ast.attrs[key]);
         if (attrName && isProp(ast.tag, attrName)) {
           // we force a new string or new boolean to bypass the equality check in blockdom when patching same value
-          const C = attrName === "value" ? "String" : "Boolean";
-          expr = `new ${C}(${expr})`;
+          if (attrName === "value") {
+            // When the expression is falsy, fall back to an empty string
+            expr = `new String((${expr}) || "")`;
+          } else {
+            expr = `new Boolean(${expr})`;
+          }
         }
         const idx = block!.insertData(expr, "attr");
         if (key === "t-att") {

src/runtime/index.ts

@@ -36,6 +36,7 @@ export const blockDom = {
 export { App, mount } from "./app";
 export { xml } from "./template_set";
 export { Component } from "./component";
+export type { ComponentConstructor } from "./component";
 export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";

src/runtime/utils.ts

@@ -28,12 +28,18 @@ export function batched(callback: Callback): Callback {
 }
 
 export function validateTarget(target: HTMLElement) {
-  if (!(target instanceof HTMLElement)) {
-    throw new OwlError("Cannot mount component: the target is not a valid DOM element");
-  }
-  if (!document.body.contains(target)) {
-    throw new OwlError("Cannot mount a component on a detached dom node");
+  // Get the document and HTMLElement corresponding to the target to allow mounting in iframes
+  const document = target && target.ownerDocument;
+  if (document) {
+    const HTMLElement = document.defaultView!.HTMLElement;
+    if (target instanceof HTMLElement) {
+      if (!document.body.contains(target)) {
+        throw new OwlError("Cannot mount a component on a detached dom node");
+      }
+      return;
+    }
   }
+  throw new OwlError("Cannot mount component: the target is not a valid DOM element");
 }
 
 export class EventBus extends EventTarget {

tests/app/__snapshots__/app.test.ts.snap

@@ -29,6 +29,19 @@ exports[`app can configure an app with props 1`] = `
 }"
 `;
 
+exports[`app can mount app in an iframe 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"my-div\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`app destroy remove the widget from the DOM 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/app/app.test.ts

@@ -76,4 +76,22 @@ describe("app", () => {
       "Component 'Root' does not have a static props description"
     );
   });
+
+  test("can mount app in an iframe", async () => {
+    class SomeComponent extends Component {
+      static template = xml`<div class="my-div"/>`;
+    }
+
+    const iframe = document.createElement("iframe");
+    fixture.appendChild(iframe);
+    const app = new App(SomeComponent);
+    const iframeDoc = iframe.contentDocument!;
+    const comp = await app.mount(iframeDoc.body);
+    const div = iframeDoc.querySelector(".my-div");
+    expect(div).not.toBe(null);
+    expect(iframeDoc.contains(div)).toBe(true);
+    app.destroy();
+    expect(iframeDoc.contains(div)).toBe(false);
+    expect(status(comp)).toBe("destroyed");
+  });
 });

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

@@ -708,6 +708,20 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;
 
+exports[`attributes updating property with falsy value 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = new String((ctx['v']) || \\"\\");
+    return block1([attr1]);
+  }
+}"
+`;
+
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -773,7 +787,7 @@ exports[`special cases for some specific html attributes/properties input with t
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String(ctx['v']);
+    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -787,7 +801,7 @@ exports[`special cases for some specific html attributes/properties input with t
   let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String(ctx['v']);
+    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -815,7 +829,7 @@ exports[`special cases for some specific html attributes/properties select with
   let block1 = createBlock(\`<select block-attribute-0=\\"value\\"><option value=\\"potato\\">Potato</option><option value=\\"tomato\\">Tomato</option><option value=\\"onion\\">Onion</option></select>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String(ctx['value']);
+    let attr1 = new String((ctx['value']) || \\"\\");
     return block1([attr1]);
   }
 }"
@@ -829,7 +843,7 @@ exports[`special cases for some specific html attributes/properties textarea wit
   let block1 = createBlock(\`<textarea block-attribute-0=\\"value\\"/>\`);
   
   return function template(ctx, node, key = \\"\\") {
-    let attr1 = new String(ctx['v']);
+    let attr1 = new String((ctx['v']) || \\"\\");
     return block1([attr1]);
   }
 }"

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

@@ -277,7 +277,7 @@ exports[`misc other complex template 1`] = `
       const b15 = list(c_block15);
       b14 = block14([], [b15]);
     }
-    let attr8 = new String(ctx['search'].value);
+    let attr8 = new String((ctx['search'].value) || \\"\\");
     let hdlr4 = [ctx['updateFilter'], ctx];
     let hdlr5 = [ctx['updateFilter'], ctx];
     let hdlr6 = [ctx['clearSearch'], ctx];

tests/compiler/attributes.test.ts

@@ -329,6 +329,35 @@ describe("attributes", () => {
     expect(fixture.innerHTML).toBe('<div value=""></div>');
   });
 
+  test("updating property with falsy value", async () => {
+    // render input with initial value
+    const template = `<input t-att-value="v"></input>`;
+    const bnode1 = renderToBdom(template, { v: false });
+    const fixture = makeTestFixture();
+    mount(bnode1, fixture);
+
+    const input = fixture.querySelector("input")!;
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: false }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: undefined }));
+    expect(input.value).toBe("");
+
+    patch(bnode1, renderToBdom(template, { v: "owl" }));
+    expect(input.value).toBe("owl");
+
+    patch(bnode1, renderToBdom(template, { v: null }));
+    expect(input.value).toBe("");
+  });
+
   test("changing a class with t-att-class", () => {
     // render input with initial value
     const template = `<div t-att-class="v"/>`;