[IMP/FIX] playground: fix and improve various things

The playground hasn't been touched for a while and a few things were
broken before this commit:
- Exporting as a standalone web application was broken because it still
attempted to load the templates like it was done in owl 1
- Resizing the editor tabs still tried to use `this.trigger`

While fixing the export feature, the files needed by the app were
factored out of hardcoded strings and into real files, as this makes it
easier to maintain, since these files get syntax highlighting.

The samples received the same treatment: there is now a `samples` folder
containing all the samples, it also contains a jsconfig, giving
autocompletion on owl functions while editing the files, and allowing
the owl import to look how it would when using owl as a node_module.
In the browser, this import is translated to the relative path of the
owl module using an import map.

tools/playground/samples/custom_hooks/custom_hooks.css

@@ -0,0 +1,6 @@
+
+button {
+    width: 120px;
+    height: 35px;
+    font-size: 16px;
+}

tools/playground/samples/custom_hooks/custom_hooks.js

@@ -0,0 +1,40 @@
+// In this example, we show how hooks can be used or defined.
+import { Component, mount, useState, onWillDestroy } from "@odoo/owl";
+
+// We define here a custom behaviour: this hook tracks the state of the mouse
+// position
+function useMouse() {
+    const position = useState({x:0, y: 0});
+
+    function update(e) {
+      position.x = e.clientX;
+      position.y = e.clientY;
+    }
+    window.addEventListener('mousemove', update);
+    onWillDestroy(() => {
+        window.removeEventListener('mousemove', update);
+    });
+
+    return position;
+}
+
+
+// Main root component
+class Root extends Component {
+    static template = "Root";
+
+    setup() {
+        // simple state hook (reactive object)
+        this.counter = useState({ value: 0 });
+
+        // this hooks is bound to the 'mouse' property.
+        this.mouse = useMouse();
+    }
+
+    increment() {
+        this.counter.value++;
+    }
+}
+
+// Application setup
+mount(Root, document.body, { templates: TEMPLATES, dev: true });

tools/playground/samples/custom_hooks/custom_hooks.xml

@@ -0,0 +1,7 @@
+
+<templates>
+  <div t-name="Root">
+    <button t-on-click="increment">Click! <t t-esc="counter.value"/></button>
+    <div>Mouse: <t t-esc="mouse.x"/>, <t t-esc="mouse.y"/></div>
+  </div>
+</templates>