add: add demo benchmark application

src/playground.js

@@ -45,7 +45,7 @@ class Playground extends Component {
     this.state = {
       currentTab: "js",
       js: SAMPLES[0].code,
-      css: "",
+      css: SAMPLES[0].css || "",
       xml: ""
     };
   }
@@ -87,7 +87,7 @@ class Playground extends Component {
     const sample = SAMPLES.find(s => s.description === ev.target.value);
     this.updateState({
       js: sample.code,
-      css: "",
+      css: sample.css || "",
       xml: ""
     });
     this.editor.setValue(this.state[this.state.currentTab], -1);

src/samples.js

@@ -68,7 +68,190 @@ const app = new App(env);
 app.mount(document.body);
 `;
 
-const BENCHMARK_APP = `// todo`;
+const BENCHMARK_APP = `//------------------------------------------------------------------------------
+// Generating demo data
+//------------------------------------------------------------------------------
+const messages = [];
+const authors = ["Aaron", "David", "Vincent"];
+const content = [
+  "Lorem ipsum dolor sit amet",
+  "Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
+  "Excepteur sint occaecat cupidatat non proident"
+];
+
+function chooseRandomly(array) {
+  const index = Math.floor(Math.random() * array.length);
+  return array[index];
+}
+
+for (let i = 1; i < 16000; i++) {
+  messages.push({
+    id: i,
+    author: chooseRandomly(authors),
+    msg: \`\${i}: \${chooseRandomly(content)}\`,
+    likes: 0
+  });
+}
+
+//------------------------------------------------------------------------------
+// Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.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>\`;
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {
+      counter: props.initialState || 0
+    };
+  }
+
+  increment(delta) {
+    this.updateState({ counter: this.state.counter + delta });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.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>\`;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.widgets = { Counter };
+  }
+
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+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>\`;
+
+class App extends owl.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);
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+const env = {
+    qweb: new owl.core.QWeb()
+};
+
+const app = new App(env);
+app.mount(document.body);
+`;
+
+const BENCHMARK_APP_CSS = `.main {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  display: grid;
+  grid-template-columns: 200px 1fr;
+}
+
+.left-thing {
+  background-color: gray;
+  padding: 20px;
+}
+
+.left-thing button {
+  width: 100%;
+}
+
+.left-thing .counter span {
+  color: white;
+}
+
+.left-thing .counter button {
+  width: 40px;
+}
+
+.right-thing {
+  padding: 20px;
+  overflow: auto;
+}
+
+/* Message widget */
+.message .author {
+  font-weight: bold;
+}
+
+.message {
+  width: 400px;
+  background-color: lightblue;
+  margin: 10px 5px;
+  border-radius: 5px;
+  padding: 5px;
+}`;
+
 const STATE_MANAGEMENT = `// todo`;
 
 const EMPTY = ``;
@@ -88,7 +271,8 @@ export const SAMPLES = [
   },
   {
     description: "Benchmark application",
-    code: BENCHMARK_APP
+    code: BENCHMARK_APP,
+    css: BENCHMARK_APP_CSS
   },
   {
     description: "State management app",