[IMP] devtools: introduce basic testing infrastructure

Since we now omit some observed objects when listing subscriptions, the
index of the subscription is no longer the index of the raw
subscription. This causes issue with the resolution of object paths when
they are inside a subscription. This commit fixes that by adding the
index to the raw subscription.

We also need to adapt the code that traverses the old tree, since the
index of the subscription in the component is no longer the same as the
index of the subscription "child" in the object tree.

.gitignore

@@ -1,5 +1,7 @@
 /node_modules
 /dist
+# compiled devtools files
+/tools/devtools/assets/*.js
 
 npm-debug.log
 

doc/reference/slots.md

@@ -175,7 +175,7 @@ class Notebook extends Component {
     <div class="notebook">
       <div class="tabs">
         <t t-foreach="tabNames" t-as="tab" t-key="tab_index">
-          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab">
+          <span t-att-class="{active:tab_index === activeTab}" t-on-click="() => state.activeTab=tab_index">
             <t t-esc="props.slots[tab].title"/>
           </span>
         </t>

docs/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="assets/milligram.css">
   <link rel="stylesheet" href="assets/highlight.tomorrow.css">
   <link rel="stylesheet" href="assets/main.css">
-  <script src="./owl.js"></script>
+  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
 </head>
 <body>
   <header class="container">
@@ -68,7 +68,6 @@
     <p><a href=".">OWL</a> is licensed under LGPLv3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
   </footer>
   <script src="assets/highlight.pack.js"></script>
-  <script type="importmap">{ "imports": { "@odoo/owl": "./owl.js" } }</script>
   <script type="module" src="display_code.js"></script>
   <script type="module" src="counter.js"></script>
 </body>

docs/owl.js

@@ -3221,7 +3221,7 @@ class TemplateSet {
     }
     callTemplate(owner, subTemplate, ctx, parent, key) {
         const template = this.getTemplate(subTemplate);
-        return toggler(subTemplate, template.call(owner, ctx, parent, key));
+        return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
     }
 }
 // -----------------------------------------------------------------------------
@@ -5506,7 +5506,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.1.1";
+const version = "2.1.2";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5920,6 +5920,6 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
 export { App, Component, EventBus, OwlError, __info__, 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 = '2023-04-24T14:29:32.376Z';
-__info__.hash = 'f9d810a';
+__info__.date = '2023-04-29T07:45:54.333Z';
+__info__.hash = 'aabb755';
 __info__.url = 'https://github.com/odoo/owl';

jest.config.json

@@ -0,0 +1,22 @@
+{
+    "testEnvironment": "jsdom",
+  "roots": [
+    "<rootDir>/tests"
+  ],
+  "setupFiles": [
+    "./tests/mocks/mockEventTarget.js"
+  ],
+  "transform": {
+    "^.+\\.ts?$": "ts-jest"
+  },
+  "verbose": false,
+  "testRegex": "(/tests/.*(test|spec))\\.ts?$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ]
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1048,6 +1048,31 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/chrome": {
+      "version": "0.0.114",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.114.tgz",
+      "integrity": "sha512-i7qRr74IrxHtbnrZSKUuP5Uvd5EOKwlwJq/yp7+yTPihOXnPhNQO4Z5bqb1XTnrjdbUKEJicaVVbhcgtRijmLA==",
+      "dev": true,
+      "requires": {
+        "@types/filesystem": "*",
+        "@types/har-format": "*"
+      }
+    },
+    "@types/filesystem": {
+      "version": "0.0.32",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.32.tgz",
+      "integrity": "sha512-Yuf4jR5YYMR2DVgwuCiP11s0xuVRyPKmz8vo6HBY3CGdeMj8af93CFZX+T82+VD1+UqHOxTq31lO7MI7lepBtQ==",
+      "dev": true,
+      "requires": {
+        "@types/filewriter": "*"
+      }
+    },
+    "@types/filewriter": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.29.tgz",
+      "integrity": "sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==",
+      "dev": true
+    },
     "@types/fs-extra": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz",
@@ -1076,6 +1101,12 @@
         "@types/node": "*"
       }
     },
+    "@types/har-format": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.11.tgz",
+      "integrity": "sha512-T232/TneofqK30AD1LRrrf8KnjLvzrjWDp7eWST5KoiSzrBfRsLrWDPk4STQPW4NZG6v2MltnduBVmakbZOBIQ==",
+      "dev": true
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -3338,6 +3369,15 @@
         }
       }
     },
+    "jest-chrome": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/jest-chrome/-/jest-chrome-0.8.0.tgz",
+      "integrity": "sha512-39RR1GT9nI4e4jsuH1vIf4l5ApxxkcstjGJr+GsOURL8f4Db0UlbRnsZaM+ZRniaGtokqklUH5VFKGZZ6YztUg==",
+      "dev": true,
+      "requires": {
+        "@types/chrome": "^0.0.114"
+      }
+    },
     "jest-circus": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-27.5.1.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "module": "dist/owl.es.js",
@@ -21,15 +21,19 @@
     "dev:devtools-firefox": "npm run build:devtools -- --config-browser=firefox",
     "build:devtools-chrome": "npm run dev:devtools-chrome -- --config-env=production",
     "build:devtools-firefox": "npm run dev:devtools-firefox -- --config-env=production",
-    "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
-    "test:watch": "jest --watch",
+    "test-owl": "jest",
+    "test-owl:debug": "node --inspect-brk node_modules/.bin/jest --runInBand --watch --testTimeout=5000000",
+    "test-owl:watch": "jest --watch",
+    "test-devtools": "npm run build:devtools-chrome && jest --config=tools/devtools/tests/jest.config.json",
+    "test-devtools:debug": "npm run build:devtools-chrome && node --inspect-brk node_modules/.bin/jest --config=tools/devtools/tests/jest.config.json --runInBand --watch --testTimeout=5000000",
+    "test-devtools:watch": "jest --config=tools/devtools/tests/jest.config.json --watch",
+    "test": "npm run test-owl && npm run test-devtools",
     "playground:serve": "python3 tools/playground_server.py || python tools/playground_server.py",
     "playground": "npm run build && npm run playground:serve",
     "preplayground:watch": "npm run build",
     "playground:watch": "npm-run-all  --parallel playground:serve \"build:* -- --watch\"",
     "prettier": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --write",
-    "check-formatting": "prettier {src/*.ts,src/**/*.ts,tests/*.ts,tests/**/*.ts,doc/*.md,doc/**/*.md,tools/devtools/**/*.js} --check",
+    "check-formatting": "npm run prettier -- --check",
     "lint": "eslint src/**/*.ts tests/**/*.ts",
     "release": "node tools/release.js",
     "compile_templates": "node tools/compile_xml.js"
@@ -55,13 +59,13 @@
     "git-rev-sync": "^3.0.2",
     "github-api": "^3.3.0",
     "jest": "^27.1.0",
+    "jest-chrome": "^0.8.0",
     "jest-diff": "^27.3.1",
     "jest-environment-jsdom": "^27.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.4.1",
     "rollup": "^2.56.3",
     "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-execute": "^1.1.1",
     "rollup-plugin-string": "^3.0.0",
@@ -71,29 +75,6 @@
     "ts-jest": "^27.0.5",
     "typescript": "4.5.2"
   },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "roots": [
-      "<rootDir>/src",
-      "<rootDir>/tests"
-    ],
-    "setupFiles": [
-      "./tests/mocks/mockEventTarget.js"
-    ],
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    },
-    "verbose": false,
-    "testRegex": "(/tests/.*(test|spec))\\.ts?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  },
   "prettier": {
     "printWidth": 100,
     "endOfLine": "auto"

src/compiler/code_generator.ts

@@ -447,6 +447,11 @@ export class CodeGenerator {
       .join("");
   }
 
+  translate(str: string): string {
+    const match = translationRE.exec(str) as any;
+    return match[1] + this.translateFn(match[2]) + match[3];
+  }
+
   /**
    * @returns the newly created block name, if any
    */
@@ -527,8 +532,7 @@ export class CodeGenerator {
 
     let value = ast.value;
     if (value && ctx.translate !== false) {
-      const match = translationRE.exec(value) as any;
-      value = match[1] + this.translateFn(match[2]) + match[3];
+      value = this.translate(value);
     }
     if (!ctx.inPreTag) {
       value = value.replace(whitespaceRE, " ");
@@ -1095,10 +1099,11 @@ export class CodeGenerator {
     } else {
       let value: string;
       if (ast.defaultValue) {
+        const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
         if (ast.value) {
-          value = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
+          value = `withDefault(${expr}, \`${defaultValue}\`)`;
         } else {
-          value = `\`${ast.defaultValue}\``;
+          value = `\`${defaultValue}\``;
         }
       } else {
         value = expr;

src/compiler/parser.ts

@@ -336,10 +336,10 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
 
   for (let attr of nodeAttrsNames) {
     const value = node.getAttribute(attr)!;
-    if (attr.startsWith("t-on")) {
-      if (attr === "t-on") {
-        throw new OwlError("Missing event name with t-on directive");
-      }
+    if (attr === "t-on" || attr === "t-on-") {
+      throw new OwlError("Missing event name with t-on directive");
+    }
+    if (attr.startsWith("t-on-")) {
       on = on || {};
       on[attr.slice(5)] = value;
     } else if (attr.startsWith("t-model")) {

src/runtime/app.ts

@@ -7,6 +7,7 @@ import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
+import { toRaw, reactive } from "./reactivity";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -39,6 +40,8 @@ declare global {
       apps: Set<App>;
       Fiber: typeof Fiber;
       RootFiber: typeof RootFiber;
+      toRaw: typeof toRaw;
+      reactive: typeof reactive;
     };
   }
 }
@@ -47,6 +50,8 @@ window.__OWL_DEVTOOLS__ ||= {
   apps: new Set<App>(),
   Fiber: Fiber,
   RootFiber: RootFiber,
+  toRaw: toRaw,
+  reactive: reactive,
 };
 
 export class App<

src/runtime/blockdom/attributes.ts

@@ -36,10 +36,18 @@ export function createAttrUpdater(attr: string): Setter<HTMLElement> {
 
 export function attrsSetter(this: HTMLElement, attrs: any) {
   if (isArray(attrs)) {
-    setAttribute.call(this, attrs[0], attrs[1]);
+    if (attrs[0] === "class") {
+      setClass.call(this, attrs[1]);
+    } else {
+      setAttribute.call(this, attrs[0], attrs[1]);
+    }
   } else {
     for (let k in attrs) {
-      setAttribute.call(this, k, attrs[k]);
+      if (k === "class") {
+        setClass.call(this, attrs[k]);
+      } else {
+        setAttribute.call(this, k, attrs[k]);
+      }
     }
   }
 }
@@ -52,7 +60,11 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
       if (val === oldAttrs[1]) {
         return;
       }
-      setAttribute.call(this, name, val);
+      if (name === "class") {
+        updateClass.call(this, val, oldAttrs[1]);
+      } else {
+        setAttribute.call(this, name, val);
+      }
     } else {
       removeAttribute.call(this, oldAttrs[0]);
       setAttribute.call(this, name, val);
@@ -60,13 +72,21 @@ export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
   } else {
     for (let k in oldAttrs) {
       if (!(k in attrs)) {
-        removeAttribute.call(this, k);
+        if (k === "class") {
+          updateClass.call(this, "", oldAttrs[k]);
+        } else {
+          removeAttribute.call(this, k);
+        }
       }
     }
     for (let k in attrs) {
       const val = attrs[k];
       if (val !== oldAttrs[k]) {
-        setAttribute.call(this, k, val);
+        if (k === "class") {
+          updateClass.call(this, val, oldAttrs[k]);
+        } else {
+          setAttribute.call(this, k, val);
+        }
       }
     }
   }

src/runtime/hooks.ts

@@ -59,28 +59,35 @@ export function useChildSubEnv(envExtension: Env) {
 // useEffect
 // -----------------------------------------------------------------------------
 
+type EffectDeps<T extends any[]> = T | (T extends [...infer H, never] ? EffectDeps<H> : never);
+
 /**
- * @param {...any} dependencies the dependencies computed by computeDependencies
+ * @template T
+ * @param {...T} dependencies the dependencies computed by computeDependencies
  * @returns {void|(()=>void)} a cleanup function that reverses the side
  *      effects of the effect callback.
  */
-type Effect = (...dependencies: any[]) => void | (() => void);
+type Effect<T extends [...T]> = (...dependencies: EffectDeps<T>) => void | (() => void);
 
 /**
  * This hook will run a callback when a component is mounted and patched, and
  * will run a cleanup function before patching and before unmounting the
  * the component.
  *
- * @param {Effect} effect the effect to run on component mount and/or patch
- * @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
+ * @template T
+ * @param {Effect<T>} effect the effect to run on component mount and/or patch
+ * @param {()=>T} [computeDependencies=()=>[NaN]] a callback to compute
  *      dependencies that will decide if the effect needs to be cleaned up and
  *      run again. If the dependencies did not change, the effect will not run
  *      again. The default value returns an array containing only NaN because
  *      NaN !== NaN, which will cause the effect to rerun on every patch.
  */
-export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
+export function useEffect<T extends [...T]>(
+  effect: Effect<T>,
+  computeDependencies: () => T = () => [NaN] as never
+) {
   let cleanup: (() => void) | void;
-  let dependencies: any[];
+  let dependencies: T;
   onMounted(() => {
     dependencies = computeDependencies();
     cleanup = effect(...dependencies);

src/runtime/template_set.ts

@@ -125,7 +125,7 @@ export class TemplateSet {
 
   callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
     const template = this.getTemplate(subTemplate);
-    return toggler(subTemplate, template.call(owner, ctx, parent, key));
+    return toggler(subTemplate, template.call(owner, ctx, parent, key + subTemplate));
   }
 }
 

src/version.ts

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

tests/blockdom/block_attributes.test.ts

@@ -145,3 +145,34 @@ test("class attribute (with a preexisting value", async () => {
   patch(tree, block([""]));
   expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
 });
+
+test("block-class attributes with preexisting class attribute", async () => {
+  const block = createBlock('<div block-attributes="0" class="owl"></div>');
+  const tree = block([{ class: "eagle" }]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe(`<div class="owl eagle"></div>`);
+
+  patch(tree, block([{ class: "falcon" }]));
+  expect(fixture.innerHTML).toBe(`<div class="owl falcon"></div>`);
+
+  patch(tree, block([{}]));
+  expect(fixture.innerHTML).toBe(`<div class="owl"></div>`);
+});
+
+test("block-class attributes (array syntax) with preexisting class attribute", async () => {
+  const block = createBlock('<div block-attributes="0" class="owl"></div>');
+  const tree = block([["class", "eagle"]]);
+
+  mount(tree, fixture);
+  expect(fixture.innerHTML).toBe(`<div class="owl eagle"></div>`);
+
+  patch(tree, block([["class", "falcon"]]));
+  expect(fixture.innerHTML).toBe(`<div class="owl falcon"></div>`);
+
+  patch(tree, block([["class", ""]]));
+  expect(fixture.innerHTML).toBe(`<div class="owl"></div>`);
+
+  patch(tree, block([["class", "buzzard"]]));
+  expect(fixture.innerHTML).toBe(`<div class="owl buzzard"></div>`);
+});

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

@@ -707,6 +707,123 @@ exports[`attributes updating classes (with obj notation) 1`] = `
 }"
 `;
 
+exports[`attributes various combinations of class, t-att-class, and t-att 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\" class=\\"c\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {class:'a'};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\" block-attribute-1=\\"class\\" class=\\"c\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {class:'a'};
+    let attr2 = {'b':true};
+    return block1([attr1, attr2]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\" class=\\"c\\" block-attribute-1=\\"class\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {class:'a'};
+    let attr2 = {'b':true};
+    return block1([attr1, attr2]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"c\\" block-attributes=\\"0\\" block-attribute-1=\\"class\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {class:'a'};
+    let attr2 = {'b':true};
+    return block1([attr1, attr2]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 5`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"c\\" block-attribute-0=\\"class\\" block-attributes=\\"1\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'b':true};
+    let attr2 = {class:'a'};
+    return block1([attr1, attr2]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 6`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"c\\" block-attribute-0=\\"class\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {'b':true};
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 7`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div class=\\"c\\" block-attribute-0=\\"class\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = ('b');
+    return block1([attr1]);
+  }
+}"
+`;
+
+exports[`attributes various combinations of class, t-att-class, and t-att 8`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  let block1 = createBlock(\`<div block-attributes=\\"0\\" block-attribute-1=\\"class\\">content</div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    let attr1 = {class:'a'};
+    let attr2 = {'b':true};
+    return block1([attr1, attr2]);
+  }
+}"
+`;
+
 exports[`attributes various escapes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -1,5 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`translation support body of t-sets are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", \`translated\`);
+    return text(ctx['label']);
+  }
+}"
+`;
+
+exports[`translation support body of t-sets inside translation=off are not translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", \`untranslated\`);
+    return text(ctx['label']);
+  }
+}"
+`;
+
+exports[`translation support body of t-sets with html content are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  
+  let block1 = createBlock(\`<div>translated</div>\`);
+  
+  function value1(ctx, node, key = \\"\\") {
+    return block1();
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
+    return safeOutput(ctx['label']);
+  }
+}"
+`;
+
+exports[`translation support body of t-sets with text and html content are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, LazyValue, safeOutput } = helpers;
+  
+  let block3 = createBlock(\`<div>translated</div>\`);
+  
+  function value1(ctx, node, key = \\"\\") {
+    const b2 = text(\` translated \`);
+    const b3 = block3();
+    return multi([b2, b3]);
+  }
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    ctx[\`label\`] = new LazyValue(value1, ctx, this, node, key);
+    return safeOutput(ctx['label']);
+  }
+}"
+`;
+
 exports[`translation support can set and remove translatable attributes 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -52,6 +126,21 @@ exports[`translation support some attributes are translated 1`] = `
 }"
 `;
 
+exports[`translation support t-set and falsy t-value: t-body are translated 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { isBoundary, withDefault, setContextValue } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    ctx[isBoundary] = 1
+    setContextValue(ctx, \\"label\\", withDefault(false, \`translated\`));
+    return text(ctx['label']);
+  }
+}"
+`;
+
 exports[`translation support translation is done on the trimmed text, with extra spaces readded after 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/compiler/attributes.test.ts

@@ -371,4 +371,33 @@ describe("attributes", () => {
     // not sure about this. maybe we want to remove the attribute?
     expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
   });
+
+  test("various combinations of class, t-att-class, and t-att", () => {
+    const template1 = `<div t-att="{ class: 'a' }" class="c">content</div>`;
+    expect(renderToString(template1)).toBe('<div class="c a">content</div>');
+
+    const template2 = `<div t-att="{ class: 'a' }" t-att-class="{'b': true}" class="c">content</div>`;
+    expect(renderToString(template2)).toBe('<div class="c a b">content</div>');
+
+    const template3 = `<div t-att="{ class: 'a' }" class="c" t-att-class="{'b': true}">content</div>`;
+    expect(renderToString(template3)).toBe('<div class="c a b">content</div>');
+
+    const template4 = `<div class="c" t-att="{ class: 'a' }" t-att-class="{'b': true}">content</div>`;
+    expect(renderToString(template4)).toBe('<div class="c a b">content</div>');
+
+    const template5 = `<div class="c" t-att-class="{'b': true}" t-att="{ class: 'a' }">content</div>`;
+    expect(renderToString(template5)).toBe('<div class="c b a">content</div>');
+
+    const template6 = `<div class="c" t-att-class="{'b': true}">content</div>`;
+    expect(renderToString(template6)).toBe('<div class="c b">content</div>');
+
+    const template7 = `<div class="c" t-attf-class="{{'b'}}">content</div>`;
+    expect(renderToString(template7)).toBe('<div class="c b">content</div>');
+
+    const template8 = `<div t-att="{ class: 'a' }" class="c" t-att-class="{'b': true}">content</div>`;
+    expect(renderToString(template8)).toBe('<div class="c a b">content</div>');
+
+    const template9 = `<div t-att="{ class: 'a' }" t-att-class="{'b': true}">content</div>`;
+    expect(renderToString(template9)).toBe('<div class="a b">content</div>');
+  });
 });

tests/compiler/parser.test.ts

@@ -1147,6 +1147,24 @@ describe("qweb parser", () => {
     });
   });
 
+  test("t-onclick without dash", async () => {
+    expect(() => parse(`<button t-onclick="add">Click</button>`)).toThrowError(
+      "Unknown QWeb directive: 't-onclick'"
+    );
+  });
+
+  test("t-on without event", async () => {
+    expect(() => parse(`<button t-on="add">Click</button>`)).toThrowError(
+      "Missing event name with t-on directive"
+    );
+  });
+
+  test("t-on- without event", async () => {
+    expect(() => parse(`<button t-on-="add">Click</button>`)).toThrowError(
+      "Missing event name with t-on directive"
+    );
+  });
+
   // ---------------------------------------------------------------------------
   // t-model
   // ---------------------------------------------------------------------------
@@ -1275,6 +1293,12 @@ describe("qweb parser", () => {
     });
   });
 
+  test("component with event handler", async () => {
+    expect(() => parse(`<MyComponent t-onclick="someMethod"/>`)).toThrowError(
+      "unsupported directive on Component: t-onclick"
+    );
+  });
+
   test("component with t-ref", async () => {
     expect(() => parse(`<MyComponent t-ref="something"/>`)).toThrow(
       "t-ref is no longer supported on components. Consider exposing only the public part of the component's API through a callback prop."

tests/compiler/translation.test.ts

@@ -100,4 +100,74 @@ describe("translation support", () => {
     expect(translateFn).toHaveBeenCalledWith("some  word");
     expect(fixture.innerHTML).toBe("<div>un mot</div>");
   });
+
+  test("body of t-sets are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label">untranslated</t>
+        <t t-esc="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("translated");
+  });
+
+  test("body of t-sets inside translation=off are not translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-translation="off">
+          <t t-set="label">untranslated</t>
+          <t t-esc="label"/>
+        </t>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("untranslated");
+  });
+
+  test("body of t-sets with html content are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label"><div>untranslated</div></t>
+        <t t-out="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("<div>translated</div>");
+  });
+
+  test("body of t-sets with text and html content are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <t t-set="label">
+          some text
+          <div>untranslated</div>
+        </t>
+        <t t-out="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe(" translated <div>translated</div>");
+  });
+
+  test("t-set and falsy t-value: t-body are translated", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+          <t t-set="label" t-value="false">untranslated</t>
+          <t t-esc="label"/>`;
+    }
+
+    const translateFn = () => "translated";
+
+    await mount(SomeComponent, fixture, { translateFn });
+    expect(fixture.innerHTML).toBe("translated");
+  });
 });

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

@@ -42,6 +42,56 @@ exports[`t-call dynamic t-call 3`] = `
 }"
 `;
 
+exports[`t-call dynamic t-call with same sub component 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const call = app.callTemplate.bind(app);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const b2 = text(ctx['current'].template);
+    const template1 = (ctx['current'].template);
+    const b3 = call(this, template1, ctx, node, key + \`__1\`);
+    return multi([b2, b3]);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 2`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 3`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(\`child\`);
+  }
+}"
+`;
+
+exports[`t-call dynamic t-call with same sub component 4`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  const comp1 = app.createComponent(\`Child\`, true, false, false, []);
+  
+  return function template(ctx, node, key = \\"\\") {
+    return comp1({}, key + \`__1\`, node, this, null);
+  }
+}"
+`;
+
 exports[`t-call dynamic t-call: key is propagated 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/t_call.test.ts

@@ -398,4 +398,31 @@ describe("t-call", () => {
     });
     expect(fixture.innerHTML).toBe("");
   });
+
+  test("dynamic t-call with same sub component", async () => {
+    class Child extends Component {
+      static template = xml`child`;
+    }
+
+    class Root extends Component {
+      static template = xml`
+        <t t-esc="current.template"/>
+        <t t-call="{{current.template}}"/>`;
+      static components = { Child };
+      current = useState({ template: "A" });
+    }
+
+    const root = await mount(Root, fixture, {
+      templates: `
+        <templates>
+          <t t-name="A"><Child/></t>
+          <t t-name="B"><Child/></t>
+        </templates>`,
+    });
+    expect(fixture.innerHTML).toBe("Achild");
+
+    root.current.template = "B";
+    await nextTick();
+    expect(fixture.innerHTML).toBe("Bchild");
+  });
 });

tools/devtools/manifest-chrome.json

@@ -1,6 +1,6 @@
 {
   "name": "Owl devtools",
-  "version": "1.0",
+  "version": "1.1.1",
   "manifest_version": 3,
   "description": "Chrome devtools extension for Odoo Owl framework",
   "icons": {

tools/devtools/rollup.config.js

@@ -1,7 +1,6 @@
 import terser from "rollup-plugin-terser";
 import copy from "rollup-plugin-copy";
 import execute from "rollup-plugin-execute";
-import del from "rollup-plugin-delete";
 import { string } from "rollup-plugin-string";
 
 const isWindows = process.platform === "win32";
@@ -37,12 +36,12 @@ export default ({ "config-browser": browser, "config-env": env }) => {
     },
   ];
 
-  function generateRule(input, format = "esm") {
+  function generateRule(input, plugins = []) {
     return {
-      input: input,
+      input,
       output: [
         {
-          format: format,
+          format: "esm",
           file: input.replace("tools/devtools/src", "dist/devtools"),
         },
       ],
@@ -51,6 +50,7 @@ export default ({ "config-browser": browser, "config-env": env }) => {
           include: "**/page_scripts/owl_devtools_global_hook.js",
         }),
         isProduction && terser.terser(),
+        ...plugins,
       ],
     };
   }
@@ -58,7 +58,6 @@ export default ({ "config-browser": browser, "config-env": env }) => {
   commands[1] = isWindows
     ? "npm run compile_templates -- tools\\devtools\\src && move templates.js tools\\devtools\\assets\\templates.js"
     : "npm run compile_templates -- tools/devtools/src && mv templates.js tools/devtools/assets/templates.js";
-  const firstRule = generateRule("tools/devtools/src/page_scripts/owl_devtools_global_hook.js");
   if (isProduction) {
     commands[0] = isWindows
       ? "npm run build && copy dist\\owl.iife.js tools\\devtools\\assets\\owl.js && npm run build:compiler"
@@ -68,19 +67,16 @@ export default ({ "config-browser": browser, "config-env": env }) => {
       ? "copy dist\\owl.iife.js tools\\devtools\\assets\\owl.js"
       : "cp dist/owl.iife.js tools/devtools/assets/owl.js";
   }
-  firstRule.plugins.push(execute(commands, true));
-  const secondRule = generateRule("tools/devtools/src/content.js");
-  secondRule.plugins.push(copy({ targets: filesToMove }));
-  const lastRule = generateRule("tools/devtools/src/background.js");
-  lastRule.plugins.push(del({ targets: "tools/devtools/assets/*.js" }));
 
   return [
-    firstRule,
-    secondRule,
+    generateRule("tools/devtools/src/page_scripts/owl_devtools_global_hook.js", [
+      execute(commands, true),
+    ]),
+    generateRule("tools/devtools/src/content.js", [copy({ targets: filesToMove })]),
     generateRule("tools/devtools/src/devtools_app/devtools.js"),
     generateRule("tools/devtools/src/utils.js"),
     generateRule("tools/devtools/src/devtools_app/devtools_panel.js"),
     generateRule("tools/devtools/src/popup_app/popup.js"),
-    lastRule,
+    generateRule("tools/devtools/src/background.js"),
   ];
 };

tools/devtools/src/background.js

@@ -5,7 +5,7 @@ let owlStatus = 0;
 const browserInstance = IS_FIREFOX ? browser : chrome;
 
 // Used to keep track of the tabs where the owl devtools have been opened
-const activePanels = new Set();
+const activePanels = new Map();
 
 // Load the devtools global hook this way when running on manifest v3 chrome
 if (!IS_FIREFOX) {
@@ -75,8 +75,23 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
     return true;
   } else if (message.type === "owlStatus") {
     setOwlStatus(message.data);
-    // Dummy message to test if the extension context is still valid
+    // Refresh panel connection timeout
   } else if (message.type === "keepAlive") {
+    const panel = activePanels.get(message.id);
+    if (panel) {
+      clearTimeout(panel.expirationTimeout);
+      panel.expirationTimeout = setTimeout(() => {
+        activePanels.delete(message.id);
+        panel.port.disconnect();
+      }, 750);
+    } else {
+      const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort_" + message.id });
+      const expirationTimeout = setTimeout(() => {
+        activePanels.delete(message.id);
+        port.disconnect();
+      }, 750);
+      activePanels.set(message.id, { port: port, expirationTimeout: expirationTimeout });
+    }
     return;
     // Open the devtools documentation in a new tab
   } else if (message.type === "openDoc") {
@@ -87,10 +102,15 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
       }
     );
     return;
-    // Relay the received message to the devtools app
+    // Register a new port for the devtools panel
   } else if (message.type === "newDevtoolsPanel") {
-    const tab = await getActiveTabURL();
-    activePanels.add(tab);
+    const id = message.id;
+    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort_" + id });
+    const expirationTimeout = setTimeout(() => {
+      activePanels.delete(id);
+      port.disconnect();
+    }, 750);
+    activePanels.set(message.id, { port: port, expirationTimeout: expirationTimeout });
     // This is solely for firefox which doesnt allow access to the chrome.tabs api inside devtools
   } else if (message.type === "getActiveTabURL") {
     getActiveTabURL().then((tab) => {
@@ -98,15 +118,13 @@ browserInstance.runtime.onMessage.addListener(async (message, sender, sendRespon
     });
     return true;
   } else {
-    const tab = await getActiveTabURL();
-    if (!activePanels.has(tab)) {
-      return;
+    const destinationPanel = activePanels.get(sender.tab.id);
+    if (destinationPanel) {
+      destinationPanel.port.postMessage(
+        message.data
+          ? { type: message.type, data: message.data, origin: message.origin }
+          : { type: message.type, origin: message.origin }
+      );
     }
-    const port = browserInstance.runtime.connect({ name: "OwlDevtoolsPort" });
-    port.postMessage(
-      message.data
-        ? { type: message.type, data: message.data, origin: message.origin }
-        : { type: message.type, origin: message.origin }
-    );
   }
 });

tools/devtools/src/devtools_app/devtools.js

@@ -27,7 +27,6 @@ function createPanelsIfOwl() {
         "../../assets/icon128.png",
         IS_FIREFOX ? "devtools_panel.html" : "devtools_app/devtools_panel.html"
       );
-      browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel" });
     }
   );
 }

tools/devtools/src/devtools_app/devtools_panel.js

@@ -3,8 +3,10 @@
 import { DevtoolsWindow } from "./devtools_window/devtools_window";
 const { mount } = owl;
 import { templates } from "../../assets/templates.js";
+import { createStore } from "./store/store";
 
 for (const template in templates) {
   owl.App.registerTemplate(template, templates[template]);
 }
+createStore();
 mount(DevtoolsWindow, document.body, { dev: true });

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.js

@@ -1,11 +1,10 @@
 const { Component, useRef, useEffect } = owl;
 import { useStore } from "../../../store/store";
 import { ObjectTreeElement } from "./object_tree_element/object_tree_element";
-import { Subscriptions } from "./subscriptions/subscriptions";
 
 export class DetailsWindow extends Component {
   static template = "devtools.DetailsWindow";
-  static components = { ObjectTreeElement, Subscriptions };
+  static components = { ObjectTreeElement };
   setup() {
     this.store = useStore();
     this.contextMenu = useRef("contextmenu");

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml

@@ -53,7 +53,11 @@
           </div>
           <i title="Store observed states as global variable in the console" class="fa fa-bug utility-icon p-1" t-on-click.stop="() => this.store.logObjectInConsole([...this.store.activeComponent.path, {type: 'item', value: 'subscriptions'}])"></i>
         </div>
-        <Subscriptions t-if="store.activeComponent.subscriptions.toggled"/>
+        <div t-if="store.activeComponent.subscriptions.toggled" id="subscriptionsPanel">
+          <t t-foreach="store.activeComponent.subscriptions.children" t-as="subscription" t-key="subscription_index">
+            <ObjectTreeElement object="subscription.target"/>
+          </t>
+        </div>
       </div>
       <div t-if="store.activeComponent.instance.children.length > 0"  id="instance" class="details-panel ps-2 py-1">
         <div class="d-flex mb-2">
@@ -72,7 +76,7 @@
         </t>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.inspectComponent('source', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
         <t t-if="store.activeComponent.path.length !== 1">

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.js

@@ -41,23 +41,22 @@ export class ObjectTreeElement extends Component {
     return JSON.stringify(this.props.object.path);
   }
 
-  get objectName() {
-    return this.props.object.name;
+  get keyChanges() {
+    return this.props.object.keys?.includes("Symbol(Key changes)");
   }
 
-  get objectLineClass() {
+  classFor(object) {
     // Prototype items will be dyed down to appear less important
-    if (this.pathAsString.includes('{"type":"prototype",')) {
-      return { attenuate: true };
+    if (object.path.some((item) => item?.type === "prototype")) {
+      return "attenuate";
     }
     // Same for subscription items which are not present in the keys while the keys will be bold
-    if (this.props.object.objectType === "subscription" && this.props.object.depth > 0) {
-      if (this.props.keys.includes(this.props.object.name.toString())) {
-        return { "fw-bolder": true };
+    if (object.objectType === "subscription" && object.depth > 0) {
+      if (this.props.object.keys?.includes(object.name.toString())) {
+        return "fw-bolder";
       }
-      return { attenuate: true };
+      return "attenuate";
     }
-    return {};
   }
 
   get objectPadding() {

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
   <t t-name="devtools.ObjectTreeElement" owl="1">
     <div class="m-0 p-0 text-nowrap w-100 object-line"
-      t-att-class="objectLineClass" 
+      t-att-class="props.class"
       t-on-click.stop="() => this.store.toggleObjectTreeElementsDisplay(this.props.object)" 
       t-on-contextmenu.prevent="openMenu" 
     >
@@ -11,7 +11,7 @@
           t-att-class="{'fa-caret-right': !props.object.toggled, 'fa-caret-down': props.object.toggled}"
           t-attf-style="visibility: {{props.object.hasChildren ? '' : 'hidden'}};"
         />
-        <t t-esc="objectName"/>
+        <t t-esc="props.object.name"/>
         <t t-if="props.object.content.length > 0">: </t> 
         <t t-if="props.object.contentType == 'getter'">
           <span class="getter-content object-content" t-att-class="objectLineClass" t-on-click.stop="() => this.store.loadGetterContent(this.props.object)">
@@ -28,9 +28,10 @@
             </t>
           </span> 
         </t>
+        <span t-if="keyChanges" class="key-changes ms-1 badge p-1" title="Key additions/deletions are observed">+/-</span>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
       <ul class="my-1">
         <li t-on-click="() => this.store.logObjectInConsole(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Store as global variable</li>
         <t t-if='props.object.contentType == "function"'>
@@ -38,10 +39,9 @@
         </t>
       </ul>
     </div>
-    <t t-if="props.object.toggled">
-      <t t-foreach="props.object.children" t-as="child" t-key="child.name">
-        <ObjectTreeElement t-if="props.object.objectType === 'subscription'" object="child" keys="props.keys"/>
-        <ObjectTreeElement t-else="" object="child"/>
+    <t t-if="props.object.toggled" t-key="contextMenuId">
+      <t t-foreach="props.object.children" t-as="child" t-key="child_index">
+        <ObjectTreeElement object="child" class="this.classFor(child)"/>
       </t>
     </t>
   </t>

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/subscriptions/subscriptions.js

@@ -1,30 +0,0 @@
-const { Component } = owl;
-import { useStore } from "../../../../store/store";
-import { ObjectTreeElement } from "../object_tree_element/object_tree_element";
-
-export class Subscriptions extends Component {
-  static template = "devtools.Subscriptions";
-
-  static components = { ObjectTreeElement };
-
-  setup() {
-    this.store = useStore();
-  }
-
-  // Used to display the keys in a compact way
-  keysContent(index) {
-    const keys = this.store.activeComponent.subscriptions.children[index].keys;
-    let content = JSON.stringify(keys);
-    const maxLength = 50;
-    content = content.replace(/,/g, ", ");
-    if (content.length > maxLength) {
-      content = content.slice(0, content.lastIndexOf(",", maxLength - 5)) + ", ...]";
-    }
-    return content;
-  }
-
-  expandKeys(event, index) {
-    this.store.activeComponent.subscriptions.children[index].keysExpanded =
-      !this.store.activeComponent.subscriptions.children[index].keysExpanded;
-  }
-}

tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/subscriptions/subscriptions.xml

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
-  <t t-name="devtools.Subscriptions" owl="1">
-    <div id="subscriptionsPanel">
-      <t t-foreach="store.activeComponent.subscriptions.children" t-as="subscription" t-key="subscription_index">
-        <div class="my-2">
-          <div class="my-0 p-0 object-line" t-on-click.stop="(ev) => this.expandKeys(ev, subscription_index)">
-            <span class="ps-1 text-nowrap">
-              <i class="fa fa-caret-right ms-1" t-attf-style="cursor: pointer;{{subscription.keysExpanded ? 'transform: rotate(90deg);' : ''}}"></i>
-              keys: <span class="key-name"><t t-esc="this.keysContent(subscription_index)"/></span>
-            </span>
-          </div>
-          <div t-foreach="subscription.keys" t-as="key" t-key="key_index" class="my-0 p-0 object-line" t-attf-style="display: {{subscription.keysExpanded ? 'flex' : 'none'}}">
-            <div style="transform: translateX(calc(1.1rem))" class="key-content">
-              <i class="fa fa-caret-right mx-1" t-attf-style="cursor: pointer; visibility: hidden;"></i>
-              <t t-esc="key"/>
-            </div>
-          </div>
-          <ObjectTreeElement object="subscription.target" keys="subscription.keys"/>
-        </div>
-      </t>
-    </div>
-  </t>
-</templates>

tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.js

@@ -1,9 +1,11 @@
 /** @odoo-module **/
 
-import { isElementInCenterViewport, minimizeKey } from "../../../../utils";
+import { isElementInCenterViewport, minimizeKey, IS_FIREFOX } from "../../../../utils";
 import { useStore } from "../../../store/store";
 import { HighlightText } from "./highlight_text/highlight_text";
 
+const browserInstance = IS_FIREFOX ? browser : chrome;
+
 const { Component, useRef, useState, useEffect, onMounted } = owl;
 
 export class TreeElement extends Component {
@@ -105,4 +107,30 @@ export class TreeElement extends Component {
       this.store.selectComponent(this.props.component.path);
     }
   }
+
+  // Adds the component name to the components toggle blacklist if not already present
+  // Else, remove it from the blacklist
+  toggleComponentToBlacklist() {
+    if (this.store.settings.componentsToggleBlacklist.has(this.props.component.name)) {
+      if (!this.props.component.toggled) {
+        this.props.component.toggled = !this.props.component.toggled;
+      }
+      this.store.settings.componentsToggleBlacklist.delete(this.props.component.name);
+      browserInstance.storage.local.set({
+        owlDevtoolsComponentsToggleBlacklist: Array.from(
+          this.store.settings.componentsToggleBlacklist
+        ),
+      });
+    } else {
+      if (this.props.component.toggled) {
+        this.props.component.toggled = !this.props.component.toggled;
+      }
+      this.store.settings.componentsToggleBlacklist.add(this.props.component.name);
+      browserInstance.storage.local.set({
+        owlDevtoolsComponentsToggleBlacklist: Array.from(
+          this.store.settings.componentsToggleBlacklist
+        ),
+      });
+    }
+  }
 }

tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml

@@ -26,7 +26,7 @@
         <span t-if="props.component.depth">&gt;</span>
         <span class="version" t-else="">owl=<t t-esc="props.component.version"/></span>
       </div>
-      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
         <ul class="my-1">
           <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, true)" class="custom-menu-item py-1 px-4">Expand children</li>
           <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
@@ -43,6 +43,10 @@
           <t t-else="">
             <li t-on-click.stop="() => this.store.logObjectInConsole([...props.component.path])" class="custom-menu-item py-1 px-4">Store as global variable</li>
           </t>
+          <li t-on-click.stop="() => this.toggleComponentToBlacklist()" class="custom-menu-item py-1 px-4">
+            <t t-if="store.settings.componentsToggleBlacklist.has(props.component.name)">Don't fold component by default</t>
+            <t t-else="">Fold component by default</t>
+          </li>
         </ul>
       </div>
     </div>

tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
   <t t-name="devtools.Event" owl="1">
-    <div class="event-container">
+    <div class="event-container" t-att-class="{ 'event-last': props.event.isLast }">
       <div class="my-0 p-0 object-line" t-on-click.stop="toggleDisplay">
         <div class="ps-2 text-nowrap">
           <i class="fa px-1 pointer-icon caret"
@@ -43,7 +43,7 @@
           </span>
         </div>
       </t>
-      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
         <ul class="my-1">
           <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
           <t t-if="props.event.path.length !== 1">

tools/devtools/src/devtools_app/devtools_window/profiler_tab/event_node/event_node.xml

@@ -28,14 +28,14 @@
         </span>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="nodeContextMenu">
+    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-ref="nodeContextMenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, true)" class="custom-menu-item py-1 px-4">Expand children</li>
         <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
         <li t-on-click.stop="() => this.store.foldDirectChildren(props.event)" class="custom-menu-item py-1 px-4">Fold direct children</li>
       </ul>
     </div>
-    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
         <t t-if="props.event.path.length !== 1">

tools/devtools/src/devtools_app/store/store.js

@@ -11,10 +11,9 @@ export const store = reactive({
     expandByDefault: true,
     toggleOnSelected: false,
     darkmode: false,
+    componentsToggleBlacklist: new Set(),
   },
   contextMenu: {
-    top: 0,
-    left: 0,
     id: 0,
     activeMenu: -1,
     // Opens the context menu corresponding with the given menu html element
@@ -29,9 +28,9 @@ export const store = reactive({
       if (y + menuHeight > window.innerHeight) {
         y = window.innerHeight - menuHeight;
       }
-      this.left = x + "px";
+      menu.style.left = x + "px";
       // Need 25px offset because of the main navbar from the browser devtools
-      this.top = y - 25 + "px";
+      menu.style.top = y - 25 + "px";
     },
     // Close the currently displayed context menu
     close() {
@@ -103,20 +102,17 @@ export const store = reactive({
     if (IS_FIREFOX) {
       await evalInWindow("window.$0 = $0;", this.activeFrame);
     }
-    const apps = await evalFunctionInWindow(
+    const [apps, component] = await evalFunctionInWindow(
       "getComponentsTree",
-      fromOld && this.activeComponent ? [this.activeComponent.path, this.apps] : [],
+      fromOld && this.activeComponent
+        ? [this.activeComponent.path, this.apps, this.activeComponent]
+        : [],
       this.activeFrame
     );
     this.apps = apps ? apps : [];
     if (!fromOld && this.settings.expandByDefault) {
-      this.apps.forEach((tree) => expandNodes(tree));
+      this.apps.forEach((tree) => expandNodes(tree, true));
     }
-    const component = await evalFunctionInWindow(
-      "getComponentDetails",
-      fromOld && this.activeComponent ? [this.activeComponent.path, this.activeComponent] : [],
-      this.activeFrame
-    );
     this.activeComponent = component;
   },
 
@@ -414,12 +410,7 @@ export const store = reactive({
         if (!scriptsLoaded) {
           await loadScripts(frame);
         }
-        evalInWindow(
-          `__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = ${
-            store.devtoolsId
-          }; __OWL__DEVTOOLS_GLOBAL_HOOK__.frame = ${JSON.stringify(frame)};`,
-          frame
-        );
+        evalFunctionInWindow("initDevtools", [frame], frame);
         if (!this.frameUrls.includes(frame)) {
           this.frameUrls = [...this.frameUrls, frame];
         }
@@ -503,13 +494,18 @@ export const store = reactive({
   },
 
   // Reset all the relevant data about the page currently stored
-  resetData() {
+  async resetData() {
+    await loadSettings();
     this.loadComponentsTree(false);
     this.events = [];
     this.eventsTree = [];
     this.activeRecorder = false;
     evalFunctionInWindow("toggleEventsRecording", [false, 0]);
+    this.traceRenderings = false;
     evalFunctionInWindow("toggleTracing", [false]);
+    this.traceSubscriptions = false;
+    evalFunctionInWindow("toggleSubscriptionTracing", [false]);
+    this.updateIFrameList();
   },
 
   // Triggers manually the rendering of the selected component
@@ -605,7 +601,7 @@ export const store = reactive({
   // Refresh the whole extension
   async refreshExtension() {
     await loadScripts();
-    this.resetData();
+    await this.resetData();
   },
 
   // Toggle dark mode in the extension and store result in the storage
@@ -616,7 +612,7 @@ export const store = reactive({
     } else {
       document.querySelector("html").classList.remove("dark-mode");
     }
-    browserInstance.storage.local.set({ owl_devtools_dark_mode: this.settings.darkMode });
+    browserInstance.storage.local.set({ owlDevtoolsDarkMode: this.settings.darkMode });
   },
 
   openDocumentation() {
@@ -629,12 +625,12 @@ export function useStore() {
   return useState(store);
 }
 
-init();
-
-async function init() {
+export async function createStore() {
   store.devtoolsId = await getTabURL();
 
-  evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
+  evalFunctionInWindow("initDevtools", []);
+
+  await loadSettings();
 
   // We want to load the base components tree when the devtools tab is first opened
   store.loadComponentsTree(false);
@@ -651,114 +647,99 @@ async function init() {
     evalFunctionInWindow("toggleEventsRecording", [false, 0], frame);
   }
 
-  loadSettings();
+  browserInstance.runtime.sendMessage({ type: "newDevtoolsPanel", id: store.devtoolsId });
+
+  // Heartbeat message to test whether the extension context is still valid or not
+  setInterval(() => {
+    if (store.extensionContextStatus) {
+      try {
+        browserInstance.runtime.sendMessage({ type: "keepAlive", id: store.devtoolsId });
+      } catch (e) {
+        store.extensionContextStatus = false;
+      }
+    }
+  }, 500);
 }
 
-// Heartbeat message to test whether the extension context is still valid or not
-setInterval(() => {
-  if (store.extensionContextStatus) {
-    try {
-      browserInstance.runtime.sendMessage({ type: "keepAlive" });
-    } catch (e) {
-      store.extensionContextStatus = false;
-    }
-  }
-}, 1000);
-
-let flushRendersTimeout = false;
+let rootRendersTimeout = false;
 // Connect to the port to communicate to the background script
 browserInstance.runtime.onConnect.addListener((port) => {
-  if (!port.name === "OwlDevtoolsPort") {
-    return;
-  }
-  port.onMessage.addListener(async (msg) => {
-    // Reload the tree after checking if the scripts are loaded when this message is received
-    if (msg.type === "Reload") {
-      const tab = await getTabURL();
-      // Since this message is sent to all devtools windows, only take it into account when this is the active tab
-      if (tab !== store.devtoolsId) {
-        return;
+  if (port.name === "OwlDevtoolsPort_" + store.devtoolsId) {
+    port.onMessage.addListener(async (msg) => {
+      // Reload the tree after checking if the scripts are loaded when this message is received
+      if (msg.type === "Reload") {
+        store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
+        if (store.owlStatus) {
+          evalFunctionInWindow("initDevtools", []);
+          await store.resetData();
+        }
       }
-      store.owlStatus = await evalInWindow("window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;");
-      if (store.owlStatus) {
-        evalInWindow("__OWL__DEVTOOLS_GLOBAL_HOOK__.devtoolsId = " + store.devtoolsId + ";");
-        store.resetData();
-      }
-    }
-    // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
-    if (msg.type === "FrameReady") {
-      const tab = await getTabURL();
-      // Same as for the reload message
-      if (tab !== store.devtoolsId) {
-        return;
-      }
-      store.updateIFrameList();
-      store.owlStatus = true;
-      store.resetData();
-    }
-    // We need to reload the components tree when the set of apps in the page is modified
-    if (msg.type === "RefreshApps") {
-      store.loadComponentsTree(true);
-    }
-    // Filter out the messages that are not destined to this devtools tab. The messages above may be sent before
-    // the devtoolsId is set
-    if (msg.origin.id !== store.devtoolsId) {
-      return;
-    }
-    // When message of type Flush is received, overwrite the component tree with the new one from page
-    // A flush message is sent everytime a component is rendered on the page
-    if (msg.type === "Flush") {
-      if (msg.origin.frame !== store.activeFrame) {
-        return;
-      }
-      if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
-        return;
-      }
-      // This determines which components will have a short highlight effect in the tree to indicate they have been rendered
-      store.renderPaths.add(JSON.stringify(msg.data));
-      clearTimeout(flushRendersTimeout);
-      flushRendersTimeout = setTimeout(() => {
-        store.renderPaths.clear();
-      }, 100);
-      store.loadComponentsTree(true);
-    }
-    // Select the component based on the path received with the SelectElement message
-    if (msg.type === "SelectElement") {
-      if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
-        return;
-      }
-      store.selectComponent(msg.data);
-    }
-    // Stop the DOM element selector tool upon receiving the StopSelector message
-    if (msg.type === "StopSelector") {
-      store.componentSearch.activeSelector = false;
-    }
-
-    // Logic for recording an event when the event message is received
-    if (msg.type === "Event") {
-      let events = msg.data;
-      loadEvents(events);
-    }
-
-    // If we know a new iframe has been added to the page, load scripts into it and update the
-    // frames list if it has been directly loaded.
-    if (msg.type === "NewIFrame") {
-      const isLoaded = await loadScripts(msg.data);
-      if (isLoaded) {
+      // Received when a frame has been delayed when loading the scripts due to owl being lazy loaded
+      if (msg.type === "FrameReady") {
         store.updateIFrameList();
+        store.owlStatus = true;
+        await store.resetData();
       }
-    }
-  });
+      // We need to reload the components tree when the set of apps in the page is modified
+      if (msg.type === "RefreshApps") {
+        store.loadComponentsTree(true);
+      }
+      // When message of type Complete is received, overwrite the component tree with the new one from page
+      // A Complete message is sent everytime a root render is triggered on the page
+      if (msg.type === "Complete") {
+        if (msg.origin.frame !== store.activeFrame) {
+          return;
+        }
+        if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
+          return;
+        }
+        // This determines which components will have a short highlight effect in the tree to indicate they have been rendered
+        store.renderPaths.add(JSON.stringify(msg.data));
+        clearTimeout(rootRendersTimeout);
+        rootRendersTimeout = setTimeout(() => {
+          store.renderPaths.clear();
+        }, 100);
+        store.loadComponentsTree(true);
+      }
+      // Select the component based on the path received with the SelectElement message
+      if (msg.type === "SelectElement") {
+        if (!(Array.isArray(msg.data) && msg.data.every((val) => typeof val === "string"))) {
+          return;
+        }
+        store.selectComponent(msg.data);
+      }
+      // Stop the DOM element selector tool upon receiving the StopSelector message
+      if (msg.type === "StopSelector") {
+        store.componentSearch.activeSelector = false;
+      }
+
+      // Logic for recording an event when the event message is received
+      if (msg.type === "Event") {
+        let events = msg.data;
+        loadEvents(events);
+      }
+
+      // If we know a new iframe has been added to the page, load scripts into it and update the
+      // frames list if it has been directly loaded.
+      if (msg.type === "NewIFrame") {
+        const isLoaded = await loadScripts(msg.data);
+        if (isLoaded) {
+          store.updateIFrameList();
+        }
+      }
+    });
+  }
 });
 
 // Load all settings from the chrome sync storage
 async function loadSettings() {
   let storage = await browserInstance.storage.local.get();
-  if (storage.owl_devtools_dark_mode === undefined) {
+  // Darkmode
+  if (storage.owlDevtoolsDarkMode === undefined) {
     // Load dark mode based on the global settings of the chrome devtools
     darkMode = browserInstance.devtools.panels.themeName === "dark";
   } else {
-    darkMode = storage.owl_devtools_dark_mode;
+    darkMode = storage.owlDevtoolsDarkMode;
   }
   store.settings.darkMode = darkMode;
   if (darkMode) {
@@ -766,6 +747,12 @@ async function loadSettings() {
   } else {
     document.querySelector("html").classList.remove("dark-mode");
   }
+  // Components toggle blacklist
+  if (storage.owlDevtoolsComponentsToggleBlacklist !== undefined) {
+    store.settings.componentsToggleBlacklist = new Set(
+      storage.owlDevtoolsComponentsToggleBlacklist
+    );
+  }
 }
 
 // Function to handle and store a batch of events coming from the page
@@ -790,6 +777,7 @@ function loadEvents(events) {
     }
     event.origin = null;
     event.toggled = false;
+    event.isLast = false;
     // Logic to retrace the origin of the event if it is not a root render event
     if (!event.type.includes("render")) {
       for (let i = store.events.length - 1; i >= 0; i--) {
@@ -839,6 +827,7 @@ function loadEvents(events) {
     // Make sure we add the event while keeping the whole list ordered by id
     addEventSorted(event);
   }
+  store.events[store.events.length - 1].isLast = true;
 }
 
 // Deselect component and remove highlight on all children
@@ -885,10 +874,14 @@ function highlightChildren(component) {
 }
 
 // Expand the node given in entry and all of its children
-function expandNodes(node) {
-  node.toggled = true;
+function expandNodes(node, blacklist = false) {
+  if (blacklist && store.settings.componentsToggleBlacklist.has(node.name)) {
+    node.toggled = false;
+  } else {
+    node.toggled = true;
+  }
   for (const child of node.children) {
-    expandNodes(child);
+    expandNodes(child, blacklist);
   }
 }
 

tools/devtools/src/main.css

@@ -126,6 +126,10 @@
   color: var(--prototype-color);
 }
 
+.key-changes {
+  background-color: var(--version-bg);
+}
+
 .event-container {
   border-bottom: 1px solid rgb(240, 238, 238);
   padding-top: 2px!important;
@@ -133,6 +137,10 @@
   font-size: 11px;
 }
 
+.event-last {
+  border-bottom: 3px solid rgb(225, 154, 0);
+}
+
 .getter-content:hover {
   text-decoration: underline;
 }

tools/devtools/src/page_scripts/owl_devtools_global_hook.js

@@ -11,18 +11,17 @@
       this.Fiber = window.__OWL_DEVTOOLS__.Fiber;
       // Same but for RootFiber
       this.RootFiber = window.__OWL_DEVTOOLS__.RootFiber;
-      // Set to keep track of the fibers that are in the flush queue
-      this.queuedFibers = new WeakSet();
+      // This is for retrocompatibility purposes since new versions of owl should always expose toRaw and reactive
+      // in __OWL_DEVTOOLS__
+      this.toRaw = window.__OWL_DEVTOOLS__.toRaw ?? window.owl?.toRaw;
+      this.reactive = window.__OWL_DEVTOOLS__.reactive ?? window.owl?.reactive;
       // Set to keep track of the HTML elements we added to the page
       this.addedElements = [];
       // To keep track of the succession order of the render events
       this.eventId = 0;
-      // Will be reset as soon as a new devtools owl tab is opened. Allows to avoid sending messages to the wrong devtools tab later on
-      this.devtoolsId = 0;
       // Set to keep track of the frame on which this script is loaded
       this.frame = "top";
       // Allows to launch a message each time an iframe html element is added to the page
-      const self = this;
       const iFrameObserver = new MutationObserver(function (mutationsList) {
         mutationsList.forEach(function (mutation) {
           mutation.addedNodes.forEach(function (addedNode) {
@@ -34,23 +33,21 @@
                  * This process may seem long and indirect but is necessary. This applies to all window.top.postMessage methods in this file.
                  * More information in the docs: https://developer.chrome.com/docs/extensions/mv3/devtools/#evaluated-scripts-to-devtools
                  */
-                window.top.postMessage({
-                  source: "owl-devtools",
-                  type: "NewIFrame",
-                  data: addedNode.contentDocument.location.href,
-                  origin: { id: self.devtoolsId },
-                });
+                window.top.postMessage(
+                  {
+                    source: "owl-devtools",
+                    type: "NewIFrame",
+                    data: addedNode.contentDocument.location.href,
+                  },
+                  "/"
+                );
               }
             }
           });
         });
       });
       iFrameObserver.observe(document.body, { subtree: true, childList: true });
-      this.appsPatched = false;
       this.patchAppsSetMethods();
-      setTimeout(() => {
-        this.patchAppMethods();
-      }, 200);
       this.recordEvents = false;
       this.traceRenderings = false;
       this.traceSubscriptions = false;
@@ -170,63 +167,84 @@
       };
     }
 
+    initDevtools(frame = "top") {
+      if (!this.devtoolsInit) {
+        this.frame = frame;
+        const self = this;
+        // Flush the events batcher when a root render is completed
+        const original_Complete = self.RootFiber.prototype.complete;
+        self.RootFiber.prototype.complete = function () {
+          original_Complete.call(this, ...arguments);
+          const path = self.getComponentPath(this.node);
+          //Add a functionnality to the complete function which sends a message to the window every time it is triggered.
+          window.top.postMessage(
+            {
+              source: "owl-devtools",
+              type: "Complete",
+              data: path,
+              origin: { frame: self.frame },
+            },
+            "/"
+          );
+          if (self.recordEvents) {
+            window.top.postMessage(
+              {
+                source: "owl-devtools",
+                type: "Event",
+                data: self.eventsBatch,
+              },
+              "/"
+            );
+            self.eventsBatch = [];
+          }
+        };
+        this.devtoolsInit = true;
+      }
+    }
     // Modify the methods of the apps set in order to send a message each time it is modified.
     patchAppsSetMethods() {
       const originalAdd = this.apps.add;
       const originalDelete = this.apps.delete;
-      const self = this;
       this.apps.add = function () {
         originalAdd.call(this, ...arguments);
-        self.patchAppMethods();
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "RefreshApps",
-        });
+        window.top.postMessage(
+          {
+            source: "owl-devtools",
+            type: "RefreshApps",
+          },
+          "/"
+        );
       };
       this.apps.delete = function () {
         originalDelete.call(this, ...arguments);
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "RefreshApps",
-        });
+        window.top.postMessage(
+          {
+            source: "owl-devtools",
+            type: "RefreshApps",
+          },
+          "/"
+        );
       };
     }
 
     // Modify methods of each app so that it triggers messages on each flush and component render
     patchAppMethods() {
-      if (this.appsPatched) {
-        return;
-      }
       let app;
       for (const appItem of this.apps) {
         if (appItem.root) {
           app = appItem;
         }
       }
-      // We don't want to bother patching the apps methods if none have components inside
-      if (!app) {
+      if (!app.root) {
         return;
       }
+      const self = this;
       const originalFlush = app.scheduler.constructor.prototype.flush;
       let inFlush = false;
       let _render = false;
-      const self = this;
       app.scheduler.constructor.prototype.flush = function () {
         // Used to know when a render is triggered inside the flush method or not
         inFlush = true;
-        [...this.tasks].map((fiber) => {
-          if (fiber.counter === 0 && !self.queuedFibers.has(fiber)) {
-            self.queuedFibers.add(fiber);
-            const path = self.getComponentPath(fiber.node);
-            //Add a functionnality to the flush function which sends a message to the window every time it is triggered.
-            window.top.postMessage({
-              source: "owl-devtools",
-              type: "Flush",
-              data: path,
-              origin: { id: self.devtoolsId, frame: self.frame },
-            });
-          }
-        });
         originalFlush.call(this, ...arguments);
         inFlush = false;
       };
@@ -323,20 +341,6 @@
         _render = true;
         original_Render.call(this, ...arguments);
       };
-      // Flush the events batcher when a root render is completed
-      const original_Complete = self.RootFiber.prototype.complete;
-      self.RootFiber.prototype.complete = function () {
-        original_Complete.call(this, ...arguments);
-        if (self.recordEvents) {
-          window.top.postMessage({
-            source: "owl-devtools",
-            type: "Event",
-            data: self.eventsBatch,
-            origin: { id: self.devtoolsId },
-          });
-          self.eventsBatch = [];
-        }
-      };
       // Signals when a component is destroyed
       const originalDestroy = app.root.constructor.prototype._destroy;
       app.root.constructor.prototype._destroy = function () {
@@ -358,7 +362,6 @@
           originalDestroy.call(this, ...arguments);
         }
       };
-      this.appsPatched = true;
     }
 
     // patch reactivity system to activate subscription tracing
@@ -373,7 +376,7 @@
       let targetToKeysToCallbacks;
 
       // Step 1: extract internal values from owl
-      const obj = owl.reactive({}, () => {});
+      const obj = self.reactive({}, () => {});
       let count = 0;
       WeakMap.prototype.get = function () {
         count++;
@@ -422,9 +425,14 @@
     }
 
     toggleTracing(value) {
+      if (value) {
+        this.patchAppMethods();
+        this.patchAppMethods = () => {}; // to only patch once
+      }
       this.traceRenderings = value;
       return this.traceRenderings;
     }
+
     toggleSubscriptionTracing(value) {
       if (value) {
         this.patchReactivity();
@@ -435,6 +443,10 @@
     }
     // Enables/disables the recording of the render/destroy events based on value
     toggleEventsRecording(value, index) {
+      if (value) {
+        this.patchAppMethods();
+        this.patchAppMethods = () => {}; // to only patch once
+      }
       this.recordEvents = value;
       this.eventId = index;
       return this.recordEvents;
@@ -605,12 +617,14 @@
         const path = this.getElementPath(target);
         this.highlightComponent(path);
         this.currentSelectedElement = target;
-        window.top.postMessage({
-          source: "owl-devtools",
-          type: "SelectElement",
-          data: path,
-          origin: { id: this.devtoolsId },
-        });
+        window.top.postMessage(
+          {
+            source: "owl-devtools",
+            type: "SelectElement",
+            data: path,
+          },
+          "/"
+        );
       }
     };
 
@@ -634,11 +648,13 @@
       document.removeEventListener("mouseover", this.HTMLSelector, { capture: true });
       document.removeEventListener("click", this.disableHTMLSelector, { capture: true });
       document.removeEventListener("mouseout", this.removeHighlights, { capture: true });
-      window.top.postMessage({
-        source: "owl-devtools",
-        type: "StopSelector",
-        origin: { id: this.devtoolsId },
-      });
+      window.top.postMessage(
+        {
+          source: "owl-devtools",
+          type: "StopSelector",
+        },
+        "/"
+      );
     };
 
     // Returns the object specified by the path starting from the topParent object
@@ -703,7 +719,7 @@
             }
         }
         if (obj) {
-          obj = owl.toRaw(obj);
+          obj = this.toRaw(obj);
         }
       }
       return obj;
@@ -790,57 +806,47 @@
           }
           break;
       }
-      if (child.contentType) {
-        if (child.toggled) {
-          child.children = this.loadObjectChildren(
-            child.path,
-            child.depth,
-            child.contentType,
-            child.objectType,
-            oldTree
-          );
-        }
-        return child;
-      }
-      if (obj === null) {
-        child.content = "null";
-        child.contentType = "object";
-        child.hasChildren = false;
-      } else if (obj === undefined) {
-        child.content = "undefined";
-        child.contentType = "undefined";
-        child.hasChildren = false;
-      } else {
-        obj = owl.toRaw(obj);
-        switch (true) {
-          case obj instanceof Map:
-            child.contentType = "map";
-            child.hasChildren = true;
-            break;
-          case obj instanceof Set:
-            child.contentType = "set";
-            child.hasChildren = true;
-            break;
-          case obj instanceof Array:
-            child.contentType = "array";
-            child.hasChildren = obj.length > 0;
-            break;
-          case typeof obj === "function":
-            child.contentType = "function";
-            child.hasChildren = true;
-            break;
-          case obj instanceof Object:
-            child.contentType = "object";
-            child.hasChildren = Object.keys(obj).length > 0;
-            break;
-          default:
-            child.contentType = typeof obj;
-            child.hasChildren = false;
-        }
-        if (key.type === "set entry") {
-          child.content = this.serializer.serializeItem(obj, true);
+      if (!child.contentType) {
+        if (obj === null) {
+          child.content = "null";
+          child.contentType = "object";
+          child.hasChildren = false;
+        } else if (obj === undefined) {
+          child.content = "undefined";
+          child.contentType = "undefined";
+          child.hasChildren = false;
         } else {
-          child.content = this.serializer.serializeContent(obj, child.contentType);
+          obj = this.toRaw(obj);
+          switch (true) {
+            case obj instanceof Map:
+              child.contentType = "map";
+              child.hasChildren = true;
+              break;
+            case obj instanceof Set:
+              child.contentType = "set";
+              child.hasChildren = true;
+              break;
+            case obj instanceof Array:
+              child.contentType = "array";
+              child.hasChildren = obj.length > 0;
+              break;
+            case typeof obj === "function":
+              child.contentType = "function";
+              child.hasChildren = true;
+              break;
+            case obj instanceof Object:
+              child.contentType = "object";
+              child.hasChildren = Object.keys(obj).length > 0;
+              break;
+            default:
+              child.contentType = typeof obj;
+              child.hasChildren = false;
+          }
+          if (key.type === "set entry") {
+            child.content = this.serializer.serializeItem(obj, true);
+          } else {
+            child.content = this.serializer.serializeContent(obj, child.contentType);
+          }
         }
       }
       if (child.toggled) {
@@ -852,6 +858,7 @@
           oldTree
         );
       }
+      this.addHighlightedKeys(child);
       return child;
     }
 
@@ -861,7 +868,10 @@
       let path = completePath.slice(objPathIndex);
       let obj;
       if (objType === "subscription") {
-        obj = oldTree.subscriptions.children[path[1].value].target;
+        const subscriptionPath = completePath.slice(0, objPathIndex + 3);
+        obj = oldTree.subscriptions.children.find(
+          (child) => JSON.stringify(child.target.path) === JSON.stringify(subscriptionPath)
+        ).target;
         path = path.slice(3);
       } else {
         // Everything here is in component if it is not an app so remove this key of the path in the former case
@@ -987,19 +997,6 @@
             children.push(entries);
             index++;
           }
-          const size = this.serializeObjectChild(
-            obj,
-            { type: "item", value: "size", childIndex: children.length },
-            depth,
-            objType,
-            path,
-            oldBranch.children[index],
-            oldTree
-          );
-          if (size) {
-            children.push(size);
-            index++;
-          }
           Reflect.ownKeys(obj).forEach((key) => {
             const child = this.serializeObjectChild(
               obj,
@@ -1287,16 +1284,15 @@
           children: [],
         };
       } else {
-        const rawSubscriptions = node.subscriptions;
+        const rawSubscriptions = this.topLevelSubscriptions(node);
         component.subscriptions = {
           toggled: oldTree ? oldTree.subscriptions.toggled : true,
           children: [],
         };
-        rawSubscriptions.forEach((rawSubscription, index) => {
+        rawSubscriptions.forEach((rawSubscription) => {
           let subscription = {
-            keys: [],
             target: {
-              name: "target",
+              name: this.targetName(rawSubscription.target, node),
               contentType:
                 typeof rawSubscription.target === "object"
                   ? Array.isArray(rawSubscription.target)
@@ -1307,28 +1303,20 @@
               path: [
                 ...path,
                 { type: "item", value: "subscriptions" },
-                { type: "item", value: index },
+                { type: "item", value: rawSubscription.index },
                 { type: "item", value: "target" },
               ],
               toggled: false,
               objectType: "subscription",
             },
-            keysExpanded: false,
           };
           if (
             oldTree &&
-            oldTree.subscriptions.children[index] &&
-            oldTree.subscriptions.children[index].target.toggled
+            oldTree.subscriptions.children[rawSubscription.index] &&
+            oldTree.subscriptions.children[rawSubscription.index].target.toggled
           ) {
             subscription.target.toggled = true;
           }
-          rawSubscription.keys.forEach((key) => {
-            if (typeof key === "symbol") {
-              subscription.keys.push(key.toString());
-            } else {
-              subscription.keys.push(key);
-            }
-          });
           if (rawSubscription.target == null) {
             if (subscription.target.contentType === "undefined") {
               subscription.target.content = "undefined";
@@ -1358,6 +1346,7 @@
               oldTree
             );
           }
+          this.addHighlightedKeys(subscription.target);
           component.subscriptions.children.push(subscription);
         });
       }
@@ -1376,7 +1365,7 @@
         }
         getter.hasChildren = false;
       } else {
-        obj = owl.toRaw(obj);
+        obj = this.toRaw(obj);
         switch (true) {
           case obj instanceof Map:
             getter.contentType = "map";
@@ -1471,7 +1460,7 @@
         return;
       }
       if (objectType === "subscription") {
-        owl.reactive(obj)[key] = value;
+        this.reactive(obj)[key] = value;
       } else {
         obj[key] = value;
         if (objectType === "props" || objectType === "instance") {
@@ -1540,7 +1529,7 @@
     }
     // Returns the tree of components of the inspected page in a parsed format
     // Use inspectedPath to specify the path of the selected component
-    getComponentsTree(inspectedPath = null, oldTrees = null) {
+    getComponentsTree(inspectedPath = null, oldTrees = null, oldDetails = null) {
       const appsArray = [...this.apps];
       const trees = appsArray.map((app, index) => {
         let oldTree;
@@ -1593,7 +1582,8 @@
         }
         return appNode;
       });
-      return trees ? trees : [];
+      const component = this.getComponentDetails(inspectedPath, oldDetails);
+      return trees ? [trees, component] : [];
     }
     // Recursively fills the components tree as a parsed version
     fillTree(appNode, treeNode, inspectedPathString, oldBranch) {
@@ -1689,6 +1679,54 @@
         inspect(obj);
       }
     }
+
+    targetName(target, node) {
+      // check on component
+      const { component } = node;
+      for (const [key, value] of Object.entries(component)) {
+        if (target === this.toRaw(value)) {
+          return key;
+        }
+      }
+      // check on props
+      for (const [key, value] of Object.entries(component.props)) {
+        if (target === this.toRaw(value)) {
+          return `props.${key}`;
+        }
+      }
+      return "[unknown]";
+    }
+
+    /**
+     * Removes subscriptions that are a direct child of another subscription:
+     * they will be reachable from the top level by expanding observed keys.
+     *
+     * @param {ComponentNode} node
+     * @returns {{ keys: PropertyKey[], target: unknown}[]} the top level
+     *  subscriptions of the node
+     */
+    topLevelSubscriptions(node) {
+      const subscriptions = node.subscriptions.map((s, index) => ({ ...s, index }));
+      const topLevelValues = new Set(Object.values(node.component).map((o) => this.toRaw(o)));
+      const toOmit = new Set(
+        subscriptions
+          .flatMap(({ keys, target }) => keys.map((k) => this.toRaw(target[k])))
+          .filter((obj) => !topLevelValues.has(obj))
+      );
+      return subscriptions.filter(({ target }) => !toOmit.has(target));
+    }
+
+    addHighlightedKeys(child) {
+      const { path } = child;
+      const subscriptionIndex = path.findIndex((item) => typeof item !== "string");
+      if (path[subscriptionIndex]?.value === "subscriptions") {
+        const node = this.getComponentNode(path.slice(0, subscriptionIndex));
+        // Add observed keys
+        const targetToKeys = new Map(node.subscriptions.map(({ keys, target }) => [target, keys]));
+        const target = this.getObjectProperty(child.path);
+        child.keys = targetToKeys.get(target)?.map((k) => String(k));
+      }
+    }
   }
 
   function checkOwlStatus() {
@@ -1701,7 +1739,7 @@
         owlStatus = -1;
       }
     }
-    window.postMessage({ source: "owl-devtools", type: "owlStatus", data: owlStatus });
+    window.postMessage({ source: "owl-devtools", type: "owlStatus", data: owlStatus }, "/");
   }
 
   if (!window.__OWL_DEVTOOLS__) {
@@ -1723,19 +1761,19 @@
         if (value?.Fiber !== undefined) {
           window.__OWL__DEVTOOLS_GLOBAL_HOOK__ = new OwlDevtoolsGlobalHook();
         }
-        window.top.postMessage({ source: "owl-devtools", type: "FrameReady" });
+        window.top.postMessage({ source: "owl-devtools", type: "FrameReady" }, "/");
         checkOwlStatus();
       },
     });
     // Do note that the reload message is not sent on the top window so that it is not intercepted when originating
     // from an iframe
-    window.postMessage({ source: "owl-devtools", type: "Reload" });
+    window.postMessage({ source: "owl-devtools", type: "Reload" }, "/");
   } else if (
     window.__OWL_DEVTOOLS__?.Fiber !== undefined &&
     !window.__OWL__DEVTOOLS_GLOBAL_HOOK__
   ) {
     window.__OWL__DEVTOOLS_GLOBAL_HOOK__ = new OwlDevtoolsGlobalHook();
-    window.postMessage({ source: "owl-devtools", type: "Reload" });
+    window.postMessage({ source: "owl-devtools", type: "Reload" }, "/");
   }
   // Listener that checks whether owl is available on the page and if it has the right version
   window.addEventListener(
@@ -1748,6 +1786,6 @@
     false
   );
   checkOwlStatus();
-  // Indicates whether the scripts loaded successfully or not (useful when loaded with eval in iframes only)
+  // Indicates whether the scripts loaded successfully or not (only useful when loaded with eval in iframes)
   return window.__OWL__DEVTOOLS_GLOBAL_HOOK__ !== undefined;
 })();

tools/devtools/tests/devtools.d.ts

@@ -0,0 +1,9 @@
+import type * as owl from "../../../src/runtime";
+import type { JestChrome } from "jest-chrome/types/jest-chrome";
+declare global {
+  interface Window {
+    owl: typeof owl;
+    browser: any;
+    chrome: JestChrome;
+  }
+}

tools/devtools/tests/devtools.test.ts

@@ -0,0 +1,15 @@
+import { mount } from "../../../src";
+import { makeTestFixture } from "../../../tests/helpers";
+import { DevtoolsWindow } from "../src/devtools_app/devtools_window/devtools_window";
+
+let fixture = makeTestFixture();
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+describe("devtools", () => {
+  test("mounting the devtools", async () => {
+    await mount(DevtoolsWindow as any, fixture);
+    expect(fixture.querySelector(".status-message")!.textContent).toContain("There are no apps currently running.")
+  });
+});

tools/devtools/tests/jest.config.json

@@ -0,0 +1,28 @@
+{
+  "testEnvironment": "jsdom",
+  "roots": [
+    "<rootDir>"
+  ],
+  "setupFiles": [
+    "<rootDir>/../../../tests/mocks/mockEventTarget.js",
+    "<rootDir>/setup.ts"
+  ],
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "<rootDir>/tsconfig.json"
+    }
+  },
+  "transform": {
+    "^.+\\.[jt]s?$": "ts-jest"
+  },
+  "verbose": false,
+  "testRegex": "(/tests/.*(test|spec))\\.ts?$",
+  "moduleFileExtensions": [
+    "ts",
+    "tsx",
+    "js",
+    "jsx",
+    "json",
+    "node"
+  ]
+}

tools/devtools/tests/setup.ts

@@ -0,0 +1,9 @@
+import * as owl from "../../../src/runtime";
+window.owl = owl;
+import { chrome } from "jest-chrome";
+window.chrome = chrome;
+
+import { templates } from "../assets/templates";
+for (const template in templates) {
+  owl.App.registerTemplate(template, templates[template as keyof typeof templates]);
+}

tools/devtools/tests/tsconfig.json

@@ -0,0 +1,109 @@
+{
+  /**
+   ** Commented-out options have their default values.
+   **/
+  "include": [
+    "**/*.ts",
+  ],
+                                                                // "exclude": [],
+  // "files": [],                                               // A list of relative or absolute file paths to include.
+  // "extends": "",                                             // A string containing a path to another configuration file to inherit from.
+  // "references": [],                                          // An array of objects `{"path": "./to/dirOrConfig"}` that specifies projects to reference.
+  // "compileOnSave": false,                                    // Signals to the IDE to generate all files for a given tsconfig.json upon saving.
+  "compilerOptions": {
+                                                                // Main options
+    "target": "es2019",                                         // Specify ECMAScript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'.
+    "module": "es6",                                         // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
+    // "lib": ["esnext", "dom"],                                // Specify library files to be included in the compilation.
+    "allowJs": true,                                            // Allow javascript files to be compiled.
+    // "checkJs": false,                                        // Report errors in .js files.
+    // "outFile": "./",                                         // Concatenate and emit output to single file.
+    "outDir": "dist",                                           // Redirect output structure to the directory.
+    // "rootDir": "./",                                         // Specify the root directory of input files. Use to control the output directory structure with `--outDir`.
+    // "project": "",                                           // Compile a project given a valid configuration file.
+                                                                // Compilation options
+    // "composite": true,                                       // Enable project compilation
+    // "diagnostics": false,                                    // Show diagnostic information.
+    // "incremental": true,                                     // Enable incremental compilation by reading/writing information from prior compilations to a file on disk.
+    // "isolatedModules": false,                                // Transpile each file as a separate module (similar to 'ts.transpileModule').
+    // "listEmittedFiles": false,                               // Print names of generated files part of the compilation.
+    // "listFiles": true,                                       // Print names of files part of the compilation.
+    // "noErrorTruncation": false,                              // Do not truncate error messages.
+    // "preserveWatchOutput": false,                            // Keep outdated console output in watch mode instead of clearing the screen.
+    // "traceResolution": false,                                // Enable tracing of the name resolution process.
+    // "tsBuildInfoFile": ".tsbuildinfo",                       // Specify file to store incremental compilation information.
+                                                                // Strict typechecking options
+    "strict": true,                                             // Enable all strict type-checking options.
+    // "noImplicitAny": true,                                   // Raise error on expressions and declarations with an implied 'any' type.
+    // "noImplicitThis": true,                                  // Raise error on 'this' expressions with an implied 'any' type.
+    // "strictBindCallApply": true,                             // Enable stricter checking of of the `bind`, `call`, and `apply` methods on functions.
+    // "strictFunctionTypes": true,                             // Disable bivariant parameter checking for function types.
+    // "strictNullChecks": true,                                // In strict null checking mode, the null and undefined values are not in the domain of every type and are only assignable to themselves and any.
+    // "strictPropertyInitialization": true,                    // Ensure non-undefined class properties are initialized in the constructor. This option requires `--strictNullChecks` be enabled in order to take effect.
+    // "alwaysStrict": true,                                    // Parse in strict mode and emit "use strict" for each source file.
+                                                                // Additional checks
+    // "allowUnreachableCode": false,                           // Do not report errors on unreachable code.
+    // "allowUnusedLabels": false,                              // Do not report errors on unused labels.
+    "forceConsistentCasingInFileNames": true,                   // Disallow inconsistently-cased references to the same file.
+    // "noStrictGenericChecks": false,                          // Disable strict checking of generic signatures in function types.
+    "noUnusedLocals": true,                                     // Report errors on unused locals.
+    "noUnusedParameters": false,                                // Report errors on unused parameters.
+    "noImplicitReturns": true,                                  // Report error when not all code paths in function return a value.
+    "noFallthroughCasesInSwitch": true,                         // Report errors for fallthrough cases in switch statement.
+    // "skipLibCheck": false,                                   // Skip type checking of all declaration files (*.d.ts).
+    // "suppressExcessPropertyErrors": false,                   // Suppress excess property checks for object literals.
+    // "suppressImplicitAnyIndexErrors": false,                 // Suppress noImplicitAny errors for indexing objects lacking index signatures.
+                                                                // Module resolution options
+    "moduleResolution": "node",                                 // Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
+    // "baseUrl": "./",                                         // Base directory to resolve non-absolute module names.
+    // "paths": {},                                             // A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.
+    // "rootDirs": [],                                          // List of root folders whose combined content represents the structure of the project at runtime.
+    // "typeRoots": [
+    //   "./node_modules/@types",
+    //   "./tools/devtools/tests"
+    // ],                                         // List of folders to include type definitions from.
+    "types": [
+      "jest",
+      "node"
+    ],                                                // Type declaration files to be included in compilation.
+    // "allowSyntheticDefaultImports": false                    // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
+    "esModuleInterop": true,                                    // Emit '__importStar' and '__importDefault' helpers for runtime babel ecosystem compatibility and enable '--allowSyntheticDefaultImports' for typesystem compatibility.
+    // "maxNodeModuleJsDepth": 0,                               // The maximum dependency depth to search under node_modules and load JavaScript files. Only applicable with --allowJs.
+    // "preserveSymlinks": false,                               // Do not resolve the real path of symlinks.
+    "resolveJsonModule": true,                                  // Include modules imported with '.json' extension.
+                                                                // Emit options
+    "declaration": true,                                        // Generates corresponding '.d.ts' file.
+    "declarationDir": "dist/types",                             // Output directory for generated declaration files.
+    // "declarationMap": false,                                 // Generates a sourcemap for each corresponding '.d.ts' file.
+    // "emitBOM": false,                                        // Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files.
+    // "emitDeclarationOnly": false,                            // Only emit ‘.d.ts’ declaration files.
+    // "importHelpers": false,                                  // Import emit helpers from 'tslib'.
+    // "newLine": "LF",                                         // Use the specified end of line sequence to be used when emitting files: "crlf" (windows) or "lf" (unix).”
+    // "noEmit": true,                                          // Do not emit outputs.
+    // "noEmitHelpers": false,                                  // Do not generate custom helper functions like __extends in compiled output.
+    // "noEmitOnError": false,                                  // Do not emit outputs if any errors were reported.
+    // "noImplicitUseStrict": false,                            // Do not emit "use strict" directives in module output.
+    // "noResolve": false,                                      // Do not add triple-slash references or module import targets to the list of compiled files.
+    "preserveConstEnums": false,                                 // Do not erase const enum declarations in generated code.
+    // "removeComments": false,                                 // Remove all comments except copy-right header comments beginning with 
+    // "experimentalDecorators": true,                          // Enables experimental support for ES7 decorators.
+    // "emitDecoratorMetadata": true,                           // Enables experimental support for emitting type metadata for decorators.
+                                                                // Source map options
+    // "sourceMap": false,                                      // Generates corresponding '.map' file.
+    // "sourceRoot": "",                                        // Specify the location where debugger should locate TypeScript files instead of source locations.
+    // "mapRoot": "",                                           // Specify the location where debugger should locate map files instead of generated locations.
+    // "inlineSourceMap": true,                                 // Emit a single file with source maps instead of having a separate file.
+    // "inlineSources": true,                                   // Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set.
+                                                                // JSX options
+    // "jsx": "preserve",                                       // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
+    // "jsxFactory": "React.createElement",                     // Specify the JSX factory function to use when targeting react JSX emit, e.g. 'React.createElement' or 'h'.
+                                                                // Other options
+    // "allowUmdGlobalAccess": true,                            // Allow accessing UMD globals from modules.
+    // "charset": "utf8",                                       // The character set of the input files.
+    // "downlevelIteration": false,                             // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'.
+    // "disableSizeLimit": false,                               // Disable size limitation on JavaScript project.
+    // "keyofStringsOnly": false,                               // Resolve 'keyof' to string valued property names only (no numbers or symbols).
+    // "noLib": false,                                          // Do not include the default library file (lib.d.ts).
+    // "pretty": true,                                          // Stylize errors and messages using color and context.
+  }
+}