[REL] v2.4.0

# v2.4.0

 - [IMP] owl: add basic support for sub roots
 - [IMP] make set of timeout-able hooks (and their timeouts) clearer by using a const map
 - [IMP] devtools: add support for file urls on chrome

doc/reference/app.md

@@ -6,6 +6,7 @@
 - [API](#api)
 - [Configuration](#configuration)
 - [`mount` helper](#mount-helper)
+- [Roots](#roots)
 - [Loading templates](#loading-templates)
 
 ## Overview
@@ -92,6 +93,33 @@ Most of the time, the `mount` helper is more convenient, but whenever one needs
 a reference to the actual Owl App, then using the `App` class directly is
 possible.
 
+## Roots
+
+An application can have multiple roots. It is sometimes useful to instantiate
+sub components in places that are not managed by Owl, such as an html editor
+with dynamic content (the Knowledge application in Odoo).
+
+To create a root, one can use the `createRoot` method, which takes two arguments:
+
+- **`Component`**: a component class (Root component of the app)
+- **`config (optional)`**: a config object that may contain a `props` object or a
+  `env` object.
+
+The `createRoot` method returns an object with a `mount` method (same API as
+the `App.mount` method), and a `destroy` method.
+
+```js
+const root = app.createRoot(MyComponent, { props: { someProps: true } });
+await root.mount(targetElement);
+
+// later
+root.destroy();
+```
+
+Note that, like with owl `App`, it is the responsibility of the code that created
+the root to properly destroy it (before it has been removed from the DOM!). Owl
+has no way of doing it itself.
+
 ## Loading templates
 
 Most applications will need to load templates whenever they start. Here is

docs/owl.js

@@ -2598,42 +2598,47 @@ class ComponentNode {
 }
 
 const TIMEOUT = Symbol("timeout");
+const HOOK_TIMEOUT = {
+    onWillStart: 3000,
+    onWillUpdateProps: 3000,
+};
 function wrapError(fn, hookName) {
-    const error = new OwlError(`The following error occurred in ${hookName}: `);
-    const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
+    const error = new OwlError();
+    const timeoutError = new OwlError();
     const node = getCurrent();
     return (...args) => {
         const onError = (cause) => {
             error.cause = cause;
-            if (cause instanceof Error) {
-                error.message += `"${cause.message}"`;
-            }
-            else {
-                error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
-            }
+            error.message =
+                cause instanceof Error
+                    ? `The following error occurred in ${hookName}: "${cause.message}"`
+                    : `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
             throw error;
         };
+        let result;
         try {
-            const result = fn(...args);
-            if (result instanceof Promise) {
-                if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
-                    const fiber = node.fiber;
-                    Promise.race([
-                        result.catch(() => { }),
-                        new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
-                    ]).then((res) => {
-                        if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
-                            console.warn(timeoutError);
-                        }
-                    });
-                }
-                return result.catch(onError);
-            }
-            return result;
+            result = fn(...args);
         }
         catch (cause) {
             onError(cause);
         }
+        if (!(result instanceof Promise)) {
+            return result;
+        }
+        const timeout = HOOK_TIMEOUT[hookName];
+        if (timeout) {
+            const fiber = node.fiber;
+            Promise.race([
+                result.catch(() => { }),
+                new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), timeout)),
+            ]).then((res) => {
+                if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
+                    timeoutError.message = `${hookName}'s promise hasn't resolved after ${timeout / 1000} seconds`;
+                    console.log(timeoutError);
+                }
+            });
+        }
+        return result.catch(onError);
     };
 }
 // -----------------------------------------------------------------------------
@@ -5552,7 +5557,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.3.0";
+const version = "2.4.0";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5647,6 +5652,7 @@ class App extends TemplateSet {
     constructor(Root, config = {}) {
         super(config);
         this.scheduler = new Scheduler();
+        this.subRoots = new Set();
         this.root = null;
         this.name = config.name || "";
         this.Root = Root;
@@ -5665,14 +5671,42 @@ class App extends TemplateSet {
         this.props = config.props || {};
     }
     mount(target, options) {
-        App.validateTarget(target);
-        if (this.dev) {
-            validateProps(this.Root, this.props, { __owl__: { app: this } });
+        const root = this.createRoot(this.Root, { props: this.props });
+        this.root = root.node;
+        this.subRoots.delete(root.node);
+        return root.mount(target, options);
+    }
+    createRoot(Root, config = {}) {
+        const props = config.props || {};
+        // hack to make sure the sub root get the sub env if necessary. for owl 3,
+        // would be nice to rethink the initialization process to make sure that
+        // we can create a ComponentNode and give it explicitely the env, instead
+        // of looking it up in the app
+        const env = this.env;
+        if (config.env) {
+            this.env = config.env;
         }
-        const node = this.makeNode(this.Root, this.props);
-        const prom = this.mountNode(node, target, options);
-        this.root = node;
-        return prom;
+        const node = this.makeNode(Root, props);
+        if (config.env) {
+            this.env = env;
+        }
+        this.subRoots.add(node);
+        return {
+            node,
+            mount: (target, options) => {
+                App.validateTarget(target);
+                if (this.dev) {
+                    validateProps(Root, props, { __owl__: { app: this } });
+                }
+                const prom = this.mountNode(node, target, options);
+                return prom;
+            },
+            destroy: () => {
+                this.subRoots.delete(node);
+                node.destroy();
+                this.scheduler.processTasks();
+            },
+        };
     }
     makeNode(Component, props) {
         return new ComponentNode(Component, props, this, null, null);
@@ -5704,6 +5738,9 @@ class App extends TemplateSet {
     }
     destroy() {
         if (this.root) {
+            for (let subroot of this.subRoots) {
+                subroot.destroy();
+            }
             this.root.destroy();
             this.scheduler.processTasks();
         }
@@ -5981,6 +6018,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, batched, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
 
 
-__info__.date = '2024-07-25T13:13:44.371Z';
-__info__.hash = '0cde4b8';
+__info__.date = '2024-09-30T08:49:29.420Z';
+__info__.hash = 'eb2b32a';
 __info__.url = 'https://github.com/odoo/owl';

docs/playground/playground.js

@@ -99,11 +99,6 @@ const SAMPLES = [
     folder: "todo_app",
     code: ["js", "xml", "css"],
   },
-  {
-    description: "Tic-Tac-Toe (with reactivity)",
-    folder: "tic_tac_toe",
-    code: ["js", "xml", "css"],
-  },
   {
     description: "Responsive app",
     folder: "responsive_app",

docs/playground/samples/tic_tac_toe/tic_tac_toe.css

@@ -1,32 +0,0 @@
-.square {
-    background: #fff;
-    border: 1px solid #999;
-    float: left;
-    font-size: 24px;
-    font-weight: bold;
-    line-height: 34px;
-    height: 34px;
-    margin-right: -1px;
-    margin-top: -1px;
-    padding: 0;
-    text-align: center;
-    width: 34px;
-}
-
-.board-row:after {
-    clear: both;
-    content: '';
-    display: table;
-}
-
-.status {
-    margin-bottom: 10px;
-}
-.game {
-    display: flex;
-    flex-direction: row;
-}
-
-.game-info {
-    margin-left: 20px;
-}

docs/playground/samples/tic_tac_toe/tic_tac_toe.js

@@ -1,105 +0,0 @@
-// This example is an implementation of the Tic-Tac-Toe game, from
-// https://react.dev/learn/tutorial-tic-tac-toe.  This is an easy application to start learning owl
-// with some interesting user interactions.
-//
-// In this implementation, we use the owl reactivity mechanism.
-import { Component, useState, mount } from "@odoo/owl";
-
-
-class Square extends Component {
-    static template = "Square";
-}
-
-class Board extends Component {
-    static template = "Board"
-    static components = { Square };
-
-    handleClick(i) {
-        if (this.calculateWinner(this.props.squares) || this.props.squares[i]) {
-          return;
-        }
-        const nextSquares = this.props.squares.slice();
-        if (this.props.xIsNext) {
-          nextSquares[i] = 'X';
-        } else {
-          nextSquares[i] = 'O';
-        }
-        this.props.onPlay(nextSquares);
-    }
-
-    get status(){
-        const winner = this.calculateWinner(this.props.squares);
-        if (winner) {
-          return 'Winner: ' + winner;
-        } else {
-            if (Object.values(this.props.squares).filter((v) => v === null).length > 0)
-                return 'Next player: ' + (this.props.xIsNext ? 'X' : 'O');
-            else 
-                return 'Draw';
-        }
-    }
-
-    calculateWinner(squares) {
-        const lines = [
-          [0, 1, 2],
-          [3, 4, 5],
-          [6, 7, 8],
-          [0, 3, 6],
-          [1, 4, 7],
-          [2, 5, 8],
-          [0, 4, 8],
-          [2, 4, 6],
-        ];
-        for (let i = 0; i < lines.length; i++) {
-          const [a, b, c] = lines[i];
-          if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
-            return squares[a];
-          }
-        }
-        return null;
-      }
-}  
-
-class Game extends Component {
-    static template = "Game"
-    static components = { Board };
-
-    setup() {
-        this.state = useState({
-            currentMove: 0,
-            history: [Array(9).fill(null)],
-        });
-    }
-
-    get currentSquares() {
-        return this.state.history[this.state.currentMove];
-    }
-
-    get xIsNext() {
-        return this.state.currentMove % 2 === 0;
-    }
-
-    jumpTo(nextMove) {
-        this.state.currentMove = nextMove;
-    }
-
-    handlePlay(nextSquares) {
-        const nextHistory = [...this.state.history.slice(0, this.state.currentMove + 1), nextSquares];
-        this.state.history = nextHistory;
-        this.state.currentMove = this.state.history.length - 1;
-    }
-
-    get moves() {
-        return this.state.history.map((_squares, move) => {
-            if (move > 0) {
-              return {id: move, description: 'Go to move #' + move};
-            } else {
-              return {id: move, description: 'Go to game start'};
-            }
-        });
-    }
-
-}
-
-// Application setup
-mount(Game, document.body, { templates: TEMPLATES, dev: true});

docs/playground/samples/tic_tac_toe/tic_tac_toe.xml

@@ -1,43 +0,0 @@
-<templates>
-    <button t-name="Square" class="square" t-on-click="props.onSquareClick">
-        <t t-esc="props.value"/>
-    </button>
-
-    <t t-name="Board">
-        <div class="status">
-            <t t-esc="status"/>
-        </div>
-        <div class="board-row">
-            <Square value="props.squares[0]" onSquareClick="() => this.handleClick(0)" />
-            <Square value="props.squares[1]" onSquareClick="() => this.handleClick(1)" />
-            <Square value="props.squares[2]" onSquareClick="() => this.handleClick(2)" />
-        </div>
-        <div class="board-row">
-            <Square value="props.squares[3]" onSquareClick="() => this.handleClick(3)" />
-            <Square value="props.squares[4]" onSquareClick="() => this.handleClick(4)" />
-            <Square value="props.squares[5]" onSquareClick="() => this.handleClick(5)" />
-        </div>
-        <div class="board-row">
-            <Square value="props.squares[6]" onSquareClick="() => this.handleClick(6)" />
-            <Square value="props.squares[7]" onSquareClick="() => this.handleClick(7)" />
-            <Square value="props.squares[8]" onSquareClick="() => this.handleClick(8)" />
-        </div>
-    </t>
-
-    <div t-name="Game" class="game">
-        <div class="game-board">
-            <Board xIsNext="xIsNext" squares="currentSquares" onPlay.bind="handlePlay" />
-        </div>
-        <div class="game-info">
-            <ol>
-                <t t-foreach="moves" t-as="move" t-key="move.id">
-                    <li>
-                        <button t-on-click="() => this.jumpTo(move.id)">
-                            <t t-esc="move.description"/>
-                        </button>
-                    </li>
-                </t>
-            </ol>
-        </div>
-    </div>
-</templates>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

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

src/runtime/app.ts

@@ -16,10 +16,13 @@ export interface Env {
   [key: string]: any;
 }
 
-export interface AppConfig<P, E> extends TemplateSetConfig {
-  name?: string;
+export interface RootConfig<P, E> {
   props?: P;
   env?: E;
+}
+
+export interface AppConfig<P, E> extends TemplateSetConfig, RootConfig<P, E> {
+  name?: string;
   test?: boolean;
   warnIfNoStaticProps?: boolean;
 }
@@ -49,6 +52,12 @@ declare global {
   }
 }
 
+interface Root<P, E> {
+  node: ComponentNode<P, E>;
+  mount(target: HTMLElement | ShadowRoot, options?: MountOptions): Promise<Component<P, E>>;
+  destroy(): void;
+}
+
 window.__OWL_DEVTOOLS__ ||= { apps, Fiber, RootFiber, toRaw, reactive };
 
 export class App<
@@ -65,6 +74,7 @@ export class App<
   props: P;
   env: E;
   scheduler = new Scheduler();
+  subRoots: Set<ComponentNode> = new Set();
   root: ComponentNode<P, E> | null = null;
   warnIfNoStaticProps: boolean;
 
@@ -91,14 +101,46 @@ export class App<
     target: HTMLElement | ShadowRoot,
     options?: MountOptions
   ): Promise<Component<P, E> & InstanceType<T>> {
-    App.validateTarget(target);
-    if (this.dev) {
-      validateProps(this.Root, this.props, { __owl__: { app: this } });
+    const root = this.createRoot(this.Root, { props: this.props });
+    this.root = root.node;
+    this.subRoots.delete(root.node);
+    return root.mount(target, options) as any;
+  }
+
+  createRoot<Props extends object, SubEnv = any>(
+    Root: ComponentConstructor<Props, E>,
+    config: RootConfig<Props, SubEnv> = {}
+  ): Root<Props, SubEnv> {
+    const props = config.props || ({} as Props);
+    // hack to make sure the sub root get the sub env if necessary. for owl 3,
+    // would be nice to rethink the initialization process to make sure that
+    // we can create a ComponentNode and give it explicitely the env, instead
+    // of looking it up in the app
+    const env = this.env;
+    if (config.env) {
+      this.env = config.env as any;
     }
-    const node = this.makeNode(this.Root, this.props);
-    const prom = this.mountNode(node, target, options);
-    this.root = node;
-    return prom;
+    const node = this.makeNode(Root, props);
+    if (config.env) {
+      this.env = env;
+    }
+    this.subRoots.add(node);
+    return {
+      node,
+      mount: (target: HTMLElement | ShadowRoot, options?: MountOptions) => {
+        App.validateTarget(target);
+        if (this.dev) {
+          validateProps(Root, props, { __owl__: { app: this } });
+        }
+        const prom = this.mountNode(node, target, options);
+        return prom;
+      },
+      destroy: () => {
+        this.subRoots.delete(node);
+        node.destroy();
+        this.scheduler.processTasks();
+      },
+    };
   }
 
   makeNode(Component: ComponentConstructor, props: any): ComponentNode {
@@ -134,6 +176,9 @@ export class App<
 
   destroy() {
     if (this.root) {
+      for (let subroot of this.subRoots) {
+        subroot.destroy();
+      }
       this.root.destroy();
       this.scheduler.processTasks();
     }

src/runtime/lifecycle_hooks.ts

@@ -3,42 +3,50 @@ import { nodeErrorHandlers } from "./error_handling";
 import { OwlError } from "../common/owl_error";
 
 const TIMEOUT = Symbol("timeout");
+const HOOK_TIMEOUT: { [key: string]: number } = {
+  onWillStart: 3000,
+  onWillUpdateProps: 3000,
+};
 function wrapError(fn: (...args: any[]) => any, hookName: string) {
-  const error = new OwlError(`The following error occurred in ${hookName}: `) as Error & {
+  const error = new OwlError() as Error & {
     cause: any;
   };
-  const timeoutError = new OwlError(`${hookName}'s promise hasn't resolved after 3 seconds`);
+  const timeoutError = new OwlError();
   const node = getCurrent();
   return (...args: any[]) => {
     const onError = (cause: any) => {
       error.cause = cause;
-      if (cause instanceof Error) {
-        error.message += `"${cause.message}"`;
-      } else {
-        error.message = `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
-      }
+      error.message =
+        cause instanceof Error
+          ? `The following error occurred in ${hookName}: "${cause.message}"`
+          : `Something that is not an Error was thrown in ${hookName} (see this Error's "cause" property)`;
       throw error;
     };
+    let result;
     try {
-      const result = fn(...args);
-      if (result instanceof Promise) {
-        if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
-          const fiber = node.fiber;
-          Promise.race([
-            result.catch(() => {}),
-            new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
-          ]).then((res) => {
-            if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
-              console.warn(timeoutError);
-            }
-          });
-        }
-        return result.catch(onError);
-      }
-      return result;
+      result = fn(...args);
     } catch (cause) {
       onError(cause);
     }
+    if (!(result instanceof Promise)) {
+      return result;
+    }
+    const timeout = HOOK_TIMEOUT[hookName];
+    if (timeout) {
+      const fiber = node.fiber;
+      Promise.race([
+        result.catch(() => {}),
+        new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), timeout)),
+      ]).then((res) => {
+        if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
+          timeoutError.message = `${hookName}'s promise hasn't resolved after ${
+            timeout / 1000
+          } seconds`;
+          console.log(timeoutError);
+        }
+      });
+    }
+    return result.catch(onError);
   };
 }
 

src/version.ts

@@ -1,2 +1,2 @@
 // do not modify manually. This file is generated by the release script.
-export const version = "2.3.0";
+export const version = "2.4.0";

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

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`subroot by default, env is the same in sub root 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>main app</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot by default, env is the same in sub root 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>sub root</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot can mount subroot 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>main app</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot can mount subroot 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>sub root</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot can mount subroot inside own dom 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>main app</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot can mount subroot inside own dom 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>sub root</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot env can be specified for sub roots 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>main app</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot env can be specified for sub roots 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>sub root</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot subcomponents can be destroyed, and it properly cleanup the subroots 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>main app</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
+exports[`subroot subcomponents can be destroyed, and it properly cleanup the subroots 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>sub root</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;

tests/app/sub_root.test.ts

@@ -0,0 +1,115 @@
+import { App, Component, xml } from "../../src";
+import { status } from "../../src/runtime/status";
+import { makeTestFixture, snapshotEverything } from "../helpers";
+
+let fixture: HTMLElement;
+
+snapshotEverything();
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+class SomeComponent extends Component {
+  static template = xml`<div>main app</div>`;
+}
+
+class SubComponent extends Component {
+  static template = xml`<div>sub root</div>`;
+}
+
+describe("subroot", () => {
+  test("can mount subroot", async () => {
+    const app = new App(SomeComponent);
+    const comp = await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>main app</div>");
+    const subRoot = app.createRoot(SubComponent);
+    const subcomp = await subRoot.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>main app</div><div>sub root</div>");
+
+    app.destroy();
+    expect(fixture.innerHTML).toBe("");
+    expect(status(comp)).toBe("destroyed");
+    expect(status(subcomp)).toBe("destroyed");
+  });
+
+  test("can mount subroot inside own dom", async () => {
+    const app = new App(SomeComponent);
+    const comp = await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>main app</div>");
+    const subRoot = app.createRoot(SubComponent);
+    const subcomp = await subRoot.mount(fixture.querySelector("div")!);
+    expect(fixture.innerHTML).toBe("<div>main app<div>sub root</div></div>");
+
+    app.destroy();
+    expect(fixture.innerHTML).toBe("");
+    expect(status(comp)).toBe("destroyed");
+    expect(status(subcomp)).toBe("destroyed");
+  });
+
+  test("by default, env is the same in sub root", async () => {
+    let env, subenv;
+    class SC extends SomeComponent {
+      setup() {
+        env = this.env;
+      }
+    }
+    class Sub extends SubComponent {
+      setup() {
+        subenv = this.env;
+      }
+    }
+
+    const app = new App(SC);
+    await app.mount(fixture);
+    const subRoot = app.createRoot(Sub);
+    await subRoot.mount(fixture);
+
+    expect(env).toBeDefined();
+    expect(subenv).toBeDefined();
+    expect(env).toBe(subenv);
+  });
+
+  test("env can be specified for sub roots", async () => {
+    const env1 = { env1: true };
+    const env2 = {};
+    let someComponentEnv: any, subComponentEnv: any;
+    class SC extends SomeComponent {
+      setup() {
+        someComponentEnv = this.env;
+      }
+    }
+    class Sub extends SubComponent {
+      setup() {
+        subComponentEnv = this.env;
+      }
+    }
+
+    const app = new App(SC, { env: env1 });
+    await app.mount(fixture);
+    const subRoot = app.createRoot(Sub, { env: env2 });
+    await subRoot.mount(fixture);
+
+    // because env is different in app => it is given a sub object, frozen and all
+    // not sure it is a good idea, but it's the way owl 2 works. maybe we should
+    // avoid doing anything with the main env and let user code do it if they
+    // want. in that case, we can change the test here to assert that they are equal
+    expect(someComponentEnv).not.toBe(env1);
+    expect(someComponentEnv!.env1).toBe(true);
+    expect(subComponentEnv).toBe(env2);
+  });
+
+  test("subcomponents can be destroyed, and it properly cleanup the subroots", async () => {
+    const app = new App(SomeComponent);
+    const comp = await app.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>main app</div>");
+    const root = app.createRoot(SubComponent);
+    const subcomp = await root.mount(fixture.querySelector("div")!);
+    expect(fixture.innerHTML).toBe("<div>main app<div>sub root</div></div>");
+
+    root.destroy();
+    expect(fixture.innerHTML).toBe("<div>main app</div>");
+    expect(status(comp)).not.toBe("destroyed");
+    expect(status(subcomp)).toBe("destroyed");
+  });
+});

tests/components/__snapshots__/basics.test.ts.snap

@@ -97,6 +97,19 @@ exports[`basics a component cannot be mounted in a detached node (even if node i
 }"
 `;
 
+exports[`basics a component cannot be mounted in a detached node 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div/>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics a component inside a component 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -261,6 +274,19 @@ exports[`basics can mount a simple component with props 1`] = `
 }"
 `;
 
+exports[`basics cannot mount on a documentFragment 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div>content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics child can be updated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -1002,6 +1028,19 @@ exports[`basics three level of components with collapsing root nodes 3`] = `
 }"
 `;
 
+exports[`basics throws if mounting on target=null 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<span>simple vnode</span>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return block1();
+  }
+}"
+`;
+
 exports[`basics two child components 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/__snapshots__/lifecycle.test.ts.snap

@@ -683,7 +683,7 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 }"
 `;
 
-exports[`lifecycle hooks timeout in onWillStart doesn't emit a warning if app is destroyed 1`] = `
+exports[`lifecycle hooks timeout in onWillStart doesn't emit a console log if app is destroyed 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -696,7 +696,7 @@ exports[`lifecycle hooks timeout in onWillStart doesn't emit a warning if app is
 }"
 `;
 
-exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
+exports[`lifecycle hooks timeout in onWillStart emits a console log 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -709,7 +709,7 @@ exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
+exports[`lifecycle hooks timeout in onWillUpdateProps emits a console log 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
@@ -723,7 +723,7 @@ exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 1`] = `
 }"
 `;
 
-exports[`lifecycle hooks timeout in onWillUpdateProps emits a warning 2`] = `
+exports[`lifecycle hooks timeout in onWillUpdateProps emits a console log 2`] = `
 "function anonymous(app, bdom, helpers
 ) {
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;

tests/components/__snapshots__/props_validation.test.ts.snap

@@ -924,6 +924,20 @@ exports[`props validation props: list of strings 1`] = `
 }"
 `;
 
+exports[`props validation validate props for root component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div><block-text-0/></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let txt1 = ctx['message'];
+    return block1([txt1]);
+  }
+}"
+`;
+
 exports[`props validation validate simple types 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/lifecycle.test.ts

@@ -112,10 +112,10 @@ describe("lifecycle hooks", () => {
     await mount(Test, fixture);
   });
 
-  test("timeout in onWillStart emits a warning", async () => {
-    const { warn } = console;
-    let warnArgs: any[];
-    console.warn = jest.fn((...args) => (warnArgs = args));
+  test("timeout in onWillStart emits a console log", async () => {
+    const { log } = console;
+    let logArgs: any[];
+    console.log = jest.fn((...args) => (logArgs = args));
     const { setTimeout } = window;
     let timeoutCbs: any = {};
     let timeoutId = 0;
@@ -138,17 +138,17 @@ describe("lifecycle hooks", () => {
       }
       await nextMicroTick();
       await nextMicroTick();
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(warnArgs![0]!.message).toBe("onWillStart's promise hasn't resolved after 3 seconds");
+      expect(console.log).toHaveBeenCalledTimes(1);
+      expect(logArgs![0]!.message).toBe("onWillStart's promise hasn't resolved after 3 seconds");
     } finally {
-      console.warn = warn;
+      console.log = log;
       window.setTimeout = setTimeout;
     }
   });
 
-  test("timeout in onWillStart doesn't emit a warning if app is destroyed", async () => {
-    const { warn } = console;
-    console.warn = jest.fn();
+  test("timeout in onWillStart doesn't emit a console log if app is destroyed", async () => {
+    const { log } = console;
+    console.log = jest.fn();
     const { setTimeout } = window;
     let timeoutCbs: any = {};
     let timeoutId = 0;
@@ -172,14 +172,14 @@ describe("lifecycle hooks", () => {
       }
       await nextMicroTick();
       await nextMicroTick();
-      expect(console.warn).toHaveBeenCalledTimes(0);
+      expect(console.log).toHaveBeenCalledTimes(0);
     } finally {
-      console.warn = warn;
+      console.log = log;
       window.setTimeout = setTimeout;
     }
   });
 
-  test("timeout in onWillUpdateProps emits a warning", async () => {
+  test("timeout in onWillUpdateProps emits a console log", async () => {
     class Child extends Component {
       static template = xml``;
       setup() {
@@ -193,9 +193,9 @@ describe("lifecycle hooks", () => {
     }
     const parent = await mount(Parent, fixture, { test: true });
 
-    const { warn } = console;
-    let warnArgs: any[];
-    console.warn = jest.fn((...args) => (warnArgs = args));
+    const { log } = console;
+    let logArgs: any[];
+    console.log = jest.fn((...args) => (logArgs = args));
     const { setTimeout } = window;
     let timeoutCbs: any = {};
     let timeoutId = 0;
@@ -218,12 +218,12 @@ describe("lifecycle hooks", () => {
         delete timeoutCbs[id];
       }
       await tick;
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(warnArgs![0]!.message).toBe(
+      expect(console.log).toHaveBeenCalledTimes(1);
+      expect(logArgs![0]!.message).toBe(
         "onWillUpdateProps's promise hasn't resolved after 3 seconds"
       );
     } finally {
-      console.warn = warn;
+      console.log = log;
       window.setTimeout = setTimeout;
     }
   });

tools/devtools/manifest-chrome.json

@@ -14,7 +14,7 @@
     "default_popup": "popup_app/popup.html"
   },
   "permissions": ["scripting", "storage"],
-  "host_permissions": ["http://*/*", "https://*/*"],
+  "host_permissions": ["http://*/*", "https://*/*", "file://*"],
   "content_security_policy": {
     "script-src": "self",
     "object-src": "self"