From e026f537ae385a433eb4c786ad0b5169f1ca1cbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Fri, 25 Oct 2019 17:17:20 +0200
Subject: [PATCH] [ADD] tools: add benchmarks for v0.24.0

---
 tools/benchmarks/owl-0.24.0/app.js        | 155 ++++++++++++++++++++++
 tools/benchmarks/owl-0.24.0/index.html    |  12 ++
 tools/benchmarks/owl-0.24.0/templates.xml |  50 +++++++
 tools/benchmarks/shared/utils.js          |  22 +--
 tools/index.html                          |   1 +
 5 files changed, 230 insertions(+), 10 deletions(-)
 create mode 100644 tools/benchmarks/owl-0.24.0/app.js
 create mode 100644 tools/benchmarks/owl-0.24.0/index.html
 create mode 100644 tools/benchmarks/owl-0.24.0/templates.xml

diff --git a/tools/benchmarks/owl-0.24.0/app.js b/tools/benchmarks/owl-0.24.0/app.js
new file mode 100644
index 00000000..2e2c76a2
--- /dev/null
+++ b/tools/benchmarks/owl-0.24.0/app.js
@@ -0,0 +1,155 @@
+import { buildData, startMeasure, stopMeasure, formatNumber } from "../shared/utils.js";
+
+const { useState, useRef } = owl.hooks;
+//------------------------------------------------------------------------------
+// Likes Counter Widget
+//------------------------------------------------------------------------------
+class Counter extends owl.Component {
+  state = useState({ counter: 0 });
+
+  increment() {
+    this.state.counter++;
+  }
+}
+
+//------------------------------------------------------------------------------
+// Message Widget
+//------------------------------------------------------------------------------
+class Message extends owl.Component {
+  static components = { Counter };
+
+  shouldUpdate(nextProps) {
+    return nextProps.message !== this.props.message;
+  }
+  removeMessage() {
+    this.trigger("remove-message", {
+      id: this.props.message.id
+    });
+  }
+}
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+class App extends owl.Component {
+  static components = { Message };
+  state = useState({ messages: [], multipleFlag: false, clearAfterFlag: false });
+  logRef = useRef("log");
+
+  mounted() {
+    this.log(`Benchmarking Owl v${owl.__info__.version} (build date: ${owl.__info__.date})`);
+  }
+
+  benchmark(message, fn, callback) {
+    if (this.state.multipleFlag) {
+      const N = 20;
+      let n = N;
+      let total = 0;
+      let cb = info => {
+        let finalize = () => {
+          n--;
+          total += info.delta;
+          if (n === 0) {
+            const avg = total / N;
+            this.log(`Average: ${formatNumber(avg)}ms`, true);
+            if (callback) {
+              callback();
+            }
+          } else {
+            this._benchmark(message, fn, cb);
+          }
+        };
+
+        if (this.state.clearAfterFlag) {
+          this._benchmark(
+            "clear",
+            () => {
+              this.state.messages = [];
+            },
+            finalize,
+            false
+          );
+        } else {
+          finalize();
+        }
+      };
+      this._benchmark(message, fn, cb);
+    } else {
+      this._benchmark(message, fn, callback);
+    }
+  }
+
+  _benchmark(message, fn, cb, log = true) {
+    setTimeout(() => {
+      startMeasure(message);
+      fn();
+      stopMeasure(info => {
+        if (log) {
+          this.log(info.msg);
+        }
+        if (cb) {
+          cb(info);
+        }
+      });
+    }, 10);
+  }
+
+  addMessages(n) {
+    this.benchmark("add " + n, () => {
+      const newMessages = buildData(n);
+      this.state.messages.push.apply(this.state.messages, newMessages);
+    });
+  }
+
+  clear() {
+    this._benchmark("clear", () => {
+      this.state.messages = [];
+    });
+  }
+
+  updateSomeMessages() {
+    this.benchmark("update every 10th", () => {
+      const messages = this.state.messages;
+      for (let i = 0; i < messages.length; i += 10) {
+        const msg = Object.assign({}, messages[i]);
+        msg.author += "!!!";
+        messages[i] = msg;
+      }
+    });
+  }
+
+  removeMessage(event) {
+    this.benchmark("remove message", () => {
+      const index = this.state.messages.findIndex(m => m.id === event.detail.id);
+      this.state.messages.splice(index, 1);
+    });
+  }
+
+  log(str, isBold) {
+    const div = document.createElement("div");
+    if (isBold) {
+      div.classList.add("bold");
+    }
+    div.textContent = `> ${str}`;
+    this.logRef.el.appendChild(div);
+    this.logRef.el.scrollTop = this.logRef.el.scrollHeight;
+  }
+
+  clearLog() {
+    this.logRef.el.innerHTML = "";
+  }
+}
+
+//------------------------------------------------------------------------------
+// Application initialization
+//------------------------------------------------------------------------------
+async function start() {
+  const templates = await owl.utils.loadFile("templates.xml");
+  const env = {
+    qweb: new owl.QWeb(templates)
+  };
+  const app = new App(env);
+  app.mount(document.body);
+}
+
+start();
diff --git a/tools/benchmarks/owl-0.24.0/index.html b/tools/benchmarks/owl-0.24.0/index.html
new file mode 100644
index 00000000..8c9dfc4a
--- /dev/null
+++ b/tools/benchmarks/owl-0.24.0/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>OWL v0.24.0 Benchmark</title>
+  <link href="../shared/main.css" rel="stylesheet"/>
+  <script src='../../owl.js'></script>
+</head>
+<body>
+  <script src='app.js' type="module"></script>
+</body>
+</html>
diff --git a/tools/benchmarks/owl-0.24.0/templates.xml b/tools/benchmarks/owl-0.24.0/templates.xml
new file mode 100644
index 00000000..c8724c0a
--- /dev/null
+++ b/tools/benchmarks/owl-0.24.0/templates.xml
@@ -0,0 +1,50 @@
+<templates>
+  <div t-name="App" class="main">
+      <div class="left-thing">
+        <div class="title">Actions</div>
+        <div class="panel">
+          <button t-on-click="addMessages(100)">Add 100 messages</button>
+          <button t-on-click="addMessages(1000)">Add 1k messages</button>
+          <button t-on-click="addMessages(10000)">Add 10k messages</button>
+          <button t-on-click="addMessages(30000)">Add 30k messages</button>
+          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
+          <button t-on-click="clear">Clear</button>
+        </div>
+        <div class="flags">
+            <div>
+                <input type="checkbox" id="multipleflag" t-model="state.multipleFlag"/>
+                <label for="multipleflag">Do it 20x</label>
+            </div>
+            <div>
+                <input type="checkbox" id="clearFlag" t-model="state.clearAfterFlag" />
+                <label for="clearFlag">Clear after</label>
+            </div>
+        </div>
+        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
+        <hr/>
+        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
+        <div class="log">
+            <div class="log-content" t-ref="log"/>
+        </div>
+      </div>
+      <div class="right-thing">
+          <div class="content" t-on-remove-message="removeMessage">
+              <t t-foreach="state.messages" t-as="message">
+                  <Message t-key="message.id" message="message"/>
+              </t>
+          </div>
+      </div>
+  </div>
+
+  <div t-name="Message" class="message">
+    <span class="author"><t t-esc="props.message.author"/></span>
+    <span class="msg"><t t-esc="props.message.msg"/></span>
+    <button class="remove" t-on-click="removeMessage">Remove</button>
+    <Counter/>
+  </div>
+
+  <div t-name="Counter">
+    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
+  </div>
+
+</templates>
\ No newline at end of file
diff --git a/tools/benchmarks/shared/utils.js b/tools/benchmarks/shared/utils.js
index 0ee70c99..e2cabc1b 100644
--- a/tools/benchmarks/shared/utils.js
+++ b/tools/benchmarks/shared/utils.js
@@ -44,15 +44,17 @@ export function startMeasure(descr) {
 export function stopMeasure(cb) {
   let last = lastMeasure;
   if (lastMeasure) {
-    window.setTimeout(function() {
-      lastMeasure = null;
-      const stop = performance.now();
-      const delta = stop - startTime;
-      const msg = `[${last}] took  ${formatNumber(delta)}ms`;
-      console.log(msg);
-      if (cb) {
-        cb({ msg, delta });
-      }
-    }, 0);
+      window.requestAnimationFrame(() => {
+        window.setTimeout(function() {
+        lastMeasure = null;
+        const stop = performance.now();
+        const delta = stop - startTime;
+        const msg = `[${last}] took  ${formatNumber(delta)}ms`;
+        console.log(msg);
+        if (cb) {
+            cb({ msg, delta });
+        }
+        }, 0);
+      });
   }
 }
diff --git a/tools/index.html b/tools/index.html
index 7a5a12ca..b6c53e7e 100644
--- a/tools/index.html
+++ b/tools/index.html
@@ -40,6 +40,7 @@
                 <li><a href="benchmarks/owl-0.17.0">OWL 0.17.0</a></li>
                 <li><a href="benchmarks/owl-0.18.0">OWL 0.18.0</a></li>
                 <li><a href="benchmarks/owl-0.21.0">OWL 0.21.0</a></li>
+                <li><a href="benchmarks/owl-0.24.0">OWL 0.24.0</a></li>
                 <li><a href="benchmarks/owl-master">OWL Master</a></li>
             </ul>
             <ul>