rename demo example into benchmarks

examples/benchmarks/app.js

@@ -0,0 +1,55 @@
+import { Message } from "./message.js";
+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(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-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
+                </t>
+            </div>
+        </div>
+    </div>`;
+
+export class App extends odoo.core.Component {
+  constructor(parent, props) {
+    super(parent, props);
+    this.inlineTemplate = template;
+    this.widgets = { Message };
+    this.state = {
+      messages: messages.slice(0, 10)
+    };
+  }
+
+  setMessageCount(n) {
+    this.updateState({
+      messages: messages.slice(0, n)
+    });
+  }
+
+  removeMessage(data) {
+    const index = messages.findIndex(m => m.id === data.id);
+    const n = this.state.messages.length;
+    messages.splice(index, 1);
+    this.updateState({ messages: messages.slice(0, n - 1) });
+  }
+
+  increment(delta) {
+    const n = this.state.messages.length + delta;
+    this.setMessageCount(n);
+  }
+}