Next ged 3

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,18 +1,19 @@
 import { debounce, loadJS } from "./utils.js";
 import {
-  App,
   Component,
-  useState,
+  proxy,
+  props,
   useRef,
   onMounted,
   onWillUnmount,
   onPatched,
   onWillUpdateProps,
-  loadFile as _loadFile,
   whenReady,
   __info__,
   useEffect,
   onWillStart,
+  OwlError,
+  mount,
 } from "../owl.js";
 
 //------------------------------------------------------------------------------
@@ -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];
 }
@@ -145,9 +151,11 @@ 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);
@@ -252,7 +260,7 @@ class Playground extends Component {
     this.version = __info__.version;
 
     this.isDirty = false;
-    this.state = useState({
+    this.state = proxy({
       js: "",
       css: "",
       xml: DEFAULT_XML,
@@ -394,10 +402,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();