mayu-live / framework

Mayu is a live updating server-side component-based VDOM rendering framework written in Ruby
https://mayu.live
GNU Affero General Public License v3.0
137 stars 4 forks source link

css: Create classes for tag-selectors and apply them automatically #25

Closed aalin closed 1 year ago

aalin commented 1 year ago
:ruby
  def self.get_initial_state(initial_value: 0)
    { count: initial_value }
  end

  def handle_decrement(_)
    update do |state|
      { count: [0, state[:count].pred].max }
    end
  end

  def handle_increment(_)
    update do |state|
      { count: state[:count].succ }
    end
  end

:css
  article {
    display: flex;
  }

  output {
    font-size: 2em;
  }

  button {
    background: #f0f;
  }

- prev_disabled = state[:count].zero?

%article
  %button(title="Decrement" onclick=handle_decrement){disabled: prev_disabled}
    -
  %output
    = state[:count]
  %button(title="Increment" onclick=handle_increment)
    +

It would be pretty neat if class names were generated for these tags and matched automatically with the elements...

With this change, if one would write small components and compose them into larger, and using semantic HTML, class selectors wouldn't have to be used very often...