Syntax guide

Props

To read props passed to a component, you can use $foobar.

Self / recursion

The constant Self is defined to point at the current class, which is useful if you want to make a tree.

%ul
  = Dir.entries($path).map do |path|
    %li[path]
      %Self(path=path)

Whitespace

Here comes the biggest difference between Mayu Haml and regular Haml. Whitespace is significant in HTML in some cases, and it’s very important for the patching algorithm that the DOM and the VDOM are in sync, and every time there has been issues with it, it has been because of unwanted whitespace.

Therefore, Mayu strips whitespaces in places where regular Haml doesn’t, and the operators for inserting whitespace work somewhat differently.

All these paragraphs will turn into <p>Hello world</p>.

%p Hello world
%p
  Hello world
%p
  Hello
  world
%p

  Hello world

If you want to include whitespace between text and elements, you need to use the < and > operators.

%p
  Read more on
  %a(href="https://github.com/mayu-live/framework")< GitHub
  \\.

Notice the < after the link. That operator will add a space before the element. There will be no space between the link and the dot, because the > operator was not used.

• < adds a space before an element.
• > adds a space after an element.

Lists and keys

Mayu uses keys to identify which items have been added, changed or removed from lists, just like React does.

You can use the Object Reference syntax in Haml to specify keys. Example:

%ul
  = todos.map do |todo|
    %li[todo.id]= todo.text

Pattern matching

You can use pattern matching in a lot of places, and it’s encouraged, because it verifies that structures are have the expected format. If patterns don’t match, you get NoMatchingPatternError, so you will know exactly why something went wrong.

Here are some useful links:

• Ruby 3.1 Pattern matching RDoc
• Ruby 3.1 - Pattern Matching
• Second look at pattern matching in Ruby
• An Introduction to Pattern Matching in Ruby

:ruby
  def initialize =
    @count = $initial_count || 0
  def handle_click(event) =
    case event
    in { target: { name: "increment" } }
      @count += 1
    in { target: { name: "decrement" } }
      @count -= 1
    end
%output= @count
%button(onclick=handle_click name="increment")
%button(onclick=handle_click name="decrement")

Early returns

The following snippet will show a button, and once it has been clicked, the component will instead show a paragraph.

:ruby
  def initialize
    @clicked = false
  end
  def handle_click(event)
    @clicked = true
  end
= return if @clicked
  %p You clicked the button.
%button(onclick=handle_click) Click me

You can also use return unless.

= return unless $data
  %p Loading…
%pre= $data

Head and title

Put %title, %meta and %link inside %head, anywhere in a component. Mayu moves them into the document’s <head>.

%head
  %title Hello

A %title with a template attribute wraps every title below it in the tree, such as the titles of pages rendered inside a layout. Its own text is used when nothing below sets a title. Nested templates are applied from the innermost out.

-# root.haml
%head
  %title(template="%s | Acme") Acme
-# pages/blog/+layout.haml
%head
  %title(template="%s | Blog") Blog
-# pages/blog/[slug]/+page.haml
%head
  %title Hello

The page above gets the title Hello | Blog | Acme, the blog layout alone gives Blog | Acme, and any other page without a title gives Acme.

Add absolute to use a title as is, without any templates.

%head
  %title(absolute) Hello