Odoo OWL Component Example + Owl Component Inheritance (Patching Owl Components)

component.js

odoo.define('my.component', function (require) {
    "use strict";

    const { Component, useState } = owl;
    const { xml } = owl.tags;
    const { patch } = require('web.utils');

    // import { patch } from "@web/core/utils/patch";

    class MyComponent extends Component {

        static template = xml`
            <div class="bg-info text-center p-2">
                <i class="fa fa-arrow-left p-1"
                    style="cursor: pointer;"
                    t-on-click="onPrevious"> </i>
                <b t-esc="messageList[Math.abs(state.currentIndex%4)]"/>
                <i class="fa fa-arrow-right p-1"
                    style="cursor: pointer;"
                    t-on-click="onNext"> </i>
                <i class="fa fa-close p-1 float-right"
                    style="cursor: pointer;"
                    t-on-click="onRemove"> </i>
            </div>`

        constructor() {
            console.log('CALLED:> constructor');
            super(...arguments);
            this.messageList = [
                'Hello World',
                'Welcome to Odoo',
                'Odoo is awesome',
                'You are awesome too'
            ];
            this.state = useState({ currentIndex: 0 });
        }

        async willStart() {
            console.log('CALLED:> willStart');
        }

        mounted() {
            console.log('CALLED:> mounted');
        }

        willPatch() {
            console.log('CALLED:> willPatch');
        }

        patched() {
            console.log('CALLED:> patched');
        }

        willUnmount() {
            console.log('CALLED:> willUnmount');
        }

        onRemove(ev) {
            this.destroy();
        }
        onNext(ev) {
            this.state.currentIndex++;
        }
        onPrevious(ev) {
            this.state.currentIndex--;
        }
    }

    patch(MyComponent.prototype, "test_patching_my_component", {
        setup() {
            this._super(...arguments);
            console.log("patch patch patch setup");
        }
    });

    owl.utils.whenReady().then(() => {
        const app = new MyComponent();
        app.mount(document.body);
    });

});