From 5b5446bc14d70f295199a3c60010a8068cf409da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Thu, 4 Apr 2019 13:09:52 +0200
Subject: [PATCH] add: new example with ES5 code

---
 src/samples.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/samples.js b/src/samples.js
index b183a6c2..63218d83 100644
--- a/src/samples.js
+++ b/src/samples.js
@@ -34,6 +34,35 @@ const qweb = new QWeb(TEMPLATES);
 const hello = new HelloWorld({qweb}, { name: "World" });
 hello.mount(document.body);`;
 
+const HELLO_WORLD_ES5 = `const { Component, QWeb } = owl.core;
+
+function HelloWorld(env, props) {
+  var obj = new Component(env, props);
+  Object.setPrototypeOf(obj, HelloWorld.prototype);
+  obj.template = "demo.hello";
+  obj.state = { greeting: "Hello" };
+  return obj;
+}
+
+HelloWorld.prototype = Object.create(Component.prototype);
+
+// we show here how to add methods to sub components
+HelloWorld.prototype.changeGreeting = function() {
+  var newGreeting = this.state.greeting === "Hello" ? "Hi" : "Hello";
+  this.updateState({ greeting: newGreeting });
+};
+
+const qweb = new QWeb(TEMPLATES);
+const hello = new HelloWorld({ qweb }, { name: "ES5 World" });
+hello.mount(document.body);
+`;
+
+const HELLO_WORLD_ES5_XML = `<templates>
+  <div t-name="demo.hello" class="hello" t-on-click="changeGreeting">
+    <t t-esc="state.greeting"/> <t t-esc="props.name"/>
+  </div>
+</templates>`;
+
 const WIDGET_COMPOSITION = `class Counter extends owl.core.Component {
   constructor(parent, props) {
     super(parent, props);
@@ -465,6 +494,12 @@ export const SAMPLES = [
     xml: HELLO_WORLD_XML,
     css: HELLO_WORLD_CSS
   },
+  {
+    description: "Hello World (ES5)",
+    code: HELLO_WORLD_ES5,
+    xml: HELLO_WORLD_ES5_XML,
+    css: HELLO_WORLD_CSS
+  },
   {
     description: "Widget Composition",
     code: WIDGET_COMPOSITION,