opal_hot_reloader 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 4556d3643d7dae2b15f95ee81bc895b3f4d7d5e9
+  data.tar.gz: dc4f19e56f5f325f98b2d317c6d05b74acd6e1b9
+SHA512:
+  metadata.gz: b202a24741fd488838f95030164a223c9f344e60b772cd78d40a56ceafb764e90dc89869c7e45e3a1c334db5d6f05c026b9d66676254db5aca3e86437a38fc22
+  data.tar.gz: 608dd3b9986e0343b3d6d1bc5b876af7d86319b72fef758c924c560d49706e098bd94c3131084d7a69fac7aff89ece56b7fbab02456dcd0bb3ab5037a45de321

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.2.1
+before_install: gem install bundler -v 1.10.6

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in opal_hot_reloader.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Forrest Chang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,143 @@
+# OpalHotReloader
+
+opal-hot-reloader is a hot reloader for [Opal](http://opalrb.org).  It has built in [react.rb](http://reactrb.org) support and can be extended to support an arbitrary hook to be run after code is evaluted.  It watches directories specified and when a file is modified it pushes the change via websocket to the client.  opal-hot-reloader reloader will reload the following without reloading the whole page and destroying any state the page has.
+- opal code
+- css (currently supporting Rack::Sass:Place and Rails asset pipeline)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'opal_hot_reloader' # currently on github only, gem coming soon
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install opal_hot_reloader
+
+
+## Usage
+
+### Server Setup
+
+#### NOTE: fixed for Opal 0.10 as of commit d2dc849 - repull if not working for 0.10.0
+
+After adding `gem "opal_hot_loader"` to your gemfile, you must start the server-side part. This will allow websocket connections, and whenever a file is changed it will send it via the socket to listening clients.
+
+To start the server-side of the hotloader:
+```
+opal-hot-reloader -p 25222 -d dir1,dir2,dir3
+
+Usage: opal-hot-reloader [options]
+    -p, --port [INTEGER]             port to run on, defaults to 25222
+    -d, --directories x,y,z          comma separated directories to watch
+```
+
+For a react.rb Rails app, opal-hot-reloader automatically includes app/assets/javascripts,app/views/components if they exist
+
+Example adding 2 directories
+```
+opal-hot-reloader -d app/js,app/client/components
+```
+
+You may consider using [foreman](https://github.com/ddollar/foreman/)
+and starting the Rails server and hot reloader at the same time.  If
+you are doing react.rb development w/Rails, you may already be doing
+so with the Rails server and webpack.
+
+
+### Client Setup
+
+Require in an opal file (for opal-rails apps application.js.rb is a good place) and start listening for changes:
+
+#### Note: OpalHotReloader.listen() deprecation
+OpalHotReloader.listen() used to take a 2nd Boolean parameter to signify a reactrb app.  This is deprecated and no longer needed.
+
+```ruby
+require 'opal_hot_reloader'
+
+# @param port [Integer] opal hot reloader port to connect to. Defaults to 25222 to match opal-hot-loader default
+OpalHotReloader.listen(25222)
+```
+
+If you are using the default port then you can just call:
+```
+OpalHotReloader.listen
+```
+
+This will open up a websocket from the client to the server on the given port. The server-side should already be running.
+
+Enjoy!
+
+## Vision
+
+Some of you might be asking?  Why do this, isn't this reinventing the
+wheel by programs like webpack, etc.? I should mention that
+reinventing the wheel seems happens all the time in the Javascript
+world.
+
+Yes and no. opal-hot-reloader is an "All Ruby(Opal)", self contained
+system, so if you're doing any kind of Opal frontend/Ruby backend
+webserver type of project, you will be able to just drop in
+opal-hot-reloader and it will work out of the box without having
+install/configure webpack or similar.
+
+I believe it will be most advantageous for Opal to be able to straddle
+a hybrid approach where:
+
+* With Opal and Rails, we use the existing mechanism, sprockets, to
+serve up all the things it does in the "normal" Rails ecosystem. I.e
+we want to work with the system. We want all the perks of Ruby and
+Rails without have to hand cobble it ourselves
+* We use webpack or similar for being a "1st class JS citizen".  This
+gives us access to all the frontend assets in npm, we want all those
+options and perks.
+
+While I do favor moving as much Javascript to webpack, following suit
+to React.js's lead, I see an "all webpack solution" for Opal apps
+being only one of a few permutations, and not particularly appealing
+to most Rails programmers - who I think is the largest demographic
+likely to want to do Opal programming.
+
+While we wait for the other approaches to evolve and get implemented
+this solution is here and works now.  It works with an "All Ruby"
+system, it works with a Rails app that is using webpack to provide
+react.js components to react.rb.
+
+### Goals
+* Bring the benefits of "leading edge web development" to All Ruby
+  (via Opal) full stack development.  One of my efforts to be more
+  like Einstein in “Opening up yet another fragment of the frontier of
+  beauty” - i.e. share the joy.
+* Batteries included out of the box - make it (increasingingly) easy
+  for Rubyists to enjoy the previous goal.  This is a manifestation of
+  the "Ruby Way" of making the programmer happy
+* Try to add the least amount of additional dependencies to projects
+  it's used in
+
+
+
+## Screencasts
+
+* Quickie intro to opal-hot-reloader https://youtu.be/NQbzL7fNOks
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/fkchang/opal_hot_reloader.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/gem_tasks"
+require 'opal'
+require 'opal-rspec'
+require 'opal_hot_reloader'     # load this server side to setup opal paths
+require 'opal/sprockets/environment'
+require 'opal/rspec/rake_task'
+
+require "rspec/core/rake_task"
+
+
+Opal.append_path File.expand_path('../spec-opal', __FILE__)
+Opal::RSpec::RakeTask.new("opal:spec") do |server, task|
+  task.files = FileList['spec-opal/**/*_spec.rb']
+end
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "opal_hot_reloader"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/opal-hot-reloader

@@ -0,0 +1,22 @@
+#!/usr/bin/env ruby
+
+require 'bundler/setup'
+require "opal_hot_reloader/server"
+
+options = {:port => 25222, :directories => ['app']}
+OptionParser.new do |opts|
+  opts.banner = "Usage: opal-hot-reloader [options]"
+  
+  opts.on("-p", '--port [INTEGER]', Integer, 'port to run on, defaults to 25222') do |v|
+    options[:port] = v
+  end
+
+  opts.on("-d", '--directories x,y,z', Array, "comma separated directories to watch. Ex. to add 2 directories '-d app/assets/js,app/client/components'. Directoriess automatically included if they exist are:\n\t\t* app/assets/javascripts\n\t\t* app/views/components") do |v|
+    options[:directories] = v
+  end
+  
+end.parse!
+
+server = OpalHotReloader::Server.new(options)
+puts "Listening on port #{options[:port]}, watching for changes in #{options[:directories].join(', ')}"
+server.loop

data/bin/setup

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/lib/opal_hot_reloader.rb

@@ -0,0 +1,9 @@
+require 'opal'
+require "opal_hot_reloader/version"
+require "opal_hot_reloader/server"
+
+module OpalHotReloader
+  # Your code goes here...
+end
+
+Opal.append_path(File.expand_path(File.join('..', '..', 'opal'), __FILE__).untaint)

data/lib/opal_hot_reloader/server.rb

@@ -0,0 +1,284 @@
+require 'websocket'
+require 'socket'
+require 'fiber'
+require 'listen'
+require 'optparse'
+require 'json'
+
+module OpalHotReloader
+  # Most of this lifted from https://github.com/saward/Rubame
+  class Server
+
+    attr_reader :directories
+    def initialize(options)
+      Socket.do_not_reverse_lookup
+      @hostname = '0.0.0.0'
+      @port = options[:port]
+      setup_directories(options)
+
+      @reading = []
+      @writing = []
+
+      @clients = {} # Socket as key, and Client as value
+
+      @socket = TCPServer.new(@hostname, @port)
+      @reading.push @socket
+    end
+
+    # adds known directories automatically if they exist
+    # - rails js app/assets/javascripts
+    # - reactrb rails defaults app/views/components
+    # - you tell me and I'll add them
+    def setup_directories(options)
+      @directories = options[:directories] || []
+      [
+        'app/assets/javascripts',
+        'app/views/components'
+      ].each { |known_dir|
+        if !@directories.include?(known_dir) && File.exists?(known_dir)
+          @directories << known_dir
+        end
+      }
+    end
+
+    def accept
+      socket = @socket.accept_nonblock
+      @reading.push socket
+      handshake = WebSocket::Handshake::Server.new
+      client = Client.new(socket, handshake, self)
+
+      while line = socket.gets
+        client.handshake << line
+        break if client.handshake.finished?
+      end
+      if client.handshake.valid?
+        @clients[socket] = client
+        client.write handshake.to_s
+        client.opened = true
+        return client
+      else
+        close(client)
+      end
+      return nil
+    end
+
+
+    def send_updated_file(modified_file)
+      if modified_file =~ /\.rb$/
+        file_contents = File.read(modified_file)
+        update = {
+          type: 'ruby',
+          filename: modified_file,
+          source_code: file_contents
+        }.to_json
+      end
+      if modified_file =~ /\.s?[ac]ss$/
+        # TODO: Switch from hard-wired path assumptions to using SASS/sprockets config
+        relative_path = Pathname.new(modified_file).relative_path_from(Pathname.new(Dir.pwd))
+        url = relative_path.to_s
+          .sub('public/','')
+          .sub('/sass/','/')
+          .sub(/\.s[ac]ss/, '.css')
+        update = {
+          type: 'css',
+          filename: modified_file,
+          url: url
+        }.to_json
+      end
+      if update
+        @clients.each { |socket, client| client.send(update) }
+      end
+    end
+
+    PROGRAM = 'opal-hot-reloader'
+    def loop
+      listener = Listen.to(*@directories, only: %r{\.(rb|s?[ac]ss)$}) do |modified, added, removed|
+        modified.each { |modified_file| send_updated_file(modified_file) }
+        puts "modified absolute path: #{modified}"
+        puts "added absolute path: #{added}"
+        puts "removed absolute path: #{removed}"
+      end
+      listener.start
+
+      puts "#{PROGRAM}: starting..."
+      while (!$quit)
+        run do |client|
+          client.onopen do
+            puts "#{PROGRAM}:  client open"
+          end
+          client.onmessage do |mess|
+            puts "PROGRAM:  message received: #{mess}"
+          end
+          client.onclose do
+            puts "#{PROGRAM}:  client closed"
+          end
+        end
+        sleep 0.2
+      end
+    end
+
+    def read(client)
+
+  pairs = client.socket.recvfrom(2000)
+  messages = []
+
+  if pairs[0].length == 0
+    close(client)
+  else
+    client.frame << pairs[0]
+
+    while f = client.frame.next
+      if (f.type == :close)
+        close(client)
+        return messages
+      else
+        messages.push f
+      end
+    end
+        
+  end
+
+  return messages
+
+end
+
+def close(client)
+  @reading.delete client.socket
+  @clients.delete client.socket
+  begin
+    client.socket.close
+  rescue
+  end
+  client.closed = true
+end
+
+def run(time = 0, &blk)
+  readable, writable = IO.select(@reading, @writing, nil, 0)
+
+  if readable
+    readable.each do |socket|
+      client = @clients[socket]
+      if socket == @socket
+        client = accept
+      else
+        msg = read(client)
+        client.messaged = msg
+      end
+
+      blk.call(client) if client and blk
+    end
+  end
+
+  # Check for lazy send items
+  timer_start = Time.now
+  time_passed = 0
+  begin
+    @clients.each do |s, c|
+      c.send_some_lazy(5)
+    end
+    time_passed = Time.now - timer_start
+  end while time_passed < time
+end
+
+def stop
+  @socket.close
+end
+end
+
+class Client
+  attr_accessor :socket, :handshake, :frame, :opened, :messaged, :closed
+
+  def initialize(socket, handshake, server)
+    @socket = socket
+    @handshake = handshake
+    @frame = WebSocket::Frame::Incoming::Server.new(:version => @handshake.version)
+    @opened = false
+    @messaged = []
+    @lazy_queue = []
+    @lazy_current_queue = nil
+    @closed = false
+    @server = server
+  end
+
+  def write(data)
+    @socket.write data
+  end
+
+  def send(data)
+    frame = WebSocket::Frame::Outgoing::Server.new(:version => @handshake.version, :data => data, :type => :text)
+    begin
+      @socket.write frame
+      @socket.flush
+    rescue
+      @server.close(self) unless @closed
+    end
+  end
+
+  def lazy_send(data)
+    @lazy_queue.push data
+  end
+
+  def get_lazy_fiber
+    # Create the fiber if needed
+    if @lazy_fiber == nil or !@lazy_fiber.alive?
+      @lazy_fiber = Fiber.new do
+        @lazy_current_queue.each do |data|
+          send(data)
+          Fiber.yield unless @lazy_current_queue[-1] == data
+        end
+      end
+    end
+
+    return @lazy_fiber
+  end
+
+  def send_some_lazy(count)
+    # To save on cpu cycles, we don't want to be chopping and changing arrays, which could get quite large.  Instead,
+    # we iterate over an array which we are sure won't change out from underneath us.
+    unless @lazy_current_queue
+      @lazy_current_queue = @lazy_queue
+      @lazy_queue = []
+    end
+
+    completed = 0
+    begin
+      get_lazy_fiber.resume
+      completed += 1
+    end while (@lazy_queue.count > 0 or @lazy_current_queue.count > 0) and completed < count
+
+  end
+
+  def onopen(&blk)
+    if @opened
+      begin
+        blk.call
+      ensure
+        @opened = false
+      end
+    end
+  end
+
+  def onmessage(&blk)
+    if @messaged.size > 0
+      begin
+        @messaged.each do |x|
+          blk.call(x.to_s)
+        end
+      ensure
+        @messaged = []
+      end
+    end
+  end
+
+  def onclose(&blk)
+    if @closed
+      begin
+        blk.call
+      ensure
+      end
+    end
+  end
+end
+
+line = 0
+end

data/lib/opal_hot_reloader/version.rb

@@ -0,0 +1,3 @@
+module OpalHotReloader
+  VERSION = "0.1.0"
+end

data/opal/opal_hot_reloader.rb

@@ -0,0 +1,74 @@
+require 'opal_hot_reloader/reactrb_patches'
+require 'opal_hot_reloader/css_reloader'
+require 'opal-parser' # gives me 'eval', for hot-loading code
+
+require 'json'
+
+# Opal client to support hot reloading
+$eval_proc = proc { |s| eval s }
+class OpalHotReloader
+
+  def connect_to_websocket(port)
+    host = `window.location.host`.sub(/:\d+/, '')
+    host = '127.0.0.1' if host == ''
+    ws_url = "#{host}:#{port}"
+    puts "Hot-Reloader connecting to #{ws_url}"
+    %x{
+      ws = new WebSocket('ws://' + #{ws_url});
+      // console.log(ws);
+      ws.onmessage = #{lambda { |e| reload(e) }}
+    }
+  end
+
+  def reload(e)
+    reload_request = JSON.parse(`e.data`)
+    if reload_request[:type] == "ruby"
+      puts "Reloading ruby #{reload_request[:filename]}"
+      $eval_proc.call reload_request[:source_code]
+      if @reload_post_callback
+        @reload_post_callback.call
+      else
+        puts "not reloading code"
+      end
+    end
+    if reload_request[:type] == "css"
+      @css_reloader.reload(reload_request, `document`)
+    end
+  end
+
+  # @param port [Integer] opal hot reloader port to connect to
+  # @param reload_post_callback [Proc] optional callback to be called after re evaluating a file for example in react.rb files we want to do a React::Component.force_update!
+  def initialize(port=25222, &reload_post_callback)
+    @port = port
+    @reload_post_callback  = reload_post_callback
+    @css_reloader = CssReloader.new
+  end
+  # Opens a websocket connection that evaluates new files and runs the optional @reload_post_callback
+  def listen
+    connect_to_websocket(@port)
+  end
+
+  # convenience method to start a listen w/one line
+  # @param port [Integer] opal hot reloader port to connect to. Defaults to 25222 to match opal-hot-loader default
+  # @deprecated reactrb - this flag no longer necessary and will be removed in gem release 0.2
+  def self.listen(port=25222, reactrb=false)
+    return if @server
+    if reactrb
+      warn "OpalHotReloader.listen(#{port}): reactrb flag is deprectated and will be removed in gem release 0.2. React will automatically be detected"
+    end
+    create_framework_aware_server(port)
+  end
+  # Automatically add in framework specific hooks
+
+  def self.create_framework_aware_server(port)
+    if defined? ::React
+      ReactrbPatches.patch!
+      @server = OpalHotReloader.new(port) { React::Component.force_update! }
+    else
+      puts "No framework detected"
+      @server = OpalHotReloader.new(port)
+    end
+    @server.listen
+  end
+
+end

data/opal/opal_hot_reloader/css_reloader.rb

@@ -0,0 +1,39 @@
+require 'native'
+class OpalHotReloader
+  class CssReloader
+
+    def reload(reload_request, document)
+      url = reload_request[:url]
+      puts "Reloading CSS: #{url}"
+      to_append = "t_hot_reload=#{Time.now.to_i}"
+      links = Native(`document.getElementsByTagName("link")`)
+      (0..links.length-1).each { |i|
+        link = links[i]
+        if link.rel == 'stylesheet' && is_matching_stylesheet?(link.href, url)
+          if  link.href !~ /\?/
+            link.href += "?#{to_append}"
+          else
+            if link.href !~ /t_hot_reload/
+              link.href += "&#{to_append}"
+            else
+              link.href = link.href.sub(/t_hot_reload=\d+/, to_append)
+            end
+          end
+        end
+      }
+    end
+
+    def is_matching_stylesheet?(href, url)
+      # straight match, like in Rack::Sass::Plugin
+      if href.index(url)
+        true
+      else
+        # Rails asset pipeline match
+        url_base = File.basename(url).sub(/\.s?css+/, '').sub(/\.s?css+/, '')
+        href_base = File.basename(href).sub(/\.self-.*.css.+/, '')
+        url_base == href_base
+      end
+    
+    end
+  end
+end

data/opal/opal_hot_reloader/foo.rb

@@ -0,0 +1,6 @@
+# pee
+class Foo
+  def :bar
+    :bar
+  end
+end

data/opal/opal_hot_reloader/reactrb_patches.rb

@@ -0,0 +1,60 @@
+# patches to support reloading react.rb
+class ReactrbPatches
+  # React.rb needs to be patched so the we don't keep adding callbacks
+  def self.patch!
+    module ::React
+      module Callbacks
+        module ClassMethods
+          def define_callback(callback_name)
+            attribute_name = "_#{callback_name}_callbacks"
+            class_attribute(attribute_name)
+            self.send("#{attribute_name}=", [])
+            define_singleton_method(callback_name) do |*args, &block|
+              # puts "calling new and improved callbacks"
+              callbacks = []
+              callbacks.concat(args)
+              callbacks.push(block) if block_given?
+              self.send("#{attribute_name}=", callbacks)
+            end
+          end
+        end
+      end
+    end
+
+    module ::React
+      module Callbacks
+
+        alias_method :original_run_callback, :run_callback
+
+        def run_callback(name, *args)
+          # monkey patch run callback because its easiest place to hook
+          # into all components lifecycles.
+          React::Component.add_to_global_component_list self if name == :before_mount
+          original_run_callback name, *args
+          React::Component.remove_from_global_component_list self if name == :before_unmount
+        end
+
+      end
+
+      module Component
+
+        def self.add_to_global_component_list instance
+          # puts "Adding #{instance} to component list"
+          (@global_component_list ||= Set.new).add instance
+        end
+
+        def self.remove_from_global_component_list instance
+          # puts "Removing #{instance} from component list"
+          @global_component_list.delete instance
+        end
+
+        def self.force_update!
+          # puts "Forcing global update"
+          @global_component_list && @global_component_list.each(&:force_update!)
+        end
+
+      end
+    end
+
+  end
+end

data/opal/opal_hot_reloader/socket.rb

@@ -0,0 +1,133 @@
+require 'native'
+require 'io/writable'
+
+class OpalHotReloader
+
+  # Code taken from opal browser, did not want to force an opal-browser dependency
+  #
+  # A {Socket} allows the browser and a server to have a bidirectional data
+  # connection.
+  #
+  # @see https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
+  class Socket
+    def self.supported?
+      Browser.supports? :WebSocket
+    end
+
+    include Native
+    include IO::Writable
+
+    def on(str, &block)
+      puts "putting #{str}"
+      b =  block
+      cmd = "foo.on#{str} = #{b}"
+      puts cmd
+      `#{cmd}`
+      # `foo.on#{str} = #{b}`
+    end
+    # include DOM::Event::Target
+
+    #    target {|value|
+    #Socket.new(value) if Native.is_a?(value, `window.WebSocket`)
+    #  }
+
+    # Create a connection to the given URL, optionally using the given protocol.
+    #
+    # @param url [String] the URL to connect to
+    # @param protocol [String] the protocol to use
+    #
+    # @yield if the block has no parameters it's `instance_exec`d, otherwise it's
+    #        called with `self`
+    def initialize(url, protocol = nil, &block)
+      if native?(url)
+        super(url)
+      elsif protocol
+        super(`new window.WebSocket(#{url.to_s}, #{protocol.to_n})`)
+      else
+        super(`new window.WebSocket(#{url.to_s})`)
+      end
+
+      if block.arity == 0
+        instance_exec(&block)
+      else
+        block.call(self)
+      end if block
+    end
+
+    # @!attribute [r] protocol
+    # @return [String] the protocol of the socket
+    alias_native :protocol
+
+    # @!attribute [r] url
+    # @return [String] the URL the socket is connected to
+    alias_native :url
+
+    # @!attribute [r] buffered
+    # @return [Integer] the amount of buffered data.
+    alias_native :buffered, :bufferedAmount
+
+    # @!attribute [r] type
+    # @return [:blob, :buffer, :string] the type of the socket
+    def type
+      %x{
+      switch (#@native.binaryType) {
+        case "blob":
+          return "blob";
+
+        case "arraybuffer":
+          return "buffer";
+
+        default:
+          return "string";
+      }
+    }
+    end
+
+    # @!attribute [r] state
+    # @return [:connecting, :open, :closing, :closed] the state of the socket
+    def state
+      %x{
+      switch (#@native.readyState) {
+        case window.WebSocket.CONNECTING:
+          return "connecting";
+
+        case window.WebSocket.OPEN:
+          return "open";
+
+        case window.WebSocket.CLOSING:
+          return "closing";
+
+        case window.WebSocket.CLOSED:
+          return "closed";
+      }
+    }
+    end
+
+    # @!attribute [r] extensions
+    # @return [Array<String>] the extensions used by the socket
+    def extensions
+      `#@native.extensions`.split(/\s*,\s*/)
+    end
+
+    # Check if the socket is alive.
+    def alive?
+      state == :open
+    end
+
+    # Send data to the socket.
+    #
+    # @param data [#to_n] the data to send
+    def write(data)
+      `#@native.send(#{data.to_n})`
+    end
+
+    # Close the socket.
+    #
+    # @param code [Integer, nil] the error code
+    # @param reason [String, nil] the reason for closing
+    def close(code = nil, reason = nil)
+      `#@native.close(#{code.to_n}, #{reason.to_n})`
+    end
+  end
+
+end

data/opal_hot_reloader.gemspec

@@ -0,0 +1,30 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'opal_hot_reloader/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "opal_hot_reloader"
+  spec.version       = OpalHotReloader::VERSION
+  spec.authors       = ["Forrest Chang"]
+  spec.email         = ["fchang@hedgeye.com"]
+
+  spec.summary       = %q{Opal Hot reloader}
+  spec.description   = %q{Opal Hot Reloader with reactrb suppot}
+  spec.homepage      = "https://github.com/fkchang/opal_hot_reloader"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "bin"
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.10"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "rspec"
+  spec.add_development_dependency "opal-rspec", "~> 0.5.0"
+  
+
+  spec.add_dependency 'listen', '~> 3.0'
+  spec.add_dependency 'websocket'
+end

data/spec-opal/opal_hot_reloader/css_reloader_spec.rb

@@ -0,0 +1,82 @@
+require 'native'
+require 'opal_hot_reloader'
+require 'opal_hot_reloader/css_reloader'
+describe OpalHotReloader::CssReloader do
+  # Creates a DOM stylesheet link
+  # @param href [String] the link url
+  def create_link( href)
+    %x|
+    var ss = document.createElement("link");
+    ss.type = "text/css";
+    ss.rel = "stylesheet";
+    ss.href = #{href};
+    return ss;
+  |
+  end
+
+  # Creates a document test double and the link to check whether it has been altered right
+  # @param href [String] the link url
+  def fake_links_document(href)
+    link = create_link(href)
+    doc = `{ getElementsByTagName: function(name) { links = [ #{link}]; return links;}}`
+    { link: link, document: doc}
+  end
+
+
+  context 'Rack::Sass::Plugin' do
+    it 'should append t_hot_reload to a css path' do
+      css_path = 'stylesheets/base.css'
+      doubles = fake_links_document(css_path)
+      link = Native(doubles[:link])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
+      subject.reload({ url: css_path}, doubles[:document])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}\?t_hot_reload=\d+/
+    end
+
+    it 'should update t_hot_reload argument if there is one already' do 
+      css_path = 'stylesheets/base.css?t_hot_reload=1111111111111'
+      doubles = fake_links_document(css_path)
+      link = Native(doubles[:link])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
+      subject.reload({ url: css_path}, doubles[:document])
+      expect(link[:href]).to match /#{Regexp.escape('stylesheets/base.css?t_hot_reload=')}(\d)+/
+      expect($1).to_not eq '1111111111111'
+    end
+
+    it 'should append t_hot_reload if there are existing arguments' do
+      css_path = 'stylesheets/base.css?some-arg=1'
+      doubles = fake_links_document(css_path)
+      link = Native(doubles[:link])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
+      subject.reload({ url: css_path}, doubles[:document])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}\&t_hot_reload=(\d)+/
+    end
+  end
+
+  context "Rails asset pipeline" do
+    it 'should append t_hot_reload to a css path' do
+      css_path = "http://localhost:8080/assets/company.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1"
+      doubles = fake_links_document(css_path)
+      link = Native(doubles[:link])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
+      raw_scss_path = "app/assets/stylesheets/company.css.css"
+      subject.reload({ url: raw_scss_path}, doubles[:document])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}\&t_hot_reload=\d+/
+    end
+
+    it 'should update t_hot_reload arguments' do
+      css_path ="http://localhost:8080/assets/company.self-055b3f2f4bbc772b1161698989ee095020c65e0283f4e732c66153e06b266ca8.css?body=1&t_hot_reload=1464733023"
+      doubles = fake_links_document(css_path)
+      link = Native(doubles[:link])
+      expect(link[:href]).to match /#{Regexp.escape(css_path)}$/
+      raw_scss_path = "app/assets/stylesheets/company.css.css"
+      subject.reload({ url: raw_scss_path}, doubles[:document])
+      if link[:href] =~ /(.+)\&t_hot_reload=(\d+)/
+        new_timestamp = $2
+        expect(new_timestamp).to_not eq("1464733023")
+      else
+        fail("new link_path is broken")
+      end
+    end
+  end
+end

metadata

@@ -0,0 +1,151 @@
+--- !ruby/object:Gem::Specification
+name: opal_hot_reloader
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Forrest Chang
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2016-10-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.10'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: opal-rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.5.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.5.0
+- !ruby/object:Gem::Dependency
+  name: listen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: websocket
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Opal Hot Reloader with reactrb suppot
+email:
+- fchang@hedgeye.com
+executables:
+- console
+- opal-hot-reloader
+- setup
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/opal-hot-reloader
+- bin/setup
+- lib/opal_hot_reloader.rb
+- lib/opal_hot_reloader/server.rb
+- lib/opal_hot_reloader/version.rb
+- opal/opal_hot_reloader.rb
+- opal/opal_hot_reloader/css_reloader.rb
+- opal/opal_hot_reloader/foo.rb
+- opal/opal_hot_reloader/reactrb_patches.rb
+- opal/opal_hot_reloader/socket.rb
+- opal_hot_reloader.gemspec
+- spec-opal/opal_hot_reloader/css_reloader_spec.rb
+homepage: https://github.com/fkchang/opal_hot_reloader
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Opal Hot reloader
+test_files: []