State

Mayu uses instance variables for state. Any time you update an instance variable inside a component, the component will re-render.

Set up state in def initialize.

:ruby
  def initialize
    @count = $initial_count || 0
  end

  def handle_reset
    @count = 0
  end

  def handle_increment(_event)
    @count += 1
  end

  def handle_decrement(_event)
    @count -= 1
  end

%div
  %p Count: #{@count}
  %button(onclick=handle_decrement) Decrement
  %button(onclick=handle_reset) Reset
  %button(onclick=handle_increment) Increment

:css
  p { margin-top: 0; }
  button { margin-right: .5em; }

This will result in the following component:

Count: 0