From a553220bcb072a756a0b70759fd2d1a85a950182 Mon Sep 17 00:00:00 2001
From: samde <samde@odoo.com>
Date: Thu, 30 Jul 2026 14:44:39 +0200
Subject: [PATCH 1/6] [IMP] chapter 1.1

---
 awesome_owl/__init__.py               |  2 +-
 awesome_owl/__manifest__.py           | 54 ++++++++++++---------------
 awesome_owl/static/src/counter.xml    |  9 +++++
 awesome_owl/static/src/main.js        |  2 +-
 awesome_owl/static/src/playground.js  | 11 +++++-
 awesome_owl/static/src/playground.xml | 10 -----
 awesome_owl/views/templates.xml       |  8 ++--
 7 files changed, 49 insertions(+), 47 deletions(-)
 create mode 100644 awesome_owl/static/src/counter.xml
 delete mode 100644 awesome_owl/static/src/playground.xml

diff --git a/awesome_owl/__init__.py b/awesome_owl/__init__.py
index 457bae27e11..b0f26a9a602 100644
--- a/awesome_owl/__init__.py
+++ b/awesome_owl/__init__.py
@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-from . import controllers
\ No newline at end of file
+from . import controllers
diff --git a/awesome_owl/__manifest__.py b/awesome_owl/__manifest__.py
index 55002ab81de..52b5287856c 100644
--- a/awesome_owl/__manifest__.py
+++ b/awesome_owl/__manifest__.py
@@ -1,43 +1,37 @@
-# -*- coding: utf-8 -*-
 {
-    'name': "Awesome Owl",
-
-    'summary': """
+    "name": "Awesome Owl",
+    "summary": """
         Starting module for "Discover the JS framework, chapter 1: Owl components"
     """,
-
-    'description': """
+    "description": """
         Starting module for "Discover the JS framework, chapter 1: Owl components"
     """,
-
-    'author': "Odoo",
-    'website': "https://www.odoo.com",
-
+    "author": "Odoo",
+    "website": "https://www.odoo.com",
     # Categories can be used to filter modules in modules listing
     # Check https://github.com/odoo/odoo/blob/15.0/odoo/addons/base/data/ir_module_category_data.xml
     # for the full list
-    'category': 'Tutorials',
-    'version': '0.1',
-
+    "category": "Tutorials",
+    "version": "0.1",
     # any module necessary for this one to work correctly
-    'depends': ['base', 'web'],
-    'application': True,
-    'installable': True,
-    'data': [
-        'views/templates.xml',
+    "depends": ["base", "web"],
+    "application": True,
+    "installable": True,
+    "data": [
+        "views/templates.xml",
     ],
-    'assets': {
-        'awesome_owl.assets_playground': [
-            ('include', 'web._assets_helpers'),
-            ('include', 'web._assets_backend_helpers'),
-            'web/static/src/scss/pre_variables.scss',
-            'web/static/lib/bootstrap/scss/_variables.scss',
-            'web/static/lib/bootstrap/scss/_maps.scss',
-            ('include', 'web._assets_bootstrap'),
-            ('include', 'web._assets_core'),
-            'web/static/src/libs/fontawesome/css/font-awesome.css',
-            'awesome_owl/static/src/**/*',
+    "assets": {
+        "awesome_owl.assets_playground": [
+            ("include", "web._assets_helpers"),
+            ("include", "web._assets_backend_helpers"),
+            "web/static/src/scss/pre_variables.scss",
+            "web/static/lib/bootstrap/scss/_variables.scss",
+            "web/static/lib/bootstrap/scss/_maps.scss",
+            ("include", "web._assets_bootstrap"),
+            ("include", "web._assets_core"),
+            "web/static/src/libs/fontawesome/css/font-awesome.css",
+            "awesome_owl/static/src/**/*",
         ],
     },
-    'license': 'AGPL-3'
+    "license": "AGPL-3",
 }
diff --git a/awesome_owl/static/src/counter.xml b/awesome_owl/static/src/counter.xml
new file mode 100644
index 00000000000..93f08bc512a
--- /dev/null
+++ b/awesome_owl/static/src/counter.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.playground">
+        <t t-name="awesome_owl.Playground">
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </t>
+    </t>
+</templates>
diff --git a/awesome_owl/static/src/main.js b/awesome_owl/static/src/main.js
index 1aaea902b55..b78166ed913 100644
--- a/awesome_owl/static/src/main.js
+++ b/awesome_owl/static/src/main.js
@@ -4,7 +4,7 @@ import { Playground } from "./playground";
 
 const config = {
     dev: true,
-    name: "Owl Tutorial" 
+    name: "Owl Tutorial"
 };
 
 // Mount the Playground component when the document.body is ready
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 4ac769b0aa5..83065eb137e 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,5 +1,14 @@
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
+
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
deleted file mode 100644
index 4fb905d59f9..00000000000
--- a/awesome_owl/static/src/playground.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<templates xml:space="preserve">
-
-    <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
-    </t>
-
-</templates>
diff --git a/awesome_owl/views/templates.xml b/awesome_owl/views/templates.xml
index aa54c1a7241..389def986c0 100644
--- a/awesome_owl/views/templates.xml
+++ b/awesome_owl/views/templates.xml
@@ -1,15 +1,15 @@
 <odoo>
     <data>
-          <template id="awesome_owl.playground" name="Awesome T-Shirt thank you">
+        <template id="awesome_owl.playground" name="Awesome T-Shirt thank you">
             <html>
                 <head>
-                    <link type="image/x-icon" rel="shortcut icon" href="/web/static/img/favicon.ico"/>
-                    <t t-call-assets="awesome_owl.assets_playground"/>
+                    <link type="image/x-icon" rel="shortcut icon" href="/web/static/img/favicon.ico" />
+                    <t t-call-assets="awesome_owl.assets_playground" />
                 </head>
 
                 <body>
                 </body>
             </html>
-          </template>
+        </template>
     </data>
 </odoo>

From 0fb3b0c528228d287ecafc4ea633bcfce7beb5d9 Mon Sep 17 00:00:00 2001
From: samde <samde@odoo.com>
Date: Thu, 30 Jul 2026 15:53:36 +0200
Subject: [PATCH 2/6] [IMP] chapter 1.2

---
 awesome_owl/static/src/counter.xml        |  9 ---------
 awesome_owl/static/src/counter/counter.js | 18 ++++++++++++++++++
 awesome_owl/static/src/playground.js      | 11 +++--------
 awesome_owl/static/src/playground.xml     |  9 +++++++++
 4 files changed, 30 insertions(+), 17 deletions(-)
 delete mode 100644 awesome_owl/static/src/counter.xml
 create mode 100644 awesome_owl/static/src/counter/counter.js
 create mode 100644 awesome_owl/static/src/playground.xml

diff --git a/awesome_owl/static/src/counter.xml b/awesome_owl/static/src/counter.xml
deleted file mode 100644
index 93f08bc512a..00000000000
--- a/awesome_owl/static/src/counter.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-    <t t-name="awesome_owl.playground">
-        <t t-name="awesome_owl.Playground">
-            <p>Counter: <t t-esc="state.value"/></p>
-            <button class="btn btn-primary" t-on-click="increment">Increment</button>
-        </t>
-    </t>
-</templates>
diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
new file mode 100644
index 00000000000..cf9e4c9edf2
--- /dev/null
+++ b/awesome_owl/static/src/counter/counter.js
@@ -0,0 +1,18 @@
+import { Component, useState, xml } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = xml`
+        <div>
+            <p>Counter: <t t-esc="state.value"/></p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    `;
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+    }
+}
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 83065eb137e..9341bd1564b 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,14 +1,9 @@
-import { Component, useState } from "@odoo/owl";
+import { Component } from "@odoo/owl";
+import { Counter } from "./counter/counter";
 
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
 
-    setup() {
-        this.state = useState({ value: 0 });
-    }
-
-    increment() {
-        this.state.value++;
-    }
+    static components = { Counter };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
new file mode 100644
index 00000000000..fa23e7ff300
--- /dev/null
+++ b/awesome_owl/static/src/playground.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="awesome_owl.playground">
+        <div class="playground p-3">
+            <Counter />
+            <Counter />
+        </div>
+    </t>
+</templates>

From 60803a05b41305fe4529573cb237bef64f2ccd97 Mon Sep 17 00:00:00 2001
From: samde <samde@odoo.com>
Date: Thu, 30 Jul 2026 17:24:21 +0200
Subject: [PATCH 3/6] [IMP] chapter 1.3

---
 awesome_owl/static/src/card/card.js   | 18 ++++++++++++++++++
 awesome_owl/static/src/playground.js  |  3 ++-
 awesome_owl/static/src/playground.xml |  4 ++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 awesome_owl/static/src/card/card.js

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
new file mode 100644
index 00000000000..cf951c9084b
--- /dev/null
+++ b/awesome_owl/static/src/card/card.js
@@ -0,0 +1,18 @@
+import { Component, xml } from "@odoo/owl";
+
+
+export class Card extends Component {
+    static template = xml`
+        <div class="card d-inline-block m-2" style="width: 18rem;">
+            <div class="card-body">
+                <h5 class="card-title" t-esc="props.title" />
+                <p class="card-text" t-esc="props.content" />
+            </div>
+        </div>
+    `;
+
+    static props = {
+        title: String,
+        content: String,
+    }
+}
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 9341bd1564b..3a7eec57710 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,9 +1,10 @@
 import { Component } from "@odoo/owl";
+import { Card } from "./card/card";
 import { Counter } from "./counter/counter";
 
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
 
-    static components = { Counter };
+    static components = { Card, Counter };
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index fa23e7ff300..d94d64b6b0a 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -5,5 +5,9 @@
             <Counter />
             <Counter />
         </div>
+        <div>
+            <Card title="'card 1'" content="'content of card 1'"/>
+            <Card title="'card 2'" content="'content of card 2'"/>
+        </div>
     </t>
 </templates>

From 108947d9cae61ab4dafc0a2ef2d47b1f1b4a86cb Mon Sep 17 00:00:00 2001
From: samde <samde@odoo.com>
Date: Fri, 31 Jul 2026 14:09:27 +0200
Subject: [PATCH 4/6] [IMP] chapter 1.4

---
 awesome_owl/static/src/card/card.js   |  6 +++---
 awesome_owl/static/src/main.js        |  1 -
 awesome_owl/static/src/playground.js  | 10 +++++++++-
 awesome_owl/static/src/playground.xml |  4 ++--
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/awesome_owl/static/src/card/card.js b/awesome_owl/static/src/card/card.js
index cf951c9084b..596f331df94 100644
--- a/awesome_owl/static/src/card/card.js
+++ b/awesome_owl/static/src/card/card.js
@@ -5,14 +5,14 @@ export class Card extends Component {
     static template = xml`
         <div class="card d-inline-block m-2" style="width: 18rem;">
             <div class="card-body">
-                <h5 class="card-title" t-esc="props.title" />
-                <p class="card-text" t-esc="props.content" />
+                <h5 class="card-title" t-out="props.title" />
+                <p class="card-text" t-out="props.content" />
             </div>
         </div>
     `;
 
     static props = {
         title: String,
-        content: String,
+        content: [Object, String],
     }
 }
diff --git a/awesome_owl/static/src/main.js b/awesome_owl/static/src/main.js
index b78166ed913..dc156f424bc 100644
--- a/awesome_owl/static/src/main.js
+++ b/awesome_owl/static/src/main.js
@@ -9,4 +9,3 @@ const config = {
 
 // Mount the Playground component when the document.body is ready
 whenReady(() => mountComponent(Playground, document.body, config));
-
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 3a7eec57710..2d8c8f429ac 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,4 +1,4 @@
-import { Component } from "@odoo/owl";
+import { Component, markup } from "@odoo/owl";
 import { Card } from "./card/card";
 import { Counter } from "./counter/counter";
 
@@ -7,4 +7,12 @@ export class Playground extends Component {
     static template = "awesome_owl.playground";
 
     static components = { Card, Counter };
+
+    get htmlContent() {
+        return markup("<strong>This is bold</strong>");
+    }
+
+    get rawHtmlContent() {
+        return "<strong>This is not bold</strong>";
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index d94d64b6b0a..41ef9c7ee9b 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -6,8 +6,8 @@
             <Counter />
         </div>
         <div>
-            <Card title="'card 1'" content="'content of card 1'"/>
-            <Card title="'card 2'" content="'content of card 2'"/>
+            <Card title="'card 1'" content="rawHtmlContent"/>
+            <Card title="'card 2'" content="htmlContent"/>
         </div>
     </t>
 </templates>

From 14d01c0748a19f9ae93dd12e62c61558ff0610ed Mon Sep 17 00:00:00 2001
From: samde <samde@odoo.com>
Date: Fri, 31 Jul 2026 14:15:33 +0200
Subject: [PATCH 5/6] [IMP] chapter 1.5

---
 awesome_owl/static/src/counter/counter.js | 2 ++
 awesome_owl/static/src/playground.js      | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index cf9e4c9edf2..b149afcffc4 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -8,6 +8,8 @@ export class Counter extends Component {
         </div>
     `;
 
+    static props = {};
+
     setup() {
         this.state = useState({ value: 0 });
     }
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index 2d8c8f429ac..eb42f492b7d 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -8,6 +8,8 @@ export class Playground extends Component {
 
     static components = { Card, Counter };
 
+    static props = {};
+
     get htmlContent() {
         return markup("<strong>This is bold</strong>");
     }

From 6e8575a88a86c20757ea7ffbe5fc59d67f8ebb4a Mon Sep 17 00:00:00 2001
From: samde <samde@odoo.com>
Date: Fri, 31 Jul 2026 14:48:13 +0200
Subject: [PATCH 6/6] [IMP] chapter 1.6

---
 awesome_owl/static/src/counter/counter.js |  5 ++++-
 awesome_owl/static/src/playground.js      | 12 ++++++++++--
 awesome_owl/static/src/playground.xml     | 13 ++++++++-----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/awesome_owl/static/src/counter/counter.js b/awesome_owl/static/src/counter/counter.js
index b149afcffc4..1deffc13606 100644
--- a/awesome_owl/static/src/counter/counter.js
+++ b/awesome_owl/static/src/counter/counter.js
@@ -8,7 +8,9 @@ export class Counter extends Component {
         </div>
     `;
 
-    static props = {};
+    static props = {
+        onChange: { type: Function, optional: true },
+    };
 
     setup() {
         this.state = useState({ value: 0 });
@@ -16,5 +18,6 @@ export class Counter extends Component {
 
     increment() {
         this.state.value++;
+        this.props.onChange?.();
     }
 }
diff --git a/awesome_owl/static/src/playground.js b/awesome_owl/static/src/playground.js
index eb42f492b7d..25400c8d750 100644
--- a/awesome_owl/static/src/playground.js
+++ b/awesome_owl/static/src/playground.js
@@ -1,4 +1,4 @@
-import { Component, markup } from "@odoo/owl";
+import { Component, markup, useState } from "@odoo/owl";
 import { Card } from "./card/card";
 import { Counter } from "./counter/counter";
 
@@ -7,9 +7,13 @@ export class Playground extends Component {
     static template = "awesome_owl.playground";
 
     static components = { Card, Counter };
-
     static props = {};
 
+    setup() {
+        this.sum = useState({ value: 0 });
+        this.onChange = this.onChange.bind(this);
+    }
+
     get htmlContent() {
         return markup("<strong>This is bold</strong>");
     }
@@ -17,4 +21,8 @@ export class Playground extends Component {
     get rawHtmlContent() {
         return "<strong>This is not bold</strong>";
     }
+
+    onChange() {
+        this.sum.value++;
+    }
 }
diff --git a/awesome_owl/static/src/playground.xml b/awesome_owl/static/src/playground.xml
index 41ef9c7ee9b..01d01af484f 100644
--- a/awesome_owl/static/src/playground.xml
+++ b/awesome_owl/static/src/playground.xml
@@ -1,13 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="awesome_owl.playground">
-        <div class="playground p-3">
-            <Counter />
-            <Counter />
+        <div>
+            <div class="playground p-3">
+                <Counter onChange="onChange" />
+                <Counter onChange="onChange" />
+            </div>
+            <p>The sum is: <t t-esc="sum.value" /></p>
         </div>
         <div>
-            <Card title="'card 1'" content="rawHtmlContent"/>
-            <Card title="'card 2'" content="htmlContent"/>
+            <Card title="'card 1'" content="rawHtmlContent" />
+            <Card title="'card 2'" content="htmlContent" />
         </div>
     </t>
 </templates>