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?