owl 3.x

doc/learning/tutorial_todoapp.md

@@ -148,7 +148,7 @@ data and a template to the `App` component:
 
 ```js
 class Root extends Component {
-  static template = xml/* xml */ `
+  static template = xml /* xml */ `
     <div class="task-list">
         <t t-foreach="tasks" t-as="task" t-key="task.id">
             <div class="task">
@@ -565,7 +565,7 @@ function createTaskStore() {
 // Task Component
 // -------------------------------------------------------------------------
 class Task extends Component {
-  static template = xml/* xml */ `
+  static template = xml /* xml */ `
     <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
       <input type="checkbox" t-att-checked="props.task.isCompleted" t-on-click="() => store.toggleTask(props.task)"/>
       <span><t t-esc="props.task.text"/></span>
@@ -583,7 +583,7 @@ class Task extends Component {
 // Root Component
 // -------------------------------------------------------------------------
 class Root extends Component {
-  static template = xml/* xml */ `
+  static template = xml /* xml */ `
     <div class="todo-app">
       <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
       <div class="task-list">
@@ -838,7 +838,7 @@ For reference, here is the final code:
   // Task Component
   // -------------------------------------------------------------------------
   class Task extends Component {
-    static template = xml/* xml */ `
+    static template = xml /* xml */ `
       <div class="task" t-att-class="props.task.isCompleted ? 'done' : ''">
         <input type="checkbox"
           t-att-id="props.task.id"
@@ -859,7 +859,7 @@ For reference, here is the final code:
   // Root Component
   // -------------------------------------------------------------------------
   class Root extends Component {
-    static template = xml/* xml */ `
+    static template = xml /* xml */ `
       <div class="todo-app">
         <input placeholder="Enter a new task" t-on-keyup="addTask" t-ref="add-input"/>
         <div class="task-list">

doc/readme.md

@@ -34,15 +34,14 @@ Other hooks:
 - [`useComponent`](reference/hooks.md#usecomponent): return a reference to the current component (useful to create derived hooks)
 - [`useEffect`](reference/hooks.md#useeffect): define an effect with its dependencies
 - [`useEnv`](reference/hooks.md#useenv): return a reference to the current env
-- [`useExternalListener`](reference/hooks.md#useexternallistener): add a listener outside of a component DOM
+- [`useListener`](reference/hooks.md#uselistener): add a listener outside of a component DOM
 - [`useRef`](reference/hooks.md#useref): get an object representing a reference (`t-ref`)
 - [`useChildSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for child components)
 - [`useSubEnv`](reference/hooks.md#usesubenv-and-usechildsubenv): extend the current env with additional information (for current component and child components)
 
 Utility/helpers:
 
 - [`EventBus`](reference/utils.md#eventbus): a simple event bus
-- [`loadFile`](reference/utils.md#loadfile): an helper to load a file from the server
 - [`markup`](reference/templates.md#outputting-data): utility function to define strings that represent html (should not be escaped)
 - [`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

doc/reference/app.md

@@ -40,7 +40,6 @@ instance somewhere in the DOM.
   is complete.
 
   The `option` object is an object with the following keys:
-
   - **`position (string)`**: either `first-child` or `last-child`. This option determines
     the position of the application in the target: either first or last child.
 
@@ -130,7 +129,7 @@ what it could look like in practice:
 
 ```js
 // in the main js file:
-const { loadFile, mount } = owl;
+const { mount } = owl;
 
 // async, so we can use async/await
 (async function setup() {

doc/reference/concurrency_model.md

@@ -72,7 +72,6 @@ component (with some code like `app.mount(document.body)`).
 1. `willStart` is called on `A`
 
 2. when it is done, template `A` is rendered.
-
    - component `B` is created
      1. `willStart` is called on `B`
      2. template `B` is rendered
@@ -116,7 +115,6 @@ Here is what Owl will do:
 
 1. because of a state change, the method `render` is called on `C`
 2. template `C` is rendered again
-
    - component `D` is updated:
      1. hook `willUpdateProps` is called on `D` (async)
      2. template `D` is rerendered
@@ -130,7 +128,6 @@ Here is what Owl will do:
 4. components `F`, `D` are patched in that order
 
 5. component `C` is patched, which will cause recursively:
-
    1. `willUnmount` hook on `E`
    2. destruction of `E`,
 

doc/reference/hooks.md

@@ -9,7 +9,7 @@
   - [`useState`](#usestate)
   - [`useRef`](#useref)
   - [`useSubEnv` and `useChildSubEnv`](#usesubenv-and-usechildsubenv)
-  - [`useExternalListener`](#useexternallistener)
+  - [`useListener`](#uselistener)
   - [`useComponent`](#usecomponent)
   - [`useEnv`](#useenv)
   - [`useEffect`](#useeffect)
@@ -187,16 +187,16 @@ frozen, to prevent unwanted modifications.
 Note that both these hooks can be called an arbitrary number of times. The `env`
 will then be updated accordingly.
 
-### `useExternalListener`
+### `useListener`
 
-The `useExternalListener` hook helps solve a very common problem: adding and removing
+The `useListener` hook helps solve a very common problem: adding and removing
 a listener on some target whenever a component is mounted/unmounted. It takes a target
 as its first argument, forwards the other arguments to `addEventListener`. For example,
 a dropdown menu (or its parent) may need to listen to a `click` event on `window`
 to be closed:
 
 ```js
-useExternalListener(window, "click", this.closeMenu, { capture: true });
+useListener(window, "click", this.closeMenu, { capture: true });
 ```
 
 ### `useComponent`

doc/reference/utils.md

@@ -6,7 +6,6 @@ functions are all available in the `owl.utils` namespace.
 ## Content
 
 - [`whenReady`](#whenready): executing code when DOM is ready
-- [`loadFile`](#loadfile): loading a file (useful for templates)
 - [`EventBus`](#eventbus): a simple EventBus
 - [`validate`](#validate): a validation function
 - [`batched`](#batched): batch function calls
@@ -32,21 +31,6 @@ whenReady(function () {
 });
 ```
 
-## `loadFile`
-
-`loadFile` is a helper function to fetch a file. It simply
-performs a `GET` request and returns the resulting string in a promise. The
-initial usecase for this function is to load a template file. For example:
-
-```js
-const { loadFile } = owl;
-
-async function makeEnv() {
-  const templates = await loadFile("templates.xml");
-  // do something
-}
-```
-
 ## `EventBus`
 
 It is a simple `EventBus`, with the same API as usual DOM elements, and an

docs/playground/playground.js

@@ -1,19 +1,20 @@
-import { debounce, loadJS } from "./utils.js";
 import {
-  App,
+  __info__,
   Component,
-  useState,
-  useRef,
+  mount,
   onMounted,
-  onWillUnmount,
   onPatched,
+  onWillStart,
+  onWillUnmount,
   onWillUpdateProps,
-  loadFile as _loadFile,
-  whenReady,
-  __info__,
+  OwlError,
+  props,
+  proxy,
+  signal,
   useEffect,
-  onWillStart,
+  whenReady,
 } from "../owl.js";
+import { debounce, loadJS } from "./utils.js";
 
 //------------------------------------------------------------------------------
 // Constants, helpers, utils
@@ -32,7 +33,12 @@ const DEFAULT_XML = `<templates>
 const fileCache = {};
 const loadFile = (path) => {
   if (!(path in fileCache)) {
-    fileCache[path] = _loadFile(path);
+    fileCache[path] = fetch(path).then((result) => {
+      if (!result.ok) {
+        throw new OwlError("Error while fetching xml templates");
+      }
+      return result.text();
+    });
   }
   return fileCache[path];
 }
@@ -75,7 +81,12 @@ const SAMPLES = [
     code: ["js", "xml", "css"],
   },
   {
-    description: "Form Input Bindings",
+    description: "List of Counters",
+    folder: "counters",
+    code: ["js", "xml", "css"],
+  },
+  {
+    description: "t-model",
     folder: "form",
     code: ["js", "xml"],
   },
@@ -145,23 +156,25 @@ function loadSamples() {
 // Tabbed editor
 //------------------------------------------------------------------------------
 class TabbedEditor extends Component {
+  props = props();
+
   setup() {
     const props = this.props;
-    this.state = useState({
+    this.state = proxy({
       currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
     });
     this.setTab = debounce(this.setTab.bind(this), 250, true);
 
     this.sessions = {};
     this._setupSessions(props);
-    this.editorNode = useRef("editor");
+    this.editorNode = signal(null);
     this._updateCode = this._updateCode.bind(this);
 
     onMounted(() => {
-      this.editor = this.editor || ace.edit(this.editorNode.el);
+      this.editor = this.editor || ace.edit(this.editorNode());
 
       this.editor.setValue(this.props[this.state.currentTab], -1);
-      this.editor.setFontSize("12px");
+      this.editor.setFontSize("14px");
       this.editor.setTheme("ace/theme/monokai");
       this.editor.setSession(this.sessions[this.state.currentTab]);
       const tabSize = this.state.currentTab === "xml" ? 2 : 4;
@@ -252,7 +265,7 @@ class Playground extends Component {
     this.version = __info__.version;
 
     this.isDirty = false;
-    this.state = useState({
+    this.state = proxy({
       js: "",
       css: "",
       xml: DEFAULT_XML,
@@ -290,17 +303,17 @@ class Playground extends Component {
     this.toggleLayout = debounce(this.toggleLayout, 250, true);
     this.runCode = debounce(this.runCode, 250, true);
     this.exportStandaloneApp = debounce(this.exportStandaloneApp, 250, true);
-    this.content = useRef("content");
+    this.content = signal(null);
     this.updateCode = this.updateCode.bind(this);
   }
 
   runCode() {
-    this.content.el.innerHTML = "";
+    this.content().innerHTML = "";
     this.state.displayWelcome = false;
 
     const { js, css, xml } = this.state;
     const subiframe = makeCodeIframe(js, css, xml);
-    this.content.el.appendChild(subiframe);
+    this.content().appendChild(subiframe);
   }
 
   shareCode() {
@@ -394,10 +407,10 @@ async function start() {
     loadFile("templates.xml"),
     whenReady()
   ]);
-  const rootApp = new App(Playground, { name: "Owl Playground" });
-  rootApp.addTemplates(templates);
-
-  await  rootApp.mount(document.body);
+  await mount(Playground, document.body, {
+    name: "Owl Playground",
+    templates,
+  });
 }
 
 start();

docs/playground/samples/components/components.css

@@ -1,4 +1,4 @@
-.greeter {
+.counter {
     font-size: 20px;
     width: 300px;
     height: 100px;
@@ -7,4 +7,4 @@
     line-height: 100px;
     background-color: #eeeeee;
     user-select: none;
-}
+}

docs/playground/samples/components/components.js

@@ -1,26 +1,19 @@
 // In this example, we show how components can be defined and created.
-import { Component, useState, mount } from "@odoo/owl";
+import { Component, signal, mount } from "@odoo/owl";
 
-class Greeter extends Component {
-    static template = "Greeter";
+class Counter extends Component {
+    static template = "Counter";
 
-    setup() {
-        this.state = useState({ word: 'Hello' });
-    }
-
-    toggle() {
-        this.state.word = this.state.word === 'Hi' ? 'Hello' : 'Hi';
+    count = signal(0);
+
+    increment() {
+        this.count.update(val => val + 1);
     }
 }
 
-// Main root component
 class Root extends Component {
-    static components = { Greeter };
+    static components = { Counter };
     static template = "Root"
-
-    setup() {
-        this.state = useState({ name: 'World'});
-    }
 }
 
 mount(Root, document.body, { templates: TEMPLATES, dev: true });