[IMP] reactivity: add support for derived properties

doc/readme.md

@@ -47,4 +47,3 @@ Utility/helpers:
 - [`status`](reference/component.md#status-helper): utility function to get the status of a component (new, mounted or destroyed)
 - [`validate`](reference/utils.md#validate): validates if an object satisfies a specified schema
 - [`whenReady`](reference/utils.md#whenready): utility function to execute code when DOM is ready
-- [`batched`](reference/utils.md#batched): utility function to batch function calls

doc/reference/props.md

@@ -140,28 +140,6 @@ class SomeComponent extends Component {
 The `.bind` suffix also implies `.alike`, so these props will not cause additional
 renderings.
 
-## Translatable props
-
-When you need to pass a user-facing string to a subcomponent, you likely want it
-to be translated. Unfortunately, because props are arbitrary expressions, it wouldn't
-be practical for Owl to find out which parts of the expression are strings and translate
-them, and it also makes it difficult for tooling to extract these strings to generate
-terms to translate. While you can work around this issue by doing the translation in
-JavaScript, or by using `t-set` with a body (the body of `t-set` is translated),
-and passing the variable as a prop, this is a sufficiently common use case that Owl
-provides a suffix for this purpose: `.translate`.
-
-```xml
-<t t-name="ParentComponent">
-    <Child someProp.translate="some message"/>
-</t>
-```
-
-Note that the content of this attribute is _NOT_ treated as a JavaScript expression:
-it is treated as a string, as if it was an attribute on an HTML element, and translated
-before being passed to the component. If you need to interpolate some data into the
-string, you will still have to do this in JavaScript.
-
 ## Dynamic Props
 
 The `t-props` directive can be used to specify totally dynamic props:
@@ -260,7 +238,7 @@ class ComponentB extends owl.Component {
     count: {type: Number},
     messages: {
       type: Array,
-      element: {type: Object, shape: {id: Boolean, text: String }}
+      element: {type: Object, shape: {id: Boolean, text: String }
     },
    date: Date,
    combinedVal: [Number, Boolean],
@@ -298,8 +276,7 @@ class ComponentB extends owl.Component {
         id: Number,
         name: {type: String, optional: true},
         url: String
-      }
+      ]},    // object, with keys id (number), name (string, optional) and url (string)
-    },  // object, with keys id (number), name (string, optional) and url (string)
     someObj3: {
       type: Object,
       values: { type: Array, element: String },

doc/reference/reactivity.md

@@ -193,7 +193,7 @@ to be able to opt out of creating them in the first place. This is the purpose o
 ### `markRaw`
 
 Marks an object so that it is ignored by the reactivity system, meaning that if this object is ever
-part of a reactive object, it will be returned as is, and no keys in that object will be
+part of a of a reactive object, it will be returned as is, and no keys in that object will be
 observed.
 
 ```js

doc/reference/slots.md

@@ -133,7 +133,7 @@ Slots can define a default content, in case the parent did not define them:
 ## Dynamic Slots
 
 The `t-slot` directive is actually able to use any expressions, using string
-interpolation:
+interplolation:
 
 ```xml
  <t t-slot="{{current}}" />
@@ -201,17 +201,16 @@ use this `Notebook` component:
 
 ```xml
 <Notebook>
-  <t t-set-slot="page1" title.translate="Page 1">
+  <t t-set-slot="page1" title="'Page 1'">
     <div>this is in the page 1</div>
   </t>
-  <t t-set-slot="page2" title.translate="Page 2" hidden="somevalue">
+  <t t-set-slot="page2" title="'Page 2'" hidden="somevalue">
     <div>this is in the page 2</div>
   </t>
 </Notebook>
 ```
 
-Slot params works like normal props, so one can use suffixes like `.translate`
+Slot params works like normal props, so one can use the `.bind` suffix to
-when a prop is a user facing string and should be translated, or `.bind` to
 bind a function if needed.
 
 ## Slot scopes

doc/reference/utils.md

@@ -9,7 +9,6 @@ functions are all available in the `owl.utils` namespace.
 - [`loadFile`](#loadfile): loading a file (useful for templates)
 - [`EventBus`](#eventbus): a simple EventBus
 - [`validate`](#validate): a validation function
-- [`batched`](#batched): batch function calls
 
 ## `whenReady`
 
@@ -79,22 +78,3 @@ validate(
 //    - 'id' is missing (should be a number),
 //    - 'url' is missing (should be a boolean or list of numbers),
 ```
-
-## `batched`
-
-The `batched` function creates a batched version of a callback so that multiple calls to it within the same microtick will only result in a single invocation of the original callback.
-
-```js
-function hello() {
-  console.log("hello");
-}
-
-const batchedHello = batched(hello);
-batchedHello();
-// Nothing is logged
-batchedHello();
-// Still not logged
-
-await Promise.resolve(); // Await the next microtick
-// "hello" is logged only once
-```

docs/owl.js

@@ -2622,7 +2622,7 @@ function wrapError(fn, hookName) {
                         result.catch(() => { }),
                         new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
                     ]).then((res) => {
-                        if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
+                        if (res === TIMEOUT && node.fiber === fiber) {
                             console.warn(timeoutError);
                         }
                     });
@@ -3512,7 +3512,7 @@ function compileExprToArray(expr) {
     const localVars = new Set();
     const tokens = tokenize(expr);
     let i = 0;
-    let stack = []; // to track last opening (, [ or {
+    let stack = []; // to track last opening [ or {
     while (i < tokens.length) {
         let token = tokens[i];
         let prevToken = tokens[i - 1];
@@ -3521,12 +3521,10 @@ function compileExprToArray(expr) {
         switch (token.type) {
             case "LEFT_BRACE":
             case "LEFT_BRACKET":
-            case "LEFT_PAREN":
                 stack.push(token.type);
                 break;
             case "RIGHT_BRACE":
             case "RIGHT_BRACKET":
-            case "RIGHT_PAREN":
                 stack.pop();
         }
         let isVar = token.type === "SYMBOL" && !RESERVED_WORDS.includes(token.value);
@@ -3638,13 +3636,6 @@ function isProp(tag, key) {
     }
     return false;
 }
-/**
- * Returns a template literal that evaluates to str. You can add interpolation
- * sigils into the string if required
- */
-function toStringExpression(str) {
-    return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
-}
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -3825,14 +3816,15 @@ class CodeGenerator {
             mainCode.push(``);
             for (let block of this.blocks) {
                 if (block.dom) {
-                    let xmlString = toStringExpression(block.asXmlString());
+                    let xmlString = block.asXmlString();
+                    xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
                     if (block.dynamicTagName) {
-                        xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+                        xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
-                        xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+                        xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-                        mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
+                        mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
                     }
                     else {
-                        mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
+                        mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
                     }
                 }
             }
@@ -4010,7 +4002,7 @@ class CodeGenerator {
         const isNewBlock = !block || forceNewBlock;
         if (isNewBlock) {
             block = this.createBlock(block, "comment", ctx);
-            this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
+            this.insertBlock(`comment(\`${ast.value}\`)`, block, {
                 ...ctx,
                 forceNewBlock: forceNewBlock && !block,
             });
@@ -4032,7 +4024,7 @@ class CodeGenerator {
         }
         if (!block || forceNewBlock) {
             block = this.createBlock(block, "text", ctx);
-            this.insertBlock(`text(${toStringExpression(value)})`, block, {
+            this.insertBlock(`text(\`${value}\`)`, block, {
                 ...ctx,
                 forceNewBlock: forceNewBlock && !block,
             });
@@ -4253,8 +4245,7 @@ class CodeGenerator {
             expr = compileExpr(ast.expr);
             if (ast.defaultValue) {
                 this.helpers.add("withDefault");
-                // FIXME: defaultValue is not translated
+                expr = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
-                expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
             }
         }
         if (!block || forceNewBlock) {
@@ -4507,7 +4498,7 @@ class CodeGenerator {
                 this.addLine(`${ctxVar}[zero] = ${bl};`);
             }
         }
-        const key = this.generateComponentKey();
+        const key = `key + \`${this.generateComponentKey()}\``;
         if (isDynamic) {
             const templateVar = generateId("template");
             if (!this.staticDefs.find((d) => d.id === "call")) {
@@ -4559,12 +4550,12 @@ class CodeGenerator {
         else {
             let value;
             if (ast.defaultValue) {
-                const defaultValue = toStringExpression(ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue);
+                const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
                 if (ast.value) {
-                    value = `withDefault(${expr}, ${defaultValue})`;
+                    value = `withDefault(${expr}, \`${defaultValue}\`)`;
                 }
                 else {
-                    value = defaultValue;
+                    value = `\`${defaultValue}\``;
                 }
             }
             else {
@@ -4575,12 +4566,12 @@ class CodeGenerator {
         }
         return null;
     }
-    generateComponentKey(currentKey = "key") {
+    generateComponentKey() {
         const parts = [generateId("__")];
         for (let i = 0; i < this.target.loopLevel; i++) {
             parts.push(`\${key${i + 1}}`);
         }
-        return `${currentKey} + \`${parts.join("__")}\``;
+        return parts.join("__");
     }
     /**
      * Formats a prop name and value into a string suitable to be inserted in the
@@ -4594,12 +4585,7 @@ class CodeGenerator {
      * "onClick.bind"    "onClick"        "onClick: bind(ctx, ctx['onClick'])"
      */
     formatProp(name, value) {
-        if (name.endsWith(".translate")) {
-            value = toStringExpression(this.translateFn(value));
-        }
-        else {
         value = this.captureExpression(value);
-        }
         if (name.includes(".")) {
             let [_name, suffix] = name.split(".");
             name = _name;
@@ -4608,7 +4594,6 @@ class CodeGenerator {
                     value = `(${value}).bind(this)`;
                     break;
                 case "alike":
-                case "translate":
                     break;
                 default:
                     throw new OwlError("Invalid prop suffix");
@@ -4677,6 +4662,7 @@ class CodeGenerator {
             this.addLine(`${propVar}.slots = markRaw(Object.assign(${slotDef}, ${propVar}.slots))`);
         }
         // cmap key
+        const key = this.generateComponentKey();
         let expr;
         if (ast.isDynamic) {
             expr = generateId("Comp");
@@ -4692,7 +4678,7 @@ class CodeGenerator {
             // todo: check the forcenewblock condition
             this.insertAnchor(block);
         }
-        let keyArg = this.generateComponentKey();
+        let keyArg = `key + \`${key}\``;
         if (ctx.tKeyExpr) {
             keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
         }
@@ -4765,7 +4751,7 @@ class CodeGenerator {
         }
         let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
         if (isMultiple) {
-            key = this.generateComponentKey(key);
+            key = `${key} + \`${this.generateComponentKey()}\``;
         }
         const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
         const scope = this.getPropString(props, dynProps);
@@ -4806,6 +4792,7 @@ class CodeGenerator {
         }
         let { block } = ctx;
         const name = this.compileInNewTarget("slot", ast.content, ctx);
+        const key = this.generateComponentKey();
         let ctxStr = "ctx";
         if (this.target.loopLevel || !this.hasSafeContext) {
             ctxStr = generateId("ctx");
@@ -4818,8 +4805,7 @@ class CodeGenerator {
             expr: `app.createComponent(null, false, true, false, false)`,
         });
         const target = compileExpr(ast.target);
-        const key = this.generateComponentKey();
+        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
-        const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
         if (block) {
             this.insertAnchor(block);
         }
@@ -5552,7 +5538,7 @@ function compile(template, options = {}) {
 }
 
 // do not modify manually. This file is generated by the release script.
-const version = "2.3.0";
+const version = "2.2.9";
 
 // -----------------------------------------------------------------------------
 //  Scheduler
@@ -5978,9 +5964,9 @@ TemplateSet.prototype._compileTemplate = function _compileTemplate(name, templat
     });
 };
 
-export { App, Component, EventBus, OwlError, __info__, batched, blockDom, loadFile, markRaw, markup, mount, onError, onMounted, onPatched, onRendered, onWillDestroy, onWillPatch, onWillRender, onWillStart, onWillUnmount, onWillUpdateProps, reactive, status, toRaw, useChildSubEnv, useComponent, useEffect, useEnv, useExternalListener, useRef, useState, useSubEnv, validate, validateType, whenReady, xml };
+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 = '2024-07-25T13:13:44.371Z';
+__info__.date = '2024-01-12T14:43:56.804Z';
-__info__.hash = '0cde4b8';
+__info__.hash = '7b3e39b';
 __info__.url = 'https://github.com/odoo/owl';

docs/playground/playground.js

@@ -41,6 +41,9 @@ const loadFile = (path) => {
  * Make an iframe, with all the js, css and xml properly injected.
  */
 function makeCodeIframe(js, css, xml) {
+  // escape backticks in the xml so they don't close the template string
+  const escapedXml = xml.replace(/`/g, '\\\`');
+
   const iframe = document.createElement("iframe");
   iframe.onload = () => {
     const doc = iframe.contentDocument;
@@ -52,8 +55,6 @@ function makeCodeIframe(js, css, xml) {
 
     const script = doc.createElement("script");
     script.type = "module";
-    // escape characters with special meaning in template literals
-    const escapedXml = xml.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${");
     script.textContent = `const TEMPLATES = \`${escapedXml}\`\n${js}`;
     doc.body.appendChild(script);
 
@@ -99,11 +100,6 @@ const SAMPLES = [
     folder: "todo_app",
     code: ["js", "xml", "css"],
   },
-  {
-    description: "Tic-Tac-Toe (with reactivity)",
-    folder: "tic_tac_toe",
-    code: ["js", "xml", "css"],
-  },
   {
     description: "Responsive app",
     folder: "responsive_app",

docs/playground/samples/tic_tac_toe/tic_tac_toe.css

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

docs/playground/samples/tic_tac_toe/tic_tac_toe.js

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

docs/playground/samples/tic_tac_toe/tic_tac_toe.xml

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

package-lock.json

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

package.json

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

src/compiler/code_generator.ts

@@ -82,14 +82,6 @@ function isProp(tag: string, key: string): boolean {
   return false;
 }
 
-/**
- * Returns a template literal that evaluates to str. You can add interpolation
- * sigils into the string if required
- */
-function toStringExpression(str: string) {
-  return `\`${str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/, "\\${")}\``;
-}
-
 // -----------------------------------------------------------------------------
 // BlockDescription
 // -----------------------------------------------------------------------------
@@ -319,13 +311,14 @@ export class CodeGenerator {
       mainCode.push(``);
       for (let block of this.blocks) {
         if (block.dom) {
-          let xmlString = toStringExpression(block.asXmlString());
+          let xmlString = block.asXmlString();
+          xmlString = xmlString.replace(/\\/g, "\\\\").replace(/`/g, "\\`");
           if (block.dynamicTagName) {
-            xmlString = xmlString.replace(/^`<\w+/, `\`<\${tag || '${block.dom.nodeName}'}`);
+            xmlString = xmlString.replace(/^<\w+/, `<\${tag || '${block.dom.nodeName}'}`);
-            xmlString = xmlString.replace(/\w+>`$/, `\${tag || '${block.dom.nodeName}'}>\``);
+            xmlString = xmlString.replace(/\w+>$/, `\${tag || '${block.dom.nodeName}'}>`);
-            mainCode.push(`let ${block.blockName} = tag => createBlock(${xmlString});`);
+            mainCode.push(`let ${block.blockName} = tag => createBlock(\`${xmlString}\`);`);
           } else {
-            mainCode.push(`let ${block.blockName} = createBlock(${xmlString});`);
+            mainCode.push(`let ${block.blockName} = createBlock(\`${xmlString}\`);`);
           }
         }
       }
@@ -522,7 +515,7 @@ export class CodeGenerator {
     const isNewBlock = !block || forceNewBlock;
     if (isNewBlock) {
       block = this.createBlock(block, "comment", ctx);
-      this.insertBlock(`comment(${toStringExpression(ast.value)})`, block, {
+      this.insertBlock(`comment(\`${ast.value}\`)`, block, {
         ...ctx,
         forceNewBlock: forceNewBlock && !block,
       });
@@ -546,7 +539,7 @@ export class CodeGenerator {
 
     if (!block || forceNewBlock) {
       block = this.createBlock(block, "text", ctx);
-      this.insertBlock(`text(${toStringExpression(value)})`, block, {
+      this.insertBlock(`text(\`${value}\`)`, block, {
         ...ctx,
         forceNewBlock: forceNewBlock && !block,
       });
@@ -781,8 +774,7 @@ export class CodeGenerator {
       expr = compileExpr(ast.expr);
       if (ast.defaultValue) {
         this.helpers.add("withDefault");
-        // FIXME: defaultValue is not translated
+        expr = `withDefault(${expr}, \`${ast.defaultValue}\`)`;
-        expr = `withDefault(${expr}, ${toStringExpression(ast.defaultValue)})`;
       }
     }
     if (!block || forceNewBlock) {
@@ -1047,7 +1039,7 @@ export class CodeGenerator {
       }
     }
 
-    const key = this.generateComponentKey();
+    const key = `key + \`${this.generateComponentKey()}\``;
     if (isDynamic) {
       const templateVar = generateId("template");
       if (!this.staticDefs.find((d) => d.id === "call")) {
@@ -1099,13 +1091,11 @@ export class CodeGenerator {
     } else {
       let value: string;
       if (ast.defaultValue) {
-        const defaultValue = toStringExpression(
+        const defaultValue = ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue;
-          ctx.translate ? this.translate(ast.defaultValue) : ast.defaultValue
-        );
         if (ast.value) {
-          value = `withDefault(${expr}, ${defaultValue})`;
+          value = `withDefault(${expr}, \`${defaultValue}\`)`;
         } else {
-          value = defaultValue;
+          value = `\`${defaultValue}\``;
         }
       } else {
         value = expr;
@@ -1116,12 +1106,12 @@ export class CodeGenerator {
     return null;
   }
 
-  generateComponentKey(currentKey: string = "key") {
+  generateComponentKey() {
     const parts = [generateId("__")];
     for (let i = 0; i < this.target.loopLevel; i++) {
       parts.push(`\${key${i + 1}}`);
     }
-    return `${currentKey} + \`${parts.join("__")}\``;
+    return parts.join("__");
   }
 
   /**
@@ -1136,11 +1126,7 @@ export class CodeGenerator {
    * "onClick.bind"    "onClick"        "onClick: bind(ctx, ctx['onClick'])"
    */
   formatProp(name: string, value: string): string {
-    if (name.endsWith(".translate")) {
-      value = toStringExpression(this.translateFn(value));
-    } else {
     value = this.captureExpression(value);
-    }
     if (name.includes(".")) {
       let [_name, suffix] = name.split(".");
       name = _name;
@@ -1149,7 +1135,6 @@ export class CodeGenerator {
           value = `(${value}).bind(this)`;
           break;
         case "alike":
-        case "translate":
           break;
         default:
           throw new OwlError("Invalid prop suffix");
@@ -1229,6 +1214,7 @@ export class CodeGenerator {
     }
 
     // cmap key
+    const key = this.generateComponentKey();
     let expr: string;
     if (ast.isDynamic) {
       expr = generateId("Comp");
@@ -1246,7 +1232,7 @@ export class CodeGenerator {
       this.insertAnchor(block);
     }
 
-    let keyArg = this.generateComponentKey();
+    let keyArg = `key + \`${key}\``;
     if (ctx.tKeyExpr) {
       keyArg = `${ctx.tKeyExpr} + ${keyArg}`;
     }
@@ -1325,7 +1311,7 @@ export class CodeGenerator {
     }
     let key = this.target.loopLevel ? `key${this.target.loopLevel}` : "key";
     if (isMultiple) {
-      key = this.generateComponentKey(key);
+      key = `${key} + \`${this.generateComponentKey()}\``;
     }
 
     const props = ast.attrs ? this.formatPropObject(ast.attrs) : [];
@@ -1368,6 +1354,7 @@ export class CodeGenerator {
 
     let { block } = ctx;
     const name = this.compileInNewTarget("slot", ast.content, ctx);
+    const key = this.generateComponentKey();
     let ctxStr = "ctx";
     if (this.target.loopLevel || !this.hasSafeContext) {
       ctxStr = generateId("ctx");
@@ -1381,8 +1368,7 @@ export class CodeGenerator {
     });
 
     const target = compileExpr(ast.target);
-    const key = this.generateComponentKey();
+    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, key + \`${key}\`, node, ctx, Portal)`;
-    const blockString = `${id}({target: ${target},slots: {'default': {__render: ${name}.bind(this), __ctx: ${ctxStr}}}}, ${key}, node, ctx, Portal)`;
     if (block) {
       this.insertAnchor(block);
     }

src/compiler/inline_expressions.ts

@@ -268,7 +268,7 @@ export function compileExprToArray(expr: string): Token[] {
   const localVars = new Set<string>();
   const tokens = tokenize(expr);
   let i = 0;
-  let stack = []; // to track last opening (, [ or {
+  let stack = []; // to track last opening [ or {
 
   while (i < tokens.length) {
     let token = tokens[i];
@@ -279,12 +279,10 @@ export function compileExprToArray(expr: string): Token[] {
     switch (token.type) {
       case "LEFT_BRACE":
       case "LEFT_BRACKET":
-      case "LEFT_PAREN":
         stack.push(token.type);
         break;
       case "RIGHT_BRACE":
       case "RIGHT_BRACKET":
-      case "RIGHT_PAREN":
         stack.pop();
     }
 

src/runtime/index.ts

@@ -41,7 +41,7 @@ export { useComponent, useState } from "./component_node";
 export { status } from "./status";
 export { reactive, markRaw, toRaw } from "./reactivity";
 export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
-export { batched, EventBus, whenReady, loadFile, markup } from "./utils";
+export { EventBus, whenReady, loadFile, markup } from "./utils";
 export {
   onWillStart,
   onMounted,

src/runtime/lifecycle_hooks.ts

@@ -28,7 +28,7 @@ function wrapError(fn: (...args: any[]) => any, hookName: string) {
             result.catch(() => {}),
             new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
           ]).then((res) => {
-            if (res === TIMEOUT && node.fiber === fiber && node.status <= 2) {
+            if (res === TIMEOUT && node.fiber === fiber) {
               console.warn(timeoutError);
             }
           });

src/runtime/reactivity.ts

@@ -227,6 +227,30 @@ export function reactive<T extends Target>(target: T, callback: Callback = NO_CA
     const proxy = new Proxy(target, handler as ProxyHandler<T>) as Reactive<T>;
     reactivesForTarget.set(callback, proxy);
     targets.set(proxy, target);
+    // FIXME: this probably slows down reactive creation significantly, we probably don't want to do
+    // it all the time. Maybe should be a separate function.
+    const derivedDescriptors = Object.entries(Object.getOwnPropertyDescriptors(target)).filter(
+      ([k, descriptor]) => {
+        if (toRaw(descriptor.value)?.[IS_DERIVED_DESCRIPTOR]) {
+          delete target[k as keyof typeof target]; // prevent circular call in effect below
+          return true;
+        }
+        return false;
+      }
+    );
+    for (const [
+      key,
+      {
+        value: [deps, compute],
+      },
+    ] of derivedDescriptors) {
+      effect(
+        (proxy, deps) => {
+          proxy[key as keyof typeof proxy] = Reflect.apply(compute, proxy, deps);
+        },
+        [proxy, deps]
+      );
+    }
   }
   return reactivesForTarget.get(callback) as Reactive<T>;
 }
@@ -463,3 +487,18 @@ function collectionsProxyHandler<T extends Collection>(
     },
   }) as ProxyHandler<T>;
 }
+
+const IS_DERIVED_DESCRIPTOR = Symbol("is derived descriptor");
+export function derived<T extends Reactive<any>[], U>(deps: T, compute: (...args: T) => U) {
+  return Object.assign([deps, compute], { [IS_DERIVED_DESCRIPTOR]: true }) as unknown as U;
+}
+
+/**
+ * Creates a side-effect that runs based on the content of reactive objects.
+ */
+export function effect<T extends object[]>(cb: (...args: [...T]) => void, deps: [...T]) {
+  const reactiveDeps = reactive(deps, () => {
+    cb(...reactiveDeps);
+  });
+  cb(...reactiveDeps);
+}

src/runtime/validation.ts

@@ -1,7 +1,16 @@
 import { OwlError } from "../common/owl_error";
 import { toRaw } from "./reactivity";
 
-type BaseType = { new (...args: any[]): any } | true | "*";
+type BaseType =
+  | typeof String
+  | typeof Boolean
+  | typeof Number
+  | typeof Date
+  | typeof Object
+  | typeof Array
+  | typeof Function
+  | true
+  | "*";
 
 interface TypeInfo {
   type?: TypeDescription;

src/version.ts

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

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

@@ -1,38 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`comments comment node with backslash at top level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comment(\` \\\\\\\\ \`);
-  }
-}"
-`;
-
-exports[`comments comment node with backtick at top-level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comment(\` \\\\\` \`);
-  }
-}"
-`;
-
-exports[`comments comment node with interpolation sigil at top level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return comment(\` \\\\\${very cool} \`);
-  }
-}"
-`;
-
 exports[`comments only a comment 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -341,39 +341,6 @@ exports[`simple templates, mostly static template with t tag with multiple conte
 }"
 `;
 
-exports[`simple templates, mostly static text node with backslash at top level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\\\\\\\\\`);
-  }
-}"
-`;
-
-exports[`simple templates, mostly static text node with backtick at top-level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\\\\\`\`);
-  }
-}"
-`;
-
-exports[`simple templates, mostly static text node with interpolation sigil at top level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(\`\\\\\${very cool}\`);
-  }
-}"
-`;
-
 exports[`simple templates, mostly static two t-escs next to each other 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -1,41 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`t-esc default with backslash at top level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withDefault } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(withDefault(undefined, \`\\\\\\\\\`));
-  }
-}"
-`;
-
-exports[`t-esc default with backtick at top-level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withDefault } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(withDefault(undefined, \`\\\\\`\`));
-  }
-}"
-`;
-
-exports[`t-esc default with interpolation sigil at top level 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { withDefault } = helpers;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(withDefault(undefined, \`\\\\\${very cool}\`));
-  }
-}"
-`;
-
 exports[`t-esc div with falsy values 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -1,50 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`t-set body with backslash at top level 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, \\"value\\", \`\\\\\\\\\`);
-    return text(ctx['value']);
-  }
-}"
-`;
-
-exports[`t-set body with backtick at top-level 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, \\"value\\", \`\\\\\`\`);
-    return text(ctx['value']);
-  }
-}"
-`;
-
-exports[`t-set body with interpolation sigil at top level 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, \\"value\\", \`\\\\\${very cool}\`);
-    return text(ctx['value']);
-  }
-}"
-`;
-
 exports[`t-set evaluate value expression 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/compiler/comments.test.ts

@@ -26,19 +26,4 @@ describe("comments", () => {
         </div>`;
     expect(renderToString(template)).toBe("<div><span>true</span></div>");
   });
-
-  test("comment node with backslash at top level", () => {
-    const template = "<!-- \\ -->";
-    expect(renderToString(template)).toBe("<!-- \\ -->");
-  });
-
-  test("comment node with backtick at top-level", () => {
-    const template = "<!-- ` -->";
-    expect(renderToString(template)).toBe("<!-- ` -->");
-  });
-
-  test("comment node with interpolation sigil at top level", () => {
-    const template = "<!-- ${very cool} -->";
-    expect(renderToString(template)).toBe("<!-- ${very cool} -->");
-  });
 });

tests/compiler/inline_expressions.test.ts

@@ -174,9 +174,6 @@ describe("expression evaluation", () => {
     expect(compileExpr("list.data.map((data) => data)")).toBe(
       "ctx['list'].data.map((_data)=>_data)"
     );
-    expect(compileExpr("(ev) => { myFunc(v1, v2, ev.target.value); }")).toBe(
-      "(_ev)=>{ctx['myFunc'](ctx['v1'],ctx['v2'],_ev.target.value);}"
-    );
   });
   test.skip("arrow functions: not yet supported", () => {
     // e is added to localvars in inline_expression but not removed after the arrow func body

tests/compiler/simple_templates.test.ts

@@ -154,19 +154,4 @@ describe("simple templates, mostly static", () => {
       </div>`;
     expect(renderToString(template, { a: "a", b: "b", c: "c" })).toBe("<div>abLoadingc</div>");
   });
-
-  test("text node with backslash at top level", () => {
-    const template = "\\";
-    expect(renderToString(template)).toBe("\\");
-  });
-
-  test("text node with backtick at top-level", () => {
-    const template = "`";
-    expect(renderToString(template)).toBe("`");
-  });
-
-  test("text node with interpolation sigil at top level", () => {
-    const template = "${very cool}";
-    expect(renderToString(template)).toBe("${very cool}");
-  });
 });

tests/compiler/t_esc.test.ts

@@ -121,19 +121,4 @@ describe("t-esc", () => {
     mount(bdom, fixture);
     expect(fixture.querySelector("span")!.textContent).toBe("<p>escaped</p>");
   });
-
-  test("default with backslash at top level", () => {
-    const template = '<t t-esc="undefined">\\</t>';
-    expect(renderToString(template)).toBe("\\");
-  });
-
-  test("default with backtick at top-level", () => {
-    const template = '<t t-esc="undefined">`</t>';
-    expect(renderToString(template)).toBe("`");
-  });
-
-  test("default with interpolation sigil at top level", () => {
-    const template = '<t t-esc="undefined">${very cool}</t>';
-    expect(renderToString(template)).toBe("${very cool}");
-  });
 });

tests/compiler/t_set.test.ts

@@ -54,21 +54,6 @@ describe("t-set", () => {
     expect(renderToString(template)).toBe("ok");
   });
 
-  test("body with backslash at top level", () => {
-    const template = '<t t-set="value">\\</t><t t-esc="value"/>';
-    expect(renderToString(template)).toBe("\\");
-  });
-
-  test("body with backtick at top-level", () => {
-    const template = '<t t-set="value">`</t><t t-esc="value"/>';
-    expect(renderToString(template)).toBe("`");
-  });
-
-  test("body with interpolation sigil at top level", () => {
-    const template = '<t t-set="value">${very cool}</t><t t-esc="value"/>';
-    expect(renderToString(template)).toBe("${very cool}");
-  });
-
   test("set from body literal (with t-if/t-else", () => {
     const template = `
       <t>

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

@@ -683,19 +683,6 @@ exports[`lifecycle hooks sub widget (inside sub node): hooks are correctly calle
 }"
 `;
 
-exports[`lifecycle hooks timeout in onWillStart doesn't emit a warning if app is destroyed 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  let block1 = createBlock(\`<span/>\`);
-  
-  return function template(ctx, node, key = \\"\\") {
-    return block1();
-  }
-}"
-`;
-
 exports[`lifecycle hooks timeout in onWillStart emits a warning 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -66,29 +66,6 @@ exports[`.alike suffix in a simple case 2`] = `
 }"
 `;
 
-exports[`.translate props are translated 1`] = `
-"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({message: \`translated message\`}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`.translate props are translated 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].message);
-  }
-}"
-`;
-
 exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -435,29 +412,6 @@ exports[`can bind function prop with bind suffix 2`] = `
 }"
 `;
 
-exports[`can use .translate suffix 1`] = `
-"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({message: \`some message\`}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`can use .translate suffix 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].message);
-  }
-}"
-`;
-
 exports[`do not crash when binding anonymous function prop with bind suffix 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -167,45 +167,6 @@ exports[`props validation can specify that additional props are allowed (object)
 }"
 `;
 
-exports[`props validation can use custom class as type 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"customObj\\"]);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props1 = {customObj: ctx['customObj']};
-    helpers.validateProps(\`Child\`, props1, this);
-    return comp1(props1, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`props validation can use custom class as type 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].customObj.val);
-  }
-}"
-`;
-
-exports[`props validation can use custom class as type: validation failure 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  const comp1 = app.createComponent(\`Child\`, true, false, false, [\\"customObj\\"]);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const props1 = {customObj: ctx['customObj']};
-    helpers.validateProps(\`Child\`, props1, this);
-    return comp1(props1, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
 exports[`props validation can validate a prop with multiple types 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

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

@@ -1,30 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`slots .translate slot props are translated 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {message: \`translated message\`}})}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots .translate slot props are translated 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].slots.default.message);
-  }
-}"
-`;
-
 exports[`slots can define a default content 1`] = `
 "function anonymous(app, bdom, helpers
 ) {
@@ -226,31 +201,6 @@ exports[`slots can render only empty slot 1`] = `
 }"
 `;
 
-exports[`slots can use .translate suffix on slot props 1`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  let { capture, markRaw } = helpers;
-  const comp1 = app.createComponent(\`Child\`, true, true, false, []);
-  
-  return function template(ctx, node, key = \\"\\") {
-    const ctx1 = capture(ctx);
-    return comp1({slots: markRaw({'default': {message: \`some message\`}})}, key + \`__1\`, node, this, null);
-  }
-}"
-`;
-
-exports[`slots can use .translate suffix on slot props 2`] = `
-"function anonymous(app, bdom, helpers
-) {
-  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
-  
-  return function template(ctx, node, key = \\"\\") {
-    return text(ctx['props'].slots.default.message);
-  }
-}"
-`;
-
 exports[`slots can use component in default-content of t-slot 1`] = `
 "function anonymous(app, bdom, helpers
 ) {

tests/components/lifecycle.test.ts

@@ -1,9 +1,5 @@
+import { App, Component, mount, onMounted, onWillStart, useState, xml } from "../../src";
 import {
-  App,
-  Component,
-  mount,
-  useState,
-  xml,
   onWillPatch,
   onWillUnmount,
   onPatched,
@@ -11,9 +7,7 @@ import {
   onWillRender,
   onWillDestroy,
   onRendered,
-  onMounted,
+} from "../../src/runtime/lifecycle_hooks";
-  onWillStart,
-} from "../../src";
 import { status } from "../../src/runtime/status";
 import {
   elem,
@@ -123,7 +117,6 @@ describe("lifecycle hooks", () => {
       timeoutCbs[++timeoutId] = cb;
       return timeoutId;
     }) as any;
-    try {
     class Test extends Component {
       static template = xml`<span/>`;
       setup() {
@@ -140,43 +133,8 @@ describe("lifecycle hooks", () => {
     await nextMicroTick();
     expect(console.warn).toHaveBeenCalledTimes(1);
     expect(warnArgs![0]!.message).toBe("onWillStart's promise hasn't resolved after 3 seconds");
-    } finally {
     console.warn = warn;
     window.setTimeout = setTimeout;
-    }
-  });
-
-  test("timeout in onWillStart doesn't emit a warning if app is destroyed", async () => {
-    const { warn } = console;
-    console.warn = jest.fn();
-    const { setTimeout } = window;
-    let timeoutCbs: any = {};
-    let timeoutId = 0;
-    window.setTimeout = ((cb: any) => {
-      timeoutCbs[++timeoutId] = cb;
-      return timeoutId;
-    }) as any;
-    try {
-      class Test extends Component {
-        static template = xml`<span/>`;
-        setup() {
-          onWillStart(() => new Promise(() => {}));
-        }
-      }
-      const app = new App(Test, { test: true });
-      app.mount(fixture);
-      app.destroy();
-      for (const id in timeoutCbs) {
-        timeoutCbs[id]();
-        delete timeoutCbs[id];
-      }
-      await nextMicroTick();
-      await nextMicroTick();
-      expect(console.warn).toHaveBeenCalledTimes(0);
-    } finally {
-      console.warn = warn;
-      window.setTimeout = setTimeout;
-    }
   });
 
   test("timeout in onWillUpdateProps emits a warning", async () => {
@@ -204,7 +162,6 @@ describe("lifecycle hooks", () => {
       return timeoutId;
     }) as any;
 
-    try {
     parent.state.prop = 2;
     let tick = nextTick();
     for (const id in timeoutCbs) {
@@ -222,10 +179,8 @@ describe("lifecycle hooks", () => {
     expect(warnArgs![0]!.message).toBe(
       "onWillUpdateProps's promise hasn't resolved after 3 seconds"
     );
-    } finally {
     console.warn = warn;
     window.setTimeout = setTimeout;
-    }
   });
 
   test("mounted hook is called if mounted in DOM", async () => {

tests/components/props.test.ts

@@ -299,34 +299,6 @@ test("bound functions are considered 'alike'", async () => {
   expect(fixture.innerHTML).toBe("3child");
 });
 
-test("can use .translate suffix", async () => {
-  class Child extends Component {
-    static template = xml`<t t-esc="props.message"/>`;
-  }
-
-  class Parent extends Component {
-    static template = xml`<Child message.translate="some message"/>`;
-    static components = { Child };
-  }
-
-  await mount(Parent, fixture);
-  expect(fixture.innerHTML).toBe("some message");
-});
-
-test(".translate props are translated", async () => {
-  class Child extends Component {
-    static template = xml`<t t-esc="props.message"/>`;
-  }
-
-  class Parent extends Component {
-    static template = xml`<Child message.translate="some message"/>`;
-    static components = { Child };
-  }
-
-  await mount(Parent, fixture, { translateFn: () => "translated message" });
-  expect(fixture.innerHTML).toBe("translated message");
-});
-
 test("throw if prop uses an unknown suffix", async () => {
   class Child extends Component {
     static template = xml`<t t-esc="props.val"/>`;

tests/components/props_validation.test.ts

@@ -829,52 +829,6 @@ describe("props validation", () => {
     expect(error!).toBeDefined();
     expect(error!.message).toBe("Invalid props for component 'Child': 'message' is missing");
   });
-
-  test("can use custom class as type", async () => {
-    class CustomClass {
-      val = "hey";
-    }
-    class Child extends Component {
-      static props = { customObj: CustomClass };
-      static template = xml`<t t-esc="props.customObj.val"/>`;
-    }
-
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child customObj="customObj" />`;
-      customObj = new CustomClass();
-    }
-
-    const app = new App(Parent, { test: true });
-    await app.mount(fixture);
-    expect(fixture.innerHTML).toBe("hey");
-  });
-
-  test("can use custom class as type: validation failure", async () => {
-    class CustomClass {}
-    class Child extends Component {
-      static props = { customObj: CustomClass };
-      static template = xml`<div>hey</div>`;
-    }
-
-    class Parent extends Component {
-      static components = { Child };
-      static template = xml`<Child customObj="customObj" />`;
-      customObj = {};
-    }
-
-    const app = new App(Parent, { test: true });
-    let error: OwlError | undefined;
-    const mountProm = app.mount(fixture).catch((e: Error) => (error = e));
-    await expect(nextAppError(app)).resolves.toThrow(
-      "Invalid props for component 'Child': 'customObj' is not a customclass"
-    );
-    await mountProm;
-    expect(error!).toBeDefined();
-    expect(error!.message).toBe(
-      "Invalid props for component 'Child': 'customObj' is not a customclass"
-    );
-  });
 });
 
 //------------------------------------------------------------------------------

tests/components/slots.test.ts

@@ -179,34 +179,6 @@ describe("slots", () => {
     expect(fixture.innerHTML).toBe("<span>default empty</span>");
   });
 
-  test("can use .translate suffix on slot props", async () => {
-    class Child extends Component {
-      static template = xml`<t t-esc="props.slots.default.message"/>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`<Child><t t-set-slot="default" message.translate="some message"/></Child>`;
-      static components = { Child };
-    }
-
-    await mount(Parent, fixture);
-    expect(fixture.innerHTML).toBe("some message");
-  });
-
-  test(".translate slot props are translated", async () => {
-    class Child extends Component {
-      static template = xml`<t t-esc="props.slots.default.message"/>`;
-    }
-
-    class Parent extends Component {
-      static template = xml`<Child><t t-set-slot="default" message.translate="some message"/></Child>`;
-      static components = { Child };
-    }
-
-    await mount(Parent, fixture, { translateFn: () => "translated message" });
-    expect(fixture.innerHTML).toBe("translated message");
-  });
-
   test("default slot with slot scope: shorthand syntax", async () => {
     let child: any;
     class Child extends Component {

tests/reactivity.test.ts

@@ -9,7 +9,7 @@ import {
   markRaw,
   toRaw,
 } from "../src";
-import { reactive, getSubscriptions } from "../src/runtime/reactivity";
+import { reactive, getSubscriptions, derived } from "../src/runtime/reactivity";
 import { batched } from "../src/runtime/utils";
 import {
   makeDeferred,
@@ -2424,3 +2424,156 @@ describe("Reactivity: useState", () => {
     expect(fixture.innerHTML).toBe("<div><p><span>2b</span></p></div>");
   });
 });
+
+describe("derived", () => {
+  test("can read", async () => {
+    const state = reactive({ a: derived([], () => 1) });
+    expect(state.a).toBe(1);
+  });
+
+  test("can create new keys", () => {
+    const state: any = reactive({ b: derived([], () => 2) });
+    state.a = 1;
+    expect(state.a).toBe(1);
+  });
+
+  test("can update", () => {
+    const o = reactive({ a: 1 });
+    let computeCall = 0;
+    const state = reactive({
+      a: derived([o], (o) => {
+        computeCall++;
+        return o.a;
+      }),
+    });
+    expect(computeCall).toBe(1);
+    expect(state.a).toBe(1);
+    o.a = 2;
+    expect(computeCall).toBe(2);
+    expect(state.a).toBe(2);
+  });
+
+  test("callback is called when changing an observed property", async () => {
+    let notifyCount = 0;
+    const o = reactive({ a: 1 });
+    let computeCall = 0;
+    const state = reactive(
+      {
+        a: derived([o], (o) => {
+          computeCall++;
+          return o.a;
+        }),
+      },
+      () => notifyCount++
+    );
+    expect(computeCall).toBe(1);
+    expect(notifyCount).toBe(0);
+    expect(state.a).toBe(1);
+    o.a = 2;
+    expect(computeCall).toBe(2);
+    expect(notifyCount).toBe(1);
+    expect(state.a).toBe(2);
+    o.a = 5;
+    expect(computeCall).toBe(3);
+    expect(notifyCount).toBe(2);
+    expect(state.a).toBe(5);
+  });
+
+  test("multiple dependencies", async () => {
+    let notifyCount = 0;
+    const a = reactive({ val: 1 });
+    const b = reactive({ val: 2 });
+    let computeCall = 0;
+    const state = reactive(
+      {
+        c: derived([a, b], (a, b) => {
+          computeCall++;
+          return a.val + b.val;
+        }),
+      },
+      () => notifyCount++
+    );
+    expect(computeCall).toBe(1);
+    a.val = 2;
+    expect(computeCall).toBe(2);
+    expect(notifyCount).toBe(0);
+    expect(state.c).toBe(4);
+    a.val = 4;
+    expect(computeCall).toBe(3);
+    expect(notifyCount).toBe(1);
+    expect(state.c).toBe(6);
+    b.val = 3;
+    expect(computeCall).toBe(4);
+    expect(notifyCount).toBe(2);
+    expect(state.c).toBe(7);
+  });
+
+  test("dependency on own fields", async () => {
+    let notifyCount = 0;
+    const a = reactive({ val: 1 });
+    let computeCall = 0;
+    const state = reactive(
+      {
+        b: 2,
+        c: derived([a], function (this: any, a) {
+          computeCall++;
+          return a.val + this.b;
+        }),
+      },
+      () => notifyCount++
+    );
+    expect(computeCall).toBe(1);
+    a.val = 2;
+    expect(computeCall).toBe(2);
+    expect(notifyCount).toBe(0);
+    expect(state.c).toBe(4);
+    a.val = 4;
+    expect(computeCall).toBe(3);
+    expect(notifyCount).toBe(1);
+    expect(state.c).toBe(6);
+    state.b = 3;
+    expect(computeCall).toBe(4);
+    expect(notifyCount).toBe(2);
+    expect(state.c).toBe(7);
+  });
+
+  test("dependency on derived property", () => {
+    let computeB = 0;
+    let computeC = 0;
+    const state = reactive({
+      a: 1,
+      b: derived([], function (this: any) {
+        computeB++;
+        return this.a + 1;
+      }),
+      c: derived([], function (this: any) {
+        computeC++;
+        return this.b + 1;
+      }),
+    });
+    expect(computeB).toBe(1);
+    expect(computeC).toBe(1);
+    expect(state.c).toBe(3);
+  });
+
+  test("dependency on derived property appearing later in object", () => {
+    let computeB = 0;
+    let computeC = 0;
+    const state = reactive({
+      a: 1,
+      c: derived([], function (this: any) {
+        computeC++;
+        return this.b + 1;
+      }),
+      b: derived([], function (this: any) {
+        computeB++;
+        return this.a + 1;
+      }),
+    });
+    expect(computeB).toBe(1);
+    // because computation is eager and naive, C is first computed to be undefined, then B is computed
+    // to be 2, and the computation of B causes C to recompute and become 3. This causes C to compute twice.
+    expect(computeC).toBe(2);
+    expect(state.c).toBe(3);
+  });
+});

tools/owl-vision/CHANGELOG.md

@@ -4,28 +4,6 @@ All notable changes to the "owl-vision" extension will be documented in this fil
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
-## [0.1.0] - 2024-11-06
-
-### Added
-
-- Basic autocomplete in xml files. This includes autocompletion for elements, components,
-  props, attributes, and javascript expressions.
-
-  The current implementation, while relatively simple, has a couple of drawbacks:
-  - Javascript imports are not resolved by the xml autocomplete, this means that it does not
-  understand the types of imported functions or objects. That said, I've added custom support
-  for frequently used Owl imports, namely `useState` and `useRef`. You can add more in
-  the settings if needed.
-  - The autocomplete is limited to templates directly linked to components, sub-templates
-  used via t-call will not get autocompletion as no component/context can be bound to them.
-
-- "Go To Definition" support for props and javascript expressions in xml
-- Support for the following directives: t-att, t-model, t-tag, t-debug, t-log
-
-### Fixed
-
-- Changed t-else syntax highlight from dynamic to static attribute
-
 ## [0.0.2] - 2023-2-11
 
 ### Added

tools/owl-vision/package-lock.json

@@ -1,20 +1,16 @@
 {
   "name": "owl-vision",
-    "version": "0.0.2",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "owl-vision",
-            "version": "0.0.2",
+      "version": "0.0.1",
       "license": "LGPL-3.0-only",
-            "dependencies": {
-                "xmldoc": "^1.3.0"
-            },
       "devDependencies": {
         "@types/node": "20.2.5",
         "@types/vscode": "^1.73.0",
-                "@types/xmldoc": "^1.1.9",
         "@typescript-eslint/eslint-plugin": "^5.59.8",
         "@typescript-eslint/parser": "^5.59.8",
         "@vscode/test-electron": "^2.3.2",
@@ -545,12 +541,6 @@
       "integrity": "sha512-BHu51NaNKOtDf3BOonY3sKFFmZKEpRkzqkZVpSYxowLbs5JqjOQemYFob7Gs5rpxE5tiGhfpnMpcdF/oKrLg4w==",
       "dev": true
     },
-        "node_modules/@types/xmldoc": {
-            "version": "1.1.9",
-            "resolved": "https://registry.npmjs.org/@types/xmldoc/-/xmldoc-1.1.9.tgz",
-            "integrity": "sha512-HLwIAudQ9xedPOK9rKd7gSHYzM5qtWOzae9z5tM7dRDR1hWeNlFSejfnxFMIv06mm2LmtX+pzVQ4GN86vf/b3g==",
-            "dev": true
-        },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -811,19 +801,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-        "node_modules/@vscode/vsce/node_modules/xml2js": {
-            "version": "0.5.0",
-            "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
-            "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
-            "dev": true,
-            "dependencies": {
-                "sax": ">=0.6.0",
-                "xmlbuilder": "~11.0.0"
-            },
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -2857,7 +2834,8 @@
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
-            "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "dev": true
     },
     "node_modules/semver": {
       "version": "7.5.4",
@@ -3236,6 +3214,19 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/xml2js": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
+      "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
+      "dev": true,
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/xmlbuilder": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
@@ -3245,14 +3236,6 @@
         "node": ">=4.0"
       }
     },
-        "node_modules/xmldoc": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-1.3.0.tgz",
-            "integrity": "sha512-y7IRWW6PvEnYQZNZFMRLNJw+p3pezM4nKYPfr15g4OOW9i8VpeydycFuipE2297OvZnh3jSb2pxOt9QpkZUVng==",
-            "dependencies": {
-                "sax": "^1.2.4"
-            }
-        },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -3569,12 +3552,6 @@
       "integrity": "sha512-BHu51NaNKOtDf3BOonY3sKFFmZKEpRkzqkZVpSYxowLbs5JqjOQemYFob7Gs5rpxE5tiGhfpnMpcdF/oKrLg4w==",
       "dev": true
     },
-        "@types/xmldoc": {
-            "version": "1.1.9",
-            "resolved": "https://registry.npmjs.org/@types/xmldoc/-/xmldoc-1.1.9.tgz",
-            "integrity": "sha512-HLwIAudQ9xedPOK9rKd7gSHYzM5qtWOzae9z5tM7dRDR1hWeNlFSejfnxFMIv06mm2LmtX+pzVQ4GN86vf/b3g==",
-            "dev": true
-        },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -3728,16 +3705,6 @@
             "once": "^1.3.0",
             "path-is-absolute": "^1.0.0"
           }
-                },
-                "xml2js": {
-                    "version": "0.5.0",
-                    "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
-                    "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
-                    "dev": true,
-                    "requires": {
-                        "sax": ">=0.6.0",
-                        "xmlbuilder": "~11.0.0"
-                    }
         }
       }
     },
@@ -5266,7 +5233,8 @@
     "sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
-            "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "dev": true
     },
     "semver": {
       "version": "7.5.4",
@@ -5545,20 +5513,22 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "xml2js": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
+      "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
+      "dev": true,
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
     "xmlbuilder": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
       "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
       "dev": true
     },
-        "xmldoc": {
-            "version": "1.3.0",
-            "resolved": "https://registry.npmjs.org/xmldoc/-/xmldoc-1.3.0.tgz",
-            "integrity": "sha512-y7IRWW6PvEnYQZNZFMRLNJw+p3pezM4nKYPfr15g4OOW9i8VpeydycFuipE2297OvZnh3jSb2pxOt9QpkZUVng==",
-            "requires": {
-                "sax": "^1.2.4"
-            }
-        },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

tools/owl-vision/package.json

@@ -4,7 +4,7 @@
     "description": "Owl framework extension that highlights templates and ease navigation between components and templates.",
     "publisher": "Odoo",
     "license": "LGPL-3.0-only",
-    "version": "0.1.0",
+    "version": "0.0.2",
     "repository": {
         "type": "git",
         "url": "https://github.com/odoo/owl/tree/master/tools/owl-vision"
@@ -63,13 +63,6 @@
                     "type": "string",
                     "default": "**/node_modules/**,**/lib/**,**/tests/**",
                     "description": "Files to exclude in search"
-                },
-                "owl-vision.autocomplete-mocks": {
-                    "order": 2,
-                    "type": "string",
-                    "editPresentation": "multilineText",
-                    "default": "/**\n* @template T\n* @param {T} obj\n* @returns {T}\n*/\nfunction useState(obj) {}\n\n/**\n* @typedef {Object} Ref\n* @property {HTMLElement} el\n*/\n/**\n* @returns {Ref}\n*/\nfunction useRef(name) {}",
-                    "description": "Mocks for functions or object that are imported but not resolved by the autcomplete. Add docstring comments for them to work properly."
                 }
             }
         },
@@ -135,7 +128,6 @@
     "devDependencies": {
         "@types/node": "20.2.5",
         "@types/vscode": "^1.73.0",
-        "@types/xmldoc": "^1.1.9",
         "@typescript-eslint/eslint-plugin": "^5.59.8",
         "@typescript-eslint/parser": "^5.59.8",
         "@vscode/test-electron": "^2.3.2",
@@ -143,8 +135,5 @@
         "esbuild": "^0.19.5",
         "eslint": "^8.41.0",
         "typescript": "^5.1.3"
-    },
-    "dependencies": {
-        "xmldoc": "^1.3.0"
     }
 }

tools/owl-vision/scripts/syntax_parts/owl_attributes.mjs

@@ -62,6 +62,7 @@ export const propsAttributes = createAttributePatterns("props-attributes", {
 export const owlAttributesDynamic = createAttributePatterns("owl-attributes-dynamic", {
     match: [
         "t-if",
+        "t-else",
         "t-elif",
         "t-foreach",
         "t-as",
@@ -74,10 +75,6 @@ export const owlAttributesDynamic = createAttributePatterns("owl-attributes-dyna
         "t-value",
         "t-portal",
         "t-slot-scope",
-        "t-att",
-        "t-tag",
-        "t-log",
-        "t-model",
         "t-att-[a-z_:.-]+",
         "t-on-[a-z_:.-]+"
     ].join("|"),
@@ -89,13 +86,12 @@ export const owlAttributesDynamic = createAttributePatterns("owl-attributes-dyna
 export const owlAttributesStatic = createAttributePatterns("owl-attributes-static", {
     match: [
         "t-name",
-        "t-else",
         "t-ref",
         "t-set-slot",
+        "t-model",
         "t-inherit",
         "t-inherit-mode",
-        "t-translation",
+        "t-translation"
-        "t-debug",
     ].join("|"),
     attributeName: "owl.attribute owl.attribute.static",
 });

tools/owl-vision/src/definiton_providers.ts

@@ -0,0 +1,29 @@
+import * as vscode from 'vscode';
+import { getSelectedText, showStatusMessage, hideStatusMessage } from './utils';
+import { Search } from './search';
+
+export class ComponentDefinitionProvider implements vscode.DefinitionProvider {
+
+    search: Search;
+
+    constructor(search: Search) {
+        this.search = search;
+    }
+
+    /**
+     * Interface implementation to provide definition when ctrl+click on Component
+     * tag in template.
+     */
+    async provideDefinition(document: vscode.TextDocument, position: vscode.Position) {
+        const currentWord = getSelectedText(/<\/?[A-Z][a-zA-Z]+/, document, position);
+        if (!currentWord) {
+            return;
+        }
+        const componentName = currentWord.replace(/[\/<]/g, "").trim();
+
+        showStatusMessage(`Searching for component "${componentName}"`);
+        const result = await this.search.findComponent(componentName);
+        hideStatusMessage();
+        return result;
+    }
+}

tools/owl-vision/src/extension.ts

@@ -1,19 +1,20 @@
 import * as vscode from 'vscode';
 import { Search } from './search';
+import { ComponentDefinitionProvider } from './definiton_providers';
 import { OpenDirection } from './utils';
-import { OwlLanguageFeaturesProvider } from './language_features/language_features_provider';
 
 export async function activate(context: vscode.ExtensionContext) {
     const search = new Search();
+
     context.subscriptions.push(vscode.commands.registerCommand('owl-vision.switch', () => search.switch()));
     context.subscriptions.push(vscode.commands.registerCommand('owl-vision.switch-besides', () => search.switch(OpenDirection.Besides)));
     context.subscriptions.push(vscode.commands.registerCommand('owl-vision.switch-below', () => search.switch(OpenDirection.Below)));
     context.subscriptions.push(vscode.commands.registerCommand('owl-vision.find-component', () => search.findComponentCommand()));
     context.subscriptions.push(vscode.commands.registerCommand('owl-vision.find-template', () => search.findTemplateCommand()));
 
-    const languageFeaturesProvider = new OwlLanguageFeaturesProvider(search);
+    const componentDefProvider = new ComponentDefinitionProvider(search);
-	context.subscriptions.push(vscode.languages.registerCompletionItemProvider({ language: 'xml', scheme: 'file' }, languageFeaturesProvider, '.', '<'));
+    context.subscriptions.push(vscode.languages.registerDefinitionProvider({ language: 'xml' }, componentDefProvider));
-    context.subscriptions.push(vscode.languages.registerDefinitionProvider({ language: 'xml', scheme: 'file' }, languageFeaturesProvider));
+    context.subscriptions.push(vscode.languages.registerDefinitionProvider({ language: 'javascript' }, componentDefProvider));
 }
 
 export function deactivate() { }

tools/owl-vision/src/language_features/items.ts

@@ -1,395 +0,0 @@
-import { CompletionItemKind } from "vscode"
-
-export const owlComponentAttributes = [
-    "t-if",
-    "t-else",
-    "t-elif",
-    "t-foreach",
-    "t-as",
-    "t-key",
-    "t-esc",
-    "t-out",
-    "t-props",
-    "t-set",
-    "t-value",
-    "t-portal",
-    "t-slot-scope",
-    "t-log",
-].map(label => ({
-    label: label,
-    insertText: label + '=""',
-    kind: CompletionItemKind.Property,
-}));
-
-export const owlElementAttributes = [
-    "t-component",
-    "t-att",
-    "t-tag",
-    "t-model",
-].map(label => ({
-    label: label,
-    insertText: label + '=""',
-    kind: CompletionItemKind.Property,
-}));
-
-owlElementAttributes.push(...owlComponentAttributes);
-
-/**
-To generate this list, run the following snippet on https://developer.mozilla.org/fr/docs/Web/Events
-
-(function () {
-  const events = [...document.querySelectorAll(".section-content li a")]
-    .map(e => e.childNodes[0])
-    .filter(n => n.nodeType === 3 && n.textContent.toLowerCase() == n.textContent)
-    .map(n => "t-on-" + n.textContent.trim());
-  return JSON.stringify([...new Set(events)], null, 2);
-}())
-*/
-export const events = [
-    "t-on-abort",
-    "t-on-ended",
-    "t-on-addtrack",
-    "t-on-change",
-    "t-on-removetrack",
-    "t-on-messageerror",
-    "t-on-message",
-    "t-on-animationcancel",
-    "t-on-animationend",
-    "t-on-animationiteration",
-    "t-on-animationstart",
-    "t-on-copy",
-    "t-on-cut",
-    "t-on-dragend",
-    "t-on-dragenter",
-    "t-on-dragleave",
-    "t-on-dragover",
-    "t-on-dragstart",
-    "t-on-drag",
-    "t-on-drop",
-    "t-on-fullscreenchange",
-    "t-on-fullscreenerror",
-    "t-on-gotpointercapture",
-    "t-on-keydown",
-    "t-on-keypress",
-    "t-on-keyup",
-    "t-on-lostpointercapture",
-    "t-on-paste",
-    "t-on-pointercancel",
-    "t-on-pointerdown",
-    "t-on-pointerenter",
-    "t-on-pointerleave",
-    "t-on-pointerlockchange",
-    "t-on-pointerlockerror",
-    "t-on-pointermove",
-    "t-on-pointerout",
-    "t-on-pointerover",
-    "t-on-pointerup",
-    "t-on-readystatechange",
-    "t-on-scroll",
-    "t-on-selectionchange",
-    "t-on-selectstart",
-    "t-on-touchcancel",
-    "t-on-touchend",
-    "t-on-touchmove",
-    "t-on-touchstart",
-    "t-on-transitioncancel",
-    "t-on-transitionend",
-    "t-on-transitionrun",
-    "t-on-transitionstart",
-    "t-on-visibilitychange",
-    "t-on-wheel",
-    "t-on-afterscriptexecute",
-    "t-on-auxclick",
-    "t-on-beforescriptexecute",
-    "t-on-blur",
-    "t-on-click",
-    "t-on-compositionend",
-    "t-on-compositionstart",
-    "t-on-compositionupdate",
-    "t-on-contextmenu",
-    "t-on-dblclick",
-    "t-on-error",
-    "t-on-focusin",
-    "t-on-focusout",
-    "t-on-focus",
-    "t-on-gesturechange",
-    "t-on-gestureend",
-    "t-on-gesturestart",
-    "t-on-mousedown",
-    "t-on-mouseenter",
-    "t-on-mouseleave",
-    "t-on-mousemove",
-    "t-on-mouseout",
-    "t-on-mouseover",
-    "t-on-mouseup",
-    "t-on-mousewheel",
-    "t-on-overflow",
-    "t-on-select",
-    "t-on-show",
-    "t-on-underflow",
-    "t-on-webkitmouseforcechanged",
-    "t-on-webkitmouseforcedown",
-    "t-on-webkitmouseforceup",
-    "t-on-webkitmouseforcewillbegin",
-    "t-on-open",
-    "t-on-loadend",
-    "t-on-loadstart",
-    "t-on-load",
-    "t-on-progress",
-    "t-on-webglcontextcreationerror",
-    "t-on-webglcontextlost",
-    "t-on-webglcontextrestored",
-    "t-on-toggle",
-    "t-on-cancel",
-    "t-on-close",
-    "t-on-beforeinput",
-    "t-on-input",
-    "t-on-formdata",
-    "t-on-reset",
-    "t-on-submit",
-    "t-on-invalid",
-    "t-on-search",
-    "t-on-canplaythrough",
-    "t-on-canplay",
-    "t-on-durationchange",
-    "t-on-emptied",
-    "t-on-loadeddata",
-    "t-on-loadedmetadata",
-    "t-on-pause",
-    "t-on-playing",
-    "t-on-play",
-    "t-on-ratechange",
-    "t-on-seeked",
-    "t-on-seeking",
-    "t-on-stalled",
-    "t-on-suspend",
-    "t-on-timeupdate",
-    "t-on-volumechange",
-    "t-on-waiting",
-    "t-on-slotchange",
-    "t-on-cuechange",
-    "t-on-enterpictureinpicture",
-    "t-on-leavepictureinpicture",
-    "t-on-versionchange",
-    "t-on-blocked",
-    "t-on-upgradeneeded",
-    "t-on-success",
-    "t-on-complete",
-    "t-on-devicechange",
-    "t-on-mute",
-    "t-on-unmute",
-    "t-on-merchantvalidation",
-    "t-on-paymentmethodchange",
-    "t-on-shippingaddresschange",
-    "t-on-shippingoptionchange",
-    "t-on-payerdetailchange",
-    "t-on-resourcetimingbufferfull",
-    "t-on-resize",
-    "t-on-bufferedamountlow",
-    "t-on-closing",
-    "t-on-tonechange",
-    "t-on-gatheringstatechange",
-    "t-on-selectedcandidatepairchange",
-    "t-on-statechange",
-    "t-on-addstream",
-    "t-on-connectionstatechange",
-    "t-on-datachannel",
-    "t-on-icecandidateerror",
-    "t-on-icecandidate",
-    "t-on-iceconnectionstatechange",
-    "t-on-icegatheringstatechange",
-    "t-on-negotiationneeded",
-    "t-on-removestream",
-    "t-on-signalingstatechange",
-    "t-on-track",
-    "t-on-audioprocess",
-    "t-on-activate",
-    "t-on-contentdelete",
-    "t-on-install",
-    "t-on-notificationclick",
-    "t-on-pushsubscriptionchange",
-    "t-on-push",
-    "t-on-connect",
-    "t-on-audioend",
-    "t-on-audiostart",
-    "t-on-end",
-    "t-on-nomatch",
-    "t-on-result",
-    "t-on-soundend",
-    "t-on-soundstart",
-    "t-on-speechend",
-    "t-on-speechstart",
-    "t-on-start",
-    "t-on-voiceschanged",
-    "t-on-boundary",
-    "t-on-mark",
-    "t-on-resume",
-    "t-on-unload",
-    "t-on-afterprint",
-    "t-on-appinstalled",
-    "t-on-beforeprint",
-    "t-on-beforeunload",
-    "t-on-devicemotion",
-    "t-on-deviceorientation",
-    "t-on-gamepadconnected",
-    "t-on-gamepaddisconnected",
-    "t-on-hashchange",
-    "t-on-languagechange",
-    "t-on-offline",
-    "t-on-online",
-    "t-on-orientationchange",
-    "t-on-pagehide",
-    "t-on-pageshow",
-    "t-on-popstate",
-    "t-on-rejectionhandled",
-    "t-on-storage",
-    "t-on-unhandledrejection",
-    "t-on-vrdisplayactivate",
-    "t-on-vrdisplayblur",
-    "t-on-vrdisplayconnect",
-    "t-on-vrdisplaydeactivate",
-    "t-on-vrdisplaydisconnect",
-    "t-on-vrdisplayfocus",
-    "t-on-vrdisplaypointerrestricted",
-    "t-on-vrdisplaypointerunrestricted",
-    "t-on-vrdisplaypresentchange",
-    "t-on-timeout",
-    "t-on-inputsourceschange",
-    "t-on-selectend",
-    "t-on-squeezeend",
-    "t-on-squeezestart",
-    "t-on-squeeze"
-].map(label => ({
-    label: label,
-    insertText: label + '=""',
-    kind: CompletionItemKind.Property,
-}))
-
-
-/**
-To generate the elements list, run the following snippet on https://developer.mozilla.org/en-US/docs/Web/HTML/Element
-
-(function () {
-  const names = [...document.querySelectorAll("section:not([aria-labelledby='obsolete_and_deprecated_elements']) td:nth-child(1)")]
-  .flatMap(n => n.innerText.split(","))
-  .map(n => n.trim().replace("<", "").replace(">", ""))
-  return JSON.stringify([...new Set(names)], null, 2);
-})()
-*/
-export const elements = [
-    "t",
-    "link",
-    "meta",
-    "style",
-    "title",
-    "body",
-    "address",
-    "article",
-    "aside",
-    "footer",
-    "header",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "hgroup",
-    "main",
-    "nav",
-    "section",
-    "search",
-    "blockquote",
-    "dd",
-    "div",
-    "dl",
-    "dt",
-    "figcaption",
-    "figure",
-    "hr",
-    "li",
-    "menu",
-    "ol",
-    "p",
-    "pre",
-    "ul",
-    "a",
-    "abbr",
-    "b",
-    "bdi",
-    "bdo",
-    "br",
-    "cite",
-    "code",
-    "data",
-    "dfn",
-    "em",
-    "i",
-    "kbd",
-    "mark",
-    "q",
-    "rp",
-    "rt",
-    "ruby",
-    "s",
-    "samp",
-    "small",
-    "span",
-    "strong",
-    "sub",
-    "sup",
-    "time",
-    "u",
-    "var",
-    "wbr",
-    "area",
-    "audio",
-    "img",
-    "map",
-    "track",
-    "video",
-    "embed",
-    "iframe",
-    "object",
-    "picture",
-    "portal",
-    "source",
-    "svg",
-    "math",
-    "canvas",
-    "noscript",
-    "script",
-    "del",
-    "ins",
-    "caption",
-    "col",
-    "colgroup",
-    "table",
-    "tbody",
-    "td",
-    "tfoot",
-    "th",
-    "thead",
-    "tr",
-    "button",
-    "datalist",
-    "fieldset",
-    "form",
-    "input",
-    "label",
-    "legend",
-    "meter",
-    "optgroup",
-    "option",
-    "output",
-    "progress",
-    "select",
-    "textarea",
-    "details",
-    "dialog",
-    "summary",
-].map(label => ({
-    label: label,
-    insertText: label,
-    kind: CompletionItemKind.Property,
-}));

tools/owl-vision/src/language_features/language_features_provider.ts

@@ -1,422 +0,0 @@
-import { CancellationToken, CompletionContext, CompletionItem, CompletionItemKind, CompletionItemProvider, CompletionList, DefinitionProvider, Location, Position, Range, TextDocument, TextDocumentContentProvider, Uri, commands, workspace } from "vscode";
-import { Search } from "../search";
-import { getSelectedText, hash, readFile } from "../utils";
-import { elements, events, owlComponentAttributes, owlElementAttributes } from "./items";
-import { ParseResultType, ParseResult, parse, getNodePath, parseXml } from "./parser";
-
-/**
- * Commands return basic js object which needs to be converted
- * to actual CompletionItem instances, this methods streamlines
- * this process.
- */
-function mapCompletionItems(items: any): CompletionItem[] {
-    return items.map((i: any) => {
-        const item = new CompletionItem(i.label, i.kind);
-        item.sortText = i.sortText;
-        item.detail = i.detail;
-        item.filterText = i.filterText;
-        item.insertText = i.insertText?.startsWith?.(".") ? i.insertText.substring(1) : i.insertText;
-        return item;
-    });
-}
-
-function filterComponentItems(items: CompletionItem[], excludedLabels: string[] = []): CompletionItem[] {
-    return items.filter((item) => {
-        return !excludedLabels.includes(item.label.toString()) && [
-            CompletionItemKind.Field,
-            CompletionItemKind.Method,
-            CompletionItemKind.Variable,
-            CompletionItemKind.Property,
-        ].includes(item.kind as number);
-    });
-}
-
-/**
- * Adds "this." in front of the expression if needed and increments
- * the expression offset accordingly.
- */
-function contextualize(properties: string[], expression: string, expressionOffset = 0) {
-    const match = expression.match(/^([a-zA-Z_]+)\b/);
-    if (!expression.startsWith("this.") && ((match && properties.includes(match[1])) || expression.match(/^\s*$/))) {
-        expression = "this." + expression;
-        expressionOffset += 5;
-    }
-    return { expression, expressionOffset };
-};
-
-const Commands = {
-    Completion: "vscode.executeCompletionItemProvider",
-    Definition: "vscode.executeDefinitionProvider",
-}
-
-export class OwlLanguageFeaturesProvider implements CompletionItemProvider, TextDocumentContentProvider, DefinitionProvider {
-
-    virtualDocuments = new Map();
-    componentProperties = new Map();
-    search: Search;
-
-    constructor(search: Search) {
-        this.search = search;
-        workspace.registerTextDocumentContentProvider("owl", this);
-    }
-
-    /**
-     * TextDocumentContentProvider interface implementation to provide
-     * virtual documents to vscode commands.
-     */
-    async provideTextDocumentContent(uri: Uri) {
-        const id = uri.toString(true);
-        return this.virtualDocuments.get(id);
-    }
-
-    /**
-     * DefinitionProvider interface implementation.
-     *
-     * - If the target is a js expression, will try to find the definition
-     * inside the current component.
-     * - If the target is a component element, will try to find the definition
-     * of the component.
-     */
-    async provideDefinition(document: TextDocument, position: Position) {
-        let offset = document.offsetAt(position);
-        const documentText = document.getText();
-        const parseResult = await parse(documentText, offset);
-
-        if (parseResult.type === ParseResultType.Expression) {
-            const component = await this.search.getCurrentComponent();
-            if (!component) {
-                return;
-            }
-
-            const { xmlDocument, xmlNode } = parseXml(documentText, offset);
-            const componentText = await readFile(component.uri);
-            const virtualDocument = await this.getVirtualJsDocument(document.uri, component.componentName, componentText, xmlDocument, xmlNode, parseResult);
-
-            const definitions: any = await this.executeCommand(
-                Commands.Definition,
-                document.uri,
-                virtualDocument.content,
-                virtualDocument.offset
-            );
-
-            if (definitions.length > 0) {
-                const selectionRange = definitions[0].targetSelectionRange;
-                const range = new Range(
-                    new Position(selectionRange.start.line, selectionRange.start.character),
-                    new Position(selectionRange.end.line, selectionRange.end.character),
-                )
-                return new Location(component.uri, range);
-            }
-        } else if (parseResult.type === ParseResultType.Attribute) {
-            const { xmlNode } = parseXml(documentText, offset);
-
-            const childComponent = await this.search.findComponent(xmlNode.name);
-            if (!childComponent) {
-                return [];
-            }
-
-            const modifiersRegex = new RegExp([
-                "\\.bind",
-                "\\.stop",
-                "\\.prevent",
-                "\\.self",
-                "\\.capture",
-                "\\.sythetic",
-            ].join("|"), "g");
-
-            let attributeName = getSelectedText(/\b[a-zA-Z0-9_\-.]+\b/, document, position)
-            attributeName = attributeName?.replace(modifiersRegex, "") ?? "";
-
-            const componentText = await readFile(childComponent.uri);
-            const content = `${componentText}\n${xmlNode.name}.props.${attributeName}`;
-            const definitions: any = await this.executeCommand(Commands.Definition, document.uri, content);
-
-            if (definitions.length > 0) {
-                const selectionRange = definitions[0].targetSelectionRange;
-                const range = new Range(
-                    new Position(selectionRange.start.line, selectionRange.start.character),
-                    new Position(selectionRange.end.line, selectionRange.end.character),
-                )
-                return new Location(childComponent.uri, range);
-            }
-        } else if (parseResult.type === ParseResultType.Element) {
-            const currentWord = getSelectedText(/<\/?[A-Z][a-zA-Z]+/, document, position);
-            if (!currentWord) {
-                return;
-            }
-            const componentName = currentWord.replace(/[\/<]/g, "").trim();
-            return await this.search.findComponent(componentName);
-        }
-    }
-
-    /**
-     * CompletionItemProvider interface implementation
-     *
-     * See {@link provideElementItems}, {@link provideAttributeItems} and {@link provideExpressionItems}
-     * for further details.
-     */
-    async provideCompletionItems(
-        document: TextDocument,
-        position: Position,
-        token: CancellationToken,
-        context: CompletionContext
-    ): Promise<CompletionItem[]> {
-        const component = await this.search.getCurrentComponent();
-        if (!component || token.isCancellationRequested) {
-            return [];
-        }
-
-        const offset = document.offsetAt(position);
-        const documentText = document.getText();
-
-        const parseResult = await parse(documentText, offset);
-        const { xmlDocument, xmlNode } = parseXml(documentText, offset);
-
-        if (parseResult.type === ParseResultType.Expression) {
-            return this.provideExpressionItems(document.uri, component.uri, component.componentName, xmlDocument, xmlNode, parseResult);
-        } else if (parseResult.type === ParseResultType.Attribute) {
-            return this.provideAttributeItems(document.uri, xmlNode);
-        } else if (parseResult.type === ParseResultType.Element) {
-            return this.provideElementItems(document.uri, component.uri, component.componentName, parseResult);
-        }
-
-        return [];
-    }
-
-    /**
-     * Returns the completion items for attributes.
-     * - Returns props if the element is a component
-     * - Returns the owl directives based on the element type
-     */
-    private async provideAttributeItems(
-        documentUri: Uri,
-        xmlNode: any,
-    ): Promise<CompletionItem[]> {
-        if (!xmlNode || xmlNode.name === xmlNode.name.toLowerCase()) {
-            return [...owlElementAttributes, ...events];
-        }
-
-        const childComponent = await this.search.findComponent(xmlNode.name);
-        if (!childComponent) {
-            return [];
-        }
-
-        const componentText = await readFile(childComponent.uri);
-        const content = `${componentText}\n${xmlNode.name}.props.`;
-        const list = await this.executeCommand(Commands.Completion, documentUri, content) as CompletionList;
-
-        const modifiersRegex = new RegExp([
-            "\\.bind",
-            "\\.stop",
-            "\\.prevent",
-            "\\.self",
-            "\\.capture",
-            "\\.sythetic",
-        ].join("|"), "g");
-
-        const excludedAttrs = [
-            "slots",
-            ...Object.keys(xmlNode.attr).map(attr => attr.replace(modifiersRegex, ""))
-        ];
-
-        return mapCompletionItems(filterComponentItems([
-            ...owlComponentAttributes,
-            ...list.items
-        ], excludedAttrs));
-    }
-
-    /**
-     * Returns the completion items for elements, this includes
-     * components, "t" and html elements.
-     */
-    private async provideElementItems(
-        documentUri: Uri,
-        componentUri: Uri,
-        componentName: string,
-        parseResult: any,
-    ): Promise<CompletionItem[]> {
-        const componentText = await readFile(componentUri);
-
-        const content = `${componentText}\n${componentName}.components.${parseResult.expression}`;
-        const list = await this.executeCommand(Commands.Completion, documentUri, content) as CompletionList;
-
-        return mapCompletionItems([
-            ...elements,
-            ...filterComponentItems(list.items),
-        ]);
-    }
-
-    /**
-     * Returns the completion items for a js expression
-     */
-    private async provideExpressionItems(
-        documentUri: Uri,
-        componentUri: Uri,
-        componentName: string,
-        xmlDocument: any,
-        xmlNode: any,
-        parseResult: ParseResult,
-    ): Promise<CompletionItem[]> {
-        let { attributeName } = parseResult;
-
-        const dynamicAttributeRegex = new RegExp([
-            "t-if",
-            "t-elif",
-            "t-foreach",
-            "t-as",
-            "t-key",
-            "t-esc",
-            "t-out",
-            "t-props",
-            "t-component",
-            "t-set",
-            "t-value",
-            "t-portal",
-            "t-slot-scope",
-            "t-att",
-            "t-tag",
-            "t-log",
-            "t-model",
-            "t-att-[a-z_:.-]+",
-            "t-on-[a-z_:.-]+"
-        ].join("|"));
-
-        if (xmlNode.name === xmlNode.name.toLowerCase() && !dynamicAttributeRegex.test(attributeName)) {
-            return [];
-        }
-
-        const componentText = await readFile(componentUri);
-        const virtualDocument = await this.getVirtualJsDocument(documentUri, componentName, componentText, xmlDocument, xmlNode, parseResult);
-
-        const completionList = await this.executeCommand(
-            Commands.Completion,
-            documentUri,
-            virtualDocument.content,
-            virtualDocument.offset
-        ) as CompletionList;
-
-        let items = filterComponentItems(completionList.items, ["__VIRTUAL__", "setup"]);
-
-        if (!/\bthis\./.test(parseResult.expression)) {
-            items = items.map(item => {
-                let insertText = item.insertText as string;
-                if (/\bthis\./.test(insertText)) {
-                    item.insertText = insertText.replace(/\bthis\./, "");
-                }
-                return item;
-            })
-        }
-
-        return mapCompletionItems([...items]);
-    }
-
-    /**
-     * Creates a virtual document to provide the appropriate
-     * completion items for a parsed js expression.
-     *
-     * This method:
-     * - Adds default owl variables such as env and props
-     * - Adds mocks for frequently used Owl imports (which cannot be resolved using commands)
-     * - Adds local variables generated from Owl xml directives such as t-for or t-set
-     * - Will try to add a "this." in front of the js expression if it was omitted so it can
-     *   be understood by vscode typescript server.
-     *
-     * The expression offset is also modified accordingly.
-     */
-    async getVirtualJsDocument(
-        documentUri: Uri,
-        componentName: string,
-        componentText: string,
-        xmlDocument: any,
-        xmlNode: any,
-        parseResult: ParseResult,
-    ) {
-        const properties = await this.getComponentProperties(documentUri, componentName, componentText);
-
-        // As imports do not work, use mocks for frequently used owl functions.
-        let importReplacements = workspace.getConfiguration().get(`owl-vision.autocomplete-mocks`);
-
-        // As imports do not work, manually add "env" and "props"
-        // to the current component instance.
-        const localVariables = [
-            "let env = {};",
-            "this.env = env;",
-            `let props = ${componentName}.props;`,
-            `this.props = props;`,
-        ];
-
-        // Adds local variables generated based on the template
-        const path = getNodePath(xmlDocument, xmlNode);
-        for (const node of path) {
-            if (node.attr["t-foreach"]) {
-                let array = contextualize(properties, node.attr["t-foreach"]).expression;
-                localVariables.push(`const ${node.attr["t-as"]} = ${array}[0];`);
-                localVariables.push(`const ${node.attr["t-as"]}_index = 0;`);
-                localVariables.push(`const ${node.attr["t-as"]}_first = ${array}[0];`);
-                localVariables.push(`const ${node.attr["t-as"]}_last = ${array}.at(-1);`);
-                localVariables.push(`const ${node.attr["t-as"]}_value = {};`);
-            } else if (node.attr["t-set"]) {
-                localVariables.push(`const ${node.attr["t-set"]} = ${node.attr["t-value"]};`);
-            }
-        }
-
-        const { expression, expressionOffset } = contextualize(properties, parseResult.expression, parseResult.expressionOffset);
-
-        return {
-            offset: expressionOffset,
-            content: `${componentText}
-${importReplacements}
-class __VIRTUAL__ extends ${componentName} { __VIRTUAL__() {
-${localVariables.join("\n")}
-${expression} }}`,
-        }
-    }
-
-    /**
-     * Returns the list of properties for a given component class.
-     * The result in cached in `componentProperties`.
-     *
-     * @param documentUri
-     * @param componentName
-     * @param componentText
-     * @returns
-     */
-    async getComponentProperties(
-        documentUri: Uri,
-        componentName: string,
-        componentText: string,
-    ): Promise<string[]> {
-        const check = hash(componentText);
-
-        let cached = this.componentProperties.get(componentName);
-        if (!cached || cached.check !== check) {
-            const contextExpression = `${componentText}\nclass __VIRTUAL__ extends ${componentName} { __VIRTUAL__() { \nthis. }}`;
-            const contextItemsCompletion = await this.executeCommand(Commands.Completion, documentUri, contextExpression, 5) as CompletionList;
-
-            const items = filterComponentItems(contextItemsCompletion.items, ["__VIRTUAL__", "setup"]).map(item => item.label);
-
-            cached = { check, items };
-            this.componentProperties.set(componentName, cached);
-        }
-
-        return cached.items;
-    }
-
-    private async executeCommand(commandId: string, uri: Uri, content: string, offset: any = undefined) {
-        const lines = content.split(/\r\n|\r|\n/);
-        const _offset = offset !== undefined ? offset : (lines.at(-1)?.length ?? 0);
-        const position = new Position(lines.length - 1, _offset);
-
-        const originalUri = uri.toString(true);
-        const hashValue = hash(content);
-
-        const id = `owl://js/${originalUri}_${hashValue}.js`;
-        this.virtualDocuments.set(id, content);
-
-        return await commands.executeCommand(
-            commandId,
-            Uri.parse(`owl://js/${encodeURIComponent(originalUri)}_${hashValue}.js`),
-            position
-        );
-    }
-}

tools/owl-vision/src/language_features/parser.ts

@@ -1,153 +0,0 @@
-import { XmlDocument, XmlElement, XmlNode } from "xmldoc";
-
-export enum ParseResultType {
-    Expression,
-    Attribute,
-    Element
-}
-
-export interface ParseResult {
-    type: ParseResultType;
-    expression: string;
-    expressionOffset: number;
-    attributeName: string
-}
-
-/**
- * Will parse the document to find the selected expression based on an offset.
- * The result can be on of three types:
- *
- * Element: The offset is on a element tag name, the expression is the current
- * tagname or and empty string if it's just a opening tag.
- *
- * Attribute: The offset is inside the element but not in an attribute value,
- * the expression is the current attribute name if any.
- *
- * Expression: The offset is inside an attribute value, the expression is the value.
- */
-export async function parse(
-    documentText: string,
-    offset: number,
-): Promise<ParseResult> {
-
-    // Check if the offset is preceded by "<xyz", if true returns a type Element
-    // with the current name.
-    const elementMatch = documentText.substring(0, offset).match(/<([a-zA-Z\-._]*)$/);
-    if (elementMatch) {
-        return {
-            type: ParseResultType.Element,
-            expression: elementMatch[1] || "",
-            expressionOffset: elementMatch[1].length || 0,
-            attributeName: "",
-        };
-    }
-
-    let {
-        value: expression,
-        offset: expressionOffset,
-        from,
-    } = getSection(documentText, offset, '="', '"');
-
-    // If the expression contains '"', it means we aren't inside an attribute
-    // value.
-    if (expression.includes('"')) {
-        const attributeMatch = documentText.substring(0, offset).match(/\s([a-zA-Z\-._]*)$/);
-        if (attributeMatch) {
-            return {
-                type: ParseResultType.Attribute,
-                expression: attributeMatch[1] || "",
-                expressionOffset: attributeMatch[1].length || 0,
-                attributeName: "",
-            };
-        }
-    }
-
-    let attributeName = "";
-    let i = from - 2;
-    while (/\S/.test(documentText[i])) {
-        attributeName = documentText[i] + attributeName;
-        i--;
-    }
-
-    return {
-        type: ParseResultType.Expression,
-        expression,
-        expressionOffset,
-        attributeName,
-    };
-}
-
-export function getSection(text: string, offset: number, prefix: string, postfix: string) {
-    const beforeText = text.substring(0, offset);
-    let from = beforeText.lastIndexOf(prefix);
-    const afterText = text.substring(offset);
-    const to = beforeText.length + afterText.indexOf(postfix);
-
-    from = from + (prefix.length);
-
-    return {
-        value: text.substring(from, to),
-        offset: offset - from,
-        from: from,
-        to,
-    };
-}
-
-/**
- * Returns 2 xml nodes:
- * xmlNode: Tries to create the current element based on a string offset,
- * even if the node is invalid.
- * xmlDocument: The document root element, only works if the document is
- * valid xml.
- */
-export function parseXml(text: string, offset: number): any {
-    let xmlDocument = undefined;
-    try {
-        xmlDocument = new XmlDocument(text);
-    } catch (error) { }
-
-    let i = 0;
-    while (text[offset + i] !== "<") {
-        i--;
-    }
-
-    let node = "";
-    while (text[offset + i] !== ">" || text[offset + i - 1] === "=") {
-        node += text[offset + i];
-        i++;
-    }
-
-    let xmlNode = undefined;
-    try {
-        xmlNode = new XmlDocument(`${node}${node.endsWith("/") ? '' : '/'}>`);
-    } catch (error) { }
-
-    return { xmlDocument, xmlNode };
-}
-
-/**
- * Returns an array representing the elements order from the document's
- * root to the specified element.
- */
-export function getNodePath(xmlDocument: XmlDocument, xmlNode: any): Array<XmlElement> {
-    let path: Array<XmlElement> = [];
-
-    const traverse = (node: XmlElement, currentPath: Array<XmlElement>) => {
-        if (node.name === xmlNode.name && JSON.stringify(node.attr) === JSON.stringify(xmlNode.attr)) {
-            path = currentPath;
-            return;
-        }
-
-        if (node.children) {
-            for (const child of node.children) {
-                if (child instanceof XmlElement && child.name) {
-                    traverse(child, currentPath.concat(child));
-                }
-            }
-        }
-    }
-
-    traverse(xmlDocument, []);
-
-    return path;
-}

tools/owl-vision/src/search.ts

@@ -94,31 +94,6 @@ export class Search {
         return await this.find(templateName, query, "xml");
     }
 
-    public async getCurrentComponent(): Promise<any | undefined> {
-        if (!this.currentDocument) {
-            return;
-        }
-
-        const text = this.currentDocument.getText();
-        const templateName = this.getTemplateName(text, false);
-
-        if (templateName) {
-            const component = await this.findComponentFromTemplateName(templateName);
-
-            if (component) {
-                const componentFile = await workspace.fs.readFile(component.uri);
-                const componentText = Buffer.from(componentFile).toString('utf8');
-                const componentName = this.getComponentName(componentText, templateName);
-
-                return {
-                    uri: component.uri,
-                    templateName,
-                    componentName,
-                };
-            }
-        }
-    }
-
     private findComponentFromTemplateName(templateName: string): Promise<Location | undefined> {
         const query = this.buildQuery(`template\\s*=\\s*["']`, templateName, `["']`);
         return this.find(templateName, query, "js");
@@ -132,27 +107,6 @@ export class Search {
         }
     }
 
-    private getComponentName(str: string, templateName: string): string {
-        const templateNameRegex = new RegExp(`template\\s*=\\s*["'](${templateName})["']`, 'g');
-        const templateIndex = [...str.matchAll(templateNameRegex)][0]?.index ?? 0;
-
-        const matches = [...str.matchAll(new RegExp(`class\\s+([A-Za-z_]+)\\sextends\\s+[A-Za-z_]+`, 'g'))];
-        let result = "";
-        let currentIndex = -1;
-        for (const match of matches) {
-            if (match.index > templateIndex) {
-                continue;
-            }
-
-            if (match.index > currentIndex) {
-                result = match[1];
-                currentIndex = match.index;
-            }
-        }
-
-        return result;
-    }
-
     public async find(
         name: string,
         searchQuery: string,

tools/owl-vision/src/utils.ts

@@ -102,20 +102,3 @@ export async function showResult(result: vscode.Location, openDirection: OpenDir
     editor.revealRange(result.range);
     editor.selection = new vscode.Selection(result.range.start, result.range.end);
 }
-
-export async function readFile(uri: vscode.Uri): Promise<string> {
-    const data = await vscode.workspace.fs.readFile(uri);
-    return Buffer.from(data).toString('utf8');
-}
-
-export function hash(str: string) {
-    var hash = 0,
-        i, chr;
-    if (str.length === 0) return hash;
-    for (i = 0; i < str.length; i++) {
-        chr = str.charCodeAt(i);
-        hash = ((hash << 5) - hash) + chr;
-        hash |= 0;
-    }
-    return hash;
-}

tools/owl-vision/syntaxes/owl.template.json

@@ -160,7 +160,7 @@
             "patterns": [
                 {
                     "contentName": "meta.embedded.block.javascript string.quoted.double.xml",
-                    "begin": "(\\s*)(t-if|t-elif|t-foreach|t-as|t-key|t-esc|t-out|t-props|t-component|t-set|t-value|t-portal|t-slot-scope|t-att|t-tag|t-log|t-model|t-att-[a-z_:.-]+|t-on-[a-z_:.-]+)(=)(\")",
+                    "begin": "(\\s*)(t-if|t-else|t-elif|t-foreach|t-as|t-key|t-esc|t-out|t-props|t-component|t-set|t-value|t-portal|t-slot-scope|t-att-[a-z_:.-]+|t-on-[a-z_:.-]+)(=)(\")",
                     "beginCaptures": {
                         "2": {
                             "name": "entity.other.attribute-name.localname.xml owl.attribute owl.attribute.dynamic"
@@ -183,7 +183,7 @@
                 },
                 {
                     "contentName": "meta.embedded.block.javascript string.quoted.single.xml",
-                    "begin": "(\\s*)(t-if|t-elif|t-foreach|t-as|t-key|t-esc|t-out|t-props|t-component|t-set|t-value|t-portal|t-slot-scope|t-att|t-tag|t-log|t-model|t-att-[a-z_:.-]+|t-on-[a-z_:.-]+)(=)(')",
+                    "begin": "(\\s*)(t-if|t-else|t-elif|t-foreach|t-as|t-key|t-esc|t-out|t-props|t-component|t-set|t-value|t-portal|t-slot-scope|t-att-[a-z_:.-]+|t-on-[a-z_:.-]+)(=)(')",
                     "beginCaptures": {
                         "2": {
                             "name": "entity.other.attribute-name.localname.xml owl.attribute owl.attribute.dynamic"
@@ -210,7 +210,7 @@
             "patterns": [
                 {
                     "contentName": "string.quoted.double.xml",
-                    "begin": "(\\s*)(t-name|t-else|t-ref|t-set-slot|t-inherit|t-inherit-mode|t-translation|t-debug)(=)(\")",
+                    "begin": "(\\s*)(t-name|t-ref|t-set-slot|t-model|t-inherit|t-inherit-mode|t-translation)(=)(\")",
                     "beginCaptures": {
                         "2": {
                             "name": "entity.other.attribute-name.localname.xml owl.attribute owl.attribute.static"
@@ -229,7 +229,7 @@
                 },
                 {
                     "contentName": "string.quoted.single.xml",
-                    "begin": "(\\s*)(t-name|t-else|t-ref|t-set-slot|t-inherit|t-inherit-mode|t-translation|t-debug)(=)(')",
+                    "begin": "(\\s*)(t-name|t-ref|t-set-slot|t-model|t-inherit|t-inherit-mode|t-translation)(=)(')",
                     "beginCaptures": {
                         "2": {
                             "name": "entity.other.attribute-name.localname.xml owl.attribute owl.attribute.static"