[IMP] awesome_owl: add counter component as sub component to playground

Author: msho-odoo

awesome_owl/static/src/counter.js

@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { Component, useState } from "@odoo/owl";
+
+export class Counter extends Component {
+    static template = "awesome_owl.counter";
+
+    setup() {
+        this.state = useState({ value: 0 });
+    }
+
+    increment() {
+        this.state.value++;
+    }
+}

awesome_owl/static/src/counter.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_owl.counter">
+        <div>Hello World
+            <p>Counter: <t t-esc="state.value"/>
+            </p>
+            <button class="btn btn-primary" t-on-click="increment">Increment</button>
+        </div>
+    </t>
+
+</templates>

awesome_owl/static/src/playground.js

@@ -1,7 +1,9 @@
 /** @odoo-module **/
 
-import { Component } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
+import { Counter } from "./counter";
 
 export class Playground extends Component {
     static template = "awesome_owl.playground";
-}
+    static components = { Counter };
+}

awesome_owl/static/src/playground.xml

@@ -2,9 +2,8 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_owl.playground">
-        <div class="p-3">
-            hello world
-        </div>
+        <Counter></Counter>
+        <Counter></Counter>
     </t>
 
-</templates>
+</templates>