OWL Javascript Project Starter

This repo is an example on how to start a real project with the odoo owl framework.

Features

• OWL
• Javascript
• Livereload
• TailwindCSS + css purging in production
• Rollup

Installation

This repo is a "template repository". It means you can quickly create repositories based on this one, without it being a fork.

Otherwise, you may clone it:

git clone https://github.com/SimonGenin/OWL-Typescript-Project-Starter

Install dependencies:

npm install

Dev with livereload:

npm run dev

Production build

npm run build

Run tests

npm run test

Components

It is expected to create components in one file, following this convention:

import { Component, useState, tags } from "@odoo/owl";

export class App extends Component {
  state = useState({ text: "Owl" });
  update() {
    this.state.text = this.state.text === "Owl" ? "World" : "Owl";
  }
}

App.template = tags.xml/*xml*/ `
    <div t-name="App" class="bg-white shadow m-8 p-2 rounded cursor-pointer" t-on-click="update">
      Hello <t t-esc="state.text"/>
    </div>
`;

The template is defined in the file on the bottom and has tailwindcss classes.

Styles

As it uses Tailwind and its config file, not much has been done to add your own style rules. I'm still working on a nice solution.