Next no willupdateprops

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

@@ -130,7 +130,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/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,
-  onWillUpdateProps,
-  loadFile as _loadFile,
-  whenReady,
-  __info__,
-  useEffect,
   onWillStart,
+  onWillUnmount,
+  // onWillUpdateProps,
+  OwlError,
+  props,
+  proxy,
+  signal,
+  useEffect,
+  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;
@@ -185,7 +198,7 @@ class TabbedEditor extends Component {
       }
     });
 
-    onWillUpdateProps((nextProps) => this._setupSessions(nextProps));
+    // onWillUpdateProps((nextProps) => this._setupSessions(nextProps));
 
     onWillUnmount(() => {
       clearInterval(this.interval);
@@ -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 });

docs/playground/samples/components/components.xml

@@ -1,9 +1,10 @@
 <templates>
-  <div t-name="Greeter" class="greeter" t-on-click="toggle">
-    <t t-esc="state.word"/>, <t t-esc="props.name"/>
+  <div t-name="Counter" class="counter" t-on-click="this.increment">
+    Count: <t t-out="this.count()"/>
   </div>
 
   <t t-name="Root">
-    <Greeter name="state.name"/>
+    <Counter/>
+    <Counter/>
   </t>
 </templates>

docs/playground/samples/counters/counters.css

@@ -0,0 +1,10 @@
+.counter {
+    font-size: 20px;
+    width: 300px;
+    height: 100px;
+    margin: 5px;
+    text-align: center;
+    line-height: 100px;
+    background-color: #eeeeee;
+    user-select: none;
+}

docs/playground/samples/counters/counters.js

@@ -0,0 +1,25 @@
+import { Component, signal, mount, proxy, computed, props } from "@odoo/owl";
+
+class Counter extends Component {
+    static template = "Counter";
+
+    props = props({ count: Function });
+
+    increment() {
+        this.props.count.update((val) => val + 1);
+    }
+}
+
+class Root extends Component {
+    static components = { Counter };
+    static template = "Root";
+
+    counters = proxy([signal(1), signal(2)]);
+    sum = computed(() => this.counters.reduce((acc, value) => acc + value(), 0));
+
+    addCounter() {
+        this.counters.push(signal(0));
+    }
+}
+
+mount(Root, document.body, { templates: TEMPLATES, dev: true });

docs/playground/samples/counters/counters.xml

@@ -0,0 +1,15 @@
+<templates>
+  <div t-name="Counter" class="counter" t-on-click="this.increment">
+    Count: <t t-out="this.props.count()"/>
+  </div>
+
+  <t t-name="Root">
+    <div>
+      <p>Current sum: <t t-out="this.sum()"/></p>
+      <button t-on-click="this.addCounter">Add a counter</button>
+    </div>
+    <t t-foreach="this.counters" t-as="counter" t-key="counter_index">
+      <Counter count="counter"/>
+    </t>
+  </t>
+</templates>

docs/playground/samples/form/form.js

@@ -2,20 +2,16 @@
 // data between html inputs (and select/textareas) and the state of a component.
 // Note that there are two controls with t-model="color": they are totally
 // synchronized.
-import { Component, useState, mount } from "@odoo/owl";
+import { Component, signal, mount } from "@odoo/owl";
 
 class Form extends Component {
   static template = "Form";
 
-  setup() {
-    this.state = useState({
-      text: "",
-      othertext: "",
-      number: 11,
-      color: "",
-      bool: false
-    });
-  }
+  text = signal("");
+  othertext = signal("");
+  number = signal(11);
+  color = signal("");
+  bool = signal(false);
 }
 
 // Application setup