A simple Hyperstack Component

SimpleHSComponent.md

Here is a simple Rails Model and a Hyperstack Component. The Hyperstack Component uses Opal Ruby. Opal is a version of Ruby that runs on the Browser.

Hyperstack is a gem that wraps React with a Ruby DSL.

class Order < ApplicationRecord
  ...
  scope :shipped, -> () { where(status: :shipped) }
  ...
end

class OrdersShipped < HyperComponent
  def format_number(number)
    number.to_s.reverse.gsub(/(\d{3})(?=\d)/, '\\1,').reverse
  end

  render(DIV, class: 'orders-shipped') do
    format_number Order.shipped.count
  end
end

Can you figure out what HTML will be generated by the OrdersShipped component if there are 5327 shipped orders?