Skip to content

Instantly share code, notes, and snippets.

catmando /
Last active Jun 24, 2021
A simple Hyperstack Component

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) }

Here is a sample spec, there is a bug in the spec (not in the models.)

What is the bug?

describe Order do
  describe "#submit" do

    before do
 @book = =&gt; "RSpec Intro", :price =&gt; 20)
View hyperstack-broadcast-telemetry.rb
module Hyperstack
class InternalPolicy
def self.log_times(model, times, messages_sent, accumlated_broadcast_time)
times[:broadcast] =
return if times[:broadcast]-times[:start] < 0.0100 # adjust this as needed
::Rails.logger.warn "*******************BROADCASTING MODEL CHANGES**************************"
::Rails.logger.warn "Model: #{model.inspect}"
justification = 0
last_item_finished_at = times[:start]
times.collect { |event, timestamp| [timestamp, event] }
catmando / twitter.rb
Created Feb 26, 2021
Hyperstack vs Hotwire twitter.rb
View twitter.rb
class Tweet < ApplicationRecord
after_create_commit { broadcast_prepend_to "tweets" }
after_update_commit { broadcast_replace_to "tweets" }
after_destroy_commit { broadcast_remove_to "tweets" }
validates :body, presence: true
catmando / _tweet.json.jbuilder
Created Feb 26, 2021
Hyperstack vs. Hotwire .jbuilder file
View _tweet.json.jbuilder
json.extract! tweet, :id, :body, :likes_count, :retweets_count, :created_at, :updated_at
json.url tweet_url(tweet, format: :json)
catmando / controllers.rb
Created Feb 26, 2021
Hyperstack vs Hotwire controllers:
View controllers.rb
class LikesController < ApplicationController
before_action :set_tweet
def create
@tweet.increment! :likes_count
redirect_to @tweet
catmando / _tweet.html.erb
Created Feb 26, 2021
Hyperstack vs Hotwire _tweet.html.erb
View _tweet.html.erb
<%= turbo_frame_tag dom_id(tweet) do %>
<div class="card card-body">
<div><%= tweet.body %></div>
<div class="mt-2">
<%= button_to "Likes (#{tweet.likes_count})", tweet_like_path(tweet), method: :post %>
<%= button_to "Retweets (#{tweet.retweets_count})", tweet_retweet_path(tweet), method: :post %>
<%= link_to "Edit", edit_tweet_path(tweet) %>
catmando / show_tweet.rb
Created Feb 26, 2021
hyperstack vs hotwire - show_tweet.rb
View show_tweet.rb
class ShowTweet < HyperComponent
param :tweet
render(DIV, class: "card card-body") do
DIV { tweet.body } unless @editing
DIV(class: "mt-2") do
BUTTON { "Likes (#{tweet.likes_count})" }.on(:click) { tweet.increment!(:likes_count) }
BUTTON { "Retweets (#{tweet.retweets_count})" }.on(:click) { tweet.increment!(:retweets_count) }
if @editing
View throttled-slider
# app/hyperstack/libs/throttle.rb
class Throttle
# call the provided block (using the run method) no faster than the
# specified update frequency.
def initialize(update_frequency = 0.5, &block)
@update_frequency = update_frequency
@block = block
@last_start_time = - update_frequency

An Example of Getting Rid of Dead Waiting

Consider the following spec which as intermittently failing the should update savings spec.

# spec/integration/drafts/pro/finishing_spec.rb

require 'spec_helper'

describe 'finishing', js: true do