Components

Mayu components are written in a dialect of Haml. Mayu parses Haml code and transforms it into Ruby.

To see how these transformations are made, see the Haml transformer test examples.

Component structure

This is the basic structure of a component:

:ruby
  # optional ruby block
%p
  Haml goes here
:css
  /* optional css block */

In the :ruby block, which has to come first, you can import other components and define methods.

A basic component

Here is the most basic component

%p Hello world

It compiles into:

Mayu::VDOM::H[:p, "Hello world"]

Multiple children

Only the last child is returned, so if you want to return more than one element you need to group them.

%div
  %p Hello world
  %button Click me

Interpolation

You can perform string interpolation in a lot of places:

:ruby
  text = "hello world"
%div
  %p Contents of text: #{text.inspect}
  %button(title=text) Button with a title
  %button{title: "text: #{text}"} Button with a title