🦉 Как писать однофайловые компоненты 🦉

Очень полезно группировать код по функционалу, а не по типам файлов. Это упрощает масштабирование приложения большого размера.

Для того, чтобы сделать это Owl имеет две небольших вспомогательных функции которые позволяют легко определять шаблоны или стили внутри javascript (или typescript) файла: это xml и css

Это означает что шаблон, стили и код javascript может быть определен в одном и том же файле. Например:

const { Component } = owl;
const { xml, css } = owl.tags;

// -----------------------------------------------------------------------------
// TEMPLATE
// -----------------------------------------------------------------------------
const TEMPLATE = xml/* xml */ `
	<div class="main">
		<Sidebar/>
		<Content />
	</div>`;

// -----------------------------------------------------------------------------
// STYLE
// -----------------------------------------------------------------------------
const STYLE = css/* css */ `
  .main {
    display: grid;
    grid-template-columns: 200px auto;
  }
`;

// -----------------------------------------------------------------------------
// CODE
// -----------------------------------------------------------------------------
class Main extends Component {
  static template = TEMPLATE;
  static style = STYLE;
  static components = { Sidebar, Content };

  // остальная часть компонента...
}

Обратите внимание, что в приведенном выше примере есть встроенный комментарий xml сразу после вызова xml. Это полезно для при использовании модулей редактора, таких как аддон для VS Code Comment tagged templates, который, если его установить, добавляет подсветку синтаксиса к содержимому строки шаблона.