add demo application (benchmark)

odoo · Mar 18, 2019 · cf28932 · cf28932
1 parent 050025a
commit cf28932
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 5 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,3 @@
+{
+  "esversion": 9
+}
diff --git a/examples/demo/app.css b/examples/demo/app.css
@@ -0,0 +1,37 @@
+.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%;
+}
+
+.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;
+}
diff --git a/examples/demo/app.js b/examples/demo/app.js
@@ -0,0 +1,42 @@
+import { Message } from "./message.js";
+import { messages } from "./data.js";
+
+const template = `
+    <div class="main">
+        <div class="left-thing">
+            <button t-on-click="setMessageCount(10)">10 messages</button>
+            <button t-on-click="setMessageCount(200)">200 messages</button>
+            <button t-on-click="setMessageCount(500)">500 messages</button>
+            <button t-on-click="setMessageCount(5000)">5000 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>
+            </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.setState({
+      messages: messages.slice(0, n)
+    });
+  }
+
+  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 });
+  }
+}
diff --git a/examples/demo/counter.js b/examples/demo/counter.js
@@ -0,0 +1,20 @@
+const template = `
+    <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
+    };
+  }
+
+  increment(delta) {
+    this.setState({ counter: this.state.counter + delta });
+  }
+}
diff --git a/examples/demo/data.js b/examples/demo/data.js
@@ -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 < 6000; i++) {
+  messages.push({
+    id: i,
+    author: chooseRandomly(authors),
+    msg: `${i}: ${chooseRandomly(content)}`,
+    likes: 0
+  });
+}
diff --git a/examples/demo/index.html b/examples/demo/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Demo 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>
diff --git a/examples/demo/main.js b/examples/demo/main.js
@@ -0,0 +1,10 @@
+import { App } from "./app.js";
+import { Counter } from "./counter.js";
+
+document.addEventListener("DOMContentLoaded", function() {
+  const env = {
+    qweb: new odoo.core.QWeb()
+  };
+  const app = new App(env, { initialState: 13 });
+  app.mount(document.body);
+});
diff --git a/examples/demo/message.js b/examples/demo/message.js
@@ -0,0 +1,19 @@
+const template = `
+    <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>
+    </div>`;
+
+export class Message extends odoo.core.Component {
+  constructor(parent, props) {
+    super(parent, props);
+    this.inlineTemplate = template;
+  }
+
+  removeMessage() {
+    this.trigger("remove_message", {
+      id: this.props.id
+    });
+  }
+}
diff --git a/examples/demo/readme.md b/examples/demo/readme.md
diff --git a/package.json b/package.json
@@ -16,7 +16,12 @@
     "example:web:minify": "uglifyjs dist/examples/web/main.js -o dist/examples/web/main.js --compress --mangle",
     "example:web:serve": "live-server --entry-file=index.html dist/examples/web/",
     "preexample:web:dev": "npm run example:web:build",
-    "example:web:dev": "npm-run-all --parallel \"example:web:build:* -- --watch\" example:web:serve"
+    "example:web:dev": "npm-run-all --parallel \"example:web:build:* -- --watch\" example:web:serve",
+    "example:demo:build:core": "npm run build && cpx \"dist/core.js\" dist/examples/demo",
+    "example:demo:build:js": "cpx \"examples/demo/{*.html,*.js,*.css}\" dist/examples/demo",
+    "example:demo:build": "npm-run-all --parallel example:demo:build:*",
+    "example:demo:serve": "live-server --entry-file=index.html dist/examples/demo/",
+    "example:demo:dev": "npm-run-all --parallel \"example:demo:build:* -- --watch\" example:demo:serve"
   },
   "repository": {
     "type": "git",