improve demo app

examples/demo/app.css

@@ -18,6 +18,14 @@
   width: 100%;
 }
 
+.left-thing .counter span {
+  color: white;
+}
+
+.left-thing .counter button {
+  width: 40px;
+}
+
 .right-thing {
   padding: 20px;
   overflow: auto;

examples/demo/app.js

@@ -4,15 +4,22 @@ import { messages } from "./data.js";
 const template = `
     <div class="main">
         <div class="left-thing">
+            <div class="counter">
+                <button t-on-click="increment(-1)">-</button>
+                <span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
+                <button t-on-click="increment(1)">+</button>
+            </div>
             <button t-on-click="setMessageCount(10)">10 messages</button>
-            <button t-on-click="setMessageCount(200)">200 messages</button>
+            <button t-on-click="setMessageCount(20)">20 messages</button>
             <button t-on-click="setMessageCount(500)">500 messages</button>
+            <button t-on-click="setMessageCount(1000)">1000 messages</button>
             <button t-on-click="setMessageCount(5000)">5000 messages</button>
+            <button t-on-click="setMessageCount(15000)">15000 messages</button>
         </div>
         <div class="right-thing">
             <div class="content">
                 <t t-foreach="state.messages" t-as="message">
-                    <t t-widget="Message" t-props="message" t-on-remove_message="removeMessage"/>
+                    <t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
                 </t>
             </div>
         </div>
@@ -35,8 +42,14 @@ export class App extends odoo.core.Component {
   }
 
   removeMessage(data) {
-    const index = this.state.messages.findIndex(m => m.id === data.id);
-    this.state.messages.splice(index, 1);
-    this.setState({ messages: this.state.messages });
+    const index = messages.findIndex(m => m.id === data.id);
+    const n = this.state.messages.length;
+    messages.splice(index, 1);
+    this.setState({ messages: messages.slice(0, n - 1) });
+  }
+
+  increment(delta) {
+    const n = this.state.messages.length + delta;
+    this.setMessageCount(n);
   }
 }

examples/demo/counter.js

@@ -1,14 +1,12 @@
-const template = `
+export class Counter extends odoo.core.Component {
+  inlineTemplate = `
     <div>
       <button t-on-click="increment(-1)">-</button>
       <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
       <button t-on-click="increment(1)">+</button>
     </div>`;
-
-export class Counter extends odoo.core.Component {
   constructor(parent, props) {
     super(parent, props);
-    this.inlineTemplate = template;
     this.state = {
       counter: props.initialState || 0
     };

examples/demo/data.js

@@ -12,7 +12,7 @@ function chooseRandomly(array) {
   return array[index];
 }
 
-for (let i = 1; i < 6000; i++) {
+for (let i = 1; i < 16000; i++) {
   messages.push({
     id: i,
     author: chooseRandomly(authors),

examples/demo/main.js

@@ -1,10 +1,13 @@
 import { App } from "./app.js";
-import { Counter } from "./counter.js";
 
-document.addEventListener("DOMContentLoaded", function() {
+function createApp(el) {
   const env = {
     qweb: new odoo.core.QWeb()
   };
   const app = new App(env, { initialState: 13 });
-  app.mount(document.body);
+  app.mount(el);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  createApp(document.body);
 });

examples/demo/message.js

@@ -1,14 +1,17 @@
-const template = `
+import { Counter } from "./counter.js";
+
+export class Message extends odoo.core.Component {
+  inlineTemplate = `
     <div class="message">
         <span class="author"><t t-esc="props.author"/></span>
         <span class="msg"><t t-esc="props.msg"/></span>
         <button class="remove" t-on-click="removeMessage">Remove</button>
+        <t t-widget="Counter" t-props="{initialState: props.id}"/>
     </div>`;
 
-export class Message extends odoo.core.Component {
   constructor(parent, props) {
     super(parent, props);
-    this.inlineTemplate = template;
+    this.widgets = { Counter };
   }
 
   removeMessage() {