rename demo example into benchmarks

2025-10-06 19:59:41 +07:00 · 2019-03-19 13:55:27 +01:00
parent 91e7e00f97
commit 6a2e4dbf2f
8 changed files with 6 additions and 6 deletions
@@ -0,0 +1,45 @@
+.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;
+}
@@ -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);
+  }
+}
@@ -0,0 +1,18 @@
+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>`;
+  constructor(parent, props) {
+    super(parent, props);
+    this.state = {
+      counter: props.initialState || 0
+    };
+  }
+
+  increment(delta) {
+    this.updateState({ counter: this.state.counter + delta });
+  }
+}
@@ -0,0 +1,22 @@
+export 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
+  });
+}
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Odoo WebCore Benchmarks App</title>
+    <link rel="icon" href="data:,">
+
+    <!-- Application JS/CSS -->
+    <script src="/core.js"></script>
+    <link rel="stylesheet" href="/app.css">
+    <script type="module" src="/main.js"></script>
+
+  </head>
+  <body>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+import { App } from "./app.js";
+
+function createApp(el) {
+  const env = {
+    qweb: new odoo.core.QWeb()
+  };
+  const app = new App(env, { initialState: 13 });
+  app.mount(el);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  createApp(document.body);
+});
@@ -0,0 +1,22 @@
+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>`;
+
+  constructor(parent, props) {
+    super(parent, props);
+    this.widgets = { Counter };
+  }
+
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}