Escape the frontend hustle & easily create interactive web apps in pure Ruby.

class MyPage < Matestack::Ui::Page

  def response
    plain "hello world"
  end

end

class MyPage < Matestack::Ui::Page

  def prepare
    @items = [
      {name: "A"},
      {name: "B"},
      {name: "C"}
    ]
  end

  def response  
    @items.each do |item|
      item_card item
    end
  end

  def item_card item
    div class: "some-card-style" do
      plain item[:name]
    end
  end

end

class MyPage < Matestack::Ui::Page
  #...
  def response
    @items.each do |item|
      my_card_component item: item
    end
  end

end

class MyCardComponent < Matestack::Ui::Component

  requires :item

  def response
    div class: "some-card-style" do
      plain item[:name]
    end
  end

end

class MyPage < Matestack::Ui::Page

  def response
    action my_action_config do
      button text: "click me"
    end
    toggle show_on: "some_event", hide_after: 5000 do
      plain "Success!"
    end
  end

  def my_action_config
    {
      path: :some_rails_route,
      method: :post,
      success: {
        emit: "some_event"
      }
    }
  end

end

class MyPage < Matestack::Ui::Page

  def prepare
    @new_active_record_instance = MyActiveRecordModel.new
  end

  def response
    form my_form_config do
      form_input key: :some_attribute, type: :text
      form_submit do
        button text: "click me"
      end
    end
    toggle show_on: "submitted", hide_after: 5000 do
      span class: "success-message" do
        plain "created successfully"
      end
    end
    toggle show_on: "failed", hide_after: 5000 do
      span class: "failure-message" do
        plain "data was not saved, please check form"
      end
    end
  end

  def my_form_config
    {
      for: @new_active_record_instance,
      path: :some_rails_route,
      method: :post,
      success: {
        emit: "submitted"
      },
      failure: {
        emit: "failed"
      }
    }
  end

end

class MyPage < Matestack::Ui::Page

  #...

  def response
    form my_form_config do
      #...
    end
    #...
    async rerender_on: "submitted", id: "my-model-list" do
      ul do
        MyActiveRecordModel.last(5).each do |model|
          li text: model.some_attribute
        end
      end
    end
  end

  def my_form_config
    {
      #...
      success: {
        emit: "submitted"
      },
      failure: {
        emit: "failed"
      }
    }
  end

end

class MyPage < Matestack::Ui::Page

  def response
    my_vue_js_component
    toggle show_on: "some_event", hide_after: "3000" do
      span class: "success-message" do
        plain "event triggered from custom vuejs component"
      end
    end
  end

end

class MyVueJsComponent < Matestack::Ui::VueJsComponent

  vue_js_component_name "my-vue-js-component"

  def response
    div class: "my-vue-js-component" do
      button attributes: {"@click": "increaseValue"}
      br
      plain "{{ dynamicValue }}!"
    end
  end

end

MatestackUiCore.Vue.component('my-vue-js-component', {
  mixins: [MatestackUiCore.componentMixin],
  data: () => {
    return {
      dynamicValue: 0
    };
  },
  methods: {
    increaseValue(){
      this.dynamicValue++
      MatestackUiCore.matestackEventHub.$emit("some_event")
    }
  }
});