[IMP] owl: update to v0.22.0

playground/app.js

@@ -1,5 +1,5 @@
 import { SAMPLES } from "./samples.js";
-
+const {useState, useRef} = owl.hooks;
 //------------------------------------------------------------------------------
 // Constants, helpers, utils
 //------------------------------------------------------------------------------
@@ -156,18 +156,18 @@ Promise.all([loadTemplates(), owl.utils.whenReady()]).then(start);
 class TabbedEditor extends owl.Component {
   constructor(parent, props) {
     super(parent, props);
-    this.state = {
+    this.state = useState({
       currentTab: props.js ? "js" : props.xml ? "xml" : "css"
-    };
+    });
     this.setTab = owl.utils.debounce(this.setTab, 250, true);
 
     this.sessions = {};
     this._setupSessions(props);
-    this.editor = null;
+    this.editorNode = useRef("editor");
   }
 
   mounted() {
-    this.editor = this.editor || ace.edit(this.refs.editor);
+    this.editor = this.editor || ace.edit(this.editorNode.el);
 
     this.editor.setValue(this.props[this.state.currentTab], -1);
     this.editor.setFontSize("12px");
@@ -250,7 +250,7 @@ class App extends owl.Component {
     this.version = owl.__info__.version;
     this.SAMPLES = SAMPLES;
 
-    this.state = {
+    this.state = useState({
       js: SAMPLES[0].code,
       css: SAMPLES[0].css || "",
       xml: SAMPLES[0].xml || DEFAULT_XML,
@@ -259,18 +259,19 @@ class App extends owl.Component {
       splitLayout: true,
       leftPaneWidth: Math.ceil(window.innerWidth / 2),
       topPanelHeight: null
-    };
+    });
 
     this.toggleLayout = owl.utils.debounce(this.toggleLayout, 250, true);
     this.runCode = owl.utils.debounce(this.runCode, 250, true);
     this.downloadCode = owl.utils.debounce(this.downloadCode, 250, true);
+    this.content = useRef("content");
   }
 
   displayError(error) {
     this.state.error = error;
     if (error) {
       setTimeout(() => {
-        this.refs.content.innerHTML = "";
+        this.content.el.innerHTML = "";
       });
       return;
     }
@@ -296,8 +297,8 @@ class App extends owl.Component {
     } else {
       this.state.error = false;
     }
-    this.refs.content.innerHTML = "";
-    this.refs.content.appendChild(subiframe);
+    this.content.el.innerHTML = "";
+    this.content.el.appendChild(subiframe);
   }
 
   setSample(ev) {